:root{--bg-dark: #0a0612;--primary: #8b5cf6;--primary-glow: rgba(139, 92, 246, .4);--gold: #ffd700;--gold-glow: rgba(255, 215, 0, .4);--text-light: #f3f4f6;--text-muted: #9ca3af;--glass-bg: rgba(18, 10, 32, .65);--glass-border: rgba(255, 255, 255, .08)}html,body{margin:0;padding:0;width:100%;height:100%;height:-webkit-fill-available;overflow:hidden;position:fixed;background-color:var(--bg-dark)}*{box-sizing:border-box}body{color:var(--text-light);font-family:Outfit,sans-serif;display:flex;justify-content:center;align-items:center}#app-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#1b1030,#05030a);padding:20px}@media (max-width: 1000px),(max-height: 600px){#app-container{padding:0}}#game-container{position:relative;width:100vw;height:56.25vw;max-width:960px;max-height:540px;aspect-ratio:16 / 9;border-radius:20px;overflow:hidden;box-shadow:0 25px 50px -12px #000000b3,0 0 40px #8b5cf626;background-color:#0d091b;border:1px solid rgba(139,92,246,.25)}@media (max-width: 1000px),(max-height: 600px){#game-container{width:100vw;height:56.25vw;max-width:177.78vh;max-height:100vh;border-radius:0;border:none}}#game-canvas{display:block;width:100%;height:100%;background-color:#0b0718}.overlay-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:10}.overlay-screen.active{opacity:1;pointer-events:auto}.screen-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;padding:30px}.glass-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:24px;padding:40px;max-width:500px;width:90%;box-shadow:0 20px 40px #00000080,inset 0 1px #ffffff1a;transform:translateY(20px);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.overlay-screen.active .glass-card{transform:translateY(0)}#start-screen{background:radial-gradient(circle at center,#100824e6,#05030afa)}.title-container{margin-bottom:20px}.subtitle{font-size:11px;font-weight:800;letter-spacing:4px;color:var(--primary);text-transform:uppercase}.game-title{font-size:58px;font-weight:800;line-height:1;letter-spacing:-1px;background:linear-gradient(135deg,#fff,#c084fc,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 20px rgba(139,92,246,.3)}.groningen-title{font-size:16px;color:var(--text-muted);font-style:italic;letter-spacing:1px}.card-art-container{width:320px;height:180px;border-radius:16px;overflow:hidden;margin-bottom:25px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 25px #0006}#splash-art{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.card-art-container:hover #splash-art{transform:scale(1.05)}.instructions-panel{display:flex;gap:20px;margin-bottom:25px}.instruction-item{display:flex;align-items:center;gap:8px;background:#ffffff0a;padding:8px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.05);font-size:13px}.key{background:#271a3c;border:1px solid rgba(255,255,255,.2);border-bottom:3px solid rgba(255,255,255,.2);border-radius:6px;padding:2px 8px;font-family:monospace;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center}.desc{color:var(--text-muted)}.high-score-container{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text-light);margin-bottom:25px}.gold-icon{color:var(--gold);text-shadow:0 0 10px var(--gold-glow)}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:14px 36px;font-family:Outfit,sans-serif;font-size:16px;font-weight:800;border-radius:14px;border:none;cursor:pointer;overflow:hidden;transition:all .3s cubic-bezier(.25,.8,.25,1);outline:none}.btn-primary{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;box-shadow:0 4px 15px var(--primary-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px var(--primary-glow),0 0 15px #8b5cf699}.btn-primary:active{transform:translateY(1px)}.btn-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 60%);pointer-events:none;transform:scale(.5);transition:transform .5s ease}.btn-primary:hover .btn-glow{transform:scale(1.2)}.btn-secondary{background:#ffffff0f;color:var(--text-light);border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:#ffffff1f;border-color:#fff3}.hud-overlay{position:absolute;top:0;left:0;width:100%;padding:20px 25px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:5}.hud-overlay.active{opacity:1}.hud-left,.hud-right{display:flex;gap:20px;pointer-events:auto}.hud-item{background:#0a051499;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:12px;padding:6px 14px;display:flex;flex-direction:column}.hud-label{font-size:9px;font-weight:800;color:var(--primary);letter-spacing:1.5px}.hud-value{font-size:18px;font-weight:600;color:#fff;display:flex;align-items:center;gap:6px}.neon-gold{color:var(--gold);text-shadow:0 0 8px var(--gold-glow)}.onion-icon{font-size:14px}.hud-btn{background:#0a051499;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--text-light);cursor:pointer;transition:all .2s ease;outline:none}.hud-btn:hover{background:#8b5cf633;border-color:#8b5cf666;color:#fff}#game-over-screen{background:#05030acc}.game-over-title{font-size:38px;font-weight:800;color:#ef4444;text-shadow:0 0 15px rgba(239,68,68,.4);margin-bottom:5px}.game-over-subtitle{font-size:14px;color:var(--text-muted);margin-bottom:25px;text-transform:uppercase;letter-spacing:2px}.stats-summary{width:100%;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:20px;margin-bottom:25px;display:flex;flex-direction:column;gap:12px}.summary-item{display:flex;justify-content:space-between;align-items:center}.summary-label{color:var(--text-muted);font-size:14px}.summary-val{font-size:18px;font-weight:600}.total-score-item{border-top:1px solid rgba(255,255,255,.1);padding-top:12px;margin-top:4px}.total-score-item .summary-val{font-size:24px;font-weight:800;color:var(--primary);text-shadow:0 0 10px var(--primary-glow)}.quote-text{font-size:14px;font-style:italic;color:var(--text-muted);margin-bottom:30px;line-height:1.5;max-width:360px}.game-over-actions{display:flex;gap:15px;width:100%}.game-over-actions .btn{flex:1}#pause-screen{background:#05030ab3}.mini-card{max-width:320px}.mini-card h2{font-size:28px;font-weight:800;margin-bottom:10px;letter-spacing:2px}.mini-card p{color:var(--text-muted);font-size:13px;margin-bottom:20px}.mini-card .btn{width:100%}#mobile-controls{position:absolute;bottom:15px;left:20px;right:20px;width:auto;display:flex;justify-content:space-between;pointer-events:none;z-index:8;display:none}.mobile-btn{pointer-events:auto;width:75px;height:75px;border-radius:50%;background:#120a2059;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.1);color:var(--text-light);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:Outfit,sans-serif;font-weight:800;font-size:10px;box-shadow:0 8px 20px #0000004d,inset 0 1px #ffffff0d;opacity:.65;touch-action:none;-webkit-user-select:none;user-select:none;transition:all .1s ease}.mobile-btn i{font-size:20px}.mobile-btn:active{transform:scale(.9);background:#8b5cf673;border-color:var(--primary);box-shadow:0 0 20px var(--primary-glow);opacity:.95}#portrait-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,#1b1030,#05030a);display:flex;justify-content:center;align-items:center;z-index:100;text-align:center;padding:30px;display:none}.rotate-device-content{display:flex;flex-direction:column;align-items:center;gap:15px}.rotate-icon{font-size:58px;color:var(--primary);animation:rotateDevice 2.5s infinite linear}#portrait-overlay h2{font-size:24px;font-weight:800;margin-top:10px}#portrait-overlay p{color:var(--text-muted);font-size:14px;max-width:280px}@keyframes rotateDevice{0%{transform:rotate(0)}30%{transform:rotate(-90deg)}70%{transform:rotate(-90deg)}to{transform:rotate(0)}}@media (orientation: portrait){#portrait-overlay{display:flex!important}}@media (max-height: 520px){.screen-content{padding:10px}.game-title{font-size:32px;line-height:1}.subtitle{font-size:9px;letter-spacing:2px}.groningen-title{font-size:11px}.card-art-container{width:180px;height:100px;margin-bottom:10px}.instructions-panel{display:none!important}.high-score-container{margin-bottom:10px;font-size:13px}.btn{padding:8px 24px;font-size:13px;border-radius:8px}.glass-card{padding:16px 24px;border-radius:16px;max-width:440px;width:95%}.game-over-title{font-size:24px;margin-bottom:2px}.game-over-subtitle{font-size:10px;margin-bottom:10px;letter-spacing:1.5px}.stats-summary{padding:10px 15px;margin-bottom:10px;gap:6px}.summary-label{font-size:12px}.summary-val{font-size:14px}.total-score-item{padding-top:8px;margin-top:2px}.total-score-item .summary-val{font-size:18px}.quote-text{font-size:11px;margin-bottom:15px;line-height:1.3;max-width:320px}.game-over-actions{gap:10px}.hud-overlay{padding:10px 15px}.hud-item{padding:4px 10px;border-radius:8px}.hud-value{font-size:14px}.hud-btn{width:32px;height:32px;border-radius:8px}.mobile-btn{width:65px;height:65px}.mobile-btn i{font-size:18px}.mobile-btn span{font-size:8px}#mobile-controls{bottom:10px;left:15px;right:15px}}
