:root {
  --pink: #ff4f9a; --pink2: #ff8fb8; --rose: #c2185b; --cream: #fff6f9; --ink: #4a1631; --md: #3f74ff; --fz: #ff3d8b;
  --card: rgba(255, 247, 251, 0.94); --shadow: 0 12px 40px rgba(140, 20, 70, 0.28);
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #ffb6cf; color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; overscroll-behavior: none; }
body { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--rose); }

/* HUD */
#hud { position: absolute; top: max(6px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; gap: 8px; justify-content: center; align-items: center; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
.hbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.85); box-shadow: 0 3px 10px rgba(120,0,60,.25); font-size: 16px; font-weight: 700; color: var(--rose); }
.chip { background: rgba(255,255,255,0.85); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; color: var(--rose); box-shadow: 0 3px 10px rgba(120,0,60,.2); white-space: nowrap; }
#hint { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); max-width: min(560px, 80vw); text-align: center; background: rgba(74, 22, 49, 0.78); color: #fff; padding: 7px 14px; border-radius: 14px; font-size: 14px; line-height: 1.3; opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 4; }
#hint.show { opacity: 1; }
#netBadge { position: absolute; top: calc(max(6px, env(safe-area-inset-top)) + 50px); left: max(10px, env(safe-area-inset-left)); font-size: 12px; background: rgba(255,255,255,.85); border-radius: 999px; padding: 4px 10px; color: var(--rose); font-weight: 700; z-index: 5; }
#toast { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); background: rgba(255,255,255,.95); color: var(--rose); font-weight: 800; padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 30; font-size: 15px; white-space: nowrap; }
#toast.show { opacity: 1; }

/* overlays */
.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 12px; z-index: 20; overflow-y: auto;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 60%), rgba(255, 120, 170, 0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.overlay.show { display: flex; }
#menu { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.card { background: var(--card); border-radius: 26px; box-shadow: var(--shadow); padding: 18px 22px; width: min(440px, 94vw); text-align: center; margin: auto; border: 2px solid rgba(255,255,255,.9); }
.card.wide { width: min(720px, 96vw); }
.card.hero { width: min(560px, 96vw); }
.kicker { margin: 0; font-weight: 800; color: var(--pink); letter-spacing: .5px; font-size: 14px; }
.hrt { color: var(--pink); display: inline-block; animation: beat 1.2s infinite; }
h1 { margin: 2px 0 2px; font-size: clamp(30px, 7vw, 48px); line-height: 1.05; color: var(--rose); text-shadow: 0 2px 0 #ffd3e4, 0 3px 0 rgba(194,24,91,.18); letter-spacing: .5px; }
h2 { margin: 4px 0 10px; color: var(--rose); font-size: 24px; }
.sub { margin: 4px 0 8px; font-size: 16px; }
.small { font-size: 13px; opacity: .85; }
.duo { display: flex; justify-content: center; margin: 2px 0; }
#duoCanvas { width: 280px; height: 110px; }
.actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 8px 0; }
.big { display: block; width: 100%; border: 0; border-radius: 18px; padding: 12px 10px; font-size: 18px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ff6aa8, #e91e63); box-shadow: 0 5px 0 #a3134a, 0 8px 18px rgba(163,19,74,.3); margin: 8px 0; text-decoration: none; }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #a3134a; }
.big small { display: block; font-size: 12px; font-weight: 600; opacity: .92; margin-top: 3px; }
.big.alt { background: linear-gradient(180deg, #b388ff, #7c4dff); box-shadow: 0 5px 0 #4a2bb0, 0 8px 18px rgba(74,43,176,.3); }
.big.md { background: linear-gradient(180deg, #6f97ff, #3f74ff); box-shadow: 0 5px 0 #1f47b8; }
.big.fz { background: linear-gradient(180deg, #ff7ab0, #ff3d8b); box-shadow: 0 5px 0 #b3165a; }
.big.wa { background: linear-gradient(180deg, #4be07d, #1fa855); box-shadow: 0 5px 0 #127a3b; }
.ghost { border: 2px solid rgba(194,24,91,.35); background: rgba(255,255,255,.7); border-radius: 999px; padding: 8px 16px; font-weight: 700; color: var(--rose); margin: 4px; font-size: 15px; }
.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.row .big { flex: 1; }
.label { margin: 10px 0 0; font-weight: 700; font-size: 14px; }
.join input { flex: 1; min-width: 0; font: inherit; font-size: 26px; font-weight: 900; letter-spacing: 8px; text-align: center; text-transform: uppercase; border-radius: 16px; border: 3px solid var(--pink2); padding: 8px; margin: 8px 0; color: var(--rose); background: #fff; }
.code { font-size: 44px; font-weight: 900; letter-spacing: 12px; color: var(--rose); background: #fff; border-radius: 18px; padding: 6px 0 6px 12px; border: 3px dashed var(--pink2); }
.status { min-height: 1.3em; font-weight: 700; color: #7c4dff; margin: 8px 0 2px; }
.status.err { color: #d50000; }
.status.ok { color: #1a9a4b; }
ul.how { text-align: left; padding-left: 20px; margin: 6px 0; line-height: 1.45; font-size: 15px; }
.keys { font-size: 13px; text-align: left; background: rgba(255, 200, 220, .45); border-radius: 12px; padding: 8px 10px; margin: 6px 0; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 12px; }
.lv { border: 0; border-radius: 18px; padding: 10px 6px; background: linear-gradient(180deg, #fff, #ffe1ec); box-shadow: 0 4px 0 #f3a6c4, 0 6px 14px rgba(194,24,91,.15); min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.lv b { font-size: 22px; color: var(--rose); }
.lv span { font-size: 12px; font-weight: 700; line-height: 1.2; }
.lv i { font-style: normal; font-size: 13px; letter-spacing: 1px; }
.lv[disabled] { opacity: .5; filter: grayscale(.6); cursor: not-allowed; }
.hearts { font-size: 34px; letter-spacing: 6px; margin: 2px 0 6px; }
.love { font-size: 17px; font-weight: 700; color: #8e1e52; margin: 6px 0; line-height: 1.35; }
.letter { background: linear-gradient(180deg, rgba(255,250,252,.97), rgba(255,229,239,.97)); }
.rot { font-size: 54px; animation: turn 1.8s ease-in-out infinite; display: inline-block; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }
@media (max-height: 480px) {
  .card { padding: 10px 16px; border-radius: 20px; }
  h1 { font-size: 34px; }
  .sub { margin: 2px 0 4px; font-size: 14px; }
  #duoCanvas { width: 200px; height: 78px; }
  .big { padding: 9px 8px; font-size: 16px; margin: 5px 0; }
  .grid { grid-template-columns: repeat(8, 1fr); gap: 6px; }
  .lv { min-height: 78px; padding: 6px 2px; }
  .lv span { font-size: 10px; }
  .overlay { align-items: flex-start; }
  .card.hero .actions { margin: 4px 0; }
  .code { font-size: 34px; }
  .love { font-size: 15px; margin: 4px 0; }
  .hearts { font-size: 26px; margin: 0 0 2px; }
  h2 { margin: 2px 0 6px; font-size: 20px; }
}
@media (max-width: 560px) { .actions { grid-template-columns: 1fr; } .grid { grid-template-columns: repeat(4, 1fr); } }

/* v2: continue, level sections, easy toggle */
.big.cont { background: linear-gradient(180deg, #ffb74d, #ff7043); box-shadow: 0 5px 0 #c2410c, 0 8px 18px rgba(194,65,12,.3); margin: 6px 0 2px; }
#levels .card.wide { max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
#lvGrid { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 4px 2px 8px; min-height: 0; }
#levels .overlay, #levels { touch-action: pan-y; }
.lvhead { grid-column: 1 / -1; margin: 6px 0 0; font-weight: 800; color: var(--rose); text-align: left; font-size: 14px; }
.lv.gen { background: linear-gradient(180deg, #fff, #f3e8ff); box-shadow: 0 4px 0 #c9a3f5, 0 6px 14px rgba(124,77,255,.15); }
.lv.fin { background: linear-gradient(180deg, #fff3f8, #ffd0e4); box-shadow: 0 4px 0 #e91e63, 0 6px 14px rgba(233,30,99,.25); }
.lv.cur { outline: 3px solid #ff7043; outline-offset: 2px; }
.lv span { display: block; white-space: normal; line-height: 1.15; max-height: 2.35em; overflow: hidden; max-width: 100%; }
.lv { min-height: 96px; }
.lv:focus-visible, .big:focus-visible, .ghost:focus-visible { outline: 3px solid #7c4dff; outline-offset: 2px; }
#autoNote { min-height: 1em; margin: 0; }
/* bigger jump hit area: an invisible ring around the round jump buttons */
#game, #hud { touch-action: none; }
@media (max-height: 500px) and (orientation: landscape) {
  .card.hero .row .ghost { padding: 5px 12px; font-size: 13px; margin: 2px; }
  .card.hero.has-progress .duo { display: none; }
  .big.cont { padding: 8px 10px; }
  .lv { min-height: 84px; }
}

/* v4: sound controls + zoom */
#zoomBox { position: absolute; right: max(8px, env(safe-area-inset-right)); top: calc(max(6px, env(safe-area-inset-top)) + 50px); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
#zoomBox[hidden] { display: none; }
#zoomBox .hbtn { font-size: 22px; line-height: 1; touch-action: manipulation; }
#hud .chip#lvlName { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; }
#pause .snd { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
#pause .snd .ghost { margin: 0; padding: 8px 6px; font-size: 14px; min-height: 40px; }
#pause .snd .ghost.off, .ghost.off { opacity: .7; border-style: dashed; }
#pause .np { margin: 2px 0 6px; font-size: 13px; color: var(--rose); min-height: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .hbtn { width: 36px; height: 36px; font-size: 15px; } #hud { gap: 5px; } .chip { padding: 5px 10px; font-size: 13px; } #hud .chip#lvlName { max-width: 30vw; } }
@media (max-height: 480px) { #pause .card { padding: 10px 14px; } #pause .big { padding: 7px 8px; font-size: 15px; margin: 4px 0; } #pause .snd { grid-template-columns: 1fr 1fr 1fr; } #pause .snd .ghost { font-size: 13px; padding: 6px 4px; min-height: 36px; } #pause h2 { margin: 2px 0 6px; font-size: 18px; } #zoomBox { top: calc(max(4px, env(safe-area-inset-top)) + 46px); gap: 6px; } }

@media (orientation: portrait) and (max-width: 480px) {
}
@media (orientation: portrait) and (max-width: 340px) {
}
@media (max-height: 360px) { #pause h2 { display: none; } }

/* v5 Light mode: weak phones — no blur behind overlays, no looping CSS animation, flatter shadows */
body.light .overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.light .hrt, body.light .rot { animation: none; }
body.light .hbtn, body.light .chip, body.light #toast { box-shadow: none; }
#ytWrap { contain: strict; pointer-events: none; }

/* ---------- app install + update (v6) ---------- */
.ghost.install { border-color: #f2b632; color: #8a3a00; background: linear-gradient(180deg, #fffbe6, #ffd76a); box-shadow: 0 3px 0 #d99a1e; font-weight: 800; animation: instGlow 2.4s ease-in-out 3; }
.ghost.install:active { transform: translateY(2px); box-shadow: 0 1px 0 #d99a1e; }
@keyframes instGlow { 0%, 100% { box-shadow: 0 3px 0 #d99a1e; } 50% { box-shadow: 0 3px 0 #d99a1e, 0 0 0 5px rgba(255,215,106,.55); } }
.card.hero { position: relative; }
.ver { position: absolute; right: 14px; bottom: 6px; margin: 0; font-size: 10.5px; color: var(--rose); opacity: .45; pointer-events: none; }
.ver:empty { display: none; }
.pwa-banner { position: absolute; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 40; width: min(460px, 94vw);
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.97); border-radius: 18px; padding: 8px 8px 8px 10px; box-shadow: var(--shadow); border: 2px solid #ffd3e4; animation: pbIn .35s ease-out; }
.pwa-banner img { border-radius: 10px; flex: none; }
.pwa-banner p { margin: 0; flex: 1; text-align: left; font-size: 14px; line-height: 1.2; color: var(--ink); }
.pwa-banner p span { display: block; font-size: 12px; opacity: .75; }
.pb-go { border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ff6aa8, #e91e63); box-shadow: 0 3px 0 #a3134a; }
.pb-x { border: 0; background: none; font-size: 18px; color: var(--rose); opacity: .6; padding: 6px 8px; }
@keyframes pbIn { from { transform: translate(-50%, -30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.pwa-sheet { position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(74,22,49,.45); overflow-y: auto; }
.pwa-sheet[hidden] { display: none; }
.sheet-card { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 16px 20px; width: min(400px, 94vw); text-align: center; border: 2px solid #fff; margin: auto; }
.sheet-card img { border-radius: 16px; }
.sheet-card h2 { margin: 6px 0 6px; }
.sheet-card ol { text-align: left; margin: 6px 0; padding-left: 22px; line-height: 1.5; font-size: 15px; }
.sheet-card p { margin: 4px 0; font-size: 15px; }
.sheet-card .ico { font-size: 18px; }
.upd-toast { position: absolute; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.98); color: var(--rose); font-weight: 800; padding: 6px 6px 6px 14px; border-radius: 999px; box-shadow: var(--shadow); border: 2px solid #ffd3e4; white-space: nowrap; font-size: 14px; animation: utIn .3s ease-out; }
.upd-toast[hidden] { display: none; }
.upd-toast #updGo { border: 0; border-radius: 999px; padding: 7px 12px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ff6aa8, #e91e63); box-shadow: 0 3px 0 #a3134a; }
.upd-toast #updX { border: 0; background: none; color: var(--rose); opacity: .6; font-size: 16px; padding: 4px 6px; }
@keyframes utIn { from { transform: translate(-50%, -20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ---------- v6 ---------- */
#coinChip { color: #9a6d00; }
.credit { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--rose); opacity: .9; }
.credit a { color: var(--rose); text-decoration: underline; }
#appVer { opacity: .6; font-weight: 600; }
#raceBar { position: absolute; top: calc(max(6px, env(safe-area-inset-top)) + 76px); left: max(10px, env(safe-area-inset-left)); width: min(170px, 26vw); background: rgba(255,255,255,.6); border-radius: 12px; padding: 5px 8px; z-index: 5; box-shadow: 0 3px 10px rgba(120,0,60,.2); pointer-events: none; }
#raceBar .lane { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; line-height: 1.5; }
#raceBar .nm { width: 42%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#raceBar .tr { flex: 1; height: 7px; background: rgba(0,0,0,.08); border-radius: 9px; overflow: hidden; }
#raceBar .tr i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(.02); border-radius: 9px; transition: transform .3s linear; }
#hint.big { font-size: 44px; font-weight: 900; padding: 10px 30px; top: 35%; background: rgba(194,24,91,.85); }
.seg { display: flex; gap: 6px; margin: 6px 0; }
.seg button { flex: 1; border: 2px solid rgba(194,24,91,.3); background: rgba(255,255,255,.75); border-radius: 14px; padding: 8px 6px; font-weight: 800; color: var(--rose); font-size: 15px; }
.seg button small { display: block; font-size: 11px; font-weight: 600; opacity: .8; }
.seg button.on { background: linear-gradient(180deg, #ff6aa8, #e91e63); color: #fff; border-color: transparent; }
.seg button:disabled { opacity: .75; }
.seg.small button { padding: 5px 4px; font-size: 13px; }
.slots .slot { flex: 1; min-width: 130px; border: 3px solid #ccc; background: #fff; border-radius: 16px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; color: var(--ink); }
.slot small { font-size: 11px; opacity: .75; font-weight: 600; }
.slot.add { border-style: dashed; color: var(--rose); opacity: .85; }
.dot { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 12px; align-items: center; justify-content: center; text-shadow: 0 1px 1px rgba(0,0,0,.3); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 8px 0; }
.ccard { border: 3px solid #ddd; background: #fff; border-radius: 18px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.ccard canvas { width: 70px; height: 70px; }
.ccard b { font-size: 15px; }
.ccard span { font-size: 12px; opacity: .8; }
.ccard.add { border-style: dashed; color: var(--rose); justify-content: center; min-height: 120px; }
.ccard .plus { font-size: 34px; opacity: 1; }
#editCanvas { width: 160px; height: 120px; display: block; margin: 0 auto; }
#editC { gap: 8px; }
.sw { width: 74px; height: 64px; border-radius: 16px; border: 3px solid #fff; color: #fff; font-weight: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,.18); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.sw span { font-size: 20px; }
.sw small { font-size: 10px; font-weight: 700; line-height: 1.1; }
.sw.on { outline: 4px solid var(--ink); outline-offset: 1px; transform: scale(1.06); }
#editName { width: 100%; font: inherit; font-size: 22px; font-weight: 800; text-align: center; border-radius: 14px; border: 3px solid var(--pink2); padding: 8px; color: var(--rose); background: #fff; margin: 6px 0; -webkit-user-select: text; user-select: text; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.mood { border: 2px solid rgba(194,24,91,.3); background: rgba(255,255,255,.8); border-radius: 16px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; color: var(--rose); }
.mood span { font-size: 28px; }
.mood.on { background: linear-gradient(180deg, #ff6aa8, #e91e63); color: #fff; border-color: transparent; }
.np { min-height: 1.2em; font-size: 13px; font-weight: 700; color: #7c4dff; }
.roomrow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.roomrow .code { font-size: 30px; letter-spacing: 8px; padding: 2px 4px 2px 12px; }
.ghost.wa { text-decoration: none; background: #25d366; color: #fff; border-color: #1fa855; }
.lobby { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.lp { border: 3px solid #ddd; background: #fff; border-radius: 14px; padding: 5px 8px; display: flex; align-items: center; gap: 6px; text-align: left; flex-wrap: wrap; }
.lp b { font-size: 15px; }
.lp small { font-size: 11px; opacity: .75; width: 100%; padding-left: 28px; margin-top: -4px; }
.lp .tm { font-size: 10px; font-weight: 900; background: #3d7bff; color: #fff; border-radius: 8px; padding: 1px 6px; margin-left: auto; }
.lp .tm.b { background: #ff6a14; }
#lobbyLevel { min-width: 110px; }
ol.ranks { list-style: none; padding: 0; margin: 8px 0; }
ol.ranks li { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 7px 10px; margin: 5px 0; font-size: 15px; box-shadow: 0 2px 6px rgba(120,0,60,.12); }
ol.ranks .md { font-size: 22px; width: 30px; }
ol.ranks b { flex: 1; text-align: left; }
ol.ranks .t { font-size: 12px; opacity: .75; }
ol.ranks .cn { font-weight: 900; color: #9a6d00; min-width: 52px; text-align: right; }
.card.demo { width: min(460px, 96vw); }
#demoCanvas { width: 100%; max-width: 360px; height: auto; aspect-ratio: 360 / 190; border-radius: 16px; display: block; margin: 0 auto; box-shadow: inset 0 0 0 2px rgba(194,24,91,.2); }
.ghost.install { background: linear-gradient(180deg, #4be07d, #1fa855); color: #fff; border-color: #127a3b; }
@media (max-height: 420px) { .card { padding: 10px 14px; } h1 { font-size: 30px; } #duoCanvas { height: 80px; width: 204px; } .big { padding: 8px 8px; font-size: 16px; margin: 5px 0; } .sub { margin: 0 0 4px; font-size: 14px; } .ghost { padding: 5px 11px; font-size: 13px; margin: 2px; } .lobby { grid-template-columns: 1fr 1fr 1fr 1fr; } .mgrid { grid-template-columns: repeat(6, 1fr); } }

/* ================= v6.1: one button system, icons, settings, new flow, robust touch pad ================= */
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.ic.huge { width: 64px; height: 64px; color: var(--rose); }
.hbtn { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.hbtn .ic { width: 20px; height: 20px; }
.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip .ic { width: 17px; height: 17px; }
.chip.coin .ic { color: #c98a00; }

/* every button on every screen = this one shape (same height, radius, font) */
.btn, .tile, .seg button, .mood, .set { font: inherit; -webkit-appearance: none; appearance: none; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin: 8px 0 0;
  padding: 10px 16px; border-radius: 16px; border: 2px solid rgba(194,24,91,.28); background: #fff; color: var(--rose);
  font-size: 17px; font-weight: 800; text-decoration: none; box-shadow: 0 3px 0 rgba(194,24,91,.22); line-height: 1.1; }
.btn .ic { width: 22px; height: 22px; }
.btn:active, .tile:active, .seg button:active, .mood:active, .set:active { transform: translateY(2px); box-shadow: none; }
.btn.primary { color: #fff; border-color: transparent; background: linear-gradient(180deg, #ff6aa8, #e91e63); box-shadow: 0 4px 0 #a3134a; }
.btn.gold { color: #6b3a00; border-color: transparent; background: linear-gradient(180deg, #ffe58a, #ffc233); box-shadow: 0 4px 0 #c98a00; }
.btn.xl { min-height: 64px; font-size: 22px; letter-spacing: 2px; }
.btn.xl .ic { width: 26px; height: 26px; }
.btn.sq { width: 54px; flex: none; padding: 0; margin: 0; }
.btn[disabled] { opacity: .5; }
.btn:focus-visible, .tile:focus-visible, .set:focus-visible, .seg button:focus-visible { outline: 3px solid #7c4dff; outline-offset: 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 > [hidden] { display: none; }
.row2:has(> [hidden]) { grid-template-columns: 1fr; }
.lvrow { align-items: center; margin-top: 8px; }
.lvrow .chip { font-size: 16px; padding: 10px 16px; }

/* choice tiles (Khud khelo / Versus / Solo / Co-op / 1v1 ...) */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 12px 8px;
  border-radius: 18px; border: 2px solid rgba(194,24,91,.28); background: #fff; color: var(--rose); box-shadow: 0 4px 0 rgba(194,24,91,.22); }
.tile .ic { width: 38px; height: 38px; }
.tile b { font-size: 19px; }
.tile small { font-size: 12px; font-weight: 700; opacity: .8; color: var(--ink); }
.tile.on { color: #fff; background: linear-gradient(180deg, #ff6aa8, #e91e63); border-color: transparent; box-shadow: 0 4px 0 #a3134a; }
.tile.on small { color: #fff; }
.tiles.four .tile { min-height: 92px; }
.tiles.four .tile .ic { width: 28px; height: 28px; }

/* segmented choice, same height as buttons */
.seg { display: flex; gap: 8px; margin: 10px 0 0; }
.seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; margin: 0; padding: 6px 8px; border-radius: 16px;
  border: 2px solid rgba(194,24,91,.28); background: #fff; color: var(--rose); font-size: 16px; font-weight: 800; box-shadow: 0 3px 0 rgba(194,24,91,.22); }
.seg button .ic { width: 20px; height: 20px; }
.seg button.on { color: #fff; background: linear-gradient(180deg, #ff6aa8, #e91e63); border-color: transparent; box-shadow: 0 3px 0 #a3134a; }
.seg[hidden] { display: none; }

/* settings rows: icon, label, switch */
.setlist { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.set { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 14px; border-radius: 16px; border: 2px solid rgba(194,24,91,.2);
  background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; text-align: left; box-shadow: 0 3px 0 rgba(194,24,91,.15); }
.set .ic { width: 22px; height: 22px; color: var(--rose); }
.set span { flex: 1; }
.set .sw { all: unset; flex: none; width: 46px; height: 26px; border-radius: 999px; background: #e7c9d6; position: relative; transition: background .15s; }
.set .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.set[aria-pressed="true"] .sw { background: #e91e63; }
.set[aria-pressed="true"] .sw::after { left: 23px; }
#settings h2 .ic, #players h2 .ic { color: var(--rose); }

/* mood chips inside settings: same family as buttons */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.mood { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 6px 4px; border-radius: 16px;
  border: 2px solid rgba(194,24,91,.28); background: #fff; color: var(--rose); font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 rgba(194,24,91,.22); }
.mood .ic { width: 24px; height: 24px; }
.mood.on { color: #fff; background: linear-gradient(180deg, #ff6aa8, #e91e63); border-color: transparent; box-shadow: 0 3px 0 #a3134a; }

/* player setup cards */
.plcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 8px 0 2px; }
.pcard { background: #fff; border: 3px solid #ddd; border-radius: 18px; padding: 10px; text-align: left; }
.pcard .ph { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pcard .ph canvas { flex: none; width: 64px; height: 64px; }
.pcard .ph b { font-size: 15px; color: var(--ink); flex: 1; }
.pcard .ph .coins { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; color: #9a6d00; }
.pcard .ph .coins .ic { width: 16px; height: 16px; color: #c98a00; }
.pcard .swap { width: 44px; min-height: 44px; margin: 0; padding: 0; flex: none; }
.pcard input { width: 100%; font: inherit; font-size: 18px; font-weight: 800; padding: 10px 12px; border-radius: 14px; border: 2px solid rgba(194,24,91,.3); color: var(--ink); background: #fff8fb; margin-top: 8px; }
.pcard .seg { margin-top: 8px; }
.pcard .cols { display: flex; gap: 8px; margin-top: 8px; }
.pcard .col { flex: 1; min-height: 46px; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; color: #fff; padding: 0; margin: 0; }
.pcard .col .ic { width: 20px; height: 20px; }
.pcard .col.on { box-shadow: 0 0 0 3px var(--ink); }
.modeline { margin: -4px 0 4px; font-weight: 800; color: var(--ink); font-size: 14px; }

/* player symbol dots (circle, diamond, triangle, star) */
.dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; flex: none; }
.dot .ic { width: 14px; height: 14px; }
.ranks .md { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 50%; background: #eee; color: var(--ink); font-weight: 900; font-size: 14px; }
.ranks .md.p1 { background: #ffc233; color: #6b3a00; } .ranks .md.p2 { background: #d6dbe4; } .ranks .md.p3 { background: #f0b48a; color: #6b2f00; }
.ranks .cn { display: inline-flex; align-items: center; gap: 3px; } .ranks .cn .ic { width: 15px; height: 15px; color: #c98a00; }
.lv i .ic { width: 14px; height: 14px; color: #e91e63; } .lv i .ic.off { color: #e5c2d1; }
.lv i { display: inline-flex; gap: 1px; align-items: center; justify-content: center; }
.lvhead { display: flex; align-items: center; gap: 6px; }
.upd-toast #updGo { display: inline-flex; align-items: center; gap: 6px; }
.upd-toast #updGo .ic, .upd-toast #updX .ic, .pb-x .ic { width: 18px; height: 18px; }
#hint .ic { width: 16px; height: 16px; }
.rot { margin: 4px 0; }

/* ---------- on-screen controls (shown with body.pad-on while playing) ---------- */
#touch { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 12; transition: none; animation: none; }
body.pad-on #touch { display: block; }
#touch .side { position: absolute; bottom: 12px; bottom: max(12px, env(safe-area-inset-bottom)); top: 0; width: 50%; pointer-events: none; }
#touch .side.p0 { left: 0; }
#touch .side.p1 { right: 0; }
#touch .side.hidden { display: none; }
#touch .tb { position: absolute; bottom: 0; width: 72px; height: 72px; padding: 0; margin: 0; border-radius: 22px; border: 3px solid rgba(255,255,255,.95);
  pointer-events: auto; touch-action: none; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: .82; background: rgba(61,123,255,.72); box-shadow: 0 3px 10px rgba(60,0,40,.25); -webkit-user-select: none; user-select: none; }
#touch .tb .ic { width: 34px; height: 34px; stroke-width: 3; }
#touch .tb small { font-size: 10px; font-weight: 900; letter-spacing: .5px; margin-top: -2px; }
#touch .tb.on { transform: scale(.92); opacity: 1; filter: brightness(1.15); }
#touch .tb.j { width: 84px; height: 84px; border-radius: 50%; }
#touch .tb.j::after { content: ''; position: absolute; top: -14px; left: -14px; right: -14px; bottom: -14px; border-radius: 50%; }
#touch .p0 .l { left: 16px; left: max(16px, env(safe-area-inset-left)); }
#touch .p0 .r { left: 100px; left: calc(max(16px, env(safe-area-inset-left)) + 84px); }
#touch .p0 .j { left: 196px; left: calc(max(16px, env(safe-area-inset-left)) + 180px); }
#touch .p1 .r { right: 16px; right: max(16px, env(safe-area-inset-right)); }
#touch .p1 .l { right: 100px; right: calc(max(16px, env(safe-area-inset-right)) + 84px); }
#touch .p1 .j { right: 196px; right: calc(max(16px, env(safe-area-inset-right)) + 180px); }
#touch .tag { position: absolute; bottom: 92px; font-weight: 900; font-size: 13px; color: #fff; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.35); white-space: nowrap; }
#touch .p0 .tag { left: 16px; left: max(16px, env(safe-area-inset-left)); }
#touch .p1 .tag { right: 16px; right: max(16px, env(safe-area-inset-right)); }
/* one player on this phone: arrows left, jump right, full width */
#touch.solo .side { width: 100%; }
#touch.solo .side .j { left: auto; right: 22px; right: max(22px, env(safe-area-inset-right)); }
#touch.solo .side .l { left: 16px; left: max(16px, env(safe-area-inset-left)); right: auto; }
#touch.solo .side .r { left: 100px; left: calc(max(16px, env(safe-area-inset-left)) + 84px); right: auto; }
#touch.solo .side .tag { left: 16px; left: max(16px, env(safe-area-inset-left)); right: auto; }
/* short landscape screens */
@media (max-height: 380px) {
  #touch .tb { width: 64px; height: 64px; } #touch .tb.j { width: 72px; height: 72px; } #touch .tb .ic { width: 30px; height: 30px; }
  #touch .p0 .r { left: calc(max(16px, env(safe-area-inset-left)) + 74px); } #touch .p0 .j { left: calc(max(16px, env(safe-area-inset-left)) + 160px); }
  #touch .p1 .l { right: calc(max(16px, env(safe-area-inset-right)) + 74px); } #touch .p1 .j { right: calc(max(16px, env(safe-area-inset-right)) + 160px); }
  #touch.solo .side .r { left: calc(max(16px, env(safe-area-inset-left)) + 74px); }
  #touch .tag { bottom: 80px; }
}
/* portrait (rotate skipped): two players share the bottom, smaller pads */
@media (orientation: portrait) {
  #touch:not(.solo) .tb { width: 50px; height: 50px; border-radius: 15px; } #touch:not(.solo) .tb.j { width: 56px; height: 56px; }
  #touch:not(.solo) .tb .ic { width: 24px; height: 24px; } #touch:not(.solo) .tb small { display: none; }
  #touch:not(.solo) .p0 .l { left: 8px; } #touch:not(.solo) .p0 .r { left: 62px; } #touch:not(.solo) .p0 .j { left: 118px; }
  #touch:not(.solo) .p1 .r { right: 8px; } #touch:not(.solo) .p1 .l { right: 62px; } #touch:not(.solo) .p1 .j { right: 118px; }
  #touch:not(.solo) .tag { bottom: 64px; }
}
@media (orientation: portrait) and (max-width: 350px) {
  #touch:not(.solo) .tb { width: 46px; height: 46px; } #touch:not(.solo) .tb.j { width: 50px; height: 50px; }
  #touch:not(.solo) .p0 .r { left: 58px; } #touch:not(.solo) .p0 .j { left: 108px; }
  #touch:not(.solo) .p1 .l { right: 58px; } #touch:not(.solo) .p1 .j { right: 108px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .card { padding: 12px 16px; } h2 { font-size: 21px; margin: 2px 0 6px; }
  .tile { min-height: 96px; } .btn { min-height: 50px; margin-top: 6px; } .seg button { min-height: 50px; }
  .card.hero .duo { display: none; }
}

#winHearts .ic { width: 36px; height: 36px; color: #e91e63; margin: 0 2px; } #winHearts .ic.off { color: #f3c6d8; }
.lv i .ic.off { color: #e5c2d1; }

.row.join { flex-wrap: nowrap; align-items: stretch; margin-top: 6px; }
.row.join .btn { width: auto; flex: none; margin: 0; padding: 0 18px; }

/* v6.15 intro splash */
#splash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(160deg, #ffd1e1 0%, #ffb6cf 55%, #ff9fc3 100%); transition: opacity .4s ease; cursor: pointer; }
#splash.out { opacity: 0; pointer-events: none; }
#splash .sp-in { animation: spIn .5s ease-out both; padding: 16px; }
#splash .sp-title { font-size: clamp(44px, 12vw, 92px); font-weight: 900; letter-spacing: 3px; line-height: 1; color: #c2185b; text-shadow: 0 3px 0 #fff; }
#splash .sp-tag { margin-top: 12px; font-size: clamp(17px, 4.2vw, 26px); font-weight: 700; color: #6a1b4d; }
#splash .sp-sub { margin-top: 6px; font-size: clamp(13px, 3vw, 17px); font-weight: 600; color: #8e3b6b; opacity: .85; }
#splash .sp-rope { width: min(240px, 60vw); height: auto; margin-bottom: 10px; }
#splash .sp-rope circle { fill: #c2185b; }
#splash .sp-rope path { fill: none; stroke: #c2185b; stroke-width: 4; stroke-linecap: round; }
@keyframes spIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }