/* Trash or Cash — all game styling.
   Brand tokens live at the top: changing brand = editing :root. */

:root {
  --rl-primary:#000F50; --rl-secondary:#32F982; --rl-black:#11100E;
  --rl-gray:#647378; --rl-gray-dark:#4E5353; --rl-gray-mid:#A1A0A0;
  --rl-gray-light:#BFC7C4; --rl-success-fade:#D1ECE7;
  --rl-success:#00B894; --rl-error:#D63031; --rl-warning:#FDCB6E;

  --game-recycle: var(--rl-secondary);
  --game-bin:     var(--rl-gray);
  --ink:#fff; --ink-dim:rgba(255,255,255,.72);

  --font-display:"F37 Hybrid", Rubik, system-ui, sans-serif;
  --font-body:Rubik, system-ui, -apple-system, sans-serif;

  --pane:min(560px, 92vw);
  --r:18px;
}

@font-face{font-family:"F37 Hybrid";src:url("../brand/fonts/F37Hybrid-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"F37 Hybrid";src:url("../brand/fonts/F37Hybrid-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
/* Any display: rule beats the UA [hidden] rule, so make hidden win outright.
   Without this the leaderboard overlay stays invisible but eats every click. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--rl-primary);
  background-image:radial-gradient(120% 90% at 50% -10%, #123 0%, var(--rl-primary) 60%);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; touch-action:manipulation;
}
body.playing{overflow:hidden}
img{max-width:100%;display:block}
kbd{background:rgba(255,255,255,.14);border-radius:5px;padding:1px 6px;font:inherit;font-size:.9em}

/* stage background, set by JS */
body[data-stagebg]::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:var(--stage-bg) center/cover no-repeat; opacity:.5;
}

/* ---------------------------------------------------------------- screens */
.screen{min-height:100dvh;display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom))}
.screen.is-active{display:flex}

.pane{width:var(--pane);text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.pane--wide{width:min(860px,94vw)}

.logo{width:min(280px,62vw);height:auto}
.logo--sm{width:min(180px,40vw)}
.bcorp,.attract__bcorp{width:74px;opacity:.85;margin-top:8px}

.title{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,7vw,3.4rem);
  line-height:1.02;margin:0;letter-spacing:-.02em}
.title--sm{font-size:clamp(1.5rem,4.5vw,2.2rem)}
.lede{margin:0;color:var(--ink-dim);font-size:1.05rem;max-width:44ch}

/* ---------------------------------------------------------------- buttons */
.btn{font:inherit;font-weight:500;border:0;border-radius:999px;padding:14px 28px;cursor:pointer;
  background:rgba(255,255,255,.12);color:var(--ink);transition:transform .12s ease, background .2s ease;
  min-height:48px}
.btn:hover{background:rgba(255,255,255,.2)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--rl-secondary);outline-offset:3px}
.btn--primary{background:var(--rl-secondary);color:var(--rl-primary);font-weight:700}
.btn--primary:hover{background:#5cffa0}
.btn--ghost{background:transparent;border:2px solid rgba(255,255,255,.28)}
.btn--big{font-size:1.15rem;padding:16px 40px}
.btn--huge{font-size:clamp(1.2rem,3vw,1.9rem);padding:22px 64px;background:var(--rl-secondary);
  color:var(--rl-primary);font-weight:700;font-family:var(--font-display)}
.btn--cta{background:#fff;color:var(--rl-primary);font-weight:700;text-decoration:none;
  display:inline-block;text-align:center;line-height:1.3}
.btn--pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ---------------------------------------------------------------- attract */
.screen--attract{justify-content:center}
.attract__inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
  width:min(1100px,94vw)}
.attract__logo{width:min(340px,52vw)}
.attract__headline{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,5.4vw,4.2rem);line-height:1.02;margin:0;letter-spacing:-.02em}
.attract__sub{margin:0;color:var(--ink-dim);font-size:clamp(1rem,1.8vw,1.35rem)}
.attract__board{background:rgba(255,255,255,.07);border-radius:var(--r);padding:18px 24px;
  width:min(520px,90vw);backdrop-filter:blur(6px)}
.attract__board h2{font-family:var(--font-display);margin:0 0 10px;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--rl-secondary)}

/* ------------------------------------------------------------ stage picker */
.stagegrid{display:grid;gap:12px;width:100%;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stagecard{position:relative;border:0;border-radius:var(--r);overflow:hidden;cursor:pointer;
  min-height:120px;padding:16px;text-align:left;color:var(--ink);font:inherit;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transition:transform .15s ease}
.stagecard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,15,80,.15),rgba(0,15,80,.82))}
.stagecard:hover,.stagecard:focus-visible{transform:translateY(-3px)}
.stagecard:focus-visible{outline:3px solid var(--rl-secondary);outline-offset:2px}
.stagecard__name,.stagecard__desc{position:relative;z-index:1;display:block}
.stagecard__name{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.stagecard__desc{font-size:.82rem;color:var(--ink-dim);margin-top:4px}

/* -------------------------------------------------------------- how to play */
.howto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;
  text-align:left;width:100%}
.howto li{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.07);
  padding:14px 16px;border-radius:14px;line-height:1.45}
.howto li > span:last-child{flex:1}
.howto__icon{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.14);font-size:1.2rem}
.howto__icon--bin{background:var(--game-bin)}
.howto__icon--rec{background:var(--game-recycle);color:var(--rl-primary)}

/* -------------------------------------------------------------------- HUD */
.screen--play{justify-content:flex-start;gap:8px;padding-top:max(12px,env(safe-area-inset-top))}
.hud{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:min(760px,96vw);padding:6px 4px}
.hud__stat{display:flex;flex-direction:column;align-items:center;min-width:74px}
.hud__label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim)}
.hud__stat b{font-family:var(--font-display);font-size:1.9rem;line-height:1}
.hud__timer{position:relative;width:64px;height:64px;display:grid;place-items:center}
.hud__timer b{font-family:var(--font-display);font-size:1.5rem}
.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring__bg{stroke:rgba(255,255,255,.16)}
.ring__fg{stroke:var(--rl-secondary);stroke-dasharray:119.4;stroke-dashoffset:0;
  transition:stroke-dashoffset .95s linear, stroke .3s}
.ring__fg.is-low{stroke:var(--rl-warning)}
.ring__fg.is-critical{stroke:var(--rl-error)}

/* ------------------------------------------------------------------ arena */
.arena{flex:1;width:min(980px,98vw);display:grid;align-items:center;gap:10px;
  grid-template-columns:auto minmax(0,1fr) auto;padding:6px 0}

.drop{position:relative;border:3px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.06);
  border-radius:var(--r);color:var(--ink);font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:14px 10px;min-width:96px;min-height:min(320px,44vh);
  transition:background .18s, border-color .18s, transform .12s}
.drop__icon{font-size:clamp(1.7rem,4vw,2.8rem);line-height:0;display:block}
.drop__icon svg,.howto__icon svg{width:1em;height:1em;display:block}
.drop__label{font-family:var(--font-display);font-weight:700;font-size:clamp(.9rem,2vw,1.25rem);
  text-align:center;line-height:1.1}
.drop__label small{font-weight:400;opacity:.8;font-size:.72em}
.drop--bin{border-color:var(--game-bin)}
.drop--recycle{border-color:var(--game-recycle)}
.drop:active{transform:scale(.97)}
.drop:focus-visible{outline:3px solid #fff;outline-offset:3px}
.drop.is-armed{background:rgba(255,255,255,.2);border-style:solid;transform:scale(1.04)}
.drop--bin.is-armed{background:color-mix(in srgb, var(--game-bin) 55%, transparent)}
.drop--recycle.is-armed{background:color-mix(in srgb, var(--game-recycle) 45%, transparent)}

/* ------------------------------------------------------------------ cards */
.cardstack{position:relative;height:min(420px,54vh);display:grid;place-items:center}
.card{position:absolute;width:min(330px,72vw);max-width:340px;
  background:#fff;color:var(--rl-primary);border-radius:22px;padding:18px 18px 22px;
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  will-change:transform}
.card:active{cursor:grabbing}
.card__img{width:min(190px,42vw);aspect-ratio:1;object-fit:contain;pointer-events:none}
.card__name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,3.4vw,1.55rem);
  text-align:center;line-height:1.12;margin:0}
.card--behind{transform:scale(.94) translateY(14px);opacity:.55;pointer-events:none;filter:blur(.4px)}
.card.is-leaving{transition:transform .26s cubic-bezier(.3,.7,.4,1), opacity .26s ease}

/* verdict stamp — never colour alone (spec §35) */
.card__stamp{position:absolute;top:16px;left:50%;translate:-50% 0;
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  padding:6px 18px;border-radius:999px;opacity:0;transition:opacity .12s;
  display:flex;align-items:center;gap:8px;white-space:nowrap}
.card.is-correct .card__stamp{opacity:1;background:var(--rl-success);color:#fff}
.card.is-wrong  .card__stamp{opacity:1;background:var(--rl-error);color:#fff}

/* drag intent hint on the card edges */
.card__hint{position:absolute;top:50%;translate:0 -50%;font-family:var(--font-display);
  font-weight:700;font-size:1.05rem;padding:6px 14px;border-radius:10px;opacity:0;
  transition:opacity .12s;pointer-events:none}
.card__hint--bin{left:14px;background:var(--game-bin);color:#fff}
.card__hint--rec{right:14px;background:var(--game-recycle);color:var(--rl-primary)}

.playhint{color:var(--ink-dim);font-size:.85rem;margin:0 0 6px;text-align:center}

/* whole-screen flash on answer */
.flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:50;
  transition:opacity .12s ease}
.flash.is-on{opacity:1}
.flash.is-correct{background:radial-gradient(circle at 50% 50%,
  color-mix(in srgb,var(--rl-success) 40%,transparent),transparent 68%)}
.flash.is-wrong{background:radial-gradient(circle at 50% 50%,
  color-mix(in srgb,var(--rl-error) 40%,transparent),transparent 68%)}

/* ---------------------------------------------------------------- results */
.scoreline{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%}
.scoreline__box{background:rgba(255,255,255,.09);border-radius:var(--r);padding:14px 26px;
  min-width:120px;display:flex;flex-direction:column;gap:2px}
.scoreline__box span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim)}
.scoreline__box b{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--rl-secondary)}

.feedback{width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}
.feedback__intro{font-family:var(--font-display);font-size:1.1rem;margin:0;text-align:center}
.feedback__item{background:rgba(255,255,255,.08);border-left:4px solid var(--rl-secondary);
  border-radius:0 12px 12px 0;padding:12px 14px}
.feedback__item h4{margin:0 0 4px;font-family:var(--font-display);font-size:1rem}
.feedback__item p{margin:0;font-size:.9rem;color:var(--ink-dim);line-height:1.45}
.feedback__item .cost{color:var(--rl-secondary);margin-top:6px;font-size:.87rem}
.feedback--perfect{text-align:center;color:var(--rl-secondary);font-family:var(--font-display);
  font-size:1.15rem}

.submitform{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px;text-align:left;
  background:rgba(255,255,255,.07);padding:18px;border-radius:var(--r)}
.submitform h3{margin:0;font-family:var(--font-display);font-size:1.05rem;text-align:center}
.submitform label{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--ink-dim)}
.submitform input{font:inherit;padding:12px 14px;border-radius:10px;border:2px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.28);color:#fff;min-height:46px}
.submitform input:focus{outline:none;border-color:var(--rl-secondary)}
.privacy{font-size:.74rem;color:var(--ink-dim);margin:0;line-height:1.4}
.submitdone{background:rgba(50,249,130,.14);border-radius:12px;padding:14px;text-align:center;
  font-family:var(--font-display)}
.formerror{color:var(--rl-warning);font-size:.82rem;margin:0}

.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sharepanel{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  background:rgba(255,255,255,.07);padding:14px;border-radius:var(--r);width:100%}
.sharepanel .btn{padding:11px 18px;font-size:.9rem}

/* ------------------------------------------------------------- leaderboard */
.board{list-style:none;margin:0;padding:0;counter-reset:rank;display:flex;flex-direction:column;gap:4px}
.board li{display:grid;grid-template-columns:2.1rem 1fr auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);font-size:1rem}
.board li::before{counter-increment:rank;content:counter(rank);font-family:var(--font-display);
  font-weight:700;color:var(--rl-secondary);text-align:center}
.board li:nth-child(1){background:rgba(50,249,130,.16)}
.board .nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.board .pts{font-family:var(--font-display);font-weight:700}
.board li.is-empty{background:transparent}
.board li.is-empty::before{content:none}
.board .empty{grid-column:1/-1;text-align:center;color:var(--ink-dim);font-size:.9rem}

.overlay{position:fixed;inset:0;background:rgba(0,10,40,.82);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:20px;z-index:60}
.overlay__panel{background:var(--rl-primary);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:22px;width:min(440px,94vw);display:flex;flex-direction:column;gap:14px}
.overlay__panel h2{margin:0;font-family:var(--font-display);text-align:center;font-size:1.3rem}

/* ------------------------------------------------------ responsive tweaks */
/* Phone portrait: bins become a bar under the card so the card stays big. */
@media (max-width:640px) and (orientation:portrait){
  .arena{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:12px}
  .cardstack{order:1;height:min(56vh,430px)}
  .drop{order:2;min-height:82px;flex-direction:row;gap:10px;min-width:0}
  .drop--bin{grid-column:1;grid-row:2;margin-right:auto;width:100%}
  .drop--recycle{grid-column:1;grid-row:3;width:100%}
  .drop__label small{display:inline}
  /* Phones have the room — make the card the hero. */
  .card{width:min(360px,84vw);max-width:360px}
  .card__img{width:min(220px,52vw)}
}
@media (max-width:640px) and (orientation:portrait){
  .arena{grid-template-rows:1fr auto auto}
}

/* Big exhibition screens: scale everything up. */
@media (min-width:1500px){
  :root{--pane:640px}
  .card{width:420px;max-width:420px}
  .card__img{width:250px}
  .cardstack{height:min(560px,58vh)}
  .drop{min-width:180px;min-height:min(440px,50vh)}
  .hud{width:min(1000px,90vw)}
  .hud__stat b{font-size:2.6rem}
}

html[data-orientation="landscape"] .arena{grid-template-columns:auto minmax(0,1fr) auto}

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