:root {
  --ink: #3B2F4A;
  --ink2: #6B5C7B;
  --pink: #FF6F91;
  --pink2: #E0507A;
  --sky: #9FD8FF;
  --cream: #FFF8EE;
  --card: #FFFFFF;
  --line: #EADFF2;
  --ok: #7ACB6A;
  --font: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #BFE6FF; color: var(--ink); font-family: var(--font); }
body { overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.hidden { display: none !important; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- home ---------- */
.screen { position: fixed; inset: 0; overflow-y: auto; touch-action: pan-y; display: flex; align-items: flex-start; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px 24px;
  background: radial-gradient(circle at 20% 10%, #FFE7F0 0, transparent 40%), radial-gradient(circle at 90% 90%, #FFF1D6 0, transparent 45%), linear-gradient(#BDE6FF, #E9F7FF); }
.card { background: var(--card); border-radius: 22px; padding: 18px 18px 16px; width: 100%; max-width: 380px; box-shadow: 0 10px 30px rgba(80, 60, 120, .15), 0 2px 0 rgba(80,60,120,.06); margin: auto 0; }
.logo { font-size: 38px; font-weight: 900; margin: 0; text-align: center; letter-spacing: -.5px; color: var(--ink); }
.logo span { color: var(--pink); }
.tag { text-align: center; color: var(--ink2); margin: 2px 0 6px; font-weight: 700; font-size: 14px; }
#preview { display: block; margin: 0 auto; width: 220px; height: 130px; }
.lbl { font-weight: 800; font-size: 13px; color: var(--ink2); margin: 10px 2px 6px; text-transform: uppercase; letter-spacing: .6px; }
input { font: inherit; font-weight: 800; font-size: 18px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: #FBF8FD; color: var(--ink); outline: none; }
input:focus { border-color: var(--pink); background: #fff; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.sw { aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.sw.on { border-color: var(--ink); transform: scale(1.08); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-weight: 800; font-size: 14px; padding: 7px 12px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink2); cursor: pointer; }
.chip.on { border-color: var(--pink); color: var(--pink2); background: #FFF0F5; }
.btn { font: inherit; font-weight: 900; font-size: 17px; padding: 12px 16px; border-radius: 14px; border: 0; background: #F1EAF7; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 rgba(80,60,120,.18); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(80,60,120,.18); }
.btn.primary { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink2); }
.btn.danger { background: #FFE3E3; color: #C0392B; }
.btn.big { width: 100%; font-size: 20px; padding: 15px; margin-top: 16px; }
.joinrow { display: flex; gap: 8px; margin-top: 10px; }
.joinrow input { text-transform: uppercase; letter-spacing: 6px; text-align: center; }
.joinrow .btn { flex: 0 0 auto; padding: 0 22px; }
.err { color: #D0344F; font-weight: 800; text-align: center; min-height: 1.2em; margin: 10px 0 0; font-size: 14px; }
.invite .btn b { letter-spacing: 2px; }

/* ---------- in game ---------- */
#ui { position: fixed; inset: 0; pointer-events: none; }
#touch { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
#topbar { position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 8px; align-items: center; pointer-events: none; }
.spacer { flex: 1; }
.pill { background: rgba(255,255,255,.88); border-radius: 999px; padding: 6px 12px; font-weight: 900; font-size: 14px; color: var(--ink); box-shadow: 0 2px 8px rgba(60,40,90,.12); }
.btnpill { pointer-events: auto; border: 0; font-family: inherit; cursor: pointer; position: relative; overflow: hidden; }
#btnRetry .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,111,145,.35); }
#btnRetry .txt { position: relative; }
#btnMenu { font-size: 16px; padding: 6px 13px; }

#controls { position: absolute; inset: 0; pointer-events: none; }
.pad { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.3); border: 2px solid rgba(255,255,255,.65); box-shadow: 0 4px 12px rgba(60,40,90,.12); transition: transform .05s, background .05s; }
.pad svg { width: 46%; height: 46%; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.pad.on { background: rgba(255,111,145,.55); transform: scale(.94); }
.pad.left { width: 74px; height: 74px; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); }
.pad.right { width: 74px; height: 74px; left: calc(max(18px, env(safe-area-inset-left)) + 88px); bottom: max(18px, env(safe-area-inset-bottom)); }
.pad.jump { width: 92px; height: 92px; right: max(20px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
.pad.meow { width: 46px; height: 46px; right: calc(max(20px, env(safe-area-inset-right)) + 23px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 104px); font-weight: 900; font-size: 11px; color: var(--ink); }
.pad.grab { width: 66px; height: 66px; right: calc(max(20px, env(safe-area-inset-right)) + 104px); bottom: max(18px, env(safe-area-inset-bottom)); font-weight: 900; font-size: 14px; color: var(--ink); letter-spacing: .3px; }
body.no-touch #controls { display: none; }

.panel { position: absolute; left: 50%; transform: translateX(-50%); top: 50px; width: min(660px, calc(100vw - 20px)); background: rgba(255,255,255,.96); border-radius: 18px; padding: 10px 12px; pointer-events: auto; box-shadow: 0 8px 26px rgba(60,40,90,.18);
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: center; }
.xbtn { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 16px; font-weight: 900; color: var(--ink2); cursor: pointer; padding: 4px 6px; }
.lmid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lright { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.code { font-size: 30px; font-weight: 900; letter-spacing: 3px; color: var(--pink); line-height: 1; }
#qr { width: 104px; height: 104px; border-radius: 10px; background: #fff; cursor: zoom-in; }
#qr.big { position: fixed; width: min(80vw, 80vh); height: min(80vw, 80vh); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; box-shadow: 0 0 0 100vmax rgba(40,30,60,.55); cursor: zoom-out; padding: 10px; }
.small { font-size: 12px; font-weight: 700; color: var(--ink2); }
.joinline { line-height: 1.25; }
#joinUrl { color: var(--ink); word-break: break-all; }
#plist { display: flex; flex-wrap: wrap; gap: 5px; max-height: 58px; overflow: hidden; }
.pchip { display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; border-radius: 999px; background: #F6F0FA; font-weight: 800; font-size: 13px; }
.pchip i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.pchip.off { opacity: .45; }
.pchip .host { font-size: 10px; color: var(--pink2); }
#hostCtl { display: flex; gap: 6px; }
#hostCtl .btn { flex: 1; font-size: 20px; padding: 10px 12px; }
select { font: inherit; font-weight: 800; font-size: 14px; border-radius: 12px; border: 2px solid var(--line); padding: 8px; background: #fff; color: var(--ink); max-width: 100%; }
#hostCtl select { width: 46%; min-width: 0; }
.btn.wa { width: 100%; background: #25D366; color: #fff; box-shadow: 0 3px 0 #1A9E4B; font-size: 14px; padding: 8px; margin-top: 4px; }
.link { background: none; border: 0; font: inherit; font-weight: 800; color: var(--ink2); text-decoration: underline; cursor: pointer; }
/* very small / short screens: drop the long link text, shrink the QR */
@media (max-height: 380px), (max-width: 700px) {
  #qr { width: 84px; height: 84px; }
  .code { font-size: 26px; }
  .joinline { display: none; }
  .panel { gap: 10px; padding: 8px 10px; }
}
#btnShowLobby { position: absolute; left: max(10px, env(safe-area-inset-left)); top: 52px; }

#banner { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); text-align: center; pointer-events: none; animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
#banner .b1 { font-size: clamp(28px, 7vw, 54px); font-weight: 900; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
#banner .b2 { margin-top: 6px; font-size: clamp(14px, 3vw, 20px); font-weight: 800; color: var(--ink); background: rgba(255,255,255,.85); border-radius: 999px; padding: 4px 14px; display: inline-block; }
#banner .b2:empty { display: none; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

#toast { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); background: rgba(59,47,74,.88); color: #fff; font-weight: 800; padding: 7px 14px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
#net { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(40,30,60,.45); color: #fff; font-weight: 900; font-size: 22px; pointer-events: auto; }
#ping { position: absolute; right: 8px; bottom: 2px; font-size: 10px; font-weight: 800; color: rgba(59,47,74,.45); }

.modal { position: absolute; inset: 0; background: rgba(40,30,60,.45); display: flex; align-items: center; justify-content: center; pointer-events: auto; padding: 12px; }
.modal .card { max-width: 320px; display: flex; flex-direction: column; gap: 8px; max-height: 100%; overflow-y: auto; }
.modal h2 { margin: 0 0 4px; text-align: center; font-weight: 900; }
#hostMenu { display: flex; flex-direction: column; gap: 8px; }

#rotate { position: fixed; inset: 0; z-index: 50; background: linear-gradient(#BDE6FF, #E9F7FF); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-weight: 900; font-size: 22px; color: var(--ink); text-align: center; padding: 20px; }
.rot-ico { font-size: 64px; animation: spin 2s ease-in-out infinite; }
@keyframes spin { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }


/* battle HUD */
#battleHud { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; pointer-events: none; }
#bTime { font-weight: 900; font-size: 22px; min-width: 44px; text-align: center; background: rgba(255,255,255,.9); border-radius: 999px; padding: 2px 12px; color: var(--ink); box-shadow: 0 2px 8px rgba(60,40,90,.12); }
#bTime:empty { display: none; }
#bTime.hurry { color: #fff; background: var(--pink); animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.12); } }
#bScores { display: flex; gap: 5px; }
.bs { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.88); border-radius: 999px; padding: 3px 9px 3px 4px; font-weight: 900; font-size: 15px; }
.bs.me { outline: 2px solid var(--pink); }
.bs i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

/* results / awards */
#result { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: min(420px, 92vw); max-height: 86vh; overflow: auto; background: rgba(255,255,255,.96); border-radius: 22px; padding: 14px 16px; text-align: center; pointer-events: auto; box-shadow: 0 12px 34px rgba(60,40,90,.25); animation: pop2 .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop2 { from { transform: translate(-50%, -52%) scale(.7); opacity: 0; } }
#rTitle { font-size: 30px; font-weight: 900; color: var(--pink); line-height: 1.1; }
#rSub { font-weight: 800; color: var(--ink2); margin: 2px 0 8px; font-size: 14px; }
#rList { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; text-align: left; }
.rrow { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; background: #F8F3FB; border-radius: 12px; padding: 6px 10px; }
.rrow i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.rrow b { color: var(--pink2); font-weight: 900; white-space: nowrap; }
#btnShare { width: 100%; font-size: 16px; padding: 10px; }

/* wallet + closet */
.wallet { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.wallet .sep { width: 10px; }
.fishico { width: 20px; height: 12px; display: inline-block; background: #FFC93C; border-radius: 50% 40% 40% 50%; position: relative; }
.fishico::after { content: ''; position: absolute; right: -6px; top: 1px; border-left: 8px solid #FFC93C; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.swatches { grid-template-columns: repeat(6, 1fr); }
.sw { position: relative; }
.sw.locked { opacity: .55; }
.sw.locked::after, .chip.locked::after { content: '🔒'; font-size: 11px; }
.sw.locked::after { position: absolute; right: -4px; bottom: -4px; }
.chip.locked { opacity: .6; }
.chip.locked::after { margin-left: 4px; }
.sw.trying, .chip.trying { outline: 3px dashed var(--pink); outline-offset: 2px; opacity: 1; }
.buybar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; background: #FFF4E0; border-radius: 14px; padding: 8px 8px 8px 12px; font-weight: 800; font-size: 14px; }
.buybar .btn { padding: 8px 14px; font-size: 15px; }
.buybar .btn:disabled { background: #D9D1E3; box-shadow: none; color: #6B5C7B; }
.tiny { font-size: 12px; color: var(--ink2); font-weight: 700; text-align: center; margin: 10px 0 0; }
#rStars { font-size: 34px; color: #FFC93C; -webkit-text-stroke: 1.5px #B8860B; line-height: 1; }
#rStars:empty, #rReward:empty { display: none; }
#rReward { font-weight: 900; color: #1F9D55; margin: 4px 0 8px; font-size: 14px; }

/* menu: two columns so it fits a landscape phone */
.menucard { max-width: 460px !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.menucard h2 { grid-column: 1 / -1; }
.menucard #hostMenu { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menucard #hostMenu #mLobby { grid-column: 1 / -1; }
.menucard .btn { padding: 10px; font-size: 15px; }
.menucard #mClose { grid-column: auto; }

/* results: compact on short screens */
@media (max-height: 430px) {
  #result { padding: 10px 14px; }
  #rTitle { font-size: 24px; }
  #rList { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .rrow { font-size: 12px; padding: 4px 8px; }
  #rStars { font-size: 26px; }
}

/* home screen on a landscape phone: two columns, everything visible */
@media (orientation: landscape) and (max-height: 520px) {
  .screen { align-items: center; padding: 10px; }
  .card.home { max-width: 760px; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); column-gap: 18px; padding: 12px 16px; align-items: center; }
  .home .hr { min-width: 0; }
  .home .logo { white-space: nowrap; }
  .home .swatches { max-width: 100%; }
  .home .hl { display: flex; flex-direction: column; align-items: center; }
  .home .logo { font-size: 28px; }
  .home .tag { font-size: 12px; }
  .home #preview { width: 170px; height: 100px; }
  .home .lbl { margin: 6px 2px 4px; }
  .home .btn.big { margin-top: 8px; padding: 11px; font-size: 18px; }
  .home .tiny { display: none; }
  .home .actions { position: static; }
  .home input { padding: 9px 12px; font-size: 16px; }
  .home .swatches { grid-template-columns: repeat(11, 1fr); gap: 4px; }
  .home .chip { padding: 4px 9px; font-size: 12px; }
  .home .chips { gap: 4px; }
}

/* home: compact everywhere, and the Host/Join buttons stay on screen */
.home .hl { display: flex; flex-direction: column; align-items: stretch; }
.home #name { margin-top: 4px; text-align: center; }
.swatches { grid-template-columns: repeat(11, 1fr); gap: 5px; }
.chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; }
.home .actions { position: sticky; bottom: -16px; background: #fff; padding: 2px 0 6px; margin-top: 4px; z-index: 2; }
.home .btn.big { margin-top: 8px; }
.home .err:empty { display: none; }
@media (max-height: 760px) and (orientation: portrait) {
  #preview { width: 170px; height: 100px; }
  .logo { font-size: 32px; }
  .tag { display: none; }
  .home .lbl { margin: 6px 2px 4px; }
}
@media (orientation: portrait) {
  .chips { flex-wrap: wrap; overflow: visible; gap: 5px; }
  .chip { padding: 5px 10px; font-size: 13px; }
}

/* voice chat */
#btnMic { padding: 5px 10px; line-height: 0; }
#btnMic svg { width: 18px; height: 18px; fill: none; stroke: #5A4E66; stroke-width: 2.2; stroke-linecap: round; }
#btnMic rect { fill: #5A4E66; stroke: none; }
#btnMic.on { background: #FF6F91; }
#btnMic.on svg { stroke: #fff; }
#btnMic.on rect { fill: #fff; }
#btnMic.on .slash { display: none; }
#btnMic .slash { stroke: #E0405F; }
.pchip .mic { display: inline-block; width: 8px; height: 11px; margin-left: 4px; border-radius: 4px; background: #FF6F91; vertical-align: -1px; }

/* emotes */
.pad.emo { width: 44px; height: 44px; right: calc(max(20px, env(safe-area-inset-right)) + 115px); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 78px); }
.pad.emo svg { width: 58%; height: 58%; stroke-width: 2.2; }
.pad.emo circle { fill: var(--ink); }
#emoPick { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 160px); display: flex; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 6px 18px rgba(60,40,90,.18); pointer-events: auto; }
#emoPick button { width: 46px; height: 42px; border: 0; border-radius: 12px; background: #F4EEFA; padding: 0; cursor: pointer; }
#emoPick button:active { transform: scale(.92); background: #FFD6E2; }
#emoPick canvas { width: 46px; height: 42px; display: block; }
body.no-touch #emoPick { display: none; }

/* shared team hearts on boss stages */
#hearts { color: #E0405F; letter-spacing: 1px; font-size: 15px; padding: 4px 10px; }
#hearts .lost { color: rgba(90,78,102,0.3); }
#hearts.hit { animation: heartHit .5s ease; }
@keyframes heartHit { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.35); } }

/* TV mode */
.tvlink { display: block; text-align: center; margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--ink2); text-decoration: none; }
.tvcard { max-width: 520px; text-align: center; }
.tvcard .joinrow { margin-top: 12px; }
body.tv #controls, body.tv #touch, body.tv #btnMic, body.tv #btnRetry, body.tv #emoPick, body.tv #btnShare,
body.tv #hostCtl, body.tv #btnInvite, body.tv #mVoice, body.tv #mPad, body.tv #hostMenu, body.tv #ping { display: none !important; }
body.tv #topbar .pill { font-size: 22px; padding: 8px 18px; }
body.tv #lobby { transform: translateX(-50%) scale(1.3); transform-origin: top center; width: min(620px, 72vw); top: 70px; }
body.tv #banner .b1 { font-size: 72px; }
body.tv #toast { font-size: 22px; }
body.tv #result { transform: scale(1.3); }