/* ============================================================
   GREEDY DENTIST — surface skin
   Load order:  tokens.css → base.css → skin.css → crt.css
   No DOM changes. Every selector below already exists.
   ============================================================ */

/* ---------- 0. GLOBAL ------------------------------------ */
html{ background:var(--navy-950); }
body{
  min-width:900px;
  background:
    radial-gradient(120% 90% at 50% 0%, #22254a 0%, var(--bg) 60%, var(--navy-900) 100%);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  image-rendering:pixelated;
  -webkit-font-smoothing:none;
}
h1,h2,h3,.display{
  font-family:var(--font-display);
  letter-spacing:var(--track-display);
  line-height:var(--lh-display);
  text-transform:uppercase;
}
a{ color:var(--gold-400); text-decoration:none; }
a:hover{ color:var(--ink-warm); text-decoration:underline; }
::selection{ background:var(--mag-500); color:#fff; }

/* chrome-and-gold beveled title lettering (cover treatment) */
.title-chrome{
  font-family:var(--font-display);
  background:linear-gradient(180deg,
    var(--chrome-1) 0%, var(--chrome-2) 34%,
    var(--gold-500) 35%, var(--gold-600) 55%,
    var(--gold-400) 56%, var(--chrome-3) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke:2px var(--black);
  paint-order:stroke fill;
  filter:drop-shadow(4px 4px 0 var(--black));
}

/* the universal chunky panel */
.pixel-box{
  background:var(--panel);
  border:var(--bd);
  border-radius:var(--r-0);
  box-shadow:var(--bevel-out), var(--drop-2);
  padding:var(--s5);
}

/* buttons ------------------------------------------------- */
button,.btn{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  text-transform:uppercase;
  color:var(--black);
  background:linear-gradient(180deg,var(--gold-400) 0 50%,var(--gold-600) 50% 100%);
  border:var(--bd);
  border-radius:0;
  padding:14px 22px;
  box-shadow:var(--bevel-out), var(--drop-1);
  cursor:pointer;
  transition:transform var(--t-tap) var(--step-2),
             box-shadow var(--t-tap) var(--step-2),
             filter var(--t-ui) var(--step-4);
}
button:hover,.btn:hover{ filter:brightness(1.12); }
button:active,.btn:active{ transform:translate(4px,4px); box-shadow:var(--bevel-in); }
button:focus-visible,.btn:focus-visible{ outline:none; box-shadow:var(--ring-gold),var(--drop-1); }
button[disabled]{ filter:grayscale(1) brightness(.6); cursor:not-allowed; }
.btn-ghost{
  background:linear-gradient(180deg,var(--panel-3) 0 50%,var(--panel-2) 50% 100%);
  color:var(--ink);
}

/* blink cursor / "press start" attract pulse */
@keyframes attract{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }

/* ---------- 1. LANDING ----------------------------------- */
.landing{
  min-height:100vh;
  display:grid; place-items:center;
  background:
    radial-gradient(90% 70% at 50% 42%, #2a2f5e 0%, var(--navy-800) 55%, var(--navy-950) 100%);
}
.landing .cover{
  border:var(--bd);
  box-shadow:var(--drop-2), 0 0 0 8px rgba(0,0,0,.35);
  animation:float 4.8s var(--step-6) infinite alternate;
}
@keyframes float{ from{transform:translate3d(0,-8px,0)} to{transform:translate3d(0,8px,0)} }
.landing h1{ font-size:var(--fs-hero); }
.landing .press-start{ animation:attract 1.1s var(--step-2) infinite; }
.landing .tagline{ color:var(--dim); font-size:var(--fs-sm); letter-spacing:2px; }

/* ---------- 2. LOGIN ------------------------------------
   Character creation is FRONT DESK identity: name, nametag
   color, difficulty. Nametag swatches come from the cover
   ramps (teal / magenta / chrome / crimson) and deliberately
   exclude the four doctor colors.
   -------------------------------------------------------- */
.login{ display:grid; grid-template-columns:minmax(420px,1fr) minmax(420px,520px); gap:var(--s7); }
.login .cart-hero{ filter:drop-shadow(10px 12px 0 rgba(0,0,0,.6)); }
.login .insert{
  font-family:var(--font-display); color:var(--gold-400);
  animation:attract 1.4s var(--step-2) infinite;
}
.pixel-box label{
  display:block; font-family:var(--font-display); font-size:var(--fs-xs);
  color:var(--teal-400); letter-spacing:1px; margin-bottom:var(--s2);
}
.pixel-box input,.pixel-box select{
  width:100%; box-sizing:border-box;
  background:var(--well); color:var(--ink);
  font-family:var(--font-ui); font-size:var(--fs-body);
  border:var(--bd-thin); border-radius:0;
  box-shadow:var(--bevel-in);
  padding:12px 14px;
  caret-color:var(--gold-400);
}
.pixel-box input:focus{ outline:none; box-shadow:var(--bevel-in),var(--ring-gold); }
.pixel-box input::placeholder{ color:var(--dim-2); }
.pixel-box .hint{ color:var(--dim); font-size:var(--fs-xs); }

/* ---------- 3. TOPBAR / HUD ------------------------------ */
#topbar{
  position:sticky; top:0; z-index:var(--z-topbar);
  min-height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--s5);
  padding:0 var(--s5);
  background:linear-gradient(180deg,var(--panel-2) 0 50%,var(--panel) 50% 100%);
  border-bottom:var(--bd);
  box-shadow:var(--bevel-out),0 8px 0 rgba(0,0,0,.45);
  font-family:var(--font-display);
}
#topbar .stat{ display:flex; flex-direction:column; gap:2px; }
#topbar .stat .k{ font-size:9px; color:var(--dim); letter-spacing:1px; }
#topbar .stat .v{ font-size:18px; color:var(--ink-warm); }
#topbar .clock{ color:var(--teal-400); font-size:20px; }
#topbar .score .v{ color:var(--money); }
#topbar .lost  .v{ color:var(--crim-500); }
#topbar .doc-money{ display:flex; gap:var(--s4); }
#topbar .doc-money [data-doc]{ display:flex; align-items:center; gap:6px; font-size:12px; }
#topbar .doc-money [data-doc]::before{
  content:""; width:14px; height:14px; border:var(--bd-thin); background:currentColor;
}
[data-doc="gold"]  { color:var(--doc-gold-solid); }
[data-doc="green"] { color:var(--doc-green-solid); }
[data-doc="orange"]{ color:var(--doc-orange-solid); }
[data-doc="purple"]{ color:var(--doc-purple-ink); }
/* money tick */
@keyframes cash-pop{ 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
#topbar .v.ticked{ animation:cash-pop var(--t-ui) var(--step-4); color:var(--gold-400); }

/* ---------- 4. CALLER RAIL ------------------------------- */
#caller-panel{
  width:var(--rail-w); flex:0 0 var(--rail-w);
  background:var(--panel);
  border:var(--bd); box-shadow:var(--bevel-out),var(--drop-2);
  padding:var(--s4);
  z-index:var(--z-rail);
}
#portrait{
  width:128px; height:128px;
  image-rendering:pixelated;
  border:var(--bd);
  background:linear-gradient(180deg,var(--teal-600),var(--teal-700));
  box-shadow:var(--bevel-out);
  /* initials fallback: JS leaves text content in place */
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:28px; color:var(--ink-warm);
  text-shadow:3px 3px 0 var(--black);
}
#portrait img{ width:100%; height:100%; display:block; image-rendering:pixelated; }

.demands{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.demands .chip,.demands li{
  list-style:none;
  font-size:var(--fs-xs); font-family:var(--font-display);
  color:var(--black);
  background:linear-gradient(180deg,var(--gold-400) 0 50%,var(--gold-600) 50% 100%);
  border:var(--bd-thin); box-shadow:var(--drop-1);
  padding:6px 8px;
}
.demands .chip::before{ content:"\26A0  "; }

.bubble{
  position:relative;
  background:var(--ink); color:var(--black);
  border:var(--bd); box-shadow:var(--drop-1);
  padding:var(--s3) var(--s4);
  font-size:var(--fs-sm);
}
.bubble::after{                    /* stepped pixel tail */
  content:""; position:absolute; left:22px; bottom:-16px;
  width:16px; height:16px; background:var(--ink);
  border-right:var(--bd); border-bottom:var(--bd);
  clip-path:polygon(0 0,100% 0,0 100%);
}
.bubble.mood-annoyed{ background:var(--mood-annoyed); }
.bubble.mood-annoyed::after{ background:var(--mood-annoyed); }
.bubble.mood-angry{ background:var(--mood-angry); color:#fff; animation:shake .28s var(--step-4) infinite; }
.bubble.mood-angry::after{ background:var(--mood-angry); }
.bubble.mood-happy{ background:var(--mood-happy); }
.bubble.mood-happy::after{ background:var(--mood-happy); }
@keyframes shake{ 0%{transform:translate3d(-2px,0,0)} 50%{transform:translate3d(2px,0,0)} 100%{transform:translate3d(-2px,0,0)} }

/* patience = fighting-game health bar: segmented, drains right→left */
.patience{
  height:22px;
  background:var(--well);
  border:var(--bd); box-shadow:var(--bevel-in);
  padding:3px;
  position:relative; overflow:hidden;
}
.patience > *{                      /* the fill element, whatever JS uses */
  height:100%;
  background:linear-gradient(180deg,#9df5a8 0 30%,var(--legal) 31% 70%,#1f7a34 71% 100%);
  transition:width var(--t-panel) var(--step-6), background var(--t-ui) var(--step-2);
}
.patience::after{                   /* segment notches, drawn over the fill */
  content:""; position:absolute; inset:3px; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,0) 0 12px, rgba(0,0,0,.55) 12px 14px);
}
.patience.warn > *{ background:linear-gradient(180deg,var(--gold-200) 0 30%,var(--gold-400) 31% 70%,var(--gold-700) 71% 100%); }
.patience.crit > *{ background:linear-gradient(180deg,var(--crim-300) 0 30%,var(--crim-500) 31% 70%,var(--crim-700) 71% 100%); }
.patience.crit{ animation:pulse-crit .5s var(--step-2) infinite; }
@keyframes pulse-crit{ 0%,60%{box-shadow:var(--bevel-in)} 61%,100%{box-shadow:var(--bevel-in),var(--ring-bad)} }

#hold-queue{ display:flex; gap:var(--s2); }
#hold-queue .holdee{
  width:44px; height:44px;
  border:var(--bd-thin); background:var(--panel-3);
  box-shadow:var(--bevel-out);
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:12px; color:var(--ink);
  filter:saturate(.55) brightness(.85);        /* on hold = drained */
  cursor:pointer;
  transition:filter var(--t-ui) var(--step-2), transform var(--t-tap) var(--step-2);
}
#hold-queue .holdee:hover{ filter:none; transform:translateY(-4px); }
#hold-queue .holdee.crit{ box-shadow:var(--bevel-out),var(--ring-bad); }
#hold-queue:empty::after{
  content:"NO ONE ON HOLD";
  font-family:var(--font-display); font-size:9px; color:var(--dim-2);
}

/* ---------- 5. DAY TABS (cartridge tabs) ----------------- */
.day-tab{
  font-family:var(--font-display); font-size:var(--fs-xs);
  color:var(--dim); text-transform:uppercase;
  background:linear-gradient(180deg,var(--panel-2) 0 50%,var(--panel) 50% 100%);
  border:var(--bd); border-bottom:none;
  border-radius:var(--r-cart) var(--r-cart) 0 0;
  padding:12px 20px 10px;
  box-shadow:var(--bevel-out);
  cursor:pointer;
  position:relative; top:4px;
  transition:top var(--t-tap) var(--step-2), color var(--t-ui) var(--step-2);
}
.day-tab::before{                   /* cartridge finger ridges */
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:60%; height:6px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.45) 0 3px,transparent 3px 6px);
}
.day-tab:hover{ color:var(--ink); top:2px; }
.day-tab.active,.day-tab[aria-selected="true"]{
  top:0; color:var(--black);
  background:linear-gradient(180deg,var(--gold-400) 0 50%,var(--gold-600) 50% 100%);
}
.day-tab.locked{ filter:grayscale(1) brightness(.55); cursor:not-allowed; }

/* ---------- 6. BOARD ------------------------------------- */
#board{
  position:relative; z-index:var(--z-board);
  display:flex; gap:var(--s1);
  background:var(--well);
  border:var(--bd);
  box-shadow:var(--bevel-in),var(--drop-2);
  padding:var(--s1);
}
.opcol{
  position:relative;
  flex:1 1 var(--col-min); min-width:var(--col-min);
  background:
    /* hour line every 6 rows, half-hour line every 3 */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.10) 0 1px,
      rgba(0,0,0,0) 1px calc(var(--row10) * 6)),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.045) 0 1px,
      rgba(0,0,0,0) 1px calc(var(--row10) * 3)),
    repeating-linear-gradient(180deg,
      #1b1e38 0 calc(var(--row10) * 6),
      #171a31 calc(var(--row10) * 6) calc(var(--row10) * 12));
  border-left:var(--bd-hair); border-right:var(--bd-hair);
}
.opcol.drop-target{ background-color:#20264a; box-shadow:inset 0 0 0 2px var(--teal-500); }

.doc-chip{
  position:sticky; top:var(--topbar-h); z-index:2;
  display:flex; align-items:center; gap:var(--s2);
  font-family:var(--font-display); font-size:var(--fs-xs);
  color:var(--black);
  border:var(--bd-thin); box-shadow:var(--bevel-out),var(--drop-1);
  padding:10px var(--s3);
  text-transform:uppercase;
}
.doc-chip[data-doc="gold"]  { background:linear-gradient(180deg,var(--doc-gold-hi) 0 50%,var(--doc-gold-solid) 50% 100%); }
.doc-chip[data-doc="green"] { background:linear-gradient(180deg,var(--doc-green-hi) 0 50%,var(--doc-green-solid) 50% 100%); }
.doc-chip[data-doc="orange"]{ background:linear-gradient(180deg,var(--doc-orange-hi) 0 50%,var(--doc-orange-solid) 50% 100%); }
.doc-chip[data-doc="purple"]{ background:linear-gradient(180deg,var(--doc-purple-hi) 0 50%,var(--doc-purple-solid) 50% 100%); color:#fff; }

/* BLOCKS — background is still the JS hard-stop gradient.
   Everything here is frame, type and state only.
   Segment order the art expects: assistant (assist, >=10min)
   at the TOP, doctor (solid) as the middle mass, assistant
   again at the BOTTOM where the pattern has it. Label text
   therefore sits on a SHADED band — it uses the doctor's
   -ink color, not black.                                    */
.block{
  position:absolute; left:2px; right:2px;
  border:var(--bd-thin);
  border-radius:0;
  box-shadow:var(--bevel-out),var(--drop-1);
  z-index:var(--z-block);
  font-family:var(--font-display); font-size:9px; letter-spacing:.5px;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
  padding:5px 6px;
  overflow:hidden;
  contain:paint;                    /* keeps drag repaint local */
}
.block .who{ display:block; text-shadow:none; font-size:9px; }
.block .proc{ color:rgba(255,255,255,.7); font-size:8px; }
.block[data-doc="gold"]  { color:var(--doc-gold-ink); }
.block[data-doc="green"] { color:var(--doc-green-ink); }
.block[data-doc="orange"]{ color:var(--doc-orange-ink); }
.block[data-doc="purple"]{ color:#fff; }
/* legend glyphs sit on the segments the generator painted.
   X rides the full-color middle (dark ink), / rides the
   shaded caps (light ink).                                  */
.block .seg-x::after{ content:"X"; color:var(--black); text-shadow:1px 1px 0 rgba(255,255,255,.35); }
.block .seg-a::after{ content:"/"; color:inherit; }
.block[data-doc="purple"] .seg-x::after{ color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.5); }

.movable{ cursor:grab; }
.movable:hover{ box-shadow:var(--bevel-out),var(--ring-gold); }
.movable:active,.movable.dragging{
  cursor:grabbing; z-index:var(--z-drag);
  box-shadow:var(--bevel-out),var(--drop-lift);
  transform:translate3d(0,0,0) scale(1.02);
}
.placed-flash{ animation:placed var(--t-flash) var(--step-4) 1; }
@keyframes placed{
  0%  { box-shadow:var(--bevel-out),0 0 0 10px rgba(255,217,59,.9); }
  100%{ box-shadow:var(--bevel-out),var(--drop-1); }
}
.lunch{
  position:absolute; left:2px; right:2px;
  border:var(--bd-thin);
  background:
    repeating-linear-gradient(45deg,
      #3a3f63 0 8px, #2b3050 8px 16px);
  box-shadow:var(--bevel-in);
  color:var(--dim);
  font-family:var(--font-display); font-size:9px;
  display:grid; place-items:center;
  cursor:not-allowed;
}

#ghost{
  position:absolute; left:2px; right:2px;
  z-index:var(--z-ghost);
  pointer-events:none;
  border:4px dashed var(--dim);
  background:rgba(255,255,255,.06);
}
#ghost.legal  { border-color:var(--legal);   background:rgba(81,207,102,.16);  box-shadow:var(--ring-legal); }
#ghost.illegal{ border-color:var(--illegal); background:rgba(240,62,62,.16);   box-shadow:var(--ring-bad);
                animation:nope .2s var(--step-2) infinite; }
@keyframes nope{ 0%{transform:translate3d(-2px,0,0)} 100%{transform:translate3d(2px,0,0)} }

/* ---------- 7. TRAY + DOCTOR PICKER ----------------------
   The player is the SCHEDULER, not a doctor. The four doctor
   colors are fixed roster identity — the picker assigns a
   block to a doctor, it is not a player color choice, and no
   surface should ever offer a doctor color as "your" color.
   -------------------------------------------------------- */
#tray-block{
  position:relative;
  margin-top:26px;                  /* clearance for the GRAB + DRAG badge */
  border:var(--bd); box-shadow:var(--bevel-out),var(--drop-2);
  cursor:grab;
  animation:tray-bob 1.6s var(--step-4) infinite alternate;
}
@keyframes tray-bob{ from{transform:translate3d(0,0,0)} to{transform:translate3d(0,-6px,0)} }
#tray-block:active{ animation:none; cursor:grabbing; }
#tray-block::after{                 /* GRAB + DRAG badge */
  content:"GRAB + DRAG";
  position:absolute; right:-8px; top:-30px;
  font-family:var(--font-display); font-size:8px; color:var(--black);
  background:var(--gold-400);
  border:var(--bd-thin); box-shadow:var(--drop-1);
  padding:5px 7px;
  transform:rotate(-4deg);
}
#doctor-picker{ display:flex; gap:var(--s2); }
#doctor-picker button{
  width:52px; height:52px; padding:0;
  border:var(--bd);
  box-shadow:var(--bevel-out),var(--drop-1);
  filter:brightness(.72) saturate(.8);
}
#doctor-picker button[aria-pressed="true"],
#doctor-picker button.active{ filter:none; box-shadow:var(--bevel-out),var(--ring-gold); }

/* ---------- 8. SCORECARD (high-score screen) ------------- */
#scorecard{
  background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
  border:var(--bd); box-shadow:var(--bevel-out),var(--drop-2);
  padding:var(--s7);
  text-align:center;
}
#scorecard h2{ font-size:var(--fs-h1); color:var(--gold-400); text-shadow:4px 4px 0 var(--black); }
#scorecard .row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s4); padding:var(--s3) 0;
  border-bottom:2px dotted var(--panel-3);
  font-family:var(--font-display); font-size:var(--fs-xs);
}
#scorecard .row .val{ font-size:var(--fs-h3); color:var(--ink-warm); }
#scorecard .teamwork{
  border:var(--bd); background:linear-gradient(180deg,var(--teal-500) 0 50%,var(--teal-700) 50% 100%);
  box-shadow:var(--bevel-out),var(--drop-1);
  padding:var(--s4);
  font-family:var(--font-display); color:var(--black);
}
#scorecard .teamwork .mult{ font-size:34px; color:var(--ink-warm); text-shadow:4px 4px 0 var(--black); }
#scorecard .total{ font-size:40px; color:var(--money); text-shadow:4px 4px 0 var(--black); }

/* ---------- 9. LEADERBOARD ------------------------------- */
table.scores{ width:100%; border-collapse:separate; border-spacing:0 var(--s2); }
table.scores th{
  font-family:var(--font-display); font-size:9px; letter-spacing:1px;
  color:var(--teal-400); text-align:left; text-transform:uppercase;
  padding:0 var(--s3) var(--s2);
}
table.scores td{
  background:var(--panel);
  border-top:var(--bd-thin); border-bottom:var(--bd-thin);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.10), inset 0 -3px 0 rgba(0,0,0,.4);
  padding:var(--s3);
  font-size:var(--fs-sm);
}
table.scores td:first-child{ border-left:var(--bd-thin); }
table.scores td:last-child{ border-right:var(--bd-thin); text-align:right; color:var(--money); font-family:var(--font-display); }
table.scores tr:nth-child(1) td{ background:linear-gradient(180deg,var(--gold-600),#6b5000); color:var(--ink-warm); }
table.scores tr:nth-child(2) td{ background:linear-gradient(180deg,#9aa7cc,#5a6491); color:var(--black); }
table.scores tr:nth-child(3) td{ background:linear-gradient(180deg,#a3663b,#6b3f22); color:var(--ink-warm); }
table.scores tr.me td{ box-shadow:inset 0 0 0 3px var(--teal-400); }
table.scores tr.me td:first-child::before{ content:"\25B8 "; color:var(--teal-400); }
table.scores tr:hover td{ filter:brightness(1.1); }

/* ---------- 10. GATE + EMPTY STATES ---------------------- */
#screen-gate{
  position:fixed; inset:0; z-index:var(--z-gate);
  display:grid; place-items:center; text-align:center;
  background:var(--navy-950);
  color:var(--ink);
  font-family:var(--font-display); font-size:var(--fs-h3);
  padding:var(--s7);
  line-height:2;
}
#screen-gate::before{
  content:"\26A0"; display:block; font-size:56px; color:var(--gold-400); margin-bottom:var(--s5);
}
.empty{
  border:4px dashed var(--panel-3);
  color:var(--dim-2);
  font-family:var(--font-display); font-size:var(--fs-xs);
  padding:var(--s6); text-align:center;
}

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