:root {
  --bg: #07111f;
  --panel: rgba(7,17,31,.92);
  --line: rgba(255,255,255,.14);
  --text: #f8fbff;
  --muted: #adc0d4;
  --accent: #ffd166;
  --accent2: #68d391;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% -20%, #244567 0, #0a1930 38%, #050a12 100%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
body { min-height: 100vh; display: grid; place-items: center; padding: 18px; overflow-x: hidden; }
button { font: inherit; }
.game-shell { width: min(1440px, 100%); }
.topbar, .mission-strip { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.topbar { margin-bottom: 10px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; font-family: Georgia, serif; font-size:26px; font-weight:800; background:linear-gradient(145deg,#ffe08a,#ffbd45); color:#1a2a36; box-shadow:0 8px 28px rgba(255,190,70,.22); }
.brand strong { display:block; letter-spacing:.08em; }
.brand span { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.hud { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.hud > span, .icon-btn { border:1px solid var(--line); background:rgba(5,12,22,.72); padding:8px 11px; border-radius:999px; font-weight:800; }
.icon-btn { color:white; cursor:pointer; }
.stage-wrap { position:relative; border-radius:24px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.11); background:#6fc7f2; aspect-ratio:16/9; }
canvas { width:100%; height:100%; display:block; touch-action:none; }
.panel { border:1px solid rgba(255,255,255,.15); background:var(--panel); backdrop-filter: blur(16px); box-shadow:0 25px 80px rgba(0,0,0,.42); }
.overlay-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(540px,88%); padding:28px; border-radius:24px; text-align:center; z-index:20; }
.eyebrow { color:var(--accent); font-size:12px; letter-spacing:.18em; font-weight:900; }
.overlay-panel h1, .overlay-panel h2 { margin:6px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size:clamp(42px,7vw,72px); line-height:1.05; }
.overlay-panel .subtitle { margin:4px 0 16px; color:#cfe8ff; font-weight:800; }
.overlay-panel p { color:#d5e1ed; line-height:1.6; }
.controls-copy { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:16px 0; }
.controls-copy span { border:1px solid var(--line); border-radius:999px; padding:7px 11px; color:#d6e6f6; font-size:12px; }
.primary-btn { border:0; border-radius:16px; padding:14px 22px; min-width:180px; background:linear-gradient(180deg,#ffe285,#ffc447); color:#1e2730; font-weight:950; letter-spacing:.04em; cursor:pointer; box-shadow:0 10px 30px rgba(255,197,75,.25); }
.primary-btn:active { transform:translateY(1px); }
.learn-card { position:absolute; z-index:12; left:50%; top:18px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; min-width:min(420px,86%); padding:12px 14px; border-radius:20px; background:rgba(8,18,33,.91); border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 40px rgba(0,0,0,.28); }
.learn-emoji { width:60px; height:60px; border-radius:16px; display:grid; place-items:center; font-size:38px; background:rgba(255,255,255,.08); }
.learn-copy { flex:1; }
.arabic { font-family: 'Noto Naskh Arabic', 'Amiri', Georgia, serif; font-size:33px; font-weight:800; line-height:1.1; direction:rtl; }
#learnRoman { color:#9fbed8; font-size:12px; }
#learnMalay { display:block; margin-top:2px; }
.speaker-btn { border:1px solid var(--line); background:rgba(255,255,255,.06); color:white; border-radius:14px; width:46px; height:46px; cursor:pointer; }
.challenge-panel { position:absolute; z-index:30; left:50%; top:50%; transform:translate(-50%,-50%); width:min(640px,91%); padding:24px; border-radius:24px; text-align:center; }
.checkpoint-chip { display:inline-block; border-radius:999px; background:rgba(104,211,145,.12); color:#a8f2c3; border:1px solid rgba(104,211,145,.3); padding:6px 10px; font-weight:900; font-size:11px; letter-spacing:.08em; }
.challenge-panel h2 { margin:12px 0 10px; }
.audio-prompt { color:white; background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:16px; padding:11px 17px; font-size:26px; cursor:pointer; }
.challenge-panel p { color:#c8d7e6; }
.challenge-options { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.option-card { min-height:130px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.055); color:white; cursor:pointer; display:grid; place-items:center; align-content:center; gap:8px; padding:10px; }
.option-card .emoji { font-size:48px; }
.option-card .ms { font-size:12px; color:#acc0d3; }
.option-card:hover { background:rgba(255,255,255,.1); }
.option-card.correct { outline:2px solid #68d391; background:rgba(104,211,145,.12); }
.option-card.wrong { animation:shake .28s linear; outline:2px solid #ff7a7a; }
.feedback { min-height:24px; margin-top:12px; font-weight:900; }
@keyframes shake { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:20px 0; }
.summary-grid div { padding:12px 8px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.05); }
.summary-grid strong { display:block; font-size:24px; color:#ffe082; }
.summary-grid span { font-size:11px; color:#b9cada; }
.word-summary { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:12px 0 20px; }
.word-pill { border:1px solid var(--line); border-radius:999px; padding:7px 10px; font-size:13px; }
.mobile-controls { position:absolute; z-index:10; left:0; right:0; bottom:14px; display:none; justify-content:space-between; padding:0 14px; pointer-events:none; }
.mobile-controls button { pointer-events:auto; width:58px; height:58px; border-radius:18px; border:1px solid rgba(255,255,255,.23); background:rgba(7,17,31,.54); color:white; font-size:24px; font-weight:900; backdrop-filter:blur(9px); touch-action:none; }
.move-controls { display:flex; gap:8px; }
.mobile-controls .jump { width:68px; height:68px; border-radius:50%; }
.mission-strip { color:#b4c6d7; font-size:12px; padding:10px 4px 0; justify-content:center; flex-wrap:wrap; }
.mission-strip span { padding:4px 8px; }
.hidden { display:none !important; }
@media (pointer:coarse), (max-width:960px) { .mobile-controls { display:flex; } body { padding:6px; } .topbar { align-items:flex-start; } .brand span { display:none; } .hud { gap:4px; } .hud > span, .icon-btn { padding:6px 8px; font-size:12px; } .mission-strip { display:none; } .challenge-options { grid-template-columns:repeat(3,1fr); } .option-card { min-height:100px; } .option-card .emoji{font-size:36px;} .learn-card{top:8px;} }
@media (max-width:600px) { .brand strong{font-size:12px}.brand-mark{width:36px;height:36px;border-radius:11px}.topbar{margin-bottom:5px}.overlay-panel{padding:20px}.overlay-panel p{font-size:13px}.challenge-panel{padding:16px}.challenge-panel p{font-size:13px}.challenge-options{gap:7px}.option-card{padding:7px}.arabic{font-size:27px}.learn-emoji{width:48px;height:48px;font-size:30px}.learn-card{padding:8px 10px;gap:9px}.speaker-btn{width:40px;height:40px}.mobile-controls{bottom:8px}.mobile-controls button{width:50px;height:50px}.mobile-controls .jump{width:58px;height:58px} }

/* Portal integration: contained controls and readable, scrollable overlays. */
.portal-back {display:inline-block;color:#ffe082;padding:8px 0;margin-bottom:6px;font-size:14px;text-decoration:none;min-height:44px}
.game-shell {max-width:min(1440px,calc((100dvh - 120px)*16/9));}
.panel {max-height:96%;overflow-y:auto;overscroll-behavior:contain;}
.stage-wrap {touch-action:none;}
button:focus-visible,a:focus-visible {outline:3px solid #ffe082;outline-offset:3px;}
@media (max-height:500px) and (orientation:landscape){body{padding:4px}.game-shell{max-width:calc((100dvh - 88px)*16/9)}.portal-back{margin:0;padding:2px 0;min-height:26px}.topbar{margin-bottom:4px}.brand-mark{width:30px;height:30px}.mission-strip{display:none}.panel{padding:12px}.overlay-panel h1,.overlay-panel h2{font-size:36px}.overlay-panel p,.controls-copy{margin:6px 0}.challenge-panel h2{font-size:18px;margin:4px}.challenge-options{margin-top:6px}.option-card{min-height:70px}.option-card .emoji{font-size:30px}.feedback{margin-top:4px}.challenge-panel p{margin:6px}.summary-grid{margin:8px 0}}
@media (orientation:portrait) and (max-width:600px){.game-shell{max-width:100%}.stage-wrap{overflow:visible;margin-bottom:16px}.panel{position:relative;left:auto;top:auto;transform:none;width:100%;max-height:none;margin-top:8px}.mobile-controls{top:calc((100vw - 12px)*9/16 - 66px);bottom:auto}.learn-card{top:4px;min-width:0;width:94%;}.learn-card .learn-emoji{display:none}.learn-card .arabic{font-size:24px}.learn-card{padding:4px 8px}.stage-wrap:has(.panel:not(.hidden)) .mobile-controls{display:none}}
@media(prefers-reduced-motion:reduce){.option-card.wrong{animation:none}}

.rotate-notice[hidden]{display:none}.rotate-notice{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:28px;background:#071423;color:#fff;overflow:auto}.rotate-symbol{font-size:72px;color:#ffd166;line-height:1}.rotate-notice h1{font-size:clamp(25px,7vw,36px);line-height:1.3;margin:0}.rotate-notice p{max-width:340px;margin:0;line-height:1.6;color:#bfcedd}.rotate-notice a{color:#ffd166;padding:12px;min-height:44px}.phone-portrait{overflow:hidden;height:100dvh}.phone-portrait .game-shell{visibility:hidden}.fullscreen-note:empty{display:none}.fullscreen-note{font-size:14px;line-height:1.5;color:#ffe082}.game-fullscreen-note{margin:4px 0 8px}.fullscreen-btn{font-size:12px;min-height:44px;border-radius:10px}.game-shell .hud{align-items:center}.rotate-notice .primary-btn{min-height:48px}html:fullscreen,html:-webkit-full-screen{width:100%;height:100%;background:#071423}@media(orientation:landscape) and (max-height:500px){.fullscreen-btn{padding:5px 8px;min-height:36px}.game-shell{max-width:calc((100dvh - 96px)*16/9)}}