:root{--bg:#06111b;--bg2:#0a1826;--panel:#0c1f2d;--line:rgba(144,213,255,.16);--text:#f3f7fb;--muted:#9eb0c1;--cyan:#42e8e0;--blue:#6f78ff;--gold:#f6bd65;--orange:#ff934f;--radius:24px}
*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(circle at 20% 10%,#0a2838 0,#06111b 35%,#03080d 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100%}body{overflow-x:hidden}.app-shell{min-height:100vh;position:relative}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid var(--line);position:fixed;left:0;right:0;top:0;background:rgba(3,10,16,.62);backdrop-filter:blur(20px);z-index:50}.brand{display:flex;gap:10px;align-items:center;font-weight:700;letter-spacing:.3px}.brand-mark{color:var(--cyan);font-size:24px}.topbar nav{display:flex;gap:8px}.ghost,.secondary,.primary,.gold-btn{border:0;border-radius:999px;padding:12px 18px;font-weight:700;cursor:pointer;transition:.25s ease;color:#fff}.ghost{background:transparent;color:#c9d5df}.ghost:hover{background:rgba(255,255,255,.06)}.primary{background:linear-gradient(135deg,var(--blue),#4ed6ff);box-shadow:0 10px 35px rgba(77,130,255,.28)}.primary:hover,.gold-btn:hover,.secondary:hover{transform:translateY(-2px)}.gold-btn{background:linear-gradient(135deg,#d99d43,#ffd98f);color:#1b1106;box-shadow:0 10px 35px rgba(246,189,101,.25)}.secondary{background:rgba(255,255,255,.06);border:1px solid var(--line)}.xl{padding:16px 24px;font-size:15px}.full{width:100%}.screen{display:none;min-height:100vh;padding:110px 44px 44px}.screen.active{display:flex}.hero-screen{align-items:center;justify-content:space-between;position:relative;overflow:hidden}.ambient{position:absolute;inset:auto -10% -35% 25%;height:700px;background:radial-gradient(circle,rgba(64,230,221,.15),transparent 60%);filter:blur(30px)}.hero-copy{max-width:650px;position:relative;z-index:2}.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--cyan);font-weight:800;margin-bottom:15px}.hero-copy h1,.section-head h2,.intro-panel h2,.challenge-card h2,.analysis-box h2,.result-hero h2{font-family:Georgia,'Times New Roman',serif}.hero-copy h1{font-size:76px;line-height:.96;margin:0 0 24px}.hero-copy h1 span{color:#aee8ff}.hero-copy p{font-size:20px;line-height:1.65;color:#b7c3cf;max-width:600px}.hero-actions{display:flex;gap:12px;margin-top:32px}.microquote{margin-top:26px;color:#7f95a8;font-family:Georgia,serif;font-style:italic}.hero-portal{width:460px;height:590px;position:relative;display:grid;place-items:center}.portal-ring{position:absolute;border:1px solid rgba(255,211,141,.65);border-radius:50% 50% 44% 44% / 40% 40% 60% 60%;filter:drop-shadow(0 0 18px rgba(255,185,95,.4))}.p1{width:300px;height:500px}.p2{width:260px;height:455px;opacity:.55}.p3{width:220px;height:410px;opacity:.35}.portal-core{width:190px;height:360px;border-radius:50% 50% 44% 44% / 40% 40% 60% 60%;background:radial-gradient(circle at 50% 45%,#fff4ca 0,#ffc26a 25%,#8b54ff 60%,transparent 72%);box-shadow:0 0 100px rgba(137,84,255,.35)}.silhouette{position:absolute;bottom:115px;font-size:180px;color:#091018;transform:rotate(45deg);opacity:.9}.games-screen{flex-direction:column;align-items:center}.section-head{text-align:center;max-width:720px}.section-head h2{font-size:54px;margin:0 0 10px}.section-head p{color:var(--muted);font-size:17px}.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;width:min(1050px,100%);margin-top:38px}.game-card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(14,31,44,.95),rgba(7,18,27,.95));border:1px solid var(--line);border-radius:30px;padding:32px;min-height:430px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 20px 70px rgba(0,0,0,.35)}.game-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 5%,rgba(0,0,0,.35) 55%,rgba(3,9,14,.9) 100%);z-index:0}.trial-card{background-image:radial-gradient(circle at 70% 20%,rgba(53,236,229,.25),transparent 30%),linear-gradient(140deg,#0a2730,#08121c 60%)}.mask-card{background-image:radial-gradient(circle at 70% 20%,rgba(246,189,101,.24),transparent 30%),linear-gradient(140deg,#22170b,#0a1118 65%)}.game-card>*{position:relative;z-index:2}.game-card h3{font-size:33px;margin:10px 0}.game-card p{color:#c4d0d9;line-height:1.6}.game-icon{font-size:36px}.huge{font-size:66px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 22px}.tags span,.intro-meta span{font-size:12px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#bed0dd}.intro-screen,.identity-screen{align-items:center;justify-content:center}.intro-panel{text-align:center;width:min(760px,100%);padding:55px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(180deg,rgba(12,32,46,.9),rgba(5,14,22,.96));box-shadow:0 30px 120px rgba(0,0,0,.4)}.intro-panel h2{font-size:52px;margin:10px 0}.intro-panel p{font-size:18px;line-height:1.7;color:#b8c8d3}.intro-meta{display:flex;gap:8px;justify-content:center;margin:28px 0}.challenge-screen{flex-direction:column}.challenge-top{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:20px;width:100%}.mode-label{font-weight:800;color:var(--gold)}.progress-wrap{text-align:center}.progress-text{font-size:12px;color:#9eb2c2;margin-bottom:8px}.progress{height:8px;border-radius:999px;background:#132532;overflow:hidden}.progress div{height:100%;width:14%;background:linear-gradient(90deg,var(--cyan),#72a7ff);box-shadow:0 0 15px rgba(66,232,224,.5);transition:.4s ease}.challenge-top .ghost{justify-self:end}.challenge-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.challenge-number{position:absolute;left:2%;top:14%;font-size:160px;font-weight:900;color:rgba(255,255,255,.025);line-height:1}.challenge-card{width:min(900px,92vw);padding:38px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,rgba(10,26,38,.92),rgba(5,14,21,.95));box-shadow:0 30px 90px rgba(0,0,0,.38)}.challenge-card h2{font-size:44px;margin:5px 0 12px}.challenge-card>p{font-size:18px;color:#b8c7d2;line-height:1.6}.options{display:grid;gap:12px;margin-top:28px}.option{display:flex;align-items:center;gap:14px;width:100%;padding:17px 18px;border:1px solid rgba(145,209,247,.16);border-radius:16px;background:rgba(13,32,45,.76);color:#eff8ff;text-align:left;font-size:15px;cursor:pointer;transition:.22s ease}.option:hover{border-color:rgba(66,232,224,.55);background:rgba(14,42,54,.95);transform:translateX(4px)}.option:disabled{opacity:.5;cursor:default;transform:none}.opt-letter{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);font-size:12px;color:var(--cyan);flex:0 0 auto}.opt-thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto;border:1px solid rgba(255,255,255,.15)}.transition-screen,.analysis-screen{align-items:center;justify-content:center;position:relative;overflow:hidden}.scan-lines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 2px,transparent 5px);animation:scan 8s linear infinite}.transition-content{text-align:center;position:relative;z-index:2}.pulse-dot{width:20px;height:20px;border-radius:50%;background:var(--cyan);margin:0 auto 24px;box-shadow:0 0 0 0 rgba(66,232,224,.4);animation:pulse 1.5s infinite}.transition-title{font-size:42px;font-weight:900;letter-spacing:.16em}.transition-content p{color:#a5b8c6}.mini-ring{width:110px;height:110px;border-radius:50%;border:8px solid rgba(255,255,255,.07);border-top-color:var(--cyan);display:grid;place-items:center;margin:28px auto 0;animation:spin 2s linear infinite}.mini-ring span{animation:spinrev 2s linear infinite;font-weight:800}.analysis-box{width:min(780px,90vw);text-align:center}.analysis-box h2{font-size:54px;margin:10px 0 30px}.analysis-progress{height:12px;border-radius:999px;background:#10222f;overflow:hidden}.analysis-progress div{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--gold));transition:width .2s}.analysis-percent{font-size:48px;font-weight:900;margin:16px 0}.analysis-box ul{list-style:none;padding:0;color:#8097a8;display:grid;gap:7px}.result-screen{flex-direction:column;gap:28px}.result-hero{text-align:center}.result-hero h2{font-size:58px;margin:5px 0 10px}.result-hero p{color:#aabcca;font-size:18px}.result-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;width:min(1100px,100%);margin:0 auto}.panel,.mask-reveal{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(12,31,44,.92),rgba(5,14,21,.96));padding:28px}.panel h3{margin-top:0}.dna-row{display:grid;grid-template-columns:170px 1fr 52px;align-items:center;gap:14px;margin:17px 0}.dna-label{font-size:14px;color:#c8d6e0}.dna-track{height:12px;border-radius:999px;background:#112531;overflow:hidden}.dna-fill{height:100%;background:linear-gradient(90deg,var(--cyan),#7194ff);border-radius:inherit}.dna-value{text-align:right;font-weight:800}.insight-panel p{color:#b7c5cf;line-height:1.75}.tension,.watchout{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.tension span,.watchout span{font-size:11px;letter-spacing:.15em;color:var(--gold);font-weight:800}.tension strong{display:block;font-family:Georgia,serif;font-size:30px;margin-top:8px}.mask-reveal{width:min(1100px,100%);margin:0 auto;display:flex;gap:26px;align-items:center}.mask-visual{font-size:88px;filter:drop-shadow(0 0 20px rgba(246,189,101,.35))}.hidden{display:none}.result-actions{display:flex;justify-content:center;gap:10px;padding-bottom:20px}@keyframes pulse{70%{box-shadow:0 0 0 24px rgba(66,232,224,0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinrev{to{transform:rotate(-360deg)}}@keyframes scan{to{transform:translateY(20px)}}
@media(max-width:900px){.topbar{padding:0 18px}.topbar nav button:not(:last-child){display:none}.screen{padding:96px 18px 28px}.hero-screen{flex-direction:column;justify-content:center;text-align:center}.hero-copy h1{font-size:52px}.hero-copy p{font-size:17px}.hero-actions{justify-content:center;flex-wrap:wrap}.hero-portal{width:320px;height:330px;margin-top:10px}.p1{width:190px;height:310px}.p2{width:165px;height:280px}.p3{width:140px;height:250px}.portal-core{width:125px;height:220px}.silhouette{bottom:70px;font-size:110px}.game-grid,.result-grid{grid-template-columns:1fr}.game-card{min-height:360px}.challenge-top{grid-template-columns:1fr auto}.progress-wrap{grid-row:2;grid-column:1/3}.challenge-number{font-size:95px}.challenge-card{padding:24px}.challenge-card h2{font-size:34px}.result-hero h2,.analysis-box h2,.intro-panel h2{font-size:40px}.dna-row{grid-template-columns:120px 1fr 45px}.mask-reveal{flex-direction:column;text-align:center}}

/* --- Mechanic-specific challenge UIs (door, allocation, instinct timer, trade slider, card-grid pick/rank) --- */
.hint{color:#b8c7d2;line-height:1.6;font-size:15px;margin:0 0 6px}

/* Shared keyboard-focus ring for every clickable mechanic control — none of
   these had one before, so keyboard/screen-reader use had no visible
   focus indicator at all. :focus-visible only shows it for keyboard
   navigation, not a stray mouse click. */
.option:focus-visible,.door:focus-visible,.pickcard:focus-visible,.slot:focus-visible,
.bigchoice:focus-visible,.mirror-panel:focus-visible,.portal-pick:focus-visible,
.position-zone:focus-visible,.risk-box:focus-visible,.bag-item:focus-visible,
.bridge-item:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.door-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px;perspective:1200px}
.door{height:230px;position:relative;border-radius:16px 16px 8px 8px;cursor:pointer;transform-style:preserve-3d;transition:.4s;overflow:hidden;border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 0 50px rgba(0,0,0,.5),0 16px 34px rgba(0,0,0,.3)}
.door:nth-child(1){background:linear-gradient(160deg,#4b2630,#160b0f)}
.door:nth-child(2){background:linear-gradient(160deg,#18394c,#08151f)}
.door:nth-child(3){background:linear-gradient(160deg,#4a411d,#171405)}
.door:nth-child(4){background:linear-gradient(160deg,#2f244f,#0d0918)}
.door:hover{transform:translateY(-6px)}
.door.picked{outline:2px solid var(--cyan)}
.door span{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-weight:900;letter-spacing:.14em;font-size:12px;text-shadow:0 2px 8px #000}
.door:disabled,.door[aria-disabled="true"]{opacity:.4;pointer-events:none}

.alloc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.alloc{padding:16px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid var(--line)}
.alloc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.alloc-top b{font-size:15px}.alloc-top .val{font-size:19px;color:var(--gold);font-weight:900}
input[type=range]{width:100%;accent-color:var(--gold)}
.total-orb{width:110px;height:110px;margin:20px auto 4px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#264d6d,#0c1725 70%);border:1px solid var(--line)}
.total-orb div{text-align:center}.total-orb strong{font-size:28px}.total-orb small{display:block;color:var(--muted);font-size:11px}

.timer{height:9px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin:6px 0 18px}
.timerbar{height:100%;width:100%;background:linear-gradient(90deg,#73e6a2,var(--gold),#ff7a7a);transform-origin:left;animation:shrink 5s linear forwards}
@keyframes shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.bigchoice{padding:22px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);font-weight:900;font-size:18px;cursor:pointer}
.bigchoice:hover{border-color:var(--cyan);background:rgba(66,232,224,.08)}

.scale-labels{display:flex;justify-content:space-between;font-weight:900;font-size:13px;letter-spacing:.05em;color:var(--muted);margin-top:6px}
.trade-slider{margin:18px 0 4px}
.trade-meter{display:flex;justify-content:center;font-size:22px;font-weight:900;color:var(--gold);margin-bottom:10px}
.nova{margin-top:16px;padding:14px 16px;border-left:3px solid var(--cyan);background:rgba(66,232,224,.06);color:#d8f8ff;font-size:14px}
.nova strong{color:var(--cyan);letter-spacing:.06em;font-size:11px}

.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}
.pickcard{min-height:130px;padding:16px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}
.pickcard:hover{transform:translateY(-3px)}
.pickcard.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(246,189,101,.18) inset}
.pickcard .ico{font-size:26px}.pickcard b{font-size:15px}.pickcard small{color:var(--muted);font-size:12px}
.pickcard.rank-tag{position:relative}
.pickcard .rank-badge{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1b1106;font-weight:900;font-size:12px;display:grid;place-items:center}

.path-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.slot{min-height:80px;border:1px dashed var(--line);border-radius:14px;display:grid;place-items:center;color:var(--muted);padding:10px;text-align:center;font-size:13px}
.slot.filled{border-style:solid;border-color:var(--cyan);background:rgba(66,232,224,.07);color:var(--text)}

.mechanic-actions{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.mechanic-status{font-weight:800;color:var(--gold);font-size:14px}

@media(max-width:640px){
  .door-stage{grid-template-columns:repeat(2,1fr)}
  .door{height:170px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .path-slots{grid-template-columns:1fr}
  .choice-row{grid-template-columns:1fr}
}

/* --- multi_slider (Behind the Mask "How Much Do You Bend?") --- */
.sliderrow{margin:20px 0}
.sliderrow label{display:flex;justify-content:space-between;font-weight:800;font-size:13px;color:var(--muted);margin-bottom:8px}

/* --- Visual mask: small in-game progress indicator + full result reveal (§16) --- */
.mask-progress-wrap{display:flex;align-items:center;gap:8px;justify-self:center}
.mask-progress-wrap .mask{width:26px;height:34px}
.mask{position:relative;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));transition:.5s}
.mask svg{width:100%;height:100%;display:block}
.mask .orn{opacity:.12;transition:.4s}
.mask.level2 .o1,.mask.level3 .o1,.mask.level4 .o1,.mask.level5 .o1,.mask.level6 .o1,.mask.level7 .o1{opacity:1}
.mask.level3 .o2,.mask.level4 .o2,.mask.level5 .o2,.mask.level6 .o2,.mask.level7 .o2{opacity:1}
.mask.level4 .o3,.mask.level5 .o3,.mask.level6 .o3,.mask.level7 .o3{opacity:1}
.mask.level5 .o4,.mask.level6 .o4,.mask.level7 .o4{opacity:1}
.mask.level6 .o5,.mask.level7 .o5{opacity:1}
.mask.level7 .o6{opacity:1}

.outer-mask-gate{text-align:center;width:min(700px,100%);margin:0 auto}
.mask-stage-result{display:grid;place-items:center;min-height:340px}
.mask-stage-result .mask{width:220px;height:290px}
.outer-mask-gate h2{font-size:clamp(30px,5vw,44px);margin:8px 0 28px}
.mask-stage-result .mask.removed{transform:translateX(-40vw) rotate(-16deg);opacity:.08}

/* --- Additions for identity screen, CTA block, and empty-state hiding (not present in the original static prototype) --- */
.identity-panel{text-align:left}
.identity-panel>.eyebrow,.identity-panel>p{text-align:center}
.identity-panel h2{text-align:center}
.identity-form{margin-top:28px;display:grid;gap:18px}
.anon-toggle,.consent-toggle{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#c8d6e0;line-height:1.5;cursor:pointer}
.anon-toggle input,.consent-toggle input{margin-top:3px;width:16px;height:16px;flex:0 0 auto}
.identity-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.identity-fields .field:first-child{grid-column:1/3}
.identity-fields.disabled{opacity:.35;pointer-events:none}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 12px;background:#0d1f2c;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:14px}
.field input:focus,.field select:focus{outline:none;border-color:var(--cyan)}
.disclaimer{margin-top:18px;font-size:12px;color:#6f8494;text-align:center;line-height:1.6}
.thrive-panel ul{margin:12px 0 0;padding-left:20px;color:#b7c5cf;line-height:1.9}
.reflection-panel p{font-family:Georgia,serif;font-style:italic;font-size:20px;color:#dce8f0;margin:12px 0 0}
.behavior-insight-panel{border-left:3px solid var(--gold)}
.behavior-insight-panel p{color:#e8dcc8;line-height:1.7;margin:10px 0 0;font-size:16px}
.qr-block{text-align:center;padding:16px}
.qr-block #resultQr{display:inline-block;padding:10px;background:#fff;border-radius:12px;line-height:0}
.qr-block .hint-text{color:var(--muted);font-size:12px;margin-top:8px}
.cta-block{text-align:center;padding:20px;color:#b8c7d2}
.cta-block a{color:var(--cyan);font-weight:700;text-decoration:none}
.error-banner{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(248,113,113,.14);border:1px solid rgba(248,113,113,.5);color:#fca5a5;padding:12px 20px;border-radius:12px;z-index:999;font-size:14px}
@media(max-width:900px){.identity-fields{grid-template-columns:1fr}.identity-fields .field:first-child{grid-column:1/2}}

/* --- Pack Your Bag (bag) --- */
.bag-visual{width:150px;height:150px;margin:6px auto 22px;position:relative;border-radius:24px;background:radial-gradient(circle at 35% 25%,#2a4256,#0c1a26 75%);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bag-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,rgba(246,189,101,.4),rgba(246,189,101,.05));transition:height .35s ease}
.bag-icon{font-size:44px;position:relative;z-index:1}
.bag-capacity{position:relative;z-index:1;font-weight:800;color:var(--gold);font-size:13px;margin-top:6px}
.bag-item.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(246,189,101,.18) inset}

/* --- Position Yourself (position) --- */
.position-stage{position:relative;min-height:380px;border-radius:20px;border:1px solid var(--line);background:radial-gradient(circle at 30% 20%,rgba(111,120,255,.18),transparent 55%),radial-gradient(circle at 75% 70%,rgba(66,232,224,.12),transparent 50%),#0a1826;background-size:cover;background-position:center;overflow:hidden}
.position-zone{position:absolute;border:1px dashed rgba(255,255,255,.28);border-radius:16px;background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:.2s ease;padding:8px}
.position-zone:hover{border-color:var(--cyan);background:rgba(66,232,224,.12)}
.position-zone.picked{border-style:solid;border-color:var(--gold);background:rgba(246,189,101,.16)}
.position-zone:disabled{pointer-events:none;opacity:.55}
.position-marker{font-size:26px}
.position-label{font-size:12px;font-weight:800;text-align:center}

/* --- Cross the Bridge (bridge_sacrifice) --- */
.bridge-planks{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.plank{width:44px;height:14px;border-radius:3px;background:linear-gradient(180deg,#5a3c22,#2c1c0f);border:1px solid rgba(255,255,255,.1);opacity:.4;transition:.3s ease}
.plank.stable{opacity:1;background:linear-gradient(180deg,#73e6a2,#2f8a5a);box-shadow:0 0 10px rgba(115,230,162,.4)}
.bridge-status{text-align:center;color:var(--muted);font-size:14px;margin:0 0 18px}
.bridge-item.selected{border-color:#ff8a7a;box-shadow:0 0 0 2px rgba(255,138,122,.18) inset}

/* --- Risk or Reward (risk_reward) --- */
.risk-stage{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.risk-box{width:190px;padding:26px 18px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.22s ease}
.risk-box:hover{transform:translateY(-4px)}
.risk-box.mystery{border-color:rgba(246,189,101,.5);box-shadow:0 0 24px rgba(246,189,101,.12)}
.risk-box.safe{border-color:rgba(111,120,255,.5)}
.risk-box.picked{border-color:var(--cyan)}
.risk-box:disabled{opacity:.5;pointer-events:none}
.risk-box-icon{font-size:38px}
.risk-box-sub{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.risk-reveal{text-align:center;margin-top:18px;font-size:20px;font-weight:900;color:var(--gold);opacity:0;transform:translateY(6px);transition:.35s ease}
.risk-reveal.show{opacity:1;transform:translateY(0)}

@media(max-width:640px){
  .position-stage{min-height:320px}
  .risk-box{width:100%;max-width:260px}
  .bag-visual{width:110px;height:110px;margin-bottom:16px}
  .bag-icon{font-size:32px}
  .bag-capacity{font-size:11px}
  .position-zone{padding:4px}
  .position-marker{font-size:20px}
  .position-label{font-size:10px}
  .bridge-planks{gap:4px}
  .plank{width:30px;height:11px}
  .bridge-status{font-size:12px}
  .portal-stage{gap:14px}
  .portal-mini{width:100px;height:130px}
  .portal-ring-mini.rp1{width:76px;height:120px}
  .portal-ring-mini.rp2{width:64px;height:106px}
  .portal-ring-mini.rp3{width:53px;height:92px}
  .portal-core-mini{width:42px;height:78px}
}

/* --- Mirror Choice (mirror) --- */
.mirror-stage{display:flex;gap:20px;justify-content:center;margin-top:14px}
.mirror-panel{flex:1;max-width:280px;padding:40px 22px;border-radius:20px 20px 40px 40px;border:1px solid rgba(169,138,255,.4);background:linear-gradient(180deg,rgba(111,120,255,.14),rgba(10,20,32,.9));color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:14px;transition:.25s ease;position:relative;overflow:hidden}
.mirror-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);transform:translateX(-100%);transition:.6s ease}
.mirror-panel:hover:before{transform:translateX(100%)}
.mirror-panel:hover{border-color:var(--cyan);transform:translateY(-3px)}
.mirror-panel.picked{border-color:var(--cyan);box-shadow:0 0 30px rgba(66,232,224,.25)}
.mirror-panel:disabled{opacity:.5;pointer-events:none}
.mirror-icon{font-size:40px}
.mirror-panel b{font-size:16px;text-align:center}
@media(max-width:640px){.mirror-stage{flex-direction:column;align-items:center}}

/* --- Choose a Portal (portal) --- */
.portal-stage{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.portal-pick{background:none;border:none;color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px;transition:.25s ease}
.portal-pick:hover{transform:translateY(-4px)}
.portal-pick.picked .portal-core-mini{box-shadow:0 0 60px rgba(137,84,255,.6)}
.portal-pick:disabled{opacity:.45;pointer-events:none}
.portal-mini{width:130px;height:170px;position:relative;display:grid;place-items:center}
.portal-ring-mini{position:absolute;border:1px solid rgba(255,211,141,.6);border-radius:50% 50% 44% 44% / 40% 40% 60% 60%;filter:drop-shadow(0 0 10px rgba(255,185,95,.35))}
.portal-ring-mini.rp1{width:100px;height:158px}
.portal-ring-mini.rp2{width:84px;height:140px;opacity:.55}
.portal-ring-mini.rp3{width:70px;height:122px;opacity:.35}
.portal-core-mini{width:56px;height:104px;border-radius:50% 50% 44% 44% / 40% 40% 60% 60%;background:radial-gradient(circle at 50% 45%,#fff4ca 0,#ffc26a 25%,#8b54ff 60%,transparent 72%);box-shadow:0 0 34px rgba(137,84,255,.35);transition:.4s ease}
.portal-pick b{font-size:14px}

/* --- Mask Build / Mask Hide (mask_build, mask_hide) --- */
.mask-build-stage,.mask-hide-stage{display:flex;flex-direction:column;align-items:center;gap:20px}
.mask-build-visual,.mask-hide-visual{width:150px;height:196px}
.mask-build-visual .mask,.mask-hide-visual .mask{width:100%;height:100%}
.mask-hide-item.selected{border-color:rgba(148,163,184,.5);opacity:.45;filter:grayscale(.6)}

/* --- Keep or Sacrifice burn animation (multi_select) --- */
.pickcard.kept{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(66,232,224,.18) inset}
.pickcard.burning{animation:burn-away .6s ease forwards}
@keyframes burn-away{0%{filter:none;opacity:1;transform:scale(1)}40%{filter:sepia(1) saturate(4) hue-rotate(-40deg) brightness(.9)}100%{filter:sepia(1) saturate(4) hue-rotate(-40deg) brightness(.4);opacity:0;transform:scale(.85)}}

/* --- Rank/Arrange drag-to-reorder (ranking, build_path) --- */
.slot.filled{cursor:grab;touch-action:none;transition:.15s ease}
.slot.filled:active{cursor:grabbing}
.slot.dragging{opacity:.5;border-style:solid;border-color:var(--gold)}
.slot.drop-target{border-color:var(--cyan);background:rgba(66,232,224,.14);transform:scale(1.03)}
.drag-hint{text-align:center;font-size:12px;color:var(--muted);margin:-8px 0 8px}