/* ==========================================================================
 * Can You Sell It? — /game (public/game.php, public/assets/game.js)
 *
 * Laid out like a phone game: one column, at most 480px, every screen a
 * thumb's reach. Deliberately one look in both themes: deep water, because the
 * whole game is about how deep a market is. Brand navy and azure for the
 * ground; cyan for money kept, coral for money lost (the two meanings, never
 * decoration); gold for rewards. Scoped to .gm so nothing leaks into the site.
 * ======================================================================== */
.gm{
  --gm-abyss:#061A2E; --gm-deep:#0A2540; --gm-shelf:#14385E; --gm-line:rgba(234,244,255,.13);
  --gm-foam:#EAF4FF; --gm-mist:#94B4D4; --gm-azure:#3FB6FF;
  --gm-kept:#3FD6C8; --gm-lost:#FF7A59; --gm-gold:#F4C152; --gm-gold-ink:#3A2A00;
  --gm-bronze:#D08B4F; --gm-silver:#C9D5E2; --gm-deepmetal:#3FB6FF;
  color-scheme:dark;
  max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  padding:0 16px 24px; color:var(--gm-foam);
  background:radial-gradient(130% 55% at 50% 0%, var(--gm-deep), var(--gm-abyss) 72%);
  -webkit-tap-highlight-color:transparent;
}
body:has(.gm){background:var(--gm-abyss, #061A2E)}
body:has(.gm) .focusfoot{background:#061A2E}
body:has(.gm) .focusfoot, body:has(.gm) .focusfoot a{color:#94B4D4}
.gm *{box-sizing:border-box}
.gm a{color:var(--gm-azure)}
:where(.gm) button{font:inherit; color:inherit; cursor:pointer}
.gm :focus-visible{outline:3px solid var(--gm-gold); outline-offset:2px}
.gm [hidden]{display:none !important}
.gm svg{flex:none}

/* ---- top bar ----------------------------------------------------------- */
.gm-top{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 0 12px; border-bottom:1px solid var(--gm-line)}
.gm-brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--gm-mist) !important;
  font:700 11px/1 var(--mono); letter-spacing:.2em}
.gm-chip{font:600 13px var(--mono); padding:6px 10px; border-radius:999px; border:1px solid var(--gm-line); background:rgba(255,255,255,.04)}
.gm-chip b{color:var(--gm-gold)}
.gm-signin{font-size:14px; font-weight:600}

.gm-flash{margin:12px 0 0; padding:10px 14px; border-radius:12px; background:rgba(63,214,200,.12); border:1px solid rgba(63,214,200,.35); font-size:14px}
.gm-verify{margin:12px 0 0; padding:12px 14px; border-radius:14px; background:rgba(244,193,82,.1); border:1px solid rgba(244,193,82,.35); display:grid; gap:8px; font-size:14px}
.gm-verify-row{display:flex; gap:8px}
.gm-verify input{flex:1; min-width:0; padding:10px 12px; border-radius:10px; border:1px solid var(--gm-line); background:var(--gm-abyss); color:var(--gm-foam); font:600 17px var(--mono); letter-spacing:.12em}
.gm-verify button{border:0; border-radius:10px; padding:10px 16px; background:var(--gm-gold); color:var(--gm-gold-ink); font-weight:700}
.gm-verify-err{margin:0; color:var(--gm-lost)}
.gm-verify-again{margin:4px 0 0; text-align:right}
.gm-verify-again button{background:none; border:0; color:var(--gm-mist); text-decoration:underline; font-size:13px; padding:4px}

/* ---- screens ------------------------------------------------------------ */
.gm-screen{flex:1; display:flex; flex-direction:column; gap:14px; padding-top:16px}
.gm-eyebrow{margin:0; font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gm-mist)}
.gm h1, .gm h2, .gm h3{margin:0; color:var(--gm-foam); text-wrap:balance}
.gm p{margin:0; line-height:1.45}
.gm-sub{font-size:13px; color:var(--gm-mist)}
.gm-note{color:var(--gm-mist); font-size:14px}

.gm-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; border:0; border-radius:16px;
  padding:17px 20px; font-weight:800; font-size:18px; background:var(--gm-gold); color:var(--gm-gold-ink) !important;
  box-shadow:0 5px 0 #B2862A; transition:transform .08s, box-shadow .08s; text-decoration:none}
.gm-btn:active{transform:translateY(4px); box-shadow:0 1px 0 #B2862A}
.gm-link{align-self:center; font-size:14px; padding:8px; color:var(--gm-mist) !important}
.gm-ghost{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--gm-line); background:transparent; border-radius:12px; padding:9px 12px; font-size:14px; font-weight:600}

/* ---- intro --------------------------------------------------------------- */
.gm-intro{justify-content:space-between}
.gm-intro-head{display:grid; gap:14px}
.gm-title{font-size:clamp(46px, 15vw, 64px); font-weight:800; line-height:.92; letter-spacing:-.035em}
.gm-title em{font-style:normal; color:var(--gm-lost)}
.gm-lede{color:var(--gm-mist); font-size:16px; max-width:36ch}
.gm-depth{position:relative; height:150px; border-radius:20px; overflow:hidden; border:1px solid var(--gm-line); background:var(--gm-deep)}
.gm-water{position:absolute; left:0; right:0; bottom:0; height:62%;
  background:linear-gradient(180deg, rgba(63,182,255,.38), rgba(63,182,255,.06)); animation:gm-tide 4s ease-in-out infinite alternate}
.gm-water::before{content:""; position:absolute; left:0; right:0; top:-6px; height:12px; border-radius:50%; background:rgba(63,182,255,.38)}
.gm-readout{position:absolute; left:14px; right:14px; top:14px; display:flex; justify-content:space-between; font:600 13px var(--mono)}
.gm-readout b{color:var(--gm-lost)}
.gm-bands{position:absolute; right:12px; bottom:10px; display:grid; gap:4px; text-align:right; font:500 10px var(--mono); color:var(--gm-mist)}
@keyframes gm-tide{from{height:56%} to{height:72%}}
.gm-intro-foot{display:grid; gap:12px}
.gm-rules{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.gm-rules span{border:1px solid var(--gm-line); border-radius:14px; padding:10px; font-size:12px; color:var(--gm-mist); display:grid; gap:2px}
.gm-rules b{color:var(--gm-foam); font-size:18px}

/* ---- round --------------------------------------------------------------- */
.gm-bar{display:flex; align-items:center; gap:12px}
.gm-icon-btn{width:38px; height:38px; flex:none; border-radius:12px; border:1px solid var(--gm-line); background:transparent; display:grid; place-items:center}
.gm-dots{flex:1; display:flex; gap:6px; align-items:center}
.gm-dots span{flex:1; height:8px; border-radius:4px; background:var(--gm-shelf); transition:background .3s}
.gm-dots span.now{background:var(--gm-foam)}
.gm-dots span.ok{background:var(--gm-kept)}
.gm-dots span.no{background:var(--gm-lost)}
.gm-dots .gm-run{flex:1; height:auto; background:none; font:600 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--gm-mist)}
.gm-score{font:600 15px var(--mono); min-width:52px; text-align:right; font-variant-numeric:tabular-nums}
.gm-level{align-self:flex-start; font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px}
.gm-level.is-easy{background:rgba(63,214,200,.14); color:var(--gm-kept)}
.gm-level.is-hard{background:rgba(255,122,89,.14); color:var(--gm-lost)}
.gm-q{font-size:23px; font-weight:800; line-height:1.12; letter-spacing:-.01em}
.gm-qsub{font:500 13px var(--mono); color:var(--gm-mist); margin-top:-6px !important}
.gm-arena{display:flex; flex-direction:column; gap:10px; min-height:300px}
.gm-vs{align-self:center; font:600 12px var(--mono); color:var(--gm-mist); background:var(--gm-abyss); border:1px solid var(--gm-line);
  border-radius:999px; padding:4px 10px; margin:-22px 0; z-index:2}
.gm-coin{flex:1; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:10px;
  min-height:136px; padding:16px; text-align:left; border-radius:22px; border:2px solid var(--gm-line); background:var(--gm-deep);
  transition:transform .15s, border-color .2s, background .2s}
.gm-coin:not([disabled]):active{transform:scale(.97)}
.gm-coin:not([disabled]):hover{border-color:rgba(234,244,255,.35)}
.gm-coin[disabled]{cursor:default}
.gm-coin-top{display:flex; align-items:center; gap:12px}
.gm-tile{width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center; font-weight:800; font-size:20px; color:#fff;
  background:linear-gradient(135deg, #0060D6, #3FB6FF)}
.gm-coin-id{display:grid; gap:2px; min-width:0}
.gm-sym{font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1}
.gm-name{font-size:13px; color:var(--gm-mist); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gm-chain{margin-left:auto; font:500 12px var(--mono); color:var(--gm-foam); border:1px solid var(--gm-line); border-radius:999px; padding:4px 9px; white-space:nowrap}
.gm-hint{font:500 13px var(--mono); color:var(--gm-mist)}
.gm-res{display:none; gap:6px}
.gm-coin.shown .gm-res{display:grid}
.gm-coin.shown .gm-hint{display:none}
.gm-amt{font:600 26px var(--mono); color:var(--gm-lost); font-variant-numeric:tabular-nums}
.gm-sub2{font:500 12px var(--mono); color:var(--gm-mist)}
.gm-meter{display:block; height:8px; border-radius:4px; background:rgba(63,214,200,.28); overflow:hidden}
.gm-meter i{display:block; height:100%; width:0; border-radius:4px; background:var(--gm-lost); transition:width .9s cubic-bezier(.2,.8,.2,1)}
.gm-coin.pick{border-color:var(--gm-foam)}
.gm-coin.right{border-color:var(--gm-kept); background:color-mix(in srgb, var(--gm-kept) 13%, var(--gm-deep))}
.gm-coin.wrong{border-color:var(--gm-lost); animation:gm-shake .4s}
.gm-stamp{position:absolute; right:14px; bottom:34px; display:none; font:700 11px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  padding:4px 8px; border-radius:8px; background:var(--gm-lost); color:#2A0A00}
.gm-coin.more .gm-stamp{display:block}

@keyframes gm-shake{20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)}}

.gm-verdict{display:none; flex-direction:column; gap:10px; border-top:1px solid var(--gm-line); padding-top:12px}
.gm-verdict.on{display:flex; animation:gm-rise .3s ease-out}
.gm-verdict-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.gm-verdict h3{font-size:22px; font-weight:800}
.gm-verdict h3.ok{color:var(--gm-kept)}
.gm-verdict h3.no{color:var(--gm-lost)}
.gm-plus{font:700 22px var(--mono); color:var(--gm-gold); animation:gm-pop .5s ease-out}
.gm-why{font-size:15px}
.gm-crowd{font-size:14px; color:var(--gm-azure)}
.gm-crowd:empty{display:none}
.gm-src{font:500 11px/1.5 var(--mono); color:var(--gm-mist)}
@keyframes gm-rise{from{transform:translateY(12px); opacity:.4} to{transform:none; opacity:1}}
@keyframes gm-pop{0%{transform:scale(.4); opacity:0} 70%{transform:scale(1.25)} 100%{transform:none; opacity:1}}

/* ---- sign-up --------------------------------------------------------------- */
.gm-gate-title{font-size:32px; font-weight:800; line-height:1.02; letter-spacing:-.02em}
.gm-perks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.gm-perks li{display:flex; gap:10px; align-items:baseline; font-size:15px}
.gm-perks li::before{content:""; width:10px; height:10px; flex:none; border-radius:3px; background:var(--gm-kept); transform:translateY(1px)}
.gm-form{display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:20px; border:1px solid var(--gm-line); background:var(--gm-deep)}
.gm-form label{font:600 12px var(--mono); color:var(--gm-mist); letter-spacing:.06em; text-transform:uppercase; margin-top:6px}
.gm-form input:not([type=checkbox]){width:100%; padding:14px; border-radius:12px; border:1.5px solid var(--gm-line); background:var(--gm-abyss); color:var(--gm-foam); font-size:17px}
.gm-hint{font-size:12px; color:var(--gm-mist)}
.gm-form .gm-check{display:flex; gap:10px; align-items:center; font-family:inherit; font-size:14px; font-weight:500; line-height:1.3; text-transform:none; letter-spacing:0; color:var(--gm-foam); margin:10px 0 6px}
.gm-check input{width:20px; height:20px; margin:0; accent-color:var(--gm-kept)}
.gm-err{padding:10px 12px; border-radius:10px; background:rgba(255,122,89,.14); color:#FFB09B; font-size:14px}
.gm-promise{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--gm-mist); margin-top:6px !important}

/* ---- results ------------------------------------------------------------- */
.gm-bigscore{display:flex; align-items:baseline; gap:12px}
.gm-bigscore b{font:600 72px/1 var(--mono); letter-spacing:-.04em}
.gm-bigscore span{font-size:18px; color:var(--gm-mist)}
.gm-marks{display:flex; gap:8px}
.gm-marks span{position:relative; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#06182A}
.gm-marks span.ok{background:var(--gm-kept)}
.gm-marks span.no{background:var(--gm-lost)}
.gm-marks em{position:absolute; right:3px; bottom:1px; font:600 9px var(--mono); font-style:normal; opacity:.7}
.gm-card{border:1px solid var(--gm-line); border-radius:20px; background:var(--gm-deep); padding:16px}
.gm-points{display:grid; gap:12px; border-color:rgba(244,193,82,.4)}
.gm-points-head{display:flex; justify-content:space-between; align-items:baseline}
.gm-points-head span{font-weight:700}
.gm-points-head b{font:700 34px var(--mono); color:var(--gm-gold); font-variant-numeric:tabular-nums}
.gm-parts{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px}
.gm-parts li{display:flex; justify-content:space-between; gap:12px}
.gm-parts b{font-family:var(--mono); color:var(--gm-gold)}
.gm-parts li.soon{color:var(--gm-mist); font-size:13px}
.gm-levelbar{display:grid; gap:6px}
.gm-levelbar-top{display:flex; justify-content:space-between; font-size:13px}
.gm-levelbar-top span:first-child{font-weight:700}
.gm-levelbar-top span:last-child{color:var(--gm-mist)}
.gm-points .gm-meter{background:var(--gm-shelf)}
.gm-points .gm-meter i{background:linear-gradient(90deg, var(--gm-gold), #FFE08A)}
.gm-sharetext{width:100%; padding:10px; border-radius:12px; border:1px solid var(--gm-line); background:var(--gm-abyss); color:var(--gm-foam); font:500 14px var(--mono); resize:none}
.gm-copied{min-height:1em; text-align:center; font:500 13px var(--mono); color:var(--gm-kept)}
.gm-streak{display:flex; align-items:center; gap:14px}
.gm-streak b{display:block; font-size:24px; font-weight:800; line-height:1.1}
.gm-streak span{font-size:13px; color:var(--gm-mist)}
/* A flame: a teardrop (one square corner, turned to point up) with a
   smaller, hotter one inside it. */
.gm-flame{position:relative; width:46px; height:52px; flex:none; display:grid; place-items:end center; padding-bottom:4px}
.gm-flame::before, .gm-flame::after{content:""; position:absolute; left:50%; border-radius:50% 0 50% 50%;
  transform:translateX(-50%) rotate(-45deg); transform-origin:center}
.gm-flame::before{bottom:4px; width:34px; height:34px; background:linear-gradient(135deg, #FFE08A, var(--gm-gold) 40%, #F07A3C);
  animation:gm-flicker 1.6s ease-in-out infinite alternate}
.gm-flame::after{bottom:6px; width:16px; height:16px; background:linear-gradient(135deg, #FFF3C4, var(--gm-lost))}
@keyframes gm-flicker{from{transform:translateX(-50%) rotate(-48deg) scale(1)} to{transform:translateX(-50%) rotate(-42deg) scale(1.07)}}
.gm-two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.gm-stat{border:1px solid var(--gm-line); border-radius:16px; padding:12px; display:grid; gap:4px}
.gm-stat b{font:600 20px var(--mono); font-variant-numeric:tabular-nums}
.gm-stat span{font-size:12px; color:var(--gm-mist)}
.gm-toggle{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px}
.gm-switch{position:relative; width:52px; height:30px; flex:none; border:0; border-radius:999px; background:var(--gm-shelf); transition:background .2s}
.gm-switch::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--gm-foam); transition:left .2s}
.gm-switch[aria-checked="true"]{background:var(--gm-kept)}
.gm-switch[aria-checked="true"]::after{left:25px}
.gm-h{font-size:20px; font-weight:800; margin-top:8px !important}
.gm-more-list{display:grid; gap:10px}
.gm-more{display:flex; align-items:center; gap:14px; width:100%; text-align:left; text-decoration:none; color:var(--gm-foam) !important;
  border:1px solid var(--gm-line); border-radius:18px; background:var(--gm-deep); padding:14px}
.gm-more > span:last-child{display:grid; gap:2px; min-width:0}
.gm-more b{font-size:16px}
.gm-more small{font-size:13px; color:var(--gm-mist)}
.gm-more-ic{width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, #0060D6, #3FB6FF)}

/* Medals: a metal disc on a ribbon, the glyph from the icon library. */
.gm-medals{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.gm-medal{display:grid; justify-items:center; gap:4px; text-align:center; padding:12px 6px 10px; border-radius:16px; border:1px solid var(--gm-line); background:var(--gm-deep)}
.gm-medal-disc{position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#1B1405; margin-top:12px;
  background:radial-gradient(circle at 35% 30%, #fff8 0 12%, transparent 13%), var(--gm-metal, var(--gm-silver));
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), 0 0 0 3px rgba(255,255,255,.08)}
.gm-medal-disc::before{content:""; position:absolute; top:-14px; left:50%; width:22px; height:18px; transform:translateX(-50%);
  background:linear-gradient(90deg, #0060D6 0 50%, #3FB6FF 50%); clip-path:polygon(0 0, 100% 0, 80% 100%, 20% 100%); z-index:-1}
.gm-medal-disc svg{width:22px; height:22px}
.gm-medal-name{font-size:12.5px; font-weight:700; line-height:1.2}
.gm-medal-how{font-size:11px; color:var(--gm-mist); line-height:1.25}
.gm-medal.t-bronze{--gm-metal:var(--gm-bronze)}
.gm-medal.t-silver{--gm-metal:var(--gm-silver)}
.gm-medal.t-gold{--gm-metal:var(--gm-gold)}
.gm-medal.t-deep{--gm-metal:var(--gm-deepmetal)}
.gm-medal.locked{opacity:.5}
.gm-medal.locked .gm-medal-disc{background:var(--gm-shelf); color:var(--gm-mist); box-shadow:none}
.gm-medal.locked .gm-medal-disc::before{background:var(--gm-shelf)}
.gm-medals-more{justify-self:center; align-self:center}

.gm-deck{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px}
.gm-card-coin{display:grid; justify-items:center; gap:4px; padding:8px 2px; border-radius:12px; border:1px solid var(--gm-line); text-decoration:none; color:var(--gm-foam) !important; font:600 10px var(--mono); min-width:0}
.gm-card-coin .gm-tile{width:34px; height:34px; font-size:15px; border-radius:10px}
.gm-card-coin span:last-child{max-width:100%; overflow:hidden; text-overflow:ellipsis}

.gm-league{width:100%; border-collapse:collapse; font-size:14px}
.gm-league td{padding:9px 6px; border-bottom:1px solid var(--gm-line)}
.gm-league td:first-child{width:32px; font:600 13px var(--mono); color:var(--gm-mist)}
.gm-league td:last-child{text-align:right; font:600 14px var(--mono); font-variant-numeric:tabular-nums}
.gm-league tr.me td{color:var(--gm-gold)}
.gm-league tr.gap td{color:var(--gm-mist); text-align:center; border-bottom:0}
.gm-you{display:flex; justify-content:space-between; align-items:center; gap:12px}
.gm-you b{display:block; font-size:17px}
.gm-fine{font-size:12px; color:var(--gm-mist); margin-top:6px !important}

/* ---- the medal moment ------------------------------------------------------- */
.gm-modal{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; background:rgba(3,12,22,.78); backdrop-filter:blur(4px)}
.gm-modal-card{width:min(340px, 100%); display:grid; gap:10px; justify-items:center; text-align:center; padding:24px 20px 20px;
  border-radius:24px; background:var(--gm-deep); border:1px solid rgba(244,193,82,.45); box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  animation:gm-pop .45s ease-out}
.gm-modal-card h3{font-size:24px; font-weight:800}
.gm-modal-card p{color:var(--gm-mist)}
.gm-modal-medal .gm-medal{border:0; background:none; transform:scale(1.5); margin:18px 0 14px}
.gm-modal-medal .gm-medal-name, .gm-modal-medal .gm-medal-how{display:none}

@media (prefers-reduced-motion: reduce){
  .gm *, .gm *::before, .gm *::after{animation:none !important; transition:none !important}
}
.gm-form .gm-hint{font-family:inherit; font-size:12.5px}
.gm-form .gm-check-tight{margin-top:0}