:root{--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:18px/145% var(--sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}:root{--bg:#0d1b2a;--text:#f0f4f8;--text-h:#fff;--accent:#e8a33d;--accent-2:#1b8c6b;--card-back:#c73e5a;--card-back-2:#9c2a40;--card-border:#f0c04e;--btn-primary:#e8a33d;--btn-primary-hover:#f0c04e;--btn-secondary:transparent;--btn-secondary-hover:#ffffff1a;--btn-text:#1a1a2e;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:18px/145% var(--sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--bg);margin:0;overflow-x:hidden}#root{min-height:100svh}h1{color:var(--text-h);letter-spacing:-.5px;margin:0 0 24px;font-weight:600}p{margin:0}button{font-family:var(--sans);cursor:pointer;border:none;border-radius:12px;padding:14px 32px;font-size:18px;font-weight:600;transition:all .2s}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.primary-btn{background:var(--btn-primary);color:var(--btn-text);box-shadow:0 4px 14px #e8a33d66}.primary-btn:hover{background:var(--btn-primary-hover);transform:translateY(-2px);box-shadow:0 6px 20px #e8a33d80}.primary-btn:active{transform:translateY(0)}.secondary-btn{background:var(--btn-secondary);color:var(--text-h);border:2px solid #ffffff4d}.secondary-btn:hover{background:var(--btn-secondary-hover);border-color:#ffffff80}.water-canvas{z-index:0;width:100%;height:100%;display:block;position:fixed;inset:0}.app-container{z-index:1;box-sizing:border-box;justify-content:center;align-items:center;min-height:100svh;padding:24px;display:flex;position:relative}.screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:24px;width:100%;max-width:600px;animation:.5s fade-in;display:flex}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.home-screen .home-title{text-shadow:0 4px 30px #0009;font-size:96px;font-weight:800;line-height:1.1}@media (width<=1024px){.home-screen .home-title{font-size:64px}}@media (width<=600px){.home-screen .home-title{font-size:42px}}.home-screen .primary-btn{border-radius:16px;padding:20px 56px;font-size:32px}@media (width<=1024px){.home-screen .primary-btn{padding:18px 48px;font-size:26px}}@media (width<=600px){.home-screen .primary-btn{padding:16px 40px;font-size:22px}}.setup-screen .setup-title{text-shadow:0 2px 12px #00000080;font-size:36px}@media (width<=600px){.setup-screen .setup-title{font-size:28px}}.setting-group{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0000004d;border-radius:16px;flex-direction:column;gap:12px;width:100%;max-width:400px;padding:28px;display:flex}.setting-label{color:var(--text-h);justify-content:space-between;align-items:center;font-size:20px;font-weight:600;display:flex}.setting-value{color:var(--accent);font-size:24px}.timer-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:4px;outline:none;width:100%;height:8px}.timer-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:3px solid #fff;border-radius:50%;width:24px;height:24px;box-shadow:0 2px 8px #0000004d}.timer-slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:3px solid #fff;border-radius:50%;width:24px;height:24px;box-shadow:0 2px 8px #0000004d}.slider-range-labels{color:#fff9;justify-content:space-between;font-size:14px;display:flex}.setting-hint{color:#ffffffb3;font-size:15px;line-height:1.5}.setup-actions{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.game-screen{max-width:1100px}.loading-text{color:var(--text-h);text-shadow:0 2px 12px #00000080;font-size:32px;font-weight:600;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.game-top-bar{justify-content:space-between;align-items:center;gap:16px;width:100%;display:flex}.game-info{flex-direction:column;align-items:center;gap:4px;display:flex}.game-top-actions{flex-shrink:0;gap:12px;display:flex}.exit-btn,.history-btn{color:#fff;background:#e4007cd9;border:2px solid #fff3;border-radius:10px;flex-shrink:0;padding:10px 24px;font-size:16px}:is(.exit-btn,.history-btn):hover{background:#e4007c;border-color:#fff6;transform:translateY(-1px)}:is(.exit-btn,.history-btn):active{transform:translateY(0)}@media (width<=600px){.exit-btn,.history-btn{padding:8px 16px;font-size:13px}}.card-counter{color:#fffc;font-size:18px;font-weight:500}.card-name{color:var(--text-h);text-shadow:0 2px 12px #00000080;text-transform:capitalize;font-size:32px;font-weight:700}@media (width<=600px){.card-name{font-size:22px}}.game-area{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:50px;padding:16px;display:flex}@media (width<=600px){.game-area{gap:16px;padding:8px}}.deck-stack{aspect-ratio:120/215;flex-shrink:0;height:min(72vh,640px);position:relative}@media (width<=600px){.deck-stack{height:min(55vh,280px)}}.card-back-stack{background:linear-gradient(135deg, var(--card-back) 0%, var(--card-back-2) 100%);border:3px solid var(--card-border);border-radius:10px;position:absolute;inset:0;box-shadow:0 4px 12px #0006}.card-back-stack:after{content:"";background:repeating-linear-gradient(45deg,#0000,#0000 8px,#ffffff0d 8px 16px);border:2px solid #f0c04e66;border-radius:6px;position:absolute;inset:8px}.card-with-timer{aspect-ratio:240/430;flex-shrink:0;height:min(75vh,680px);position:relative}@media (width<=600px){.card-with-timer{height:min(58vh,300px)}}.timer-ring-svg{pointer-events:none;width:calc(100% + 20px);height:calc(100% + 20px);position:absolute;top:-10px;left:-10px;overflow:visible}.timer-ring-progress{stroke-dasharray:100;stroke-dashoffset:0;animation:timer-deplete var(--timer-duration) linear forwards;will-change:stroke-dashoffset}.timer-ring-progress.paused{animation-play-state:paused}@keyframes timer-deplete{0%{stroke-dashoffset:0}to{stroke-dashoffset:100px}}.card-flip-container{perspective:1200px;width:100%;height:100%;position:relative}.card-face{backface-visibility:hidden;border-radius:16px;transition:transform .3s;position:absolute;inset:0;overflow:hidden;box-shadow:0 8px 30px #00000080}.card-back-face{background:linear-gradient(135deg, var(--card-back) 0%, var(--card-back-2) 100%);border:5px solid var(--card-border)}.card-back-face:after{content:"";background:repeating-linear-gradient(45deg,#0000,#0000 12px,#ffffff0f 12px 24px);border:3px solid #f0c04e80;border-radius:8px;position:absolute;inset:12px}.card-front-face{border:5px solid var(--card-border);background:#fff}.card-front-face img{object-fit:cover;width:100%;height:100%;display:block}.card-flip-container.show-front .card-back-face{transform:rotateY(180deg)}.card-flip-container.show-front .card-front-face,.card-flip-container.show-back .card-back-face{transform:rotateY(0)}.card-flip-container.show-back .card-front-face{transform:rotateY(180deg)}.game-hint{color:#fff9;margin-top:8px;font-size:14px}.end-screen .end-title{text-shadow:0 2px 12px #00000080;font-size:36px}@media (width<=600px){.end-screen .end-title{font-size:26px}}.end-subtitle{color:#fffc;margin-bottom:8px;font-size:18px}.end-actions{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.history-overlay{z-index:20;box-sizing:border-box;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0d1b2acc;justify-content:center;align-items:center;padding:24px;animation:.2s fade-in;display:flex;position:fixed;inset:0}.history-modal{background:#0d1b2a;border:2px solid #e4007c;border-radius:20px;flex-direction:column;gap:20px;width:100%;max-width:720px;max-height:85vh;padding:24px;display:flex;box-shadow:0 10px 40px #0009}.history-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.history-title{color:#e4007c;margin:0;font-size:22px}@media (width<=600px){.history-title{font-size:18px}}.history-close-btn{color:#fff;background:#e4007c;border:2px solid #fff3;border-radius:10px;flex-shrink:0;padding:10px 24px;font-size:16px}.history-close-btn:hover{background:#ff2196;border-color:#fff6;transform:translateY(-1px)}.history-close-btn:active{transform:translateY(0)}.history-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:14px;padding-right:4px;display:grid;overflow-y:auto}.history-card{flex-direction:column;align-items:center;gap:6px;display:flex}.history-card img{aspect-ratio:120/215;object-fit:cover;border:2px solid #e4007c;border-radius:8px;width:100%;box-shadow:0 2px 10px #0006}.history-card-name{text-align:center;color:#ffffffd9;text-transform:capitalize;font-size:12px}
