[hidden] { display: none !important; }
.version { font: 700 .7rem system-ui; opacity: .65; letter-spacing: .03em; }
.header-actions { display:flex; align-items:center; gap:10px; }
.header-fullscreen { padding:0; width:44px; min-height:44px; color:var(--cream); background:rgba(255,255,255,.12); font-size:1.6rem; border:1px solid #ffffff30; }
.top-strip, .top-controls { justify-content:center; width:100%; }
.mode-bar { padding:13px 28px; }
#currentNumber { color:#a12436; -webkit-text-stroke:1px #fff2d5; text-shadow:0 3px 0 #701525,0 7px 12px #32150840; display:inline-flex; direction:ltr; }
#board, #recentList, .card-grid { direction:ltr; }
#currentNumber .digit { display:inline-block; position:relative; }
#currentNumber.swap .digit:first-child { animation:digitFront .42s ease-in-out; }
#currentNumber.swap .digit:last-child { animation:digitBack .42s ease-in-out; }
#currentNumber.turn { animation:turn69 .46s ease-in-out; }
@keyframes digitFront { 0%,100% { transform:translateX(0); z-index:2; } 50% { transform:translateX(85%) translateY(-3%); z-index:2; } }
@keyframes digitBack { 0%,100% { transform:translateX(0); z-index:1; } 50% { transform:translateX(-85%) translateY(3%); z-index:1; } }
@keyframes turn69 { 0% { transform:rotate(0); } 45%,65% { transform:rotate(180deg); } 100% { transform:rotate(360deg); } }
dialog { max-height:90vh; overflow:auto; }
.settings-top { position:sticky; top:-28px; z-index:5; background:var(--cream); padding:10px 0; }
.settings-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.settings-pair .field { margin:0 0 10px; }
.field > label, .field > span { font-weight:850; color:var(--forest); }
select { width:100%; min-height:44px; padding:9px 12px; border:1px solid #cfc09c; border-radius:11px; color:var(--ink); background:#fffdf6; font:inherit; }
.settings-mode { display:flex; align-items:center; justify-content:space-between; padding:8px; background:#ffffff80; border-radius:14px; }
#settingsModeValue { font-weight:900; color:var(--forest); }
.tempo-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.tempo-presets button { min-height:52px; padding:7px 4px; border:1px solid #d7c8a6; border-radius:11px; background:#fffaf0; color:var(--forest); font-size:.72rem; font-weight:800; }
.tempo-presets small { display:block; margin-top:4px; opacity:.75; }
.tempo-presets button.selected { background:var(--forest); color:white; border-color:var(--forest); }
.settings-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.settings-actions > .btn { background:#eadcb7; color:var(--forest); }
.version-note { text-align:center; margin-bottom:0; }
body.is-fullscreen .header-fullscreen, body.is-fullscreen .key { display:none; }
body.is-fullscreen.hide-fullscreen-controls .controls { display:none; }
body.is-fullscreen.hide-fullscreen-controls .recent-card { grid-template-columns:auto 1fr; }
body.is-fullscreen.hide-fullscreen-controls .recent-list { justify-content:space-around; }
body.is-fullscreen.hide-fullscreen-controls .recent-ball { width:clamp(72px,8vw,115px); font-size:clamp(2rem,3vw,3rem); }
body.is-fullscreen #settingsBtn { color:var(--cream); background:#ffffff20; }
body.is-fullscreen { min-height:100vh; }
.pattern-panel { position:absolute; z-index:2; inset:4% 0 0 43%; background:var(--cream); color:var(--forest); padding:14px; border-radius:20px; box-shadow:0 10px 24px #0004; display:flex; flex-direction:column; }
.pattern-panel h3 { margin:0 0 9px; font:800 1.05rem Georgia,serif; }
.pattern-panel p { font-size:.72rem; margin:9px 0; }
.pattern-panel .btn { min-height:32px; font-size:.75rem; background:#eadcb7; }
.pattern-grid { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:24px repeat(5,1fr); gap:3px; flex:1; min-height:200px; direction:ltr; }
.pattern-letter { text-align:center; font-weight:900; }
.pattern-cell { min-width:0; min-height:25px; border:1px solid #c6b78f; border-radius:5px; background:#fffdf6; color:#7c7258; font-size:.8rem; font-weight:900; }
.pattern-cell[aria-pressed="true"] { background:var(--berry); color:white; border-color:var(--berry); box-shadow:inset 0 0 0 2px #ffffff40; }
body.pattern-mode .current-wrap { left:-4%; top:20%; }
body.pattern-mode .current-ball { min-width:140px; width:min(19vw,230px); }
body.pattern-mode #currentNumber { font-size:clamp(4rem,10vw,9rem); }
body[data-theme]:not([data-theme="original"]) { background:linear-gradient(135deg,#06131acd,#07131c95),var(--theme-scene) center/cover fixed; }
body[data-theme]:not([data-theme="original"]) .caller { background:linear-gradient(0deg,var(--forest-2),transparent 55%),var(--theme-scene) 60% center/cover; }
body[data-theme]:not([data-theme="original"]) .bear { display:none; }
body[data-theme="christmas"] { --forest:#31543b; --forest-2:#173325; --pine:#3c6748; --honey:#e9ba5a; --berry:#a12c36; }
body[data-theme="summer"] { --forest:#146172; --forest-2:#073c4a; --pine:#24879a; --honey:#ffc867; --berry:#ae3459; --cream:#fff7df; }
body[data-theme="halloween"] { --forest:#503165; --forest-2:#251431; --pine:#684184; --honey:#f4a446; --berry:#a62c53; --cream:#fff2dd; }
body[data-theme="winter"] { --forest:#265c79; --forest-2:#132f4c; --pine:#38738d; --honey:#c5e7ef; --berry:#a02c43; --cream:#f0f8ff; }
body[data-theme="autumn"] { --forest:#645033; --forest-2:#39291c; --pine:#85633b; --honey:#e7ae56; --berry:#96334a; --cream:#fff2d9; }
body[data-theme="vegas"] { --forest:#184e45; --forest-2:#072d2b; --pine:#266654; --honey:#e8c369; --berry:#9e2948; }
@media(min-width:981px) { body.is-fullscreen .app-shell { padding:18px 26px; } body.is-fullscreen .caller { min-height:0; } body.is-fullscreen .game { grid-template-rows:auto minmax(390px,calc(100vh - 240px)) auto; } body.is-fullscreen.hide-fullscreen-controls .game { grid-template-rows:auto minmax(370px,calc(100vh - 285px)) auto; } body.is-fullscreen .number-stage { min-height:280px; } }
@media(max-width:980px) { body.pattern-mode .current-ball { width:min(35vw,260px); } body.pattern-mode #currentNumber { font-size:clamp(4rem,15vw,9rem); } }
@media(max-width:600px) { .brand-mark { display:none; } .header-actions { gap:5px; } h1 { font-size:1.35rem; } .version { display:block; } .status-pill { font-size:.7rem; } .header-fullscreen { width:36px; min-height:36px; } .settings { padding:20px; } .settings-top { top:-20px; } .tempo-presets { grid-template-columns:repeat(2,1fr); } .pattern-panel { inset:4% 0 0 43%; padding:9px; } .pattern-grid { min-height:185px; gap:2px; } .pattern-panel h3 { font-size:.9rem; } .pattern-panel p { font-size:.65rem; } body.pattern-mode .current-wrap { left:-1%; } body.pattern-mode .current-ball { width:36vw; min-width:105px; } body.pattern-mode #currentNumber { font-size:20vw; } body.is-fullscreen.hide-fullscreen-controls .recent-card { grid-template-columns:1fr; } body.is-fullscreen.hide-fullscreen-controls .recent-ball { width:14vw; font-size:1.4rem; } }
@media(prefers-reduced-motion:reduce) { #currentNumber.swap .digit, #currentNumber.turn { animation:none; } }