@font-face { font-family: 'Lilita One'; src: url('/assets/LilitaOne-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/assets/Nunito-VariableFont_wght.ttf'); font-weight: 200 1000; font-display: swap; }
:root { --g: #008751; --gd: #005d38; --y: #ffc20e; --ink: #14201a; --card: #fffdf6; --mut: #6b7568; --red: #d6402f; --pad: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b2a1b; font-family: Nunito, system-ui, sans-serif; color: var(--ink); touch-action: none; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 30%, #0b7a49, #04341f 70%); color: #fff; padding: 18px; overflow: auto; }
.logo { width: min(560px, 86vw); filter: drop-shadow(0 8px 14px #0006); } .logo.small { width: min(340px, 70vw); }
.tagline { font-family: 'Lilita One'; font-size: 22px; color: var(--y); letter-spacing: .5px; text-align: center; }
.bar { width: min(420px, 80vw); height: 12px; border-radius: 9px; background: #0005; overflow: hidden; } .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--y), #fff3b0); transition: width .25s; }
.tip { opacity: .85; font-size: 14px; } .testbadge { margin-top: 8px; font-size: 12px; background: #0006; padding: 6px 12px; border-radius: 99px; letter-spacing: .06em; }
.card { background: var(--card); color: var(--ink); border-radius: 22px; padding: 18px; box-shadow: 0 14px 40px #0008; }
.authcard { width: min(420px, 94vw); } .tabs { display: flex; gap: 6px; margin-bottom: 12px; } .tabs button { flex: 1; border: 0; padding: 10px; border-radius: 12px; background: #e9e5d4; font: 800 14px Nunito; cursor: pointer; } .tabs button.on { background: var(--g); color: #fff; }
.field { display: block; margin-bottom: 10px; } .field span { display: block; font-weight: 800; font-size: 13px; margin-bottom: 4px; } .field input { width: 100%; padding: 12px; border-radius: 12px; border: 2px solid #d9d3bd; font: 700 16px Nunito; background: #fff; user-select: text; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 8px 0 12px; } .check input { width: 22px; height: 22px; flex: none; } .check small { color: var(--mut); }
.err { color: var(--red); font-weight: 800; min-height: 20px; font-size: 14px; } .fine { font-size: 12px; color: var(--mut); margin-top: 12px; } .fine a { color: var(--gd); }
.btn { border: 0; border-radius: 14px; padding: 10px 16px; font: 800 15px Nunito; background: var(--g); color: #fff; cursor: pointer; box-shadow: 0 3px 0 var(--gd); } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gd); }
.btn.big { width: 100%; padding: 14px; font-size: 18px; } .btn.small { padding: 7px 12px; font-size: 13px; } .btn.alt { background: var(--y); color: #3b2a00; box-shadow: 0 3px 0 #b88700; } .btn.ghost { background: #ece7d3; color: var(--ink); box-shadow: 0 3px 0 #cfc8ac; } .btn.red { background: var(--red); box-shadow: 0 3px 0 #8d2418; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
#hud > * { position: fixed; z-index: 10; } .pill { background: #0b2a1bcc; color: #fff; padding: 6px 12px; border-radius: 99px; font: 800 14px Nunito; backdrop-filter: blur(4px); pointer-events: none; }
#stats { left: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .pill.cash { font-size: 20px; background: var(--g); border: 2px solid var(--y); } .pill.sav { font-size: 12px; }
.bars { display: flex; flex-direction: column; gap: 4px; } .bar2 { width: 130px; height: 14px; background: #0007; border-radius: 9px; position: relative; overflow: hidden; } .bar2 span { position: absolute; left: 4px; top: -2px; font-size: 12px; z-index: 1; } .bar2 i { display: block; height: 100%; width: 50%; background: #35c46b; transition: width .4s; } #hungerBar { background: #f29a2e; } #moodBar { background: #e58fb3; }
#clock { top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); }
#right { right: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } #minimap { width: 118px; height: 118px; border-radius: 16px; border: 3px solid #fffd; background: #0008; }
.round { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: var(--g); color: #fff; font-size: 24px; cursor: pointer; position: relative; box-shadow: 0 4px 10px #0006; } .round.small { width: 38px; height: 38px; font-size: 16px; } .round b { position: absolute; top: -6px; right: -6px; background: var(--red); border-radius: 99px; font: 800 12px Nunito; padding: 2px 6px; }
#festBadge { top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(50% + 120px); background: #b3202acc; color: #fff; } #loc { left: 10px; bottom: calc(10px + var(--pad)); } #waypoint { left: 10px; bottom: calc(46px + var(--pad)); background: #6a1b9acc; } #shiftbar { left: 50%; transform: translateX(-50%); top: calc(48px + env(safe-area-inset-top, 0px)); background: #1565c0cc; }
#chatlog { left: 10px; top: 150px; width: min(300px, 55vw); display: flex; flex-direction: column; gap: 3px; pointer-events: none; } #chatlog div { background: #0008; color: #fff; padding: 4px 9px; border-radius: 10px; font-size: 13px; font-weight: 700; animation: fade 14s forwards; } @keyframes fade { 0%,85% { opacity: 1 } 100% { opacity: 0 } }
#chatForm { left: 10px; bottom: calc(52px + var(--pad)); display: none; gap: 6px; } #chatForm.on { display: flex; } #chatForm input { padding: 8px 10px; border-radius: 12px; border: 0; width: 230px; font: 700 14px Nunito; user-select: text; }
#actionBtn { right: 14px; bottom: calc(86px + var(--pad)); width: auto; min-width: 150px; max-width: 60vw; } #carBtn { right: 14px; bottom: calc(18px + var(--pad)); } #jumpBtn { right: 76px; bottom: calc(18px + var(--pad)); } #throwBtn { right: 138px; bottom: calc(18px + var(--pad)); } .round.small2 { width: 44px; height: 44px; font-size: 20px; margin: 4px; } #throwbar { position: absolute; left: 50%; bottom: calc(90px + var(--pad)); transform: translateX(-50%); width: 140px; height: 12px; padding: 0; overflow: hidden; } #throwbar i { display: block; height: 100%; width: 0; background: #ffd23f; } #conn { top: 70px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; padding: 6px 14px; border-radius: 99px; font-weight: 800; }
#joy { left: 22px; bottom: calc(64px + var(--pad)); width: 130px; height: 130px; border-radius: 50%; background: #fff3; border: 3px solid #fff7; display: none; touch-action: none; } #joy i { position: absolute; left: 39px; top: 39px; width: 52px; height: 52px; border-radius: 50%; background: #fffc; box-shadow: 0 3px 8px #0005; }
@media (pointer: coarse) { #joy { display: block; } #loc { left: 160px; } #waypoint { left: 160px; } #chatlog { top: 140px; } }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); top: calc(84px + env(safe-area-inset-top, 0px)); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 460px); }
.toast { background: #fffdf6; color: var(--ink); padding: 10px 16px; border-radius: 16px; font-weight: 800; box-shadow: 0 6px 18px #0006; animation: pop .25s, out .4s 3.8s forwards; border-left: 6px solid var(--g); } .toast.bad { border-color: var(--red); } .toast.money { border-color: var(--y); } @keyframes pop { from { transform: translateY(-14px) scale(.9); opacity: 0 } } @keyframes out { to { opacity: 0; transform: translateY(-8px) } }
#sheetWrap { position: fixed; inset: 0; z-index: 60; background: #0005; display: flex; align-items: flex-end; justify-content: center; touch-action: auto; }
#sheet { background: var(--card); width: min(560px, 100vw); max-height: 86vh; overflow: auto; border-radius: 24px 24px 0 0; padding: 8px 18px calc(18px + var(--pad)); box-shadow: 0 -10px 40px #0007; touch-action: pan-y; user-select: text; animation: up .22s; } @keyframes up { from { transform: translateY(40px); opacity: 0 } }
@media (min-width: 760px) { #sheetWrap { align-items: center; } #sheet { border-radius: 24px; max-height: 80vh; } }
.grab { width: 44px; height: 5px; border-radius: 9px; background: #cfc8ac; margin: 4px auto 6px; } .sheethead { display: flex; justify-content: space-between; align-items: center; } .sheethead h2 { margin: 6px 0; font: 400 24px 'Lilita One'; color: var(--gd); } .x { border: 0; background: #ece7d3; border-radius: 50%; width: 34px; height: 34px; font-size: 16px; cursor: pointer; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; } .row.sp { justify-content: space-between; } .mut { color: var(--mut); font-size: 13px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .chip { border: 2px solid #d9d3bd; background: #fff; border-radius: 14px; padding: 8px 12px; font: 800 14px Nunito; cursor: pointer; text-align: center; } .chip.on { border-color: var(--g); background: #e6f6ee; } .chip small { display: block; font-weight: 700; color: var(--mut); }
.tag { display: inline-block; padding: 3px 9px; border-radius: 99px; font: 800 12px Nunito; background: #e9e5d4; } .tag.green { background: #cdeedb; } .tag.red { background: #ffd9d3; color: #8d2418; } .tag.amber { background: #ffe9b0; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #999; margin-right: 6px; } .dot.home { background: #35c46b; } .dot.online { background: #f2a93b; }
.list > div { display: flex; justify-content: space-between; align-items: center; padding: 9px 2px; border-bottom: 1px dashed #d9d3bd; gap: 8px; } .avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 400 22px 'Lilita One'; flex: none; }
.sheet-input { width: 100%; padding: 10px; border-radius: 12px; border: 2px solid #d9d3bd; font: 700 16px Nunito; background: #fff; user-select: text; } .tabrow { display: flex; gap: 4px; margin: 6px 0 10px; overflow-x: auto; } .tabrow button { border: 0; padding: 8px 10px; border-radius: 12px; background: #e9e5d4; font: 800 13px Nunito; cursor: pointer; white-space: nowrap; } .tabrow button.on { background: var(--g); color: #fff; }
.progress { height: 14px; background: #e9e5d4; border-radius: 9px; overflow: hidden; margin: 8px 0; } .progress i { display: block; height: 100%; background: var(--g); width: 0; }
#commute { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: #0006; color: #fff; text-align: center; } #commute .big { font: 400 30px 'Lilita One'; margin-bottom: 10px; color: var(--y); } #commuteSub { margin-top: 10px; font-weight: 800; }
#interior { position: fixed; inset: 0; z-index: 40; touch-action: none; } #interior canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } .ihead { position: absolute; left: 0; right: 0; top: 0; padding: 12px; display: flex; gap: 8px; align-items: center; justify-content: space-between; background: linear-gradient(#000a, #0000); color: #fff; z-index: 2; } .ihead h3 { margin: 0; font: 400 20px 'Lilita One'; } .itool { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: 20px 20px 0 0; padding: 10px 14px calc(12px + var(--pad)); z-index: 2; max-height: 44vh; overflow: auto; touch-action: pan-y; } .cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; } .cat button { border: 2px solid #d9d3bd; background: #fff; border-radius: 14px; padding: 8px; font: 800 13px Nunito; cursor: pointer; } .cat button.on { border-color: var(--g); background: #e6f6ee; } .cat button.own { border-color: var(--y); }
.minigame { text-align: center; } .mgbar { position: relative; height: 38px; background: #1b2a22; border-radius: 12px; overflow: hidden; margin: 14px 0; } .mgbar .zone { position: absolute; top: 0; bottom: 0; background: #35c46b99; border-left: 3px solid #35c46b; border-right: 3px solid #35c46b; } .mgbar .cur { position: absolute; top: 0; bottom: 0; width: 8px; background: var(--y); border-radius: 4px; }
@media (max-width: 520px) {
  #minimap { width: 84px; height: 84px; } #festBadge { left: 118px; top: calc(40px + env(safe-area-inset-top, 0px)); font-size: 12px; padding: 4px 8px; } #clock { left: 118px; transform: none; font-size: 12px; padding: 5px 9px; } #toasts { top: calc(104px + env(safe-area-inset-top, 0px)); width: 86vw; } .toast { font-size: 14px; padding: 8px 12px; }
  #chatlog { top: 170px; } .round { width: 46px; height: 46px; font-size: 21px; } #shiftbar { top: calc(44px + env(safe-area-inset-top, 0px)); left: 118px; transform: none; font-size: 12px; }
}

/* venues + games */
#venue { position: fixed; inset: 0; z-index: 40; touch-action: none; } #venue canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#venue .ihead { position: absolute; left: 0; right: 0; top: 0; padding: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; color: #fff; text-shadow: 0 1px 3px #000a; z-index: 2; }
.vstrip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; overflow-x: auto; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 2; }
.vstrip .vst { flex: 0 0 auto; background: #fff; border: 3px solid #1b3a2b; border-radius: 14px; padding: 8px 12px; font: 800 14px/1.1 inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.vstrip .vst small { font-weight: 600; color: #5b5b4a; font-size: 11px; } .vstrip .vst.mine { border-color: #35c46b; background: #eaffef; }
.vpanel { position: absolute; left: 8px; right: 8px; max-width: 480px; bottom: 84px; max-height: 58vh; overflow-y: auto; background: #fffaf0; border: 3px solid #1b3a2b; border-radius: 16px; padding: 12px; z-index: 3; box-shadow: 0 6px 20px #0006; display: flex; flex-direction: column; gap: 8px; }
.vpanel .banner { padding: 12px; border-radius: 12px; font-weight: 900; text-align: center; font-size: 18px; } .banner.win { background: #d9f9e1; } .banner.lose { background: #fbe0dc; } .banner.draw { background: #fff1c2; }
.hand { display: flex; gap: 6px; flex-wrap: wrap; } .wcard { width: 56px; height: 78px; border: 3px solid var(--c); border-radius: 10px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px; font-weight: 900; color: var(--c); cursor: pointer; }
.wcard .n { font-size: 18px; align-self: flex-start; } .wcard .g { font-size: 28px; line-height: 1; } .wcard:disabled { opacity: .45; cursor: default; } .wcard.mini { width: 40px; height: 56px; } .shape { font-size: 38px; line-height: 1; }
.ayo .pits { display: flex; gap: 6px; justify-content: center; margin: 4px 0; } .pit { width: 15vw; max-width: 64px; height: 15vw; max-height: 64px; border-radius: 50%; border: 3px solid #5a3a1a; background: #c99a5b; font-size: 20px; font-weight: 900; color: #2b1a0c; cursor: default; } .pit.mine { background: #e0b878; } .pit.legal { border-color: #35c46b; box-shadow: 0 0 0 3px #35c46b88; cursor: pointer; }
.pit:disabled { opacity: 1; }

.ibar { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.ifeed { display: flex; flex-direction: column; gap: 2px; max-height: 120px; overflow: hidden; } .ifeed .ev { background: #0b2a1bcc; color: #fff; padding: 3px 10px; border-radius: 10px; font-size: 13px; width: fit-content; max-width: 100%; } .ifeed .ev.love { background: #b03060cc; }
.iacts { display: flex; gap: 6px; flex-wrap: wrap; } .iacts .btn { background: #fffaf0; } .ipaint { position: absolute; right: 8px; top: 76px; z-index: 3; background: #fffaf0; border: 3px solid #1b3a2b; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; width: min(300px, 92vw); }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; } .sw { width: 34px; height: 34px; border-radius: 9px; border: 3px solid #1b3a2b55; cursor: pointer; } .sw.on { border-color: #1b3a2b; box-shadow: 0 0 0 2px #ffc20e; }
.gchip { background: #0b2a1bcc; color: #fff; border-radius: 99px; padding: 2px 8px; margin-left: 4px; font-size: 12px; } .gchip button { background: none; border: 0; color: #ffd; cursor: pointer; }

.ludo{position:relative;background:#fbf5e4;border-radius:50%;border:3px solid #6b4a2b;flex:none}
.lc{position:absolute;width:12px;height:12px;border-radius:3px;background:#e9dcc0;border:1px solid #bfae88;box-sizing:border-box}
.lc.safe{border:2px solid #b8860b}.lc.hc{width:10px;height:10px;border:none}
.ltok{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0006;color:#fff;font-size:9px;line-height:10px;text-align:center;box-sizing:border-box;transition:left .3s,top .3s}
.ltok.legal{animation:pulse 0.8s infinite;box-shadow:0 0 0 3px #ffd54a}
.die{font-size:54px;line-height:1;text-align:center}
.ludowrap .row{align-items:center;gap:12px}
@keyframes pulse{50%{transform:scale(1.35)}}

.cbar{display:inline-block;width:60px;height:8px;border-radius:4px;background:#0002;overflow:hidden;vertical-align:middle}.cbar i{display:block;height:100%;background:#2fbf6b}

/* dominoes + draughts */
.dtile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:44px;padding:2px 0;border:2px solid #1f4e3d;border-radius:8px;background:#fffdf3;color:#111;cursor:pointer}
.dtile .dh{font-size:26px;line-height:26px}.dtile i{width:70%;height:2px;background:#1f4e3d;margin:1px 0}.dtile:disabled{opacity:.55;cursor:default}.dtile.mini{width:30px;border-width:1px}.dtile.mini .dh{font-size:17px;line-height:17px}
.dchain{display:flex;flex-wrap:wrap;gap:3px;min-height:40px;padding:6px;border-radius:10px;background:#12392d;margin:6px 0}.domino .hand{margin:8px 0}
.dgrid{display:grid;grid-template-columns:repeat(8,1fr);width:min(88vw,330px,52vh);aspect-ratio:1;border:3px solid #3b2a1a;border-radius:6px;overflow:hidden;margin:6px auto}
.dcell{border:0;padding:0;display:flex;align-items:center;justify-content:center;background:#ecd9b0}.dcell.dk{background:#7a5232}.dcell.sel{outline:3px solid #f0c419;outline-offset:-3px}.dcell.dest{background:#4a8a5a}.dcell.can{box-shadow:inset 0 0 0 2px #f0c41988}
.dp{width:78%;height:78%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,4vw,20px);color:#f0c419;box-shadow:0 2px 3px #0008}.dp.p0{background:#f4f0e6;border:3px solid #bbb;color:#7a5232}.dp.p1{background:#262626;border:3px solid #555}

/* casual break games */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:min(86vw,320px,46vh);margin:8px auto;padding:6px;border-radius:12px;background:#4b2e1e;touch-action:none;user-select:none}
.mt{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(14px,5vw,24px);background:#6b4630;color:#fff;transition:background .12s}
.mt2{background:#f4e3c1;color:#5a3a1a}.mt4{background:#f0c987;color:#5a3a1a}.mt8{background:#e9904a}.mt16{background:#d9622b}.mt32{background:#c8402f}.mt64{background:#a8322a}.mt128{background:#2a9d8f}.mt256{background:#1f7a8c}.mt512{background:#7a4ea0}.mt1024{background:#4b2d7f}.mt2048{background:#f0c419;color:#3b2a00}
.mpad{display:flex;gap:8px;justify-content:center;margin:4px 0}
.mgrid.mem{background:#1f4e3d}.mc{aspect-ratio:1;border:0;border-radius:10px;background:repeating-linear-gradient(45deg,#e9c46a 0 6px,#2a9d8f 6px 12px);font-size:clamp(20px,7vw,34px);cursor:pointer}.mc.up{background:#fffdf3}.mc.ok{background:#cdeac0}
.wgrid{display:flex;flex-direction:column;gap:5px;align-items:center;margin:8px 0}.wrow{display:flex;gap:5px}.wl{width:44px;height:44px;border:2px solid #b8a78a;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;background:#fffdf3}
.wl.m2,.wk.m2{background:#2e9d5b;color:#fff;border-color:#2e9d5b}.wl.m1,.wk.m1{background:#e9b429;color:#3b2a00;border-color:#e9b429}.wl.m0,.wk.m0{background:#7d7468;color:#fff;border-color:#7d7468}
.wkeys{display:flex;flex-direction:column;gap:5px;align-items:center}.wkr{display:flex;gap:4px}.wk{min-width:28px;height:38px;border-radius:6px;border:1px solid #cdbf9f;background:#f4ead2;font-weight:700;cursor:pointer}
.casualres{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}

/* full city map */
#bigmap{position:fixed;inset:0;z-index:60;background:#2b6f8a;touch-action:none}.bm-canvas{position:absolute;inset:0;cursor:grab;touch-action:none}
.bm-top{position:absolute;left:0;right:0;top:0;display:flex;gap:6px;align-items:center;padding:8px;background:linear-gradient(#000a,#0000);pointer-events:none}.bm-top>*{pointer-events:auto}
.bm-title{color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap}.bm-search{flex:1;min-width:80px;padding:8px 12px;border-radius:20px;border:2px solid #fffdf3;background:#fffdf3f0;font:inherit}
.bm-btn{width:38px;height:38px;border-radius:50%;border:2px solid #fffdf3;background:#fffdf3f0;font-size:18px;font-weight:800;cursor:pointer}
.bm-zoom{position:absolute;right:10px;top:60px;display:flex;flex-direction:column;gap:6px}
.bm-list{position:absolute;left:8px;right:8px;top:54px;max-width:420px;max-height:50vh;overflow:auto;background:#fffdf3;border-radius:12px;box-shadow:0 6px 20px #0006}.bm-item{display:flex;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid #eee3c8;background:none;text-align:left;font:inherit;cursor:pointer}.bm-item:hover{background:#f6edd2}
.bm-legend{position:absolute;right:10px;top:106px;background:#fffdf3f2;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px;font-size:13px;box-shadow:0 6px 20px #0006;max-height:60vh;overflow:auto}
.bm-lg{display:flex;align-items:center;gap:6px}.bm-lg i,.bm-kinds i{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid #0004}.bm-kinds{display:flex;flex-wrap:wrap;gap:6px;max-width:210px}.bm-kinds span{display:flex;align-items:center;gap:3px;font-size:12px}
.bm-card{position:absolute;left:10px;bottom:46px;max-width:min(86vw,340px);background:#fffdf3;border-radius:12px;padding:10px 12px;box-shadow:0 6px 20px #0006;display:flex;flex-direction:column;gap:4px;font-size:14px}.bm-card.pinned{border:2px solid #ff3b30}.bm-x{border:0;background:none;font-size:16px;cursor:pointer}
@media (max-width:600px){.bm-title{display:none}.bm-card{bottom:50px}}

#garageView { position: fixed; inset: 0; z-index: 45; touch-action: none; background: #23303a; } #garageView canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } #garageView .ihead { position: absolute; left: 0; right: 0; top: 0; padding: 12px; display: flex; justify-content: space-between; gap: 8px; color: #fff; text-shadow: 0 1px 3px #000; z-index: 2; }
.gv-list { position: absolute; left: 12px; right: 12px; top: 74px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; } .gv-info { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(20,28,36,.92); color: #fff; padding: 12px; border-radius: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }

/* ---- phone v2 */
.phoneframe { background: #14181f; border-radius: 26px; padding: 8px; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.35); display: flex; flex-direction: column; min-height: 420px; max-height: 70vh; }
.pstatus { display: flex; justify-content: space-between; font: 700 12px Nunito; padding: 4px 14px; color: #cfd6e4; } .pscreen { flex: 1; overflow: auto; background: #f7f3e6; color: #222; border-radius: 16px; padding: 10px; }
.pnav { display: flex; justify-content: space-around; padding: 6px 0 2px; } .pnav button { background: none; border: 0; color: #cfd6e4; font-size: 22px; padding: 4px 18px; cursor: pointer; }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 4px; } .papp { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font: 700 11px Nunito; color: #222; }
.pico { position: relative; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(145deg,#fff,#e5dfc8); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 2px 4px rgba(0,0,0,.18); }
.pbadge { position: absolute; top: -4px; right: -4px; background: #d6402f; color: #fff; border-radius: 10px; font: 800 11px Nunito; padding: 1px 6px; } .pbadge.inl { position: static; margin-left: 6px; }
.ptitle { font: 800 18px Nunito; margin-bottom: 8px; } .prow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #e6e0c9; } .prow.tap { cursor: pointer; } .small { font-size: 12px; }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .chatlog { height: 240px; overflow: auto; background: #ece6d0; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.bub { max-width: 78%; padding: 6px 10px; border-radius: 14px; font: 600 14px Nunito; display: flex; flex-direction: column; gap: 2px; word-break: break-word; } .bub.me { align-self: flex-end; background: #c9f1d0; } .bub.me.read::after { content: '✓✓'; font-size: 10px; color: #2a7de1; align-self: flex-end; } .bub.them { align-self: flex-start; background: #fff; } .sysmsg { align-self: center; font: 700 12px Nunito; color: #777; background: #ddd5b8; padding: 2px 10px; border-radius: 10px; }
.vnote { display: flex; align-items: center; gap: 6px; } .vplay { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #2e9b5e; color: #fff; cursor: pointer; } .vwave { display: flex; align-items: center; gap: 2px; height: 30px; } .vwave i { display: block; width: 3px; background: #555; border-radius: 2px; } .vrep { background: none; border: 0; cursor: pointer; opacity: .5; }
.chcomp { margin-top: 4px; } #recBtn.rec { background: #d6402f; color: #fff; animation: recpulse 1s infinite; } @keyframes recpulse { 50% { opacity: .6; } }
#callUi { position: fixed; inset: 0; z-index: 90; background: rgba(10,14,22,.92); display: flex; align-items: center; justify-content: center; color: #fff; } #callUi.banner { inset: 8px 8px auto 8px; background: rgba(10,14,22,.95); border-radius: 16px; }
.cinner { text-align: center; padding: 24px; } .cavatar { font-size: 56px; animation: ring 1s infinite; } .cname { font: 800 24px Nunito; margin: 6px 0; } .cstate { font: 700 16px Nunito; color: #bcd; margin-bottom: 16px; } .crow { display: flex; gap: 14px; justify-content: center; }
.cbtn { border: 0; border-radius: 28px; padding: 14px 22px; font: 800 16px Nunito; cursor: pointer; background: #384154; color: #fff; } .cbtn.red { background: #d6402f; } .cbtn.green { background: #2e9b5e; } .cbtn.on { background: #e0a020; } #callUi.banner .cavatar { display: none; } #callUi.banner .cinner { padding: 8px; display: flex; gap: 10px; align-items: center; justify-content: space-between; } #callUi.banner .cname, #callUi.banner .cstate { margin: 0; }
@keyframes ring { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
#consentUi { position: fixed; inset: 0; z-index: 95; background: rgba(10,14,22,.7); display: flex; align-items: center; justify-content: center; padding: 16px; } #consentUi .cinner { background: #fff; color: #222; border-radius: 16px; max-width: 380px; }
#navChip { position: fixed; left: 50%; transform: translateX(-50%); top: calc(84px + env(safe-area-inset-top, 0px)); background: #5a189add; display: flex; gap: 8px; align-items: center; max-width: 92vw; z-index: 32; pointer-events: auto; }
#navChip.hidden { display: none; } #navChip .nav-stop { border: 0; border-radius: 10px; background: #fff; color: #5a189a; font-weight: 800; padding: 4px 8px; cursor: pointer; }
.bm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#hurtFlash { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: radial-gradient(ellipse at center, #d6402f00 40%, #d6402fcc 100%); opacity: 0; transition: opacity .35s; }
#hurtFlash.on { opacity: 1; transition: opacity .05s; }
#parkChip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); background: #1565c0ee; z-index: 31; pointer-events: auto; }
#parkChip.hidden { display: none; } #parkChip .park-btn, #busChip .park-btn, #rideChip .park-btn { border: 0; background: transparent; color: #fff; font-weight: 800; font-size: 15px; padding: 4px 10px; cursor: pointer; }
#busChip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(150px + env(safe-area-inset-bottom, 0px)); background: #b8860bee; z-index: 31; pointer-events: auto; display: flex; gap: 4px; align-items: center; }
#busChip.hidden { display: none; } .park-btn.dim { opacity: .7; padding: 4px 8px; }
#rideChip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(204px + env(safe-area-inset-bottom, 0px)); background: #2a2a2aee; z-index: 31; pointer-events: auto; display: flex; gap: 4px; align-items: center; }
#rideChip.hidden { display: none; }
.tour { position: fixed; inset: 0; z-index: 90; background: #000a; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tour-card { background: #fffaf0; color: #222; border-radius: 18px; max-width: 380px; width: 100%; padding: 22px 20px 16px; text-align: center; box-shadow: 0 10px 40px #0008; }
.tour-ico { font-size: 54px; line-height: 1; } .tour-card h3 { margin: 8px 0 6px; font-size: 22px; } .tour-card p { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
.tour-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; } .tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c9c3b3; } .tour-dots i.on { background: #00a859; }
.tour-btns { display: flex; gap: 8px; justify-content: center; }
#hintChip { position: fixed; left: 50%; transform: translateX(-50%); top: calc(46px + env(safe-area-inset-top, 0px)); max-width: 88vw; background: #134e4aee; font-size: 13px; z-index: 29; pointer-events: auto; cursor: pointer; text-align: center; }
#hintChip.hidden { display: none; }
#airChip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(150px + env(safe-area-inset-bottom, 0px)); background: #123a5aee; z-index: 31; pointer-events: auto; display: flex; gap: 4px; align-items: center; }
#linkChip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(190px + env(safe-area-inset-bottom, 0px)); background: #1d4d7aee; z-index: 31; pointer-events: auto; }
#linkChip.hidden { display: none; }
#linkChip .park-btn { color: #fff; }
#airChip.hidden, #airBanner.hidden { display: none; }
#airChip .park-btn { color: #fff; }
#airBanner { position: fixed; left: 50%; transform: translateX(-50%); top: calc(52px + env(safe-area-inset-top, 0px)); background: #123a5aee; z-index: 40; font-size: 15px; }
.air-dest .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.fx { display: grid !important; grid-template-columns: 1fr auto 1fr auto; text-align: center; } .fx b { padding: 0 8px; font-size: 1.1em; } .fx.live b { color: #d6402f; } .fx small { min-width: 64px; text-align: right; }
#boatChip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(190px + env(safe-area-inset-bottom, 0px)); background: #0f5f86ee; z-index: 31; pointer-events: auto; display: flex; gap: 6px; align-items: center; }
#boatChip.hidden, #boatCancel.hidden { display: none; } #boatChip .park-btn { color: #fff; }
#boatBanner { position: fixed; left: 50%; transform: translateX(-50%); top: calc(70px + env(safe-area-inset-top, 0px)); background: #0f5f86ee; color: #fff; z-index: 31; } #boatBanner.hidden { display: none; }
#boatChip .park-btn { background: transparent; border: 0; font-weight: 700; }
/* in-car radio chip (10 Oct 2026) */
#radioChip { position: fixed; left: 50%; transform: translateX(-50%); top: calc(108px + env(safe-area-inset-top, 0px)); display: flex; gap: 6px; align-items: center; background: #14181fee; border: 2px solid var(--rc, #e0a020); color: #fff; z-index: 30; pointer-events: auto; max-width: 96vw; }
#radioChip.hidden { display: none; } #radioChip .park-btn { background: transparent; border: 0; color: #fff; font-size: 1.05em; padding: 2px 6px; } #radioChip .park-btn.on { background: var(--rc, #e0a020); border-radius: 8px; color: #111; }
#radioChip .radio-label { min-width: 150px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85em; } #radioChip input[type=range] { width: 70px; }

/* Chop Am (match-3) */
.m3grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;width:min(92vw,360px,52vh);margin:8px auto;padding:5px;border-radius:12px;background:#3d2a1e;touch-action:none;user-select:none}
.m3t{aspect-ratio:1;border:0;border-radius:8px;font-size:clamp(14px,5.2vw,26px);line-height:1;padding:0;cursor:pointer;background:#5a3d2b;transition:transform .12s,background .12s}
.m3t.k1{background:#7a5a36}.m3t.k2{background:#6b4a3a}.m3t.k3{background:#7a3f35}.m3t.k4{background:#6b3a5a}.m3t.k5{background:#6b6a2e}
.m3t.sel{outline:3px solid #ffd54a;transform:scale(1.08)}.m3t.pop{animation:m3pop .22s ease-out forwards}@keyframes m3pop{to{transform:scale(0);opacity:0}}
/* Clear the Go-Slow */
.dfboard{position:relative;width:min(88vw,330px,52vh);aspect-ratio:1;margin:8px auto;background:#6a6f77;border:4px solid #3b3f46;border-radius:10px;touch-action:none;user-select:none;overflow:visible}
.dfboard .dfc{position:absolute;display:block;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);width:16.666%;height:16.666%}
.dfboard .dfc.exit{background:repeating-linear-gradient(90deg,#f2c200 0 6px,#222 6px 12px);opacity:.55}
.dfv{position:absolute;box-sizing:border-box;padding:3px;transition:left .12s,top .12s,transform .1s;cursor:grab;z-index:2}.dfv>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:9px;background:var(--vc);font-size:clamp(14px,5vw,24px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.dfv.sel>span{outline:3px solid #fff}.dfv.danfo>span{box-shadow:inset 0 -3px 0 rgba(0,0,0,.3),0 0 0 2px #222}.dfv.out{transition:left .45s ease-in;left:110%!important}
/* Table football */
.fball{width:min(52vw,170px,27vh);display:block;margin:4px auto;background:#2f7d3a;border:3px solid #123;border-radius:8px}
.fpick{display:flex;gap:5px;align-items:center;margin:4px 0}.fpick b{min-width:68px;font-size:13px}.fpick .chip{padding:4px 9px;min-width:34px}

/* Track C: chess, word duel, Omo Onile, Suwe, word search, crossword */
.cgrid{display:grid;grid-template-columns:repeat(8,1fr);width:min(90vw,344px,52vh);aspect-ratio:1;border:3px solid #3b2a1a;border-radius:6px;overflow:hidden;margin:6px auto}
.ccell{border:0;padding:0;display:flex;align-items:center;justify-content:center;position:relative;font-size:clamp(18px,6.4vw,30px);line-height:1}.ccell.lt{background:#ecd9b0}.ccell.dk{background:#a77a52}
.ccell.sel{outline:3px solid #f0c419;outline-offset:-3px}.ccell.dest::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:#2e9b5e;opacity:.75}.ccell.lastmv{box-shadow:inset 0 0 0 100px #f0c41955}.ccell.incheck{box-shadow:inset 0 0 0 100px #e6394688}.ccell.can{cursor:pointer}
.cp.cw{color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 1px 3px #000}.cp.cb{color:#1c1c1c;text-shadow:0 0 1px #fff8}.ctray{min-height:20px;font-size:14px;text-align:center}
.wdtiles{display:flex;gap:5px;justify-content:center;margin:8px 0;flex-wrap:wrap}.wdt{width:40px;height:46px;border-radius:8px;border:2px solid #b8a78a;background:#f4ead2;color:#3b2a1a;font-weight:800;font-size:22px;position:relative;cursor:pointer}.wdt small{position:absolute;right:3px;bottom:1px;font-size:10px;font-weight:600}.wdt.used{opacity:.3}
.wdword{min-height:42px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;letter-spacing:4px;margin:4px 0}.wdres{margin:3px 0;font-size:13px}
.wsgrid{display:grid;grid-template-columns:repeat(var(--n,10),1fr);gap:2px;width:min(92vw,340px,52vh);margin:8px auto;touch-action:manipulation}.wsc{aspect-ratio:1;border:0;border-radius:6px;background:#f4ead2;color:#3b2a1a;font-weight:800;font-size:clamp(12px,4.4vw,18px);padding:0;cursor:pointer}.wsc.hit{background:#2e9b5e;color:#fff}.wsc.start{outline:3px solid #f0c419}
.wslist{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:6px 0}.wsw{padding:2px 8px;border-radius:10px;background:#0001;font-size:12px;font-weight:700}.wsw.got{text-decoration:line-through;background:#2e9b5e33;color:#2e9b5e}
.lboard{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:1px;width:min(94vw,380px,56vh);aspect-ratio:1;margin:6px auto;background:#3b2a1a;border:2px solid #3b2a1a;border-radius:6px}
.lsq{position:relative;border:0;padding:0;background:#f4ead2;color:#3b2a1a;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;font-size:clamp(5px,1.55vw,8px);line-height:1.05;cursor:pointer}.lsq .lname{font-weight:700;text-align:center;padding:0 1px}.lsq small{font-size:inherit;opacity:.7}
.lsq.start,.lsq.goslow,.lsq.rest,.lsq.checkpoint{background:#e6d3a8}.lsq.luck{background:#fde68a}.lsq.levy{background:#e9b5b5}.lsq.station,.lsq.utility{background:#dfe8ee}.lsq.sel{outline:2px solid #f0c419;outline-offset:-2px;z-index:2}.lsq.canb{box-shadow:inset 0 0 0 2px #2e9b5e}
.lband{position:absolute;left:0;top:0;right:0;height:22%}.lown{position:absolute;right:1px;bottom:1px;min-width:9px;height:9px;border-radius:5px;color:#fff;font-size:7px;display:flex;align-items:center;justify-content:center}.ltoks{position:absolute;left:1px;bottom:1px;display:flex;gap:1px}
.ltok2{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;color:#fff;font-size:8px;font-style:normal;font-weight:800;box-shadow:0 0 0 1px #fff}
.lcenter{grid-row:2/10;grid-column:2/10;background:#1f4e3d;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}.ldice{font-size:clamp(22px,8vw,36px);min-height:40px}
.lbar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:6px 0}.lroster .lpl{display:flex;gap:6px;align-items:center;font-size:13px;margin:2px 0}.lroster .lpl.now{font-weight:700;background:#f0c41933;border-radius:6px}.lroster .lpl.out{opacity:.45}
.llog{font-size:12px;max-height:110px;overflow:auto;background:#0001;border-radius:8px;padding:6px;margin:6px 0}.ldet,.ltrade,.ltradeform{margin:6px 0;font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.ltradeform{flex-direction:column;align-items:flex-start;background:#0001;border-radius:8px;padding:8px}
/* Suwe */
.suwe{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0}.smsg{min-height:34px;text-align:center;font-size:14px}.sarena{display:flex;justify-content:center}
.sgrid{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,1fr);gap:0;width:min(60vw,200px,28vh);aspect-ratio:2/6;border:3px solid #fff8e1;border-radius:4px;background:#c9a46b;touch-action:manipulation}
.sbox{border:2px solid #fff8e1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff8e1;position:relative;font-size:18px}.sbox b{font-size:20px}.sbox small{font-size:9px}.sbox.house{background:color-mix(in srgb,var(--hc,#888) 55%,transparent)}.sbox.stone{background:#0002}
.sstone{position:absolute;width:14px;height:12px;border-radius:50% 50% 45% 45%;background:#8d8d8d;bottom:6px;right:6px;box-shadow:inset -2px -2px 0 #6b6b6b}
.sbox.gperfect{background:#2e9b5e88}.sbox.ggood{background:#e9b42988}.sbox.gmiss{background:#d6402f88}
.sfig{position:absolute;width:20%;height:13%;transform:translate(-50%,-60%);transition:left .18s,top .18s;pointer-events:none;z-index:3}.sfig.hop{animation:suwehop .3s}@keyframes suwehop{0%{margin-top:0}50%{margin-top:-14px}100%{margin-top:0}}
.scue{position:absolute;width:44%;aspect-ratio:1;border:4px solid #2e9b5e;border-radius:50%;pointer-events:none;opacity:0;z-index:2;transform:translate(-50%,-50%)}.scue.rest{border-color:#2e7dd1}.scue.pickup{border-color:#e9b429;border-style:dashed}
.sbar{position:relative;width:min(80vw,300px);height:22px;border-radius:11px;background:#0003;overflow:hidden}.szone{position:absolute;top:0;bottom:0;background:#2e9b5e88}.smark{position:absolute;top:0;bottom:0;width:6px;margin-left:-3px;background:#fff;box-shadow:0 0 4px #000}.smark.okz{background:#2e9b5e}.smark.badz{background:#d6402f}
.sbtn{min-width:200px;min-height:54px;touch-action:manipulation;user-select:none}.suwe.static .sarena{opacity:.9}
/* sign-up choices: three full screens (city, city of interest, interests) */
.setup { z-index: 70; padding: 12px; overflow: auto; } .setupcard { width: min(520px, 94vw); max-height: 92vh; overflow: auto; } .setupcard h2 { margin: 4px 0; font-family: 'Lilita One'; font-size: 24px; }
.stepdots { display: flex; gap: 6px; } .stepdots i { width: 28px; height: 6px; border-radius: 4px; background: #d9d3bd; } .stepdots i.on { background: var(--g); } .stepdots i.past { background: #8fcfa8; }
.citygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .citycard { text-align: left; border: 3px solid #d9d3bd; border-radius: 14px; background: #fff; padding: 10px; font: 700 14px Nunito; cursor: pointer; color: var(--ink); display: flex; flex-direction: column; gap: 2px; } .citycard.on { border-color: var(--g); background: #e6f6ec; } .citycard small { font-weight: 600; opacity: .7; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .chip { border: 3px solid #d9d3bd; border-radius: 99px; background: #fff; padding: 8px 12px; font: 800 14px Nunito; cursor: pointer; color: var(--ink); } .chip.on { border-color: var(--g); background: #e6f6ec; }
.card.inset { background: #f4f1e4; box-shadow: none; padding: 10px; margin: 6px 0; } textarea.sheet-input { resize: vertical; font-family: inherit; }
.citycard.closed { opacity: .72; border-style: dashed; } .citycard .tag { display: inline-block; margin-left: 6px; font-size: 11px; } .openline { font-weight: 800; color: #0b6b3a; margin: 6px 0 0; }
#radioSpot { position: fixed; left: 50%; transform: translateX(-50%); top: calc(150px + env(safe-area-inset-top, 0px)); display: flex; gap: 8px; align-items: center; background: #14181fee; border: 2px solid #e0a020; color: #fff; z-index: 30; max-width: 92vw; pointer-events: none; font-size: 0.85em; }
#radioSpot.hidden { display: none; } #radioSpot img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: #222; }
#tutCard { position: fixed; left: 50%; transform: translateX(-50%); top: calc(80px + env(safe-area-inset-top, 0px)); width: min(92vw, 380px); background: #0b3d2eee; z-index: 28; pointer-events: auto; font-size: 13px; text-align: left; border-radius: 14px; padding: 8px 12px; }
#tutCard.hidden { display: none; } #tutCard .tut-head { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; } #tutCard .tut-text { margin-top: 3px; opacity: .92; } #tutCard .tut-list { list-style: none; margin: 8px 0 6px; padding: 0; } #tutCard .tut-list li { padding: 2px 0; } #tutCard .tut-list li.done { opacity: .6; text-decoration: line-through; } #tutCard .tut-list li.now { font-weight: 800; } #tutCard .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* touch pass (queue batch 1 item 2): handbrake button while driving, bigger tap targets, pinch zoom */
#handBtn { display: none; right: 84px; bottom: calc(18px + var(--pad)); width: 60px; height: 60px; background: #b3261e; font-size: 20px; line-height: 1; padding: 0; touch-action: none; } #handBtn small { display: block; font-size: 9px; font-weight: 900; letter-spacing: .5px; } #handBtn.on { background: #ff5247; transform: scale(.94); }
@media (pointer: coarse) { body.driving #handBtn { display: block; } .round.small { width: 44px; height: 44px; font-size: 18px; } .btn.small { min-height: 40px; } }
.quality-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .quality-row .btn.on { background: var(--g); color: #fff; }
@media (pointer: coarse) { #radioChip { top: auto; bottom: calc(206px + var(--pad)); left: 10px; transform: none; max-width: calc(100vw - 20px); font-size: 12px; padding: 4px 8px; } #radioChip input[type=range] { width: 56px; } #radioChip .radio-label { min-width: 110px; } }
/* missions sheet (queue batch 1 item 4) */
.mission { background: #fff; border: 2px solid #e4dcc0; border-radius: 12px; padding: 8px 10px; margin: 6px 0; } .mission.ready { border-color: #00a859; background: #f1fff6; } .mission.claimed { opacity: .6; } .mission .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bar2m { height: 8px; background: #e7e1c8; border-radius: 99px; overflow: hidden; margin: 5px 0; } .bar2m i { display: block; height: 100%; background: #00a859; border-radius: 99px; }
.streak-ladder { display: flex; gap: 4px; margin: 6px 0; overflow-x: auto; } .sday { flex: 1; min-width: 46px; text-align: center; background: #fff; border: 2px solid #e4dcc0; border-radius: 10px; padding: 4px 2px; font-size: 11px; font-weight: 800; } .sday small { display: block; opacity: .6; } .sday.now { border-color: #ff9800; background: #fff5e0; } .sday.past { background: #e5f7ec; border-color: #7ecb9b; }
/* achievements (queue batch 1 item 5) */
.ach { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 2px solid #e4dcc0; border-radius: 12px; padding: 8px 10px; margin: 6px 0; opacity: .8; } .ach.earned { opacity: 1; border-color: #f0b429; background: #fffaf0; } .ach .aicon { font-size: 26px; } .ach .abody { flex: 1; } .ach small { display: block; } .ach .okline { color: #1b7a45; font-weight: 800; }

/* emotes (queue batch 1 item 8) and photo mode */
.emote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; } .emote { background: #fff; border: 2px solid #e4dcc0; border-radius: 14px; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 12px Nunito, system-ui; cursor: pointer; } .emote .eico { font-size: 28px; line-height: 1.1; } .emote:active { transform: scale(.95); }
body.photo #hud, body.photo #toasts, body.photo #commute { display: none !important; }
#photoBar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: min(96vw, 560px); background: #101c14ee; color: #fff; border-radius: 18px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 24px #0008; } #photoBar .prow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; } #photoBar .prow.scroll { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; } #photoBar .mut { color: #cfe3d4; font-size: 12px; } #photoBar input[type=range] { width: 110px; vertical-align: middle; }
#photoPreview { position: fixed; inset: 0; z-index: 70; background: #060b08f2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px; } #photoPreview img { max-width: 94vw; max-height: 72vh; border-radius: 10px; box-shadow: 0 8px 30px #000a; } #photoPreview .prow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#photoCount { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; font: 900 120px Nunito, system-ui; color: #fff; text-shadow: 0 4px 24px #000a; pointer-events: none; }
/* seasons (batch 1 item 9): the card on Phone > Me */
.season { background: #fff8e1; border: 2px solid #e8c766; border-radius: 12px; padding: 8px 10px; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 3px; }
.season .sboard { background: #fff; border: 1px solid #ecdca4; border-radius: 10px; padding: 6px 8px; margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.season .srow { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .season .srow.me { font-weight: 800; background: #fff1b8; border-radius: 6px; padding: 0 4px; }