:root{--gold:#d6b866;--gold-soft:#f0d794;--ink:#080808;--ivory:#f4eddf;--gap:7px}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark}
body{min-height:100svh;margin:0;background:radial-gradient(circle at 50% 16%,#29200f 0,#0b0907 45%,#050505 100%);color:var(--ivory);font-family:Arial,sans-serif;overscroll-behavior:none}
.home-bar{position:sticky;top:0;z-index:30;display:flex;width:100%;min-height:calc(52px + env(safe-area-inset-top));align-items:center;justify-content:center;border-bottom:1px solid #f4dfa5;padding:env(safe-area-inset-top) 18px 0;background:linear-gradient(110deg,#b18a38,#f0d98e 48%,#b18a38);box-shadow:0 8px 28px #0009,inset 0 1px #fff8;color:#090806;font-size:.88rem;font-weight:850;letter-spacing:.16em;text-decoration:none;text-transform:uppercase}
.game-shell{width:min(100%,570px);min-height:calc(100svh - 52px);margin:auto;padding:10px 12px calc(16px + env(safe-area-inset-bottom))}
.scorebar{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 8px;border-block:1px solid #443920;background:#09080699}
.scorebar.with-timer{grid-template-columns:repeat(4,1fr)}
.scorebar>div{min-width:0;padding:7px 3px;border-right:1px solid #3c321d;text-align:center}.scorebar>div:last-child{border-right:0}
.scorebar span{display:block;color:#aaa086;font-size:.58rem;letter-spacing:.1em}.scorebar strong{display:flex;min-height:23px;align-items:center;justify-content:center;gap:5px;margin-top:2px;color:var(--gold-soft);font:normal 1.18rem Georgia,serif}.scorebar strong>span,.scorebar small{display:inline;color:inherit;font:inherit;letter-spacing:0}.scorebar small{font-size:.72em;color:#a99d86}
.mini-diamond,.diamond-fly span{display:inline-block;width:18px;height:18px;background:url('assets/diamond.png') center/contain no-repeat;filter:drop-shadow(0 0 5px #6be8ff99)}
.play-note{margin:6px auto 9px;color:#c2b9a5;font-size:.86rem;line-height:1.35;text-align:center}
.board-wrap{position:relative;width:min(100%,480px);margin:auto}
.number-board{display:grid;aspect-ratio:5/6;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,1fr);gap:var(--gap);border:2px solid #66562f;border-radius:22px;padding:10px;background:radial-gradient(circle at 50% 20%,#231e14,#0b0a08 72%);box-shadow:inset 0 1px #fff2,0 20px 55px #000b;touch-action:manipulation;isolation:isolate}
.number-space,.number-tile{position:relative;min-width:0;min-height:0;border-radius:16px}.number-space{border:1px solid #312b20;background:#11100e;box-shadow:inset 0 1px #fff1}.number-tile{display:grid;place-items:center;border:2px solid #ffffff7a;padding:0;background:var(--tile);box-shadow:inset 0 7px #ffffff43,inset 0 -7px #0002,0 5px 9px #0008;color:var(--text,#071318);font-size:clamp(1.4rem,7vw,2.2rem);font-weight:950;cursor:pointer;text-shadow:0 1px #fff4;transition:filter .12s,transform .12s}
.number-tile:hover{filter:brightness(1.09);transform:translateY(-1px)}.number-tile:active{transform:scale(.93)}.number-tile:focus-visible{z-index:4;outline:3px solid #fff;outline-offset:2px}.number-tile:disabled{cursor:default;opacity:1}
.value-1{--tile:linear-gradient(145deg,#ffe56c,#e8a812)}.value-2{--tile:linear-gradient(145deg,#65e5a7,#26b978)}.value-3{--tile:linear-gradient(145deg,#5bcdf7,#2b88dc)}.value-4{--tile:linear-gradient(145deg,#8d9cff,#6260dd)}.value-5{--tile:linear-gradient(145deg,#c875f2,#9942d2);--text:#fff}.value-6{--tile:linear-gradient(145deg,#ff73b2,#dc397f);--text:#fff}.value-7{--tile:linear-gradient(145deg,#f8fbff,#98a7bb);--text:#101827}.value-8{--tile:linear-gradient(145deg,#ff9472,#dc513c);--text:#fff}.value-9{--tile:linear-gradient(145deg,#57ded7,#199fa7)}
.number-tile.is-raised{animation:raise .16s ease-out}.number-tile.is-bursting{z-index:5;animation:burst .28s ease-in forwards}.number-tile.is-falling{animation:fall .36s cubic-bezier(.18,.83,.32,1.18)}
.combo-label,.bonus-label{position:absolute;z-index:10;top:43%;left:50%;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.65) rotate(-7deg);background:linear-gradient(90deg,#ff476f,#ffcd38,#48e4aa,#4bbcff,#c864ff);background-clip:text;-webkit-background-clip:text;color:transparent;font:900 clamp(2.4rem,12vw,4.8rem)/1 Arial,sans-serif;letter-spacing:-.08em;filter:drop-shadow(0 4px 0 #fff) drop-shadow(0 8px 13px #000b);white-space:nowrap}.combo-label.show{animation:combo 1s ease-out}.bonus-label{z-index:11;display:grid;width:94%;place-items:center;font-size:clamp(1.8rem,8vw,3.2rem);line-height:.88;letter-spacing:-.045em;text-align:center}.bonus-label .bonus-amount,.bonus-label .bonus-word{display:block}.bonus-label .bonus-amount{font-size:1.25em}.bonus-label .bonus-word{margin-top:.12em;font-size:.72em;letter-spacing:.015em}.bonus-label.show{animation:bonus 1.05s ease-out}
.diamond-fly{position:absolute;z-index:12;top:0;left:0;width:clamp(58px,16vw,76px);aspect-ratio:1;opacity:0;pointer-events:none;will-change:transform,opacity}.diamond-fly span{width:100%;height:100%}.diamond-fly.show{animation:diamond 1.2s cubic-bezier(.2,.72,.25,1)}
.status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ad-reservation{display:grid;min-height:30px;margin-top:7px;place-items:center;border:1px dashed #3c3322;border-radius:9px;color:#665d4d;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase}
.preview-capture .home-bar,.preview-capture .ad-reservation{display:none}.preview-capture .game-shell{min-height:100svh}
dialog{width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;border:1px solid #806b3c;border-radius:20px;padding:20px;background:#11100d;color:var(--ivory);box-shadow:0 25px 100px #000d;overflow:auto}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}dialog h2{margin:0;color:var(--gold-soft);font:normal 1.75rem Georgia,serif}dialog h3{margin:18px 0 7px;color:var(--gold-soft);font-size:.95rem}dialog p{font-size:.88rem;line-height:1.5}.dialog-top>.icon-button{display:grid;width:39px;height:39px;place-items:center;border:1px solid #65552e;border-radius:50%;background:#15130e;color:var(--gold-soft);font-size:1.1rem;cursor:pointer}
.select-field,.switch-row{display:flex;min-height:62px;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #3b321f}.select-field{min-height:86px;padding-block:8px}.select-field span,.switch-row span{display:block}.select-field small,.switch-row small{display:block;max-width:270px;margin-top:4px;color:#9e927b;font-size:.75rem;line-height:1.35}.select-field select{min-width:92px;border:1px solid #796439;border-radius:9px;padding:9px;background:#080808;color:var(--ivory);font-size:1rem}.switch-row input{width:23px;height:23px;accent-color:var(--gold)}
.primary-button,.secondary-button{display:flex;width:100%;min-height:46px;align-items:center;justify-content:center;border:1px solid var(--gold);border-radius:10px;padding:10px 15px;font-size:.9rem;font-weight:800;cursor:pointer}.primary-button{margin-top:17px;background:var(--gold);color:#0b0905}.secondary-button{background:#12100d;color:var(--gold-soft)}.dialog-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}.dialog-buttons .primary-button{margin-top:0}.eyebrow{color:#a99159;font-size:.62rem!important;font-weight:800;letter-spacing:.16em}.control-rule{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:9px}.control-rule p{margin:5px 0}.control-symbol{display:grid;width:32px;height:32px;place-items:center;border:1px solid #65552e;border-radius:50%;color:var(--gold-soft);font-size:1.1rem}.info-control{font:italic bold 1rem Georgia,serif}.record-panel{border:1px solid #554724;border-radius:13px;padding:13px;background:#0b0a08}.result-dialog{text-align:center}.result-emblem{display:grid;width:58px;height:58px;margin:9px auto;place-items:center;border:1px solid #8deeff;border-radius:50%;color:#9df3ff;font-size:2rem;box-shadow:0 0 18px #42d9ff55}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:17px 0;border-block:1px solid #493d25}.result-stats div{padding:11px 3px;border-right:1px solid #493d25}.result-stats div:last-child{border-right:0}.result-stats strong,.result-stats span{display:block}.result-stats strong{color:var(--gold-soft);font:1.4rem Georgia,serif}.result-stats span{margin-top:4px;color:#9f947e;font-size:.55rem;letter-spacing:.1em}.result-record{color:#b8ad98}.result-close{margin-top:9px}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold-soft);outline-offset:2px}
@keyframes raise{50%{filter:brightness(1.35);transform:scale(1.12)}}@keyframes burst{45%{filter:brightness(1.65);transform:scale(1.2)}to{opacity:0;transform:scale(.2) rotate(18deg)}}@keyframes fall{from{opacity:.2;transform:translateY(-220%) scale(.9)}75%{transform:translateY(3%) scale(1.02)}to{opacity:1;transform:none}}@keyframes combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-7deg)}22%,62%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-7deg)}100%{opacity:0;transform:translate(-50%,-70%) scale(1.12) rotate(-7deg)}}@keyframes bonus{0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-5deg)}22%,70%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-66%) scale(1.18) rotate(2deg)}}@keyframes diamond{0%{opacity:0;transform:translate(calc(var(--diamond-start-x) - 50%),calc(var(--diamond-start-y) - 50%)) scale(.35)}12%{opacity:1;transform:translate(calc(var(--diamond-start-x) - 50%),calc(var(--diamond-start-y) - 50%)) scale(1.05)}36%{opacity:1;transform:translate(calc(var(--diamond-start-x) - 50%),calc(var(--diamond-start-y) - 50%)) scale(1.35)}52%{opacity:1;transform:translate(calc(var(--diamond-start-x) - 50%),calc(var(--diamond-start-y) - 50%)) scale(.72)}88%{opacity:1;transform:translate(calc(var(--diamond-end-x) - 50%),calc(var(--diamond-end-y) - 50%)) scale(.3)}100%{opacity:0;transform:translate(calc(var(--diamond-end-x) - 50%),calc(var(--diamond-end-y) - 50%)) scale(.14)}}
@media(max-width:380px){:root{--gap:5px}.game-shell{padding-inline:8px}.number-board{padding:7px;border-radius:17px}.number-tile{border-radius:12px}.play-note{font-size:.76rem}.scorebar strong{font-size:1rem}.scorebar span{font-size:.5rem}}
@media(min-width:700px) and (orientation:portrait){:root{--gap:10px}.game-shell{width:min(88vw,760px);padding-top:16px}.board-wrap{width:min(75vw,64svh,620px)}.number-board{padding:14px;border-radius:26px}.number-tile{border-radius:20px;font-size:clamp(2rem,6vw,3rem)}.scorebar>div{padding:10px}.scorebar strong{font-size:1.45rem}}
@media(orientation:landscape) and (max-height:800px){.game-shell{width:min(940px,100%);padding-top:7px}.board-wrap{width:min(54vh,470px)}.number-board{gap:4px;padding:6px}.play-note{margin:3px auto 5px}.status{margin-top:4px}.ad-reservation{display:none}}
@media(prefers-reduced-motion:reduce){.number-tile,.combo-label,.bonus-label,.diamond-fly{animation:none!important;transition:none!important}.combo-label.show,.bonus-label.show{opacity:1}.diamond-fly.show{opacity:1;transform:translate(calc(var(--diamond-start-x) - 50%),calc(var(--diamond-start-y) - 50%)) scale(.8)}}