:root {
  --night: #160b21;
  --panel: rgba(40, 21, 55, .82);
  --line: rgba(217, 246, 83, .16);
  --cyan: #d9f653;
  --coral: #ff766f;
  --lime: #d9f653;
  --violet: #6335e8;
  --aubergine: #281537;
  --apricot: #ffac80;
  --text: #f7f5ff;
  --muted: #b9abc7;
  --radius: 24px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 18%, rgba(54, 231, 255, .10), transparent 31rem),
    linear-gradient(145deg, #070c1c 0%, #0a1024 55%, #090f1e 100%);
  font-family: "DM Sans", sans-serif;
}
.controller-world { min-height: 100dvh; position: relative; overflow: hidden; background: linear-gradient(rgba(3,8,22,.72),rgba(3,8,22,.88)), url('assets/digital-world-v1.png') center/cover fixed; }
.world-grain { position: fixed; inset: 0; pointer-events: none; opacity: .13; mix-blend-mode: screen; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.06) 4px); }
button, input, textarea { font: inherit; }
button { color: inherit; }

.shell { min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
.controller { max-width: 540px; margin: 0 auto; }
.app-nav { display:flex; align-items:center; gap:6px; padding:5px; margin:0 0 24px; border:1px solid rgba(142,214,255,.18); border-radius:14px; background:rgba(4,12,28,.7); backdrop-filter:blur(16px); }
.app-nav button { flex:1; min-height:42px; border:0; border-radius:10px; color:var(--muted); background:transparent; cursor:pointer; font-size:12px; font-weight:700; }
.app-nav button span { color:var(--cyan); font:700 9px "Space Mono"; margin-right:7px; }
.app-nav button.active { color:#06111f; background:var(--cyan); box-shadow:0 0 20px rgba(54,231,255,.2); }
.app-nav button.active span { color:#06111f; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.brand { font: 700 13px/1 "Space Mono"; letter-spacing: .16em; text-transform: uppercase; display:flex; align-items:center; gap:9px; }
.brand i { width: 19px; height: 19px; display:block; transform: rotate(45deg); border: 2px solid var(--cyan); box-shadow: 0 0 16px rgba(54,231,255,.7), inset 0 0 8px rgba(54,231,255,.35); }
.signal { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.signal::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.eyebrow { margin: 0 0 10px; color: var(--cyan); font: 700 11px/1.4 "Space Mono"; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(28px, 8vw, 42px); line-height: 1.02; letter-spacing: -.045em; }
.muted { color: var(--muted); }

.card {
  background: linear-gradient(145deg, rgba(19, 33, 62, .92), rgba(11, 20, 41, .86));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.03);
}
.controller-intro { text-shadow: 0 3px 20px rgba(0,0,0,.55); }
.device { position:relative; margin:26px -4px 16px; padding: 23px 18px 18px; border-radius: 38px 38px 58px 58px; background: linear-gradient(145deg,#374568,#172443 58%,#0b142b); border:1px solid rgba(174,218,255,.3); box-shadow: 0 32px 80px rgba(0,0,0,.5), inset 0 2px rgba(255,255,255,.18), inset 0 -5px 0 rgba(0,0,0,.25); }
.device::before { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.08); border-radius:31px 31px 50px 50px; pointer-events:none; }
.screw { position:absolute; width:7px; height:7px; border-radius:50%; background:#8290aa; box-shadow:inset 0 1px white,0 1px 3px #000; z-index:2; }
.s1{left:16px;top:16px}.s2{right:16px;top:16px}.s3{left:18px;bottom:18px}.s4{right:18px;bottom:18px}
.device-led { position:absolute; right:35px; top:13px; width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime); }
.device-companion { position:absolute; z-index:3; top:-30px; right:20px; width:96px; height:82px; display:grid; place-items:center; pointer-events:none; }
.device-companion::before { content:""; position:absolute; inset:24px 5px 0; border:1px solid rgba(54,231,255,.32); background:radial-gradient(circle,rgba(54,231,255,.2),rgba(4,12,28,.2) 68%); clip-path:polygon(12% 0,100% 0,88% 100%,0 100%); }
.device-companion img { position:relative; width:82px; height:72px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 9px 12px rgba(0,0,0,.5)); animation:breathe 3.2s ease-in-out infinite; }
.device-companion span { position:absolute; right:5px; bottom:-4px; padding:3px 7px; color:var(--lime); background:#081325; border:1px solid rgba(198,244,77,.35); font:700 7px "Space Mono"; letter-spacing:.1em; text-transform:uppercase; }
.guide-bubble { position:relative;margin:10px 10px -3px;padding:9px 12px 9px 35px;color:#c8d5e8;background:rgba(3,11,25,.75);border-left:2px solid var(--lime);font:700 10px/1.4 "Space Mono"; }
.guide-bubble::before { content:"◆";position:absolute;left:13px;color:var(--lime); }
.mission-card { padding: 22px; margin: 0 0 16px; overflow: hidden; position: relative; border-radius:22px; background: linear-gradient(145deg,rgba(7,20,38,.98),rgba(9,41,56,.94)); box-shadow:inset 0 0 35px rgba(54,231,255,.07); }
.mission-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -70px; bottom: -90px; border-radius: 50%; background: var(--cyan); filter: blur(70px); opacity: .16; }
.challenge-index { color: var(--muted); font: 12px "Space Mono"; margin-bottom: 18px; }
.question { font-size: clamp(24px, 7vw, 36px); line-height: 1.12; letter-spacing: -.035em; min-height: 108px; }
.timer-row { display: flex; align-items: end; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; }
.timer { font: 700 clamp(48px, 16vw, 78px)/.9 "Space Mono"; letter-spacing: -.08em; }
.status-chip { padding: 9px 11px; border-radius: 999px; background: rgba(54,231,255,.1); color: var(--cyan); font: 700 10px "Space Mono"; letter-spacing: .08em; text-transform: uppercase; }
.status-chip.critical { color: var(--coral); background: rgba(255,118,111,.1); }
.progress { height: 5px; margin-top: 18px; background: rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: var(--progress); background: linear-gradient(90deg, var(--cyan), var(--lime)); box-shadow: 0 0 16px var(--cyan); transition: width .5s ease; }

.primary {
  width: 100%; min-height: 64px; border: 0; border-radius: 20px; background: var(--cyan); color: #03101d;
  font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 12px 35px rgba(54,231,255,.18); transition: transform .18s ease, filter .18s ease;
}
.primary:active, .action:active { transform: scale(.98); }
.primary.pause { background: #ecf6ff; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.action { min-height: 82px; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 19px; background: rgba(14, 25, 48, .72); cursor: pointer; }
.action span { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.action.accent { color: var(--lime); }
.footer-action { width: 100%; border: 0; background: transparent; color: var(--muted); padding: 16px; cursor: pointer; }
.mission-todo-button { width:100%;min-height:66px;display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;padding:12px 16px;margin:0 0 12px;border:1px solid rgba(198,244,77,.27);border-radius:18px;background:linear-gradient(90deg,rgba(198,244,77,.09),rgba(7,18,36,.75));cursor:pointer; }
.mission-todo-button span { font-weight:800; }.mission-todo-button b { grid-row:1/3;grid-column:2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--lime);color:#091421;font:700 18px "Space Mono"; }.mission-todo-button i { color:var(--muted);font-size:11px;font-style:normal; }

.projector { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; padding: clamp(24px, 3.4vw, 58px); position: relative; background:#050a16; }
.world-bg { position:absolute; inset:-2%; background:url('assets/digital-world-v1.png') center/cover; transform:scale(1.04); animation:worldDrift 18s ease-in-out infinite alternate; }
.world-vignette { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,7,20,.94) 0%,rgba(3,9,24,.8) 33%,rgba(4,9,23,.16) 65%,rgba(3,8,19,.25)),linear-gradient(0deg,rgba(3,7,18,.8),transparent 35%,rgba(2,7,18,.25)); }
.scanlines { position:absolute;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(123,229,255,.15) 4px); }
.data-rain { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.data-rain i { position:absolute;width:5px;height:5px;background:var(--cyan);box-shadow:0 0 12px var(--cyan);opacity:0;animation:dataFall 6s linear infinite; }
.data-rain i:nth-child(1){left:8%;animation-delay:1s}.data-rain i:nth-child(2){left:29%;animation-delay:4s}.data-rain i:nth-child(3){left:62%;animation-delay:2s}.data-rain i:nth-child(4){left:75%;animation-delay:5s}.data-rain i:nth-child(5){left:91%;animation-delay:.3s}.data-rain i:nth-child(6){left:47%;animation-delay:3.2s}
.projector-head { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.projector-head-status { display:grid;justify-items:end;gap:9px; }
.head-progress { display:flex;align-items:center; }
.mission-name { font: 700 13px "Space Mono"; letter-spacing: .1em; text-transform: uppercase; padding-left:16px; border-left:3px solid var(--cyan); text-shadow:0 2px 15px #000; }
.mission-name span { display:block; color:var(--cyan); font-size:9px; letter-spacing:.2em; margin-bottom:6px; }
.projector-todo-status { margin-left:auto;margin-right:22px;padding:8px 12px;border-left:1px solid rgba(198,244,77,.45);background:rgba(4,12,28,.48);font:700 10px "Space Mono";text-transform:uppercase;letter-spacing:.08em;color:var(--muted); }.projector-todo-status b{color:var(--lime);margin-left:10px;font-size:14px;}
.steps { display: flex; gap: 7px; }
.step { width: 46px; height: 30px; display:grid;place-items:center;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);background:rgba(4,12,28,.72);border-top:2px solid rgba(255,255,255,.16); }
.step b { font:700 9px "Space Mono"; color:rgba(255,255,255,.35); }
.step.done { background: var(--lime); box-shadow: 0 0 12px rgba(198,244,77,.65); }
.step.current { background: var(--cyan); box-shadow: 0 0 12px rgba(54,231,255,.65); }
.step.done b,.step.current b{color:#07101e}
.evolution-roster { display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid rgba(113,211,255,.18);background:rgba(3,10,24,.68);clip-path:polygon(0 0,96% 0,100% 25%,100% 100%,0 100%); }
.roster-label { margin-right:3px;color:var(--muted);font:700 7px "Space Mono";letter-spacing:.13em;text-transform:uppercase; }
.roster-form { position:relative;width:42px;height:39px;display:grid;place-items:center;border:1px solid rgba(54,231,255,.2);background:radial-gradient(circle,rgba(54,231,255,.12),rgba(3,10,24,.9));clip-path:polygon(10% 0,100% 0,90% 100%,0 100%); }
.roster-form img { width:37px;height:35px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 5px #000); }
.roster-form.form-1 img { clip-path:inset(0 11% 0 0); }
.roster-form.form-1,.roster-form.form-2 { background:radial-gradient(circle,rgba(54,231,255,.12),rgba(3,10,24,.9));box-shadow:none; }
.roster-form.form-1.current,.roster-form.form-2.current { box-shadow:0 0 16px rgba(198,244,77,.28); }
.roster-form i { position:absolute;right:2px;top:2px;width:12px;height:12px;display:grid;place-items:center;background:#071122;color:var(--lime);font:700 7px "Space Mono";font-style:normal; }
.roster-form small { position:absolute;left:2px;bottom:1px;color:var(--cyan);font:700 6px "Space Mono"; }
.roster-form.locked { border-color:rgba(143,161,189,.14);background:rgba(3,7,17,.82); }
.roster-form.locked img { filter:grayscale(1) brightness(.16) contrast(1.4);opacity:.72; }
.roster-form.locked i { color:#728098;border:1px solid rgba(143,161,189,.2); }
.roster-form.current { border-color:var(--lime);box-shadow:0 0 16px rgba(198,244,77,.28); }
.projector-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 5vw; align-items: center; position: relative; z-index: 1; }
.projector-copy { align-self:center; padding:28px 0; }
.projector-copy h1 { font-size: clamp(48px, 6.2vw, 104px); max-width: 12ch; line-height: .95; margin: 0; text-wrap:balance; text-shadow:0 5px 35px rgba(0,0,0,.95); }
.projector-copy h1.question-short { font-size:clamp(60px,7.2vw,122px);max-width:11ch; }
.projector-copy h1.question-medium { font-size:clamp(52px,6.2vw,104px);max-width:13ch; }
.projector-copy h1.question-long { font-size:clamp(42px,5.1vw,84px);max-width:15ch;line-height:1; }
.projector-copy .eyebrow { margin-bottom: 24px; }
.quest-tag { display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;padding:8px 13px 8px 9px;background:rgba(7,17,35,.76);border:1px solid rgba(115,225,255,.32);clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%);font:700 10px "Space Mono";letter-spacing:.13em;text-transform:uppercase; }
.quest-tag i { width:15px;height:15px;transform:rotate(45deg);border:2px solid var(--coral);box-shadow:0 0 10px var(--coral); }
.question-signal { margin-top:30px;padding-left:18px;border-left:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.04em;text-shadow:0 2px 12px #000; }
.question-signal b{color:var(--lime);font:700 9px "Space Mono";letter-spacing:.14em;text-transform:uppercase;margin-right:8px}.question-signal span{display:inline-block;width:6px;height:6px;background:var(--lime);margin-right:9px;box-shadow:0 0 10px var(--lime);}
.creature-stage { min-height: 48vh; display: grid; place-items: end center; position: relative; isolation: isolate; align-self:end; padding-bottom:clamp(20px,3vh,50px); }
.creature-stage::before { content: ""; position: absolute; width: min(30vw, 430px); aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--glow, var(--cyan)) 24%, transparent); filter: blur(48px); z-index: -1; animation: aura 3s ease-in-out infinite; }
.creature-window { width: min(34vw, 540px); height: min(34vw, 540px); overflow: visible; position: relative; }
.creature-guide { position:absolute;z-index:3;top:4%;right:4%;max-width:220px;padding:10px 13px;color:#dbe9f8;background:rgba(4,13,29,.82);border:1px solid rgba(54,231,255,.35);clip-path:polygon(0 0,94% 0,100% 22%,100% 100%,8% 100%,0 78%);font:700 9px/1.5 "Space Mono";letter-spacing:.03em;opacity:0;translate:0 8px;animation:guideIn .5s 1.2s forwards; }
.creature-sheet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 28px 38px rgba(0,0,0,.35)); animation: breathe 2.8s ease-in-out infinite; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.stage-0 .creature-sheet { transform: scale(.86); }
.stage-1 .creature-sheet { transform: scale(.93); clip-path:inset(0 11% 0 0); }
.stage-2 .creature-sheet { transform: scale(.98); }
.critical .creature-sheet { animation: critical 4.2s ease-in-out infinite; }
.evolving .creature-stage { animation: flash 1.7s ease both; }
.evolving .creature-sheet { animation: evolve 1.7s cubic-bezier(.2,.8,.2,1) both; }
.projector-foot { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 28px; position: relative; z-index: 2; padding:14px 18px 10px; background:linear-gradient(90deg,rgba(3,11,26,.82),rgba(5,14,29,.48));border-top:1px solid rgba(111,218,255,.3);clip-path:polygon(0 0,97% 0,100% 30%,100% 100%,0 100%); }
.timer-lockup>span{display:block;color:var(--cyan);font:700 8px "Space Mono";letter-spacing:.17em;text-transform:uppercase;margin-bottom:7px}
.projector-timer { font: 700 clamp(56px, 8vw, 132px)/.8 "Space Mono"; letter-spacing: -.1em; }
.projector-progress { height: 8px; background: rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
.projector-progress i { display: block; width: var(--progress); height: 100%; background: var(--state-color, var(--cyan)); box-shadow: 0 0 20px var(--state-color, var(--cyan)); transition: width .5s, background .5s; }
.stage-label { color: var(--muted); text-align: right; font: 12px/1.5 "Space Mono"; text-transform: uppercase; letter-spacing: .1em; }
.stage-label strong { display: block; color: var(--text); font-size: 15px; }
.scene-ready .world-bg { filter:saturate(.78) brightness(.76); }
.scene-ready .data-rain { opacity:.45; }
.scene-discussion .world-vignette { background:linear-gradient(90deg,rgba(2,7,20,.96),rgba(3,9,24,.78) 34%,rgba(4,9,23,.1) 68%),linear-gradient(0deg,rgba(3,7,18,.82),transparent 38%); }
.scene-discussion .quest-tag { border-color:rgba(54,231,255,.55); }
.scene-critical { --state-color:var(--coral); }
.scene-critical .world-bg { filter:saturate(.82) hue-rotate(-9deg) brightness(.72); }
.scene-critical .world-vignette { background:linear-gradient(90deg,rgba(13,5,18,.97),rgba(27,7,18,.68) 44%,rgba(255,118,111,.08)),linear-gradient(0deg,rgba(11,3,15,.88),transparent 48%); }
.scene-critical .quest-tag,.scene-critical .projector-foot { border-color:rgba(255,118,111,.5); }
.scene-critical .projector-copy .eyebrow { color:var(--coral); }
.scene-decision .projector-main,.scene-decision .projector-head,.scene-decision .projector-foot { filter:brightness(.45) saturate(.65); }
.scene-decision .overlay { background:radial-gradient(circle at 50% 42%,rgba(54,231,255,.12),rgba(2,6,16,.91) 58%); }
.stage-entry { position:fixed;inset:0;z-index:10;display:grid;place-items:center;align-content:center;gap:12px;background:#030817;animation:stageReveal 1.7s ease forwards;pointer-events:none; }
.stage-entry i { width:76px;height:76px;border:3px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 45px rgba(54,231,255,.65),inset 0 0 30px rgba(54,231,255,.22);animation:entryPortal 1.2s ease both; }
.stage-entry span { margin-top:26px;color:var(--cyan);font:700 10px "Space Mono";letter-spacing:.2em;text-transform:uppercase; }
.stage-entry b { font:700 58px/1 "Space Mono"; }

.overlay { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 24px; background: rgba(3,7,17,.82); backdrop-filter: blur(14px); }
.modal { width: min(100%, 500px); padding: 24px; }
.modal textarea { width: 100%; min-height: 130px; resize: vertical; border-radius: 16px; border: 1px solid var(--line); background: rgba(4,10,24,.75); color: var(--text); padding: 16px; margin: 12px 0; outline: none; }
.modal textarea:focus { border-color: var(--cyan); }
.modal-field { width:100%;min-height:52px;margin:7px 0;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:rgba(4,10,24,.75);color:var(--text);outline:none; }.modal-field:focus{border-color:var(--cyan)}
.todo-meta { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.modal-divider { display:flex;align-items:center;gap:10px;margin:4px 0;color:var(--lime);font:700 9px "Space Mono";letter-spacing:.1em;text-transform:uppercase; }.modal-divider::before,.modal-divider::after{content:"";height:1px;flex:1;background:rgba(198,244,77,.2)}
.modal-title-row{display:flex;justify-content:space-between;align-items:start}.modal-close{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.todo-modal{width:min(100%,620px)}.mission-todo-list{display:grid;gap:8px;max-height:55vh;overflow:auto;margin:12px 0 18px;padding-right:4px}
.todo-row { display:grid;grid-template-columns:32px 1fr 30px 30px;align-items:center;gap:7px;padding:10px;border:1px solid rgba(142,210,255,.12);border-radius:12px;background:rgba(7,17,35,.62); }
.todo-row>button:first-child { width:27px;height:27px;border:1px solid rgba(198,244,77,.4);border-radius:8px;background:rgba(198,244,77,.06);color:#07101e;cursor:pointer; }.todo-row.done>button:first-child{background:var(--lime)}
.todo-row>button:nth-last-child(-n+2) { width:28px;height:28px;border:0;border-radius:7px;background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;font-size:15px}.todo-row>button:nth-last-child(-n+2):hover{color:var(--cyan);background:rgba(54,231,255,.1)}.todo-row b{display:block;font-size:13px}.todo-row span{display:block;margin-top:3px;color:var(--muted);font-size:10px}.todo-row.done b{text-decoration:line-through;color:var(--muted)}
.empty-todos{margin:0;padding:11px;border:1px dashed rgba(143,161,189,.2);border-radius:11px;color:var(--muted);font-size:11px}.empty-todos.large{padding:25px;text-align:center}
.modal-actions { display: flex; gap: 10px; }
.secondary { min-height: 54px; border-radius: 16px; padding: 0 18px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.modal .primary { min-height: 54px; }
.evolution-message { text-align: center; }
.evolution-message b { display: block; font: 700 clamp(48px,10vw,120px)/1 "Space Mono"; color: var(--lime); text-shadow: 0 0 50px rgba(198,244,77,.5); }
.evolution-scene{overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(54,231,255,.24),rgba(4,8,20,.94) 48%,#020611 78%);backdrop-filter:blur(8px)}
.evolution-scene::before,.evolution-scene::after{content:"";position:absolute;inset:50%;width:70vmin;height:70vmin;translate:-50% -50%;border:2px solid rgba(54,231,255,.25);border-radius:50%;box-shadow:0 0 50px rgba(54,231,255,.18),inset 0 0 50px rgba(54,231,255,.1);animation:evolutionRing 2.4s ease-in-out infinite}
.evolution-scene::after{width:48vmin;height:48vmin;border-style:dashed;animation-direction:reverse;animation-duration:3s}
.evolution-forms{position:relative;z-index:2;width:min(95vw,1500px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,4vw,70px)}
.old-form,.new-form{height:min(68vh,720px);display:grid;grid-template-rows:1fr auto;place-items:center;position:relative}.old-form{opacity:.34;filter:grayscale(.45) brightness(.7);animation:oldFormOut 4.2s ease both}.new-form{animation:newFormIn 4.2s cubic-bezier(.16,1,.3,1) both}
.old-form img,.new-form img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 30px 45px rgba(0,0,0,.55))}.new-form img{filter:drop-shadow(0 0 35px rgba(198,244,77,.5)) drop-shadow(0 30px 45px rgba(0,0,0,.55))}
.old-form span,.new-form span{padding:9px 16px;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:rgba(4,12,28,.72);font:700 11px "Space Mono";letter-spacing:.14em;text-transform:uppercase}.new-form span{color:var(--lime);border-color:rgba(198,244,77,.4)}
.evolution-core{text-align:center}.evolution-core small{display:block;color:var(--cyan);font:700 10px "Space Mono";letter-spacing:.2em;text-transform:uppercase}.evolution-core b{display:block;margin:12px 0;color:var(--lime);font:700 clamp(38px,6vw,86px)/.9 "Space Mono";text-shadow:0 0 45px rgba(198,244,77,.55)}.evolution-core em{display:block;color:var(--cyan);font:700 42px "Space Mono";font-style:normal;animation:corePulse .7s ease-in-out infinite alternate}
.evolution-energy{position:absolute;inset:0;display:grid;place-items:center}.evolution-energy i{position:absolute;width:10px;height:10px;background:var(--cyan);box-shadow:0 0 22px var(--cyan);animation:energyOrbit 2s linear infinite}.evolution-energy i:nth-child(2){animation-delay:-.7s;background:var(--lime)}.evolution-energy i:nth-child(3){animation-delay:-1.3s;background:var(--coral)}
.projector-controls { position:fixed; z-index:8; left:50%; bottom:14px; translate:-50% 0; display:flex; gap:5px; padding:6px; border:1px solid rgba(145,222,255,.27); border-radius:17px; background:rgba(3,10,24,.82); backdrop-filter:blur(18px); box-shadow:0 12px 45px rgba(0,0,0,.45); opacity:.18; transition:opacity .2s,translate .2s; }
.projector-controls:hover,.projector-controls:focus-within { opacity:1; translate:-50% -5px; }
.projector-controls button { min-width:43px; height:43px; padding:0 12px; border:0; border-radius:11px; background:rgba(255,255,255,.07); color:var(--text); cursor:pointer; font:700 12px "Space Mono"; }
.projector-controls button:hover { background:rgba(54,231,255,.2); }
.projector-controls .control-main { color:#06111f; background:var(--cyan); font-size:16px; }

.builder-world { min-height:100dvh; padding:28px; color:var(--text); background:linear-gradient(90deg,rgba(3,8,22,.96),rgba(3,8,22,.82)),url('assets/digital-world-v1.png') center/cover fixed; }
.builder-shell { max-width:1280px; margin:auto; }
.builder-head { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:28px 0 36px; }
.builder-head h1 { font-size:clamp(42px,6vw,78px); margin:0 0 12px; }
.builder-head p:last-child { color:var(--muted); margin:0; }
.route-map-wrap { position:relative;margin:0 0 28px;padding:14px 16px 4px;border:1px solid rgba(54,231,255,.15);background:linear-gradient(90deg,rgba(5,15,34,.78),rgba(10,28,47,.54));clip-path:polygon(0 0,98.5% 0,100% 18%,100% 100%,1.5% 100%,0 82%); }
.route-map { position:relative;display:flex;align-items:center;gap:10px;overflow-x:auto;padding:12px 3px 26px;scrollbar-width:thin; }
.route-map::before { content:"";position:absolute;left:35px;right:35px;top:50%;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(54,231,255,.22),var(--lime));box-shadow:0 0 13px rgba(54,231,255,.25); }
.route-map>em{position:relative;z-index:1;color:rgba(54,231,255,.6);font:700 18px "Space Mono";font-style:normal}
.route-start,.route-end { position:relative;z-index:1;flex:0 0 54px;display:grid;place-items:center;gap:6px;color:var(--muted);font:700 8px "Space Mono";text-transform:uppercase; }
.route-start i,.route-end i { width:20px;height:20px;border:3px solid var(--cyan);background:#071122;transform:rotate(45deg);box-shadow:0 0 16px rgba(54,231,255,.45); }
.route-end i { border-color:var(--lime);box-shadow:0 0 16px rgba(198,244,77,.45); }
.route-evolution { position:relative;z-index:2;flex:0 0 74px;display:grid;place-items:center;margin:0 -3px;color:var(--lime);font:700 8px "Space Mono";letter-spacing:.08em;text-transform:uppercase; }
.route-evolution::before { content:"";position:absolute;width:66px;height:66px;border:1px solid rgba(198,244,77,.38);background:radial-gradient(circle,rgba(198,244,77,.2),#071122 68%);transform:rotate(45deg);box-shadow:0 0 24px rgba(198,244,77,.16); }
.route-evolution img { position:relative;width:58px;height:54px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 8px 10px #000); }
.route-evolution>i { position:absolute;z-index:3;right:4px;top:2px;width:18px;height:18px;display:grid;place-items:center;border:1px solid rgba(198,244,77,.35);background:#071122;color:var(--lime);font-style:normal; }
.route-evolution span { position:relative;margin-top:5px;padding:2px 5px;background:#071122; }
.route-evolution.locked::before { border-color:rgba(143,161,189,.22);box-shadow:none;background:rgba(4,10,23,.94); }
.route-evolution.locked img { filter:grayscale(1) brightness(.18) contrast(1.5);opacity:.82; }
.route-evolution.locked>i,.route-evolution.locked span { color:#718099;border-color:rgba(143,161,189,.2); }
.route-node{position:relative;z-index:1;flex:0 0 176px;min-height:118px;padding:13px 14px;border:1px solid rgba(54,231,255,.28);border-radius:4px;background:linear-gradient(145deg,rgba(12,29,51,.97),rgba(5,14,31,.95));text-align:left;cursor:pointer;clip-path:polygon(0 0,91% 0,100% 15%,100% 100%,9% 100%,0 85%);box-shadow:0 13px 28px rgba(0,0,0,.26)}
.route-node:hover{translate:0 -4px;border-color:var(--cyan)}
.route-node.selected { outline:2px solid #fff;outline-offset:3px;translate:0 -5px; }
.route-node span{display:block;color:var(--cyan);font:700 9px "Space Mono";text-transform:uppercase;letter-spacing:.08em}.route-node strong{display:-webkit-box;min-height:34px;margin:8px 0 9px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.35}.route-node b{display:inline-block;margin:0 8px 0 0;font:700 11px "Space Mono"}.route-node i{color:var(--muted);font-size:9px;font-style:normal}.route-node.form-1{border-color:#ff766f;background:linear-gradient(145deg,#ff827b,#e95f62);color:#07101e;box-shadow:0 0 20px rgba(255,118,111,.25)}.route-node.form-2{border-color:#c6f44d;background:linear-gradient(145deg,#d4ff62,#a8d932);color:#07101e;box-shadow:0 0 20px rgba(198,244,77,.25)}.route-node.form-1 span,.route-node.form-1 i,.route-node.form-2 span,.route-node.form-2 i{color:#102034}.route-node.form-1 b,.route-node.form-2 b{color:#07101e}
.route-node u { display:block;margin-top:9px;padding-top:7px;border-top:1px solid currentColor;color:inherit;font:700 7px "Space Mono";letter-spacing:.12em;text-decoration:none;text-transform:uppercase;opacity:.7; }
.route-node.route-future { filter:saturate(.28) brightness(.5);opacity:.72; }
.route-node.route-done { filter:saturate(.65); }
.route-node.route-active { box-shadow:0 0 28px rgba(54,231,255,.32); }
.launch-button { min-height:58px; padding:0 22px; border:0; border-radius:16px; background:var(--lime); color:#0a1421; font-weight:800; cursor:pointer; white-space:nowrap; box-shadow:0 12px 30px rgba(198,244,77,.14); }
.launch-button b { margin-left:22px; }
.builder-grid { display:grid; grid-template-columns:330px minmax(0,1fr); gap:24px; align-items:start; }
.builder-summary,.challenge-builder { border:1px solid rgba(144,216,255,.17); border-radius:6px; background:rgba(5,14,31,.86); backdrop-filter:blur(20px); box-shadow:0 25px 70px rgba(0,0,0,.34); clip-path:polygon(0 0,96% 0,100% 22px,100% 100%,0 100%); }
.builder-summary { padding:22px; position:sticky; top:20px; }
.summary-orb { height:220px; display:grid; place-items:center; margin:-10px -10px 20px; border-radius:18px; overflow:hidden; background:radial-gradient(circle,rgba(54,231,255,.18),transparent 62%); }
.summary-orb img { width:80%;height:88%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.field-label,.editor-fields label { display:block; color:#91a4c0; font:700 9px "Space Mono"; letter-spacing:.12em; text-transform:uppercase; }
.builder-input,.editor-fields input,.editor-fields select { width:100%; min-height:48px; margin-top:8px; padding:0 13px; border:1px solid rgba(139,210,255,.18); border-radius:12px; outline:none; background:rgba(3,10,24,.8); color:var(--text); }
.builder-input:focus,.editor-fields input:focus,.editor-fields select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(54,231,255,.08); }
.mission-input { font-size:17px; font-weight:700; }
.mission-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:18px 0; }
.mission-stats div { padding:12px 6px;text-align:center;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025); }
.mission-stats b { display:block;font:700 20px "Space Mono";color:var(--cyan); }
.mission-stats span { color:var(--muted);font-size:10px; }
.builder-tip { margin:0;padding:14px;border-left:2px solid var(--lime);background:rgba(198,244,77,.05);color:var(--muted);font-size:12px;line-height:1.5; }
.builder-tip b { display:block;color:var(--lime);margin-bottom:3px; }
.summary-todos{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;padding:0 12px;border:1px solid rgba(198,244,77,.25);border-radius:11px;background:rgba(198,244,77,.06);color:var(--text);cursor:pointer;font-weight:700}.summary-todos b{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:var(--lime);color:#07101e;font:700 11px "Space Mono"}
.challenge-builder { padding:24px; }
.builder-focus { display:grid;gap:14px; }
.builder-preview { position:relative;min-height:210px;padding:24px 230px 24px 24px;overflow:hidden;border:1px solid rgba(54,231,255,.22);background:linear-gradient(90deg,rgba(2,8,22,.96),rgba(2,8,22,.3)),url('assets/digital-world-v1.png') center/cover;clip-path:polygon(0 0,97% 0,100% 18%,100% 100%,0 100%); }
.builder-preview>span { color:var(--cyan);font:700 9px "Space Mono";letter-spacing:.15em;text-transform:uppercase; }
.builder-preview strong { display:block;margin:18px 0 12px;font-size:clamp(22px,3vw,38px);line-height:1; }
.builder-preview small { color:#c3d0e2; }
.builder-preview img { position:absolute;right:18px;bottom:-15px;width:210px;height:210px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 18px 22px #000); }
.builder-warnings,.builder-valid { display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-left:2px solid var(--coral);background:rgba(255,118,111,.07);color:#ffaaa5;font:700 9px "Space Mono";text-transform:uppercase;letter-spacing:.06em; }
.builder-valid { border-color:var(--lime);background:rgba(198,244,77,.06);color:var(--lime); }
.builder-section-head { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px; }
.builder-section-head h2 { margin:0;font-size:28px; }
.small-button { min-height:42px;padding:0 15px;border:1px solid rgba(54,231,255,.35);border-radius:12px;background:rgba(54,231,255,.08);color:var(--cyan);cursor:pointer;font-weight:700; }
.challenge-list { display:grid;gap:12px; }
.challenge-editor { display:grid;grid-template-columns:58px minmax(0,1fr) 36px;gap:14px;padding:17px;border:1px solid rgba(148,216,255,.12);border-radius:4px;background:linear-gradient(110deg,rgba(20,35,61,.76),rgba(8,17,36,.78));clip-path:polygon(0 0,98.5% 0,100% 18px,100% 100%,0 100%); }
.editor-index { display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:6px;color:var(--cyan);font:700 13px "Space Mono"; }
.form-dot { width:12px;height:12px;transform:rotate(45deg);background:var(--cyan);box-shadow:0 0 13px var(--cyan); }
.form-1 { background:var(--coral);box-shadow:0 0 13px var(--coral); }.form-2 { background:var(--lime);box-shadow:0 0 13px var(--lime); }
.editor-fields { display:grid;gap:11px; }
.editor-fields input,.editor-fields select { min-height:42px; }
.editor-row { display:grid;grid-template-columns:150px 1fr;gap:11px; }
.editor-row label { position:relative; }.editor-row em { position:absolute;right:12px;bottom:13px;color:var(--muted);font-size:11px;font-style:normal; }
.editor-actions { display:flex;flex-direction:column;gap:5px; }
.editor-actions button { width:34px;height:34px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer; }
.editor-actions button:hover { color:var(--text);border-color:var(--cyan); }
.step-todos{padding-top:4px}.step-todos-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;color:#91a4c0;font:700 9px "Space Mono";letter-spacing:.12em;text-transform:uppercase}.step-todos .todo-row{margin-top:6px}.todo-compose{margin-top:8px;border:1px solid rgba(198,244,77,.22);border-radius:11px;background:rgba(198,244,77,.035)}.todo-compose summary{padding:10px 12px;color:var(--lime);font-size:11px;font-weight:800;cursor:pointer;list-style:none}.todo-compose summary::-webkit-details-marker{display:none}.todo-compose>div{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:7px;padding:0 9px 9px}.todo-compose input{min-width:0;min-height:38px;margin:0;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#050e20;color:var(--text)}.todo-compose button{min-height:38px;padding:0 12px;border:0;border-radius:9px;background:var(--lime);color:#07101e;font-weight:800;cursor:pointer}.projected-todos{max-width:760px;margin-top:16px;padding:12px 14px;border:1px solid rgba(198,244,77,.28);border-radius:5px;background:rgba(4,12,28,.7);backdrop-filter:blur(12px)}.projected-todos-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;color:var(--lime);font:700 9px "Space Mono";text-transform:uppercase;letter-spacing:.13em}.projected-todos-head b{display:grid;place-items:center;min-width:32px;height:22px;padding:0 7px;border-radius:4px;background:var(--lime);color:#07101e}.projected-todos-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px}.projected-todo{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:7px;margin:0;padding:7px;border:1px solid transparent;border-radius:4px;background:rgba(198,244,77,.1);color:#fff;text-align:left;font-size:11px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}.projected-todo:hover{border-color:rgba(198,244,77,.55);background:rgba(198,244,77,.17);transform:translateY(-1px)}.projected-todo i{display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--lime);border-radius:3px;font-size:9px;font-style:normal}.projected-todo b{color:var(--muted);font-weight:500}.projected-todo.done{text-decoration:line-through;color:var(--muted);background:rgba(143,161,189,.08)}.projected-todo.done i{background:var(--lime);color:#07101e;box-shadow:0 0 12px rgba(198,244,77,.4)}
.mission-complete { display:block; }
.mission-complete .world-bg { filter:saturate(1.15) brightness(.85); }
.mission-complete .world-vignette { background:linear-gradient(90deg,rgba(2,7,20,.96),rgba(3,9,24,.64) 50%,rgba(3,8,19,.1)); }
.completion-main { position:relative;z-index:2;min-height:calc(100dvh - clamp(48px,6.8vw,116px));display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);align-items:center;gap:5vw; }
.completion-copy h1 { margin:0;font-size:clamp(64px,8vw,138px);line-height:.87;max-width:8ch; }
.completion-copy>p:not(.eyebrow) { margin:22px 0;color:#c8d6e9;font-size:18px; }
.completion-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:700px;margin:24px 0; }
.completion-stats div { padding:13px;border-top:1px solid rgba(54,231,255,.35);background:rgba(4,13,29,.55); }
.completion-stats b { display:block;color:var(--lime);font:700 26px "Space Mono"; }
.completion-stats span { color:var(--muted);font-size:10px; }
.completion-summary { max-width:700px;padding:16px;border:1px solid rgba(54,231,255,.18);background:rgba(4,13,29,.7); }
.completion-summary h2 { margin:0 0 10px;font-size:16px; }
.completion-summary p { display:grid;grid-template-columns:34px 1fr;gap:8px;margin:6px 0;font-size:12px; }
.completion-summary strong { color:var(--cyan);font:700 10px "Space Mono"; }
.completion-actions { display:flex;gap:8px;margin-top:16px;max-width:700px; }.completion-actions .primary{width:auto;padding:0 22px}.completion-creature{position:relative;display:grid;place-items:center;align-self:stretch}.completion-creature img{position:relative;width:min(42vw,650px);height:min(68vh,760px);object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 42px rgba(198,244,77,.35)) drop-shadow(0 35px 45px #000);animation:finalArrival 1.2s cubic-bezier(.16,1,.3,1) both}.completion-creature span{position:absolute;bottom:8%;padding:8px 13px;background:#071122;border:1px solid rgba(198,244,77,.45);color:var(--lime);font:700 10px "Space Mono";letter-spacing:.15em}.final-aura{position:absolute;width:65%;aspect-ratio:1;border:2px solid rgba(198,244,77,.25);border-radius:50%;box-shadow:0 0 80px rgba(198,244,77,.28),inset 0 0 70px rgba(54,231,255,.12);animation:evolutionRing 5s linear infinite}

@keyframes breathe { 0%,100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -12px; rotate: 1deg; } }
@keyframes aura { 0%,100% { scale: .9; opacity: .55; } 50% { scale: 1.1; opacity: 1; } }
@keyframes critical { 0%,100% { translate:0 0; filter:drop-shadow(0 25px 38px rgba(0,0,0,.4)); } 50% { translate:0 -7px; filter:drop-shadow(0 0 20px rgba(255,118,111,.28)) drop-shadow(0 25px 38px rgba(0,0,0,.4)); } }
@keyframes evolve { 0% { scale: 1; filter: brightness(1); } 35% { scale: .72; filter: brightness(7) blur(3px); } 70% { scale: 1.12; filter: brightness(4); } 100% { scale: 1; filter: brightness(1); } }
@keyframes flash { 0%,100% { filter: none; } 40% { filter: brightness(1.8); } }
@keyframes worldDrift { from{transform:scale(1.04) translate3d(-.5%,0,0)} to{transform:scale(1.09) translate3d(.8%,-.5%,0)} }
@keyframes dataFall { 0%{translate:0 -10vh;opacity:0}10%{opacity:.7}70%{opacity:.45}100%{translate:14px 110vh;opacity:0} }
@keyframes evolutionRing{0%,100%{scale:.8;rotate:0deg;opacity:.35}50%{scale:1.12;rotate:90deg;opacity:1}}
@keyframes oldFormOut{0%,25%{translate:0 0;opacity:.55}70%,100%{translate:-8vw 0;opacity:.15;filter:grayscale(1) brightness(.5)}}
@keyframes newFormIn{0%,22%{translate:8vw 0;scale:.35;opacity:0;filter:brightness(7) blur(8px)}58%{scale:1.12;opacity:1;filter:brightness(3)}100%{translate:0;scale:1;opacity:1;filter:brightness(1)}}
@keyframes corePulse{to{scale:1.22;text-shadow:0 0 24px var(--cyan)}}
@keyframes energyOrbit{0%{translate:-38vw -30vh;rotate:0}50%{translate:38vw 28vh;rotate:180deg}100%{translate:-38vw -30vh;rotate:360deg}}
@keyframes guideIn{to{opacity:1;translate:0 0}}
@keyframes entryPortal{0%{scale:.2;rotate:0deg;filter:brightness(5)}70%{scale:1.2;rotate:135deg}100%{scale:1;rotate:225deg}}
@keyframes stageReveal{0%,58%{opacity:1}100%{opacity:0}}
@keyframes finalArrival{from{opacity:0;scale:.45;filter:brightness(5) blur(5px)}to{opacity:1;scale:1}}

/* Flowdeck — exploration Hocus Club */
body { background:#160b21; }
h1,h2,.question,.projector-copy h1,.builder-preview strong,.completion-copy h1 { font-family:"Barlow Condensed","DM Sans",sans-serif;font-weight:800;font-style:italic;letter-spacing:-.025em; }
.controller-world,.builder-world { background:linear-gradient(135deg,rgba(22,11,33,.95),rgba(40,21,55,.7)),url('assets/hocus-card-arena-v1.png') center/cover fixed; }
.controller-world::before,.builder-world::before { content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 16%,rgba(217,246,83,.12),transparent 22%),radial-gradient(circle at 15% 75%,rgba(99,53,232,.28),transparent 30%),url('assets/hocus-texture-grain.png');background-size:auto,auto,360px;mix-blend-mode:screen;opacity:.32; }
.brand { gap:12px; }
.brand>i { display:none; }
.brand img { width:102px;height:31px;object-fit:contain; }
.brand span { padding-left:12px;border-left:1px solid rgba(217,246,83,.45);color:var(--lime);font:700 11px "Space Mono";letter-spacing:.16em; }
.app-nav { border-color:rgba(217,246,83,.18);background:rgba(28,13,41,.78); }
.app-nav button.active { background:var(--lime);box-shadow:0 0 0 1px #fff,6px 7px 0 var(--violet); }
.eyebrow { color:var(--lime); }
.card,.builder-summary,.challenge-builder { background:linear-gradient(145deg,rgba(52,27,70,.96),rgba(25,11,38,.94));border-color:rgba(217,246,83,.2);box-shadow:10px 12px 0 rgba(99,53,232,.28),0 30px 70px rgba(8,3,14,.42); }
.device { background:linear-gradient(145deg,#764bf0,#3b1e78 55%,#21112e);border-color:rgba(217,246,83,.38);box-shadow:0 28px 70px rgba(8,3,14,.55),inset 0 2px rgba(255,255,255,.22),8px 10px 0 #1c0d29; }
.mission-card { background:linear-gradient(145deg,rgba(32,15,46,.98),rgba(53,27,72,.96));border:1px solid rgba(217,246,83,.22);clip-path:polygon(0 0,94% 0,100% 9%,100% 100%,6% 100%,0 91%); }
.primary,.launch-button { background:var(--lime);box-shadow:6px 7px 0 var(--violet);border-radius:5px; }
.action,.mission-todo-button { border-radius:5px;background:rgba(44,23,59,.82);border-color:rgba(217,246,83,.18); }
.action:hover,.mission-todo-button:hover { border-color:var(--lime);background:rgba(99,53,232,.22); }
.world-bg { background-image:url('assets/hocus-card-arena-v1.png');filter:saturate(.88) brightness(.7); }
.world-vignette { background:linear-gradient(90deg,rgba(22,8,31,.98) 0%,rgba(40,21,55,.82) 38%,rgba(40,21,55,.18) 72%),linear-gradient(0deg,rgba(22,8,31,.82),transparent 40%); }
.projector::after { content:"";position:absolute;inset:0;pointer-events:none;background:url('assets/hocus-texture-grain.png');background-size:420px;mix-blend-mode:screen;opacity:.1; }
.mission-name { border-color:var(--lime); }
.mission-name span,.timer-lockup>span { color:var(--lime); }
.quest-tag { padding:10px 20px 10px 12px;background:linear-gradient(110deg,rgba(99,53,232,.36),rgba(40,21,55,.86));border-color:rgba(217,246,83,.38);clip-path:polygon(0 0,91% 0,100% 50%,91% 100%,0 100%); }
.quest-tag i { border-color:var(--apricot);box-shadow:0 0 10px rgba(255,172,128,.7); }
.projector-copy h1 { text-shadow:5px 6px 0 rgba(99,53,232,.38),0 18px 40px rgba(0,0,0,.72); }
.question-signal { border-color:var(--apricot); }
.question-signal b { color:var(--apricot); }
.question-signal span { background:var(--apricot);box-shadow:0 0 10px var(--apricot); }
.projected-todos { border-color:rgba(217,246,83,.35);background:rgba(31,14,45,.82);box-shadow:6px 7px 0 rgba(99,53,232,.2); }
.projected-todo { background:rgba(99,53,232,.13); }
.projected-todo:hover { background:rgba(99,53,232,.28); }
.projected-todo i { transform:rotate(45deg);border-color:var(--lime); }
.projected-todo i::first-letter { transform:rotate(-45deg); }
.projector-foot { background:linear-gradient(90deg,rgba(31,14,45,.94),rgba(40,21,55,.68));border-color:rgba(217,246,83,.32); }
.projector-progress i { background:linear-gradient(90deg,var(--violet),var(--lime)); }
.creature-stage::before { background:radial-gradient(circle,rgba(217,246,83,.23),rgba(99,53,232,.12) 45%,transparent 68%);filter:blur(34px); }
.ritual-orbit { position:absolute;z-index:-1;width:min(31vw,450px);aspect-ratio:1;border:1px solid rgba(217,246,83,.28);border-radius:50%;box-shadow:0 0 42px rgba(99,53,232,.28),inset 0 0 34px rgba(99,53,232,.16);animation:ritualTurn 18s linear infinite; }
.ritual-orbit::before,.ritual-orbit::after { content:"";position:absolute;inset:10%;border:1px dashed rgba(255,172,128,.28);border-radius:50%; }
.ritual-orbit::after { inset:30%;transform:rotate(45deg);border-style:solid;border-radius:4px; }
.ritual-orbit i { position:absolute;width:8px;height:8px;background:var(--lime);transform:rotate(45deg);box-shadow:0 0 13px var(--lime); }.ritual-orbit i:nth-child(1){left:12%;top:20%}.ritual-orbit i:nth-child(2){right:9%;top:43%;background:var(--apricot)}.ritual-orbit i:nth-child(3){left:38%;bottom:-4px;background:var(--violet)}
.creature-guide { background:rgba(40,21,55,.9);border-color:rgba(217,246,83,.4); }
.route-map-wrap { background:linear-gradient(90deg,rgba(40,21,55,.94),rgba(57,29,77,.72));border-color:rgba(217,246,83,.2);box-shadow:9px 10px 0 rgba(99,53,232,.2); }
.route-map::before { background:linear-gradient(90deg,var(--violet),var(--apricot),var(--lime)); }
.route-node { background:linear-gradient(145deg,#3a2050,#21112f);border-color:rgba(217,246,83,.25);box-shadow:6px 7px 0 rgba(13,5,20,.38); }
.route-node.route-active { outline:1px solid var(--lime);box-shadow:7px 8px 0 var(--violet),0 0 28px rgba(217,246,83,.18); }
.route-node.form-1 { background:linear-gradient(145deg,#ffb18a,#f08e71); }
.route-node.form-2 { background:linear-gradient(145deg,#e3fa75,#c7e84e); }
.route-start i,.route-end i { border-color:var(--lime);background:var(--aubergine); }
.route-evolution::before { border-color:rgba(217,246,83,.42);background:radial-gradient(circle,rgba(99,53,232,.44),var(--aubergine) 67%); }
.builder-head h1 { text-shadow:5px 6px 0 rgba(99,53,232,.38); }
.builder-preview { border-color:rgba(217,246,83,.24);background:linear-gradient(90deg,rgba(40,21,55,.98),rgba(40,21,55,.28)),url('assets/hocus-card-arena-v1.png') center/cover;box-shadow:7px 8px 0 rgba(99,53,232,.24); }
.challenge-editor { background:linear-gradient(110deg,rgba(56,29,74,.92),rgba(31,14,45,.9));border-color:rgba(217,246,83,.18); }
.small-button,.secondary { border-color:rgba(217,246,83,.38);color:var(--lime); }
.evolution-roster { background:rgba(40,21,55,.86);border-color:rgba(217,246,83,.2); }
.roster-form { background:radial-gradient(circle,rgba(99,53,232,.24),rgba(29,13,42,.96)); }
.scene-critical .world-bg { filter:hue-rotate(18deg) saturate(.78) brightness(.65); }
.scene-critical .projector-copy .eyebrow { color:var(--apricot); }
@keyframes ritualTurn { to { rotate:360deg; } }

@media (max-width: 800px) {
  .projector { padding: 24px; }
  .projector-main { grid-template-columns: 1fr; align-content: center; gap: 18px; }
  .projector-copy h1,.projector-copy h1.question-short,.projector-copy h1.question-medium,.projector-copy h1.question-long { font-size: clamp(36px, 9.5vw, 66px); max-width: 100%; text-align: center; }
  .projector-copy .eyebrow { text-align: center; }
  .creature-stage { min-height: 36vh; }
  .creature-window { width: min(78vw, 480px); height: min(66vw, 410px); }
  .projector-foot { grid-template-columns: auto 1fr; }
  .stage-label { display: none; }
  .builder-world { padding:16px; }
  .builder-head { align-items:stretch;flex-direction:column; }
  .route-map-wrap { margin-left:-16px;margin-right:-16px;clip-path:none;border-left:0;border-right:0;padding-left:14px;padding-right:14px; }
  .route-node { flex-basis:158px;min-height:108px; }
  .launch-button { width:100%; }
  .builder-grid { grid-template-columns:1fr; }
  .builder-summary { position:relative;top:auto; }
  .challenge-builder { padding:15px; }
  .challenge-editor { grid-template-columns:42px minmax(0,1fr); }
  .editor-actions { grid-column:2;flex-direction:row; }
  .editor-row { grid-template-columns:1fr; }
  .builder-section-head { align-items:stretch;flex-direction:column; }
  .builder-preview { padding:20px 135px 20px 18px;min-height:180px; }.builder-preview img{width:145px;height:160px;right:0}.builder-preview strong{font-size:24px}
  .todo-compose>div{grid-template-columns:1fr}.projector-todo-status{display:none}.evolution-forms{grid-template-columns:1fr}.old-form{display:none}.new-form{height:52vh}.evolution-core{position:absolute;z-index:3;bottom:6vh;left:50%;translate:-50% 0;width:100%}.evolution-core em{display:none}.roster-label{display:none}.evolution-roster{gap:3px}.roster-form{width:34px;height:32px}.roster-form img{width:30px;height:29px}
  .completion-main{grid-template-columns:1fr;align-content:center}.completion-copy h1{font-size:58px}.completion-creature{display:none}.completion-stats{grid-template-columns:1fr 1fr 1fr}.completion-actions{flex-direction:column}.completion-actions .primary{width:100%}
}
@media (max-width: 560px) {
  .shell { padding-left:12px;padding-right:12px; }
  .app-nav { margin-bottom:14px; }
  .topbar { margin-bottom:14px; }
  .controller-intro p:last-child { display:none; }
  .controller-intro h1 { font-size:30px;max-width:85%; }
  .device { margin-top:18px;padding:17px 12px 15px;border-radius:29px 29px 43px 43px; }
  .device::before { border-radius:23px 23px 37px 37px; }
  .device-companion { top:-39px;right:14px;width:82px;height:74px; }
  .device-companion img { width:72px;height:64px; }
  .mission-card { padding:18px;margin-bottom:10px;border-radius:15px; }
  .challenge-index { margin-bottom:11px; }
  .question { min-height:auto;font-size:25px;margin-bottom:18px;padding-right:4px; }
  .timer-row { padding-top:13px; }
  .timer { font-size:54px; }
  .primary { min-height:56px;border-radius:14px; }
  .mission-todo-button { min-height:58px;border-radius:12px; }
  .actions { gap:8px;margin-top:8px; }
  .action { min-height:66px;padding:11px;border-radius:10px;font-size:13px; }
  .action span { font-size:10px; }
  .projected-todos-list { grid-template-columns:1fr; }
  .creature-guide { display:none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* Partner deck */
.partner-pick{display:grid;grid-template-columns:minmax(240px,.8fr) repeat(2,minmax(230px,1fr));gap:16px;margin:0 0 24px;padding:22px;border:1px solid rgba(217,246,83,.22);background:linear-gradient(125deg,rgba(31,14,45,.96),rgba(65,32,86,.76));box-shadow:10px 12px 0 rgba(99,53,232,.22);clip-path:polygon(0 0,98.5% 0,100% 16%,100% 100%,1.5% 100%,0 84%)}
.partner-pick-copy{align-self:center;padding:8px 16px 8px 4px}.partner-pick-copy>span{color:var(--lime);font:700 10px "Space Mono";letter-spacing:.14em;text-transform:uppercase}.partner-pick-copy h2{max-width:11ch;margin:10px 0 8px;font-size:34px;line-height:.92}.partner-pick-copy p{max-width:30ch;margin:0;color:#b9adc4;font-size:13px}
.partner-card{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;min-height:178px;padding:12px;border:1px solid rgba(255,255,255,.13);border-radius:3px;background:linear-gradient(145deg,#1b0d28,#321942);color:#fff;text-align:left;cursor:pointer;overflow:hidden;transition:translate .2s,box-shadow .2s,border-color .2s}.partner-card:hover{translate:0 -4px;border-color:rgba(217,246,83,.55)}.partner-card.selected{border-color:var(--lime);box-shadow:6px 7px 0 var(--violet),inset 0 0 28px rgba(217,246,83,.06)}
.partner-card-art{grid-row:1/4;position:relative;display:grid;place-items:center;min-height:150px;background:radial-gradient(circle at 50% 60%,rgba(217,246,83,.15),rgba(99,53,232,.18) 52%,transparent 53%)}.partner-card-art img{position:relative;z-index:2;width:116px;height:146px;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(0,0,0,.55))}.sculpted-letter{position:absolute;z-index:1;inset:auto auto -22px -4px;color:#f7f0df;font:italic 800 130px/1 "Barlow Condensed";text-shadow:2px 2px 0 #d8d0c3,4px 4px 0 #6335e8,7px 7px 0 #4a25b7,10px 10px 0 #281537;opacity:.82;transform:rotate(-8deg)}
.partner-card>span{align-self:start;width:max-content;padding:5px 7px;background:var(--lime);color:var(--aubergine);font:700 8px "Space Mono";letter-spacing:.08em;text-transform:uppercase}.partner-card>strong{align-self:end;margin-top:12px;font:italic 800 21px/1 "Barlow Condensed"}.partner-card>small{align-self:start;margin-top:6px;color:#b9adc4;font-size:10px}.partner-card.selected>span::before{content:"✓ ";font-weight:900}
.summary-orb img,.builder-preview img,.device-companion img,.creature-sheet,.roster-form img,.route-evolution img,.completion-creature img,.evolution-forms img{image-rendering:auto!important}
.stage-1 .creature-sheet,.roster-form.form-1 img{clip-path:none!important}
.summary-orb{overflow:hidden}.summary-orb .sculpted-letter{left:12px;bottom:-30px}.builder-preview{isolation:isolate}.builder-preview .sculpted-letter{left:10px;bottom:-34px;opacity:.2}.builder-preview>*:not(.sculpted-letter){position:relative;z-index:2}
@media(max-width:980px){.partner-pick{grid-template-columns:1fr 1fr}.partner-pick-copy{grid-column:1/-1}.partner-pick-copy h2{max-width:none}.partner-card{grid-template-columns:138px minmax(0,1fr)}.partner-card-art img{width:132px;height:142px}}
@media(max-width:620px){.partner-pick{grid-template-columns:1fr;padding:14px;clip-path:none}.partner-pick-copy{grid-column:auto}.partner-card{min-height:150px}.partner-card-art{min-height:126px}}

/* Mission deck — magic, trap, hand and reveal */
.deck-builder{margin:0 0 26px;padding:24px;border:1px solid rgba(217,246,83,.2);background:linear-gradient(135deg,rgba(27,12,40,.97),rgba(58,28,77,.9));box-shadow:10px 12px 0 rgba(99,53,232,.2);clip-path:polygon(0 0,98.5% 0,100% 10%,100% 100%,0 100%)}
.deck-builder-head{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(500px,1.8fr);gap:30px;align-items:center}.deck-builder-head>div:first-child>span,.collection-label{color:var(--lime);font:700 10px "Space Mono";letter-spacing:.14em;text-transform:uppercase}.deck-builder-head h2{max-width:16ch;margin:9px 0 8px;font-size:34px;line-height:.95}.deck-builder-head p{max-width:48ch;margin:0;color:#b9adc4;font-size:13px}
.deck-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.deck-slot{position:relative;display:grid;grid-template-columns:42px 1fr;align-items:center;min-height:86px;padding:13px;border:1px solid rgba(217,246,83,.4);background:linear-gradient(145deg,rgba(92,54,184,.38),rgba(24,12,37,.96));box-shadow:4px 5px 0 rgba(13,5,20,.5);overflow:hidden}.deck-slot.trap{border-color:rgba(255,172,128,.55);background:linear-gradient(145deg,rgba(177,66,83,.27),rgba(24,12,37,.96))}.deck-slot i{display:grid;place-items:center;width:34px;height:44px;border:1px solid currentColor;color:var(--lime);font:normal 800 20px "DM Sans"}.deck-slot.trap i{color:var(--apricot)}.deck-slot b{font:italic 800 17px/1 "Barlow Condensed"}.deck-slot small{position:absolute;right:8px;bottom:5px;color:rgba(255,255,255,.28);font:700 9px "Space Mono"}.deck-slot.empty{opacity:.45;border-style:dashed}.deck-slot.empty i{border-style:dashed}.deck-slot.empty b{color:#a69aae}
.card-collection{display:grid;grid-template-columns:120px repeat(6,minmax(126px,1fr));gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(217,246,83,.16)}.collection-label{align-self:center;display:flex;flex-direction:column;gap:8px}.collection-label b{color:#fff;font:italic 800 24px "Barlow Condensed"}.collection-label span{color:#a99db3;font-size:9px}
.power-card{position:relative;display:grid;grid-template-rows:auto 48px auto 1fr auto;gap:5px;min-height:190px;padding:10px;border:1px solid rgba(217,246,83,.35);background:linear-gradient(160deg,#4d2bad,#241234 58%,#150a20);color:#fff;text-align:left;cursor:pointer;overflow:hidden;transition:translate .18s,box-shadow .18s,filter .18s}.power-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(217,246,83,.18),transparent 30%),url('assets/hocus-texture-grain.png');background-size:auto,220px;mix-blend-mode:screen;opacity:.35}.power-card.trap{border-color:rgba(255,172,128,.48);background:linear-gradient(160deg,#8f3048,#32142f 58%,#170a20)}.power-card:hover:not(:disabled){translate:0 -4px;box-shadow:5px 6px 0 var(--lime)}.power-card.trap:hover:not(:disabled){box-shadow:5px 6px 0 var(--apricot)}.power-card>*{position:relative;z-index:1}.card-kind{font:700 7px "Space Mono";letter-spacing:.11em;text-transform:uppercase;color:var(--lime)}.trap .card-kind{color:var(--apricot)}.card-glyph{display:grid;place-items:center;width:42px;height:42px;border:1px solid currentColor;border-radius:50%;color:var(--lime);font:normal 800 22px "DM Sans"}.trap .card-glyph{color:var(--apricot)}.power-card strong{font:italic 800 18px/.95 "Barlow Condensed"}.power-card small{color:#c3b8cb;font-size:9px;line-height:1.3}.power-card em{align-self:end;width:max-content;padding:4px 6px;background:rgba(217,246,83,.12);color:var(--lime);font:normal 700 7px "Space Mono";text-transform:uppercase}.power-card.selected{outline:2px solid var(--lime);outline-offset:-4px}.power-card.trap.selected{outline-color:var(--apricot)}.power-card.locked{filter:grayscale(.8) brightness(.5);cursor:not-allowed}.power-card.locked::after{content:"VERROUILLÉE";position:absolute;right:-28px;top:18px;z-index:2;width:105px;rotate:40deg;background:#09050d;color:#c9bdcf;text-align:center;font:700 7px/18px "Space Mono"}.power-card.used{filter:grayscale(1) brightness(.45);cursor:not-allowed}.power-card.used::after{content:"DÉFAUSSÉE";position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(15,7,21,.55);color:#fff;font:700 9px "Space Mono";letter-spacing:.12em;rotate:-8deg}
.facilitator-hand{margin:10px 0;padding:14px;border:1px solid rgba(217,246,83,.22);background:rgba(35,17,48,.75)}.hand-head{display:flex;justify-content:space-between;gap:14px;align-items:end;margin-bottom:10px}.hand-head>div{display:grid;gap:3px}.hand-head span{color:var(--lime);font:700 9px "Space Mono";letter-spacing:.11em;text-transform:uppercase}.hand-head b{font-size:13px}.hand-head small{color:#998da5;font-size:9px}.hand-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hand-cards .power-card{grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;min-height:96px;padding:9px}.hand-cards .card-kind{grid-column:1/-1}.hand-cards .card-glyph{grid-row:2/4;width:30px;height:38px;font-size:16px}.hand-cards .power-card strong{font-size:15px}.hand-cards .power-card small{font-size:8px}.hand-cards .power-card:hover:not(:disabled){translate:0 -2px}
.card-reveal{position:fixed;z-index:30;inset:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(99,53,232,.38),rgba(18,7,27,.93) 62%);backdrop-filter:blur(14px);animation:revealBackdrop 3.8s both}.card-reveal.trap{background:radial-gradient(circle,rgba(255,99,116,.3),rgba(18,7,27,.94) 62%)}.reveal-rays{position:absolute;width:min(80vw,900px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(217,246,83,.12) 0 3deg,transparent 3deg 12deg);animation:revealSpin 8s linear infinite}.trap .reveal-rays{background:repeating-conic-gradient(from 0deg,rgba(255,172,128,.12) 0 3deg,transparent 3deg 12deg)}.revealed-card{position:relative;width:min(360px,72vw);aspect-ratio:.7;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--lime);background:linear-gradient(155deg,#6335e8,#281537 62%,#170b21);box-shadow:14px 16px 0 #d9f653,0 35px 90px #000;text-align:center;animation:cardArrival .7s cubic-bezier(.16,1,.3,1) both}.trap .revealed-card{border-color:var(--apricot);background:linear-gradient(155deg,#9f3852,#39152f 62%,#170b21);box-shadow:14px 16px 0 var(--apricot),0 35px 90px #000}.revealed-card>span{position:absolute;top:24px;color:var(--lime);font:700 9px "Space Mono";letter-spacing:.14em;text-transform:uppercase}.trap .revealed-card>span{color:var(--apricot)}.revealed-card>i{display:grid;place-items:center;width:95px;height:95px;border:2px solid currentColor;border-radius:50%;color:var(--lime);font:normal 800 52px "DM Sans"}.trap .revealed-card>i{color:var(--apricot)}.revealed-card h2{max-width:8ch;margin:22px 0 12px;font-size:48px;line-height:.85}.revealed-card p{max-width:28ch;margin:0;color:#eee5f1;font-size:13px}.revealed-card small{position:absolute;bottom:22px;color:#a89aae;font:700 8px "Space Mono";text-transform:uppercase}.card-reveal::after{content:"CARTE RÉVÉLÉE";position:absolute;bottom:4vh;color:rgba(255,255,255,.45);font:700 10px "Space Mono";letter-spacing:.28em}
@keyframes cardArrival{0%{opacity:0;scale:.2;rotate:-18deg;filter:brightness(4) blur(7px)}65%{scale:1.08;rotate:2deg;filter:brightness(1.5)}100%{opacity:1;scale:1;rotate:-1deg;filter:none}}@keyframes revealBackdrop{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}@keyframes revealSpin{to{rotate:360deg}}
@media(max-width:1120px){.deck-builder-head{grid-template-columns:1fr}.card-collection{grid-template-columns:repeat(3,1fr)}.collection-label{grid-column:1/-1;flex-direction:row;justify-content:space-between}.power-card{min-height:165px}.hand-cards{grid-template-columns:1fr}.facilitator-hand .power-card{min-height:82px}}
@media(max-width:620px){.deck-builder{padding:15px;clip-path:none}.deck-slots{grid-template-columns:1fr}.card-collection{grid-template-columns:1fr 1fr}.power-card{min-height:175px}.deck-builder-head h2{font-size:29px}.hand-head{align-items:start;flex-direction:column}.revealed-card{padding:20px}.revealed-card h2{font-size:38px}}

/* Illustrated collectible-card face */
.power-card{display:flex;flex-direction:column;gap:5px;min-height:270px;padding:8px;border:5px solid #1f8d89;border-radius:8px;background:linear-gradient(145deg,#56c7b8,#197f7f 50%,#0d4f58);box-shadow:inset 0 0 0 2px rgba(255,255,255,.38),inset 0 0 22px rgba(0,0,0,.48),0 8px 14px rgba(0,0,0,.28);font-style:normal}.power-card.trap{border-color:#a93672;background:linear-gradient(145deg,#e77ab0,#a62e70 52%,#591a50)}.power-card::before{background:linear-gradient(125deg,rgba(255,255,255,.24),transparent 22%,rgba(255,255,255,.08) 55%,transparent),url('assets/hocus-texture-grain.png');background-size:auto,180px;opacity:.48;mix-blend-mode:soft-light}.tcg-title{display:grid;grid-template-columns:1fr 22px;align-items:center;gap:5px;min-height:36px;padding:5px 6px;border:1px solid rgba(35,16,20,.55);background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.16));box-shadow:inset 0 0 8px rgba(255,255,255,.25);color:#211324}.tcg-title strong{font:800 13px/.95 "Barlow Condensed";letter-spacing:.01em}.tcg-title i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#f4efe3;color:#14746f;font:normal 900 11px "DM Sans";box-shadow:0 1px 2px #382339}.trap .tcg-title i{color:#a62e70}.tcg-rank{display:flex;justify-content:space-between;align-items:center;padding:0 3px;color:#f8f3e7;font:700 6px "Space Mono";letter-spacing:.1em}.tcg-rank b{color:#ffe56c;font-size:6px;letter-spacing:0;text-shadow:0 1px #584000}.trap .tcg-rank b{color:#d9f653}.tcg-art{position:relative;display:grid;place-items:center;flex:1;min-height:88px;border:4px solid #d9c49b;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.46),transparent 27%),repeating-radial-gradient(circle at 50% 50%,rgba(217,246,83,.5) 0 2px,transparent 3px 17px),linear-gradient(145deg,#30144e,#6335e8);box-shadow:inset 0 0 24px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.4);overflow:hidden}.trap .tcg-art{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.3),transparent 27%),repeating-conic-gradient(from 20deg,rgba(255,172,128,.24) 0 8deg,transparent 8deg 20deg),linear-gradient(145deg,#32102d,#a62e70)}.tcg-art::before,.tcg-art::after{content:"";position:absolute;width:72%;aspect-ratio:1;border:1px solid rgba(217,246,83,.6);rotate:45deg}.tcg-art::after{width:48%;border-style:dashed;rotate:18deg}.tcg-art>i{position:relative;z-index:2;color:#fff;font:normal 800 42px "DM Sans";text-shadow:3px 4px 0 #281537,0 0 18px #d9f653}.trap .tcg-art>i{text-shadow:3px 4px 0 #281537,0 0 18px #ffac80}.tcg-rules{display:grid;gap:4px;min-height:64px;padding:6px;border:2px solid rgba(82,51,39,.6);background:#f3ead8;color:#251826;box-shadow:inset 0 0 8px rgba(92,61,35,.18)}.tcg-rules>b{font:800 6px "Space Mono"}.tcg-rules>small{font:600 7px/1.25 "DM Sans"}.tcg-foot{display:flex;justify-content:space-between;color:#f8f0e5;font:700 5px "Space Mono";letter-spacing:.04em}.power-card>em{position:absolute;z-index:4;right:9px;bottom:9px;padding:4px 5px;border:1px solid rgba(255,255,255,.35);background:#1a1022;color:#fff;font:normal 700 6px "Space Mono"}.power-card.selected{outline:3px solid var(--lime);outline-offset:3px}.power-card.trap.selected{outline-color:var(--apricot)}
.hand-cards .power-card{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto 1fr auto;min-height:112px;padding:6px;border-width:3px}.hand-cards .tcg-title{grid-column:1/-1;min-height:28px}.hand-cards .tcg-title strong{font-size:12px}.hand-cards .tcg-title i{width:16px;height:16px}.hand-cards .tcg-rank,.hand-cards .tcg-foot{display:none}.hand-cards .tcg-art{grid-row:2/4;min-height:58px;border-width:2px}.hand-cards .tcg-art>i{font-size:22px}.hand-cards .tcg-rules{min-height:52px;padding:5px}.hand-cards .tcg-rules>b{font-size:5px}.hand-cards .tcg-rules>small{font-size:7px}.hand-cards .power-card.used::after{font-size:7px}
.projector-controls button{position:relative}.projector-controls button small{position:absolute;right:-4px;top:-7px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:var(--lime);color:var(--aubergine);font:800 8px "Space Mono"}
.hand-modal{width:min(980px,92vw);max-width:none}.modal-hand-cards{display:grid;grid-template-columns:repeat(3,minmax(180px,250px));justify-content:center;gap:22px;margin-top:22px}.modal-hand-cards .power-card{min-height:340px}.modal-hand-cards .tcg-title strong{font-size:17px}.modal-hand-cards .tcg-art{min-height:140px}.modal-hand-cards .tcg-art>i{font-size:58px}.modal-hand-cards .tcg-rules>small{font-size:9px}.modal-hand-cards .power-card:hover:not(:disabled){translate:0 -8px;rotate:-1deg}
.tcg-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}.tcg-art:has(img)::before,.tcg-art:has(img)::after{display:none}
.reveal-card-wrap{position:relative;display:grid;justify-items:center;animation:cardArrival .7s cubic-bezier(.16,1,.3,1) both}.reveal-card-wrap>.power-card{width:min(390px,72vw);height:min(70vh,560px);min-height:0;cursor:default;box-shadow:14px 16px 0 var(--lime),0 35px 90px #000}.trap .reveal-card-wrap>.power-card{box-shadow:14px 16px 0 var(--apricot),0 35px 90px #000}.reveal-card-wrap>.power-card:hover{translate:0;rotate:0}.reveal-card-wrap>span{margin-bottom:14px;color:var(--lime);font:700 10px "Space Mono";letter-spacing:.14em;text-transform:uppercase}.trap .reveal-card-wrap>span{color:var(--apricot)}.reveal-card-wrap>small{margin-top:20px;color:#b9adc4;font:700 8px "Space Mono";letter-spacing:.12em;text-transform:uppercase}.reveal-card-wrap .tcg-title strong{font-size:20px}.reveal-card-wrap .tcg-art{min-height:220px}.reveal-card-wrap .tcg-rules{min-height:78px}.reveal-card-wrap .tcg-rules>small{font-size:10px}.reveal-card-wrap .tcg-rank{font-size:8px}.reveal-card-wrap .tcg-foot{font-size:7px}
@media(max-width:1120px){.card-collection .power-card{min-height:245px}.modal-hand-cards{gap:13px}.modal-hand-cards .power-card{min-height:300px}}
@media(max-width:620px){.card-collection{grid-template-columns:1fr 1fr}.card-collection .power-card{min-height:255px}.modal-hand-cards{grid-template-columns:repeat(3,190px);justify-content:start;overflow-x:auto;padding:8px 8px 18px}.modal-hand-cards .power-card{min-height:285px}.hand-modal{padding:18px}}

/* Projector facilitator console */
.projector{padding-bottom:clamp(132px,13vh,168px)}
.projector-console{position:fixed;z-index:8;left:50%;bottom:18px;translate:-50% 0;display:grid;grid-template-columns:auto auto auto;align-items:stretch;gap:7px;width:max-content;max-width:calc(100vw - 32px);padding:7px;border:1px solid rgba(217,246,83,.34);border-radius:20px;background:linear-gradient(150deg,rgba(47,23,64,.98),rgba(24,11,35,.96));backdrop-filter:blur(22px);box-shadow:0 18px 55px rgba(7,2,12,.62),6px 7px 0 rgba(99,53,232,.55),inset 0 1px rgba(255,255,255,.09)}
.projector-console::before,.projector-console::after{content:"";position:absolute;top:50%;width:18px;height:42px;translate:0 -50%;background:#f2ede5;box-shadow:3px 3px 0 var(--violet);z-index:-1}.projector-console::before{left:-8px;border-radius:12px 2px 2px 12px}.projector-console::after{right:-8px;border-radius:2px 12px 12px 2px}
.console-group{display:flex;align-items:stretch;gap:4px;padding:4px;border-radius:13px;background:rgba(8,3,13,.28);border:1px solid rgba(255,255,255,.06)}.projector-console button{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-width:64px;height:54px;padding:0 11px;border:1px solid transparent;border-radius:9px;background:rgba(255,255,255,.06);color:#f7f3fa;cursor:pointer;transition:translate .18s,background .18s,border-color .18s;white-space:nowrap}.projector-console button:hover{translate:0 -2px;background:rgba(255,255,255,.12);border-color:rgba(217,246,83,.32)}.projector-console button i{font:normal 800 15px "Space Mono"}.projector-console button span{font:700 9px "DM Sans"}.projector-console button b{display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:var(--lime);color:var(--aubergine);font:800 7px "Space Mono"}
.console-nav button{min-width:76px}.console-step{display:grid;place-items:center;min-width:56px;padding:0 7px;text-align:center}.console-step small{color:#a99daf;font:700 6px "Space Mono";letter-spacing:.13em}.console-step b{font:800 13px "Space Mono"}.console-step em{margin:0 2px;color:#6f6279;font-style:normal}
.console-time{border-color:rgba(217,246,83,.18)}.console-time .control-main{display:grid;grid-template-columns:28px auto;min-width:104px;background:var(--lime);color:var(--aubergine);box-shadow:3px 4px 0 var(--violet)}.console-time .control-main:hover{background:#e5ff78;border-color:#fff}.console-time .control-main i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(40,21,55,.12)}.console-time .control-main.is-running{background:#f4efe7;box-shadow:3px 4px 0 var(--apricot)}
.console-tools .tool-decision{background:var(--violet);border-color:rgba(255,255,255,.16)}.console-tools .tool-decision:hover{background:#754af0}.console-tools .tool-hand{min-width:86px}.mini-cards{position:relative;width:25px;height:24px}.mini-cards u{position:absolute;left:7px;top:3px;width:14px;height:19px;border:1px solid var(--lime);border-radius:2px;background:#321846;text-decoration:none;transform-origin:50% 100%}.mini-cards u:nth-child(1){rotate:-16deg}.mini-cards u:nth-child(3){rotate:16deg}.tool-more i{font-size:13px;letter-spacing:2px}
.projector-console button::after{content:attr(data-hint);position:absolute;left:50%;bottom:calc(100% + 12px);translate:-50% 4px;width:max-content;max-width:190px;padding:7px 9px;border:1px solid rgba(217,246,83,.25);border-radius:6px;background:#1d0d29;color:#eee7f1;font:600 8px "DM Sans";box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .15s,translate .15s}.projector-console button:hover::after,.projector-console button:focus-visible::after{opacity:1;translate:-50% 0}
.scene-critical .console-time .control-main{background:var(--apricot);box-shadow:3px 4px 0 #7d294a}.scene-critical .projector-timer{color:var(--apricot)}
@media(max-width:980px){.projector{padding-bottom:185px}.projector-console{grid-template-columns:1fr 1fr;width:min(620px,calc(100vw - 26px))}.console-nav{order:1}.console-time{order:2}.console-tools{order:3;grid-column:1/-1;justify-content:center}.projector-console button{flex:1}.console-tools button{max-width:130px}}
@media(max-width:620px){.projector{padding-bottom:188px}.projector-console{bottom:10px;gap:5px;padding:5px;border-radius:15px}.projector-console::before,.projector-console::after{display:none}.console-group{padding:3px}.projector-console button{min-width:0;height:46px;padding:0 7px;gap:4px}.projector-console button span{font-size:8px}.console-step{min-width:44px}.console-time .control-main{min-width:82px;grid-template-columns:22px auto}.console-time .control-main i{width:22px;height:22px}.console-tools .tool-hand{min-width:72px}.console-tools .tool-more span{display:none}.console-tools .tool-more{max-width:42px}.projector-console button::after{display:none}}