@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');
:root{color-scheme:dark;--cream:#f5e9d1;--muted:#ae9b83;--gold:#d7a866;--line:#59402e}
*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -12%,#4a3020 0,transparent 50%),radial-gradient(ellipse at 88% 85%,#2b211c 0,transparent 45%),#17120f;color:var(--cream);font-family:"DM Sans",Arial,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #e9bc7e;outline-offset:3px}.app{width:min(100%,850px);margin:auto;padding:29px 24px 24px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.brand{display:flex;align-items:center;gap:13px}.brand-icon{width:47px;height:47px;display:grid;place-items:center;background:linear-gradient(145deg,#c79050,#82512d);color:#2c1a10;border:2px solid #e3ad6a;border-radius:11px;box-shadow:inset 0 2px 4px #ffe4a456,0 5px 14px #0006;font-size:30px;font-weight:800}.eyebrow,.label{font-size:10px;font-weight:800;letter-spacing:2.1px;color:#d4ab76}.brand .eyebrow{font-size:9px}h1,h2,p{margin:0}h1{font:800 28px/1 "Outfit",Arial,sans-serif;letter-spacing:2px;margin-top:3px}.icon-button{border:1px solid #6a4a34;border-radius:10px;background:#33261e;color:#e6bb80;width:42px;height:42px;font-size:23px;box-shadow:inset 0 1px #9a6c4555}.icon-button.muted{color:#806e60}.game-layout{display:flex;justify-content:center;align-items:flex-start;gap:20px}.game-frame{padding:12px 12px 9px;background:linear-gradient(135deg,#a9703e,#613a21 43%,#a06b3e 100%);border:2px solid #c08c55;border-radius:18px;box-shadow:inset 0 2px #e0ab6c,inset 0 -3px #4d2a17,0 18px 40px #0008,0 0 0 5px #2d2019}.board-shell{position:relative;width:min(320px,calc(100vw - 75px));aspect-ratio:1/2;overflow:hidden;border:3px solid #3e281b;border-radius:7px;background:#211813;box-shadow:inset 0 0 28px #000a,0 0 0 1px #d1985d}canvas#board{display:block;width:100%;height:100%}.board-bottom{display:flex;justify-content:space-between;align-items:center;padding:10px 6px 1px;color:#efd0a2;font-size:8px;font-weight:800;letter-spacing:2px;text-shadow:0 1px #3c2414}.tiny-diamond{font-size:9px;color:#5b311b}.sidebar{width:202px;display:flex;flex-direction:column;gap:12px}.stat-card,.preview-card,.instructions{background:linear-gradient(155deg,#39291f,#2a201a);border:1px solid #644632;border-radius:11px;box-shadow:inset 0 1px #a0754a33,0 5px 15px #0003}.stat-card{min-height:87px;padding:15px 16px 12px;display:flex;flex-direction:column;justify-content:space-between}.stat-card strong{font:700 32px/1 "Outfit",Arial,sans-serif;color:#faebd0}.score-card{min-height:120px}.score-card strong{font-size:41px;letter-spacing:1px}.best{font-size:10px;letter-spacing:1px;color:#9d8a77}.best b{color:#e1c19a;margin-left:4px}.stats-row{display:flex;gap:12px}.stats-row .stat-card{width:50%}.stats-row strong{font-size:25px}.preview-card{padding:14px 16px 2px;min-height:137px}.preview-card canvas{display:block;margin:3px auto 0;max-width:100%}.side-actions{display:flex;gap:8px}.side-actions button{flex:1;min-height:42px;border:1px solid #735139;border-radius:8px;background:linear-gradient(#5b3d29,#3d291e);color:#f0d8b7;font-size:17px;box-shadow:inset 0 1px #a1764d88}.side-actions button span{font-size:12px;margin-left:4px}.side-actions button:disabled{opacity:.45;cursor:default}.side-actions button:not(:disabled):active,.touch-controls button:active{transform:translateY(2px);filter:brightness(1.2)}.instructions{padding:15px 16px;color:#c8ad8e;font-size:11px;line-height:1.8}.instructions .label{display:block;margin-bottom:9px}.instructions div{margin-top:5px}kbd{display:inline-block;min-width:22px;padding:0 5px;margin-right:3px;border:1px solid #70513a;border-radius:4px;background:#4b3527;color:#ead3b2;text-align:center;font:600 11px/20px "DM Sans",Arial,sans-serif;box-shadow:inset 0 1px #9e785052}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#160f0bd9;backdrop-filter:blur(3px);transition:opacity .2s}.overlay.hidden{opacity:0;pointer-events:none}.overlay-card{width:86%;padding:27px 17px 25px;text-align:center;border:1px solid #a5764a;border-radius:15px;background:linear-gradient(155deg,#473022,#271c16);box-shadow:0 16px 40px #0009,inset 0 1px #d19c6e55}.overlay-mark{display:block;margin-bottom:15px;color:#d6a66e;font-size:48px;line-height:1}.overlay-card h2{font:700 26px/1.1 "Outfit",Arial,sans-serif;margin:9px 0 11px}.overlay-card p:not(.eyebrow){font-size:13px;line-height:1.55;color:#c2ad96}.primary-button{display:flex;justify-content:center;gap:18px;align-items:center;width:100%;margin-top:21px;padding:13px 18px;border:1px solid #f0be7d;border-radius:8px;background:linear-gradient(#dfae70,#bd8148);color:#321d11;font-weight:800;box-shadow:inset 0 1px #ffe4af,0 4px 0 #74411f}.primary-button:active{transform:translateY(3px);box-shadow:inset 0 1px #ffe4af,0 1px 0 #74411f}.touch-controls{display:none;justify-content:center;gap:9px;margin:22px auto 0;max-width:420px}.touch-controls button{position:relative;display:grid;place-items:center;width:20%;height:60px;border:1px solid #8b603d;border-radius:10px;background:linear-gradient(#785139,#503322);color:#f3d2a4;font:700 30px/1 "Outfit",Arial,sans-serif;box-shadow:inset 0 2px #bd875458,0 5px 0 #2c1a12;touch-action:none;user-select:none}.touch-controls small{position:absolute;bottom:5px;font-size:8px;letter-spacing:1px}.footer-note{text-align:center;color:#796a5d;font-size:11px;letter-spacing:1px;margin:23px 0 0}@media(max-width:650px){.app{padding:16px 16px 24px}.topbar{margin-bottom:16px}.game-layout{gap:11px}.sidebar{width:150px;gap:8px}.stat-card{padding:11px;min-height:71px}.score-card{min-height:97px}.score-card strong{font-size:30px}.stats-row{gap:8px}.stats-row strong{font-size:21px}.label{font-size:8px;letter-spacing:1.4px}.preview-card{min-height:107px;padding:10px 8px 0}.preview-card canvas{width:110px;height:82px}.side-actions{flex-direction:column;gap:7px}.side-actions button{min-height:35px}.instructions{display:none}.touch-controls{display:flex}.board-shell{width:min(320px,calc(100vw - 215px))}}@media(max-width:440px){.game-layout{gap:8px}.game-frame{padding:7px 7px 6px;border-radius:11px}.board-shell{width:calc(100vw - 179px);border-width:2px}.board-bottom{font-size:5px;letter-spacing:1px;padding-top:8px}.sidebar{width:134px}.score-card strong{font-size:27px}.stat-card{padding:9px}.best{font-size:8px}.preview-card canvas{width:100px;height:75px}.overlay-card{padding:17px 10px}.overlay-mark{font-size:35px;margin-bottom:7px}.overlay-card h2{font-size:20px}.overlay-card p:not(.eyebrow){font-size:11px}.primary-button{font-size:12px;padding:10px 5px;margin-top:12px}.brand-icon{width:41px;height:41px}h1{font-size:24px}}
:root{--board-width:384px}
.board-shell{width:min(var(--board-width),calc(100vw - 75px));aspect-ratio:8/13;background:#713d20}
@media(max-width:650px){.board-shell{width:min(var(--board-width),calc(100vw - 215px))}}
@media(max-width:440px){.board-shell{width:calc(100vw - 179px)}}
@media(max-width:650px){.game-layout{flex-direction:column;align-items:center;gap:12px}.board-shell{width:min(384px,calc(100vw - 56px))}.touch-controls{width:min(100%,404px);margin:4px auto 7px}.sidebar{width:min(100%,404px);display:grid;grid-template-columns:1fr 1fr;gap:9px}.score-card,.stats-row,.preview-card,.side-actions{min-width:0}.score-card,.stats-row{height:91px}.stats-row .stat-card{min-height:91px}.preview-card{height:106px}.side-actions{align-self:stretch;justify-content:center}.side-actions button{min-height:42px}.footer-note{margin-top:15px}}
@media(max-width:440px){.board-shell{width:calc(100vw - 54px)}.touch-controls button{height:54px}.sidebar{grid-template-columns:1fr 1fr}.score-card strong{font-size:30px}}
.sound-preview{min-height:38px;border:1px solid #80583a;border-radius:8px;background:linear-gradient(#60402b,#3c291d);color:#f0c993;font-size:17px;box-shadow:inset 0 1px #c08b5755}.sound-preview span{font-size:12px;margin-left:6px}.sound-preview:active{transform:translateY(2px);filter:brightness(1.2)}
@media(max-width:650px){.sound-preview{grid-column:1/-1;min-height:36px}}
@media(max-width:900px){
  .topbar,.game-frame,.touch-controls,.sidebar{width:min(100%,404px);margin-left:auto;margin-right:auto}
  .game-layout{flex-direction:column;align-items:center;gap:12px}
  .game-frame{flex:none}
  .board-shell{width:100%;aspect-ratio:8/13}
  .touch-controls{display:flex;margin-top:4px;margin-bottom:5px}
  .sidebar{display:flex;flex-direction:column;gap:9px}
  .score-card{min-height:90px;height:auto}
  .stats-row{width:100%;height:auto}
  .stats-row .stat-card{min-height:75px}
  .preview-card{height:auto;min-height:115px}
  .side-actions{flex-direction:row;width:100%}
  .side-actions button{min-height:42px}
  .sound-preview{width:100%;min-height:40px}
  .instructions{display:none}
}
@media(max-width:440px){
  .app{padding-left:16px;padding-right:16px}
  .game-frame{padding:7px 7px 6px}
  .board-shell{width:100%}
  .touch-controls button{height:54px}
}
.app{width:min(100%,682px)}
@media(min-width:901px){.topbar{width:412px;margin-left:0;margin-right:0}}
.target{font:600 11px/1 "DM Sans",Arial,sans-serif;color:#c8a178;margin-left:3px;white-space:nowrap}
.stats-row strong{white-space:nowrap}.stats-row .stat-card{padding-left:10px;padding-right:10px}
.gesture-hint{display:none}
@media(max-width:900px){
  .board-shell{touch-action:none}
  .touch-controls{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
  .touch-controls button{width:100%;height:64px;font-size:34px}
  .touch-controls button:nth-child(-n+3){grid-column:span 2}
  .touch-controls button:nth-child(n+4){grid-column:span 3}
  .gesture-hint{display:block;width:min(100%,404px);margin:0 auto 3px;text-align:center;color:#c29d77;font-size:11px;line-height:1.4}
}
@media(max-width:440px){.touch-controls button{height:59px}}
.name-label{display:block;margin-top:15px;margin-bottom:6px;text-align:left;color:#d4ab76;font-size:10px;font-weight:800;letter-spacing:1.8px}
#playerName{display:block;width:100%;min-height:40px;padding:8px 10px;border:1px solid #996947;border-radius:7px;background:#21170f;color:#fff0d5;font:600 15px "DM Sans",Arial,sans-serif;outline:none}
#playerName:focus{border-color:#efbd7a;box-shadow:0 0 0 2px #efbd7a44}
.name-error{display:block;min-height:0;text-align:left;color:#ffbfa8;font-size:11px;margin-top:5px}
.name-error:empty{display:none}
.leaderboard{padding:14px 15px;background:linear-gradient(155deg,#39291f,#2a201a);border:1px solid #644632;border-radius:11px;box-shadow:inset 0 1px #a0754a33,0 5px 15px #0003}
.leaderboard-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.leaderboard-head>span:last-child{font-size:10px;color:#baa082;white-space:nowrap}
.leaderboard ol{margin:10px 0 0;padding:0;list-style:none}.leaderboard li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid #75543b5c;font-size:12px;color:#eed5b2}.leaderboard li:first-child{border-top:0}.leaderboard .rank{color:#c79a65;margin-right:6px}.leaderboard .player{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard .points{margin-left:auto;font-weight:800;color:#fff0d1;white-space:nowrap}.leaderboard .empty-score{color:#aa9581}
.overlay.paused .name-label,.overlay.paused #playerName,.overlay.paused .name-error{display:none}
.header-actions{display:flex;align-items:center;gap:8px}.leaderboard-button{font-size:19px}
.back-to-game{display:none;width:100%;margin-top:11px;padding:9px;border:1px solid #80583a;border-radius:7px;background:#4b3324;color:#f2d5ad;font-size:12px;font-weight:700}
@media(max-width:900px){.leaderboard{order:3}.preview-card{order:4}.side-actions{order:5}.sound-tests{order:6}.back-to-game{display:block}}
.sound-tests{padding:12px;background:linear-gradient(155deg,#39291f,#2a201a);border:1px solid #644632;border-radius:11px}.sound-test-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.sound-test-grid button{min-height:34px;padding:5px;border:1px solid #80583a;border-radius:7px;background:linear-gradient(#60402b,#3c291d);color:#f0c993;font:700 11px "DM Sans",Arial,sans-serif}.sound-test-grid button:last-child{grid-column:1/-1}.sound-test-grid button:active{transform:translateY(2px);filter:brightness(1.2)}