:root {
  --cream: #f6f0e3; --cream2: #efe6d2; --ink: #2b2620; --muted: #7b7163; --gold: #ffcc33; --gold2: #f59e0b;
  --lcd: #0f1c16; --lcdOn: #b6f7c9; --lcdDim: #2a4637; --red: #ff4d6d; --green: #3fd28a;
  --display: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #7fc4e8; font-family: var(--ui); color: var(--ink); -webkit-user-select: none; user-select: none; touch-action: none; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
canvas#gl.dragging { cursor: grabbing; }
button { font: inherit; cursor: pointer; border: 0; }
.hidden { display: none !important; }
.card { background: var(--cream); border-radius: 14px; box-shadow: 0 4px 18px rgba(40, 25, 10, .18), inset 0 -2px 0 rgba(0,0,0,.06); }
#loading { position: fixed; inset: 0; display: grid; place-items: center; font: 600 20px var(--display); color: #fff; background: linear-gradient(#5fb7e6, #bfe6f4); z-index: 50; }

/* ── HUD ─────────────────────────────────────── */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#clock { position: absolute; top: 14px; left: 14px; display: flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; pointer-events: none; }
#clock b { display: block; font: 700 12px var(--ui); letter-spacing: .06em; }
#clock small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
#tideGauge { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #d9a93b; background: #fff; overflow: hidden; position: relative; }
#tideFill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#7fd3e8, #3aa8c9); transition: height 1s; }

#pot { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); text-align: center; padding: 8px 22px 9px; border-radius: 16px;
  background: linear-gradient(180deg, #2b1d0e, #4a2f12); color: #ffe7a3; box-shadow: 0 6px 22px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255, 204, 51, .55); }
#pot .lbl { font: 700 11px var(--ui); letter-spacing: .14em; color: #ffcf5c; }
#potVal { font: 700 28px var(--display); color: #fff3c4; text-shadow: 0 0 18px rgba(255, 204, 51, .55); line-height: 1.1; }
#potHint { font-size: 11px; color: #e9cf8e; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pot.bump #potVal { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.12); color: #fff; } }

#topright { position: absolute; top: 14px; right: 14px; display: flex; gap: 10px; align-items: flex-start; }
.round { width: 40px; height: 40px; border-radius: 50%; background: var(--cream); box-shadow: 0 4px 14px rgba(40,25,10,.18); font-size: 17px; }
#walletCard { padding: 9px 12px; min-width: 190px; text-align: left; color: var(--ink); }
#walletCard .row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
#walletCard .row.small { font: 600 12px var(--mono); color: #5d5346; margin-top: 3px; }
#walletCard .usdc { font: 700 22px var(--display); color: #1f7a4c; }
.chip { font: 700 10px var(--ui); background: #2775ca; color: #fff; padding: 2px 6px; border-radius: 6px; letter-spacing: .05em; }
#batt { position: relative; margin-top: 6px; height: 14px; border-radius: 7px; background: #ddd2bb; overflow: hidden; }
#battFill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3fd28a, #9be15d); transition: width .3s; }
#battFill.low { background: linear-gradient(90deg, #ff6b6b, #ffb36b); }
#battTxt { position: relative; font: 700 10px var(--mono); padding-left: 6px; line-height: 14px; }

#feed { position: absolute; left: 14px; top: 84px; width: 330px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.fe { background: rgba(28, 22, 14, .62); color: #fff; font-size: 12.5px; padding: 6px 10px; border-radius: 10px; backdrop-filter: blur(4px); animation: slidein .35s ease-out; line-height: 1.35; }
.fe.rare { box-shadow: inset 3px 0 0 #3fd28a; } .fe.epic { box-shadow: inset 3px 0 0 #c86bff; } .fe.legendary, .fe.rumor { box-shadow: inset 3px 0 0 #ffcc33; }
.fe.hint { box-shadow: inset 3px 0 0 #ff9f43; } .fe.onepiece { background: linear-gradient(90deg, #7a1230, #b8860b); font-weight: 700; } .fe.buy { box-shadow: inset 3px 0 0 #2775ca; }
.fe.chat { background: rgba(255,255,255,.82); color: var(--ink); } .fe.chat b { color: #2775ca; }
.fe.fade { opacity: 0; transition: opacity 1s; }
@keyframes slidein { from { transform: translateX(-20px); opacity: 0; } }

#lbMini { position: absolute; right: 14px; top: 132px; width: 190px; padding: 8px 10px; font-size: 12px; }
#lbMini h4 { margin: 0 0 5px; font: 700 11px var(--ui); letter-spacing: .1em; color: var(--muted); }
#lbMini .r { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; }
#lbMini .r span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lbMini .r b { font-family: var(--mono); font-size: 11px; }

/* detector LCD */
#detector { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 7px; border-radius: 18px; background: linear-gradient(#3a3f47, #1f2227); box-shadow: 0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); pointer-events: none; }
.lcd { width: 380px; background: var(--lcd); border-radius: 12px; padding: 8px 12px 9px; color: var(--lcdOn); font-family: var(--mono); box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.lcdTop { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
#lcdCat { color: #ffe08a; }
#lcdNotch { color: #ff9f9f; }
.vdiWrap { margin: 6px 0 5px; }
#vdiScale { display: grid; grid-template-columns: 30fr 15fr 25fr 30fr; font-size: 9px; color: var(--lcdDim); letter-spacing: .08em; }
#vdiScale span { border-left: 1px solid var(--lcdDim); padding-left: 3px; }
#vdiScale span.on { color: var(--lcdOn); }
#vdiBar { position: relative; height: 8px; border-radius: 4px; margin-top: 3px; background: linear-gradient(90deg, #6b2b2b 0 30%, #6b5a2b 30% 45%, #2b6b3c 45% 70%, #2b4f6b 70%); opacity: .75; }
#vdiMark { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff; left: 0; opacity: 0; transition: left .08s, opacity .15s; }
.lcdBottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
#sigBars { display: flex; gap: 3px; align-items: flex-end; height: 26px; flex: 1; }
#sigBars i { flex: 1; background: var(--lcdDim); border-radius: 2px; }
#sigBars i.on { background: var(--lcdOn); box-shadow: 0 0 6px rgba(182,247,201,.7); }
#sigBars i.hot { background: #ffe08a; box-shadow: 0 0 8px rgba(255,224,138,.9); }
.lcdNums { display: flex; gap: 12px; }
.lcdNums div { text-align: right; }
.lcdNums small { display: block; font-size: 8px; color: var(--lcdDim); letter-spacing: .12em; }
.lcdNums b { font-size: 20px; line-height: 1; }

#minimapWrap { position: absolute; left: 14px; bottom: 16px; width: 170px; height: 170px; border-radius: 50%; overflow: hidden; border: 4px solid var(--cream); box-shadow: 0 6px 20px rgba(0,0,0,.25); background: #2b8fb8; }
#compassN { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); font: 700 10px var(--ui); color: #fff; text-shadow: 0 1px 2px #000; }

#actions { position: absolute; right: 14px; bottom: 16px; display: grid; grid-template-columns: repeat(4, 62px); gap: 7px; }
#actions button { height: 56px; border-radius: 14px; background: var(--cream); box-shadow: 0 4px 14px rgba(40,25,10,.2); font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: transform .1s; }
#actions button span { font: 600 10px var(--ui); color: var(--muted); }
#actions button:hover { transform: translateY(-2px); }
#digBtnWrap { position: absolute; bottom: 132px; left: 50%; transform: translateX(-50%); }
#digBtn { padding: 9px 18px; border-radius: 999px; background: #ffcc33; color: #3b2a07; font: 700 15px var(--display); box-shadow: 0 5px 16px rgba(0,0,0,.25); letter-spacing: .04em; }
#digBtn small { font: 600 10px var(--ui); opacity: .7; margin-left: 4px; }
#digBtn.busy { background: #d6c8a8; }
#toasts { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: rgba(28,22,14,.82); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; animation: slidein .25s; }
.toast.ok { background: rgba(21, 110, 64, .9); } .toast.err { background: rgba(150, 30, 45, .9); }
#chatBox { position: absolute; left: 14px; bottom: 200px; width: 330px; display: none; }
#chatBox.open { display: block; }
#chatIn { width: 100%; padding: 9px 12px; border-radius: 12px; border: 2px solid #2775ca; font: 14px var(--ui); outline: none; background: rgba(255,255,255,.95); }
#help { transition: opacity 2s; position: absolute; bottom: 196px; left: 50%; transform: translateX(-50%); font-size: 11.5px; color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.6); white-space: nowrap; pointer-events: none; }
#modeBadge { position: absolute; top: 118px; right: 14px; font: 700 10px var(--ui); letter-spacing: .08em; background: rgba(0,0,0,.45); color: #fff; padding: 3px 8px; border-radius: 6px; pointer-events: none; }
#modeBadge:empty { display: none; }

/* name tags */
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font: 600 12px var(--ui); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75); text-align: center; will-change: transform; }
.tag .bubble { display: block; background: #fff; color: var(--ink); text-shadow: none; padding: 5px 10px; border-radius: 12px; margin-bottom: 4px; max-width: 240px; white-space: normal; font-weight: 500; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.tag.me { color: #ffe9a8; }

/* reveal card */
#reveal { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 320px; padding: 22px 20px 16px; text-align: center; border-radius: 22px; background: var(--cream); box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: pop .35s cubic-bezier(.2,1.6,.4,1); z-index: 20; border: 3px solid var(--tc, #ccc); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.rv-icon { font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.rv-tier { display: inline-block; margin-top: 8px; font: 700 11px var(--ui); letter-spacing: .16em; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--tc, #999); }
.rv-name { font: 700 22px var(--display); margin-top: 8px; }
.rv-val { font: 700 18px var(--mono); margin-top: 6px; color: #1f7a4c; }
.rv-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.rv-btns { display: flex; gap: 8px; margin-top: 14px; }
.rv-btns button, .rv-btns a { flex: 1; padding: 10px; border-radius: 12px; font-weight: 700; text-decoration: none; display: grid; place-items: center; font-size: 14px; }
#rvShare { background: #111; color: #fff; }
#rvClose { background: var(--cream2); }
#reveal.small { top: auto; bottom: 150px; transform: translateX(-50%); width: auto; padding: 8px 16px; border-width: 2px; display: flex; gap: 10px; align-items: center; animation: slidein .2s; border-radius: 999px; }
#reveal.small .rv-icon { font-size: 22px; } #reveal.small .rv-tier, #reveal.small .rv-btns, #reveal.small .rv-meta { display: none; }
#reveal.small .rv-name { font-size: 15px; margin: 0; } #reveal.small .rv-val { font-size: 13px; margin: 0; color: var(--muted); }

/* modal panels */
#modal { position: fixed; inset: 0; background: rgba(15, 22, 30, .45); display: grid; place-items: center; z-index: 30; backdrop-filter: blur(3px); }
#modal .panel { position: relative; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto; background: var(--cream); border-radius: 22px; padding: 22px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
#modal .close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--cream2); font-size: 20px; }
#modal h2 { margin: 0 0 4px; font: 700 26px var(--display); }
#modal .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; line-height: 1.45; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tile { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 2px 8px rgba(40,25,10,.08); }
.tile h3 { margin: 0; font: 700 15px var(--display); display: flex; justify-content: space-between; align-items: center; }
.tile p { margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
.dots { display: flex; gap: 4px; margin: 6px 0; } .dots i { width: 18px; height: 6px; border-radius: 3px; background: #e2d8c4; } .dots i.on { background: #f59e0b; }
.btn { display: inline-block; padding: 8px 12px; border-radius: 10px; background: #2b2620; color: #fff; font-weight: 700; font-size: 13px; }
.btn.gold { background: linear-gradient(#ffd45c, #f5a623); color: #3b2a07; } .btn.blue { background: #2775ca; } .btn.ghost { background: var(--cream2); color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.cost { font: 600 12px var(--mono); color: #5d5346; }
.stat { font: 700 22px var(--display); } .stat small { font: 500 11px var(--ui); color: var(--muted); display: block; }
.split { display: flex; height: 26px; border-radius: 10px; overflow: hidden; margin: 10px 0 4px; font: 700 11px var(--ui); color: #fff; }
.split div { display: grid; place-items: center; }
table.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lb td, table.lb th { padding: 7px 6px; border-bottom: 1px solid #e6dcc8; text-align: left; } table.lb th { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
pre.voucher { background: #1d1b18; color: #b6f7c9; padding: 12px; border-radius: 12px; font: 11px/1.45 var(--mono); white-space: pre-wrap; word-break: break-all; user-select: text; }
.note { font-size: 12px; color: var(--muted); line-height: 1.5; background: var(--cream2); border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.bar { height: 10px; border-radius: 5px; background: #e2d8c4; overflow: hidden; } .bar > div { height: 100%; background: linear-gradient(90deg, #3fd28a, #f5a623); }
#mapCanvas { width: 100%; max-width: 640px; aspect-ratio: 1; border-radius: 16px; display: block; margin: 0 auto; background: #2b8fb8; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 8px; justify-content: center; }

/* splash */
#splash { position: fixed; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(30, 90, 140, .25), rgba(10, 30, 50, .55)); z-index: 40; overflow: auto; padding: 16px; }
.splashCard { width: min(430px, 100%); background: var(--cream); border-radius: 26px; padding: 26px 26px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.logo { font: 700 52px/0.95 var(--display); color: #2b1d0e; letter-spacing: .01em; text-shadow: 3px 3px 0 #ffcc33; }
.tag0, .splashCard .tag { position: static; transform: none; color: var(--muted); text-shadow: none; font: 500 15px var(--ui); margin: 8px 0 10px; }
.potLine { background: #2b1d0e; color: #ffe7a3; border-radius: 12px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; }
.splashCard label { display: block; font: 700 11px var(--ui); letter-spacing: .1em; color: var(--muted); margin: 10px 0 5px; text-transform: uppercase; }
#nameIn { width: 100%; padding: 11px 13px; border-radius: 12px; border: 2px solid #e2d8c4; font: 600 16px var(--ui); outline: none; background: #fff; }
#nameIn:focus { border-color: #f5a623; }
#colorPick { display: flex; gap: 8px; flex-wrap: wrap; }
#colorPick button { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
#colorPick button.sel { border-color: #2b2620; transform: scale(1.1); }
#playBtn { width: 100%; margin-top: 16px; padding: 14px; border-radius: 14px; background: linear-gradient(#ffd45c, #f5a623); color: #3b2a07; font: 700 20px var(--display); letter-spacing: .05em; box-shadow: 0 6px 0 #c47f10; }
#playBtn:active { transform: translateY(3px); box-shadow: 0 3px 0 #c47f10; }
#splashMode { text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px; }
.how { margin: 14px 0 0; padding-left: 18px; font-size: 12.5px; color: #5d5346; line-height: 1.55; }

/* touch */
#touch { display: none; }
body.touch #touch { display: block; }
body.touch #help, body.touch #digBtnWrap { display: none; }
#stick { position: absolute; left: 24px; bottom: 200px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4); }
#knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.75); }
#tDig, #tPin { position: absolute; right: 24px; width: 78px; height: 78px; border-radius: 50%; font: 700 16px var(--display); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
#tDig { bottom: 200px; background: #ffcc33; color: #3b2a07; }
#tPin { bottom: 290px; right: 40px; width: 60px; height: 60px; background: var(--cream); font-size: 13px; }
#tPin.on { background: #b6f7c9; }

/* v2: missions tracker, objective marker, level, real wallet */
#missions { position: absolute; right: 14px; top: 258px; width: 230px; padding: 8px 10px; font-size: 12px; text-align: left; cursor: pointer; pointer-events: auto; color: var(--ink); }
#missions:empty { display: none; }
#missions h4 { margin: 0 0 5px; font: 700 11px var(--ui); letter-spacing: .1em; color: var(--muted); display: flex; justify-content: space-between; }
#missions h4 small { font-family: var(--mono); opacity: .7; }
#missions .mt { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; line-height: 1.3; }
#missions .mt b { font: 700 11px var(--mono); white-space: nowrap; }
#missions .mt.done { opacity: .5; text-decoration: line-through; }
#missions .mt.tale { color: #8a5a00; font-weight: 600; }
#objMark { position: absolute; left: 0; top: 0; display: none; pointer-events: none; text-align: center; margin: -22px 0 0 -60px; width: 120px; will-change: transform; }
#objMark i { display: none; width: 0; height: 0; margin: 0 auto 2px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid #ffcc33; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#objMark.off i { display: block; }
#objMark b { display: inline-block; font: 700 13px var(--display); background: rgba(20,16,10,.72); color: #ffe9a8; padding: 2px 9px; border-radius: 99px; }
#objMark small { display: block; font: 600 11px var(--ui); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lvlVal { color: #8a5a00; }
.tag .lvl { display: inline-block; font: 700 10px var(--mono); background: rgba(255,204,51,.9); color: #3b2a07; border-radius: 6px; padding: 0 4px; margin-right: 4px; text-shadow: none; vertical-align: 1px; }
.lvl.big { font: 700 18px var(--display); background: #ffcc33; color: #3b2a07; border-radius: 12px; padding: 6px 12px; white-space: nowrap; }
.lvl-row { display: flex; gap: 12px; align-items: center; margin: 10px 0 6px; }
.h3 { margin: 16px 0 8px; font: 700 16px var(--display); }
.tile.mission.done { opacity: .6; } .tile.mission .bar { margin: 8px 0 4px; }
.tile.tale { background: #fff6dc; border-color: #f3d27a; }
.chip.live { background: #1f7a4c; vertical-align: middle; }
.trust { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; }
.trust span { background: #efe7d6; border-radius: 99px; padding: 4px 10px; } .trust span.ok { background: #d8f0e3; color: #1f7a4c; font-weight: 600; }
.wicon { width: 16px; height: 16px; vertical-align: -3px; border-radius: 4px; }
.pill { font: 700 10px var(--ui); padding: 2px 7px; border-radius: 99px; background: #ece6da; text-transform: uppercase; }
.pill.paid { background: #d8f0e3; color: #1f7a4c; } .pill.pending, .pill.confirming, .pill.sending { background: #fdecc8; color: #b45309; } .pill.rejected { background: #f8d7d7; color: #b91c1c; }
.note.warn { background: #fde2e2; color: #8b1a1a; }

@media (max-width: 820px) {
  #feed { width: 250px; top: 70px; } .fe { font-size: 11px; }
  #lbMini { display: none; }
  #missions { top: 132px; width: 200px; font-size: 11px; }
  .lcd { width: 280px; }
  #pot { padding: 6px 14px; } #potVal { font-size: 20px; } #potHint { max-width: 180px; }
  #clock { padding: 5px 10px 5px 5px; } #clock small { display: none; } #tideGauge { width: 28px; height: 28px; }
  #walletCard { min-width: 140px; } #walletCard .usdc { font-size: 17px; } #walletCard .row.small span:last-child { display: none; }
  #minimapWrap { width: 110px; height: 110px; bottom: 96px; } #minimap { width: 110px; height: 110px; }
  #actions { grid-template-columns: repeat(7, 44px); bottom: 12px; right: 50%; transform: translateX(50%); }
  #actions button { height: 44px; font-size: 16px; } #actions button span { display: none; }
  #detector { bottom: 64px; } #help { display: none; }
  body.touch #stick { bottom: 130px; } body.touch #tDig { bottom: 140px; } body.touch #tPin { bottom: 228px; }
  body.touch #detector { bottom: 64px; }
  #reveal { width: 290px; }
}

/* phones (portrait) */
@media (max-width: 600px) {
  #pot { top: 8px; padding: 4px 14px 5px; border-radius: 12px; } #pot .lbl { font-size: 9px; } #potVal { font-size: 19px; } #potHint { display: none; }
  #clock { top: 62px; left: 8px; padding: 4px 9px 4px 4px; gap: 6px; border-radius: 11px; } #clock b { font-size: 10px; } #tideGauge { width: 24px; height: 24px; border-width: 2px; }
  #topright { top: 62px; right: 8px; gap: 6px; } .round { width: 32px; height: 32px; font-size: 14px; }
  #walletCard { min-width: 0; padding: 6px 9px; border-radius: 11px; } #walletCard .usdc { font-size: 15px; } .chip { font-size: 8px; padding: 1px 4px; }
  #walletCard .row.small { font-size: 10px; gap: 6px; } #batt { height: 12px; margin-top: 4px; } #battTxt { font-size: 8px; line-height: 12px; }
  #modeBadge { display: none; }
  #minimapWrap { top: 104px; left: 8px; bottom: auto; width: 92px; height: 92px; border-width: 3px; } #minimap { width: 86px; height: 86px; }
  #feed { top: 150px; left: 108px; right: 8px; width: auto; } #feed .fe:nth-child(n+3) { display: none; } .fe { font-size: 10.5px; padding: 4px 8px; }
  #detector { bottom: 66px; padding: 5px; border-radius: 14px; } .lcd { width: 232px; padding: 6px 9px 7px; } .lcdTop { font-size: 9px; } .lcdNums b { font-size: 15px; } #sigBars { height: 20px; }
  #missions { display: none; }
  #actions { bottom: 10px; grid-template-columns: repeat(7, 1fr); left: 8px; right: 8px; transform: none; } #actions button { height: 44px; border-radius: 12px; }
  body.touch #stick { left: 14px; bottom: 170px; width: 104px; height: 104px; } body.touch #knob { left: 29px; top: 29px; width: 46px; height: 46px; }
  body.touch #tDig { right: 14px; bottom: 176px; width: 76px; height: 76px; } body.touch #tPin { right: 100px; bottom: 196px; width: 54px; height: 54px; }
  body.touch #detector { bottom: 66px; }
  #toasts { top: 150px; width: 90%; } .toast { font-size: 12px; text-align: center; }
  #reveal { width: 86vw; } #reveal.small { bottom: 270px; }
  #chatBox { left: 8px; right: 8px; width: auto; bottom: 280px; }
  #modal .panel { padding: 18px 14px; border-radius: 18px; } #modal h2 { font-size: 21px; }
  .logo { font-size: 42px; }
}