/* v117 founders-only "Craftpix look" (Dragon 2026-11-11). Each part is a body class toggled by dh/cpxlook.js. Built from mock-craftpix/skin.css. */
/* Craftpix skin for the click-around mockup. Pieces in cpx/ come from fantasy-rpg-gui + rpg-and-mmo-ui-x (resized WebPs). */
body.cpx-btn,body.cpx-win{--cpx-ink:#f1e2b8;--cpx-dim:#c9b68a}
body.cpx-bg #bg{background:#140f0b url(../assets/cpx/bg.webp) center/cover !important}

/* every normal button: Craftpix pill */
body.cpx-btn #app .btn:not(.tab):not(.qb):not(.cmd):not(.foe){
  background:transparent !important;border:11px solid transparent !important;border-width:10px 12px !important;border-image:url(../assets/cpx/b_blue.webp) 30 50 fill / 10px 12px stretch !important;box-sizing:border-box !important;max-width:100%;
  border-radius:0 !important;box-shadow:none !important;color:var(--cpx-ink) !important;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.6) !important;padding:2px 4px !important}
body.cpx-btn #app .btn.primary:not(.tab):not(.qb):not(.cmd){border-image-source:url(../assets/cpx/b_gold.webp) !important}
body.cpx-btn #app .btn.small:not(.tab):not(.qb):not(.cmd){min-height:40px}
body.cpx-btn #app .btn.big{border-image-width:14px 22px !important}
body.cpx-btn #app .btn.war,body.cpx-btn #app .btn.danger{border-image-source:url(../assets/cpx/b_red.webp) !important}

/* home: square tab + quick buttons on framed dark tiles */
body.cpx-tabs #app .btn.tab,body.cpx-tabs #app .btn.qb{
  background:url(../assets/cpx/b_sqdark.webp) center/88% 88% no-repeat !important;border:0 !important;box-shadow:none !important;
  border-image:none !important;position:relative}
body.cpx-tabs #app .btn.tab::before,body.cpx-tabs #app .btn.qb::before{content:"";position:absolute;inset:0;background:url(../assets/cpx/f_square.webp) center/100% 100% no-repeat;pointer-events:none}
body.cpx-tabs #app .tabbar{background:linear-gradient(180deg,rgba(20,14,10,.2),rgba(20,14,10,.9)) !important}

/* top round buttons become the Craftpix round icons */
body.cpx-icons #app .top .ver{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;width:44px;height:44px;min-width:44px}
body.cpx-icons #app .top .ver img.cpx{width:40px !important;height:40px !important;max-width:none !important;margin:0 !important}
body.cpx-icons #app .top .ver.dia{width:auto;display:inline-flex;align-items:center;gap:2px;color:var(--cpx-ink)}
body.cpx-icons #app .top .ver.dia img.cpx{width:26px;height:26px}

/* windows: ornate frame */
body.cpx-win #modal .win{
  background:linear-gradient(rgba(18,13,10,.93),rgba(18,13,10,.93)),url(../assets/cpx/bg.webp) center/cover !important;
  border:22px solid transparent !important;border-image:url(../assets/cpx/f_window.webp) 60 fill stretch !important;border-radius:0 !important;
  box-shadow:0 10px 40px rgba(0,0,0,.8) !important}
body.cpx-win #modal .win h2,body.cpx-win #modal .win h3{color:#f3d68a !important;text-shadow:0 2px 3px #000}
body.cpx-win #modal .win .x{background:url(../assets/cpx/i_x.webp) center/70% no-repeat !important;border:0 !important;color:transparent !important;box-shadow:none !important}
body.cpx-win #modal .win .x img.cpx{opacity:0}
body.cpx-win #modal .win .x.help{background-image:url(../assets/cpx/i_q.webp) !important}
body.cpx-win #modal .loot,body.cpx-win #modal .optrow{background:rgba(40,30,22,.75) !important;border:1px solid rgba(201,182,138,.35) !important}

/* bars: Craftpix frame + coloured fill */
body.cpx-bars #app .bar{border:6px solid transparent !important;border-image:url(../assets/cpx/bar_frame.webp) 20 30 fill stretch !important;background:rgba(0,0,0,.55) !important;border-radius:0 !important;box-shadow:none !important;min-height:14px}
body.cpx-bars #app .bar>u{background:url(../assets/cpx/bar_blue.webp) center/100% 100% !important;box-shadow:none !important}
body.cpx-bars #app .bar.hp>u,body.cpx-bars #app .bar.php>u,body.cpx-bars #app .bar[class*=hp]>u{background-image:url(../assets/cpx/bar_red.webp) !important}
body.cpx-bars #app .bar.xp>u,body.cpx-bars #app .bar.pbar>u{background-image:url(../assets/cpx/bar_green.webp) !important}

/* battle command buttons: square Craftpix tiles */
body.cpx-tabs #cmds .btn.cmd{background:url(../assets/cpx/b_sqdark.webp) center/100% 100% no-repeat !important;border:10px solid transparent !important;border-image:url(../assets/cpx/f_square.webp) 40 fill stretch !important;box-shadow:none !important;color:var(--cpx-ink) !important}

/* coins: real coins instead of dots */
body.cpx-coins .coins b.cg,body.cpx-coins .coins b.cs,body.cpx-coins .coins b.cb{display:inline-block;width:1em;height:1em;font-size:inherit;color:transparent !important;background:center/contain no-repeat;vertical-align:-.15em;margin:0 1px;text-shadow:none !important}
body.cpx-coins .coins b.cg{background-image:url(../assets/cpx/c_gold.webp)}
body.cpx-coins .coins b.cs{background-image:url(../assets/cpx/c_silver.webp)}
body.cpx-coins .coins b.cb{background-image:url(../assets/cpx/c_copper.webp)}
body.cpx-coins #app .coinbtn{background:url(../assets/cpx/b_brown.webp) center/100% 100% no-repeat !important;border:0 !important;box-shadow:none !important}

/* inline icons swapped from emoji */
body img.cpx{width:1.25em;height:1.25em;object-fit:contain;vertical-align:-.25em;display:inline-block}
body.cpx-icons .btn.tab .ti img.cpx,body.cpx-icons .btn.qb .ti img.cpx{width:30px;height:30px;filter:drop-shadow(0 2px 2px #000)}