/* Winter Siege — flat editorial dark UI (Mobbin-referenced redesign).
   Flat fills only. No borders, no shadows, no glows, no ambient motion.
   One accent (amber). Neutral icon tiles. Editorial hero cards.
*/
:root{
  --bg:#161618;
  --card:#1E1E20;         /* grouped cell */
  --card-2:#26262A;       /* elevated / nested surface */
  --fill:#2A2A2E;         /* neutral icon tile fill */
  --sep:rgba(255,255,255,.08);
  --label:#F2F2F4;
  --label-2:#9A9AA2;      /* secondary text */
  --label-3:rgba(154,154,162,.55);
  --glyph:#E4E4E8;        /* neutral icon glyph */
  --accent:#E8A33D;       /* the one accent */
  --r:14px;
  --tap:44px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --tab-h:50px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--label);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Helvetica Neue',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none;
  font-size:16px;line-height:1.35;
}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;color:inherit;font-size:inherit;background:none;border:0;padding:0;cursor:pointer}

.app-shell{min-height:100vh;padding-bottom:calc(var(--tab-h) + var(--safe-b) + 16px);display:flex;flex-direction:column}
main{flex:1;max-width:680px;width:100%;margin:0 auto;padding:calc(var(--safe-t) + 12px) 16px 24px}

/* Large title (navigation convention) */
.large-title{padding:6px 0 4px}
.large-title .eyebrow{
  font-size:12px;color:var(--label-2);font-weight:700;
}
.large-title h1{margin:2px 0 0;font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.08}
.large-title .sub{color:var(--label-2);font-size:15px;margin-top:4px;font-weight:400}

/* Current-phase card (flat) */
.now-card{background:var(--card);border-radius:var(--r);padding:16px;margin:14px 0 10px}
.live-dot{font-size:12px;font-weight:700;color:var(--label-2)}
.now-card.live .live-dot{color:var(--accent)}
.now-phase{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:6px 0 1px}
.now-when{color:var(--label-2);font-size:14px;font-variant-numeric:tabular-nums}
.now-todo{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--label);font-weight:400}
.now-todo b{font-weight:700;color:var(--label-2)}

/* Grouped list (iOS-style rows) */
.list{background:var(--card);border-radius:var(--r);margin:6px 0 8px;overflow:hidden}
.list-header{
  padding:20px 4px 8px;color:var(--label);font-size:16px;font-weight:700;
}
.row{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;min-height:var(--tap);
  position:relative;
}
.row + .row::before,
.row-btn + .row::before,
.row + .row-btn::before,
.row-btn + .row-btn::before{
  content:"";position:absolute;left:58px;right:0;top:0;height:1px;
  background:var(--sep);transform:scaleY(.5);transform-origin:top;
}
.row-btn{width:100%;text-align:left;color:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;padding:11px 16px;min-height:var(--tap);position:relative}
.row-btn:active{background:var(--card-2)}
.row-icon{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:var(--fill);color:var(--glyph);
  display:inline-flex;align-items:center;justify-content:center;
}
.row-icon svg{width:17px;height:17px}
/* All tint-* variants neutralized to the same flat fill/glyph */
.row-icon.tint-blue,.row-icon.tint-green,.row-icon.tint-red,.row-icon.tint-orange,
.row-icon.tint-teal,.row-icon.tint-indigo,.row-icon.tint-purple,.row-icon.tint-gray{
  background:var(--fill);color:var(--glyph);
}
.row-body{flex:1;min-width:0}
.row-title{font-weight:400;font-size:16px;letter-spacing:-.01em}
.row-sub{color:var(--label-2);font-size:13px;margin-top:1px}
.row-meta{color:var(--label-2);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.row-chev{color:var(--label-3);flex:none;display:inline-flex}
.row-chev svg{width:14px;height:14px}

/* Stat rollup */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 8px}
.stat{background:var(--card);border-radius:var(--r);padding:12px 8px;text-align:center}
.stat .n{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;color:var(--label-2);margin-top:3px;font-weight:400}
@media (max-width:360px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

/* Accordion (grouped list with disclosure) */
.acc-list{background:var(--card);border-radius:var(--r);margin:6px 0 8px;overflow:hidden}
.acc-item{position:relative}
.acc-item + .acc-item::before{
  content:"";position:absolute;left:16px;right:0;top:0;height:1px;
  background:var(--sep);transform:scaleY(.5);transform-origin:top;
}
.acc-btn{width:100%;display:flex;align-items:center;gap:10px;padding:13px 16px;min-height:var(--tap);text-align:left}
.acc-btn:active{background:var(--card-2)}
.acc-title{flex:1;min-width:0;font-weight:400;font-size:16px;letter-spacing:-.01em}
.acc-meta{color:var(--label-2);font-size:13px;font-variant-numeric:tabular-nums}
.acc-chev{color:var(--label-3);transition:transform .18s ease;flex:none;display:inline-flex}
.acc-chev svg{width:14px;height:14px}
.acc-item[data-open="true"] .acc-chev{transform:rotate(90deg)}
.acc-body{display:none;padding:2px 16px 16px}
.acc-item[data-open="true"] .acc-body{display:block}

/* Nested surfaces inside cards */
.sub-list{background:var(--card-2);border-radius:var(--r);overflow:hidden;margin-top:8px}
.sub-list .row + .row::before{left:58px}

.empty{padding:18px 16px;text-align:center;color:var(--label-2);background:var(--card-2);border-radius:var(--r)}
.empty-title{color:var(--label);font-weight:700;margin-bottom:3px;font-size:15px}
.empty-sub{font-size:13px;line-height:1.5;max-width:44ch;margin:0 auto;font-weight:400}
.empty-pill{
  display:inline-block;margin-top:10px;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;color:var(--label-2);background:var(--fill);
}

/* Timeline (nested) */
.timeline{background:var(--card-2);border-radius:var(--r);overflow:hidden;margin-top:8px}
.tl{display:flex;gap:12px;padding:13px 14px;position:relative}
.tl + .tl::before{
  content:"";position:absolute;left:52px;right:0;top:0;height:1px;
  background:var(--sep);transform:scaleY(.5);transform-origin:top;
}
.tl-step{
  width:26px;flex:none;text-align:center;
  color:var(--label-2);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;
  padding-top:1px;
}
.tl.now .tl-step{color:var(--accent)}
.tl.now .tl-title{color:var(--accent)}
.tl-body{flex:1;min-width:0}
.tl-title{font-weight:700;font-size:15px}
.tl-when{color:var(--label-2);font-size:13px;margin-top:1px;font-variant-numeric:tabular-nums}
.tl-note{color:var(--label-2);font-size:14px;margin-top:6px;line-height:1.5;font-weight:400}
.tl-note b{color:var(--label);font-weight:700}

/* Table (nested, hairlines only) */
.table-wrap{background:var(--card-2);border-radius:var(--r);overflow-x:auto;margin-top:8px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;text-align:left;font-variant-numeric:tabular-nums}
th{color:var(--label-2);font-weight:400;font-size:12px}
td{border-top:1px solid var(--sep)}
tbody tr:first-child td{border-top-width:1px}

/* Tag — grey text distinguished by label only, one primary tag keeps a subtle amber tint */
.tag{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--label-2)}
.tag.fact{color:var(--accent)}
.tag.derived{color:var(--label-2)}
.tag.unknown{color:var(--label-2)}
.tag.theory{color:var(--label-2)}

/* Match-up */
.vs{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  background:var(--card-2);border-radius:var(--r);padding:14px;margin-top:8px;
}
.vs .side{min-width:0}
.vs .side-name{font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.vs .side-meta{color:var(--label-2);font-size:12px;margin-top:3px;font-weight:400}
.vs .vs-x{color:var(--label-3);font-weight:700;font-size:12px}

/* Text helpers */
.p{color:var(--label-2);line-height:1.55;margin:8px 0;font-weight:400}
.small{font-size:13px}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace}
.src{color:var(--label-2);font-size:11px;margin-top:6px;font-family:'JetBrains Mono',ui-monospace,monospace}

/* Tab bar */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#1A1A1C;
  padding-bottom:var(--safe-b);
  min-height:var(--tab-h);
}
.tabbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--sep);transform:scaleY(.5);transform-origin:top;
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  color:var(--label-2);font-size:10px;font-weight:500;
  padding:5px 4px;min-height:var(--tab-h);
}
.tabbar a.on{color:var(--accent)}
.tabbar a svg{width:23px;height:23px}

/* Tip card (Win / Lose) — grey labels, no color coding beyond text */
.tip-card{margin-top:10px;background:var(--card-2);border-radius:var(--r);overflow:hidden}
.tip-row{display:flex;gap:10px;padding:10px 12px;position:relative;align-items:flex-start}
.tip-row + .tip-row::before{
  content:"";position:absolute;left:12px;right:0;top:0;height:1px;
  background:var(--sep);transform:scaleY(.5);transform-origin:top;
}
.tip-label{flex:none;width:38px;font-size:11px;font-weight:700;padding-top:3px;color:var(--label-2)}
.tip-label.ok{color:var(--accent)}
.tip-label.bad{color:var(--label-2)}
.tip-text{flex:1;font-size:14px;color:var(--label);line-height:1.5;font-weight:400}

/* Playbook (single grouped list, plain counters) */
.playbook{list-style:none;counter-reset:pb;padding:0;margin:8px 0 0;background:var(--card-2);border-radius:var(--r);overflow:hidden}
.playbook li{counter-increment:pb;position:relative;padding:12px 14px 12px 46px}
.playbook li + li::before{
  content:"";position:absolute;left:46px;right:0;top:0;height:1px;
  background:var(--sep);transform:scaleY(.5);transform-origin:top;
}
.playbook li::after{
  content:counter(pb);position:absolute;left:14px;top:12px;
  color:var(--label-2);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;
}
.pb-text{font-size:15px;line-height:1.5;color:var(--label);font-weight:400}

/* Credits footer (plain text, no links) */
.src-footer{margin-top:4px;padding:0 16px}
.src-footer .list-header{padding-left:0}
.src-footer .p{margin-top:0}

/* ========== Guide: banner, editorial cards, section detail ========== */

/* Full-bleed static banner at top of Guide */
.banner{
  position:relative;
  margin:-4px -16px 18px;
  height:260px;
  overflow:hidden;
}
.banner-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center 40%;
}
.banner-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 25%, rgba(0,0,0,0) 45%);
}
.banner-body{
  position:absolute;left:16px;right:16px;bottom:18px;color:#fff;
}
.banner-title{
  margin:4px 0 2px;font-size:28px;font-weight:700;letter-spacing:-.02em;color:#fff;
}
.banner-meta{
  color:rgba(242,242,244,.75);font-size:13px;font-weight:400;
}

/* Section header row */
.section-row{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:20px 4px 8px;
}
.section-row .list-header{padding:0}

/* Featured editorial cards — full-width stacked, 16:9 */
.feat-list{display:flex;flex-direction:column;gap:12px;margin:2px 0 10px}
.feat-card{
  position:relative;display:block;width:100%;padding:0;overflow:hidden;
  border-radius:16px;background:var(--card);aspect-ratio:16/9;
  text-align:left;cursor:pointer;
}
.feat-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.feat-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 25%, rgba(0,0,0,0) 45%);
}
.feat-label{position:absolute;left:16px;right:16px;bottom:12px;color:#fff}
.feat-title{
  font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.feat-meta{
  font-size:12px;color:rgba(242,242,244,.75);margin-top:4px;font-weight:400;
}

/* Plain iOS-style grouped rows for Reference section — reuse .list/.row */

/* Section detail (opened section) */
.section-head{margin:4px 0 0}
.back-btn{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--accent);font-size:15px;font-weight:700;padding:4px;
}
.section-hero .back-btn{
  position:absolute;left:16px;top:14px;z-index:2;
}
.section-hero{
  position:relative;margin:0 -16px 14px;height:200px;overflow:hidden;
}
.section-hero-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.section-hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 25%, rgba(0,0,0,0) 45%);
}
.section-hero-body{
  position:absolute;left:16px;right:16px;bottom:16px;color:#fff;
}
.section-hero-body h2{
  margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:#fff;
}
.section-hero-sub{color:rgba(242,242,244,.75);font-size:13px;margin-top:4px;font-weight:400}

/* No-art section header (plain, monochrome icon tile) */
.section-plain{
  display:flex;align-items:center;gap:12px;margin:4px 0 14px;
  padding:14px 0;
}
.section-plain-glyph{
  width:40px;height:40px;border-radius:10px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fill);color:var(--glyph);
}
.section-plain-glyph svg{width:20px;height:20px}
.section-plain h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.section-plain-sub{color:var(--label-2);font-size:13px;margin-top:2px;font-weight:400}

.section-body{}
.section-body > * + *{margin-top:12px}
.section-body p.p, .section-body p.small{color:var(--label-2);font-size:14px;line-height:1.55}

/* Alpha room — stacked flat cards */
.alpha-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.alpha-card{background:var(--card-2);border-radius:var(--r);padding:14px}
.alpha-title{font-size:15px;font-weight:700;color:var(--label);line-height:1.35}
.alpha-text{font-size:14px;color:var(--label-2);line-height:1.55;margin-top:6px;font-weight:400}
.alpha-meta{font-size:11px;color:var(--label-2);margin-top:8px;font-family:'JetBrains Mono',ui-monospace,monospace}

/* Entrance animation applied by render() — single nav-level transition, <300ms */
.view-enter{opacity:0}
.view-enter-active{opacity:1;transition:opacity .22s ease}

/* Row entrance stagger in lists (nav-level, one-shot) */
.list .row, .list .row-btn{animation:rowIn .28s ease both}
.list .row:nth-child(1),.list .row-btn:nth-child(1){animation-delay:.01s}
.list .row:nth-child(2),.list .row-btn:nth-child(2){animation-delay:.03s}
.list .row:nth-child(3),.list .row-btn:nth-child(3){animation-delay:.05s}
.list .row:nth-child(4),.list .row-btn:nth-child(4){animation-delay:.07s}
.list .row:nth-child(5),.list .row-btn:nth-child(5){animation-delay:.09s}
.list .row:nth-child(6),.list .row-btn:nth-child(6){animation-delay:.11s}

.feat-list .feat-card{animation:rowIn .28s ease both}
.feat-list .feat-card:nth-child(1){animation-delay:.01s}
.feat-list .feat-card:nth-child(2){animation-delay:.04s}
.feat-list .feat-card:nth-child(3){animation-delay:.07s}
.feat-list .feat-card:nth-child(4){animation-delay:.10s}
.feat-list .feat-card:nth-child(5){animation-delay:.13s}

/* Keyframes — entrance only, no ambient/looping motion */
@keyframes rowIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes accIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.acc-item[data-open="true"] .acc-body{animation:accIn .2s ease both}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}