*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--felt: #1c4230;--gold: #c9a84c;--gold-dim: rgba(201, 168, 76, .5);--card-bg: #f7f3e6;--card-border: rgba(201, 168, 76, .28);--card-back: #6b1414;--text-dark: #1a1a1a;--text-mid: #5a5247;--correct: #219150;--correct-bg: rgba(33, 145, 80, .13);--wrong: #c0392b;--wrong-bg: rgba(192, 57, 43, .13);--font-serif: "Playfair Display", Georgia, serif;--font-sans: "DM Sans", system-ui, sans-serif;--card-w: min(220px, 70vw)}html,body{height:100%;overscroll-behavior:none}body{font-family:var(--font-sans);background-color:#3555a6;background-image:radial-gradient(ellipse 80% 60% at 50% 35%,#5a73b1,#223a76);min-height:100dvh;color:var(--text-dark);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23000' fill-opacity='0.07'/%3E%3C/svg%3E");pointer-events:none;z-index:0}#root{height:100%;position:relative;z-index:1}.app{height:100dvh;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom))}.intro-screen{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;width:100%;max-width:400px}.intro-title{font-family:var(--font-serif);font-size:clamp(32px,9vw,48px);font-weight:900;color:var(--gold);line-height:1.1;letter-spacing:-.5px;text-shadow:0 2px 20px rgba(201,168,76,.3)}.intro-subtitle{font-size:15px;color:#ffffff94;max-width:280px;line-height:1.55}.deck-visual-wrapper{margin:4px 0}.deck-visual{position:relative;width:180px;aspect-ratio:5 / 7;margin:0 auto}.deck-card-back,.backing-card{border-radius:13px;background-color:var(--card-back);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0px,rgba(255,255,255,.055) 1px,transparent 1px,transparent 13px),repeating-linear-gradient(-45deg,rgba(255,255,255,.055) 0px,rgba(255,255,255,.055) 1px,transparent 1px,transparent 13px);border:2.5px solid var(--gold);box-shadow:0 5px 20px #00000080,inset 0 1px #ffffff1a}.deck-card-back{position:absolute;top:0;right:0;bottom:0;left:0}.deck-card-back:after{content:"◆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:42px;color:#c9a84c26;pointer-events:none}.card-count-badge{display:inline-flex;flex-direction:column;align-items:center;gap:1px;background:#c9a84c1a;border:1px solid rgba(201,168,76,.4);border-radius:40px;padding:8px 28px}.badge-number{font-family:var(--font-serif);font-size:30px;font-weight:700;color:var(--gold);line-height:1}.badge-label{font-size:11px;color:var(--gold-dim);letter-spacing:2.5px;text-transform:uppercase}.mode-toggle{display:flex;background:#00000040;border-radius:9px;padding:3px;gap:3px}.mode-btn{flex:1;padding:9px 18px;border:1px solid transparent;border-radius:7px;background:transparent;color:#fff6;font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,color .2s,border-color .2s;-webkit-tap-highlight-color:transparent;white-space:nowrap}.mode-btn.active{background:#c9a84c2e;color:var(--gold);border-color:#c9a84c73}.btn-primary{background:linear-gradient(135deg,#d4a84c,#b8922f);color:#1a1108;border:none;border-radius:6px;padding:16px 52px;font-family:var(--font-serif);font-size:17px;font-weight:700;letter-spacing:3.5px;cursor:pointer;box-shadow:0 4px 18px #c9a84c66,inset 0 1px #ffffff38;transition:box-shadow .2s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.btn-primary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.game-screen{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:0}.game-topbar{width:100%;max-width:min(340px,94vw);display:flex;align-items:center;margin-bottom:6px}.btn-back{background:transparent;border:none;color:#ffffff73;font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;padding:4px 0;letter-spacing:.3px;transition:color .15s;-webkit-tap-highlight-color:transparent}.btn-back:hover{color:#ffffffbf}.progress-area{width:100%;max-width:min(340px,94vw);display:flex;flex-direction:column;gap:5px;margin-bottom:20px}.progress-bar-track{height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#b8922f,#e8c96e);border-radius:2px;min-width:4px}.progress-labels{display:flex;justify-content:space-between;font-size:11px;color:#fff6;letter-spacing:.3px}.countdown-track{width:100%;max-width:min(340px,94vw);height:5px;background:#ffffff12;border-radius:3px;overflow:hidden;margin-bottom:10px}.countdown-fill{height:100%;border-radius:3px;background:#27ae60}.score-mode-badge{font-size:13px;color:var(--gold-dim);letter-spacing:1px;margin-top:-10px}.deck-area{position:relative;width:var(--card-w);aspect-ratio:5 / 7;margin-bottom:50px;flex-shrink:0}.backing-card{position:absolute;top:0;right:0;bottom:0;left:0}.backing-card:after{content:"◆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:36px;color:#c9a84c1f;pointer-events:none}.front-card{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;border-radius:16px;background:var(--card-bg);border:1.5px solid var(--card-border);box-shadow:0 8px 28px #00000073,0 2px 8px #0003,inset 0 1px #ffffffd9;display:flex;align-items:center;justify-content:center;transition:box-shadow .2s;overflow:hidden}.front-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;border-radius:16px}.front-card.result-correct{box-shadow:0 8px 28px #00000073,0 0 0 3px var(--correct),inset 0 1px #ffffffd9}.front-card.result-wrong{box-shadow:0 8px 28px #00000073,0 0 0 3px var(--wrong),inset 0 1px #ffffffd9}.card-corner{position:absolute;font-size:10px;color:var(--gold);opacity:.4;line-height:1;pointer-events:none}.card-corner.top-left{top:10px;left:12px}.card-corner.bottom-right{bottom:10px;right:12px;transform:rotate(180deg)}.sign-area{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.sign-image{width:70%;aspect-ratio:1;object-fit:contain}@keyframes shake{0%,to{transform:translate(0) rotate(0)}15%{transform:translate(-9px) rotate(-.9deg)}30%{transform:translate(9px) rotate(.9deg)}45%{transform:translate(-6px) rotate(-.5deg)}60%{transform:translate(6px) rotate(.5deg)}75%{transform:translate(-3px)}90%{transform:translate(3px)}}.front-card.shake{animation:shake .55s cubic-bezier(.36,.07,.19,.97) both}.options-section{width:100%;max-width:min(340px,94vw);display:flex;flex-direction:column;gap:10px}.question-text{font-family:var(--font-serif);font-size:15px;font-weight:600;color:#ffffffe0;text-align:center;line-height:1.45;text-shadow:0 1px 4px rgba(0,0,0,.3);padding:0 4px}.options-list{display:flex;flex-direction:column;gap:8px}.option-btn{width:100%;padding:12px 16px;border:1.5px solid rgba(255,255,255,.12);border-radius:11px;background:#ffffff12;cursor:pointer;text-align:center;font-family:var(--font-sans);font-size:14px;font-weight:400;color:#ffffffe6;line-height:1.35;transition:background .15s,border-color .15s,opacity .2s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.option-btn:hover:not(:disabled){background:#c9a84c26;border-color:#c9a84c80}.option-btn:active:not(:disabled){transform:scale(.985)}.option-btn.correct{background:var(--correct-bg);border-color:var(--correct);color:#8dffc4}.option-btn.wrong{background:var(--wrong-bg);border-color:var(--wrong);color:#faa}.option-btn.dimmed{opacity:.3}.score-screen{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;width:100%;max-width:360px}.score-grade{font-family:var(--font-serif);font-size:clamp(28px,8vw,42px);font-weight:900;color:var(--gold);text-shadow:0 2px 18px rgba(201,168,76,.3);line-height:1.1}.score-ring-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.score-pct-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.score-pct{font-family:var(--font-serif);font-size:42px;font-weight:900;color:var(--gold)}.score-detail{font-size:16px;color:#fff9}@media (max-height: 640px){:root{--card-w: min(170px, 62vw)}.deck-area{margin-bottom:36px}.sign-image{width:65%}.question-text{font-size:13px}.option-btn{padding:9px 12px;font-size:13px}.options-list{gap:6px}.progress-area{margin-bottom:14px}}