/* Pendekar's travel chest: lacquered teak, ukiran relief, brass and woven lining.
   Presentation only. The game's panel, item, focus and save contracts stay in index.html. */
:root{
  --wood-display:'Alegreya',Georgia,serif;
  --wood-grain:url('art/teak-grain-v1.webp');
  --wood-corner:url('art/ukiran-corner.svg');
  --wood-divider:url('art/ukiran-divider.svg');
  --wood-dark:#1c130d;--wood-edge:#392217;--wood-mid:#63412b;--wood-light:#96704a;
  --wood-ivory:#f6ecd2;--wood-muted:#d3bf9b;--wood-gold:#e7c681;
  --wood-lining:#202922;--wood-lining-dark:#121914;--wood-lining-light:#344034;
  --wood-shadow:rgba(12,7,3,.65);--wood-shine:rgba(255,221,161,.35);
  --wood-hairline:rgba(215,176,106,.32);--wood-inset:rgba(14,8,4,.65);
  --wood-surface:linear-gradient(110deg,rgba(22,12,7,.28),rgba(22,12,7,.55)),var(--wood-grain);
  --wood-well:radial-gradient(ellipse at 50% 0%,var(--wood-lining),var(--wood-lining-dark));
  --wood-bevel:inset 0 1px 0 var(--wood-shine),inset 0 -2px 0 var(--wood-inset),0 2px 3px var(--wood-shadow);
  --wood-recess:inset 0 2px 5px var(--wood-shadow),0 1px 0 var(--wood-shine);
  --wood-elevation:0 10px 28px var(--wood-shadow),0 2px 4px var(--wood-shadow);
  --wood-radius:6px;--wood-type-xs:11px;--wood-type-sm:13px;--wood-type-lg:24px;
  --display:var(--wood-display);--muted:var(--wood-muted);
  --grain:var(--wood-grain);--teakbg:var(--wood-surface);
  --dock:344px;--map:184px;
}

.teak,.ctx,.profile-chip,.profile-dialog{background-size:auto,480px 480px}
.frame{
  border:var(--s2) solid var(--wood-edge);border-image:none;border-radius:var(--wood-radius);
  box-shadow:inset 0 0 0 1px var(--wood-shine),0 0 0 1px var(--wood-dark),0 0 0 2px var(--brass-700),var(--wood-elevation);
}
.btn,.shop-x,.sheet-h button{
  background:linear-gradient(180deg,rgba(151,100,58,.32),var(--wood-inset)),var(--wood-grain);
  background-size:auto,320px 320px;border-color:var(--wood-light);box-shadow:var(--wood-bevel);
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.btn:hover,.shop-x:hover,.sheet-h button:hover{background:var(--wood-mid);border-color:var(--wood-gold)}
.btn:active,.shop-x:active,.sheet-h button:active{transform:translateY(1px);box-shadow:var(--wood-recess)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* A chest lid and a dark lined drawer. Ornaments never intercept a world click. */
.hud .dock{position:relative;padding:var(--s2);isolation:isolate}
.dock::before,.dock::after{
  content:'';position:absolute;width:64px;height:64px;z-index:-1;pointer-events:none;
  background:var(--wood-corner) center/contain no-repeat;
}
.dock::before{left:calc(-1 * var(--s2));top:calc(-1 * var(--s2))}
.dock::after{right:calc(-1 * var(--s2));bottom:calc(-1 * var(--s2));transform:rotate(180deg)}
.hud .mbar{padding-bottom:var(--s2);gap:var(--s1)}
.tabs{gap:var(--s1)}
.tab{
  min-width:0;min-height:54px;border-radius:var(--s1);border-color:var(--wood-dark);
  background:linear-gradient(180deg,rgba(151,100,58,.2),rgba(22,12,7,.6)),var(--wood-grain);
  background-size:auto,280px 280px;box-shadow:var(--wood-bevel);color:var(--wood-muted);
  font:700 var(--wood-type-xs)/1.1 var(--prose);letter-spacing:.02em;
  transition:transform var(--t-fast) var(--ease);
}
.tab .ti{height:26px;display:grid;place-items:center}
.tab svg{width:26px;height:26px;filter:drop-shadow(0 2px 1px var(--wood-shadow))}
.tab:hover{border-color:var(--wood-gold);color:var(--wood-ivory)}
.tab[aria-selected="true"]{
  background:linear-gradient(180deg,rgba(140,44,42,.94),rgba(64,18,20,.96)),var(--wood-grain);
  color:var(--wood-ivory);border-color:var(--wood-gold);
  box-shadow:inset 0 1px 0 var(--wood-shine),inset 0 -3px 0 var(--wood-inset),0 0 0 1px var(--wood-dark);
}
.tab[aria-selected="true"]::after{content:'';position:absolute;bottom:var(--s1);width:12px;height:1px;background:var(--wood-gold)}
.dock.closed .tab[aria-selected="true"]::after{display:none}
.hud .panel{
  padding:0 var(--s3) var(--s3);border:1px solid var(--wood-dark);border-radius:var(--s1);
  background:linear-gradient(rgba(22,13,8,.8),rgba(22,13,8,.87)),var(--wood-grain);
  background-size:auto,420px 420px;box-shadow:var(--wood-recess);
  scrollbar-color:var(--wood-light) var(--wood-dark);scrollbar-gutter:stable;
}
.sheet-h{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin:0 calc(-1 * var(--s3)) var(--s3);padding:var(--s3) var(--s3) var(--s4);
  background:var(--wood-divider) center bottom/100% 24px no-repeat;
  border-bottom:1px solid var(--wood-hairline);
}
.panel-title{display:flex;flex-direction:column;gap:var(--s1)}
.panel-title small{font:600 9px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--wood-muted)}
.sheet-h .panel-title b{font:700 var(--wood-type-lg)/1.05 var(--wood-display);letter-spacing:.015em;color:var(--wood-ivory);text-shadow:0 2px 1px var(--wood-dark)}
.sheet-h button{width:32px;min-height:32px;flex:none;border:1px solid var(--wood-light);border-radius:50%;cursor:pointer;color:var(--wood-gold);font:var(--wood-type-sm)/1 var(--prose)}
.panel-intro{margin:0 0 var(--s3);font:var(--wood-type-sm)/1.4 var(--prose);color:var(--wood-muted)}
.ph{font:700 var(--wood-type-xs)/1.2 var(--prose);letter-spacing:.16em;color:var(--wood-gold);margin-block:var(--s3) var(--s2)}
.ph::after{background:linear-gradient(90deg,var(--wood-hairline),transparent)}
.ph .capacity{margin-left:auto;font:500 10px/1.2 var(--mono);letter-spacing:0;color:var(--wood-muted)}
.ph:has(.capacity)::after{display:none}
.pnote{font-size:var(--wood-type-sm);line-height:1.45;color:var(--wood-muted)}

/* Real item art sits above the quiet, inset green lining. */
.purse{padding:var(--s2);margin-bottom:var(--s3);border:1px solid var(--wood-hairline);border-radius:var(--s1);background:var(--wood-inset);color:var(--wood-gold);font-size:var(--wood-type-sm)}
.purse svg{width:24px;height:24px}
.purse small{font:var(--wood-type-sm)/1 var(--prose);color:var(--wood-muted)}
.pack{gap:var(--s1);padding:var(--s1);border:1px solid var(--wood-mid);border-radius:var(--s1);background:var(--wood-dark);box-shadow:var(--wood-recess)}
.pack.belt{padding:var(--s1);background:var(--wood-dark);box-shadow:var(--wood-recess);border-color:var(--wood-light)}
.slot,.eq{
  position:relative;aspect-ratio:1.12;padding:var(--s2);border-radius:var(--s1);
  border:1px solid var(--wood-dark);background:var(--wood-well);box-shadow:var(--wood-recess);
  transition:transform var(--t-fast) var(--ease);
}
.slot::before{content:'';position:absolute;inset:var(--s1);border:1px solid var(--wood-lining-light);border-radius:2px;pointer-events:none;opacity:.4}
.slot.empty::after{content:'✦';font:var(--wood-type-sm)/1 var(--wood-display);color:var(--wood-lining-light);pointer-events:none}
.slot:hover:not(.empty),.eq:hover:not(.empty){border-color:var(--wood-gold);background:var(--wood-lining);box-shadow:var(--wood-recess)}
.slot svg{position:relative;max-width:44px;max-height:44px;filter:drop-shadow(0 3px 2px var(--wood-shadow))}
.pack.belt .slot{aspect-ratio:1.3}
.pack-note{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s3)}
.pack-note svg{width:16px;height:16px;flex:none;color:var(--wood-gold);margin-top:2px}
.pack-note p{margin:0}
.pack-capacity{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);font:var(--wood-type-xs)/1.3 var(--mono);color:var(--wood-muted)}
.capacity-track{flex:1;height:var(--s1);border-radius:2px;overflow:hidden;background:var(--wood-dark);box-shadow:0 1px 0 var(--wood-hairline)}
.capacity-track i{display:block;height:100%;transform-origin:left;background:var(--wood-gold)}
.pack-help{margin-top:var(--s2);color:var(--wood-muted);font-size:var(--wood-type-sm)}
.pack-help summary{cursor:pointer;padding-block:var(--s2);min-height:32px;list-style-position:inside}
.pack-help summary:hover{color:var(--wood-ivory)}
.pack-help .pnote{margin:var(--s1) 0 var(--s2)}

/* Skill medallions, legible ivory names and brass-inlaid progress channels. */
.skg{gap:var(--s2)}
.skill-overview{display:flex;justify-content:space-between;gap:var(--s2);font-size:12px;font-variant-numeric:tabular-nums}
.sk{
  grid-template-columns:30px minmax(0,1fr) auto;gap:var(--s1);min-height:68px;padding:var(--s2);
  border:1px solid var(--wood-dark);border-radius:var(--s1);
  background:linear-gradient(140deg,rgba(75,44,27,.35),rgba(14,8,4,.6)),var(--wood-grain);
  background-size:auto,240px 240px;box-shadow:var(--wood-bevel);
}
.sk svg{width:30px;height:30px;padding:2px;border-radius:50%;background:var(--wood-well);box-shadow:0 0 0 1px var(--wood-hairline),var(--wood-recess);filter:drop-shadow(0 1px 1px var(--wood-shadow))}
.sk b{font:700 var(--wood-type-sm)/1.1 var(--prose);color:var(--wood-ivory);overflow-wrap:anywhere}
.sk b small{margin-top:var(--s1);font-size:10px;line-height:1.1;color:var(--wood-muted)}
.sk .lv{font:600 19px/1 var(--wood-display);color:var(--wood-gold);text-shadow:0 2px 1px var(--wood-dark)}
.sk .bar{height:var(--s1);background:var(--wood-dark);border-radius:2px;box-shadow:0 1px 0 var(--wood-hairline)}
.sk .bar i{background:linear-gradient(90deg,var(--brass-700),var(--wood-gold));border-radius:2px}
.sk[data-act="skillguide"]{cursor:pointer;text-align:left}
.sk:hover,.sk:focus-visible{border-color:var(--wood-light)}
.plaque{
  position:relative;margin-top:var(--s3);min-height:48px;padding:var(--s2) var(--s3);
  border-radius:var(--s1);border-color:var(--wood-light);background:var(--wood-surface);
  background-size:auto,320px 320px;box-shadow:var(--wood-bevel);
  font:600 10px/1.2 var(--mono);letter-spacing:.12em;
}
.plaque b{font:700 28px/1 var(--wood-display);color:var(--wood-gold)}
.skill-note{text-align:center;margin:var(--s2) 0 0;color:var(--wood-muted);font:italic var(--wood-type-sm)/1.3 var(--prose)}

/* The rest of the HUD uses the same cabinetmaker's materials. */
.tracker.paper{
  padding:var(--s3) var(--s4);border:1px solid var(--wood-light);border-radius:var(--s1);
  background:linear-gradient(100deg,rgba(30,17,10,.76),rgba(30,17,10,.9)),var(--wood-grain);
  background-size:auto,320px 320px;box-shadow:var(--wood-bevel),var(--wood-elevation);color:var(--wood-ivory);
}
.tracker .qn{color:var(--wood-gold);font:700 17px/1.2 var(--wood-display)}
.tracker p{color:var(--wood-ivory);font-size:15px}
.tracker .act{color:var(--wood-muted);font-size:var(--wood-type-xs)}
.tracker .actring .bg{stroke:var(--wood-light)}
.tracker .actring .fg{stroke:var(--wood-gold)}
.hud .mapring::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:50%;
  border:var(--s2) solid var(--wood-edge);background:var(--wood-surface);background-size:auto,280px 280px;
  box-shadow:inset 0 0 0 1px var(--wood-shine),0 0 0 1px var(--wood-gold),0 0 0 3px var(--wood-dark),var(--wood-elevation);
}
.mapring .ring{filter:drop-shadow(0 1px 1px var(--wood-shadow))}
.compass{background:var(--wood-surface);background-size:auto,180px 180px;box-shadow:0 0 0 2px var(--wood-dark),var(--wood-bevel)}
.orb{border-color:var(--wood-light);box-shadow:0 0 0 2px var(--wood-dark),0 0 0 3px var(--brass-700),inset 0 0 0 2px var(--wood-shadow),0 4px 8px var(--wood-shadow)}
.orb span{font:700 17px/1 var(--wood-display)}
.chip.glass{background:var(--wood-dark);border-color:var(--wood-light);box-shadow:var(--wood-bevel)}
.profile-chip{border-color:var(--wood-light);border-radius:var(--s1);box-shadow:var(--wood-bevel),0 4px 12px var(--wood-shadow)}
.profile-avatar{outline:1px solid var(--wood-gold);outline-offset:2px}
.profile-chip-copy strong{font-family:var(--wood-display);font-size:18px;letter-spacing:.02em}
.profile-chip-copy>span{font-size:var(--wood-type-sm)}
.chat.glass{border:var(--s1) solid var(--wood-edge);background:rgba(23,17,11,.94);box-shadow:0 0 0 1px var(--wood-light),var(--wood-elevation);border-radius:var(--s1)}
.chat-h{background:var(--wood-surface);background-size:auto,320px 320px;border-color:var(--wood-light);padding:var(--s1) var(--s1) 0}
.chat-h [role="tab"]{font:700 var(--wood-type-sm)/1 var(--prose);color:var(--wood-muted)}
.chat-h [aria-selected="true"]{background:var(--wood-dark);color:var(--wood-ivory);border-color:var(--wood-light)}
.rec,.mz-now,.mz-song,.stats{border-color:var(--wood-edge);background:var(--wood-well);box-shadow:var(--wood-recess)}
.eq{aspect-ratio:1}
.doll>svg.fig{color:var(--wood-light)}
.dlg.paper{border-color:var(--wood-mid);box-shadow:inset 0 0 0 1px var(--wood-gold),0 0 0 var(--s1) var(--wood-edge),var(--wood-elevation)}

@media(min-width:761px){
  .hud .dock{max-height:calc(100dvh - var(--map) - 148px - var(--st) - var(--sb))}
  .hud .panel{min-height:0;max-height:none;flex:1 1 auto}
  .hud .bl{width:min(440px,calc(100vw - var(--dock) - 3 * var(--gap)))}
  .sheet-h{padding-block:var(--s2) var(--s3)}
  .purse{padding:var(--s1)}
  .ph{margin-block:var(--s2) 6px}
  .slot,.pack.belt .slot{aspect-ratio:auto;height:44px;padding:6px}
  .pack-help summary{min-height:28px;padding-block:var(--s1)}
  .sk{min-height:60px}
  .skill-overview{margin-bottom:var(--s2)}
  .plaque{margin-top:var(--s2)}
  .skill-note{margin-top:var(--s1)}
}
@media(min-width:761px) and (max-height:760px){
  :root{--map:152px;--dock:320px}
  .tr .orb{width:44px;height:44px}
  .hud .dock{max-height:calc(100dvh - var(--map) - 148px - var(--st) - var(--sb))}
  .sk{min-height:60px}
}
@media(min-width:761px) and (max-height:500px){
  .hud .dock{max-height:calc(100dvh - 248px - var(--st) - var(--sb))}
}
@media(max-width:760px){
  :root{--map:116px}
  .hud .dock{position:static;padding:0;background:none;border:0;box-shadow:none;isolation:auto}
  .dock::before,.dock::after{display:none}
  .hud .mbar{padding:var(--s1) calc(var(--s1) + var(--sr)) calc(var(--s1) + var(--sb)) calc(var(--s1) + var(--sl));gap:2px;background:var(--wood-surface);background-size:auto,420px 420px;border-top-color:var(--wood-light)}
  .tabs{gap:2px}
  .tab{min-height:60px;font-size:var(--wood-type-xs)}
  .tab[aria-selected="true"]::after{bottom:2px}
  .hud .panel{
    bottom:calc(70px + var(--sb));padding:0 calc(var(--s4) + var(--sr)) var(--s4) calc(var(--s4) + var(--sl));
    border:var(--s1) solid var(--wood-edge);border-bottom:0;border-radius:var(--s2) var(--s2) 0 0;
    box-shadow:0 -1px 0 var(--wood-light),0 -8px 24px var(--wood-shadow);max-height:62dvh;scrollbar-gutter:auto;
  }
  .sheet-h{position:sticky;top:0;z-index:2;margin:0 calc(-1 * var(--s4) - var(--sr)) var(--s3) calc(-1 * var(--s4) - var(--sl));padding:var(--s3) var(--s4) var(--s4);background:var(--wood-divider) center bottom/100% 24px no-repeat,var(--wood-surface);background-size:100% 24px,auto,420px 420px}
  .sheet-h button{width:44px;min-height:44px}
  .pack-help summary{min-height:44px;padding-block:var(--s3)}
  .slot{aspect-ratio:1.25}
  .pack.belt .slot{aspect-ratio:1.4}
  .tracker.paper{padding:var(--s2)}
  .tracker .qn{font-size:15px}
  .tracker p{font-size:14px}
  .profile-chip-copy strong{font-size:14px}
  .profile-chip-copy>span{font-size:11px}
  .chat.min{background:rgba(23,17,11,.9)}
  .sk{min-height:68px}
}
@media(max-width:360px){
  .hud .mbar{padding-inline:0;gap:1px}
  .tabs{gap:1px}
  .hud .panel{padding-inline:var(--s3)}
  .sheet-h{margin-inline:calc(-1 * var(--s3))}
  .sk{grid-template-columns:26px minmax(0,1fr) auto;padding:6px;gap:3px}
  .sk svg{width:26px;height:26px}
  .sk b{font-size:12px}
}
@media(prefers-reduced-motion:reduce){:root:not(.motion) .slot,:root:not(.motion) .tab,:root:not(.motion) .btn{transition:none}}
:root.still .slot,:root.still .tab,:root.still .btn{transition:none}