/* ===== Coach Roast — "TFT in 1994" gritty scouting-report theme ===== */
/* Self-hosted fonts (subset to latin + basic punctuation) — replaces Google Fonts @import.
   Oswald is a variable font (wght 400-700 in one file); Courier Prime is the
   "typed by Coach" face — swapped in for Special Elite, which read too thin/spindly. */
@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/oswald-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Courier Prime'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/courier-prime-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Courier Prime'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/courier-prime-bold.woff2') format('woff2');
}
@font-face{
  font-family:'Courier Prime'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/assets/fonts/courier-prime-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Courier Prime'; font-style:italic; font-weight:700; font-display:swap;
  src:url('/assets/fonts/courier-prime-bolditalic.woff2') format('woff2');
}
@font-face{
  /* dry-erase marker face for the fundamentals whiteboard */
  font-family:'Permanent Marker'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/permanent-marker.woff2') format('woff2');
}

:root{
  --ink:#e9e0cb; --ink-dim:#b3a888; --ink-fade:#8a7f63;
  --coach:#ff5b3a;                 /* Coach's signature — his voice only */
  --gold:#c9a24a; --gold-dk:#7a5c22; --silver:#b8b8bf; --bronze:#c17a3f;
  --paper:#efe6cf; --paper-ink:#2a2114; --tape:#d8c98f;
  --good:#6fae5a; --mid:#d9b24a; --bad:#b5452f;
  --c1:#8a8f96; --c2:#5aa15a; --c3:#3a6ea5; --c4:#8a5cc0; --c5:#d9a441; /* cost tiers */
  --panel:#211a10; --panel-2:#2a2115; --edge:#4a3c22; --edge-lt:#6b5630;
  --chalk-bg:#1e2a20; --chalk:#dfe6d2;
  --wb-bg:#f4f4ef; --wb-ink:#1c2733; --wb-ink-fade:#5a6472; --wb-alum:#c7cdd3;
  --sticker:#fdf6d8;               /* cream "cookie" sticker outline (sampled from seed-cup) */
}
*{box-sizing:border-box;}

/* Pyodide warm-up overlay (PHASE2_WEBPORT.md §5.1) — shown from first paint
   until the Python runtime + backend.zip finish loading, then hidden. */
.warmup-screen{
  position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.2rem;
  background:#150f09; color:var(--ink,#e9e0cb);
}
.warmup-screen.hidden{ display:none; }
.warmup-standee{ max-height:40vh; width:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.warmup-text{ font-family:'Courier Prime',monospace; font-size:1rem; letter-spacing:.02em; }

body{
  margin:0; color:var(--ink);
  font-family:'Oswald',system-ui,-apple-system,Segoe UI,sans-serif;
  background:#141109;
  background-image:radial-gradient(#00000038 1px,transparent 1px),
    radial-gradient(circle at 15% 10%, #241a0d 0, #120f08 55%);
  background-size:7px 7px, 100% 100%;
  line-height:1.5; min-height:100vh;
}
h1,h2,h3{font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin:0;}
.serif{font-family:'Courier Prime','Courier New',monospace; text-transform:none;}

/* ---- header ---- */
header{ text-align:center; padding:1.6rem 1rem .4rem; position:relative;}
.nameplate{
  display:inline-block; background:var(--tape); color:#3a2f16; font-weight:700;
  font-size:2rem; letter-spacing:1px; padding:.3rem 1.6rem; transform:rotate(-1.2deg);
  box-shadow:0 3px 8px #0008, inset 0 0 0 2px #00000018; border-radius:2px;
}
.nameplate .flame{ color:var(--coach); }
.tag{ color:var(--ink-dim); margin-top:.5rem; font-family:'Courier Prime',monospace; text-transform:none;}
.coach-hero{ position:absolute; right:max(2%,10px); bottom:-10px; width:120px; filter:drop-shadow(3px 5px 4px #000a);
  transform:rotate(2deg); pointer-events:none; }
@media(max-width:640px){ .coach-hero{ display:none; } }

/* ---- diploma easter egg: a tiny framed diploma in the corner. Hovering makes
   the scribbled-over middle name flash for a beat, then fade back out. Pure
   CSS, no JS — see PERSONA.md "The name skit". ---- */
.diploma{
  position:absolute; left:max(2%,10px); top:8px; width:118px; padding:.35rem .5rem;
  background:var(--paper); color:var(--paper-ink); border:1px solid #b7a878;
  border-radius:2px; box-shadow:0 3px 8px #0007; transform:rotate(-2.5deg);
  font-family:'Courier Prime',monospace; text-align:center; cursor:default;
}
.diploma-line{ display:block; font-size:.5rem; letter-spacing:.4px; color:#7a5c22; }
.diploma-name{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.5px; margin-top:.15rem; }
.diploma-mid{ position:relative; color:#7a5c22; }
.diploma-mid::after{ content:""; position:absolute; left:-2px; right:-2px; top:48%;
  height:3px; background:#a6381f; transform:rotate(-4deg); }
.diploma-reveal{
  display:block; margin-top:.2rem; font-size:.6rem; font-weight:700; letter-spacing:.5px;
  color:var(--coach); text-transform:uppercase; opacity:0;
}
.diploma:hover .diploma-reveal{ animation:diplomaFlash 1.4s ease; }
@keyframes diplomaFlash{
  0%{ opacity:0; } 15%{ opacity:1; } 60%{ opacity:1; } 100%{ opacity:0; }
}
@media(max-width:640px){ .diploma{ display:none; } }

main{ max-width:900px; margin:0 auto; padding:1rem 1rem 4rem; }

/* ---- controls ---- */
.controls{ position:relative; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; justify-content:center; margin-bottom:1.6rem;}
input,select{
  padding:.6rem .8rem; border-radius:4px; border:1px solid var(--edge-lt);
  background:#17130b; color:var(--ink); font-family:'Oswald',sans-serif; font-size:1rem;
}
input{ min-width:220px; }
select{ cursor:pointer; }
button{
  padding:.6rem 1.3rem; border:1px solid #7a2c17; border-radius:4px; cursor:pointer;
  background:var(--coach); color:#fff; font-weight:700; font-size:1rem; letter-spacing:.5px;
  text-transform:uppercase; font-family:'Oswald',sans-serif; box-shadow:0 2px 0 #7a2c17;
}
button:active{ transform:translateY(1px); box-shadow:0 1px 0 #7a2c17; }
button:disabled{ opacity:.5; cursor:default; }
#status{ position:absolute; top:100%; left:0; right:0; text-align:center; margin-top:.35rem;
  color:var(--ink-dim); font-size:.9rem; font-family:'Courier Prime',monospace;}
.hidden{ display:none !important; }

/* ---- in-character empty/error states (UI_PERSONA_PLAN A2): a bad Riot ID,
   a 404 lookup, or a dead Riot API call get a coach head cutout + a roast-y
   one-liner instead of a bare error string — same speech-bubble shape as
   .coach-quote/.bubble, but with the --bad accent so it reads as a flag. ---- */
.error-card{
  display:flex; align-items:center; gap:2px; max-width:560px; margin:1.6rem auto 0;
  position:relative;
}
.error-head{
  flex:0 0 auto; width:60px; height:60px; object-fit:contain;
  filter:drop-shadow(2px 4px 3px #000a); z-index:2; transform:rotate(-3deg);
}
#errorText{
  position:relative; flex:1; background:var(--paper); color:var(--paper-ink);
  border:1px solid #b7a878; border-left:4px solid var(--bad); border-radius:10px;
  padding:.7rem .95rem; font-size:.98rem; line-height:1.5; margin-left:10px;
  box-shadow:3px 4px 0 #00000045; transform:rotate(-.4deg); font-family:'Courier Prime',monospace;
}
#errorText::before{ content:""; position:absolute; left:-11px; top:16px;
  border-width:8px 12px 8px 0; border-style:solid; border-color:transparent var(--bad) transparent transparent; }
#errorText::after{ content:""; position:absolute; left:-8px; top:17px;
  border-width:7px 10px 7px 0; border-style:solid; border-color:transparent var(--paper) transparent transparent; }

/* ---- sections ---- */
#results{ display:flex; flex-direction:column; gap:1.6rem; margin-top:1.4rem; }
.sec{ position:relative; }
.sec-head{
  display:flex; align-items:center; gap:.6rem; margin:0 0 .8rem;
  border-bottom:2px solid var(--edge); padding-bottom:.35rem;
}
.sec-num{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  background:var(--coach); color:#fff; border-radius:50%; font-weight:700; font-size:.85rem;
  box-shadow:0 2px 4px #0007;
}
.sec-head h2{ color:var(--gold); font-size:1.15rem; }
.sec-head .sub{ color:var(--ink-fade); font-size:.8rem; font-weight:400; font-family:'Courier Prime',monospace; text-transform:none; margin-left:.3rem;}

/* ---- panels (kraft cards, 3D) ---- */
.panel{
  position:relative; background:var(--panel);
  border:1px solid var(--edge); border-radius:6px; padding:1.1rem 1.2rem;
  box-shadow:0 6px 14px #0007, inset 0 0 0 1px #00000030;
}
.panel + .panel{ margin-top:1rem; }
.panel h3{ color:var(--gold); font-size:1rem; margin:0 0 .7rem; }
.panel h3 small{ color:var(--ink-fade); font-weight:400; font-size:.78rem; font-family:'Courier Prime',monospace; text-transform:none;}
.tack{ position:absolute; top:-9px; left:50%; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a6f, var(--coach) 60%, #8a2c15);
  box-shadow:0 2px 3px #0009; transform:translateX(-50%); }

/* ---- Coach speech bubbles (the "his voice" mechanic) ---- */
.coach-quote{ display:flex; align-items:center; gap:2px; margin:.6rem 0; position:relative; }
.coach-cut{ flex:0 0 auto; width:64px; height:64px; object-fit:contain;
  filter:drop-shadow(2px 4px 3px #000a); z-index:2; transform:rotate(-3deg); }
.coach-cut.sm{ width:48px; height:48px; }
.bubble{
  position:relative; flex:1; background:var(--paper); color:var(--paper-ink);
  border:1px solid #b7a878; border-left:4px solid var(--coach); border-radius:10px;
  padding:.7rem .95rem; font-size:.98rem; line-height:1.5; margin-left:10px;
  box-shadow:3px 4px 0 #00000045; transform:rotate(-.4deg); font-family:'Courier Prime',monospace;
}
.bubble::before{ content:""; position:absolute; left:-11px; top:16px;
  border-width:8px 12px 8px 0; border-style:solid; border-color:transparent var(--coach) transparent transparent; }
.bubble::after{ content:""; position:absolute; left:-8px; top:17px;
  border-width:7px 10px 7px 0; border-style:solid; border-color:transparent var(--paper) transparent transparent; }
.bubble strong{ color:#a6381f; }
.bubble .kw.chronic{ color:var(--bad); font-weight:700;}
.bubble .kw.recent{ color:#b5872f; font-weight:700;}
.bubble .kw.good{ color:#3e7a2c; font-weight:700;}

/* ---- the roast: scouting report page ---- */
.report{
  position:relative; background:var(--paper); color:var(--paper-ink);
  border:1px solid #b7a878; border-radius:4px; padding:1.3rem 1.5rem 1.1rem;
  box-shadow:0 8px 20px #0009; font-family:'Courier Prime',monospace;
}
.report::before{ content:"SCOUTING REPORT"; position:absolute; top:.5rem; right:1rem;
  font-family:'Oswald'; font-weight:700; color:#00000018; font-size:1.1rem; letter-spacing:2px;}
.report .stamp{ position:absolute; top:-14px; left:1.2rem; background:var(--tape); color:#3a2f16;
  font-family:'Oswald'; font-weight:700; padding:.25rem .9rem; transform:rotate(-2deg);
  box-shadow:0 2px 5px #0007; font-size:.85rem; letter-spacing:1px;}
/* verdict stamp — rubber-stamped grade, picked from avg placement + trend
   (see UI_PERSONA_PLAN A2 "Verdict / roast"). Thunks in once the roast renders.
   Sits as a flex child in the header row itself, in the gap between the coach's
   name and the clipboard icon — margin-left:auto pushes it out of the text, and
   margin-right holds it clear of the clipboard (which floats further right,
   positioned relative to .report, not this row). mix-blend-mode + a slightly
   uneven double-edge make it read as a worn ink stamp, not a clean vector badge. */
.report .verdict-stamp{
  position:static; display:inline-block; flex:0 0 auto; align-self:center;
  margin-left:auto; margin-right:3.5rem;
  background:transparent; color:var(--coach); mix-blend-mode:multiply; opacity:.82;
  border:3px solid var(--coach); border-radius:3px 5px 4px 6px/4px 6px 3px 5px;
  box-shadow:1.5px 1.5px 0 0 currentColor, inset 0 0 0 1px currentColor;
  text-shadow:.4px 0 0 currentColor, 0 .4px 0 currentColor;
  transform:rotate(6deg) scale(1); letter-spacing:.5px;
  font-size:.95rem; padding:.2rem .7rem;
  animation:stampThunk .35s cubic-bezier(.3,1.6,.5,1);
}
.report .verdict-stamp.grade-good{ color:var(--good); border-color:var(--good); }
.report .verdict-stamp.grade-mid{ color:var(--mid); border-color:var(--mid); }
.report .verdict-stamp.grade-bad{ color:var(--bad); border-color:var(--bad); }
@keyframes stampThunk{
  0%{ opacity:0; transform:rotate(6deg) scale(2.2); }
  70%{ opacity:.82; }
  100%{ opacity:.82; transform:rotate(6deg) scale(1); }
}
@media(prefers-reduced-motion:reduce){ .report .verdict-stamp{ animation:none; } }
@media(max-width:640px){ .report .verdict-stamp{ display:none; } }
.report-head{ display:flex; align-items:center; gap:.9rem; border-bottom:2px dashed #b7a878; padding-bottom:.7rem; margin-bottom:.8rem; }
.report-head img{ width:70px; filter:drop-shadow(1px 2px 2px #0006);}
.report-head .who h2{ color:#3a2a10; font-family:'Oswald'; font-size:1.3rem; }
.report-head .who .sub{ color:#7a5c22; font-size:.85rem; }
.report-body p{ margin:.55rem 0; }
.report-body .lead{ font-size:1.05rem; color:#3a2a10; font-weight:700; font-family:'Oswald'; text-transform:none;}
.report-body strong{ color:#a6381f; }
.roast-fix{ background:#e7dcc0; border-left:4px solid var(--coach); border-radius:4px;
  padding:.45rem .75rem; margin:.5rem 0 .8rem; font-size:.92rem;}
.roast-fix .fix-tag{ background:var(--coach); color:#fff; font-family:'Oswald'; font-weight:700;
  font-size:.7rem; padding:1px 7px; border-radius:3px; margin-right:.5rem; letter-spacing:.5px;}
.roast-list{ margin:.4rem 0; padding-left:1.1rem; list-style:none;}
.roast-list li{ position:relative; margin:.4rem 0; padding-left:1rem;}
.roast-list li::before{ content:"\2b22"; color:var(--coach); position:absolute; left:-.15rem; top:0; font-size:.7rem;}
.homework{ background:#3a2a10; color:#f3ead2; border-radius:4px; padding:.5rem .8rem; margin-top:.9rem;}
.homework .fix-tag{ background:var(--gold); color:#2a1e08;}
.signoff{ text-align:right; color:#a6381f; font-weight:700; font-family:'Oswald'; margin-top:.8rem;
  border-top:1px dashed #b7a878; padding-top:.5rem;}
.roast-block:first-child .lead{ }

/* ---- stat tiles ---- */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.6rem; }
.stat{ background:var(--panel-2); border:1px solid var(--edge); border-radius:5px; padding:.7rem; text-align:center;
  box-shadow:0 3px 6px #0006;}
.stat .num{ font-size:1.5rem; font-weight:700; color:var(--ink);}
.stat .num.good{ color:var(--good);} .stat .num.bad{ color:var(--bad);}
.stat .lbl{ font-size:.72rem; color:var(--ink-fade); text-transform:uppercase; letter-spacing:.3px;}

/* ---- rank pennant ---- */
.rank-card{ display:flex; gap:1rem; align-items:center; background:var(--panel); border:1px solid var(--edge);
  border-radius:6px; padding:.9rem 1.1rem; box-shadow:0 6px 14px #0007;}
.rank-tier{ font-size:1.5rem; font-weight:700; color:var(--gold); font-family:'Oswald';}
.rank-lp{ color:var(--ink-dim);} .rank-right{ margin-left:auto; display:flex; gap:1.4rem; text-align:center;}
.rank-right b{ display:block; font-size:1.2rem; color:var(--ink);} .rank-right span{ font-size:.72rem; color:var(--ink-fade); text-transform:uppercase;}

/* ---- diagnosis badges ---- */
.insights{ display:flex; flex-direction:column; gap:.5rem;}
.dx{ background:var(--panel-2); border:1px solid var(--edge); border-left-width:4px; border-radius:4px; padding:.55rem .8rem;}
.dx-chronic{ border-left-color:var(--bad);} .dx-recent{ border-left-color:var(--mid);}
.dx-good{ border-left-color:var(--good);} .dx-issue{ border-left-color:var(--edge-lt);} .dx-info{ border-left-color:var(--c3);}
.dx-top{ display:flex; align-items:center; gap:.5rem;}
.dx-badge{ font-family:'Oswald'; font-weight:700; font-size:.68rem; padding:1px 7px; border-radius:3px; letter-spacing:.5px; color:#141109;}
.dx-badge.chronic{ background:var(--bad); color:#fff;} .dx-badge.recent{ background:var(--mid);}
.dx-badge.good{ background:var(--good); color:#fff;} .dx-badge.issue{ background:var(--edge-lt); color:var(--ink);} .dx-badge.info{ background:var(--c3); color:#fff;}
.dx b{ color:var(--ink);} .dx-detail{ display:block; color:var(--ink-dim); font-size:.9rem; margin-top:.15rem; font-family:'Courier Prime',monospace;}

/* ---- fundamentals chips ---- */
.fund-chips{ display:flex; flex-wrap:wrap; gap:.55rem;}
.chip{ display:flex; flex-direction:column; gap:.1rem; min-width:92px; padding:.5rem .7rem;
  background:var(--panel-2); border:1px solid var(--edge); border-radius:5px; box-shadow:0 3px 6px #0005;}
.chip-val{ font-size:1.05rem; font-weight:700; color:var(--ink);}
.chip-lbl{ font-size:.68rem; color:var(--ink-fade); text-transform:uppercase; letter-spacing:.3px;}
.chip.good .chip-val{ color:var(--good);} .chip.bad .chip-val{ color:var(--bad);}

/* ---- fundamentals as a dry-erase whiteboard (UI_PERSONA_PLAN A2): brushed-
   aluminum frame (double border + corner bolts), marker-handwriting face for
   values, faint eraser ghosting behind the panel, X's/O's in "wet" marker ink
   for leaks vs strengths. No new raster assets — pure CSS + one self-hosted
   font (Permanent Marker, subset). ---- */
.panel.chalkboard{
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, #00000009 0, transparent 70%),
    radial-gradient(ellipse 50% 35% at 75% 70%, #00000007 0, transparent 70%),
    var(--wb-bg);
  border:10px solid var(--wb-alum);
  border-radius:3px;
  box-shadow:
    inset 0 0 0 2px #ffffffb0, inset 0 0 0 3px #8b929b,
    inset 0 2px 10px #0000001a,
    0 4px 10px #0007;
  position:relative;
}
/* brushed-metal texture + corner bolts on the aluminum frame */
.panel.chalkboard::before{
  content:""; position:absolute; inset:-10px; pointer-events:none; border-radius:3px;
  background:repeating-linear-gradient(100deg,#ffffff22 0 1px,transparent 1px 3px),
    linear-gradient(155deg,#dbdfe3,#b9c0c6 45%,#dbdfe3 55%,#a9b0b6);
  mix-blend-mode:overlay; opacity:.55;
}
.panel.chalkboard::after{
  content:""; position:absolute; inset:-10px; pointer-events:none; border-radius:3px;
  background:
    radial-gradient(circle 3px at 8px 8px, #6d747b 0 2px, #eef1f3 2.5px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 8px) 8px, #6d747b 0 2px, #eef1f3 2.5px, transparent 3px),
    radial-gradient(circle 3px at 8px calc(100% - 8px), #6d747b 0 2px, #eef1f3 2.5px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 8px) calc(100% - 8px), #6d747b 0 2px, #eef1f3 2.5px, transparent 3px);
}
.panel.chalkboard h3{
  color:var(--wb-ink); text-shadow:none;
  font-family:'Permanent Marker',cursive; font-weight:400; letter-spacing:.5px;
  transform:rotate(-.6deg);
}
.panel.chalkboard h3 small{ color:var(--wb-ink-fade); font-family:'Courier Prime',monospace; }
.panel.chalkboard .chip{
  background:#ffffffb3; border:2px dashed #aab1b8; box-shadow:0 1px 2px #0000000d;
  position:relative; padding-left:1.75rem;
}
.panel.chalkboard .chip-val{
  color:var(--wb-ink); text-shadow:none;
  font-family:'Permanent Marker',cursive; font-weight:400; font-size:1.2rem;
}
.panel.chalkboard .chip-lbl{ color:var(--wb-ink-fade); font-family:'Courier Prime',monospace; }
.panel.chalkboard .chip.good .chip-val{ color:#2f7d3a; }
.panel.chalkboard .chip.bad .chip-val{ color:#c23a2b; }
.panel.chalkboard .chip::before{
  position:absolute; left:.4rem; top:50%; transform:translateY(-50%) rotate(-8deg);
  font-family:'Permanent Marker',cursive; font-weight:400; font-size:1.3rem; line-height:1;
  color:#8b929b;
}
.panel.chalkboard .chip.good::before{ content:"○"; color:#2f7d3acc; }
.panel.chalkboard .chip.bad::before{ content:"✕"; color:#c23a2bcc; }

/* ---- comps: medals ---- */
.medals{ display:flex; flex-wrap:wrap; gap:.9rem;}
.medal-row{ display:flex; align-items:center; gap:.5rem; font-size:.95rem;}
.medal{ width:26px; height:26px; border-radius:50%; box-shadow:0 2px 4px #0008; flex:0 0 auto; border:2px solid #00000030;}
.medal.gold{ background:radial-gradient(circle at 35% 30%,#f0d78c,var(--gold) 70%); }
.medal.silver{ background:radial-gradient(circle at 35% 30%,#e8e8ee,var(--silver) 70%); }
.medal.bronze{ background:radial-gradient(circle at 35% 30%,#e0a877,var(--bronze) 70%); }

/* ---- carries: trading cards ---- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.7rem;}
.tcard{ background:var(--paper); border:1px solid #9c8b5f; border-radius:5px; overflow:hidden;
  box-shadow:2px 3px 0 #00000040, 0 5px 10px #0006; transform:rotate(-.3deg);}
.tcard:nth-child(even){ transform:rotate(.4deg);}
.tcard .stripe{ height:6px;}
.tcard .body{ padding:.5rem .7rem; color:var(--paper-ink);}
.tcard .nm{ font-weight:700; font-size:1rem; text-transform:uppercase;}
.tcard .meta{ font-size:.75rem; color:#7a5c22; font-family:'Courier Prime',monospace;}
.tcard .pl{ font-size:1.3rem; font-weight:700; font-family:'Oswald';}
.tier-good{ background:var(--good);} .tier-mid{ background:var(--gold);} .tier-bad{ background:var(--bad);}
.txt-good{ color:var(--good);} .txt-mid{ color:#a07d1f;} .txt-bad{ color:var(--bad);}

/* ---- tables (comp / items) ---- */
table{ width:100%; border-collapse:collapse; font-size:.9rem;}
th{ text-align:left; color:var(--ink-fade); font-weight:600; font-size:.72rem; text-transform:uppercase;
  border-bottom:1px solid var(--edge); padding:.3rem .4rem;}
td{ padding:.35rem .4rem; border-bottom:1px solid #00000030; color:var(--ink);}
td.good,.good{ color:var(--good);} td.bad,.bad{ color:var(--bad);}
.hint{ color:var(--ink-fade); font-size:.78rem; font-family:'Courier Prime',monospace; text-transform:none; margin:.5rem 0 0;}

/* ---- charts on chalkboard ---- */
.chart-wrap{ position:relative; height:240px; background:var(--chalk-bg); border:3px solid #0d140f;
  border-radius:5px; padding:.4rem; box-shadow:inset 0 0 24px #000a, 0 4px 8px #0006;}
.chart-wrap-sm{ height:150px; margin-top:.7rem;}

/* ---- LP graph as a hand-plotted wall chart (UI_PERSONA_PLAN A2): a sheet of
   graph paper pinned to the panel, rank line drawn as if hand-inked in felt
   pen. Chart.js's own grid is switched off in app.js for this panel so the
   CSS graph-paper grid shows through the (now-transparent) canvas. ---- */
.panel.wallchart{
  background:
    repeating-linear-gradient(0deg, #6f97c233 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, #6f97c233 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, #6f97c218 0 1px, transparent 1px 110px),
    repeating-linear-gradient(90deg, #6f97c218 0 1px, transparent 1px 110px),
    #f3efe0;
  border:1px solid #d8cfa8; border-radius:2px;
  box-shadow:0 6px 16px #0007, 0 1px 0 #ffffff30 inset;
  transform:rotate(-.5deg); position:relative; overflow:visible;
}
.panel.wallchart h3{ color:#2a3a52; text-shadow:none; }
.panel.wallchart h3 small{ color:#5a6b85; }
.panel.wallchart .chart-wrap{
  background:transparent; border:none; border-radius:0;
  box-shadow:none; padding:.2rem 0 0;
}
.panel.wallchart .pin{
  position:absolute; top:-9px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a7a, #b5352a 65%, #7a1f18);
  box-shadow:0 3px 4px #00000060; z-index:2;
}
.panel.wallchart .pin-l{ left:22px; transform:rotate(-8deg); }
.panel.wallchart .pin-r{ right:26px; transform:rotate(10deg); }

/* ---- recent games: torn ticket stubs (UI_PERSONA_PLAN A2) ----
   Fixed 3-column grid (9 stubs = a clean 3x3) rather than flex-wrap, so the
   row count doesn't depend on viewport width and never leaves a lonely
   leftover stub on its own row. */
.match-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem 1rem; padding-top:.2rem; }
@media(max-width:760px){ .match-list{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .match-list{ grid-template-columns:1fr; } }
.match{
  display:flex; align-items:stretch; min-width:0;
  background:var(--paper); border:1px solid #b7a878; border-radius:4px;
  box-shadow:2px 3px 0 #00000040, 0 5px 10px #0006; overflow:hidden;
  transform:rotate(-1.1deg);
}
.match:nth-child(2n){ transform:rotate(.9deg); }
.match:nth-child(3n){ transform:rotate(-.4deg); }
.match:nth-child(5n){ transform:rotate(1.4deg); }
.match-place{
  flex:0 0 auto; width:38px; display:flex; align-items:center; justify-content:center;
  font-family:'Oswald'; font-weight:700; font-size:1.15rem; color:#141109;
}
.match-place.p1{ background:var(--gold);} .match-place.p4{ background:var(--good);} .match-place.p8{ background:var(--bad);}
/* the tear-line: a dashed seam like a torn ticket stub */
.match-stub-body{
  flex:1; min-width:0; padding:.45rem .6rem;
  border-left:2px dashed #b7a878;
  display:flex; flex-direction:column; gap:.15rem;
}
.match-comp{ font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.2px;
  color:#3a2a10; font-family:'Oswald'; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.match-meta{ color:#7a5c22; font-size:.72rem; font-family:'Courier Prime',monospace;}
.match-3star{ color:var(--coach); font-size:.72rem; font-family:'Courier Prime',monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---- last session review (PLAN_V2 §1.1/§1.4): per-game dossier cards, each
   showing Coach's phrased review + a real community tier badge where the
   board matched the TFTAcademy snapshot. ---- */
.review-list{ display:flex; flex-direction:column; gap:.7rem; padding-top:.2rem; }
.review-card{
  display:flex; align-items:flex-start; gap:.7rem;
  background:var(--panel-2); border:1px solid var(--edge); border-radius:6px;
  padding:.6rem .8rem;
}
.review-place{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald'; font-weight:700; font-size:1rem; color:#141109;
}
.review-place.p1{ background:var(--gold);} .review-place.p4{ background:var(--good);} .review-place.p8{ background:var(--bad);}
.review-body{ flex:1; min-width:0; }
.review-top{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.2rem;}
.review-comp{ font-weight:700; font-size:.85rem; color:var(--ink); font-family:'Oswald';}
.tier-badge{
  font-family:'Oswald'; font-weight:700; font-size:.66rem; padding:1px 6px;
  border-radius:3px; letter-spacing:.4px; color:#141109;
}
.tier-badge.tier-s{ background:var(--gold);} .tier-badge.tier-a{ background:var(--good); color:#fff;}
.tier-badge.tier-b{ background:var(--mid);} .tier-badge.tier-c{ background:var(--bad); color:#fff;}
.tier-badge.tier-situational{ background:var(--c3); color:#fff;}
.tier-badge.tier-lobby{ background:var(--edge-lt); color:var(--ink);}
.review-text{ color:var(--ink-dim); font-size:.88rem; line-height:1.45;}
#gameReviewAttribution{ margin-top:.5rem; }

/* ---- chat panel ---- */
.chat-panel .hint{ margin-top:.6rem;}
.chat-log{ display:flex; flex-direction:column; gap:.7rem; max-height:400px; overflow-y:auto; padding:.2rem; margin-bottom:.9rem;}
.chat-msg{ display:flex; flex-direction:column; max-width:90%;}
.chat-user{ align-self:flex-end; align-items:flex-end;}
.chat-assistant{ align-self:flex-start; align-items:flex-start; max-width:95%;}
.chat-who{ font-size:.66rem; color:var(--ink-fade); margin:0 .3rem .15rem; text-transform:uppercase; letter-spacing:.5px;}
.chat-bubble{ padding:.6rem .9rem; border-radius:10px; font-size:.95rem; line-height:1.5;}
.chat-user .chat-bubble{ background:var(--coach); color:#fff; border-bottom-right-radius:3px;}
.chat-assistant .chat-bubble{ background:var(--paper); color:var(--paper-ink); border:1px solid #b7a878;
  border-left:4px solid var(--coach); border-bottom-left-radius:3px; font-family:'Courier Prime',monospace;}
.chat-assistant .chat-bubble strong{ color:#a6381f;}
.chat-msg.pending .chat-bubble{ opacity:.6; font-style:italic;}
.chat-row-a{ display:flex; align-items:flex-start; gap:6px;}
.chat-row-a .coach-cut{ width:42px; height:42px; margin-top:2px;}
.chat-input-row{ display:flex; gap:.5rem;} .chat-input-row input{ flex:1; min-width:0;}

/* ---- backfill / misc ---- */
.backfill{ background:var(--panel-2); border:1px solid var(--edge); border-radius:5px; padding:.7rem 1rem;}
.bf-track{ height:8px; background:#0d0a05; border-radius:4px; margin-top:.4rem; overflow:hidden;}
.bf-bar{ height:100%; background:var(--coach); width:0;}

/* ---- VHS tracking-line loading effect (UI_PERSONA_PLAN A2): the "reviewing
   the full tape" backfill panel gets a CRT screen — scanlines, a rolling
   tracking-glitch band, static noise flicker, and a camcorder REC/timecode
   readout. Kept to this one panel (it's the one literally about rewinding
   tape) rather than every loading state, so it stays a treat, not noise. ---- */
.backfill.vhs{ background:#050604; border-color:#1c2016; padding:0; overflow:hidden; }
.vhs-screen{
  position:relative; padding:.9rem 1rem .7rem; overflow:hidden;
  background:radial-gradient(ellipse 120% 100% at 50% 0%, #0d1b0f 0%, #050604 70%);
}
.vhs-screen::before{
  /* scanlines */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(#00000000 0 2px, #00000055 2px 3px);
  mix-blend-mode:multiply;
}
.vhs-scan{
  position:absolute; left:0; right:0; height:26px; z-index:2; pointer-events:none;
  background:linear-gradient(#4ade8000, #4ade8022 45%, #4ade8000);
  animation:vhsScan 5s linear infinite;
}
.vhs-tracking{
  position:absolute; left:0; right:0; height:9px; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(90deg,#ffffff14 0 3px,#ffffff02 3px 7px);
  filter:blur(.3px); opacity:0; transform:translateY(-20px);
  animation:vhsTrack 6.5s ease-in-out infinite;
}
.vhs-noise{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background-image:repeating-conic-gradient(from 0deg,#ffffff08 0deg 1deg,transparent 1deg 3deg);
  animation:vhsNoise .12s steps(1) infinite;
}
.vhs-head{
  position:relative; z-index:3; display:flex; align-items:center; gap:.7rem;
  font-family:'Courier Prime',monospace; font-size:.78rem; margin-bottom:.35rem;
}
.vhs-rec{ color:#ff4d4d; font-weight:700; letter-spacing:1px; animation:vhsBlink 1s step-start infinite; }
.vhs-time{ color:#8fe6a1; letter-spacing:1px; text-shadow:0 0 4px #4ade8055; }
.vhs-msg{
  position:relative; z-index:3; color:#dfe6d2; text-shadow:1px 0 #ff2d2d33,-1px 0 #2dd4ff33;
  animation:vhsJitter 4s ease-in-out infinite;
}
@keyframes vhsScan{ 0%{ top:-10%; } 100%{ top:110%; } }
@keyframes vhsTrack{
  0%,78%{ opacity:0; transform:translateY(-20px); }
  80%{ opacity:1; transform:translateY(10%); }
  84%{ opacity:1; transform:translateY(60%); }
  88%,100%{ opacity:0; transform:translateY(120%); }
}
@keyframes vhsNoise{ 0%{ opacity:.08; } 50%{ opacity:.03; } 100%{ opacity:.08; } }
@keyframes vhsBlink{ 50%{ opacity:.15; } }
@keyframes vhsJitter{
  0%,92%,100%{ transform:translateX(0); }
  93%{ transform:translateX(-1.5px); }
  95%{ transform:translateX(1.5px); }
  97%{ transform:translateX(0); }
}

/* subtle VHS text-flicker on the status line while Coach is "reviewing tape" */
#status.vhs-text{
  color:#cdeccb; text-shadow:1px 0 #ff2d2d40,-1px 0 #2dd4ff40;
  animation:vhsJitter 3.5s ease-in-out infinite;
}
footer{ text-align:center; color:var(--ink-fade); font-family:'Courier Prime',monospace; padding:1.5rem; font-size:.82rem;}
.footer-credits{ margin:.6rem 0 .3rem; font-size:.78rem; }
.footer-credits a{ color:var(--ink-dim); }
.footer-disclaimer{ margin:.3rem auto 0; max-width:640px; font-size:.68rem; color:var(--ink-fade); opacity:.8; line-height:1.4; }
.set-tag.on{ color:var(--good);} .set-tag.off{ color:var(--ink-fade);}

/* ---- settings gear + modal ---- */
.settings-btn{ position:fixed; top:12px; right:14px; background:none; border:0; box-shadow:none; cursor:pointer; padding:6px; z-index:20;}
.gear-svg{ color:var(--gold);} .gear-cog{ fill:currentColor;} .gear-hex{ fill:#141109;} .gear-hex-glow{ fill:var(--coach);}
.modal{ position:fixed; inset:0; background:#000a; display:flex; align-items:center; justify-content:center; z-index:30; padding:1rem;}
.modal-card{ background:var(--panel); border:1px solid var(--edge-lt); border-radius:8px; padding:1.4rem; max-width:440px; width:100%;
  max-height:90vh; overflow:auto; box-shadow:0 20px 50px #000b;}
.modal-card h2{ color:var(--gold); margin-bottom:.8rem;}
.modal-card label{ display:block; margin:.6rem 0 .2rem; font-size:.85rem; color:var(--ink-dim);}
.modal-card input,.modal-card select{ width:100%;}
.modal-actions{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:1rem;}
.btn-secondary{ background:var(--panel-2); color:var(--ink); border:1px solid var(--edge-lt); box-shadow:none;}
.modal-note{ color:var(--ink-fade); font-size:.78rem; font-family:'Courier Prime',monospace; text-transform:none; margin:.5rem 0;}
.riot-row{ display:flex; gap:.5rem;} .riot-row input{ flex:1;}
.muted-label{ color:var(--ink-fade); font-size:.75rem;}

/* ---- roast block classes (match parseRoast output) ---- */
.report-body .roast-block:first-child p{ font-weight:700; font-size:1.06rem; color:#3a2a10; font-family:'Oswald'; text-transform:none;}
.coach-fix{ background:#e7dcc0; border-left:4px solid var(--coach); border-radius:4px;
  padding:.45rem .75rem; margin:.5rem 0 .85rem; font-size:.93rem; font-family:'Courier Prime',monospace;}
.coach-fix .fix-tag{ background:var(--coach); color:#fff; font-family:'Oswald'; font-weight:700;
  font-size:.7rem; padding:1px 7px; border-radius:3px; margin-right:.5rem; letter-spacing:.5px;}
.coach-fix.homework{ background:#3a2a10; color:#f3ead2;}
.coach-fix.homework .fix-tag{ background:var(--gold); color:#2a1e08;}
/* ---- followups as an actual graded report card (UI_PERSONA_PLAN A2 + B2
   "red marker" quirk): a page of ruled notebook paper — blue horizontal
   rules + a red vertical margin line, like someone's actual class notes —
   with a circled letter grade in red marker per fundamental (Coach grades
   EVERYTHING in red pen, even good news — that's the bit, see PERSONA.md),
   and every word on the card handwritten in the marker face, not typeset. ---- */
.panel.report-card{
  background:
    repeating-linear-gradient(#efe6cf00 0 30px, #6f97c255 30px 31px),
    #efe6cf;
  background-position:0 2px;
  border:1px solid #c9b678;
  position:relative; padding-left:3.1rem;
}
.panel.report-card::before{
  /* the red vertical margin rule of a notebook page */
  content:""; position:absolute; top:0; bottom:0; left:2.15rem; width:2px;
  background:#c23a2b55;
}
.panel.report-card h3{
  color:#3a2a10; font-family:'Permanent Marker',cursive; font-weight:400;
  letter-spacing:.5px; transform:rotate(-.7deg);
}
.panel.report-card h3 small{ color:#8a7248; font-family:'Courier Prime',monospace; }
.fu{ display:flex; align-items:center; gap:.65rem; background:transparent; border:none;
  border-radius:0; padding:.35rem .2rem; margin:0;}
.fu-body{ display:flex; flex-direction:column; }
.fu-body b{
  color:#1c2a4a; font-family:'Permanent Marker',cursive; font-weight:400;
  font-size:1.05rem; letter-spacing:.3px;
}
.fu:nth-child(odd) .fu-body b{ transform:rotate(-.6deg); }
.fu:nth-child(even) .fu-body b{ transform:rotate(.5deg); }
.fu-grade{
  flex:0 0 auto; width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center;
  font-family:'Permanent Marker',cursive; font-size:1.3rem; color:#c23a2b;
  border:2.5px solid #c23a2b; border-radius:50%;
  transform:rotate(-6deg); box-shadow:1px 1px 0 #c23a2b55;
  background:transparent;
}
.fu-grade-chronic{ transform:rotate(-9deg) scale(1.08); text-decoration:underline; text-decoration-style:wavy; }
.fu-delta{
  margin-left:auto; color:#3a4f7a; font-size:.92rem;
  font-family:'Permanent Marker',cursive; font-weight:400;
}
.fu-note{
  margin-top:.5rem; padding-top:.5rem; border-top:2px solid #c23a2b40;
  font-family:'Permanent Marker',cursive; color:#c23a2b; font-size:1.1rem;
  transform:rotate(-1deg); line-height:1.5;
}
.fu-note:empty{ display:none; }
.fu-note-mark{ display:inline-block; transform:rotate(-15deg); margin-right:.15rem; }

/* ---- rank banner / pennant coloured by League division ---- */
.rank-banner{
  position:relative; display:inline-block; padding:.5rem 1.4rem .9rem; min-width:150px; text-align:center;
  background:var(--tier,#8a8f96); color:#111; margin-top:-1.1rem;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
  box-shadow:0 4px 10px #0008; border:2px solid #00000030; border-bottom:0;
}
.rank-banner .rank-tier{ color:#141109; font-size:1.4rem; text-shadow:0 1px 0 #ffffff44;}
.rank-banner .rank-lp{ color:#1a1a1acc; font-weight:600; font-size:.85rem;}
.rank-card{ align-items:stretch; overflow:visible;}
.rank-card .rank-left{ display:flex; flex-direction:column; align-items:center;}
.tier-iron{--tier:#7c7071;} .tier-bronze{--tier:#b06a3c;} .tier-silver{--tier:#a7b1ba;}
.tier-gold{--tier:#e0b13c;} .tier-platinum{--tier:#3fbfb0;} .tier-emerald{--tier:#2ecc71;}
.tier-diamond{--tier:#6f8bea;} .tier-master{--tier:#b45de0;} .tier-grandmaster{--tier:#e0403f;}
.tier-challenger{--tier:#f0d081;}
.hot{ color:var(--bad); font-weight:700;}

/* ---- decorative desk props (each placed in a specific panel) ---- */
html,body{ overflow-x:hidden; }
.report{ overflow:visible; }
.rprop{ position:absolute; pointer-events:none; filter:drop-shadow(2px 3px 4px #000a); z-index:2; }
.prop-folder{ top:1.9rem; right:.5rem; width:64px; transform:rotate(4deg); }         /* under the SCOUTING REPORT watermark */
.pprop{ position:absolute; pointer-events:none; filter:drop-shadow(2px 3px 4px #000a); z-index:3; }
#lpPanel h3{ margin-bottom:2.2rem; }                                                  /* title hugs the top; brown gap below seats the can */
.prop-energy{ top:6px; right:16px; width:66px; transform:rotate(90deg); }             /* Rank-over-time panel, on the brown above the chart */
.prop-marker{ top:8px; right:12px; width:74px; transform:rotate(90deg); }            /* Placement panel, laid flat up top */
/* clipboard + whistle flank the analyze/controls row */
.ctrl-prop{ flex:0 0 auto; width:54px; align-self:center; pointer-events:none; filter:drop-shadow(2px 3px 4px #000a); }
.ctrl-clip{ transform:rotate(-6deg); }
.ctrl-whistle{ transform:rotate(9deg); }
/* fundamentals: two equal rows of chips, espresso centered in reserved right space */
.fund-wrap{ display:flex; align-items:center; gap:1rem; }
.fund-wrap .fund-chips{ flex:1; display:grid; grid-template-rows:repeat(2,auto);
  grid-auto-flow:column; grid-auto-columns:1fr; gap:.55rem; }
.fund-wrap .fund-chips .chip{ min-width:0; }
.prop-espresso{ flex:0 0 auto; width:86px; align-self:center; transform:rotate(-4deg);
  filter:drop-shadow(2px 3px 4px #000a); }
/* seed cup drops into the grid cell right after the last carry card */
.carry-prop{ display:flex; align-items:center; justify-content:center; min-height:60px; }
.carry-prop img{ width:80px; filter:drop-shadow(2px 3px 4px #000a); }
.carry-seed img{ transform:rotate(-5deg); }
.carry-orange img{ transform:rotate(6deg); }
@media(max-width:760px){ .rprop,.pprop,.ctrl-prop,.prop-espresso,.carry-prop{ display:none; } }
/* small coach head cutouts */
.panel{ overflow:visible; }
.panel-cut{ position:absolute; top:12px; right:14px; width:52px; transform:rotate(4deg);
  filter:drop-shadow(2px 3px 3px #000a); z-index:4; }
.panel.has-cut{ padding-right:74px; }                 /* chat panel: head beside the title (unchanged) */
.panel.has-cut-top > .panel-cut{ top:12px; right:16px; }
.panel.has-cut-top h3{ margin-bottom:1.9rem; }        /* title hugs the top; gap clears the head before the rows */

/* ---- cost-tier carry stripes + full-body standee ---- */
.stripe.cost-1{ background:var(--c1); } .stripe.cost-2{ background:var(--c2); }
.stripe.cost-3{ background:var(--c3); } .stripe.cost-4{ background:var(--c4); }
.stripe.cost-5{ background:var(--c5); }
.tcard .cost{ font-weight:700; }
.cost-txt-1{ color:#8a8f96; } .cost-txt-2{ color:#4e8f4e; } .cost-txt-3{ color:#3a6ea5; }
.cost-txt-4{ color:#7a4bb0; } .cost-txt-5{ color:#b8862c; }
.standee{ display:block; margin:1.8rem auto .4rem; width:230px; max-width:62vw;
  filter:drop-shadow(3px 7px 6px #000b); }
.standee-cap{ text-align:center; color:var(--ink-fade); font-family:'Courier Prime',monospace;
  font-size:.85rem; margin:.2rem 0 0; }


/* ---- uniform cream sticker outline on every cutout (standee excluded: it has its own baked outline) ---- */
.coach-cut, .panel-cut, .report-head img, .coach-hero, .error-head,
.rprop, .pprop, .ctrl-prop, .prop-espresso, .carry-orange img{
  filter:
    drop-shadow(0.3px 0 0 var(--sticker)) drop-shadow(-0.3px 0 0 var(--sticker))
    drop-shadow(0 0.3px 0 var(--sticker)) drop-shadow(0 -0.3px 0 var(--sticker))
    drop-shadow(0.22px 0.22px 0 var(--sticker)) drop-shadow(-0.22px 0.22px 0 var(--sticker))
    drop-shadow(0.22px -0.22px 0 var(--sticker)) drop-shadow(-0.22px -0.22px 0 var(--sticker))
    drop-shadow(2px 3px 3px #0009);
}

/* ======================================================================
   A4 — Mobile & accessibility pass (UI_PERSONA_PLAN.md A4)
   Everything below is additive/overriding on purpose (relies on CSS's
   later-wins-at-equal-specificity cascade) so none of the rules above had
   to be touched. Three parts: (1) contrast fixes found by computing actual
   WCAG ratios for every --coach/--good/--bad/--mid text-on-background pair
   in this file — several were failing; (2) full prefers-reduced-motion
   coverage (previously only the verdict stamp respected it); (3) touch
   tap-targets + single-column/full-width mobile layout.
   ====================================================================== */

/* --- 1. Contrast fixes ---
   --coach/--good/--bad/--mid read fine on this app's DARK panels already
   (verified: --good and --bad text on .panel/.panel-2 both clear 4.5:1 or
   the large-text 3:1 floor where the text is big/bold enough). They do NOT
   read fine as TEXT directly on the light --paper/--tape surfaces (ratios
   as low as 1.6:1 were found), and --good/--coach fail as a BACKGROUND
   behind white badge/button text too. Rather than re-tune the root accent
   colors (used correctly in dozens of border/box-shadow/decorative spots),
   this adds paper-safe "-ink" text variants and a couple of background-safe
   "-btn"/"-badge" variants, computed to clear 4.5:1 against their actual
   background. --ink-fade itself gets a small uniform lightening: at its old
   value every small hint/label (.hint, .chip-lbl, th, footer text, etc.)
   sat at ~4.0-4.34:1 against the panel backgrounds it's used on — just
   under the 4.5:1 floor for normal-size text — so one root-level nudge
   fixes all of those small-text spots at once. */
:root{
  --ink-fade:#958a6c;                 /* was #8a7f63 — now clears 4.5:1 on panel/panel-2/body-bg */
  --coach-ink:#c92200;                /* --coach, darkened for text on --paper/--tape (was 2.5:1, now 4.5+) */
  --coach-btn:#e22600;                /* --coach, darkened for backgrounds under white text (buttons, chat bubble) */
  --good-ink:#457037;                 /* --good, darkened for text on --paper (verdict stamp, tcard placement) */
  --good-badge:#50813f;               /* --good, darkened for a background under white badge text */
  --bad-ink:#b1432e;                  /* --bad, darkened for text on --paper */
  --bad-lt:#d46c58;                   /* --bad, LIGHTENED for text on the dark --panel/--panel-2 (stat tiles, tables) */
  --mid-ink:#7f631b;                  /* --mid, darkened for text on --paper (verdict stamp) */
}
.nameplate .flame{ color:var(--coach-ink); }
.diploma-reveal{ color:var(--coach-ink); }
.report .verdict-stamp{ color:var(--coach-ink); }
.report .verdict-stamp.grade-good{ color:var(--good-ink); border-color:var(--good-ink); }
.report .verdict-stamp.grade-mid{ color:var(--mid-ink); border-color:var(--mid-ink); }
.report .verdict-stamp.grade-bad{ color:var(--bad-ink); border-color:var(--bad-ink); }
.roast-list li::before{ color:var(--coach-ink); }
.match-3star{ color:var(--coach-ink); }
.bubble .kw.chronic{ color:var(--bad-ink); }
.txt-good{ color:var(--good-ink); }
.stat .num.bad{ color:var(--bad-lt); }
td.bad,.bad{ color:var(--bad-lt); }
.chip.bad .chip-val{ color:var(--bad-lt); }
.dx-badge.good{ background:var(--good-badge); color:#fff; }
button{ background:var(--coach-btn); }
.chat-user .chat-bubble{ background:var(--coach-btn); }
.footer-disclaimer{ opacity:1; }
/* .hot (the LP "hot streak" flag) sat directly on whichever of the 10
   rank-tier banner colors was active — some (iron, bronze, grandmaster)
   dropped its --bad red as low as 1.1:1 against that banner. A small dark
   badge sidesteps the problem entirely: white-on-near-black clears 4.5:1
   against every tier color, so it no longer depends on which tier is showing. */
.hot{
  display:inline-block; background:#1a1512; color:#fff; font-weight:700;
  padding:0 5px; border-radius:3px; font-size:.85em;
}

/* --- 2. Full prefers-reduced-motion coverage ---
   Line ~234 already turns off the verdict-stamp's thunk-in animation; this
   extends the same preference to the diploma-hover flash and every VHS
   "reviewing the tape" effect (scanline sweep, tracking-glitch band, static
   flicker, REC blink, text jitter) called out by name in UI_PERSONA_PLAN A4. */
@media(prefers-reduced-motion:reduce){
  .diploma:hover .diploma-reveal{ animation:none; opacity:1; }
  .vhs-scan,.vhs-tracking,.vhs-noise,.vhs-rec,.vhs-msg,#status.vhs-text{ animation:none; }
  .vhs-noise{ opacity:.05; }
  .vhs-msg,#status.vhs-text{ text-shadow:none; }
}

/* --- 3. Touch tap-targets (>=44px) ---
   (pointer:coarse) catches real touch input regardless of viewport width
   (a touch-screen laptop shouldn't be exempted just because it's wide); the
   max-width fallback catches narrow desktop-browser windows too. */
@media (max-width:640px), (pointer:coarse){
  input, select, button{ min-height:44px; }
  .settings-btn{ width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; }
  .chatSend, #chatSend, #go{ min-height:44px; }
}

/* --- 4. Single-column / full-width mobile layout ---
   Most of the page is already one column (panels stack vertically); the
   remaining exceptions were the controls row (fixed min-width input could
   overflow a narrow phone), chat bubbles (capped at 90-95% width, a
   desktop-messaging convention that just wastes space on a phone), and the
   comp/tank/item tables (no responsive handling at all — would overflow
   and force horizontal page-scroll on a phone). The standee itself was
   already handled correctly (never hidden, scales via max-width:62vw) so
   it needed no change here. */
@media (max-width:600px){
  .controls{ flex-direction:column; align-items:stretch; }
  .controls input, .controls select, .controls button{ width:100%; min-width:0; }
  .ctrl-prop{ display:none; }                 /* clipboard/whistle props: no room, already hidden <=760px anyway */
  .chat-msg{ max-width:100%; }
  .rank-card{ flex-wrap:wrap; }
  .rank-card .rank-right{ margin-left:0; width:100%; justify-content:space-between; }
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-wrap table{ font-size:.82rem; }
}
.table-wrap{ width:100%; }

/* A3 — share card export button (UI_PERSONA_PLAN A3) */
.share-row{ display:flex; justify-content:flex-end; margin-top:.6rem; }
.share-row .btn-secondary{ font-size:.85rem; padding:.5rem .9rem; }
.share-row .btn-secondary:disabled{ opacity:.6; cursor:default; }
@media (max-width:600px){
  .share-row{ justify-content:stretch; }
  .share-row .btn-secondary{ width:100%; min-height:44px; }
}

/* A3 — /memes.html reaction-pack page */
.memes-main{ max-width:1000px; }
.memes-intro{ color:var(--ink-dim); font-family:'Courier Prime',monospace; text-transform:none;
  text-align:center; margin:0 auto 1.8rem; max-width:640px; }
.meme-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.meme-card{ background:var(--panel); border:1px solid var(--edge); border-radius:8px;
  padding:.9rem .8rem 1rem; text-align:center; box-shadow:0 6px 14px #0007; }
.meme-card img{ width:100%; max-width:140px; height:auto; margin:0 auto .6rem; display:block;
  filter:drop-shadow(2px 4px 3px #000a); }
.meme-card-name{ font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--gold);
  font-size:.85rem; margin-bottom:.5rem; }
.meme-dl-row{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; }
.meme-dl-row a{ font-family:'Courier Prime',monospace; font-size:.72rem; color:var(--ink-dim);
  border:1px solid var(--edge-lt); border-radius:4px; padding:.3rem .55rem; text-decoration:none;
  min-height:32px; display:inline-flex; align-items:center; }
.meme-dl-row a:hover{ color:var(--ink); border-color:var(--coach); }
.memes-back{ text-align:center; margin-top:2rem; }
.memes-back a{ color:var(--ink-dim); font-family:'Courier Prime',monospace; }

/* legal pages — /terms.html, /privacy.html */
.legal-main{ max-width:720px; font-family:'Courier Prime','Courier New',monospace; }
.legal-updated{ color:var(--ink-dim); font-size:.8rem; margin-bottom:1.2rem; }
.legal-main h2{ font-size:1rem; color:var(--gold); margin:1.6rem 0 .5rem; }
.legal-main p{ color:var(--ink); line-height:1.65; margin:0 0 .8rem; }
.legal-main a{ color:var(--coach); }
.legal-back{ text-align:center; margin-top:2rem; color:var(--ink-dim); }