@font-face { font-family: 'Press Start 2P'; src: url('../fonts/PressStart2P.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'VT323'; src: url('../fonts/VT323.woff2') format('woff2'); font-display: block; }
:root { --bg: #140a26; --panel: #1f1238ee; --panel2: #2a1a4a; --line: #5b3a9a; --pink: #ff3fd2; --cyan: #3bf0ff; --gold: #ffd23f; --green: #36e27a; --red: #ff4466; --text: #f2eaff; --dim: #b9a8dc; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: 'VT323', monospace; font-size: 20px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
input, textarea, select { user-select: text; -webkit-user-select: text; }
#game { position: fixed; inset: 0; }
#game canvas { image-rendering: pixelated; }
.px { font-family: 'Press Start 2P', monospace; }
.hidden { display: none !important; }
button { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #fff; background: linear-gradient(#ff5fdc, #c71fa6); border: 2px solid #ffb3f0; border-bottom-color: #7a0f63; border-right-color: #7a0f63; padding: 8px 12px; cursor: pointer; border-radius: 4px; text-shadow: 1px 1px 0 #5a0a48; box-shadow: 0 0 8px #ff3fd255; }
button:hover { filter: brightness(1.12); } button:active { transform: translateY(1px); }
button.cyan { background: linear-gradient(#5ff6ff, #18a9c9); border-color: #c8fbff #0a5e72 #0a5e72 #c8fbff; text-shadow: 1px 1px 0 #064356; box-shadow: 0 0 8px #3bf0ff55; }
button.gold { background: linear-gradient(#ffe27a, #d9a21a); border-color: #fff3c0 #7a5a0a #7a5a0a #fff3c0; color: #2a1a00; text-shadow: none; }
button.ghost { background: #2a1a4a; border-color: #5b3a9a; box-shadow: none; }
button.small { font-size: 8px; padding: 5px 8px; }
button:disabled { filter: grayscale(0.8) brightness(0.6); cursor: not-allowed; }
input, select, textarea { font-family: 'VT323', monospace; font-size: 20px; background: #0e0620; color: var(--text); border: 2px solid var(--line); border-radius: 4px; padding: 6px 8px; outline: none; }
input:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 6px #3bf0ff88; }
.neon { color: #fff; text-shadow: 0 0 4px var(--pink), 0 0 10px var(--pink), 0 0 20px var(--pink); }
.neon-c { color: #fff; text-shadow: 0 0 4px var(--cyan), 0 0 10px var(--cyan); }
.coin { color: var(--gold); } .chip { color: #ff9ad5; }

/* ---------- auth ---------- */
#auth { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 120%, #ff3fd255, transparent 60%), linear-gradient(#0b0418, #2a0f4a 70%, #5a1f8a); }
#auth .skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background-repeat: repeat-x; background-position: bottom; image-rendering: pixelated; opacity: 0.9; }
#auth .box { position: relative; width: min(420px, 92vw); background: var(--panel); border: 3px solid var(--pink); border-radius: 10px; padding: 22px; box-shadow: 0 0 30px #ff3fd277, inset 0 0 20px #3bf0ff22; }
#auth h1 { font-family: 'Press Start 2P'; font-size: 30px; text-align: center; margin: 4px 0 2px; letter-spacing: 2px; }
#auth .sub { text-align: center; color: var(--cyan); margin-bottom: 14px; }
#auth .tabs { display: flex; gap: 6px; margin-bottom: 12px; } #auth .tabs button { flex: 1; }
#auth label { display: block; margin: 8px 0 3px; color: var(--dim); }
#auth input[type=text], #auth input[type=password] { width: 100%; }
#auth .adult { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; color: var(--text); font-size: 18px; } #auth .adult input { width: 20px; height: 20px; margin-top: 2px; }
#auth .err { color: var(--red); min-height: 22px; margin-top: 6px; }
#auth .go { width: 100%; margin-top: 6px; font-size: 12px; padding: 12px; }
#auth .foot { text-align: center; color: var(--dim); font-size: 16px; margin-top: 10px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 8px; box-shadow: 0 0 12px #000a, inset 0 0 12px #ff3fd211; }
#hudL { position: absolute; left: 8px; top: 8px; padding: 8px; display: flex; gap: 8px; align-items: flex-start; }
#portrait { width: 48px; height: 72px; image-rendering: pixelated; background: #0e0620; border: 2px solid var(--pink); border-radius: 6px; }
#hudName { font-family: 'Press Start 2P'; font-size: 10px; } #hudRank { color: var(--cyan); font-size: 16px; }
.bar { width: 112px; height: 10px; background: #0e0620; border: 1px solid #000; border-radius: 3px; overflow: hidden; margin-top: 3px; position: relative; }
.bar > i { display: block; height: 100%; width: 50%; }
.stat { display: flex; align-items: center; gap: 4px; font-size: 15px; line-height: 15px; } .stat span { width: 18px; text-align: center; }
#hudR { position: absolute; right: 8px; top: 8px; padding: 8px 10px; text-align: right; min-width: 170px; }
#hudR .money { font-family: 'Press Start 2P'; font-size: 11px; line-height: 18px; }
#clock { font-family: 'Press Start 2P'; font-size: 11px; color: var(--cyan); margin-top: 4px; } #district { color: var(--dim); font-size: 16px; }
#topBtns { position: absolute; right: 8px; top: 112px; display: flex; flex-direction: column; gap: 6px; }
#topBtns button { width: 44px; height: 44px; padding: 0; font-size: 20px; font-family: sans-serif; }
#quest { position: absolute; left: 8px; top: 104px; width: 230px; padding: 6px 8px; font-size: 17px; }
#quest b { font-family: 'Press Start 2P'; font-size: 8px; color: var(--gold); display: block; margin-bottom: 3px; }
#quest .qbar { height: 6px; background: #0e0620; border-radius: 3px; margin-top: 3px; } #quest .qbar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
#prompt { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); padding: 8px 14px; font-family: 'Press Start 2P'; font-size: 10px; color: #fff; border-color: var(--cyan); white-space: nowrap; cursor: pointer; }
#prompt kbd { background: var(--pink); padding: 2px 6px; border-radius: 3px; margin-right: 6px; }
#banner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); max-width: 60vw; padding: 6px 14px; font-size: 18px; border-color: var(--gold); color: var(--gold); text-align: center; }
#speedo { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); padding: 4px 12px; font-family: 'Press Start 2P'; font-size: 10px; color: var(--cyan); }
#roomTitle { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); font-family: 'Press Start 2P'; font-size: 14px; pointer-events: none; transition: opacity 0.6s; }

/* chat */
#chat { position: absolute; left: 8px; bottom: 8px; width: min(380px, 60vw); display: flex; flex-direction: column; }
#chat .tabs { display: flex; gap: 3px; } #chat .tabs button { font-size: 7px; padding: 5px 6px; } #chat .tabs button.on { background: linear-gradient(#5ff6ff, #18a9c9); }
#chatLog { height: 150px; overflow-y: auto; padding: 6px; font-size: 17px; line-height: 19px; margin-top: 3px; user-select: text; -webkit-user-select: text; }
#chatLog .m b { color: var(--cyan); cursor: pointer; } #chatLog .m.dm b { color: #ff9ad5; } #chatLog .m.party b { color: var(--green); } #chatLog .m.sys { color: var(--gold); } #chatLog .m.local b { color: #c7b3ff; } #chatLog .m .ch { color: var(--dim); font-size: 14px; }
#chatForm { display: flex; gap: 4px; margin-top: 3px; } #chatForm input { flex: 1; min-width: 0; font-size: 18px; padding: 4px 6px; } #chatForm button { font-size: 8px; }
#chat.min #chatLog { height: 0; padding: 0; border: 0; }
/* action buttons */
#actions { position: absolute; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap-reverse; gap: 8px; justify-content: flex-end; width: 220px; }
#actions button { min-width: 64px; height: 50px; font-size: 9px; }
/* DualShock-style circular interact (E) face button */
#btnAct {
  width: 64px; height: 64px; min-width: 64px; border-radius: 50%;
  padding: 0; font-family: 'Press Start 2P', monospace; font-size: 18px; font-weight: bold;
  color: #fff; letter-spacing: 0;
  background:
    radial-gradient(circle at 35% 28%, #ffe0f6 0%, #ff7ad8 22%, #e91eac 55%, #9a0a6e 100%);
  border: 3px solid #ffd0f0;
  border-bottom-color: #6a0848; border-right-color: #6a0848;
  box-shadow:
    0 0 0 2px #2a1038,
    0 4px 0 #5a0840,
    0 0 18px #ff3fd2aa,
    inset 0 3px 6px #ffffff66,
    inset 0 -4px 8px #00000044;
  text-shadow: 0 1px 0 #5a0840, 0 0 8px #fff8;
}
#btnAct:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px #2a1038,
    0 2px 0 #5a0840,
    0 0 12px #ff3fd288,
    inset 0 3px 8px #00000055;
}
body.touch #btnAct { width: 72px; height: 72px; min-width: 72px; font-size: 20px; }
#emotes { position: absolute; right: 10px; bottom: 130px; padding: 6px; display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; }
#emotes button { font-size: 20px; font-family: sans-serif; padding: 0; height: 40px; background: #2a1a4a; border-color: var(--line); }
/* joystick — bottom-left; chat moves to bottom-right on phone so it never covers the stick */
#joy { position: absolute; left: 12px; bottom: 16px; width: 128px; height: 128px; border-radius: 50%; background: #ffffff10; border: 2px solid #ffffff40; touch-action: none; z-index: 12; }
#joy i { position: absolute; left: 39px; top: 39px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(#ff8ae6, #c71fa6); border: 2px solid #ffd0f6; box-shadow: 0 0 12px var(--pink); }
body.touch #chat { left: auto; right: 8px; bottom: 8px; width: min(280px, 48vw); }
body.touch #chatLog { height: 72px; }
body.touch #chat.min { width: auto; }
body.touch #actions { bottom: 150px; right: 8px; width: 160px; }
body.touch #prompt { bottom: 168px; }
body.touch #speedo { bottom: 210px; }

/* toasts */
#toasts { position: fixed; top: 120px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: #1f1238f2; border: 2px solid var(--cyan); border-radius: 6px; padding: 6px 14px; font-size: 19px; box-shadow: 0 0 12px #3bf0ff66; animation: tin 0.25s ease-out; max-width: 80vw; text-align: center; pointer-events: auto; }
.toast button { pointer-events: auto; position: relative; z-index: 1; }
.toast.warn, .toast.error { border-color: var(--red); box-shadow: 0 0 12px #ff446666; } .toast.money, .toast.gift { border-color: var(--gold); } .toast.level, .toast.ach, .toast.promo { border-color: var(--pink); }
@keyframes tin { from { transform: translateY(-10px); opacity: 0; } }

/* phone */
#phone { position: fixed; right: 64px; top: 50%; transform: translateY(-50%); width: 330px; height: min(620px, 92vh); z-index: 30; background: #0c0618; border: 4px solid #3a2a5a; border-radius: 30px; padding: 30px 10px 16px; box-shadow: 0 0 0 2px #ff3fd2, 0 0 30px #ff3fd277; display: flex; flex-direction: column; }
#phone::before { content: ''; position: absolute; top: 10px; left: 50%; width: 70px; height: 8px; margin-left: -35px; border-radius: 4px; background: #2a1a4a; }
#phoneTop { display: flex; justify-content: space-between; font-family: 'Press Start 2P'; font-size: 8px; color: var(--dim); padding: 0 8px 6px; }
#phoneScreen { flex: 1; overflow-y: auto; border-radius: 16px; background: linear-gradient(#2a0f4a, #140a26); padding: 10px; }
#phoneHome { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; padding-top: 8px; }
.app { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-size: 15px; }
.app i { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-style: normal; box-shadow: inset 0 -4px 0 #0004, 0 0 8px #0008; }
#phoneBar { display: flex; justify-content: center; padding-top: 8px; } #phoneBar button { width: 120px; }
.ph-h { font-family: 'Press Start 2P'; font-size: 10px; color: var(--pink); margin: 4px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.list { display: flex; flex-direction: column; gap: 6px; }
.row { background: #ffffff0d; border: 1px solid #ffffff18; border-radius: 6px; padding: 6px 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 17px; }
.row .sub { color: var(--dim); font-size: 15px; }
.pill { font-family: 'Press Start 2P'; font-size: 7px; padding: 3px 5px; border-radius: 3px; background: #5b2bd6; } .pill.on { background: var(--green); color: #002a10; } .pill.off { background: #555; }

/* panels */
#panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; width: min(720px, 96vw); max-height: 92vh; display: flex; flex-direction: column; border: 3px solid var(--pink); box-shadow: 0 0 30px #ff3fd266; }
#panelHead { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 2px solid var(--line); background: linear-gradient(90deg, #ff3fd233, transparent); }
#panelTitle { font-family: 'Press Start 2P'; font-size: 13px; }
#panelBody { padding: 12px; overflow-y: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.item { background: #ffffff0b; border: 2px solid #ffffff1a; border-radius: 8px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.item canvas { image-rendering: pixelated; }
.item .nm { font-size: 18px; } .item .pr { font-family: 'Press Start 2P'; font-size: 9px; color: var(--gold); }
.item.owned { border-color: var(--green); }
.tabsrow { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; } .tabsrow button.on { background: linear-gradient(#5ff6ff, #18a9c9); }
.muted { color: var(--dim); } .center { text-align: center; } .big { font-family: 'Press Start 2P'; font-size: 16px; }
/* npc chat */
.npcchat { display: flex; gap: 12px; } .npcchat .face { width: 96px; height: 144px; image-rendering: pixelated; background: #0e0620; border: 2px solid var(--cyan); border-radius: 8px; flex: none; }
.npclog { height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px; user-select: text; -webkit-user-select: text; }
.bub { padding: 6px 10px; border-radius: 10px; max-width: 85%; font-size: 18px; } .bub.n { background: #3b2a6a; align-self: flex-start; border-bottom-left-radius: 2px; } .bub.p { background: #a01f86; align-self: flex-end; border-bottom-right-radius: 2px; }
.opts { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
/* minigames */
.mg { position: relative; background: #0b0418; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; touch-action: none; }
.hype { height: 14px; background: #0e0620; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; } .hype i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--pink), var(--gold)); width: 0; transition: width 0.15s; }
.lanes { display: flex; gap: 8px; justify-content: center; margin-top: 8px; } .lanes button { width: 70px; height: 56px; font-size: 14px; }
.cards { display: flex; gap: 6px; flex-wrap: wrap; min-height: 74px; } .pcard { width: 48px; height: 70px; background: #fff; color: #111; border-radius: 6px; display: flex; flex-direction: column; justify-content: space-between; padding: 4px; font-family: 'Press Start 2P'; font-size: 11px; box-shadow: 2px 2px 0 #0008; } .pcard.r { color: #d0102a; } .pcard.back { background: repeating-linear-gradient(45deg, #5b2bd6, #5b2bd6 4px, #ff3fd2 4px, #ff3fd2 8px); }
.reels { display: flex; gap: 8px; justify-content: center; margin: 10px 0; } .reel { width: 76px; height: 86px; background: #fff; border-radius: 8px; border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 46px; font-family: sans-serif; }
.rlt { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; } .rlt button { padding: 6px 0; font-size: 8px; border-radius: 2px; } .rlt .rd { background: #c0202f; border-color: #ff6a7a; } .rlt .bk { background: #222; border-color: #555; } .rlt .sel { outline: 3px solid var(--gold); }
#modalBg { position: fixed; inset: 0; background: #0008; z-index: 35; }
/* avatar editor */
.ava { display: flex; gap: 14px; flex-wrap: wrap; } .ava .pv { width: 128px; height: 192px; image-rendering: pixelated; background: radial-gradient(#3a1a6a, #140a26); border: 2px solid var(--pink); border-radius: 8px; }
.sw { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; } .sw b { width: 26px; height: 26px; border-radius: 5px; cursor: pointer; border: 2px solid #0008; display: inline-block; } .sw b.on { border-color: #fff; box-shadow: 0 0 6px #fff; }
.opt { display: flex; align-items: center; gap: 6px; margin: 4px 0; } .opt span { min-width: 150px; text-align: center; }
@media (max-width: 700px), (max-height: 520px) {
  #hudL { transform: scale(0.82); transform-origin: top left; } #hudR { transform: scale(0.82); transform-origin: top right; }
  #quest { top: 92px; width: 200px; font-size: 15px; transform: scale(0.85); transform-origin: top left; }
  #topBtns { top: 92px; } #phone { right: 50%; transform: translate(50%, -50%); width: min(330px, 94vw); }
  #actions { width: 170px; } #actions button { min-width: 54px; height: 46px; font-size: 8px; } #btnAct { width: 60px; height: 60px; min-width: 60px; font-size: 16px; }
}
@media (max-height: 520px) { #quest { display: none; } #joy { bottom: 12px; width: 110px; height: 110px; } #joy i { left: 30px; top: 30px; width: 44px; height: 44px; } body.touch #chatLog { height: 48px; } body.touch #actions { bottom: 130px; } }
.rlt .gr { background: #1f8a4a; border-color: #3bd16f; grid-column: span 12; }
.rlt .sel, .tabsrow .sel { outline: 3px solid var(--gold); }
.pcard { align-items: center; justify-content: center !important; font-size: 18px; font-weight: bold; }
.pcard.back { background: repeating-linear-gradient(45deg, #ff3fd2 0 6px, #8b5cf6 6px 12px); color: #fff; }
#editDock .grid .item { font-size: 13px; }
#btnLike { margin-left: 4px; }
/* v2: minimap, confetti */
#mmWrap { position: absolute; right: 60px; top: 112px; padding: 3px; cursor: pointer; border-color: var(--cyan); }
#minimap { display: block; width: 150px; height: 150px; image-rendering: pixelated; border-radius: 5px; }
#mmLabel { position: absolute; left: 6px; bottom: 5px; font-size: 12px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
@media (max-width: 700px), (max-height: 520px) { #mmWrap { top: 92px; right: 56px; } #minimap { width: 110px; height: 110px; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 99; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; animation: cfall 3s linear forwards; }
@keyframes cfall { to { transform: translateY(105vh) rotate(720deg); opacity: 0.6; } }

/* v0.4: party roster + swim stamina */
#partyHud { position: absolute; right: 60px; top: 272px; width: 158px; padding: 6px 7px; font-size: 15px; border-color: #5dff9c; z-index: 6; }
#partyHud .ph-t { font-family: "Press Start 2P", monospace; font-size: 8px; color: #5dff9c; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
#partyHud .pm { display: flex; justify-content: space-between; gap: 4px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#partyHud .pm .sub { color: #bfb3e6; font-size: 13px; }
#partyHud button { width: 100%; margin-top: 5px; font-size: 8px; padding: 6px 4px; }
#swimBar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 92px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; z-index: 6; }
#swimBar i { display: block; width: 110px; height: 8px; border-radius: 4px; background: #1a1230; overflow: hidden; }
#swimBar b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #3bf0ff, #5dff9c); transition: width .2s; }
#swimBar.low b { background: linear-gradient(90deg, #ff3f5a, #ffd23f); }
@media (max-width: 700px), (max-height: 520px) { #partyHud { top: 210px; right: 56px; width: 128px; font-size: 13px; } }

/* === HOTFIX mobile layout (portrait + landscape) === */
/* safe areas (notch / home indicator) */
@supports (padding: max(0px, env(safe-area-inset-bottom))) {
  body.touch #joy { bottom: max(12px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); }
  body.touch #chat { bottom: max(6px, env(safe-area-inset-bottom)); right: max(6px, env(safe-area-inset-right)); }
  body.touch #actions { right: max(6px, env(safe-area-inset-right)); }
  body.touch #topBtns { top: max(8px, env(safe-area-inset-top)); }
}

/* touch action cluster: column on the right so GAS/REV/BRAKE/E never cover the stick */
body.touch #actions {
  display: flex; flex-direction: column-reverse; flex-wrap: nowrap;
  align-items: flex-end; gap: 8px;
  width: auto; max-width: 42vw;
  bottom: 150px; right: 8px; z-index: 14;
}
body.touch #actions button {
  min-width: 56px; width: 56px; height: 48px; font-size: 8px; padding: 0 4px;
}
body.touch #btnAct { width: 68px; height: 68px; min-width: 68px; font-size: 18px; }
body.touch #btnRev {
  background: linear-gradient(#5a6a90, #2a3550); border-color: #9ab0ff; color: #e8f0ff;
  font-size: 9px; min-width: 56px; width: 56px;
}
body.touch.driving #actions { bottom: max(118px, calc(env(safe-area-inset-bottom, 0px) + 110px)); }
body.touch.driving #prompt { bottom: max(280px, calc(env(safe-area-inset-bottom, 0px) + 270px)); left: 50%; right: auto; transform: translateX(-50%); max-width: 70vw; }
body.touch.driving #speedo { bottom: max(248px, calc(env(safe-area-inset-bottom, 0px) + 238px)); right: 8px; left: auto; }
body.touch.driving #chat.min { width: auto; opacity: 0.85; }
body.touch.driving #chat:not(.min) { max-height: 28vh; }

/* phone portrait narrow: keep chat thin so it clears the stick */
@media (max-width: 430px) {
  body.touch #chat { width: min(200px, 46vw); }
  body.touch #chatLog { height: 56px; font-size: 15px; line-height: 17px; }
  body.touch #chatForm input { font-size: 15px; padding: 3px 5px; }
  body.touch #joy { width: 112px; height: 112px; left: 8px; bottom: 12px; }
  body.touch #joy i { left: 32px; top: 32px; width: 44px; height: 44px; }
  body.touch #actions { bottom: 132px; }
  body.touch #btnAct { width: 64px; height: 64px; min-width: 64px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  #panel { width: min(720px, 98vw); max-height: 88vh; }
  #panelTitle { font-size: 11px; }
  #panelBody { padding: 8px; }
  .item .nm { font-size: 16px; }
  .toast { font-size: 16px; max-width: 92vw; padding: 8px 12px; }
  .toast button { min-height: 36px; min-width: 64px; font-size: 12px; padding: 6px 10px; }
}

/* landscape phones / short height: stick + chat + E must all fit */
@media (max-height: 430px) {
  body.touch #joy { width: 96px; height: 96px; bottom: 8px; left: 8px; }
  body.touch #joy i { left: 26px; top: 26px; width: 40px; height: 40px; }
  body.touch #chat { width: min(220px, 40vw); }
  body.touch #chatLog { height: 40px; }
  body.touch #actions { bottom: 104px; gap: 5px; }
  body.touch #actions button { height: 40px; min-width: 48px; width: 48px; font-size: 7px; }
  body.touch #btnAct { width: 54px; height: 54px; min-width: 54px; font-size: 14px; }
  body.touch.driving #actions { bottom: 96px; }
  body.touch.driving #prompt { bottom: 210px; }
  body.touch.driving #speedo { bottom: 186px; }
  #mmWrap { display: none; }
  #quest { display: none; }
  #phone { height: min(520px, 96vh); width: min(300px, 70vw); }
  #panel { max-height: 94vh; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
}

/* landscape wider but still short */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch #actions { right: 10px; }
  body.touch #chat { right: 8px; bottom: 6px; }
  #hudL, #hudR { transform: scale(0.75); }
}

/* menu emoji cards: keep tap target tall enough on phones */
body.touch .item { min-height: 112px; padding: 10px 6px; }
body.touch .item button.small { min-height: 36px; min-width: 72px; font-size: 10px; }
body.touch #toasts { top: max(96px, calc(env(safe-area-inset-top, 0px) + 88px)); z-index: 70; }