:root{--tg-button-color:#2f6bff;--tg-button-text-color:#fff;--tg-bg-color:#111;--tg-text-color:#fff;--tg-secondary-bg-color:#2c2c2e;--tg-secondary-text-color:#fff;--ios-secondary-button:var(--tg-secondary-bg-color);--ios-secondary-button-text:var(--tg-secondary-text-color)}html,body,#root{height:100%;margin:0}body{font-family:Inter,system-ui,sans-serif;background:var(--tg-bg-color);color:var(--tg-text-color);overflow:hidden;-webkit-user-select:none;user-select:none;overscroll-behavior:none}.app{max-width:760px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 14px) max(12px,calc(env(safe-area-inset-right) + 12px)) calc(env(safe-area-inset-bottom) + 96px) max(12px,calc(env(safe-area-inset-left) + 12px));height:100dvh;overflow:hidden}.launch-warning{margin:4px 0 8px;padding:8px 10px;border:1px solid #3a3a3a;border-radius:10px;background:#1d1d1d;font-size:12px;opacity:.9}.modes,.actions{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}.select-screen{min-height:calc(100vh - 24px);display:flex;flex-direction:column}.select-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.panda{width:128px;height:128px;object-fit:contain}.select-title{font-size:30px;font-weight:800;line-height:1.1;text-align:center}.select-bottom{display:flex;flex-direction:column;gap:16px;padding-bottom:8px}.deck-slider{display:flex;align-items:center;gap:8px;margin-top:8px;touch-action:pan-y}.deck-nav{width:44px;min-width:44px;height:44px;min-height:44px;font-size:28px;line-height:1;padding:0;border-radius:999px;background:var(--ios-secondary-button);color:var(--ios-secondary-button-text);border:none;display:inline-flex;align-items:center;justify-content:center}.deck-card{flex:1;border:1px solid #3a3a3a;border-radius:12px;background:#1d1d1d;padding:10px 12px;text-align:center;display:flex;flex-direction:column;justify-content:center}.deck-title{font-weight:800;font-size:18px}.deck-subtitle{font-size:13px;opacity:.82;margin-top:2px}.deck-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}.deck-dot{width:6px;height:6px;border-radius:999px;background:#4a4a4a}.deck-dot.active{background:#7fa3ff}.rules{font-size:15px;line-height:1.35;text-align:center;opacity:.95}.modes{flex-direction:column;gap:12px;margin-top:2px}.modes button{width:100%;padding:18px 16px;font-size:22px;font-weight:700;border-radius:999px}button{background:var(--ios-secondary-button);border:none;color:var(--ios-secondary-button-text);padding:12px 16px;border-radius:14px;box-shadow:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;font-weight:600;letter-spacing:.01em;min-height:50px;transition:transform .06s ease,opacity .12s ease,filter .12s ease}button:active{transform:scale(.985);opacity:.92}button:not(.accent){background:var(--ios-secondary-button);color:var(--ios-secondary-button-text)}button:disabled{opacity:.45;filter:saturate(.5);cursor:not-allowed}button.accent:disabled{background:#4a4a4a;color:#cfcfcf;box-shadow:none}.actions-bottom{justify-content:center;position:fixed;left:max(12px,calc(env(safe-area-inset-left) + 12px));right:max(12px,calc(env(safe-area-inset-right) + 12px));bottom:calc(env(safe-area-inset-bottom) + 16px);padding:10px 0 0;background:transparent;z-index:30}.actions-bottom .accent,.actions-bottom button{max-width:760px;margin:0 auto;display:block;width:100%;min-height:50px;border-radius:999px}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:70;animation:hintFade 1.4s ease forwards}.tutorial-overlay-text{font-size:56px;line-height:1.05;font-weight:900;color:#ffffffeb;text-align:center;letter-spacing:.02em}button.accent{background:var(--tg-button-color);border:none;color:var(--tg-button-text-color);font-weight:700;padding:14px 18px;font-size:18px;border-radius:14px;box-shadow:none}.actions-bottom button.accent{border-radius:999px}.board{position:relative;display:flex;flex-direction:column;gap:8px;margin-top:calc(env(safe-area-inset-top) + 76px);min-height:calc(100vh - 220px);justify-content:flex-start;padding-top:8px;padding-bottom:0;overflow-x:clip;overflow-y:auto;overscroll-behavior:contain;touch-action:none}.board.cards-3{justify-content:flex-end;padding-bottom:calc(env(safe-area-inset-bottom) + 104px)}.board.cards-5{justify-content:flex-end;padding-bottom:calc(env(safe-area-inset-bottom) + 64px)}.board.cards-7{justify-content:flex-end;padding-bottom:calc(env(safe-area-inset-bottom) + 20px)}.board.phase-playing{gap:4px}.board.phase-checked{gap:9px}.board.phase-revealing-correct,.board.phase-result-ready{gap:8px}.drop-slot{height:0;border-radius:8px;transition:height .26s ease,background .26s ease,opacity .2s ease;opacity:0}.board.dragging-mode .drop-slot{height:4px;opacity:.45}.drop-slot.active{height:26px;background:#4b7fff47;opacity:1}.card{background:#1d1d1d;border:1px solid #3a3a3a;padding:8px;border-radius:12px;min-height:66px;transition:transform .56s cubic-bezier(.22,.62,.2,1),border-color .35s ease,background .35s ease,margin .38s ease;will-change:transform}.board.phase-revealing-correct .card{transition:transform .22s linear,border-color .35s ease,background .35s ease,margin .38s ease}.board.phase-revealing-correct .card.travel-up,.board.phase-revealing-correct .card.wrong-offset.travel-up{transition:none}.board.phase-revealing-correct .card.travel-shift-down,.board.phase-revealing-correct .card.wrong-offset.travel-shift-down{transition:transform .78s cubic-bezier(.2,.7,.28,1)}.card.wrong{border-color:#e55;background:#3a1f1f}.card.wrong-offset{transform:translate(10%);opacity:.95}.card.selected{border-color:#4b7fff;box-shadow:none}.card.shift-up{transform:translateY(-8px)}.card.shift-down{transform:translateY(8px)}.card.dragging{opacity:.6;transform:scale(1.01)}.card.settling{animation:settle 1s ease}.card.swapping{animation:swapPulse 1.5s ease}.card.swap-move-up{transform:translateY(-78px)}.card.swap-move-down{transform:translateY(78px)}.card.travel-up{transition:none;animation:travelArc 1.35s cubic-bezier(.22,.62,.2,1) both;z-index:3}.card.travel-shift-down{transform:translateY(56px)}.card.wrong-offset.swap-move-up{transform:translate(10%) translateY(-78px)}.card.wrong-offset.swap-move-down{transform:translate(10%) translateY(78px)}.card.wrong-offset.travel-shift-down{transform:translate(10%) translateY(56px)}.card.wrong-offset.travel-up{transition:none;animation:travelArcOffset 1.35s cubic-bezier(.22,.62,.2,1) both;z-index:3}.card.tutorial-move{animation:tutorialMove 1.2s ease-in-out 1}.card.tutorial-gap{animation:tutorialGap 1.2s ease-in-out 1}.card.tutorial-tap-first,.card.tutorial-tap-second{box-shadow:0 0 0 2px #4b7fffa6 inset,0 0 18px #4b7fff47;animation:pulse 1.1s ease-in-out infinite}.card-top{display:flex;gap:10px;align-items:flex-start}.thumb-flip{width:84px;height:56px;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1);flex:0 0 auto}.thumb-flip.is-revealed{transform:rotateY(180deg)}.thumb-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;border:1px solid #3a3a3a;backface-visibility:hidden}.thumb-front{object-fit:cover;width:100%;height:100%}.thumb-back{display:flex;align-items:center;justify-content:center;background:#2b2b2b;color:#fff;font-weight:800;font-size:18px;transform:rotateY(180deg)}.meta{display:flex;flex-direction:column;gap:4px;min-width:0}.title{font-weight:600;font-size:15px;line-height:1.18}.desc{font-size:11px;opacity:.8;line-height:1.24}.hint-pulse{margin-left:auto;display:inline-block;width:30px;height:30px;min-width:30px;min-height:30px;aspect-ratio:1/1;border-radius:50%;background:#2f6bff59;border:2px solid rgba(75,127,255,.85);box-shadow:0 0 #4b7fff73;animation:pulse 1.1s ease-in-out 2}@keyframes settle{0%{transform:translateY(-8px) scale(1.01)}to{transform:translateY(0) scale(1)}}@keyframes swapPulse{0%{transform:scale(1)}50%{transform:scale(1.025)}to{transform:scale(1)}}@keyframes travelArc{0%{transform:translate(0) translateY(0) rotate(0)}50%{transform:translate(var(--arcX,24px)) translateY(calc(var(--travelY,80px) * -.52)) rotate(1deg)}to{transform:translate(0) translateY(calc(var(--travelY,80px) * -1)) rotate(0)}}@keyframes travelArcOffset{0%{transform:translate(10%) translateY(0) rotate(0)}50%{transform:translate(calc(10% + var(--arcX,24px))) translateY(calc(var(--travelY,80px) * -.52)) rotate(1deg)}to{transform:translate(10%) translateY(calc(var(--travelY,80px) * -1)) rotate(0)}}@keyframes tutorialMove{0%{transform:translateY(0)}45%{transform:translateY(22px)}to{transform:translateY(0)}}@keyframes tutorialGap{0%{transform:translateY(0)}45%{transform:translateY(10px)}to{transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 #4b7fff73}70%{box-shadow:0 0 0 14px #4b7fff00}to{box-shadow:0 0 #4b7fff00}}@keyframes hintFade{0%{opacity:0}12%{opacity:1}78%{opacity:1}to{opacity:0}}@media (max-height: 820px){.board{min-height:calc(100dvh - 200px)}.board.phase-playing,.board.phase-checked,.board.phase-revealing-correct,.board.phase-result-ready{gap:4px}.card{padding:8px;min-height:60px}.card-top{gap:8px}.thumb-flip{width:72px;height:48px}.title{font-size:15px;line-height:1.15}.desc{font-size:11px;line-height:1.2}}.leaderboard{margin-top:16px;padding:12px;border:1px solid #3a3a3a;border-radius:12px;background:#171717}.leaderboard.fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;margin:0;border-radius:0;padding:16px;background:#111;display:flex;flex-direction:column;padding-top:calc(env(safe-area-inset-top) + 124px)}.leaderboard-title{text-align:center;font-size:30px;line-height:1.05;letter-spacing:.01em;margin:28px 0 14px;font-weight:800}.leaderboard-list{max-height:46vh;overflow:auto;margin-bottom:10px}.leaderboard.fullscreen .leaderboard-list{flex:1;max-height:none}.lb-head,.lb-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.lb-head{padding:6px 8px;color:#c9d4ff;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid #3a3a3a;margin-bottom:6px}.lb-table{display:flex;flex-direction:column;gap:8px}.lb-row{padding:10px;border:1px solid #3a3a3a;border-radius:10px;background:#1d1d1d}.lb-name{font-weight:700;font-size:17px;letter-spacing:.01em;color:#fff}.lb-score{font-weight:800;font-size:26px;line-height:1;color:#eaf0ff;font-family:Inter,system-ui,sans-serif}.play-again{width:100%;padding:14px 16px;font-size:18px;font-weight:700;border-radius:999px;box-shadow:none}ol{padding-left:20px}.celebration{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:35;overflow:hidden}.celebration .dot{position:absolute;width:18px;height:18px;border-radius:999px;opacity:.5;animation:pop 1.6s ease-out infinite}.celebration .d1{left:4%;top:74%;background:#4b7fff;animation-delay:0s}.celebration .d2{left:12%;top:62%;background:#7f7bff;animation-delay:.07s}.celebration .d3{left:19%;top:80%;background:#4bc0ff;animation-delay:.14s}.celebration .d4{left:27%;top:58%;background:#a66bff;animation-delay:.21s}.celebration .d5{left:35%;top:70%;background:#4b7fff;animation-delay:.28s}.celebration .d6{left:43%;top:52%;background:#66a3ff;animation-delay:.35s}.celebration .d7{left:51%;top:76%;background:#7f7bff;animation-delay:.42s}.celebration .d8{left:59%;top:60%;background:#4bc0ff;animation-delay:.49s}.celebration .d9{left:67%;top:82%;background:#a66bff;animation-delay:.56s}.celebration .d10{left:75%;top:54%;background:#4b7fff;animation-delay:.63s}.celebration .d11{left:83%;top:72%;background:#66a3ff;animation-delay:.7s}.celebration .d12{left:91%;top:64%;background:#7f7bff;animation-delay:.77s}.celebration .d13{left:8%;top:40%;background:#4bc0ff;animation-delay:.84s}.celebration .d14{left:22%;top:34%;background:#a66bff;animation-delay:.91s}.celebration .d15{left:38%;top:44%;background:#4b7fff;animation-delay:.98s}.celebration .d16{left:54%;top:30%;background:#66a3ff;animation-delay:1.05s}.celebration .d17{left:68%;top:38%;background:#7f7bff;animation-delay:1.12s}.celebration .d18{left:79%;top:28%;background:#4bc0ff;animation-delay:1.19s}.celebration .d19{left:90%;top:42%;background:#a66bff;animation-delay:1.26s}.celebration .d20{left:47%;top:20%;background:#4b7fff;animation-delay:1.33s}@keyframes pop{0%{transform:translateY(0) scale(.8);opacity:.2}35%{transform:translateY(-18px) scale(1.12);opacity:.6}to{transform:translateY(-64px) scale(.92);opacity:0}}