:root{--gold: #d4af37;--gold-glow: rgba(212, 175, 55, .5);--deep-purple: #1a0b2e;--cosmic-blue: #0f172a;--text-light: #e2e8f0;--glass: rgba(15, 23, 42, .7);--glass-border: rgba(255, 255, 255, .1);--accent: #8b5cf6}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Inter,sans-serif;background-color:var(--deep-purple);color:var(--text-light);overflow:hidden;height:100vh;width:100vw}h1,h2,h3,.menu-btn{font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:2px}canvas{display:block}#app{position:relative;width:100%;height:100%}#game-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;display:flex;flex-direction:column;padding:20px}header{display:flex;justify-content:space-between;align-items:center;pointer-events:auto}.glow-text{color:var(--gold);text-shadow:0 0 10px var(--gold-glow),0 0 20px var(--gold-glow);font-size:1.5rem}.header-actions{display:flex;align-items:center;gap:15px}.audio-btn{background:var(--glass);border:1px solid var(--glass-border);color:var(--gold);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:all .3s ease;font-size:1.2rem}.audio-btn:hover{border-color:var(--gold);transform:scale(1.1);box-shadow:0 0 10px var(--gold-glow)}.lang-toggle{display:flex;gap:10px}.lang-btn{background:var(--glass);border:1px solid var(--glass-border);color:var(--text-light);padding:5px 10px;cursor:pointer;border-radius:4px;font-size:.8rem;transition:all .3s ease}.lang-btn.active{background:var(--gold);color:var(--deep-purple);border-color:var(--gold);font-weight:700}#main-menu{margin-top:auto;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;pointer-events:auto}.menu-btn{background:var(--glass);border:1px solid var(--glass-border);color:var(--text-light);padding:12px 20px;cursor:pointer;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s cubic-bezier(.175,.885,.32,1.275);font-size:.9rem}.menu-btn:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 5px 15px #00000080;background:#8b5cf633}#controls{display:flex;gap:10px}.action-btn-small{background:var(--gold);border:1px solid var(--gold);color:var(--deep-purple);padding:6px 12px;cursor:pointer;border-radius:4px;font-family:Cinzel,serif;font-size:.75rem;font-weight:700;transition:all .3s ease;box-shadow:0 2px 8px #0000004d}.action-btn-small:hover{transform:scale(1.05);box-shadow:0 4px 12px var(--gold-glow)}.action-btn{background:linear-gradient(135deg,var(--gold),#b8860b);border:none;color:var(--deep-purple);padding:15px 30px;border-radius:30px;font-weight:700;cursor:pointer;font-family:Cinzel,serif;box-shadow:0 4px 15px #0000004d;transition:all .3s ease}.action-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px var(--gold-glow)}.pulse{animation:pulse-animation 2s infinite}@keyframes pulse-animation{0%{box-shadow:0 0 #d4af37b3}70%{box-shadow:0 0 0 15px #d4af3700}to{box-shadow:0 0 #d4af3700}}#reading-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:600px;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:20px;padding:40px;pointer-events:auto;z-index:100;transition:all .5s ease;max-height:80vh;overflow-y:auto}.hidden{opacity:0;visibility:hidden;transform:translate(-50%,-40%) scale(.9)!important}#reading-title{color:var(--gold);margin-bottom:20px;text-align:center}#reading-text{font-family:Playfair Display,serif;line-height:1.6;font-size:1.1rem;margin-bottom:30px}.close-btn{display:block;margin:0 auto;background:transparent;border:1px solid var(--gold);color:var(--gold);padding:10px 25px;border-radius:20px;cursor:pointer;transition:all .3s ease}.close-btn:hover{background:var(--gold);color:var(--deep-purple)}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--deep-purple);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;transition:opacity 1s ease}#loading-screen.visible{opacity:1}#loading-screen:not(.visible){opacity:0;pointer-events:none}.loader{width:60px;height:60px;border:3px solid var(--glass-border);border-top:3px solid var(--gold);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.deck-visual{transition:all .5s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 5px 15px rgba(0,0,0,.5))}#card-detail-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:95%;max-width:400px;background:var(--glass);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border:1px solid var(--gold);border-radius:15px;padding:30px;z-index:200;pointer-events:auto;box-shadow:0 0 30px var(--gold-glow);text-align:center;transition:all .5s ease}#card-detail-popup h3{color:var(--gold);margin-bottom:15px;font-size:1.4rem;font-family:Cinzel,serif}#card-detail-popup .keywords{font-weight:700;font-style:italic;margin-bottom:15px;color:var(--accent)}#card-detail-popup .description{font-size:1rem;line-height:1.5;margin-bottom:20px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}@media (max-width: 600px){.menu-btn{padding:6px 10px;font-size:.7rem}.glow-text{display:none}header{justify-content:space-between;width:100%}#controls{gap:5px}.action-btn-small{padding:5px 8px;font-size:.7rem}}