:root{color-scheme:dark}html,body{margin:0;height:100%;background:#0b0c12;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow:hidden;overscroll-behavior:none}.screenFade{position:fixed;inset:0;z-index:100;pointer-events:none;background:#0000;opacity:0;transition:opacity .42s ease}.screenFade.on{opacity:.78}body{min-height:100dvh}#app{min-height:100dvh;display:flex;align-items:center;justify-content:center}.wrap{width:min(520px,100vw);height:100%;min-height:100dvh;display:flex;flex-direction:column;gap:12px;padding:14px;padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom));box-sizing:border-box;overflow:auto;-webkit-overflow-scrolling:touch}@media(max-width:520px){.wrap{gap:14px;padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}}@media(min-width:980px){.wrap{width:min(980px,96vw);max-width:980px}.header{margin-top:8px}.board canvas{max-height:70vh}.panel{justify-content:center}.controls{max-width:520px;margin-left:auto;margin-right:auto}}.controls{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:10px;border-radius:16px;background:#0c0c188c;border:1px solid rgba(160,170,255,.16);margin-bottom:calc(10px + env(safe-area-inset-bottom))}@media(max-width:520px){.controls{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;margin-bottom:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px;gap:14px}}.controls .btn{min-width:44px;min-height:44px;padding:10px 12px;border-radius:14px}.controls #btnHold{min-width:92px}.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:10px;position:relative}.headTitle{grid-column:2;justify-self:center;text-align:center}.title{font-weight:900;letter-spacing:.12em;font-size:18px;color:#f2f4ff;text-align:center}.ver{grid-column:1;justify-self:start;align-self:start;margin-top:6px;opacity:.45;font-size:11px;letter-spacing:.08em;color:#cfd3ff}.credit{margin-top:4px;opacity:.82;font-size:12px;letter-spacing:.02em;color:#ffffffe0;text-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap}@media(max-width:520px){.credit{font-size:12px;opacity:.86}}.topMenu{grid-column:3;justify-self:end;align-self:start;margin-top:2px;width:40px!important;max-width:40px;min-width:40px;height:40px;min-height:40px;padding:0!important;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:12px}.topMenu.btn{width:40px!important}.topMenu svg{width:18px;height:18px}.sub{opacity:.7;font-size:12px;color:#cfd3ff;margin-top:4px}.scoreTop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-top:2px}.scoreBig{font-weight:950;font-size:44px;letter-spacing:.02em;color:#fff;line-height:1;--pulse: 0;text-shadow:0 10px 26px rgba(0,0,0,.35)}.scoreBig.pulse{animation:scorePulse .52s cubic-bezier(.2,.9,.2,1) both}@keyframes scorePulse{0%{transform:translateY(6px) scale(.98);filter:saturate(1)}55%{transform:translateY(0) scale(1.14);filter:saturate(1.15);text-shadow:0 0 38px rgba(255,210,110,.55),0 16px 30px rgba(0,0,0,.35)}to{transform:translateY(0) scale(1)}}.comboSmall{opacity:.75;font-size:13px;color:#cfd3ff}.scoreBig.pop,.comboSmall.pop{animation:hudPop .42s cubic-bezier(.2,.9,.2,1) both}@keyframes hudPop{0%{transform:translateY(4px) scale(.98);opacity:.78}55%{transform:translateY(0) scale(1.08);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}.board{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center}canvas{width:min(92vw,520px);height:auto;aspect-ratio:1/1;max-height:62vh;border-radius:18px;border:1px solid rgba(160,170,255,.18);background:linear-gradient(180deg,#141428a6,#0a0a12d9);box-shadow:0 0 60px #00000059;touch-action:none}@media(max-width:520px){canvas{max-height:42dvh}}@media(max-width:520px)and (max-height:780px){canvas{max-height:40dvh}}.panel{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}@media(max-width:520px){.panel{flex-direction:column;align-items:center}.slotCol{width:100%}}.slotCol{flex:1;display:flex;flex-direction:column;gap:10px;align-items:stretch}.rowLabel{opacity:.75;font-size:12px;letter-spacing:.08em;color:#d7dbff;text-align:center}.holdWrap{margin-top:6px;display:flex;flex-direction:column;gap:6px;align-items:center}.holdSlot{width:min(72vw,260px);max-width:260px;opacity:.95;aspect-ratio:16/6}.holdSlot.card{padding:8px;border-radius:18px}.holdSlot.has{aspect-ratio:16/8;padding:10px;min-height:88px}@media(max-width:520px){.holdWrap{margin-top:4px;position:sticky;bottom:calc(92px + env(safe-area-inset-bottom));z-index:35;padding-top:6px;padding-bottom:6px;width:100%;background:linear-gradient(180deg,#0b0c1200,#0b0c12c7 25%,#0b0c12c7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.holdSlot{width:92vw;max-width:340px;aspect-ratio:16/6}.holdSlot.has{aspect-ratio:16/7}.holdEmpty{height:42px}}.holdSlot.has{border-color:#ffbe5a40}.holdEmpty{height:64px;display:flex;align-items:center;justify-content:center;opacity:.55;font-size:13px;letter-spacing:.04em}@media(min-width:980px){.rowLabel{text-align:center}.holdSlot{width:240px}}.tray{display:flex;gap:12px;touch-action:none;justify-content:center;align-items:stretch;width:100%;max-width:520px;margin:0 auto}.cardWrap{display:flex;flex-direction:column;gap:6px;min-width:0}.cardLabel{opacity:.7;font-size:12px;letter-spacing:.06em;color:#cfd3ff;text-align:center}.card{flex:1;min-width:0;background:#0c0c188c;border:1px solid rgba(160,170,255,.16);border-radius:16px;padding:10px;box-sizing:border-box;touch-action:none;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.card canvas{border-radius:12px;display:block;width:100%;height:auto;max-height:100%;max-width:100%}.badge{position:absolute;right:10px;top:10px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:950;font-size:12px;letter-spacing:.02em;color:#ffffffeb;background:#00000059;border:1px solid rgba(255,200,120,.25);pointer-events:none}.holdBadge{position:absolute;right:10px;top:10px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:950;font-size:12px;letter-spacing:.02em;color:#ffffffeb;background:#00000059;border:1px solid rgba(255,200,120,.25)}@media(max-width:520px){.tray{display:grid;grid-template-columns:1fr minmax(0,240px) minmax(0,140px);column-gap:12px;row-gap:10px;align-items:stretch;justify-items:stretch;margin-top:2px;max-width:392px;margin-left:auto;margin-right:auto}.tray .cardWrap:nth-child(1){grid-column:2}.tray .cardWrap:nth-child(2){grid-column:3}#cardNow{width:100%;max-width:none;aspect-ratio:4/3}#cardNext{width:100%;max-width:none;opacity:.55;aspect-ratio:16/9}.card{padding:12px;border-radius:18px}.card canvas{height:auto!important}.cardLabel{white-space:nowrap}}#cardNow{flex:1;max-width:340px}#cardNext{flex:.65;max-width:240px;opacity:.62}#cardNext canvas{filter:saturate(.9) brightness(.95)}#rankList{max-height:min(56vh,520px);overflow:auto;-webkit-overflow-scrolling:touch}.btn{width:100%;padding:10px;border-radius:14px;border:1px solid rgba(160,170,255,.2);background:#181832cc;color:#f2f4ff;font-weight:900;letter-spacing:.06em;cursor:pointer;position:relative}.header .btn{width:auto}.btn.primary{border-color:#ff963c8c;background:linear-gradient(180deg,#ff8c37eb,#b43c1ee0)}.btn{transition:transform 90ms ease,filter .12s ease}.btn:active{transform:translateY(1px) scale(.985);filter:saturate(1.1) brightness(1.03)}.btn.tap{animation:btnTap .18s cubic-bezier(.2,.9,.2,1) both}@keyframes btnTap{0%{transform:translateY(0) scale(1)}45%{transform:translateY(1px) scale(.97)}to{transform:translateY(0) scale(1)}}.btn.disabled{opacity:.35;cursor:not-allowed;filter:saturate(.7)}.btn.rescue{border-color:#ffbe5aa6!important;box-shadow:0 0 26px #ff8c3729}.btn.rescue:after{content:"";position:absolute;inset:-10px;border-radius:20px;border:2px solid rgba(255,180,80,0);box-shadow:0 0 #ffa03c00;pointer-events:none;animation:rescuePulse .72s ease-in-out infinite}.btn.rescue:before{content:"";position:absolute;inset:-2px;border-radius:16px;background:radial-gradient(circle at 50% 50%,#ffaa462e,#ffaa4600 62%);pointer-events:none;animation:rescueBreath .72s ease-in-out infinite}@keyframes rescuePulse{0%{transform:scale(1.22);opacity:0;border-color:#ffbe5a00;box-shadow:0 0 #ffa03c00}18%{opacity:1;border-color:#ffc86ed9;box-shadow:0 0 34px #ff8c3747}to{transform:scale(1);opacity:0;border-color:#ffbe5a00;box-shadow:0 0 #ffa03c00}}@keyframes rescueBreath{0%{opacity:.15}50%{opacity:.35}to{opacity:.15}}.hint{opacity:.7;font-size:12px;color:#cfd3ff;line-height:1.35}.toast{position:fixed;left:50%;bottom:16px;transform:translate(-50%);background:#000000b3;border:1px solid rgba(160,170,255,.22);padding:10px 12px;border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:13px;opacity:0;pointer-events:auto;-webkit-user-select:text;user-select:text;transition:opacity .15s ease;max-width:min(92vw,520px)}.toast.show{opacity:1}.gameover{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;background:radial-gradient(circle at 50% 40%,#00000026,#000000c7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .72s ease}.gameover .panel{transform:translateY(12px) scale(.985);transition:transform .78s cubic-bezier(.2,.9,.2,1);will-change:transform}.gameover.show{opacity:1}.gameover.show .panel{transform:translateY(0) scale(1)}.gameover .panel{display:block;width:min(320px,86vw);border-radius:18px;background:#0c0c18e0;border:1px solid rgba(160,170,255,.18);box-shadow:0 0 60px #00000073;padding:16px 16px 14px}.gameover .t{font-weight:950;letter-spacing:.14em;text-align:center;color:#fff;opacity:.92}.gameover .s{margin-top:10px;font-size:28px;font-weight:950;text-align:center;color:#fff}.gameover .bonus{margin-top:6px;text-align:center;font-weight:800;color:#ffbe5af2;letter-spacing:.02em;text-shadow:0 6px 18px rgba(0,0,0,.35)}.gameover .bonus.pop{animation:bonusPop .42s cubic-bezier(.2,.9,.2,1) both}@keyframes bonusPop{0%{transform:translateY(6px) scale(.95);opacity:0}60%{transform:translateY(0) scale(1.04);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}.gameover .b{margin-top:14px}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:70;background:radial-gradient(circle at 50% 40%,#0000001a,#000000bf);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translateY(10px) scale(.985);transition:opacity .24s cubic-bezier(.2,.9,.2,1),transform .24s cubic-bezier(.2,.9,.2,1);will-change:opacity,transform}.modal.show{opacity:1;transform:translateY(0) scale(1)}.menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:65;background:radial-gradient(circle at 20% 30%,#7dd3fc1a,#0000 45%),radial-gradient(circle at 80% 70%,#fda4af1a,#0000 50%),radial-gradient(circle at 50% 40%,#0000001a,#000000c7);animation:menuGlow 5.5s ease-in-out infinite;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translateY(10px) scale(.985);transition:opacity .24s cubic-bezier(.2,.9,.2,1),transform .24s cubic-bezier(.2,.9,.2,1);will-change:opacity,transform}@keyframes menuGlow{0%{filter:saturate(1.02) brightness(1)}50%{filter:saturate(1.18) brightness(1.04)}to{filter:saturate(1.02) brightness(1)}}.menu.show{opacity:1;transform:translateY(0) scale(1)}@media(prefers-reduced-motion:reduce){.menu,.modal{transition:none!important;transform:none!important}}.menu .panel{display:block;width:min(420px,92vw);border-radius:18px;background:#0c0c18f0;border:1px solid rgba(160,170,255,.18);box-shadow:0 0 60px #00000073;padding:18px 16px 14px;color:#f2f4ff}.menu .t{font-weight:950;letter-spacing:.1em;text-align:center;font-size:18px}.menu .p{margin-top:14px}.menuBtns{display:flex;flex-direction:column;gap:10px}.goBtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{display:flex;flex-direction:column;gap:8px}.field .lab{opacity:.75;font-size:12px;letter-spacing:.08em}.inp{width:100%;box-sizing:border-box;padding:12px;border-radius:14px;border:1px solid rgba(160,170,255,.2);background:#1818328c;color:#fff;font-weight:850;letter-spacing:.04em;font-size:16px;outline:none}.inp:focus{border-color:#ff963c8c;box-shadow:0 0 0 3px #ff8c371f}.rankRow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(160,170,255,.1)}.rankRow .nm{flex:1;min-width:0;opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal .panel{display:block;width:min(420px,92vw);border-radius:18px;background:#0c0c18f0;border:1px solid rgba(160,170,255,.18);box-shadow:0 0 60px #00000073;padding:16px 16px 14px;color:#f2f4ff;max-height:min(80vh,640px);overflow:auto}.modal .t{font-weight:950;letter-spacing:.1em;text-align:left;font-size:16px}.modal .p{margin-top:12px;opacity:.95;font-size:15px;line-height:1.75;text-align:left}@media(max-width:520px){.modal .panel{padding:16px 14px 14px}.modal .t{font-size:17px}.modal .p{font-size:15px;line-height:1.78}}.modal .p .h{margin-top:10px;opacity:.7;font-size:12px;letter-spacing:.1em}.modal .p b{color:#fff}.modal ul{margin:8px 0 0 22px;padding:0;display:flex;flex-direction:column;gap:6px;list-style:disc;list-style-position:outside}.modal li{margin:0;text-align:left;word-break:keep-all}.modal .check{margin-top:14px;display:flex;gap:10px;align-items:center;justify-content:flex-start;opacity:.92;font-size:13px}.modal .check input{width:18px;height:18px}.modal .b{margin-top:14px}.modal .b .btn{width:100%}.tut{position:fixed;inset:0;pointer-events:none;z-index:50}.tut .hand{position:fixed;width:42px;height:42px;border-radius:999px;background:#ffffff14;border:1px solid rgba(200,210,255,.25);box-shadow:0 0 30px #ffffff1a}.tut .hand:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin-left:-5px;margin-top:-5px;border-radius:999px;background:#ffffffa6}.tut .trail{position:fixed;height:2px;background:linear-gradient(90deg,#fff0,#ffffff73,#fff0);opacity:.65;border-radius:99px}.iconBtn{display:flex;align-items:center;justify-content:center;gap:8px}.iconBtn svg{width:18px;height:18px;opacity:.95}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}to{transform:translate(0)}}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}to{transform:scale(1)}}.shake{animation:shake .18s ease-in-out}.pop{animation:pop .22s cubic-bezier(.2,.9,.2,1)}