/* Find Your Scene - mobile-first social mini game layer.
   Scoped under #game-root so it never collides with the machinery dashboard. */

:root{
  --g-bg0:#0a0b11; --g-bg1:#14101f; --g-bg2:#1a1230;
  --g-ink:#f2f1f8; --g-mut:#a7a6bd; --g-dim:#74738c;
  --g-acc:#8b6cff; --g-acc2:#28e0b3; --g-gold:#ffd36e; --g-pink:#ff6fae;
  --g-glass:rgba(255,255,255,.055); --g-glass2:rgba(255,255,255,.09);
  --g-line:rgba(255,255,255,.10); --g-line2:rgba(255,255,255,.18);
  --g-shadow:0 18px 50px -12px rgba(0,0,0,.7);
  --g-radius:22px;
}

/* default: game is the experience, machinery is hidden */
#machinery-panel{display:none}
body.machinery-open{overflow:hidden}
body.machinery-open #machinery-panel{
  display:block; position:fixed; inset:0; z-index:90; overflow:auto;
  background:#0d0f14; padding:0;
}
.m-head{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px; background:rgba(10,11,17,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--g-line); color:var(--g-mut); font:13px/1.4 system-ui,sans-serif;
}
.m-head button{background:var(--g-glass2);border:1px solid var(--g-line2);color:var(--g-ink);
  border-radius:10px;width:34px;height:34px;font-size:16px;cursor:pointer}

/* ---------- shell ---------- */
#game-root{
  --maxw:480px;
  position:fixed; inset:0; z-index:10; overflow:hidden;
  color:var(--g-ink);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a1b4d 0%, rgba(42,27,77,0) 55%),
    radial-gradient(90% 70% at 90% 110%, #11324a 0%, rgba(17,50,74,0) 50%),
    linear-gradient(160deg,var(--g-bg0),var(--g-bg1) 55%,var(--g-bg2));
  -webkit-tap-highlight-color:transparent;
}
#game-root *{box-sizing:border-box}
#game-root button{font-family:inherit}

/* floating ambient blobs */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;filter:blur(0)}
.fx i{position:absolute;border-radius:50%;opacity:.35;filter:blur(60px);animation:float 16s ease-in-out infinite}
.fx i:nth-child(1){width:280px;height:280px;background:#7c5cff;top:-60px;left:-40px}
.fx i:nth-child(2){width:240px;height:240px;background:#00d4aa;bottom:-40px;right:-30px;animation-delay:-5s}
.fx i:nth-child(3){width:200px;height:200px;background:#ff6fae;top:40%;right:-60px;animation-delay:-9s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-22px)}}

/* gear */
#gear{position:fixed;top:14px;right:14px;z-index:40;width:42px;height:42px;border-radius:50%;
  background:var(--g-glass2);border:1px solid var(--g-line2);color:var(--g-ink);font-size:18px;
  cursor:pointer;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background .2s}
#gear:hover{transform:rotate(35deg);background:rgba(255,255,255,.16)}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transform:translateY(14px) scale(.99);transition:opacity .45s ease,transform .45s ease,visibility .45s;
  padding:max(18px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom))}
.screen.active{opacity:1;visibility:visible;transform:none}
.screen-inner{width:100%;max-width:var(--maxw);margin:0 auto;flex:1;display:flex;flex-direction:column;min-height:0}

/* progress dots/bar */
.topbar{display:flex;align-items:center;gap:10px;min-height:30px;margin-bottom:8px}
.steps{display:flex;gap:6px;flex:1}
.steps i{height:4px;flex:1;border-radius:3px;background:rgba(255,255,255,.12);transition:background .3s}
.steps i.on{background:linear-gradient(90deg,var(--g-acc),var(--g-acc2))}
.qcount{font-size:12px;color:var(--g-mut);font-variant-numeric:tabular-nums}
.back{background:none;border:none;color:var(--g-mut);font-size:18px;cursor:pointer;padding:4px 6px}

/* ---------- opening ---------- */
.open-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px}
.kicker{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--g-acc2);font-weight:600}
.title{font-size:clamp(40px,12vw,64px);font-weight:800;line-height:.98;letter-spacing:-1.5px;
  background:linear-gradient(120deg,#fff 10%,#cdbcff 45%,#7fe9d0 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{font-size:16px;color:var(--g-mut);max-width:330px}
.support{font-size:13px;color:var(--g-dim)}
.float-preview{margin:6px auto 2px;width:200px;height:268px;border-radius:24px;position:relative;
  background:linear-gradient(160deg,rgba(124,92,255,.25),rgba(0,212,170,.12));border:1px solid var(--g-line2);
  box-shadow:var(--g-shadow);overflow:hidden;animation:bob 6s ease-in-out infinite;backdrop-filter:blur(8px)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.float-preview .chip{position:absolute;background:var(--g-glass2);border:1px solid var(--g-line2);
  border-radius:999px;padding:5px 11px;font-size:11px;color:var(--g-ink);backdrop-filter:blur(6px)}
.float-preview .fp-title{position:absolute;left:16px;top:16px;font-weight:700;font-size:15px}
.float-preview .fp-sub{position:absolute;left:16px;top:38px;font-size:11px;color:var(--g-mut)}
.cta{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.btn{border:none;border-radius:16px;padding:16px 20px;font-size:17px;font-weight:700;cursor:pointer;
  transition:transform .12s ease,filter .2s;letter-spacing:.2px}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(120deg,var(--g-acc),#6a8bff);color:#fff;box-shadow:0 12px 30px -8px rgba(124,92,255,.7)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--g-glass);border:1px solid var(--g-line2);color:var(--g-ink)}

/* ---------- signal picker ---------- */
.h-lead{font-size:23px;font-weight:800;letter-spacing:-.5px;margin-top:2px}
.h-sub{font-size:13.5px;color:var(--g-mut);margin:4px 0 12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;overflow-y:auto;flex:1;padding:2px 2px 8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.grid::-webkit-scrollbar{display:none}
.card-tile{position:relative;border-radius:18px;padding:14px;min-height:104px;cursor:pointer;overflow:hidden;
  background:var(--g-glass);border:1px solid var(--g-line);display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .16s ease,border-color .2s,background .2s;backdrop-filter:blur(6px)}
.card-tile .ic{font-size:22px;position:absolute;top:12px;left:13px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.card-tile .ct{font-size:14.5px;font-weight:700;line-height:1.15}
.card-tile .cd{font-size:11px;color:var(--g-mut);margin-top:3px;line-height:1.25}
.card-tile::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(124,92,255,.16),transparent 60%);opacity:0;transition:opacity .25s}
.card-tile:active{transform:scale(.97)}
.card-tile.sel{border-color:var(--g-acc);background:rgba(124,92,255,.14);transform:translateY(-2px);
  box-shadow:0 10px 26px -10px rgba(124,92,255,.6)}
.card-tile.sel::after{opacity:1}
.card-tile .badge{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--g-acc),var(--g-acc2));box-shadow:0 4px 12px rgba(0,0,0,.4);
  transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.card-tile.sel .badge{transform:scale(1)}
.picker-foot{padding-top:10px}
.btn[disabled]{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
.reorder-hint{font-size:11px;color:var(--g-dim);text-align:center;margin-bottom:8px;height:14px}

/* selected reorder row */
.chosen{display:flex;gap:8px;margin-bottom:10px;min-height:0}
.chosen .pill{flex:1;display:flex;align-items:center;gap:7px;background:var(--g-glass2);border:1px solid var(--g-line2);
  border-radius:12px;padding:8px 10px;font-size:12px;font-weight:600;cursor:grab;user-select:none}
.chosen .pill .r{width:18px;height:18px;border-radius:50%;background:var(--g-acc);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;flex:0 0 auto}
.chosen .pill.drag{opacity:.5}
/* Q2 ranks 5, so the chips wrap onto two rows and size to content */
.chosen-q2{flex-wrap:wrap;gap:6px}
.chosen-q2 .pill{flex:0 1 auto;padding:6px 9px;font-size:11.5px}
/* Q2 interest grid: 30 compact tiles in 3 columns, scrollable */
.grid-interests{grid-template-columns:1fr 1fr 1fr;gap:8px}
.grid-interests .card-tile{min-height:84px;padding:11px;border-radius:14px}
.grid-interests .card-tile .ic{font-size:18px;top:9px;left:10px}
.grid-interests .card-tile .ct{font-size:12.5px;line-height:1.1}
.grid-interests .card-tile .cd{font-size:9.5px;margin-top:2px;line-height:1.2}
.grid-interests .card-tile .badge{width:21px;height:21px;font-size:11px;top:8px;right:8px}
@media (max-width:360px){.grid-interests{grid-template-columns:1fr 1fr}}

/* Q5 activity grid: 2 columns (longer text), optional real-city tag */
.grid-activities{grid-template-columns:1fr 1fr;gap:9px}
.grid-activities .card-tile{min-height:78px;padding:12px;border-radius:14px;justify-content:flex-start}
.grid-activities .card-tile .ct{font-size:13px;line-height:1.2;padding-right:22px}
.grid-activities .card-tile .cd.city{font-size:10.5px;color:var(--g-acc);margin-top:6px;font-weight:600}
.grid-activities .card-tile .badge{width:21px;height:21px;font-size:11px;top:8px;right:8px}
@media (max-width:360px){.grid-activities{grid-template-columns:1fr}}

/* ---------- Q3 value tradeoffs ---------- */
.tradeoffs{display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1;padding:2px 2px 8px;scrollbar-width:none}
.tradeoffs::-webkit-scrollbar{display:none}
.tradeoff{background:var(--g-glass);border:1px solid var(--g-line);border-radius:16px;padding:13px 13px 11px}
.tr-q{font-size:13px;font-weight:700;color:var(--g-mut);margin-bottom:9px;letter-spacing:.01em}
.tr-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr-side{position:relative;border-radius:13px;padding:13px 12px;min-height:58px;cursor:pointer;text-align:left;
  background:var(--g-glass2);border:1px solid var(--g-line2);color:var(--g-fg);font-size:13.5px;font-weight:600;line-height:1.2;
  transition:transform .14s,border-color .2s,background .2s}
.tr-side:active{transform:scale(.97)}
.tr-mid{display:flex;gap:8px;margin-top:8px}
.tr-alt{flex:1;border-radius:11px;padding:8px;cursor:pointer;font-size:12px;font-weight:600;
  background:transparent;border:1px dashed var(--g-line2);color:var(--g-mut);transition:border-color .2s,background .2s,color .2s}
.tr-alt:active{transform:scale(.97)}
.tradeoff button.on{border-color:var(--g-acc);background:rgba(124,92,255,.16);color:#fff;border-style:solid;
  box-shadow:0 8px 22px -12px rgba(124,92,255,.7)}
/* Q4 solo (full-screen) tradeoff + mode pill */
.tradeoff-solo{background:none;border:none;padding:0;margin-top:6px}
.tradeoff-solo .tr-side{min-height:74px;font-size:14.5px}
.modepill{display:inline-block;align-self:flex-start;margin-top:14px;font-size:11px;font-weight:600;color:var(--g-dim);
  border:1px solid var(--g-line2);border-radius:20px;padding:4px 11px;letter-spacing:.02em}
.modepill.on{color:var(--g-acc);border-color:var(--g-acc);background:rgba(124,92,255,.1)}

/* Q4/Q5 polished loading state (skeleton, never blank) */
.qloading{justify-content:flex-start;padding-top:26px}
.load-lead{font-size:22px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.load-sub{font-size:14px;color:var(--g-mut);margin-bottom:22px;transition:opacity .3s}
.skel-cards{display:flex;flex-direction:column;gap:12px}
.skel{height:64px;border-radius:14px;background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.05) 70%);
  background-size:200% 100%;animation:shimmer 1.3s ease-in-out infinite}
.skel.sm{height:50px;flex:1}
.skel-row{display:flex;gap:10px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* gear/machinery panel: live-AI telemetry (hidden from normal flow) */
.m-llm-tel{margin-top:14px;border-top:1px solid var(--g-line2,rgba(255,255,255,.1));padding-top:10px}
.m-llm-tel h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin:0 0 6px}
.m-llm-tel .tel-row{font-size:11.5px;font-family:ui-monospace,monospace;padding:3px 0;opacity:.9}
.m-llm-tel .tel-ok{color:#3fe0c2}
.m-llm-tel .tel-fb{color:#ffd36e}
.m-llm-tel .tel-r,.m-llm-tel .tel-m,.m-llm-tel .tel-c,.m-llm-tel .tel-k{opacity:.6;margin-left:4px}

/* ---------- adaptive swipe ---------- */
.qstage{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow-y:auto;scrollbar-width:none}
.qstage::-webkit-scrollbar{display:none}
.forming{flex:0 0 auto}
.qprompt{font-size:13px;color:var(--g-acc2);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.qtext{font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.5px;margin-bottom:18px}
.qtext .tag{display:inline-block;font-size:11px;font-weight:700;color:var(--g-gold);border:1px solid rgba(255,211,110,.4);
  border-radius:999px;padding:2px 9px;margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase}
.answers{display:flex;flex-direction:column;gap:11px}
.ans{position:relative;text-align:left;border-radius:16px;padding:16px 16px;font-size:15.5px;font-weight:600;
  background:var(--g-glass);border:1px solid var(--g-line2);color:var(--g-ink);cursor:pointer;
  transition:transform .14s ease,background .2s,border-color .2s;line-height:1.3}
.ans:hover{background:var(--g-glass2);border-color:var(--g-acc)}
.ans:active{transform:scale(.98)}
.ans.pick{background:rgba(40,224,179,.16);border-color:var(--g-acc2)}
.ans .arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--g-dim);font-size:16px}
.shrug{align-self:center;background:none;border:none;color:var(--g-dim);font-size:13px;cursor:pointer;padding:10px;margin-top:4px}
.shrug:hover{color:var(--g-mut)}
.gen-flash{font-size:12px;color:var(--g-acc);text-align:center;height:16px;margin-top:6px}

/* ---------- live scene forming ---------- */
.forming{margin-top:14px;background:var(--g-glass);border:1px solid var(--g-line);border-radius:18px;padding:14px;backdrop-filter:blur(8px)}
.forming h4{font-size:12px;letter-spacing:.5px;color:var(--g-mut);text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.forming .pct{color:var(--g-acc2);font-weight:800;font-size:13px}
.bars{display:flex;flex-direction:column;gap:8px}
.bars .b{display:flex;align-items:center;gap:9px;font-size:12.5px}
.bars .b span:first-child{flex:0 0 96px;color:var(--g-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars .b .track{flex:1;height:7px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.bars .b .track i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--g-acc),var(--g-acc2));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.tagrow .t{font-size:11px;background:var(--g-glass2);border:1px solid var(--g-line2);border-radius:999px;padding:4px 10px;color:var(--g-mut)}
.toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);z-index:30;
  background:rgba(40,224,179,.18);border:1px solid rgba(40,224,179,.5);color:#bdfff0;backdrop-filter:blur(10px);
  border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:600;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- recommendations ---------- */
.rec-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:13px;padding:2px 2px 8px;scrollbar-width:none}
.rec-scroll::-webkit-scrollbar{display:none}
.rec{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--g-line2);min-height:158px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55)),var(--rec-bg,linear-gradient(135deg,#3a2b66,#16324a));
  box-shadow:var(--g-shadow);transition:transform .16s ease,opacity .3s}
.rec:active{transform:scale(.985)}
.rec .emoji{position:absolute;top:14px;left:16px;font-size:30px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.rec .match{position:absolute;top:15px;right:14px;font-size:11px;font-weight:800;letter-spacing:.3px;
  background:rgba(40,224,179,.22);border:1px solid rgba(40,224,179,.55);color:#bdfff0;border-radius:999px;padding:4px 10px;backdrop-filter:blur(6px)}
.rec .city{font-size:22px;font-weight:800;letter-spacing:-.4px}
.rec .country{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:1px}
.rec .why{font-size:12px;color:rgba(255,255,255,.85);margin-top:7px;line-height:1.35}
.rec .acts{display:flex;gap:9px;margin-top:12px}
.rec .acts button{flex:1;border-radius:11px;padding:9px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--g-line2);backdrop-filter:blur(6px)}
.rec .acts .save{background:rgba(255,255,255,.16);color:#fff}
.rec .acts .save.on{background:var(--g-gold);color:#241a00;border-color:var(--g-gold)}
.rec .acts .skip{background:rgba(0,0,0,.25);color:rgba(255,255,255,.8)}
.rec.gone{opacity:0;transform:scale(.9) translateX(40px)}

/* ---------- Your Scene (share, 9:16) ---------- */
.reveal-head{text-align:center;margin-bottom:10px}
.reveal-head .k{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--g-acc2);font-weight:600}

/* 9:16 story-card preview (the export-quality canvas, scaled responsively) */
.screen-inner.reveal{align-items:center}
.story-frame{flex:1 1 auto;min-height:0;width:100%;display:flex;justify-content:center;align-items:center}
.story-canvas{height:100%;width:auto;max-width:100%;max-height:62vh;display:block;border-radius:22px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.85);border:1px solid var(--g-line2)}
@media (min-width:900px){ .story-canvas{max-height:none} }
.livestat{margin-top:8px;font-size:11px;letter-spacing:.3px;color:var(--g-dim);text-align:center}
.livestat.on{color:var(--g-acc2)}
.scene-card{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:9/16;max-height:62vh;
  border-radius:26px;overflow:hidden;border:1px solid var(--g-line2);box-shadow:var(--g-shadow);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(124,92,255,.35), transparent 55%),
    radial-gradient(120% 60% at 50% 100%, rgba(40,224,179,.22), transparent 55%),
    linear-gradient(160deg,#120e22,#0b0b14);
  padding:22px 20px;display:flex;flex-direction:column;color:#fff}
.scene-card .sc-brand{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--g-mut);font-weight:600}
.scene-card .sc-title{font-size:13px;color:var(--g-mut);margin-top:14px}
.scene-card .sc-name{font-size:clamp(26px,8vw,34px);font-weight:800;line-height:1.05;letter-spacing:-.5px;margin-top:2px;
  background:linear-gradient(120deg,#fff,#cdbcff 60%,#7fe9d0);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-sec{margin-top:14px}
.sc-sec .lab{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--g-dim);margin-bottom:5px}
.sc-sig{font-size:13.5px;font-weight:700}
.sc-tags{display:flex;flex-wrap:wrap;gap:6px}
.sc-tags .t{font-size:11px;background:rgba(255,255,255,.1);border:1px solid var(--g-line2);border-radius:999px;padding:3px 9px}
.sc-cities{font-size:15px;font-weight:800;letter-spacing:-.2px}
.sc-why{font-size:12px;color:rgba(255,255,255,.82);line-height:1.4}
.sc-strength{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:14px}
.sc-strength .big{font-size:30px;font-weight:800;color:var(--g-acc2)}
.sc-strength .lab2{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--g-dim);text-align:right}
.share-acts{display:flex;gap:9px;max-width:340px;margin:14px auto 0;width:100%}
.share-acts button{flex:1;border-radius:13px;padding:13px 8px;font-size:13.5px;font-weight:700;cursor:pointer;border:1px solid var(--g-line2)}
.share-acts .primary{background:linear-gradient(120deg,var(--g-acc),#6a8bff);color:#fff;border:none}
.share-acts .ghost{background:var(--g-glass);color:var(--g-ink)}
.anon{display:flex;gap:9px;align-items:flex-start;max-width:340px;margin:14px auto 0;
  font-size:11.5px;line-height:1.45;color:var(--g-mut);cursor:pointer}
.anon input{margin-top:1px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--g-acc);cursor:pointer}
.btn-feedback{display:block;width:100%;max-width:340px;margin:10px auto 0;border-radius:13px;padding:12px;
  font-size:13.5px;font-weight:700;cursor:pointer;background:var(--g-glass);border:1px solid var(--g-line2);color:var(--g-ink);
  transition:background .2s}
.btn-feedback:hover{background:var(--g-glass2)}
.btn-feedback:disabled{opacity:.55;cursor:default;background:rgba(40,224,179,.14);border-color:rgba(40,224,179,.4);color:#bdfff0}
.replay-link{display:block;text-align:center;margin-top:12px;color:var(--g-dim);font-size:12.5px;background:none;border:none;cursor:pointer;width:100%}

/* ---------- desktop: centered phone-frame preview ---------- */
@media (min-width:900px){
  .screen{align-items:center;justify-content:center;padding:24px}
  .screen-inner{flex:0 1 auto;max-width:412px;height:min(880px,92vh);max-height:880px;
    border-radius:44px;border:1px solid var(--g-line2);
    box-shadow:0 50px 130px -30px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.04);
    background:rgba(10,10,18,.55);backdrop-filter:blur(12px);
    padding:30px 24px;overflow:hidden}
  .scene-card{max-height:none}
}

@media (prefers-reduced-motion:reduce){
  #game-root *{animation:none!important;transition-duration:.01ms!important}
}