*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:Mali,sans-serif;color:#4a2340;background:linear-gradient(165deg,#ffe3ef,#e9dcff 55%,#d8f0ff)}
#rApp{position:fixed;top:0;left:0;right:0;height:var(--app-h,100%);overflow-y:auto;padding:max(env(safe-area-inset-top),10px) 12px max(env(safe-area-inset-bottom),12px);display:flex;flex-direction:column;gap:10px;max-width:760px;margin:0 auto}
button{font-family:inherit;color:inherit;cursor:pointer}
.rHead{display:flex;align-items:center;justify-content:space-between;gap:8px}.rHead b{font-size:1.15rem}
.rBack,.rChip{background:#fff;border:3px solid #2a1f2d;border-radius:14px;padding:5px 11px;font-weight:700;text-decoration:none;color:#4a2340;box-shadow:0 3px 0 #2a1f2d;font-size:.9rem}
.rChip.on{background:#ffd1e3}.rChip:disabled,.rBig:disabled{opacity:.45}
.rBig{background:linear-gradient(#ff9ec4,#ff7aa8);color:#fff;border:3px solid #2a1f2d;border-radius:18px;padding:11px 16px;font-weight:700;font-size:1.05rem;box-shadow:0 4px 0 #2a1f2d;text-shadow:0 2px 0 #b3456f}
.rBig small{display:block;font-size:.75rem;font-weight:600}.rBig.coop{width:100%;background:linear-gradient(#b9a6ff,#8f7cff);text-shadow:0 2px 0 #5a46b8}.rBig.ghost{background:#fff;color:#4a2340;text-shadow:none}
.rList{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:9px}
.rSong{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:3px solid #2a1f2d;border-radius:18px;padding:8px 10px;box-shadow:0 4px 0 var(--c)}
.rE{font-size:2rem;width:48px;height:48px;display:grid;place-items:center;background:var(--c);border-radius:14px;border:3px solid #2a1f2d;flex:none}
.rT{flex:1;min-width:0}.rT b{display:block}.rT small{opacity:.75;font-size:.78rem}.rT em{display:flex;gap:5px;font-style:normal;font-size:.75rem;margin-top:2px}.rT em i{font-style:normal;background:#f6eef9;border-radius:8px;padding:0 5px}
.gS{color:#d48a00;font-weight:700}.rCoin{font-size:.75rem;font-weight:700;background:#fff7c2;border:2px solid #2a1f2d;border-radius:10px;padding:2px 6px;white-space:nowrap}
.rDiffs{display:grid;gap:10px}.rDiff{background:#fff;border:3px solid #2a1f2d;border-radius:18px;padding:12px;text-align:left;box-shadow:0 4px 0 #2a1f2d}.rDiff b{font-size:1.2rem}.rDiff small{display:block;opacity:.75}
.rCoins{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.rCoins i{font-style:normal;background:#fff7c2;border-radius:9px;padding:1px 7px;font-weight:700;font-size:.85rem}.rDiff em{float:right;font-style:normal;font-weight:700}
.rHint{text-align:center;opacity:.75;font-size:.85rem;margin:4px 0}
.rGame{position:fixed;top:0;left:0;right:0;height:var(--app-h,100%);display:flex;flex-direction:column;background:radial-gradient(circle at 50% 0,var(--c),#3b2a55 75%);touch-action:none;user-select:none;-webkit-user-select:none}
.rHud{display:flex;align-items:center;gap:10px;padding:max(env(safe-area-inset-top),8px) 10px 6px;color:#fff;z-index:3}.rHud>div:nth-child(2){flex:1}.rHud b{font-size:1.4rem;text-shadow:0 2px 0 #2a1f2d}.rHud small{margin-left:6px;opacity:.85}
.rHp{width:38%;height:16px;background:#2a1f2d88;border:3px solid #2a1f2d;border-radius:10px;position:relative;overflow:hidden}.rHp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#ff7aa8,#ffd84d);transition:width .2s}.rHp span{position:absolute;inset:0;text-align:center;font-size:.65rem;line-height:10px;font-weight:700}
.rMate{color:#fff;text-align:center;font-size:.85rem;z-index:3}.rDuo{color:#fff36b;text-align:center;font-weight:700;min-height:1.2em;font-size:.9rem;z-index:3;text-shadow:0 2px 0 #2a1f2d}
#cv{flex:1;width:100%;min-height:0;display:block}
.rLanes{position:absolute;left:0;right:0;bottom:0;top:90px;display:grid;grid-template-columns:repeat(4,1fr);z-index:2}.rLane{background:none;border:0;border-left:1px solid #ffffff18}
.rCombo{position:absolute;top:32%;left:0;right:0;text-align:center;color:#fff;font-size:1.6rem;font-weight:700;text-shadow:0 3px 0 #2a1f2d;pointer-events:none;z-index:3}.rCombo.big{font-size:2.3rem;color:#fff36b}
.rJudge{position:absolute;top:44%;left:0;right:0;text-align:center;font-size:1.5rem;font-weight:700;opacity:0;pointer-events:none;z-index:3;text-shadow:0 3px 0 #2a1f2d}.rJudge.on{opacity:1;animation:jp .35s ease-out}
.jP{color:#fff36b}.jG{color:#9ff0ff}.jg{color:#fff}.jM{color:#c9b8d8}@keyframes jp{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.rCount{position:absolute;top:22%;left:0;right:0;text-align:center;font-size:3rem;font-weight:700;color:#fff;text-shadow:0 4px 0 #2a1f2d;pointer-events:none;z-index:3}
.rRes{text-align:center;background:#fff;border:3px solid #2a1f2d;border-radius:24px;padding:16px;box-shadow:0 6px 0 var(--c);margin-top:10px}.rRes h2{margin:4px 0}
.rGrade{font-size:5rem;font-weight:700;line-height:1;-webkit-text-stroke:3px #2a1f2d;color:#ffd84d}.rGrade.gS{color:#ffd84d}.rGrade.gA{color:#ff7aa8}.rGrade.gB{color:#7fd8ff}.rGrade.gC{color:#b9a6ff}
.rStats{display:flex;justify-content:space-around;margin:10px 0}.rStats b{display:block;font-size:1.3rem}.rCnt{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.rCnt i{font-style:normal;background:#3b2a55;border-radius:9px;padding:2px 8px;font-weight:700}
.rEarn{font-size:2rem;font-weight:700;background:#fff7c2;border:3px solid #2a1f2d;border-radius:18px;margin:12px auto;padding:6px 16px;display:inline-block}.rEarn small{display:block;font-size:.8rem}
.rBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.rMateRes{background:#f1ebff;border-radius:12px;padding:6px;margin-top:8px;font-weight:600}
.rCal{background:#fff;border:3px solid #2a1f2d;border-radius:22px;padding:16px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.rCalPad{width:min(62vw,240px);aspect-ratio:1;border-radius:50%;border:4px solid #2a1f2d;background:radial-gradient(#ffd1e3,#ff7aa8);font-size:1.6rem;font-weight:700;color:#fff;position:relative;box-shadow:0 6px 0 #2a1f2d}
#calDot{position:absolute;top:12px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#fff36b;border:3px solid #2a1f2d}
.rRow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}.rRow input{font:inherit;font-size:1.2rem;width:120px;text-align:center;border:3px solid #2a1f2d;border-radius:14px;padding:8px}
.rLobby{background:#fff;border:3px solid #2a1f2d;border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:10px}
.rRoom{display:flex;align-items:center;justify-content:center;gap:8px}.rP{flex:1;background:#f6eef9;border:3px dashed #c9b3d6;border-radius:16px;padding:10px;text-align:center;font-weight:700}.rP.on{border:3px solid #2a1f2d;background:#ffe3ef}.rP small{display:block;font-weight:600}
.rHeartLink{font-size:1.8rem;animation:jp 1s infinite alternate}.rSel{text-align:center;font-size:1.1rem}.rMini{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.rMini .rChip{font-size:1.3rem;padding:3px 8px}
@media (min-width:700px){.rLanes{left:calc(50% - 260px);right:calc(50% - 260px)}#cv{max-width:520px;margin:0 auto}}
#gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffd6e8,#e6d4ff,#d4ecff);transition:opacity .4s} #gate.bye{opacity:0} .gateCard{background:#fff;border-radius:30px;padding:26px 22px;width:min(88vw,360px);text-align:center;box-shadow:0 14px 40px #b98bd066;border:4px solid #ffc8dd;animation:popIn .5s cubic-bezier(.3,1.6,.5,1)} .gateCard.shake{animation:shakeX .45s} .gateCat{font-size:3.4rem;animation:bob 2.2s ease-in-out infinite} .gateCard h2{margin:.2em 0;color:#d4559a} .gateCard input{width:100%;margin:10px 0;text-align:center;font-size:1.1rem} .gateWho .chip{font:inherit;border:2px solid #cdb4db;background:#fff;color:#7a3e6b;border-radius:999px;padding:8px 18px;margin:4px;cursor:pointer} .gateWho .chip.on{background:#ffafcc;border-color:#ffafcc;color:#fff} .gateErr{color:#e0559a;min-height:1.2em;font-weight:700} #gate button:not(.chip){font:inherit;font-weight:700;background:#ffafcc;color:#fff;border:0;border-radius:999px;padding:10px 24px}#gate input{font:inherit;border:2px solid #cdb4db;border-radius:14px;padding:8px}
.rBan{position:fixed;left:50%;top:max(env(safe-area-inset-top),12px);transform:translate(-50%,-140%);background:#fff;border:3px solid #2a1f2d;border-radius:14px;padding:6px 12px;font-weight:700;z-index:50;transition:transform .3s;box-shadow:0 4px 0 #2a1f2d;max-width:92vw;text-align:center}.rBan.on{transform:translate(-50%,0)}
/* v4 สไตล์ทางด่วน 3D */
.rGame{background:#0b0716;overflow:hidden}
.rBg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,var(--c),transparent 60%),linear-gradient(180deg,#120a26,#2a1240 60%,#0b0716)}
.rBg i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(40px);opacity:.42;mix-blend-mode:screen;will-change:transform}
.rBg i:nth-child(1){background:radial-gradient(circle,var(--c),transparent 65%);left:-25vmax;top:-10vmax;animation:bgA 14s ease-in-out infinite alternate}
.rBg i:nth-child(2){background:radial-gradient(circle,#7a5cff,transparent 65%);right:-30vmax;top:10vmax;animation:bgB 18s ease-in-out infinite alternate}
.rBg i:nth-child(3){background:radial-gradient(circle,#3fd4ff,transparent 65%);left:10vmax;bottom:-35vmax;opacity:.28;animation:bgA 22s ease-in-out infinite alternate-reverse}
@keyframes bgA{to{transform:translate(18vmax,12vmax) scale(1.2)}}@keyframes bgB{to{transform:translate(-16vmax,-10vmax) scale(.85)}}
#cv{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0}
.rTouch{position:absolute;inset:0;z-index:2;touch-action:none}
.rQuit{position:absolute;z-index:3;left:50%;top:max(env(safe-area-inset-top),8px);transform:translateX(-50%);background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:2px 12px;font-size:.9rem}
/* ===== v5 ===== */
.rGame .rBg{display:none}
.rSp{margin:0 0 10px}.rSpecial{width:100%;background:linear-gradient(135deg,#ffe3f1,#fff4d6)!important;border-style:dashed!important}
.rSpecial.open{border-style:solid!important;animation:spGlow 1.6s ease-in-out infinite}.rSpecial[disabled]{opacity:.9;cursor:default}
.rTag{font-style:normal;font-size:.7rem;background:#ff8fc4;color:#fff;border-radius:99px;padding:1px 8px;margin-left:4px;vertical-align:middle}
@keyframes spGlow{50%{box-shadow:0 0 0 4px #ffd1e8,0 6px 0 var(--c)}}
.rRes{position:relative;overflow:hidden}.rRes>*{position:relative;z-index:1}
.rRes>.rFw{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.rGrade.pop{display:inline-block;animation:gPop .9s cubic-bezier(.2,1.6,.4,1) both}.rGrade.gS.pop{text-shadow:0 0 18px #ffe98a,0 0 36px #ffb3cf;animation:gPop .9s cubic-bezier(.2,1.6,.4,1) both,gShine 1.4s .9s ease-in-out infinite}
@keyframes gPop{0%{transform:scale(0) rotate(-25deg);opacity:0}60%{transform:scale(1.35) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes gShine{50%{transform:scale(1.08)}}
.rPraise{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:4px 0}
.rPraise canvas{width:150px;height:125px}
.rBub{position:relative;max-width:190px;background:#fff;border:3px solid #2a1f2d;border-radius:16px;padding:8px 10px;font-size:.88rem;text-align:left;margin-bottom:50px;animation:gPop .6s .5s both}
.rBub:before{content:"";position:absolute;left:-12px;bottom:12px;border:7px solid transparent;border-right-color:#2a1f2d}
@media (max-height:700px){.rPraise canvas{width:110px;height:92px}.rBub{margin-bottom:30px;font-size:.8rem}.rGrade{font-size:3.6rem}}
.rHBtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.rHBtns .rChip{font-size:.78rem;padding:4px 9px}
.rTag.day{background:#ff5f97}
.rSpecial.sp-plongmue{background:linear-gradient(135deg,#dfe7f2,#eef0f6)!important}
.rSpecial+.rSpecial{margin-top:8px}
.rSfx{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.rSfx label{display:inline-flex;align-items:center;gap:2px;font-size:14px}.rSfx input[type=range]{width:74px;accent-color:#ff5f97}
.rSpecial{position:relative}.rLoad{position:absolute;left:12px;right:12px;bottom:6px;height:6px;border-radius:99px;background:rgba(0,0,0,.08);overflow:hidden;display:none}.rLoad.on{display:block}.rLoad>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff8fb8,#ffcf5a);transition:width .2s}
.rE{position:relative}.rLock{position:absolute;right:-4px;bottom:-4px;font-size:16px;font-style:normal;background:#fff;border:2px solid #2a1f2d;border-radius:99px;line-height:1;padding:2px}
.rLobby .rLoad{position:relative;left:0;right:0;bottom:0;margin:2px 0 8px}.rErr{color:#c0335f;font-weight:700}
/* v5.5 เล่นต่อ? / FAIL / CLEAR */
#cv.rFailCv{filter:grayscale(1) brightness(.82) contrast(1.05);transition:filter .8s}
.rRev{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(20,10,30,.45);animation:rvIn .35s ease-out}
@keyframes rvIn{from{opacity:0}}
.rRevBox{width:min(88vw,340px);background:#fff;border:3px solid #2a1f2d;border-radius:22px;padding:14px 16px;text-align:center;font-family:Mali,sans-serif;color:#2a1f2d;box-shadow:0 6px 0 #ff8fb8;animation:misIn .45s cubic-bezier(.3,1.6,.6,1)}
.rRevBox h3{margin:0;font-size:1.5rem}.rRevBox p{font-size:.85rem;margin:6px 0 10px}.rRevCd{font:900 3rem Arial,sans-serif;color:#ff5f97;line-height:1.1;animation:cdP 1s infinite}
@keyframes cdP{0%{transform:scale(1.25)}30%{transform:scale(1)}}
.rRevRow{display:flex;gap:8px;margin-top:8px}.rRevRow .rBig{flex:1;padding:8px}.rRevBox small{display:block;min-height:1em;margin-top:6px;color:#c0335f;font-weight:700}
.rGrade.stamp{animation:gStamp .5s cubic-bezier(.2,1.4,.4,1) both!important}
@keyframes gStamp{0%{transform:scale(3.2) rotate(-14deg);opacity:0}60%{transform:scale(.9) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.rRes.shake{animation:rShake .35s}
@keyframes rShake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
@media (prefers-reduced-motion:reduce){.rGrade.stamp,.rRes.shake,.rRevCd{animation:none!important}}
.rBig.cont{background:linear-gradient(90deg,#ff8fb8,#ffcf5a);color:#2a1f2d;flex-basis:100%}.rContMsg{flex-basis:100%;color:#c0335f;font-weight:700;min-height:0}
.rBig.skin{width:100%;background:linear-gradient(#ffd3ec,#ff9ccc);color:#5a1d3d}.rBig.duel{width:100%;background:linear-gradient(#ff9a7a,#e84a5f);color:#fff}
.rSkins{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0}.rSkin{border:2px solid rgba(160,90,140,.25);border-radius:14px;background:rgba(255,255,255,.75);color:#5a1d3d;padding:8px;font:inherit}.rSkin.on{border-color:#ffd34d;box-shadow:0 0 12px #ffd34d88}.rSkin canvas{width:100%;border-radius:8px}.rSkin b,.rSkin small{display:block}
.rPlain{display:flex;flex-direction:column;gap:0;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.85);margin:6px 0}
.rPl{display:flex!important;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:58px;padding:10px 14px!important;margin:0!important;border:0!important;border-bottom:1px solid rgba(90,40,80,.12)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#3a2340;text-align:left;font:inherit;position:relative;transform:none!important}
.rPl:active{background:rgba(255,150,200,.18)!important}.rPl[disabled]{opacity:.5}
.rPlT{min-width:0;flex:1}.rPlT b{display:block;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rPlT small{display:block;font-size:.78rem;opacity:.6}
.rPlG{display:grid;grid-template-columns:repeat(2,auto);gap:1px 10px;font-size:.7rem;font-style:normal;opacity:.8;white-space:nowrap}.rPlG i{font-style:normal}
@media(min-width:700px){.rPlG{grid-template-columns:repeat(4,auto)}.rPlain{max-width:760px;margin:6px auto}}
.rCatP{background:rgba(255,255,255,.8);border-radius:14px;padding:12px;margin:10px 0;color:#3a2340}.rCatBar{height:14px;border-radius:7px;background:rgba(0,0,0,.1);overflow:hidden;margin:6px 0}.rCatBar i{display:block;height:100%;background:linear-gradient(90deg,#ff9ccc,#ffd34d)}
.rCatL{display:grid;gap:8px}@media(min-width:700px){.rCatL{grid-template-columns:1fr 1fr}}.rCatI{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.7);border-radius:14px;padding:8px;color:#3a2340}.rCatI span{flex:1}.rCatI b,.rCatI small{display:block}.rCatI small{opacity:.7;font-size:.75rem}.rCatI.ok{box-shadow:0 0 0 2px #ffd34d inset}
.rPl .rLoad{position:absolute;left:0;bottom:0;height:3px;width:100%;display:none}.rPl .rLoad.on{display:block}.rPl .rLoad i{display:block;height:100%;width:0;background:#ff7fb5}
.rListTg{text-align:center;margin:8px 0}.rBig.cpt{width:100%;background:linear-gradient(#ffe7a8,#ffc75a);color:#5a3a00}
.rPlain,.rListTg{flex-shrink:0}.rList.rPlain{display:flex;gap:0}.rPl{height:auto;min-height:60px}
/* v6.0 หัวเมนูแบบไม่ทับกัน + ตัวหนังสือปุ่มใหญ่ชัดเจน (ไม่มีเงาเหลื่อม) */
.rHead{flex-wrap:wrap;row-gap:8px;padding-top:max(env(safe-area-inset-top),6px)}
.rHead>b{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.rHead>.rBack{flex:0 0 auto;white-space:nowrap}
.rHead>.rHBtns{flex:1 1 100%;justify-content:flex-start;align-items:center;gap:6px}
.rHBtns .rChip{white-space:nowrap;line-height:1.25}
.rSfx{flex-wrap:nowrap}.rSfx input[type=range]{width:64px}
@media(min-width:700px){.rHead>b{text-align:left}.rHead>.rHBtns{flex:0 1 auto;justify-content:flex-end}}
.rBig,.rBig.coop,.rBig.cpt,.rBig.skin,.rBig.duel{text-shadow:none!important;-webkit-text-stroke:0!important;paint-order:normal}
.rBig{background:linear-gradient(#ff7aa8,#e8508a);line-height:1.25}.rBig.coop{background:linear-gradient(#8f7cff,#6a54e0)}
.rBig small{opacity:.95;margin-top:2px}
/* v6.2.1 ขยายพื้นที่แตะ */#vocBtn,#hapBtn,#bossTg,#calBtn{position:relative}#vocBtn::after,#hapBtn::after,#bossTg::after,#calBtn::after{content:"";position:absolute;inset:-6px -3px}#sfxVol{min-height:28px}