/* Layout and components. Only var(--tokens) from tokens-*.css, no raw colours except neutral overlays. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0b0b0a;overflow:hidden}
body{font-family:var(--font-ui);color:var(--text);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
ul{list-style:none}
:focus{outline:none}
:focus-visible{outline:1px solid var(--sel);outline-offset:2px}

#viewport{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center;background:var(--bg);overflow:hidden}

.bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1200px 800px at 30% 38%,#1b1b19 0%,rgba(27,27,25,0) 70%),var(--bg);
  transition:opacity var(--t-mid) var(--ease)}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%)}

/* open / close */
.strip,.views,.foot{transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
#stage:not(.open) .strip,#stage:not(.open) .views,#stage:not(.open) .foot{opacity:0;transform:scale(.985);pointer-events:none}
#stage:not(.open) .bg{opacity:.35}
.closed-hint{position:absolute;left:0;right:0;bottom:40px;text-align:center;font-size:var(--fs-hint);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--ease)}
.closed-hint b{font-weight:500;margin-right:12px;border:1px solid var(--text-mute);border-radius:4px;padding:3px 10px}
#stage:not(.open) .closed-hint{opacity:1}

/* tab strip (TLOU: L1 --- tabs --- R1) */
.strip{position:absolute;left:var(--margin);right:var(--margin);top:36px;height:64px;display:flex;align-items:center;gap:26px}
.strip-line{flex:1;height:1px;background:var(--line)}
.key{min-width:38px;height:34px;padding:0 10px;border:1px solid var(--text-mute);border-radius:5px;color:var(--text-2);font-size:20px;font-weight:500;text-align:center;line-height:32px;transition:color var(--t-fast),border-color var(--t-fast)}
.key:hover{color:var(--text);border-color:var(--text-2)}
.tabs{display:flex;gap:54px;position:relative}
.tab{position:relative;padding:8px 0;font-size:24px;font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute);transition:color var(--t-fast) var(--ease)}
.tab:hover{color:var(--text-2)}
.tab[aria-selected="true"]{color:var(--sel)}
.tab .dot{position:absolute;left:-14px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--new)}
.tab-ind{position:absolute;left:0;bottom:-4px;height:2px;background:var(--sel);transform-origin:left;transition:transform var(--t-mid) var(--ease),width var(--t-mid) var(--ease)}

/* views */
.views{position:absolute;inset:0;pointer-events:none}
.view{position:absolute;left:var(--margin);right:var(--margin);top:140px;bottom:140px;display:none;pointer-events:auto}
.view.active{display:block;animation:viewin var(--t-mid) var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.title{display:flex;align-items:center;gap:26px;height:54px}
.title h1{font-size:var(--fs-title);font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text)}
.rule{flex:1;height:1px;background:var(--line)}
.count{font-size:var(--fs-body);color:var(--text-mute)}

.cols{position:absolute;left:0;right:0;top:92px;bottom:0;display:grid;grid-template-columns:420px 1fr 520px;column-gap:70px}

.sect{display:flex;align-items:center;gap:20px;height:40px;margin-bottom:12px;font-size:var(--fs-body);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-label)}
.sect i{flex:1;height:1px;background:var(--line-soft)}
.sect em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--text-mute)}
.sect-fx,.sect-hot{margin-top:34px}

/* identity */
.portrait{width:420px;height:470px;background:url("assets/portrait.jpg") center top/cover no-repeat;filter:grayscale(.55) brightness(.95);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  transition:height var(--t-mid) var(--ease)}
.portrait.small{height:230px;background-size:420px auto;background-position:center -46px}
.who{margin-top:-24px;position:relative}
.who-name{font-size:48px;font-weight:400;line-height:1.05;color:var(--text)}
.who-sub{margin-top:8px;font-size:var(--fs-body);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute)}
.who-s{margin:-18px 0 26px}
.who-s .who-name{font-size:34px}
.pairs{margin-top:34px}
.pairs>div{display:flex;justify-content:space-between;align-items:baseline;height:var(--row);border-top:1px solid var(--line-soft);font-size:var(--fs-body)}
.pairs dt{color:var(--text-mute)}
.pairs dd{color:var(--text)}

/* meters */
.meters li{height:64px;display:grid;grid-template-columns:1fr auto;align-items:end;row-gap:10px}
.meters .n{font-size:var(--fs-item);color:var(--text-2)}
.meters .v{font-size:var(--fs-item);color:var(--text);font-variant-numeric:tabular-nums}
.meters .bar{grid-column:1/-1;height:3px;background:var(--line);position:relative}
.meters .bar b{position:absolute;left:0;top:0;bottom:0;background:var(--text);transition:width 500ms var(--ease),background var(--t-mid)}
.meters li.low .v{color:var(--deficit)}
.meters li.low .bar b{background:var(--deficit)}

/* lists (status effects, recipes) */
.list li{margin-bottom:2px}
.row{display:flex;justify-content:space-between;align-items:center;width:100%;height:var(--row);padding:0 16px;margin-left:-16px;width:calc(100% + 32px);font-size:var(--fs-item);color:var(--text-mute);transition:color var(--t-fast),background var(--t-fast)}
.row:hover{color:var(--text-2);background:rgba(255,255,255,.035)}
.row[aria-selected="true"]{color:var(--sel);background:rgba(255,255,255,.055)}
.row .r{font-size:var(--fs-body);color:var(--text-mute)}
.row[aria-selected="true"] .r{color:var(--text-2)}
.row.bad .r{color:var(--deficit)}
.empty{font-size:var(--fs-body);color:var(--text-mute);padding:14px 0}

/* detail column */
.c-detail{min-width:0}
.d-title{display:flex;align-items:center;gap:20px;height:54px;font-size:var(--fs-title);font-weight:500;color:var(--text);margin-bottom:6px;white-space:nowrap}
.d-title span{flex:1;height:1px;background:var(--line-soft)}
.d-body{margin-top:22px;font-size:var(--fs-body);line-height:1.5;color:var(--text-2);max-width:520px}
.d-pairs{margin-top:34px}
.d-pairs>div{display:flex;justify-content:flex-end;gap:20px;min-height:46px;padding:8px 0;align-items:baseline;font-size:var(--fs-body);line-height:1.35}
.d-pairs dt{color:var(--text-mute)}
.d-pairs dd{color:var(--text);text-align:right;max-width:330px}
.d-pairs .bad dd{color:var(--deficit)}
.d-note{margin-top:26px;font-size:var(--fs-small);color:var(--text-mute)}
.fade{animation:viewin 180ms var(--ease)}

/* inventory */
.rows li{display:flex;justify-content:space-between;align-items:baseline;height:46px;border-top:1px solid var(--line-soft);font-size:var(--fs-body)}
.rows .k{color:var(--text-mute)}
.rows .val{color:var(--text)}
.rows .val.none{color:var(--text-off)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cell{position:relative;height:104px;padding:10px 12px;background:var(--cell);border:1px solid transparent;transition:background var(--t-fast),border-color var(--t-fast)}
.cell:hover{background:#292926}
.cell.empty-cell{background:var(--cell-idle)}
.cell.empty-cell:hover{background:#1c1c1a}
.cell[aria-selected="true"]{background:var(--cell-sel);border-color:var(--sel)}
.cell .nm{display:block;font-size:var(--fs-small);line-height:1.15;color:var(--text-2);padding-right:6px}
.cell .q{position:absolute;right:12px;bottom:8px;font-size:var(--fs-body);color:var(--text);font-variant-numeric:tabular-nums}
.cell.dim .nm,.cell.dim .q{color:var(--text-mute)}
.hotbar{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.hot{position:relative;height:74px;padding:8px 10px;background:var(--cell-idle);transition:background var(--t-fast)}
.hot:hover{background:#1f1f1d}
.hot i{position:absolute;left:10px;top:6px;font-style:normal;font-size:var(--fs-small);color:var(--text-mute)}
.hot span{position:absolute;left:10px;right:6px;bottom:7px;font-size:15px;line-height:1.1;color:var(--text-2)}

/* craft */
.recipe{margin-top:30px}
.ing{display:flex;justify-content:space-between;height:44px;align-items:center;border-top:1px solid var(--line-soft);font-size:var(--fs-body)}
.ing .a{color:var(--text-2)}
.ing .b{color:var(--text);font-variant-numeric:tabular-nums}
.ing.bad .b{color:var(--deficit)}
.ing.bad .a{color:var(--text-2)}
.result{margin-top:22px;font-size:var(--fs-body);color:var(--text-mute);text-align:right}
.result b{font-weight:400;color:var(--text)}
.why{margin-top:14px;font-size:var(--fs-body);color:var(--deficit);text-align:right;min-height:30px}

/* footer (TLOU: line, then hints right-aligned, BACK last) */
.foot{position:absolute;left:var(--margin);right:var(--margin);top:var(--foot-y);bottom:0;border-top:1px solid var(--line-soft)}
.foot-mark{position:absolute;left:0;top:26px;font-size:var(--fs-small);letter-spacing:.14em;text-transform:uppercase;color:var(--text-off)}
.hints{position:absolute;right:0;top:20px;display:flex;gap:44px}
.hint{display:flex;align-items:center;gap:12px;font-size:var(--fs-hint);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text);height:44px;transition:color var(--t-fast)}
.hint .kc{min-width:30px;height:28px;padding:0 8px;border:1px solid currentColor;border-radius:5px;font-size:17px;line-height:26px;text-align:center;letter-spacing:0}
.hint:hover:not(.off){color:var(--sel)}
.hint.off{color:var(--text-off);cursor:default}

/* toast (TLOU: strip from the left edge) */
#toasts{position:absolute;left:0;bottom:22px;width:640px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{padding:14px 28px 14px var(--margin);background:var(--toast);transform:translateX(-100%);opacity:0;transition:transform var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease)}
.toast.in{transform:none;opacity:1}
.toast .t{font-size:24px;color:var(--text)}
.toast .s{margin-top:4px;font-size:var(--fs-body);color:var(--text-mute)}
.toast.bad .s{color:var(--deficit)}

/* inspect (TLOU: object in hands, hints on top) */
#inspect{position:absolute;inset:0;background:rgba(9,9,8,.94);opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--ease);display:flex;align-items:center;justify-content:center;perspective:1600px}
#inspect.on{opacity:1;pointer-events:auto}
.ins-bar{position:absolute;top:44px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:36px;font-size:var(--fs-hint);color:var(--text-2)}
.ins-bar i{width:1px;height:26px;background:var(--line)}
.ins-bar b{font-weight:500;margin-right:10px;border:1px solid currentColor;border-radius:5px;padding:2px 9px;font-size:17px}
.doc{position:relative;width:700px;height:440px;transform-style:preserve-3d;transition:transform 520ms var(--ease);transform:scale(.96)}
#inspect.on .doc{transform:scale(1)}
#inspect.on .doc.flip{transform:rotateY(180deg)}
.doc.flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;padding:40px 46px;background:#d8d4c8;color:#1b1b19;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.face.back{transform:rotateY(180deg);background:#cbc7bb}
.face .ft{font-size:20px;letter-spacing:.18em;text-transform:uppercase;color:#5a584f}
.face .fn{margin-top:40px;font-size:54px;line-height:1;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.face .fid{margin-top:12px;font-size:30px;color:#3a3933}
.face dl{margin-top:44px}
.face dl div{display:flex;justify-content:space-between;border-top:1px solid rgba(0,0,0,.18);padding:10px 0;font-size:22px}
.face dt{color:#5a584f}
.face p{font-size:26px;line-height:1.5;color:#2b2a26;margin-top:30px}

/* placeholder with glitch */
.dev{overflow:hidden}
.dev .noise{position:absolute;left:-70px;right:-70px;top:-140px;width:1920px;height:1080px;opacity:.05;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 52% 60% at 50% 46%,#000 0%,transparent 100%);mask-image:radial-gradient(ellipse 52% 60% at 50% 46%,#000 0%,transparent 100%)}
.dev .scan{position:absolute;left:-70px;right:-70px;top:0;height:2px;width:1920px;background:rgba(255,255,255,.07);animation:scan 5.5s linear infinite;pointer-events:none}
@keyframes scan{from{transform:translateY(-140px)}to{transform:translateY(900px)}}
.dev-box{position:absolute;left:0;right:0;top:230px;text-align:center}
.glitch{position:relative;display:inline-block;font-size:128px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--text)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none}
.glitch::before{color:var(--text-2);clip-path:inset(0 0 100% 0);animation:g1 3.4s steps(1,end) infinite}
.glitch::after{color:var(--text-mute);clip-path:inset(100% 0 0 0);animation:g2 3.4s steps(1,end) infinite}
@keyframes g1{0%,62%,100%{clip-path:inset(0 0 100% 0);transform:none}63%{clip-path:inset(12% 0 62% 0);transform:translate(-9px,0)}65%{clip-path:inset(54% 0 22% 0);transform:translate(7px,0)}67%{clip-path:inset(0 0 100% 0)}88%{clip-path:inset(30% 0 50% 0);transform:translate(-5px,0)}89%{clip-path:inset(0 0 100% 0)}}
@keyframes g2{0%,63%,100%{clip-path:inset(100% 0 0 0);transform:none}64%{clip-path:inset(58% 0 14% 0);transform:translate(10px,0)}66%{clip-path:inset(20% 0 56% 0);transform:translate(-8px,0)}68%{clip-path:inset(100% 0 0 0)}88%{clip-path:inset(62% 0 8% 0);transform:translate(6px,0)}89%{clip-path:inset(100% 0 0 0)}}
.glitch{animation:jit 3.4s steps(1,end) infinite}
@keyframes jit{0%,63%,100%{transform:none}64%{transform:translate(3px,0)}66%{transform:translate(-2px,0)}68%{transform:none}88%{transform:translate(2px,0)}89%{transform:none}}
.dev-state{margin-top:34px;font-size:var(--fs-item);letter-spacing:.3em;text-transform:uppercase;color:var(--text-mute)}
.dev-box p{margin:26px auto 0;max-width:620px;font-size:var(--fs-body);line-height:1.5;color:var(--text-mute)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:1ms!important}
  .glitch::before,.glitch::after{display:none}
}

/* new-item dot on a cell */
.cell .nd{position:absolute;right:10px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--new)}

/* Character tab: frameless model, condition under it, compact info + effects in the middle */
.cols.ch{grid-template-columns:540px 560px 1fr}
.ch .c-id{position:relative}
.ch .model{position:absolute;left:0;top:-20px;width:540px;height:690px;mix-blend-mode:lighten;
  background:url("assets/model.jpg") center top/auto 100% no-repeat;filter:grayscale(.45) brightness(.98);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 50%,transparent 96%),linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 50%,transparent 96%),linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%);
  mask-composite:intersect}
.ch .cond{position:absolute;left:0;right:0;bottom:0}
.ch .cond .sect{margin-bottom:4px}
.ch .meters li{height:42px;row-gap:8px}
.ch .meters .n,.ch .meters .v{font-size:24px}
.ch .c-info .who{margin-top:0}
.ch .c-info .who-name{font-size:44px}
.ch .c-info .pairs{margin-top:22px}
.ch .c-info .pairs>div{height:46px}
.ch .c-info .sect-fx{margin-top:38px}

/* Inventory tab: model on the left with equipment slots around it, item grid on the right */
/* Item grid: 120px cells, 8px gap. Equipment slots are a separate, smaller grid (84px cells, 8px gap,
   pitch 92) and are deliberately NOT aligned to the item grid rows. Grid panel is ~1/3 of the
   screen width like the TLOU2 backpack panel. Text never below 16px. */
.cols.inv{grid-template-columns:1fr 504px;column-gap:80px}
.cols.inv.craft{grid-template-columns:1fr 504px 440px;column-gap:56px}
.cols.inv #invdetail{display:none}
.cols.inv.craft #invdetail{display:block}
.inv .grid{grid-template-columns:repeat(4,120px);gap:8px}
.inv .cell{width:120px;height:120px;padding:10px}
.inv .sect-hot{margin-top:22px}
.inv .cell .nm{font-size:18px;padding-right:0;overflow-wrap:anywhere}
.inv .cell .q{right:10px;bottom:8px;font-size:var(--fs-body)}
/* Hotbar is a gameplay HUD element: bottom centre of the screen, visible with the menu open or closed.
   Position is a placeholder until Jason confirms where the game puts it. */
.hud-hotbar{position:absolute;left:50%;top:852px;transform:translateX(-50%); /* centred, right under the equipment slots (they end at y=828), well clear of the footer line at 963 */width:484px;z-index:var(--z-hotbar);display:grid;grid-template-columns:repeat(7,64px);gap:6px}
.hud-hotbar .hot{height:64px;padding:5px 6px}
.hud-hotbar .hot i{left:6px;top:4px;font-size:16px}
.hud-hotbar .hot span{left:6px;right:3px;bottom:5px;font-size:16px;line-height:1}
.inv .doll{position:relative;width:100%;max-width:636px;margin:0;height:544px;display:flex;justify-content:space-between}
.inv .doll .model{position:absolute;left:104px;right:104px;top:0;bottom:0;mix-blend-mode:lighten;pointer-events:none;
  background:url("assets/model.jpg") center top/auto 100% no-repeat;filter:grayscale(.45) brightness(.98);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 60%,transparent 100%),linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 60%,transparent 100%),linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-composite:intersect}
.eqcol{position:relative;width:84px;display:grid;grid-template-rows:repeat(6,84px);gap:8px}
.eqcol+.eqcol{grid-template-rows:repeat(4,84px);padding-top:184px} /* armor and weapons start at row 3, like the live menu */
.eq{position:relative;height:84px;padding:7px;background:var(--cell-idle);border:1px solid var(--line)}
.eq.on{background:var(--cell);border-color:transparent}
.eq .k{display:block;font-size:16px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-mute)}
/* hover card for items */
.tip{position:absolute;z-index:var(--z-tip);width:440px;padding:22px 28px 18px;background:var(--toast);border:1px solid var(--line);pointer-events:none;
  opacity:0;transform:translateY(6px);transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.tip.on{opacity:1;transform:none}
.tip .d-title{height:44px;font-size:28px;margin-bottom:0}
.tip .d-body{margin-top:10px;font-size:20px}
.tip .d-pairs{margin-top:16px}
.tip .d-pairs>div{min-height:38px;padding:5px 0;font-size:20px}
.eq .val{position:absolute;left:8px;right:6px;bottom:8px;font-size:16px;line-height:1.15;color:var(--text-2)}

/* drag and drop */
#stage{user-select:none;-webkit-user-select:none}
.cell:not(.empty-cell),.eq.on,.hot.has{cursor:grab}
#stage.dragging,#stage.dragging *{cursor:grabbing!important}
.drag-src{opacity:.35}
.eq[aria-selected="true"]{border-color:var(--sel)}
.eq.on[aria-selected="true"]{background:var(--cell-sel)}
.hot,.eq{border:1px solid transparent}
.eq{border-color:var(--line)}
/* valid targets while dragging */
#stage.dragging .eq:not(.can-drop){opacity:.45}
.eq.can-drop,.hot.can-drop{border-color:var(--text-mute)}
.drop-over{background:var(--cell-sel)!important;border-color:var(--sel)!important}
.ghost{position:absolute;z-index:var(--z-drag);width:112px;height:72px;margin:-36px 0 0 -56px;padding:8px 10px;background:var(--cell-sel);border:1px solid var(--sel);
  font-size:18px;line-height:1.15;color:var(--text);pointer-events:none;box-shadow:0 14px 36px rgba(0,0,0,.5)}

/* hotbar only on the Inventory tab */
.hud-hotbar{opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--ease)}
.hud-hotbar.shown{opacity:1;pointer-events:auto}

/* layer scale: hotbar < card < toast < document inspect < dragged item */
:root{--z-hotbar:3;--z-tip:5;--z-toast:6;--z-inspect:10;--z-drag:30}
#toasts{z-index:var(--z-toast)}
#inspect{z-index:var(--z-inspect)}