:root{
  --bg:#0e1119;
  --panel:#171c28;
  --panel2:#1c2436;
  --line:#2d364a;
  --amber:#ffb82e;
  --green:#2af0a0;
  --red:#ff4d4d;
  --yellow:#ffd84a;
  --blue:#4ea3ff;
  --muted:#9aa7c2;
  --text:#f0f4ff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font:16px/1.45 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace}
/* prevent text selection when dragging with mouse/finger — keep inputs selectable */
html, body, canvas, #topbar, #quotaPanel, #scorePanel, #lawBoard, #containerBar, #boosterBar, #announce, #goldenBar, .overlay, .overlay-card {
  user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, select, [contenteditable] {
  user-select:text; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text;
}
#scene{display:block;width:100vw;height:100vh;touch-action:none;user-select:none;-webkit-user-select:none}

/* top bar — vibrant employee status */
#topbar{
  position:fixed;top:0;left:0;right:0;height:58px;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 16px;
  background:linear-gradient(180deg,#1e2433 0%,#141a27 100%);
  border-bottom:2px solid #2d364a;
  z-index:30;
  letter-spacing:.04em;
}
.topbar-left{display:flex;align-items:center;gap:12px}
.emp-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#ffb82e,#ff7a18);color:#0e1119;display:grid;place-items:center;font-weight:900;font-size:16px;letter-spacing:.02em;box-shadow:0 0 12px rgba(255,184,46,.45);border:2px solid rgba(255,255,255,.12)}
.logo{font-weight:900;font-size:22px;letter-spacing:.08em;line-height:1}
.logo-ex{color:var(--amber)}
.slogan{font-size:10px;color:var(--muted);letter-spacing:.14em;margin-top:2px}
.emp-status{margin-left:8px;background:rgba(0,0,0,.28);border:1px solid #2d364a;padding:7px 12px;min-width:170px}
.emp-status b{font-size:11px;letter-spacing:.10em;color:#fff;display:block;line-height:1}
.emp-status span{font-size:10px;letter-spacing:.08em;color:var(--green);display:block;margin-top:2px}
.emp-status.warn span{color:var(--yellow)}
.emp-status.alert span{color:var(--red);animation:blink 0.9s infinite}
.emp-bar{height:4px;background:#0d1117;border:1px solid #2d364a;margin-top:4px;overflow:hidden}
.emp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--amber));transition:width .4s}
.topbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.shift-badge{font-size:13px;background:#0d1117;border:1px solid #2b3240;padding:7px 12px;letter-spacing:.08em;color:var(--amber)}
#voiceBtn,#muteBtn{background:#0d1117;border:1px solid #2b3240;color:var(--text);width:38px;height:36px;cursor:pointer;font-size:16px}
#pauseBtn{background:#0d1117;border:1px solid #2b3240;color:var(--amber);padding:7px 12px;font-size:13px;letter-spacing:.06em;cursor:pointer;font-weight:900}
#exitBtn{background:#1a0f0f;border:1px solid #4a2a2a;color:var(--red);padding:7px 12px;font-size:13px;letter-spacing:.06em;cursor:pointer;font-weight:900}
#voiceBtn.off,#muteBtn.off{opacity:0.45;filter:grayscale(0.6)}

/* quota left — hidden to avoid duplicate counter (bottom #containerBar is the single source of truth)
   The left TODAY'S QUOTA panel duplicated the bottom drag-target bar counts.
   We keep #containerBar (LEFT/CENTER/RIGHT/WASTE/EXPIRED with 0/6 etc.) as the only quota display.
*/
#quotaPanel{ display:none !important; }
.panel-title{font-size:12px;letter-spacing:.14em;color:var(--amber);margin-bottom:8px}
.qrow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #242a36;font-size:13px}
.qrow:last-child{border-bottom:none}
.qrow b{font-size:13px;letter-spacing:.08em}
.qrow .bar{width:80px;height:8px;background:#0d1117;border:1px solid #2b3240;position:relative;overflow:hidden}
.qrow .fill{position:absolute;inset:0 0 0 0;background:var(--green);width:0%;transition:width .3s}
.qrow.done .fill{background:var(--amber)}
.qrow.done b{color:var(--green)}
.panel-foot{margin-top:8px;font-size:9px;color:var(--muted);letter-spacing:.08em;text-align:center;border-top:1px dashed #2b3240;padding-top:6px}

/* score right */
#scorePanel{
  position:fixed;right:14px;top:66px;width:200px;
  background:rgba(23,28,40,.96);border:1px solid #2d364a;border-right:3px solid var(--green);
  padding:12px;z-index:20;text-align:right;box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.score-row{display:flex;justify-content:space-between;align-items:baseline}
.score-row span{font-size:11px;letter-spacing:.12em;color:var(--muted)}
.score-row b{font-size:24px;color:var(--green);letter-spacing:.04em}
#comboVal{margin-top:6px;font-size:14px;color:var(--yellow);letter-spacing:.08em;min-height:16px}
#flowLabel{font-size:10px;letter-spacing:.18em;color:var(--green);opacity:0;transition:opacity .2s}
#flowLabel.on{opacity:1;animation:pulse .6s infinite alternate}
@keyframes pulse{from{opacity:1} to{opacity:.4}}
.violations{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
.violations i{width:14px;height:14px;border-radius:50%;border:1px solid #3a4254;background:#0d1117;display:block}
.violations i.on{background:var(--red);box-shadow:0 0 8px rgba(255,59,59,.8);border-color:var(--red)}
.viol-label{font-size:9px;color:var(--muted);letter-spacing:.12em;margin-top:4px}

/* law board — compact top strip, never covers belt — slim xp (58+4) now */
#lawBoard{
  position:fixed;left:50%;top:72px;transform:translateX(-50%);
  width:min(480px,50vw);
  background:#0d111e;border:1px solid #2d364a;border-top:2px solid #2d364a;box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 12px rgba(255,184,46,.07);
  z-index:20;overflow:hidden; transition: all .25s ease
}
/* level 10/11 — law board moves to side (LEFT, not over SCORE) so nothing overlays */
#lawBoard.compact{
  left:12px; right:auto; top:98px; transform:none;
  width:270px; max-height:40vh; overflow:auto;
  background:rgba(13,17,30,.92); backdrop-filter:blur(6px);
  border-left:3px solid var(--amber);
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}
#lawBoard.compact #lawRules{ padding:6px 8px; gap:3px }
#lawBoard.compact .rule{ font-size:11px; padding:4px 6px }
#lawBoard.compact .rule i{ font-size:10px }
#lawBoard.compact .law-head{ padding:5px 8px; font-size:9px }
#lawBoard.compact #explainBtn{ width:22px; height:22px; font-size:11px }
.law-head{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,#1a1e27,#11141b);
  border-bottom:1px solid #2b3240;
  padding:6px 10px;font-size:10px;letter-spacing:.14em;color:var(--amber)
}
.law-dot{width:10px;height:10px;background:var(--red);border-radius:50%;box-shadow:0 0 8px var(--red);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}
.law-live{margin-left:auto;color:var(--red);font-size:10px;letter-spacing:.12em}
#explainBtn{width:26px;height:26px;border-radius:50%;border:1px solid #2d364a;background:#0d1117;color:var(--amber);font-weight:900;font-size:13px;cursor:pointer;margin-left:6px}
#explainBtn:hover{background:#1a1f2e}
#lawExplain{padding:8px 12px;background:rgba(255,184,46,.06);border-top:1px solid #2d364a;font-size:12px;line-height:1.5;color:#cbd3e6;max-height:72px;overflow:auto}
#lawExplain.hidden{display:none}
#lawExplain{ max-height:78px; overflow:auto }
#lawExplain b{color:var(--amber)}
#lawRules{padding:8px 10px;display:grid;gap:4px}
.rule{font-size:13px;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:rgba(255,255,255,.02);border-left:3px solid transparent}
.rule b{color:#fff}
.rule i{font-style:normal;color:var(--muted);font-size:12px}
.rule.prio1{border-left-color:var(--red);background:rgba(255,59,59,.06)}
.rule.prio2{border-left-color:var(--amber)}
.rule.prio3{border-left-color:var(--green)}
.rule.prio4{border-left-color:#5b8def}
#lawCountdown{
  text-align:center;padding:10px;background:var(--red);color:#fff;font-weight:900;letter-spacing:.12em;font-size:15px
}
#lawCountdown.hidden{display:none}

/* container bar — display only, never captures drag */
#containerBar{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;flex-wrap:wrap;gap:8px;z-index:20;max-width:96vw;justify-content:center;
  pointer-events:none
}
#containerBar .cslot{ pointer-events:none }
#containerBar .cslot.frozen{border-bottom-color:#7ec8ff}
#containerBar .cslot.warm{border-bottom-color:#ff7a18}
#containerBar .cslot.clean{border-bottom-color:#2ee89e}
#containerBar .cslot.dirty{border-bottom-color:#6b4423}
.cslot{
  width:142px;height:66px;
  background:rgba(17,20,27,.96);border:1px solid #2b3240;border-bottom:3px solid #3a4254;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.1em;position:relative;transition:transform .12s, border-color .12s, box-shadow .12s
}
.cslot b{font-size:14px}
.cslot span{font-size:13px;color:var(--muted)}
.cslot{ padding-bottom:10px }
.cbar{ position:absolute; left:6px; right:6px; bottom:4px; height:6px; background:#0d1117; border:1px solid #2b3240; overflow:hidden }
.cbar i{ display:block; height:100%; width:0%; background:var(--green); transition:width .28s }
.cslot.done .cbar i{ background:var(--amber) }
.cslot.waste .cbar i{ background:var(--amber) }
.cslot.expired .cbar i{ background:#8a3bb8 }
.cslot[data-c="LEFT"]{border-bottom-color:#ff5a5a}
.cslot[data-c="CENTER"]{border-bottom-color:#4ea3ff}
.cslot[data-c="RIGHT"]{border-bottom-color:#2ee89e}
.cslot.waste{border-bottom-color:var(--amber)}
.cslot.expired{border-bottom-color:#8a3bb8}
/* vault / capsule skins — visible on the 2D bar too */
#containerBar.skin-vault .cslot{ background:linear-gradient(180deg,#e8eef6 0%, #d0d6e0 100%); border-color:#8a94a8; color:#0d0f14 }
#containerBar.skin-vault .cslot span{ color:#2a3448 }
#containerBar.skin-vault .cslot[data-c="LEFT"]{ border-bottom-color:#c0c8d6; box-shadow: inset 0 2px 0 rgba(255,255,255,.9) }
#containerBar.skin-capsule .cslot{ background:linear-gradient(180deg,#0a2a4a 0%, #0f3a5c 100%); border-color:#1a8cff; color:#7ee0ff; box-shadow: 0 0 12px rgba(26,140,255,.35) }
#containerBar.skin-capsule .cslot span{ color:#4dc4ff }
.cslot.dragOver{transform:translateY(-4px) scale(1.04);border-color:var(--yellow);box-shadow:0 0 18px rgba(255,210,63,.45)}
.cslot.flash{animation:flash .35s}
@keyframes flash{0%{background:#fff;color:#000} 100%{}}
.cslot.done{opacity:.55;filter:grayscale(.3)}
.cslot.done::after{content:"QUOTA COMPLETE";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--green);color:#000;font-size:8px;padding:2px 6px;letter-spacing:.08em;white-space:nowrap}
/* motorica — beautiful single-time card on end screen (no duplication) */
.motorica-card{ margin:12px 0; background:rgba(13,17,23,.88); border:1px solid #2b3240; overflow:hidden; text-align:left }
.motorica-head{ display:flex; justify-content:space-between; align-items:center; background:linear-gradient(90deg,#1a1e27,#11141b); border-bottom:1px solid #2b3240; padding:8px 10px; font-size:10px; letter-spacing:.14em; color:var(--amber); font-weight:900 }
.motorica-head span{ font-size:9px; letter-spacing:.08em; color:var(--muted); font-weight:700; text-transform:none }
.motorica-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px }
.motorica-grid.two{ grid-template-columns:1fr 1fr }
@media (max-width:560px){ .motorica-grid{ grid-template-columns:1fr } }
.mstat{ display:grid; gap:4px }
.mstat label{ font-size:9px; letter-spacing:.10em; color:var(--muted); text-transform:uppercase }
.mstat .mbar{ height:8px; background:#0d1117; border:1px solid #2b3240; overflow:hidden; position:relative }
.mstat .mbar i{ display:block; height:100%; background:linear-gradient(90deg,#4ea3ff,#7ee0ff); transition:width .5s }
.mstat .mbar.xp i{ background:linear-gradient(90deg,var(--green),var(--amber)) }
.mstat b{ font-size:11px; letter-spacing:.06em; color:#fff; text-align:right }
.compens{ font-size:11px; letter-spacing:.06em; color:#cbd3e6; padding:6px 10px; border-top:1px solid #1e2535; text-align:left }
.compens.total{ font-weight:900; color:var(--amber); background:rgba(255,184,46,.06) }
.fail-head{ font-size:12px; letter-spacing:.10em; color:var(--red); font-weight:900; padding:6px 0 }

/* reading overlay — top banner only, belt stays fully visible */
#readingOverlay{position:fixed;top:58px;left:0;right:0;display:flex;align-items:flex-start;justify-content:center;z-index:45;padding:10px 18px 0;pointer-events:none;background:transparent;backdrop-filter:none}
#readingOverlay.hidden{display:none}
.reading-card{width:min(640px,92vw);background:linear-gradient(180deg,#1c2130,#12151d);border:2px solid var(--amber);box-shadow:0 12px 30px rgba(0,0,0,.55);overflow:hidden;transform:translateY(0);max-height:48vh;overflow:auto;pointer-events:auto}
.reading-head{background:var(--amber);color:#0e1119;font-weight:900;letter-spacing:.10em;padding:8px 14px;font-size:12px;text-align:center}
#readingTitle{padding:10px 14px 0;font-size:11px;letter-spacing:.10em;color:var(--amber);text-align:center}
#readingRules{padding:8px 14px;display:grid;gap:6px}
#readingRules .rule{font-size:13px}
#readingExplain{padding:8px 14px;background:rgba(255,184,46,.07);border-top:1px solid #2d364a;border-bottom:1px solid #2d364a;font-size:11px;line-height:1.6;color:#cbd3e6}
.reading-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(0,0,0,.18)}
#readingTimer{font-size:11px;letter-spacing:.08em;color:var(--muted)}
#readingContinue{background:var(--amber);color:#0e1119;border:none;padding:8px 14px;font-weight:900;letter-spacing:.06em;cursor:pointer}
#readingContinue:hover{filter:brightness(1.05)}

/* announce — bottom-right, never on belt/law text */
#announce{
  position:fixed;right:18px;bottom:118px;left:auto;top:auto;transform:none;
  background:#0d1117;border:2px solid var(--amber);color:var(--amber);
  padding:12px 18px;font-weight:900;letter-spacing:.10em;text-align:right;
  z-index:40;min-width:260px;max-width:360px;box-shadow:0 12px 30px rgba(0,0,0,.55)
}
#announce.hidden{display:none}
#announce.big{font-size:24px;border-color:var(--red);color:var(--red);background:#1a0f0f}
#announce.good{border-color:var(--green);color:var(--green);background:#0f1a14}
#goldenBar{
  position:fixed;right:18px;bottom:148px;left:auto;top:auto;transform:none;
  width:360px;height:32px;background:#1a1500;border:1px solid var(--yellow);z-index:35;
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
#goldenBar.hidden{display:none}
#goldenBar span{position:relative;z-index:2;font-weight:900;letter-spacing:.14em;color:var(--yellow);font-size:12px}
#goldenFill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg, rgba(255,210,63,.35), rgba(255,176,32,.2));width:0%;transition:width .1s linear}

/* hide gameplay HUD when any overlay is open — prevents visual overlap */
body.has-overlay #quotaPanel,
body.has-overlay #scorePanel,
body.has-overlay #lawBoard,
body.has-overlay #containerBar,
body.has-overlay #announce,
body.has-overlay #goldenBar{ opacity:0; pointer-events:none; transition:opacity .2s }

/* overlay — lowered so gift/shop never covers lawBoard (top 60px) */
.overlay{
  position:fixed;inset:0;background:rgba(6,8,12,.82);backdrop-filter:blur(10px);
  display:flex;align-items:flex-start;justify-content:center;z-index:50;padding:78px 18px 18px;overflow:auto
}
.overlay.hidden{display:none}
.overlay-card{
  width:min(640px,96vw);background:linear-gradient(180deg,#1c2130 0%, #12151d 100%);
  border:1px solid #2b3240;border-top:3px solid var(--amber);
  padding:0;box-shadow:0 24px 60px rgba(0,0,0,.65);text-align:center;overflow:hidden
}
.overlay-card.small{width:min(620px,96vw)}
.overlay-card.hero{ width:min(720px,96vw) }
.hazard{height:10px;background:repeating-linear-gradient(90deg,#ffb020 0 18px,#111 18px 36px);border-bottom:1px solid #2b3240}
.hero-top{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:rgba(0,0,0,.18);border-bottom:1px solid #242a36}
.badge-id{font-size:9px;letter-spacing:.12em;color:var(--muted);border:1px solid #2b3240;padding:4px 6px}
.corp-stamp{font-size:10px;letter-spacing:.16em;color:var(--amber);border:1px solid #2b3240;display:inline-block;padding:4px 8px}
.overlay-card h1{margin:12px 0 0;font-size:52px;letter-spacing:.08em;font-weight:900}
.overlay-card h1 span{color:var(--amber)}
.overlay-card h2{margin:14px 0 8px;font-size:30px;letter-spacing:.08em}
.sub{letter-spacing:.18em;color:var(--muted);font-size:14px;margin:4px 0 14px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px 18px;text-align:left}
@media (max-width:680px){ .hero-grid{grid-template-columns:1fr} }
.emp-box{border:1px dashed #2b3240;background:rgba(0,0,0,.22);padding:12px;font-size:13px;letter-spacing:.06em;line-height:1.7}
.emp-row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.04);padding:4px 0}
.emp-row:last-child{border:none}
.emp-box .clean{color:var(--green)}
.steps{display:grid;gap:10px;margin-top:12px}
.step{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid #242a36;padding:10px;font-size:14px;line-height:1.5;color:#cbd3e6}
.step i{width:26px;height:26px;min-width:26px;background:var(--amber);color:#0c0e12;display:grid;place-items:center;font-weight:900;font-size:14px}
.preview-law{background:#0a0d12;border:1px solid #2b3240;padding:10px}
.preview-head{font-size:11px;letter-spacing:.14em;color:var(--amber);margin-bottom:8px}
.preview-rule{font-size:14px;letter-spacing:.06em;padding:6px 10px;margin:5px 0;border-left:3px solid}
.preview-rule.r1{border-color:#ff5a5a;background:rgba(255,90,90,.06)}
.preview-rule.r2{border-color:#4ea3ff;background:rgba(78,163,255,.06)}
.preview-rule.r3{border-color:#2ee89e;background:rgba(46,232,158,.06)}
.preview-rule.r4{border-color:#ffb020;background:rgba(255,176,32,.06)}
.preview-rule.mini{font-size:13px;padding:5px 8px}
.preview-hint{font-size:12px;color:var(--muted);margin-top:8px;letter-spacing:.04em}
.preview-law.mini{padding:8px}
.product-row{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.picon{width:32px;height:32px;border:1px solid #2b3240;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.picon.gold{background:linear-gradient(135deg,#ffd23f,#ffb020);box-shadow:0 0 10px rgba(255,210,63,.55)}
.picon.damaged{background:repeating-linear-gradient(45deg,#8d6e63 0 4px,#5d4037 4px 8px)}
.picon-label{font-size:12px;color:var(--muted);letter-spacing:.06em;margin-left:6px}
.hint-box{margin-top:12px;background:rgba(46,232,158,.07);border:1px solid rgba(46,232,158,.18);padding:8px 10px;font-size:12px;letter-spacing:.06em;color:#8ef0c3;text-align:center}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 16px;text-align:left}
@media (max-width:640px){ .how-grid{grid-template-columns:1fr} }
.how-col h3{font-size:11px;letter-spacing:.12em;color:var(--amber);margin:8px 0 6px}
.how-col ul{margin:0 0 8px 16px;padding:0;font-size:12px;line-height:1.55;color:#cbd3e6}
.how-col p.small{font-size:11px;color:var(--muted);margin:4px 0 8px}
.foot-note{font-size:10px;color:var(--muted);letter-spacing:.05em;padding:8px 16px 14px;border-top:1px solid #1e2535;margin-top:8px}
#startBtn,#howBtn,#howBack{margin:8px 16px 0;width:calc(100% - 32px)}
#endScreen .overlay-card{padding:16px}
.primary{background:var(--amber);color:#0c0e12;border:none;padding:12px 18px;font-weight:900;letter-spacing:.08em;cursor:pointer;width:100%;margin-top:6px}
.primary:hover{filter:brightness(1.06)}
.ghost{background:transparent;border:1px solid #2b3240;color:var(--text);padding:10px 14px;letter-spacing:.06em;cursor:pointer;width:100%;margin-top:8px}
.ghost:hover{background:rgba(255,255,255,.04)}
.row{display:flex;gap:8px}
.row .primary,.row .ghost{width:50%}
.hidden{ display:none !important}

/* xp — pretty slim but visible, not a heavy block */
#xpBar{ position:fixed; left:0; right:0; top:58px; height:6px; background:rgba(13,17,23,.62); z-index:19; overflow:hidden; backdrop-filter:blur(2px); border-bottom:1px solid #1e2535 }
#xpFill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,var(--green),var(--amber)); transition:width .35s; box-shadow:0 0 8px rgba(42,240,160,.35) }
#xpText{ position:fixed; top:65px; right:12px; z-index:19; font-size:9px; letter-spacing:.10em; color:rgba(240,244,255,.92); background:rgba(13,17,23,.82); border:1px solid #2b3240; padding:3px 7px; line-height:1; border-radius:999px }
#xpText::before{ content:"XP " }
/* focus — tiny pill, always visible, not a full-width strip */
#focusPill{ position:fixed; top:64px; right:12px; z-index:19; display:flex; align-items:center; gap:7px; background:rgba(13,17,23,.88); border:1px solid #2b3240; padding:4px 9px; font-size:9px; letter-spacing:.09em; color:#cbd3e6; backdrop-filter:blur(4px); border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.35) }
#focusPill i{ display:block; width:52px; height:5px; background:#0d1117; border:1px solid #2b3240; position:relative; overflow:hidden; border-radius:999px }
#focusPill i::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:62%; background:linear-gradient(90deg,#4ea3ff,#7ee0ff); transition:width .25s; border-radius:999px }
#focusPill.low{ border-color:#4a2a2a }
#focusPill.low i::after{ background:linear-gradient(90deg,#ff4d4d,#ffb020) }
#focusPill.high{ border-color:#1a3a2e }
#focusPill.high i::after{ background:linear-gradient(90deg,#2af0a0,#4ea3ff) }
#focusText{ font-weight:900; color:#f0f4ff; min-width:32px; text-align:right }
#focusPill::before{ content:"FOCUS"; font-size:8px; letter-spacing:.14em; color:var(--muted); margin-right:2px }
#focusBar{ display:none !important }
/* fx popups */
#fxLayer{position:fixed;inset:0;pointer-events:none;z-index:25}
.fx{position:absolute;transform:translate(-50%,-50%);font-weight:900;letter-spacing:.08em;animation:fxUp .7s forwards}
@keyframes fxUp{0%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-80%) scale(1.08)}}
.fx-stamp{position:fixed;transform:translate(-50%,-50%) rotate(-6deg);background:#ff4d4d;color:#fff;border:2px solid #fff;padding:4px 8px;font-weight:900;letter-spacing:.08em;font-size:12px;z-index:62;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.fx-stamp.big{font-size:18px;padding:6px 12px;animation:fxStamp .42s ease-out}
@keyframes fxStamp{0%{transform:translate(-50%,-50%) rotate(-6deg) scale(1.6); opacity:0} 60%{opacity:1} 100%{transform:translate(-50%,-50%) rotate(-6deg) scale(1); opacity:0}}
.fx-holo{position:fixed;transform:translate(0,0);background:linear-gradient(90deg, rgba(126,224,255,.18), rgba(126,224,255,.06));border:1px solid #7ee0ff;color:#7ee0ff;font-weight:900;letter-spacing:.10em;font-size:11px;padding:4px 0;text-align:center;z-index:62;pointer-events:none;box-shadow:0 0 12px rgba(126,224,255,.55)}
.fx-smoke{position:fixed;width:14px;height:14px;background:radial-gradient(circle, #9aa7c2 0%, #6b768a 70%, transparent 75%);border-radius:50%;pointer-events:none;z-index:62}
.fx-smoke-label{position:fixed;transform:translate(-50%,-50%);color:#9aa7c2;font-weight:900;letter-spacing:.06em;font-size:11px;z-index:62;pointer-events:none}

/* topcenter credit + booster bar — offset below higher law board */
.topbar-center{display:flex;align-items:center}
#creditPill{display:flex;align-items:center;gap:8px;background:#0d1117;border:1px solid #2b3240;padding:7px 12px;font-size:14px;letter-spacing:.06em}
.cc-icon{color:var(--amber);font-size:18px}
#creditPill b{color:var(--amber);font-size:16px}
#creditPill small{color:var(--muted);font-size:10px;letter-spacing:.08em}
#boosterBar{position:fixed;left:14px;bottom:90px;top:auto;transform:none;display:flex;gap:10px;z-index:21;flex-direction:row;align-items:flex-end}
.booster-btn{width:74px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:#0d1117;border:2px solid #2b3240;color:var(--text);padding:6px;font-size:11px;letter-spacing:.06em;cursor:pointer;position:relative;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.booster-btn span{font-size:10px;font-weight:900}
.booster-btn i{font-size:12px}
.booster-btn i{font-style:normal;color:var(--amber);font-weight:900}
.booster-btn.gold{border-color:#5a4a12;background:linear-gradient(180deg,#1a1400,#0d0d07);color:var(--yellow)}
.booster-btn:active{transform:scale(0.97)}
.booster-btn.on{border-color:var(--green);box-shadow:0 0 10px rgba(42,240,160,.4)}
.booster-btn:disabled{opacity:.45;cursor:not-allowed}
.booster-btn.hidden{display:none !important}
.booster-btn em{position:absolute;top:-7px;right:-7px;background:var(--red);color:#fff;font-style:normal;font-size:9px;padding:1px 5px}
.booster-chip{background:rgba(255,184,46,.12);border:1px solid #5a4a12;color:var(--amber);padding:6px 10px;font-size:11px;letter-spacing:.06em;display:flex;align-items:center;gap:4px}
#shopBtn{background:#0d1117;border:1px solid #2b3240;color:var(--amber);padding:6px 10px;font-size:11px;letter-spacing:.08em;cursor:pointer}
#dailyBtn{background:#0d1117;border:1px solid #2b3240;padding:4px 8px;cursor:pointer;font-size:14px}
#devBtn{background:linear-gradient(180deg,#1a1400,#0d0d07);border:1px solid #5a4a12;color:var(--amber);padding:6px 10px;font-size:11px;letter-spacing:.08em;cursor:pointer;font-weight:900}
#devBtn:hover{border-color:var(--amber);box-shadow:0 0 10px rgba(255,184,46,.25)}
.icon-close{background:transparent;border:1px solid #2b3240;color:var(--muted);width:28px;height:28px;cursor:pointer}

/* shop / daily / appeal / dev — BIGGER TEXT, very clickable */
.shop-card{width:min(720px,96vw);text-align:left}
.shop-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#0d1117;border-bottom:1px solid #2b3240;font-weight:900;letter-spacing:.06em;font-size:17px}
.credit-banner{text-align:center;padding:12px;background:rgba(255,184,46,.10);border-bottom:1px solid #2b3240;font-size:18px}
.credit-banner b{color:var(--amber);font-size:19px}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:16px 18px}
@media (max-width:900px){ .shop-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .shop-grid{grid-template-columns:1fr} }
.shop-item{border:1px solid #2b3240;background:rgba(255,255,255,.03);padding:16px;text-align:center}
.shop-item b{display:block;font-size:17px;letter-spacing:.06em;margin:8px 0}
.shop-item p{font-size:15px;color:var(--muted);margin:8px 0 10px;min-height:36px;line-height:1.5}
.shop-item .price{font-size:17px;color:var(--amber);font-weight:900}
.shop-item .small{margin-top:10px;padding:12px 16px;font-size:15px;cursor:pointer;min-height:44px}
.shop-item .small:hover{filter:brightness(1.08);transform:translateY(-1px)}
.shop-item .small:active{transform:translateY(0)}
.shop-item .owned{font-style:normal;font-size:13px;color:var(--muted)}
.si-icon{width:44px;height:44px;margin:0 auto;display:grid;place-items:center;border:1px solid #2b3240;background:#0d1117;font-size:22px}
.si-icon.gold{color:var(--yellow);border-color:#5a4a12}
.shop-cos{padding:16px 18px;border-top:1px solid #242a36}
.shop-subtitle{font-size:14px;letter-spacing:.06em;color:var(--amber);margin-bottom:12px}
.cos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:640px){ .cos-grid{grid-template-columns:1fr} }
.cos-grid label{font-size:15px;display:flex;flex-direction:column;gap:8px}
.cos-grid select{background:#0d1117;border:1px solid #2b3240;color:var(--text);padding:10px;font-size:15px;cursor:pointer}

.daily-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:10px 14px}
.daily-day{border:1px solid #2b3240;background:#0d1117;padding:8px 4px;text-align:center;font-size:10px}
.daily-day.claimed{background:rgba(42,240,160,.12);border-color:var(--green)}
.daily-day.today{border-color:var(--amber);box-shadow:0 0 8px rgba(255,184,46,.35)}
.daily-day b{display:block;margin-bottom:4px}

.appeal-card{text-align:center}
.appeal-stamp{display:inline-block;border:2px solid var(--red);color:var(--red);padding:4px 10px;font-weight:900;letter-spacing:.10em;margin-bottom:8px}
.appeal-count{margin:8px 0;font-size:12px;color:var(--amber);font-weight:900}

.dev-card{width:min(760px,98vw);text-align:left}
.dev-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#1a1400;border-bottom:1px solid #5a4a12;font-weight:900;font-size:12px;letter-spacing:.06em}
.dev-hint{font-weight:400;font-size:10px;color:var(--muted);margin-left:8px}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 14px}
@media (max-width:680px){ .dev-grid{grid-template-columns:1fr} }
.dev-col h3{font-size:11px;letter-spacing:.10em;color:var(--amber);margin:8px 0 6px}
.dev-shifts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.dev-shifts button{background:#0d1117;border:1px solid #2b3240;color:var(--text);padding:8px;font-size:11px;cursor:pointer}
.dev-shifts button:hover{border-color:var(--amber)}
.dev-grid label{font-size:11px;display:flex;align-items:center;gap:6px;margin:6px 0}
.dev-grid input[type=range]{flex:1}
.dev-actions{margin-top:6px}
.dev-bonus-row{display:flex;gap:6px;flex-wrap:wrap}
.dev-inv{display:grid;gap:4px;margin:6px 0}
.dev-inv div{display:flex;align-items:center;gap:6px;font-size:12px}
.dev-inv button{width:28px;height:24px;background:#0d1117;border:1px solid #2b3240;color:var(--text);cursor:pointer}
.dev-inv span{min-width:18px;text-align:center;font-weight:900;color:var(--amber)}
.dev-check{font-size:11px}
.dev-check input{accent-color:var(--amber)}
.danger{border-color:var(--red)!important;color:var(--red)!important}
.dev-foot{padding:8px 14px;border-top:1px solid #242a36;text-align:right}

/* reward screen */
.reward-card{text-align:center}
.reward-stats{display:flex;justify-content:space-around;flex-wrap:wrap;gap:8px;padding:8px 14px;font-size:11px}
.reward-stats span{color:var(--muted)}
.reward-stats b{color:#fff}
.reward-breakdown{padding:8px 14px;background:rgba(255,255,255,.03);border-top:1px solid #242a36;border-bottom:1px solid #242a36;text-align:left;font-size:11px;line-height:1.7}
.reward-breakdown b{color:var(--amber)}
.reward-package{padding:10px 14px}
.reward-package .pkg{border:1px dashed var(--amber);background:rgba(255,184,46,.06);padding:10px;font-size:12px}
.reward-grade{padding:8px 14px;font-weight:900;letter-spacing:.10em;font-size:13px}
.reward-grade.ADEQUATE{color:var(--muted)}
.reward-grade.COMPLIANT{color:var(--blue)}
.reward-grade.EXEMPLARY{color:var(--green)}
.reward-grade.EMPLOYEE_OF_THE_SHIFT{color:var(--amber);text-shadow:0 0 10px rgba(255,184,46,.4)}

/* collectible hint — bottom-right above containers, never on text */
.cc-pop{position:absolute;right:18px;bottom:92px;left:auto;top:auto;transform:none;background:#0d1117;border:1px solid var(--amber);color:var(--amber);padding:4px 10px;font-size:11px;font-weight:900;letter-spacing:.08em;pointer-events:none;animation:ccUp .8s forwards}
@keyframes ccUp{0%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-22px)}}

/* catalog — guide with real rules + bonuses — BIGGER */
.catalog-card{width:min(780px,96vw);max-height:92vh;overflow:auto;text-align:left}
.catalog-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#0d1117;border-bottom:1px solid #2b3240;font-weight:900;letter-spacing:.06em;font-size:16px}
.catalog-intro{padding:12px 18px 0;font-size:14px;color:#cbd3e6;line-height:1.6}
.catalog-legend{display:flex;flex-wrap:wrap;gap:8px;padding:10px 18px}
.leg{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 10px;border:1px solid #2b3240;background:rgba(255,255,255,.02)}
.leg i{width:12px;height:12px;display:block}
.leg.food i{background:#2ee89e}
.leg.drinks i{background:#4ea3ff}
.leg.tools i{background:#ffb020}
.leg.waste i{background:#ff3b3b}
.leg.golden i{background:linear-gradient(135deg,#ffd23f,#ffb020)}
.guide-grid{display:grid;gap:14px;padding:12px 18px}
.guide-card{border:1px solid #2b3240;background:rgba(255,255,255,.02);padding:14px}
.guide-card h4{margin:0 0 10px;font-size:16px;letter-spacing:.04em;color:var(--amber)}
.rule-table{width:100%;border-collapse:collapse;font-size:13px}
.rule-table th{text-align:left;color:var(--muted);border-bottom:1px solid #2b3240;padding:6px 8px}
.rule-table td{padding:8px;border-bottom:1px solid #1e2535}
.bonus-list{margin:0 0 0 18px;padding:0;font-size:14px;line-height:1.7;color:#cbd3e6}
.bonus-list b{color:#fff}
.guide-note{font-size:13px;color:#cbd3e6;line-height:1.6;margin:10px 0 0}
.guide-note.small{color:var(--muted);font-size:12px}
.catalog-foot{padding:10px 18px;border-top:1px solid #242a36}
.catalog-note{font-size:13px;color:#cbd3e6;line-height:1.6;margin:6px 0}
.catalog-note.small{color:var(--muted);font-size:12px}
#catalogBack{margin:10px 18px 14px;width:calc(100% - 36px);font-size:15px;padding:12px}
/* lb — entertaining podium */
.lb-card .catalog-head{ border-top:3px solid var(--amber) }
.lb-controls{display:flex;gap:8px;align-items:center;padding:10px 16px;flex-wrap:wrap; background:rgba(255,255,255,.02); border-bottom:1px solid #1e2535}
.lb-controls input{background:#0d1117;border:1px solid #2b3240;color:var(--text);padding:10px;flex:1;min-width:140px; font-weight:700; letter-spacing:.04em}
.lb-controls .primary.small{ padding:10px 14px; font-weight:900; letter-spacing:.06em }
.lb-count{ font-size:11px; color:var(--muted); letter-spacing:.06em; margin-left:auto }
.lb-podium{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:14px 16px 6px; align-items:end }
.lb-podium-card{ background:linear-gradient(180deg,#1e2535,#12151d); border:1px solid #2b3240; padding:10px 8px; text-align:center; position:relative; overflow:hidden }
.lb-podium-card.gold{ border-color:#ffb82e; background:linear-gradient(180deg,#2a2410,#1a1500); box-shadow:0 0 18px rgba(255,184,46,.22); order:2; transform:translateY(-6px) }
.lb-podium-card.silver{ border-color:#cbd6e6; order:1 }
.lb-podium-card.bronze{ border-color:#c9a86a; order:3 }
.lb-podium-rank{ font-size:28px; line-height:1; margin:2px 0 }
.lb-podium-name{ font-weight:900; font-size:13px; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:6px }
.lb-podium-score{ font-size:18px; font-weight:900; color:var(--amber); letter-spacing:.04em }
.lb-podium-card.silver .lb-podium-score{ color:#e8eef6 }
.lb-podium-card.bronze .lb-podium-score{ color:#e8c99a }
.lb-podium-title{ font-size:9px; letter-spacing:.12em; color:var(--muted); margin-top:4px }
.lb-podium-bar{ height:6px; margin-top:8px; background:#0d1117; border:1px solid #2b3240; overflow:hidden }
.lb-podium-bar i{ display:block; height:100%; width:0%; transition:width .6s ease }
.lb-podium-card.gold .lb-podium-bar i{ background:linear-gradient(90deg,#ffb82e,#ffd84a) }
.lb-podium-card.silver .lb-podium-bar i{ background:#cbd6e6 }
.lb-podium-card.bronze .lb-podium-bar i{ background:#c9a86a }
.lb-podium-empty{ grid-column:1 / -1; padding:18px; text-align:center; color:var(--muted); border:1px dashed #2b3240; background:rgba(255,255,255,.02) }
.lb-table{padding:2px 16px 8px}
.lb-row{display:grid;grid-template-columns:32px 1fr 90px 120px;gap:8px;padding:8px 8px;border:1px solid #1e2535;margin:4px 0;font-size:11px;align-items:center; transition:transform .12s, border-color .12s}
.lb-row:hover{ transform:translateY(-1px); border-color:#2b3240; background:rgba(255,255,255,.02) }
.lb-row.me{border-color:var(--amber);background:rgba(255,184,46,.08); box-shadow:0 0 10px rgba(255,184,46,.14)}
.lb-row.top3{ border-left:3px solid transparent }
.lb-row.top3.gold{ border-left-color:#ffb82e }
.lb-row.top3.silver{ border-left-color:#cbd6e6 }
.lb-row.top3.bronze{ border-left-color:#c9a86a }
.lb-rank{font-weight:900}
.lb-score{ font-weight:900; color:var(--amber); text-align:right }
.lb-titles{padding:10px 16px;font-size:10px;color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}
.lb-titles .pill{ padding:4px 8px; border:1px solid #2b3240; background:rgba(255,255,255,.02); letter-spacing:.06em }
.lb-titles .pill.emp{ border-color:var(--amber); color:var(--amber); background:rgba(255,184,46,.08); font-weight:900 }
/* also tiny button in-game */
#infoBtn{background:#0d1117;border:1px solid #2b3240;color:var(--text);width:30px;height:30px;cursor:pointer;font-size:13px}
#lbBtn{background:#0d1117;border:1px solid #2b3240;color:var(--amber);width:30px;height:30px;cursor:pointer;font-size:14px}
#devBtn.hidden{display:none !important}

/* hide HUD when dev/shop overlay — but keep shop visible */
body.has-overlay #boosterBar{ opacity:0; pointer-events:none }

/* responsive */
@media (max-width:780px){
  #quotaPanel{width:148px;left:8px;top:52px;padding:8px}
  #scorePanel{width:136px;right:8px;top:52px;padding:8px}
  #lawBoard{width:58vw;top:52px}
  .cslot{width:74px;height:50px}
  #topbar{height:40px}
}