@layer components{.tr-stage{touch-action:manipulation;-webkit-user-select:none;user-select:none;background:radial-gradient(90% 70% at 50% 35%,#2a1838 0%,#0b0710 70%);padding:0}.tr-left{color:#ffffff9e;font-size:14px;font-weight:600}.tr-area{place-items:center;display:grid;position:absolute;inset:70px 16px 176px}.tr-board{flex:none;position:relative}.tr-tile{transition:filter .18s ease, transform .16s var(--ease-spring);background:linear-gradient(#fdf8ef 0%,#efe4d1 100%);border-radius:16%;place-items:center;display:grid;box-shadow:0 2px #c7b596,0 5px 10px #00000061}.tr-tile svg{width:70%;height:70%}.tr-board .tr-tile{position:absolute}.tr-tile.is-blocked{filter:brightness(.48)saturate(.6)}.tr-board button.tr-tile{box-shadow:0 2px #c7b596,0 6px 12px #0000006b,0 0 0 1.5px #ffffff80}button.tr-tile:active{transform:scale(.93)}@media (hover:hover){button.tr-tile:hover{transform:translateY(-2px)}}button.tr-tile:focus-visible{z-index:1000;outline:3px solid var(--rn);outline-offset:2px}.tr-foot{left:16px;right:16px;bottom:max(16px, env(safe-area-inset-bottom));justify-items:center;gap:10px;display:grid;position:absolute}.tr-bar{width:min(100%,560px);color:var(--on-dark-dim);justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex}.tr-bar .key:focus-visible{outline:2px solid var(--rn);outline-offset:2px}.tr-tray{--slot:min(62px, calc((100cqw - 32px - 20px - 36px) / 7));background:#ffffff12;border-radius:18px;gap:6px;padding:10px;transition:box-shadow .2s,background .2s;display:flex;position:relative;box-shadow:inset 0 0 0 1.5px #ffffff1f}.tr-tray.is-warn{box-shadow:inset 0 0 0 2px #ffb020}.tr-tray.is-danger{animation:.9s ease-in-out infinite tr-pulse;box-shadow:inset 0 0 0 2px #ff5b3a,0 0 22px #ff5b3a59}@keyframes tr-pulse{50%{background:#ff5b3a24}}.tr-tray.is-full{animation:.38s ease-out tr-shake;box-shadow:inset 0 0 0 2px #ff5b3a}@keyframes tr-shake{25%{translate:-6px}50%{translate:5px}75%{translate:-3px}}.tr-slot{width:var(--slot);height:var(--slot);background:#ffffff0d;border-radius:12px}.tr-slot .tr-tile{width:100%;height:100%}.tr-ghost{top:10px;left:calc(10px + var(--at) * (var(--slot) + 6px));width:var(--slot);height:var(--slot);pointer-events:none;position:absolute}.tr-ghost .tr-tile{width:100%;height:100%;animation:.52s forwards tr-pop}@keyframes tr-pop{0%{transform:none}40%{transform:translateX(calc(var(--to) * (var(--slot) + 6px))) scale(1);animation-timing-function:var(--ease-out)}65%{transform:translateX(calc(var(--to) * (var(--slot) + 6px))) scale(1.25);opacity:1}to{transform:translateX(calc(var(--to) * (var(--slot) + 6px))) scale(.2);opacity:0}}.tr-spark{background:var(--rn);opacity:0;width:8px;height:8px;box-shadow:0 -34px 0 -1px var(--rn), 30px -17px 0 -1px #ffd166, 30px 17px 0 -1px var(--rn), 0 34px 0 -1px #ffd166, -30px 17px 0 -1px var(--rn), -30px -17px 0 -1px #ffd166;pointer-events:none;border-radius:50%;margin:-4px;animation:.52s ease-out forwards tr-spark;position:absolute;top:50%;left:50%}@keyframes tr-spark{0%,55%{opacity:0;scale:.3}70%{opacity:1}to{opacity:0;scale:1.6}}.tr-key{--key:#ffffff1a;--key-ink:#fff;--edge:#00000052;height:44px;box-shadow:inset 0 -3px 0 var(--edge), inset 0 0 0 1.5px #ffffff24;flex:none;gap:6px;padding:0 14px;font-size:14px}.tr-key svg{width:18px;height:18px}.tr-won{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.tr-won p{letter-spacing:-.05em;color:#fff;text-shadow:0 4px 30px #0009;animation:pop .42s var(--ease-pop) .3s both;font-size:56px;font-weight:800}.tr-won .confetti{top:45%}.tr-card{z-index:6;left:50%;bottom:calc(max(16px, env(safe-area-inset-bottom)) + var(--slot-room,128px));width:min(380px,100% - 32px);color:var(--stage-ink);background:var(--stage);box-shadow:inset 0 0 0 1.5px var(--stage-line), 0 18px 44px -14px #00000080;animation:lr-up .46s var(--ease-sheet) .25s both;border-radius:22px;padding:18px;position:absolute;translate:-50%}.tr-card-title{letter-spacing:-.025em;font-size:21px;font-weight:650}.tr-card-note{color:var(--stage-dim);margin-top:4px;font-size:14px}.tr-card-keys{gap:10px;margin-top:14px;display:flex}.tr-card-keys .key-primary{flex:1}@media (prefers-reduced-motion:reduce){.tr-ghost .tr-tile,.tr-spark,.tr-tray.is-danger,.tr-won p,.tr-card{animation:none}}.tr-mini{flex:none;gap:4px;display:flex}.tr-mini .tr-tile{width:34px;height:34px}}