.ttm{display:grid;gap:10px;justify-items:center;max-width:520px;margin:0 auto}.ttm-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;width:100%}.ttm-bar{flex:1 1 120px;max-width:200px;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}.ttm-bar span{display:block;height:100%;background:var(--good);transition:width .25s}.ttm-boardbox{width:100%;max-width:470px;padding:24px 6px 8px 20px;box-sizing:border-box;border-radius:var(--radius);background:radial-gradient(ellipse at 50% 35%,var(--table),var(--table-2))}.ttm-board{position:relative;width:100%;aspect-ratio:14 / 18.4}.ttm-tile{position:absolute;width:calc(100% / 7);height:12.5%;box-sizing:border-box;padding:0;transform:translate(calc(var(--z) * -3px),calc(var(--z) * -4px));border-radius:10px;border:1px solid color-mix(in srgb,hsl(var(--h) 40% 50%) 60%,#000);background:linear-gradient(180deg,#fffdf6,hsl(var(--h) 60% 90%));box-shadow:0 4px hsl(var(--h) 30% 55%),0 5px 6px #00000040;display:grid;place-items:center;cursor:pointer;font-size:clamp(1.15rem,6.2vw,1.9rem);line-height:1;touch-action:manipulation;transition:filter .15s,transform .12s}.ttm-tile:hover:not(.blocked){transform:translate(calc(var(--z) * -3px),calc(var(--z) * -4px - 2px))}.ttm-tile:active:not(.blocked){transform:translate(calc(var(--z) * -3px),calc(var(--z) * -4px + 2px))}.ttm-tile.blocked{filter:brightness(.55) saturate(.6);cursor:default}.ttm-tile:focus-visible{outline:3px solid var(--focus);outline-offset:1px}.ttm-tray{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;width:100%;max-width:470px;padding:7px;box-sizing:border-box;border-radius:var(--radius);background:var(--surface-2);border:2px solid var(--border)}.ttm-slot{aspect-ratio:1;border-radius:8px;background:var(--surface);border:2px dashed var(--border);display:grid;place-items:center;font-size:clamp(1rem,5.5vw,1.6rem)}.ttm-slot.full{border-style:solid;border-color:hsl(var(--h) 40% 55%);background:linear-gradient(180deg,#fffdf6,hsl(var(--h) 60% 90%));animation:ttm-in .18s ease-out}.ttm-slot.warn:not(.full){border-color:var(--danger)}.ttm-tray.ttm-clear{animation:ttm-flash .4s ease-out}@keyframes ttm-in{0%{transform:scale(.6)}to{transform:scale(1)}}@keyframes ttm-flash{0%{box-shadow:0 0 0 4px var(--good)}to{box-shadow:0 0 0 0 transparent}}.ttm-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}@media (prefers-reduced-motion: reduce){.ttm-slot.full,.ttm-tray.ttm-clear{animation:none}}