/* ============================================================ ESCAPE THE VIVA โ€” Gameplay Redesign (scoped to #game-screen) v7: portrait mobile polish. ============================================================ */ :root{ --neon:#4ee1ff; --neon2:#a78bfa; --gold:#ffcf4a; --red:#ff5a5a; --org:#ff9f45; --grn:#39e08a; --glass:rgba(14,20,34,.64); --line:rgba(120,200,255,.16); } .credits{ display:none !important; } #game-screen > .rd-lifelines{ display:none !important; } #game-screen{ position:relative; overflow:hidden; padding:0; } #game-screen .rd-bg{ position:absolute; inset:0; z-index:0; background:url('../assets/classroom.png') center/cover no-repeat #0a0e18; transform:scale(1.04); } #game-screen .rd-grade{ position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(20,60,90,.16),rgba(10,20,40,.32)); mix-blend-mode:overlay; } #game-screen .rd-lamp{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(40% 50% at 74% 32%,rgba(255,180,70,.16),transparent 70%); transition:background .5s; } #game-screen .rd-vig{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(135% 105% at 50% 42%,transparent 56%,rgba(0,0,0,.72)); } #game-screen .rd-flash{ position:absolute; inset:0; z-index:6; opacity:0; pointer-events:none; transition:opacity .14s; background:rgba(255,40,40,.3); } #game-screen .z{ position:relative; z-index:4; } #game-screen .rd-hud,#game-screen .rd-context,#game-screen .rd-qcard,#game-screen .rd-life,#game-screen .rd-timer{ background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); } /* TOP HUD */ #game-screen .rd-hud{ position:absolute; top:12px; left:12px; right:12px; display:flex; align-items:center; gap:clamp(8px,1.6vw,20px); padding:8px 14px; border-radius:16px; } #game-screen .rd-chip{ display:flex; align-items:center; gap:8px; } #game-screen .rd-chip .ic{ font-size:19px; filter:drop-shadow(0 0 6px rgba(255,255,255,.15)); } #game-screen .rd-chip .lb{ font-size:9px; letter-spacing:1px; color:#8fb4d8; } #game-screen .rd-chip .vl{ font-size:17px; font-weight:900; line-height:1; } #game-screen .vl.red{ color:var(--red);} #game-screen .vl.org{ color:var(--org);} #game-screen .vl.gold{ color:var(--gold);} #game-screen .vl.big{ font-size:20px;letter-spacing:1px;} #game-screen .rd-chip .mini{ width:44px; height:6px; border-radius:4px; background:rgba(0,0,0,.5); overflow:hidden; } #game-screen .mini-fl{ height:100%; border-radius:4px; transition:width .4s; } #game-screen .mini-fl.s{ background:linear-gradient(90deg,#c0392b,#ff5a5a); box-shadow:0 0 8px #ff5a5a; } #game-screen .mini-fl.a{ background:linear-gradient(90deg,#e67e22,#ff9f45); box-shadow:0 0 8px #ff9f45; } #game-screen .rd-chip.q{ margin-left:auto; text-align:center; padding-left:14px; border-left:1px solid var(--line); } #game-screen .rd-hud .rd-lifelines{ display:flex; flex-direction:row; gap:8px; padding-left:12px; border-left:1px solid var(--line); } #game-screen .rd-life{ display:flex; align-items:center; gap:6px; cursor:pointer; padding:7px 12px; border-radius:12px; color:#e7f6ff; font-weight:800; font-size:12px; background:linear-gradient(160deg,rgba(90,70,180,.4),rgba(50,40,110,.5)); border:1px solid rgba(150,130,255,.4); } #game-screen .rd-life.fifty{ background:linear-gradient(160deg,rgba(40,90,150,.45),rgba(25,55,100,.5)); border-color:rgba(90,160,230,.4); } #game-screen .rd-life .li-ic{ font-size:15px; } #game-screen .rd-life b{ color:var(--neon); } #game-screen .rd-life.fifty b{ color:var(--neon2); } #game-screen .rd-life:hover{ filter:brightness(1.15); } #game-screen .rd-life.used{ opacity:.4; cursor:not-allowed; filter:grayscale(.6); } #game-screen #rd-fs{ margin-left:8px; flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:10px; font-size:15px; color:#dbe6ff; cursor:pointer; background:rgba(30,40,66,.7); border:1px solid var(--line); } #game-screen #rd-fs:hover{ filter:brightness(1.2); } /* CONTEXT STRIP */ #game-screen .rd-context{ position:absolute; top:66px; left:12px; right:12px; display:flex; align-items:center; gap:12px; padding:6px 14px; border-radius:12px; } #game-screen .rd-tag{ font-size:11px; font-weight:800; padding:4px 12px; border-radius:20px; letter-spacing:.5px; } #game-screen .rd-tag.subj{ background:rgba(78,225,255,.14); color:#8fe9ff; border:1px solid rgba(78,225,255,.3); } #game-screen .rd-tag.diff{ background:rgba(167,139,250,.16); color:#c4b5fd; border:1px solid rgba(167,139,250,.35); } #game-screen .rd-prog{ flex:1; height:7px; border-radius:5px; background:rgba(0,0,0,.5); overflow:hidden; } #game-screen .rd-prog-fl{ height:100%; width:0; border-radius:5px; background:linear-gradient(90deg,var(--neon),var(--neon2)); box-shadow:0 0 10px var(--neon); transition:width .5s; } #game-screen .rd-msg{ font-size:12px; color:#bcd0ea; font-style:italic; white-space:nowrap; } #game-screen .rd-ai{ font-size:11px; font-weight:800; padding:4px 12px; border-radius:20px; white-space:nowrap; background:rgba(57,224,138,.14); color:#8ff0ad; border:1px solid rgba(57,224,138,.35); } #game-screen .rd-ai.used{ background:rgba(255,90,90,.12); color:#ff9a90; border-color:rgba(255,90,90,.3); } /* SCENE (desktop) */ #game-screen .rd-scene{ position:absolute; left:0; right:0; top:98px; bottom:238px; z-index:2; pointer-events:none; } #game-screen .rd-student{ position:absolute; left:1%; bottom:0; width:26%; max-width:330px; display:flex; align-items:flex-end; justify-content:center; } #game-screen .rd-student img{ width:100%; height:auto; filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)) brightness(1.08); transition:opacity .2s; } #game-screen .rd-student.noimg{ display:none; } #game-screen .rd-prof{ position:absolute; right:1%; bottom:0; width:26%; max-width:330px; display:flex; flex-direction:column; align-items:center; } #game-screen .prof-wrap{ position:relative; width:100%; } #game-screen .rd-prof-img{ width:100%; height:auto; filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)) brightness(1.08); transition:opacity .25s, transform .25s; } #game-screen .rd-prof.shake{ animation:rdShake .4s; } @keyframes rdShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} } #game-screen .rd-nameplate{ display:none; } #game-screen .prof-angry-effects{ position:absolute; top:0; right:8%; font-size:26px; display:none; } #game-screen .speech-bubble{ display:none; } /* QUESTION BAND (desktop) */ #game-screen .rd-qzone{ position:absolute; left:14px; right:14px; bottom:14px; z-index:4; display:flex; gap:16px; align-items:center; justify-content:center; } #game-screen .rd-qcard{ flex:1 1 auto; max-width:820px; padding:12px 16px; border-radius:16px; } #game-screen .rd-qhead{ display:flex; gap:8px; margin-bottom:8px; } #game-screen .topic-badge,#game-screen .diff-badge{ font-size:10px; font-weight:800; padding:4px 10px; border-radius:8px; text-shadow:0 1px 2px rgba(0,0,0,.65); } #game-screen .topic-badge{ background:rgba(78,225,255,.24); color:#c8f4ff; border:1px solid rgba(78,225,255,.4); } #game-screen .diff-badge{ background:rgba(255,160,60,.24); color:#ffd9ab; border:1px solid rgba(255,160,60,.4); } #game-screen .question-text{ font-size:clamp(14px,1.4vw,18px); font-weight:800; line-height:1.28; margin-bottom:10px; color:#eef4ff; } #game-screen .hint-box{ background:rgba(255,210,80,.1); border:1px solid rgba(255,210,80,.25); color:#ffe6a0; border-radius:10px; padding:8px 11px; font-size:12px; margin-bottom:9px; } #game-screen .options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } #game-screen .option-btn{ display:flex; align-items:center; gap:9px; text-align:left; cursor:pointer; padding:11px 13px; border-radius:12px; background:rgba(18,26,44,.82); border:1.5px solid rgba(120,200,255,.2); color:#e6eeff; font-size:13px; font-weight:600; transition:.15s; } #game-screen .option-btn:hover{ border-color:var(--neon); background:rgba(30,60,90,.82); box-shadow:0 0 14px rgba(78,225,255,.25); } #game-screen .option-letter{ width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; border-radius:7px; font-weight:900; font-size:12px; color:#bfe9ff; background:rgba(78,225,255,.16); border:1px solid rgba(78,225,255,.3); } #game-screen .opt-text{ flex:1; } #game-screen .option-btn.correct{ border-color:var(--grn)!important; background:rgba(57,224,138,.24)!important; box-shadow:0 0 16px rgba(57,224,138,.3); } #game-screen .option-btn.correct .option-letter{ background:var(--grn); color:#063; } #game-screen .option-btn.wrong{ border-color:var(--red)!important; background:rgba(255,90,90,.24)!important; } #game-screen .option-btn.wrong .option-letter{ background:var(--red); color:#fff; } #game-screen .option-btn.eliminated{ opacity:.2; filter:grayscale(1); pointer-events:none; border-style:dashed; } #game-screen .option-btn.eliminated .opt-text{ text-decoration:line-through; } #game-screen .option-btn.hidden,#game-screen .option-btn.disabled{ opacity:.25; pointer-events:none; } #game-screen .opt-tick{ margin-left:auto; color:var(--grn); font-weight:900; } #game-screen .next-btn{ display:inline-flex; align-items:center; gap:6px; margin:10px auto 0; padding:10px 28px; border:none; border-radius:24px; cursor:pointer; font-weight:800; color:#062; background:linear-gradient(120deg,#6dffa0,#2ecc71); box-shadow:0 8px 22px rgba(46,204,113,.4); } /* circular timer */ #game-screen .rd-timer{ position:relative; width:clamp(84px,9vw,112px); aspect-ratio:1; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; padding:0; } #game-screen .rd-timer svg{ width:100%; height:100%; transform:rotate(-90deg); } #game-screen .rr-bg{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:9; } #game-screen .rr-fg{ fill:none; stroke:var(--org); stroke-width:9; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:0; filter:drop-shadow(0 0 6px var(--org)); } #game-screen .rd-timer.urgent .rr-fg{ stroke:var(--red); filter:drop-shadow(0 0 8px var(--red)); } #game-screen .rd-tnum{ position:absolute; text-align:center; } #game-screen .rd-tnum span{ font-size:clamp(22px,2.4vw,30px); font-weight:900; color:#fff; } #game-screen .rd-tnum small{ display:block; font-size:8px; letter-spacing:2px; color:#8fb4d8; } #game-screen .rd-timer.urgent .rd-tnum span{ color:var(--red); } @keyframes rdRing{ to{ stroke-dashoffset:327; } } #game-screen .stress-bg-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; } /* START TRANSITION */ .cine-transition{ position:fixed; inset:0; z-index:9998; background:#05070d; opacity:0; pointer-events:none; } .cine-transition.play{ animation:cineWipe 1s ease forwards; } @keyframes cineWipe{ 0%{opacity:0} 25%{opacity:1} 70%{opacity:1} 100%{opacity:0} } #game-screen.cine-in .rd-hud{ animation:dropIn .5s .1s both; } #game-screen.cine-in .rd-context{ animation:dropIn .5s .2s both; } #game-screen.cine-in .rd-qzone{ animation:riseIn .55s .25s both; } #game-screen.cine-in .rd-student{ animation:slideL .6s .15s both; } #game-screen.cine-in .rd-prof{ animation:slideR .6s .15s both; } #game-screen.cine-in .rd-bg{ animation:zoomIn 1.2s ease both; } @keyframes zoomIn{ from{transform:scale(1.14)} to{transform:scale(1.04)} } @keyframes dropIn{ from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} } @keyframes riseIn{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} } @keyframes slideL{ from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:none} } @keyframes slideR{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} } /* ROTATE HINT (unused now) */ .rotate-hint{ position:fixed; inset:0; z-index:9999; display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(5,7,13,.96); color:#cfe4ff; text-align:center; font-weight:700; padding:24px; } /* ============ PHONE / PORTRAIT (matches the mockup) ============ */ @media (max-width:820px){ .rotate-hint{ display:none !important; } /* kill the leftover rotate overlay */ #game-container{ width:100vw; height:100vh; height:100dvh; } #game-screen:not(.active){ display:none; } #game-screen.active{ display:flex; flex-direction:column; padding:7px; gap:6px; overflow-y:auto; padding-bottom:0; } #game-screen .rd-bg{ background-image:url('../assets/classroom-portrait.png'); transform:none; } /* HUD โ€” shorter, streak shows just ๐Ÿ”ฅ + number */ #game-screen .rd-hud{ position:static; top:auto; left:auto; right:auto; display:flex; flex-wrap:nowrap; gap:6px; padding:6px 8px; border-radius:13px; } #game-screen .rd-chip{ flex:1; min-width:0; flex-direction:column; align-items:center; gap:2px; text-align:center; } #game-screen .rd-chip .ic{ font-size:16px; } #game-screen .rd-chip .lb{ font-size:7px; } #game-screen .rd-chip .vl{ font-size:13px; min-height:13px; } #game-screen .rd-chip.q{ margin:0; padding:0; border-left:none; } #game-screen .rd-chip.q .vl{ color:#eaf1ff; } #game-screen .streak-chip{ flex-direction:row !important; gap:5px; overflow:hidden; } #game-screen .streak-chip .lb{ display:none !important; } /* remove "STREAK" text */ #game-screen .streak-chip .ic{ font-size:16px; } #game-screen .streak-chip #streak-display{ display:inline-block; font-size:16px; font-weight:900; color:#ff9f45; line-height:1; animation:none !important; transform:none !important; white-space:nowrap; overflow:hidden; } #game-screen .streak-chip #streak-display *{ display:none !important; } #game-screen #streak-popup{ display:none !important; } #game-screen .rd-chip.pop{ animation:streakPop .45s ease; } #game-screen .rd-chip .mini{ display:none; } #game-screen .rd-hud .rd-lifelines{ display:none; } #game-screen #rd-fs{ display:none; } #game-screen .rd-context{ display:none; } /* characters โ€” 10โ€“15% smaller */ #game-screen .rd-scene{ position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:6px; padding:0 2px; } #game-screen .rd-student,#game-screen .rd-prof{ position:static; left:auto; right:auto; bottom:auto; width:38%; max-width:none; } #game-screen .rd-student img,#game-screen .rd-prof-img{ width:auto; max-width:100%; height:auto; max-height:26vh; margin:0 auto; display:block; } /* action row: Hint ยท Timer ยท 50/50 โ€” smaller timer & lifelines, thinner ring */ #game-screen .rd-actionrow{ display:flex; align-items:center; justify-content:center; gap:9px; z-index:4; } #game-screen .rd-actionrow .rd-life{ flex:1; justify-content:center; padding:9px 8px; font-size:11px; border-radius:13px; } #game-screen .rd-actionrow .rd-timer{ position:static; width:66px; flex:0 0 auto; } #game-screen .rd-actionrow .rd-timer .rr-bg,#game-screen .rd-actionrow .rd-timer .rr-fg{ stroke-width:6; } #game-screen .rd-actionrow .rd-tnum span{ font-size:18px; } #game-screen .rd-actionrow .rd-tnum small{ font-size:7px; } #game-screen .rd-timer.urgent{ animation:timerPulse 1s ease-in-out infinite; } /* question card โ€” tighter padding, full width */ #game-screen .rd-qzone{ position:static; left:auto; right:auto; bottom:auto; transform:none; width:auto; z-index:4; margin-top:4px; flex:1 1 auto; display:flex; flex-direction:column; } #game-screen .rd-qcard{ max-width:none; padding:9px 12px; flex:1 1 auto; display:flex; flex-direction:column; border-radius:16px 16px 0 0; } #game-screen .rd-qhead{ margin-bottom:6px; } #game-screen .question-text{ font-size:15px; margin-bottom:8px; } /* options โ€” vertical, shorter, tighter spacing */ #game-screen .rd-qcard .options-grid{ margin-top:auto; grid-template-columns:1fr; gap:6px; } #game-screen .option-btn{ padding:9px 11px; font-size:12.5px; } #game-screen .option-letter{ width:22px; height:22px; font-size:11px; } /* Next button โ€” sticky at the bottom, always visible */ #game-screen .next-btn{ position:sticky; bottom:6px; z-index:6; margin:8px auto 6px; } /* button press feedback */ #game-screen .option-btn:active,#game-screen .rd-life:active,#game-screen .next-btn:active{ transform:scale(.97); } /* keyframes */ @keyframes streakPop{ 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} } @keyframes timerPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} } } /* ============================================================ STRESS-CHANGE POPUP โ€” same position/animation at every screen size and orientation (previously only defined under the max-width:820px block above, so it silently fell back to a different right-edge position on wider/landscape viewports). ============================================================ */ /* small floating notification between the characters, above the timer */ #game-screen #stress-change{ position:fixed; top:46%; left:50%; transform:translate(-50%,-50%); z-index:20; font-size:12px; padding:7px 13px; border-radius:12px; white-space:nowrap; pointer-events:none; animation:stressPop 1.6s ease forwards; } @keyframes stressPop{ 0%{opacity:0; transform:translate(-50%,-42%) scale(.9)} 14%{opacity:1; transform:translate(-50%,-50%) scale(1)} 72%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-58%) scale(.95)} }