:root{
  --bg:#0a0a0c; --panel:#131318; --panel2:#181820; --border:#2a2a35; --text:#c8c2b0;
  --dim:#847f70; --amber:#e8a33d; --red:#d04a3a; --green:#6aa84f;
  --blue:#5b8dd9; --purple:#9d6ad9;
}
*{box-sizing:border-box; margin:0; padding:0;}
*::-webkit-scrollbar{width:10px; height:10px;}
*::-webkit-scrollbar-track{background:#0d0d11;}
*::-webkit-scrollbar-thumb{background:#33323d; border-radius:5px; border:2px solid #0d0d11;}
*::-webkit-scrollbar-thumb:hover{background:#454452;}
*{scrollbar-color:#33323d #0d0d11; scrollbar-width:thin;}
body{
  background:
    radial-gradient(ellipse at 50% 0%, #14141c 0%, var(--bg) 62%);
  color:var(--text);
  font-family:"Courier New", Courier, monospace;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; padding:8px; user-select:none;
}
#wrap{display:flex; gap:10px;}
#gamecol{display:flex; flex-direction:column; gap:10px;}
canvas{
  background:#000; border:2px solid var(--border); border-radius:3px;
  box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset, 0 10px 26px -8px rgba(0,0,0,.65);
  image-rendering:pixelated; image-rendering:crisp-edges;
  display:block;
}
#sidebar{
  width:270px; background:linear-gradient(180deg, var(--panel2), var(--panel) 60px);
  border:2px solid var(--border); border-radius:3px;
  box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset, 0 10px 26px -8px rgba(0,0,0,.65);
  padding:10px; font-size:13px; line-height:1.45;
}
#sidebar h2{color:var(--amber); font-size:15px; margin-bottom:2px; letter-spacing:1px; display:inline-block; vertical-align:middle;}
.headline{display:flex; align-items:center; gap:8px;}
.headline img{width:28px; height:28px; image-rendering:pixelated; flex-shrink:0;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));}
.bar{
  background:#000; border:1px solid var(--border); border-radius:2px;
  height:15px; margin:2px 0 6px; position:relative; overflow:hidden;
  box-shadow:0 1px 2px 0 rgba(0,0,0,.5) inset;
}
.bar>div{height:100%; transition:width 0.25s ease-out;
  background-image:linear-gradient(to bottom, rgba(255,255,255,.28), rgba(0,0,0,.18));
  box-shadow:0 0 6px 0 rgba(0,0,0,.3) inset;}
@keyframes hplow{0%,100%{opacity:1;}50%{opacity:.5;}}
.hp-low{animation:hplow 0.9s infinite;}
.badge{
  border:1px solid; padding:1px 5px; font-size:10.5px; display:inline-block;
  margin:1px 3px 1px 0; border-radius:2px; letter-spacing:.4px;
  background:rgba(0,0,0,.35);
}
.packbtn{
  width:60px; image-rendering:pixelated; cursor:pointer; display:block; margin:2px auto 0;
  transition:transform 0.12s ease, filter 0.12s ease;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.packbtn:hover{transform:scale(1.08) translateY(-1px); filter:brightness(1.25) drop-shadow(0 0 6px rgba(232,163,61,.6));}
.statgrid{display:grid; grid-template-columns:1fr 1fr; gap:3px 16px; margin-top:3px;}
.strow{display:flex; align-items:center; font-size:13px;}
.strow img{width:15px; height:15px; image-rendering:pixelated; margin-right:5px; flex-shrink:0;}
.strow .spacer{width:15px; margin-right:5px; flex-shrink:0; display:inline-block;}
.strow .lab{color:var(--dim); flex:1;}
.strow b{font-weight:700; letter-spacing:.2px;}
.bar span{position:absolute; left:5px; top:-1px; font-size:11px; color:#fff; text-shadow:1px 1px 0 #000, 0 0 3px rgba(0,0,0,.6); font-weight:600;}
.hpfill{background:var(--red);} .mpfill{background:var(--blue);} .xpfill{background:var(--amber);}
.statline{display:flex; justify-content:space-between;}
.dim{color:var(--dim);}
.sec{border-top:1px solid var(--border); margin-top:7px; padding-top:6px;}
.spellrow{cursor:pointer; touch-action:manipulation; display:inline-block; padding:2px 0;}
.spellrow:hover{color:#fff;}
#log{
  width:100%; height:118px; background:var(--panel); border:2px solid var(--border); border-radius:3px;
  box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset, 0 10px 26px -8px rgba(0,0,0,.65);
  padding:6px 10px; font-size:13px; overflow-y:auto; line-height:1.45;
}
#log .old{color:var(--dim);}
#log > div{border-bottom:1px solid rgba(255,255,255,.03); padding:1px 0;}
#overlay{
  position:fixed; inset:0; background:rgba(6,6,9,.78); backdrop-filter:blur(1.5px);
  display:none; align-items:center; justify-content:center; z-index:10;
}
#overlay.show{display:flex;}
#obox{
  background:linear-gradient(180deg, var(--panel2), var(--panel) 80px);
  border:2px solid var(--amber); border-radius:3px;
  box-shadow:0 1px 0 0 rgba(255,255,255,.06) inset, 0 20px 50px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
  padding:20px 26px; min-width:440px; max-width:640px; max-height:86vh; overflow-y:auto; font-size:14px; line-height:1.5;
}
#obox h1{color:var(--amber); font-size:20px; margin-bottom:10px; letter-spacing:2px; text-shadow:0 2px 6px rgba(232,163,61,.25);}
#obox h3{color:var(--amber); margin:8px 0 4px; font-size:13px; letter-spacing:.5px; text-transform:uppercase; opacity:.9;}
.menu-item{
  display:block; width:100%; text-align:left; background:none; border:1px solid transparent; border-radius:2px;
  color:var(--text); font-family:inherit; font-size:14px; padding:5px 8px; cursor:pointer;
  transition:border-color .12s ease, background-color .12s ease, color .12s ease, transform .12s ease;
}
.menu-item:hover{border-color:var(--amber); color:#fff; background:#1d1d26; transform:translateX(2px);}
.menu-item:active{transform:translateX(2px) scale(.99);}
.menu-item .k{color:var(--amber);}
.menu-item .price{float:right; color:var(--amber);}
.menu-item:disabled{color:var(--dim); cursor:default;}
.menu-item:disabled:hover{border-color:transparent; background:none; transform:none;}
.invrow{display:flex; align-items:center; gap:6px; padding:2px 0;}
.invrow .nm{flex:1;}
.btn{
  background:#1d1d26; border:1px solid var(--border); border-radius:2px; color:var(--text);
  font-family:inherit; font-size:12px; padding:2px 8px; cursor:pointer;
  transition:border-color .12s ease, color .12s ease, background-color .12s ease;
}
.btn:hover{border-color:var(--amber); color:#fff; background:#242430;}
.r-common{color:#c8c2b0;} .r-uncommon{color:#6aa84f;} .r-rare{color:#5b8dd9;}
.r-epic{color:#9d6ad9;} .r-legendary{color:#e8a33d;} .r-ancient{color:#e05555;}
.title-art{color:var(--red); font-size:11px; line-height:1.1; white-space:pre; text-align:center; margin-bottom:12px;}
#hint{font-size:11px; color:var(--dim); margin-top:2px; text-align:center; width:100%; opacity:.85;}
/* title screen: hide the game chrome, center the art */
body.title-mode #sidebar, body.title-mode #log, body.title-mode #hint{display:none;}
body.title-mode{justify-content:center;}
body.title-mode canvas{border-color:transparent;}

/* on-screen touch controls: hidden on desktop, revealed in the mobile
   breakpoint below. Pointer-event wiring lives in main.js UI.init(). */
#touchpad{display:none;}
#touchpad button{
  background:#1d1d26; border:1px solid var(--border); border-radius:4px; color:var(--text);
  font-family:inherit; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  user-select:none; cursor:pointer;
}
#touchpad button.active{border-color:var(--amber); color:#fff; background:#2a2a1a;}
#dpad{
  display:grid; grid-template-columns:repeat(3, 52px); grid-template-rows:repeat(2, 52px);
  gap:4px; justify-content:center;
}
#dpad .dbtn{font-size:20px;}
#dpad [data-dir="up"]{grid-column:2; grid-row:1;}
#dpad [data-dir="left"]{grid-column:1; grid-row:2;}
#dpad [data-dir="right"]{grid-column:3; grid-row:2;}
#dpad [data-dir="down"]{grid-column:2; grid-row:2;}
/* the dpad's top corners are otherwise empty — the spell quick-menu lives
   there instead of eating a 10th slot in the 3x3 action grid; hidden by
   default and only revealed (see refresh() in main.js) for classes that
   actually have spells */
#dpad .sbtn{grid-column:1; grid-row:1; font-size:18px; display:none;}
#dpad .sbtn.show{display:flex; align-items:center; justify-content:center;}
#actionbar{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;}
#actionbar .abtn{padding:10px 4px; font-size:13px;}

@media (max-width: 860px){
  /* body's desktop centering (justify-content:center) actively hurts here:
     once content is taller than the viewport a centered flex column starts
     the scroll position mid-page, cutting off the top of the canvas before
     the player scrolls at all. Mobile always starts from the natural top. */
  body{padding:8px 8px 12px; justify-content:flex-start;}
  #wrap{flex-direction:column; width:100%; max-width:440px; align-items:stretch;}
  #gamecol{width:100%; max-width:440px;}
  canvas{width:100%; max-width:100%; height:auto; display:block;}
  #sidebar{width:100%; max-width:440px; margin-bottom:190px;}
  #hint{display:none;}
  /* stats/equipment move into the character sheet (already reachable via
     the Char button) and inline spells are replaced by the dpad's spell
     quick-menu — the mobile sidebar stays just portrait/bars/gold/pack so
     the game screen, D-pad, and actions fit together without scrolling */
  .sidebar-detail, .spells-inline{display:none;}
  .bar{height:11px; margin:2px 0 4px;}
  .bar span{font-size:9.5px; top:-0.5px;}
  #touchpad{
    /* fixed, not in normal flow — otherwise reaching the controls means
       scrolling the dungeon view itself off-screen, which defeats the
       point of on-screen controls. #sidebar's bottom margin above reserves
       room so its last rows aren't hidden behind this bar when scrolled
       all the way down. */
    position:fixed; left:0; right:0; bottom:0; z-index:20;
    display:flex; gap:14px; align-items:flex-start; justify-content:center;
    width:100%; margin:0;
    background:linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,.9) 25%, rgba(10,10,12,.97) 100%);
    padding:14px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
}