:root{--gold:#d6b866;--gold-soft:#f0d794;--ink:#080808;--ivory:#f2ead8;--muted:#a89d87}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 50% 18%,#21180f,#080808 57%);color:var(--ivory);font-family:Arial,sans-serif}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.home-bar{position:sticky;top:0;z-index:60;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%,600px);min-height:calc(100svh - 52px);margin:auto;padding:10px 10px calc(15px + env(safe-area-inset-bottom))}
.scorebar{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:5px;border-block:1px solid #443920}
.scorebar.is-timer-hidden{grid-template-columns:repeat(3,1fr)}
.scorebar>div{padding:6px 2px;border-right:1px solid #3c321d;text-align:center}
.scorebar>div:last-child,.scorebar.is-timer-hidden>div:nth-child(3){border-right:0}
.scorebar span{display:block;color:#aaa086;font-size:8px;letter-spacing:.12em}
.scorebar strong{display:block;margin-top:2px;color:var(--gold-soft);font:normal 18px Georgia,serif}
.tray-panel{width:min(100%,540px);margin:0 auto 7px}
.tray-title{display:block;margin-bottom:3px;color:#93876e;font-size:8px;font-weight:800;letter-spacing:.15em;text-align:center}
.tray{display:grid;min-height:54px;grid-template-columns:repeat(var(--tray-size,7),minmax(0,1fr));gap:3px;border:2px solid #7b673b;border-radius:13px;padding:4px;background:linear-gradient(180deg,#17140e,#090908);box-shadow:inset 0 1px #fff2,0 8px 18px #0008}
.tray-slot{position:relative;min-width:0;border:1px solid #393328;border-radius:8px;background:#11100e;overflow:hidden}
.tray-item{position:absolute;inset:2px;display:grid;place-items:center;border:1px solid #e8dcc7;border-radius:7px;background:#fffaf0;box-shadow:0 2px 5px #0007;overflow:hidden;animation:tray-in .23s ease-out}
.tray-item.is-clearing{animation:triple-clear .38s ease-in-out}
.motif{position:absolute;inset:2px;background-image:var(--sprite);background-repeat:no-repeat;background-position:var(--sx) var(--sy);background-size:400% 300%}
.tray-item .motif{position:relative;inset:auto;display:block;width:auto;height:calc(100% - 4px);aspect-ratio:1}
.flying-tile{position:fixed;z-index:200;border:1px solid #e8dcc7;border-radius:10px;background:#fffaf0;box-shadow:0 8px 20px #000a,0 0 0 2px #d6b86666;overflow:hidden;pointer-events:none}
.flying-tile .motif{inset:3px}
.tile-board{position:relative;width:min(100%,540px);height:clamp(300px,43svh,385px);margin:auto;overflow:hidden;border:1px solid #554728;border-radius:18px;background:radial-gradient(circle at 50% 42%,#33203b 0,#181326 45%,#0a0a0a 82%);box-shadow:inset 0 1px #fff2,inset 0 0 65px #0008,0 18px 42px #0009;isolation:isolate;touch-action:manipulation}
.tile-board:before,.tile-board:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.tile-board:before{width:250px;height:130px;left:-70px;top:20px;background:#8067d31a}
.tile-board:after{width:270px;height:150px;right:-90px;bottom:10px;background:#e36ab51a}
.tile-board.is-locked{pointer-events:none}
.tile-card{position:absolute;width:17%;height:18%;border:1px solid #e4d8c5;border-radius:10px;padding:0;background:#fffaf0;box-shadow:0 3px 9px #0009;cursor:pointer;overflow:hidden;transition:filter .18s,transform .18s,box-shadow .18s;touch-action:manipulation}
.tile-card:not(:disabled):hover{z-index:50!important;transform:translateY(-2px) scale(1.025);box-shadow:0 7px 16px #000a,0 0 0 2px #f0d794}
.tile-card:not(:disabled):focus-visible{z-index:55!important;outline:3px solid var(--gold-soft);outline-offset:3px}
.tile-card:disabled{opacity:1;filter:saturate(.72) brightness(.64);cursor:not-allowed}
.tile-card.is-free{box-shadow:0 3px 9px #0009,0 0 0 1px #ffffff38}
.game-actions{display:flex;justify-content:center;margin-top:7px}
.undo-button{width:auto;min-width:145px;min-height:38px;padding:6px 18px}
.ad-reservation{display:grid;min-height:36px;margin-top:7px;place-items:center;border:1px dashed #3c3322;border-radius:9px;color:#665d4d;font-size:8px;letter-spacing:.14em;text-transform:uppercase}
.preview-capture .home-bar{display:none}
.preview-capture .game-shell{min-height:100svh}
.preview-capture .ad-reservation{display:none}
button:disabled{opacity:.42;cursor:not-allowed}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold-soft);outline-offset:2px}
dialog{width:min(450px,calc(100% - 24px));max-height:calc(100dvh - 28px);margin:auto;border:1px solid #806b3c;border-radius:20px;padding:22px;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 28px Georgia,serif}
dialog h3{margin:19px 0 7px;color:var(--gold-soft);font-size:15px}
dialog p{font-size:13px;line-height:1.55}
.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:18px}
.select-field,.switch-row{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #3b321f}
.select-field{min-height:78px;padding-block:7px}
.select-field span,.switch-row span{display:block}
.select-field small,.switch-row small{display:block;max-width:255px;margin-top:3px;color:#9e927b;font-size:11px}
.select-field select{min-width:115px;max-width:145px;border:1px solid #796439;border-radius:9px;padding:9px;background:#080808;color:var(--ivory)}
.switch-row input{width:22px;height:22px;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-weight:800;cursor:pointer}
.primary-button{margin-top:17px;background:var(--gold);color:#0b0905}
.secondary-button{background:#12100d;color:var(--gold-soft)}
.secondary-button:disabled{opacity:.38}
.dialog-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dialog-buttons .primary-button{margin-top:0}
.eyebrow{color:#a99159;font-size:9px!important;font-weight:800;letter-spacing:.16em}
.record-panel{border:1px solid #554724;border-radius:13px;padding:13px;background:#0b0a08}
.record-grid{display:grid;grid-template-columns:1fr auto;gap:8px 14px;font-size:12px}
.record-grid span{color:#a99d86}
.record-grid strong{color:var(--gold-soft);text-align:right}
.dialog-note{margin-bottom:0;color:#958a75}
.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:18px}
.info-control{font:italic bold 16px Georgia,serif}
.result-dialog{text-align:center}
.result-mark{display:grid;width:58px;height:58px;margin:10px auto;place-items:center;border:1px solid #87dca7;border-radius:50%;color:#9ff0bd;font:30px Georgia,serif;box-shadow:0 0 18px #65d58f55}
.result-dialog.is-lost .result-mark{border-color:#e68e86;color:#ffaaa2;box-shadow:0 0 18px #e15e5355}
.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:23px Georgia,serif}.result-stats span{margin-top:4px;color:#9f947e;font-size:8px;letter-spacing:.12em}
.result-best{color:var(--gold-soft)}
.result-close{margin-top:9px}
@keyframes tray-in{from{opacity:.3;transform:translateY(-18px) scale(.8)}to{opacity:1;transform:none}}
@keyframes triple-clear{0%,100%{transform:scale(1)}55%{filter:brightness(1.3);transform:scale(1.12)}}
@media(max-width:380px){.game-shell{padding-inline:7px}.tile-board{height:clamp(294px,42svh,334px)}.tray{min-height:48px}.tile-card{border-radius:8px}.tile-card .motif{inset:1px}.scorebar strong{font-size:15px}.undo-button{min-height:36px}.ad-reservation{min-height:32px}}
@media(min-width:700px) and (orientation:portrait){.game-shell{width:min(92vw,820px);padding-top:16px}.tray-panel,.tile-board{width:min(86vw,710px)}.tray{min-height:74px;gap:6px;padding:6px}.tray-item,.tray-slot{border-radius:12px}.tile-board{height:min(58svh,590px)}.tile-card{border-radius:15px}.scorebar>div{padding:10px}.scorebar strong{font-size:24px}.undo-button{min-height:45px}}
@media(orientation:landscape) and (max-height:800px){.game-shell{width:min(980px,100%);padding-top:6px}.tray-panel,.tile-board{width:min(70vw,650px)}.tray{min-height:43px}.tile-board{height:min(55vh,410px)}.game-actions{position:absolute;right:12px;top:178px}.undo-button{min-width:110px}.ad-reservation{display:none}}
@media(prefers-reduced-motion:reduce){.tray-item,.tile-card{animation:none!important;transition:none!important}}