/* Monero World interface. One window skin (js/ui-skin.js paints it: a 9-slice
   pixel frame, paper fill, ink outline, bevel, drop lip) on every panel, dialog,
   menu and button. Three layouts (phone portrait, phone landscape, desktop).
   The HUD stays small so the city gets most of the screen; every tap is 44 px. */
:root {
  --ink: #1b1530;
  --dim: #5a4f6e;
  --title: #a34200; /* titles on paper: the accent, darkened to 5:1 */
  --xmr: #ff6600;
  --paper: #fbf3e1;
  --paper-2: #f4e8cf; /* rows and inputs sunk into a window */
  --rule: #dccaa6;
  --font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: 700 12px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0a12; overflow: hidden; color: var(--ink); font: var(--font); -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { position: fixed; inset: 0; }
#stage { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; outline: none; }
#stage:focus-visible { box-shadow: inset 0 0 0 3px var(--xmr); }
button { font: var(--font); color: var(--ink); cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--xmr); outline-offset: 2px; }
kbd { font: var(--mono); }

/* ===== the skin =====
   Windows: 8 px frame, 12 px at the bottom (the drop lip). Buttons: 8 / 10 px.
   Without the painted skin (no canvas) the same boxes get a plain ink border. */
.plate, dialog.talk, dialog.bigmap, dialog.pagewin, .tour, .chat, .emotes, .home-tray, #more,
html body dialog#founding, html body #wormhole .wx-panel {
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
}
.skinned :is(.plate, dialog.talk, dialog.bigmap, dialog.pagewin, .tour, .chat, .emotes, .home-tray, #more),
html.skinned body dialog#founding, html.skinned body #wormhole .wx-panel {
  border-style: solid;
  border-color: transparent;
  border-width: 8px 8px 12px;
  border-radius: 0;
  border-image: var(--skin-win) 4 4 6 4 fill / 8px 8px 12px / 0 stretch;
  background: none;
  box-shadow: none;
  image-rendering: pixelated;
}
.btn, .choice, .chip, .chat-tabs button, .chat button, .area-report, .home-card, .m-toggle,
html body #founding button, html body #wormhole .wx-btn {
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fffaf0;
  box-shadow: 0 2px 0 var(--ink);
}
.skinned :is(.btn, .choice, .chip, .chat-tabs button, .chat button, .area-report, .home-card, .m-toggle),
html.skinned body #founding button, html.skinned body #wormhole .wx-btn {
  border-style: solid;
  border-color: transparent;
  border-width: 8px 8px 10px;
  border-radius: 0;
  border-image: var(--skin-btn) 4 4 5 4 fill / 8px 8px 10px / 0 stretch;
  background: none;
  box-shadow: none;
  image-rendering: pixelated;
}
.skinned :is(.btn, .choice, .chip, .chat-tabs button, .chat button, .area-report, .home-card, .m-toggle):hover,
.skinned .chat-tabs button[aria-selected="true"], .skinned .btn[aria-pressed="true"], .skinned .btn[aria-expanded="true"],
html.skinned body #founding button:hover, html.skinned body #wormhole .wx-btn:hover {
  border-image-source: var(--skin-btn-hot);
}
.skinned :is(.btn, .choice, .chip, .chat-tabs button, .chat button, .area-report, .home-card):active,
html.skinned body #founding button:active, html.skinned body #wormhole .wx-btn:active {
  border-image-source: var(--skin-btn-down);
}
.choice.primary, html body #founding button.primary, html body #wormhole .wx-btn.primary { background: var(--xmr); color: var(--ink); }
.skinned .choice.primary, html.skinned body #founding button.primary, html.skinned body #wormhole .wx-btn.primary { background: none; border-image-source: var(--skin-pri); color: var(--ink); }
.skinned .choice.primary:active, html.skinned body #founding button.primary:active, html.skinned body #wormhole .wx-btn.primary:active { border-image-source: var(--skin-pri-down); }
html body #founding button, html body #wormhole .wx-btn { font: 800 14px/1 system-ui, sans-serif; padding: 0 12px; }
html.skinned body #founding .fc-me { border-radius: 0; }

/* ===== buttons ===== */
.btn { min-width: 44px; min-height: 44px; padding: 0 8px; display: inline-grid; place-items: center; font-weight: 800; }
.btn svg { width: 18px; height: 18px; display: block; }
a.btn { color: var(--ink); text-decoration: none; }
.choice { display: flex; align-items: center; gap: 8px; min-height: 48px; min-width: 44px; justify-content: flex-start; padding: 0 8px; text-align: left; text-decoration: none; font: 700 13px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; }
.choice kbd { flex: 0 0 auto; min-width: 20px; text-align: center; font: 800 11px/18px ui-monospace, monospace; color: #fff; background: var(--ink); }
.choice.primary kbd { background: var(--ink); color: var(--xmr); }
.note { margin-top: 10px !important; color: var(--dim); font-size: 12px; }

/* ===== the HUD: place, map, compass, more ===== */
.where { position: absolute; left: calc(6px + var(--safe-l)); top: calc(6px + var(--safe-t)); max-width: calc(100% - 248px - var(--safe-l) - var(--safe-r)); padding: 1px 4px; display: grid; gap: 0; }
.where b, .where span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.where b { color: var(--ink); font: 800 12px/1.3 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.where span { color: var(--dim); font: 600 11px/1.3 system-ui, sans-serif; }
.where span:empty { display: none; }

.mapbox { position: absolute; right: calc(6px + var(--safe-r)); top: calc(6px + var(--safe-t)); display: flex; flex-direction: row-reverse; gap: 6px; align-items: start; }
.mapwin { padding: 0; line-height: 0; }
#minimap { display: block; width: 112px; height: 56px; image-rendering: pixelated; cursor: pointer; }
.hudrow { display: flex; gap: 6px; }
.compass { padding: 0; }
#compass { display: block; color: var(--title); font: 900 15px/1 ui-monospace, monospace; transition: transform 240ms cubic-bezier(.2, .8, .2, 1); }
#morebtn { position: relative; }
#morebtn svg { width: 20px; }
#morebtn:not([data-badge=""])::after, #menubtn:not([data-badge=""])::after { content: attr(data-badge); position: absolute; top: -12px; right: -12px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--xmr); color: var(--ink); border: 2px solid var(--ink); font: 800 11px/14px ui-monospace, monospace; text-align: center; }
#menubtn { position: relative; }

/* the drawer behind "more": labelled, one per row */
#more { position: absolute; z-index: 10; right: 0; top: calc(100% + 6px); width: 216px; padding: 2px; display: none; gap: 6px; }
#more.open { display: grid; }
#more .btn { width: 100%; justify-content: start; display: flex; gap: 10px; text-align: left; font: 700 13px/1.2 system-ui, sans-serif; }
#more .btn > span { pointer-events: none; }
#more .btn[hidden] { display: none; }
#more .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* the interaction chip, above the action button */
.prompt { position: absolute; left: 50%; bottom: calc(132px + var(--safe-b)); transform: translateX(-50%); margin: 0; padding: 2px 6px; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; color: var(--ink); font: 700 14px/1.3 system-ui, sans-serif; transition: opacity 160ms ease-out, transform 160ms ease-out; }
.prompt[hidden] { display: block; opacity: 0; transform: translate(-50%, 6px); pointer-events: none; }
.prompt kbd { font: 800 12px/1 ui-monospace, monospace; color: var(--ink); background: var(--xmr); padding: 2px 6px; margin-right: 8px; box-shadow: 0 2px 0 var(--ink); }

/* ===== the game pad (touch) ===== */
.pad { display: none; }
.stick-zone { position: absolute; left: 0; bottom: 0; width: 55%; height: 45%; touch-action: none; }
.stick { position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; border: 2px solid rgba(27, 21, 48, .5); background: rgba(251, 243, 225, .18); opacity: .5; pointer-events: none; transition: opacity 120ms; }
.stick.live { opacity: 1; }
.knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffdf7, #f2e2c0 70%); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.buttons { position: absolute; right: calc(12px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 10px; align-items: end; justify-items: end; }
.act { grid-column: 2; grid-row: 1 / span 2; width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; align-content: center; gap: 0; color: var(--ink); background: radial-gradient(circle at 40% 32%, #ffb36b, #ff6600 58%, #d65400); box-shadow: 0 4px 0 var(--ink); transition: filter 160ms, transform 90ms; }
.act b { font: 900 24px/1 ui-monospace, monospace; }
.act small { font: 800 9px/1 system-ui, sans-serif; letter-spacing: .08em; margin-top: 1px; }
.act:active:not([aria-disabled="true"]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.act[aria-disabled="true"] { filter: saturate(.15) brightness(.9); }
.round.btn { width: 48px; height: 48px; padding: 0; }

/* ===== quick chat ===== */
.chat { position: absolute; z-index: 9; padding: 2px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(360px, calc(100% - 16px)); max-height: calc(100dvh - 300px - var(--safe-t) - var(--safe-b)); min-height: 0; overflow: auto; overscroll-behavior: contain; }
.chat[hidden] { display: none; }
.chat button { min-height: 44px; padding: 0 6px; text-align: left; font: 600 12px/1.2 system-ui, sans-serif; }
.chat kbd { color: var(--dim); margin-right: 4px; }
.chat p { grid-column: 1 / -1; margin: 0 0 2px; color: var(--dim); font-size: 12px; }
.chat-tabs { grid-column: 1 / -1; display: flex; gap: 6px; }
.chat-tabs button { flex: 1; min-height: 44px; text-align: center; font-weight: 800; }
.chat-tabs button[aria-selected="true"] { color: var(--title); }
.chat-x { flex: 0 0 44px !important; font-size: 18px !important; }
.chat.is-area > button, .chat.is-area .quick-only { display: none; }
.area { grid-column: 1 / -1; display: grid; gap: 6px; }
.area[hidden] { display: none; }
.area-title { color: var(--title); text-transform: uppercase; letter-spacing: .04em; }
.area-list { list-style: none; margin: 0; padding: 6px; max-height: 34vh; overflow: auto; display: grid; gap: 4px; font: 500 13px/1.4 system-ui, sans-serif; background: var(--paper-2); border-radius: 2px; box-shadow: inset 0 2px 0 var(--rule); }
.area-list:empty { display: none; }
.area-msg { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.area-msg b { color: var(--title); }
.area-msg.is-mine b { color: var(--ink); }
.area-msg span { overflow-wrap: anywhere; }
.area-report { margin-left: auto; min-height: 30px; padding: 0 4px; color: var(--dim); font-size: 11px; }
.area-empty, .area-note { color: var(--dim); }
.area-form { display: flex; flex-wrap: wrap; gap: 6px; }
.area-form input, .m-row input[type=text], .m-row input[type=password] { flex: 1 1 160px; min-width: 0; min-height: 44px; padding: 0 10px; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 2px; box-shadow: inset 0 2px 0 var(--rule); font: 600 14px system-ui, sans-serif; }
.area-form .area-note { flex-basis: 100%; margin: 0; }
.near { grid-column: 1 / -1; display: grid; gap: 6px; }
.near .area-list { max-height: 22vh; }
.emote-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; min-width: 44px; padding: 0 6px; font-weight: 700; }
.scam-warn { flex-basis: 100%; color: #8a2a00; font-size: 12px; font-weight: 700; }
.emotes { position: absolute; z-index: 9; right: calc(12px + var(--safe-r)); bottom: calc(160px + var(--safe-b)); padding: 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 232px; }
.emotes[hidden] { display: none; }
.emotes .choice { min-height: 44px; }

/* ===== big windows: map, menu, page ===== */
dialog.bigmap, dialog.pagewin { position: fixed; inset: calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l)); margin: 0; width: auto; height: auto; max-width: none; max-height: none; padding: 0; display: none; flex-direction: column; color: var(--ink); }
dialog.bigmap[open], dialog.pagewin[open] { display: flex; }
dialog.bigmap::backdrop, dialog.pagewin::backdrop { background: rgba(11, 10, 31, .72); }
.pagebar { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; border-bottom: 2px solid var(--rule); }
.pagebar b { flex: 1; min-width: 0; color: var(--ink); font: 800 14px/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bigmap-canvas { flex: 1 1 auto; min-height: 120px; width: 100%; margin-top: 8px; image-rendering: pixelated; background: #0b0a12; border-radius: 2px; }
.bm-where { margin: 8px 2px 0; color: var(--title); font-weight: 800; }
.bm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 8px 0 2px; overflow: auto; max-height: 40dvh; }
dialog.menu { max-width: 560px; margin: auto; }
.m-tabs { padding: 8px 0 4px; }
.m-tabs button { min-height: 44px; }
.m-panel { flex: 1 1 auto; overflow: auto; padding: 4px 2px 6px; display: grid; gap: 8px; align-content: start; font: 500 14px/1.45 system-ui, sans-serif; }
.m-panel[hidden] { display: none; }
.m-h { margin: 6px 0 0; color: var(--title); font: 800 12px/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.m-note { margin: 0; color: var(--dim); font-size: 13px; }
.m-warn { margin: 0; padding: 8px; color: #6a2200; border: 2px solid #c24f00; border-radius: 2px; background: #ffe6cc; font-size: 13px; }
.m-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.m-row input[type=text], .m-row input[type=password] { flex: 1 1 150px; }
.m-row input[type=file] { flex: 1 1 100%; min-height: 44px; color: var(--dim); }
.m-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.m-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px; border-radius: 2px; background: var(--paper-2); box-shadow: inset 0 2px 0 var(--rule); }
.m-item b { display: block; color: var(--ink); }
.m-item small { color: var(--dim); }
.m-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.m-acts .choice { min-height: 44px; }
.m-toggle { display: flex; gap: 10px; align-items: flex-start; padding: 2px 4px; min-height: 44px; cursor: pointer; }
.m-toggle input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--xmr); flex: 0 0 auto; }
.m-toggle b { display: block; }
.m-toggle small { color: var(--dim); }
.dm-who { flex: 1; color: var(--title); }
.dm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 46dvh; overflow: auto; }
.dm-msg { justify-self: start; max-width: 85%; padding: 6px 10px; background: #fff; border: 2px solid var(--ink); border-radius: 2px; overflow-wrap: anywhere; display: grid; }
.dm-msg.is-mine { justify-self: end; background: #ffe2c4; }
.dm-msg small { color: var(--dim); font-size: 11px; }
.pagebar a { color: var(--ink); text-decoration: none; }
#page-frame { flex: 1; width: 100%; margin-top: 8px; border: 0; background: #090909; }

/* ===== your house ===== */
.homeroom { position: absolute; inset: 0; z-index: 7; background: #0b0a12; }
.homeroom[hidden] { display: none; }
#home-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.homeroom .nr-top { max-width: calc(100% - 24px - var(--safe-l) - var(--safe-r)); right: auto; }
.home-bar { position: absolute; right: calc(6px + var(--safe-r)); top: calc(64px + var(--safe-t)); display: flex; gap: 6px; }
.home-bar [hidden] { display: none; }
.home-tray { position: absolute; left: calc(6px + var(--safe-l)); right: calc(6px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); max-height: 38dvh; overflow: auto; padding: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.home-tray .m-note { flex-basis: 100%; }
.home-tray .choice { min-height: 44px; }
.home-cards { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.home-card { min-height: 104px; padding: 2px; display: grid; justify-items: center; align-content: end; gap: 4px; font: 700 12px/1.2 system-ui, sans-serif; }
.home-card img, .home-card canvas { max-width: 92px; max-height: 72px; image-rendering: pixelated; }
.home-note { position: absolute; z-index: 2; left: 50%; top: calc(116px + var(--safe-t)); transform: translateX(-50%); margin: 0; padding: 2px 8px; color: var(--ink); font: 800 14px system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
.home-tray .sel-btn:not(:focus) { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }

/* ===== desktop key strip, fps, tag ===== */
.keys { position: absolute; left: calc(8px + var(--safe-l)); bottom: 8px; margin: 0; padding: 0 4px; color: var(--dim); font: 600 12px/1.6 system-ui, sans-serif; display: flex; gap: 12px; flex-wrap: wrap; max-width: calc(100% - 200px); }
.keys kbd { color: var(--ink); border: 2px solid var(--ink); border-radius: 2px; background: #fff; padding: 0 4px; margin-right: 3px; font-size: 11px; }
.fps { display: none; position: absolute; right: 8px; bottom: 8px; margin: 0; color: #fff; font: var(--mono); text-shadow: 0 1px 0 #000; }
body.debug .fps { display: block; }
.tag { position: absolute; left: 50%; top: calc(8px + var(--safe-t)); transform: translateX(-50%); margin: 0; padding: 3px 8px; font: 800 10px/1.2 system-ui, sans-serif; letter-spacing: .08em; color: var(--ink); background: var(--xmr); border: 2px solid var(--ink); }

/* ===== the first-visit tour ===== */
.tour { position: absolute; z-index: 8; left: 50%; bottom: calc(64px + var(--safe-b)); transform: translateX(-50%); width: min(420px, calc(100% - 16px)); padding: 2px; display: grid; gap: 4px; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; font: 500 14px/1.45 system-ui, sans-serif; }
.tour[hidden] { display: none; }
.tour p { margin: 0; }
.tour > * { grid-column: 2; }
.tour-step { color: var(--dim); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tour-title { color: var(--ink); font: 800 16px/1.2 system-ui, sans-serif; }
#tour-face { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 72px; height: 124px; image-rendering: pixelated; background: radial-gradient(circle at 50% 78%, #3a3160, #1b1530 72%); border-radius: 2px; }
.tour-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.tour-actions .choice, .tour-actions .btn { min-height: 44px; padding: 0 10px; }
.tour-hi { outline: 3px solid var(--xmr) !important; outline-offset: 3px; animation: tour-pulse 1s ease-in-out infinite alternate; }
@keyframes tour-pulse { from { outline-color: var(--xmr); } to { outline-color: rgba(255, 102, 0, .25); } }

/* ===== the Node Station server room, and toasts ===== */
.noderoom { position: absolute; inset: 0; z-index: 7; background: #0b0a12; }
.noderoom canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.nr-top { position: absolute; left: calc(6px + var(--safe-l)); top: calc(6px + var(--safe-t)); padding: 1px 4px; display: grid; gap: 0; max-width: calc(100% - 120px); }
.nr-top b { color: var(--ink); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.nr-top span { color: var(--dim); font-weight: 600; font-size: 12px; }
.nr-exit { position: absolute; right: calc(6px + var(--safe-r)); top: calc(6px + var(--safe-t)); }
.toast { position: absolute; z-index: 12; left: 50%; top: 34%; transform: translateX(-50%); margin: 0; padding: 4px 8px; width: max-content; max-width: min(420px, calc(100% - 24px)); text-align: center; color: var(--ink); font: 700 14px/1.4 system-ui, sans-serif; }

/* ===== entering a district ===== */
.district { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); margin: 0; padding: 2px 14px; display: grid; gap: 0; text-align: center; pointer-events: none; z-index: 6; }
.district[hidden] { display: none; }
.district b { color: var(--ink); font: 900 18px/1.25 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.district span { color: var(--dim); font-size: 12px; font-weight: 700; }
.district.show { animation: district 2.6s ease-out both; }
@keyframes district { 0% { opacity: 0; transform: translate(-50%, 6px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ===== the conversation ===== */
dialog.talk { position: fixed; inset: auto 0 calc(8px + var(--safe-b)) 0; margin: 0 auto; width: min(640px, calc(100vw - 16px)); max-height: min(70dvh, 560px); padding: 0; overflow: auto; font: 500 15px/1.5 system-ui, sans-serif; opacity: 1; transform: none; transition: opacity 160ms ease-out, transform 160ms ease-out, overlay 160ms allow-discrete, display 160ms allow-discrete; }
@starting-style { dialog.talk[open] { opacity: 0; transform: translateY(12px); } }
dialog.talk::backdrop { background: rgba(11, 10, 31, .2); }
.tbox { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 12px; padding: 4px; }
.tbox > .tmain { display: contents; }
#talk-face { grid-row: 1 / span 3; width: 72px; height: 72px; image-rendering: pixelated; background: radial-gradient(circle at 50% 78%, #3a3160, #1b1530 72%); border-radius: 2px; }
#talk-name, #talk-where, #talk-text { grid-column: 2; }
#talk-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
#talk-actions .note { grid-column: 1 / -1; }
.tmain { min-width: 0; display: grid; gap: 2px; align-content: start; }
.tmain p { margin: 0; }
#talk-name { color: var(--ink); font: 800 16px/1.2 system-ui, sans-serif; letter-spacing: .02em; }
#talk-where { color: var(--dim); font-size: 12px; font-weight: 600; }
#talk-text { margin-top: 6px !important; min-height: 3em; white-space: pre-line; overflow-wrap: anywhere; }

/* ===== phone, portrait ===== */
@media (pointer: coarse), (max-width: 520px) {
  .pad { display: block; }
  .keys { display: none; }
  .fps { bottom: auto; top: calc(124px + var(--safe-t)); left: calc(8px + var(--safe-l)); right: auto; }
  .chat { left: 50%; transform: translateX(-50%); bottom: calc(150px + var(--safe-b)); }
  .tag { display: none; }
  #more #zoomrow { display: none; } /* pinch instead */
  .tour { bottom: calc(150px + var(--safe-b)); }
  .prompt { bottom: calc(150px + var(--safe-b)); }
}
/* phone, portrait: big windows hug their content from the top; the map keeps its shape */
@media (pointer: coarse) and (orientation: portrait), (max-width: 520px) and (orientation: portrait) {
  dialog.bigmap { bottom: auto; max-height: calc(100dvh - 20px - var(--safe-t) - var(--safe-b)); }
  #bigmap-canvas { flex: 0 0 auto; height: min(46vw, 34dvh); }
  .bm-list { max-height: none; flex: 1 1 auto; min-height: 0; }
  .m-panel { min-height: 0; }
}
/* ===== phone, landscape ===== */
@media (pointer: coarse) and (orientation: landscape) {
  .where { max-width: 40%; }
  #minimap { width: 96px; height: 48px; }
  .prompt { bottom: calc(16px + var(--safe-b)); }
  .stick-zone { width: 40%; height: 70%; }
  .buttons { right: calc(16px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); }
  .chat { left: auto; right: calc(140px + var(--safe-r)); transform: none; bottom: calc(14px + var(--safe-b)); max-height: calc(100dvh - 28px - var(--safe-t) - var(--safe-b)); }
  dialog.talk { inset: calc(8px + var(--safe-t)) calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) auto; margin: 0; width: min(46vw, 440px); max-height: calc(100dvh - 16px - var(--safe-t) - var(--safe-b)); }
  .emotes { right: calc(140px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); }
  .tbox { grid-template-columns: 56px minmax(0, 1fr); gap: 2px 10px; }
  #talk-face { width: 56px; height: 56px; }
  #wide { display: none; }
  .tour { bottom: calc(12px + var(--safe-b)); left: 56%; width: min(360px, 40%); }
  .home-tray { left: auto; right: calc(8px + var(--safe-r)); top: calc(110px + var(--safe-t)); bottom: calc(8px + var(--safe-b)); width: min(300px, 42vw); max-height: none; align-content: flex-start; }
  .home-bar { top: calc(56px + var(--safe-t)); }
}
/* ===== desktop: room to spare, so the tools sit in the open ===== */
@media (pointer: fine) and (min-width: 521px) {
  #minimap { width: 176px; height: 88px; }
  .chat { left: calc(8px + var(--safe-l)); bottom: 48px; }
  #wide { display: none; }
  dialog.menu { inset: 6vh 0; width: min(560px, 92vw); margin: 0 auto; }
  dialog.pagewin { inset: 5vh 8vw; }
  .home-tray { left: 50%; right: auto; transform: translateX(-50%); width: min(720px, calc(100% - 16px)); }
  .home-bar { top: 8px; }
}
@media (max-width: 360px) { .where { max-width: calc(100% - 232px); } #minimap { width: 96px; height: 48px; } }
@media (prefers-reduced-motion: reduce) {
  #compass, .prompt, dialog.talk, .stick { transition: none; }
  .tour-hi, .district.show { animation: none; }
}