:root {
  --bg: #14110f;
  --panel: rgba(20, 16, 14, 0.78);
  --card: #221c18;
  --border: #4a3a2e;
  --text: #f1e6d6;
  --muted: #b3a491;
  --ember: #e8743b;
  --ember-hi: #ff9a5c;
  --danger: #c7433a;
  --radius: 10px;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--text);
}

* { box-sizing: border-box; }
/* manipulation: no double-tap zoom (taps also land at once, without the browser waiting to see if a second follows). */
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; touch-action: manipulation; overscroll-behavior: none; } /* (no sideways bounce or pull-to-go-back) */
/* iPhones zoom the whole page into any text box with text smaller than 16px when you tap it (the chat box, the
   login form): keep them at 16px on touch screens. */
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }
[hidden] { display: none !important; }

.screen { position: fixed; inset: 0; }
.menu {
  display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 120%, #5a2a14 0%, #1d1512 55%, #100d0c 100%);
}

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; width: min(380px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.card.wide { width: min(560px, 100%); }

.logo {
  margin: 0; font-size: 44px; letter-spacing: 2px; text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  background: linear-gradient(180deg, var(--ember-hi), var(--ember) 60%, #a13d1a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { text-align: center; color: var(--muted); margin: 6px 0 22px; }
h2, h3 { margin: 0 0 14px; font-family: Georgia, serif; font-weight: normal; }
h3 { margin-top: 26px; color: var(--muted); font-size: 16px; }

label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
label.remember { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
label.remember input { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; accent-color: var(--ember); }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  background: #15110e; color: var(--text); border: 1px solid var(--border); border-radius: 6px; font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--ember); outline-offset: -1px; }
input[type=color] { padding: 2px; height: 38px; }

button {
  font: inherit; padding: 9px 16px; border-radius: 6px; cursor: pointer;
  background: #2f2620; color: var(--text); border: 1px solid var(--border);
}
button:hover:not(:disabled) { border-color: var(--ember); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--ember); border-color: var(--ember); color: #1a0f08; font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--ember-hi); }
button.danger:hover:not(:disabled) { border-color: var(--danger); color: #ff8a80; }
button.link { background: none; border: none; padding: 4px 0; color: var(--muted); text-decoration: underline; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.spread { justify-content: space-between; }
.error { color: #ff8a80; min-height: 1.2em; margin: 4px 0 10px; font-size: 14px; }
.muted { color: var(--muted); }

.character-list { display: grid; gap: 8px; margin-bottom: 8px; }
.character-list .empty { color: var(--muted); padding: 12px 0; }
.char-card {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 12px;
}
.char-card.selected { border-color: var(--ember); background: #3a2a1f; }
.char-card .swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); flex: none; }
.char-card .name { font-weight: 600; }
.char-card .meta { color: var(--muted); font-size: 13px; }

.create-form { display: grid; grid-template-columns: 1fr 1fr 70px auto; gap: 10px; align-items: end; }
.create-form label { margin: 0; }
@media (max-width: 520px) { .create-form { grid-template-columns: 1fr 1fr; } }

/* ---------- In-game HUD ---------- */
#game-host, #game-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The 3D name labels set their own z-index (nearest on top); keep all of that beneath the interface. */
#game-host { z-index: 0; isolation: isolate; }
/* Full screen on a phone (a home-screen app, or the Fullscreen API): the 3D view fills the whole screen, under the
   notch and the home bar too. The touch HUD keeps each of its pieces clear of them itself (the env(safe-area-inset-*)
   rules further down), so the game screen isn't inset as a whole (that pushed everything in twice). */
#game-host { position: fixed; inset: 0; }
.fullscreen-help {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60;
  width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px 18px;
}
.fullscreen-help h3 { margin: 0 0 8px; color: var(--text); font-size: 18px; }
.fullscreen-help p, .fullscreen-help li { font-size: 14px; line-height: 1.45; color: var(--text); }
.fullscreen-help ol { padding-left: 20px; margin: 8px 0 14px; }
.fullscreen-help button { width: 100%; }
#game-host canvas { touch-action: none; }

.hud { position: absolute; z-index: 2; }
.panel { background: var(--panel); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 10px 14px; backdrop-filter: blur(4px); }
/* Firefox (and Low graphics): no blur behind the panels. Over a game redrawn every frame it re-blurs each panel every
   frame, which Firefox is slow at; a slightly darker panel reads just as well. */
body.firefox .panel, body.gfx-low .panel { backdrop-filter: none; background: rgba(20, 16, 14, 0.86); }
#hud-player { top: 16px; left: 16px; }
.hud-name { font-size: 18px; font-weight: 600; }
/* Top right: the minimap in the corner, the menu button beside it. */
#hud-menu { top: 16px; right: 190px; z-index: 6; }
.menu-button { padding: 6px 12px; font: 600 14px "Segoe UI", sans-serif; border-radius: 10px; background: var(--panel); border: 1px solid rgba(233,185,73,.45); }
.menu-panel { position: absolute; top: 40px; right: 0; width: 230px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: rgba(24, 16, 12, .97); border: 1px solid rgba(233,185,73,.45); }
.menu-panel button { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 7px 10px; background: transparent; border: none; border-radius: 6px; font-size: 14px; }
.menu-panel button:hover { background: rgba(233,185,73,.15); }
.menu-panel kbd { font-size: 10px; }
.menu-sep { height: 1px; background: rgba(255,255,255,.1); margin: 4px 2px; }
.menu-coords { font-size: 12px; padding: 2px 10px; }
.menu-leave { color: #ff9a7a; }

/* FPS counter and graphics quality, top center */
#hud-perf {
  top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 3px 4px 3px 12px; border-radius: 16px; background: var(--panel); border: 1px solid rgba(255,255,255,.1);
  font: 600 13px/1 "Segoe UI", sans-serif; white-space: nowrap;
}
#hud-fps { min-width: 52px; font-variant-numeric: tabular-nums; }
#hud-fps.good { color: #8fe08a; }
#hud-fps.ok { color: #ffd77a; }
#hud-fps.bad { color: #ff8a6a; }
#gfx-quality {
  width: auto; margin: 0; padding: 3px 6px; border-radius: 12px; font: inherit; font-weight: 500;
  background: rgba(0,0,0,.4); color: #f3e7d3; border: 1px solid rgba(255,255,255,.18); cursor: pointer;
}
#gfx-quality option { background: #241a12; color: #f3e7d3; }

#chat { left: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); padding: 8px; }
/* The log starts below the minimize button (top right), so the button never covers the scrollbar's up arrow. */
#chat-log { height: 150px; margin-top: 20px; overflow-y: auto; font-size: 14px; line-height: 1.4; padding: 0 4px 6px; text-shadow: 0 1px 2px #000; }
#chat-log .who { color: var(--ember-hi); font-weight: 600; }
#chat-log .system { color: #9fd3ff; font-style: italic; }
#chat-log .time { color: #7d705f; font-size: 12px; margin-right: 4px; }
#chat-input { margin: 0; background: rgba(0,0,0,.4); }

#hud-help { right: 16px; bottom: 90px; font-size: 12px; text-shadow: 0 1px 2px #000; max-width: min(360px, 34vw); text-align: right; opacity: .85; }
@media (max-width: 700px) { #hud-help { display: none; } }

.nameplate {
  color: #fff; font-size: 13px; font-weight: 600; padding: 1px 7px; border-radius: 4px;
  background: rgba(0,0,0,.45); text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none;
}
.nameplate .lvl { color: #ffd27a; font-weight: normal; margin-left: 4px; }
.nameplate.me { color: var(--ember-hi); }

.bubble {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.92); color: #222; padding: 4px 9px; border-radius: 8px;
  font-weight: normal; text-shadow: none; max-width: 220px; white-space: normal; width: max-content;
}

.nameplate.monster { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #ffe9c9; }
.nameplate.monster .lvl { margin: 0; font-size: 11px; }
.nameplate .hp { width: 64px; height: 5px; background: rgba(0,0,0,.6); border-radius: 3px; overflow: hidden; display: none; }
.nameplate .hp i { display: block; height: 100%; background: linear-gradient(#ff6b5a, #c3271b); }
.nameplate.targeted { outline: 2px solid #ffd23f; }
.nameplate.targeted .hp, .nameplate.hurt .hp { display: block; }

/* ---------- Combat ---------- */
.hp-bar.me { margin-top: 6px; width: 170px; height: 14px; }
.hp-bar.me i { background: linear-gradient(#7be36b, #2f9a2a); transition: width .25s ease; }
.hp-bar.me.low i { background: linear-gradient(#ffb35c, #c3561b); }
.hp-bar.me span { line-height: 14px; }
.xp-bar { position: relative; margin-top: 4px; width: 170px; height: 13px; background: rgba(0,0,0,.6); border-radius: 4px; overflow: hidden; cursor: help; }
/* ---------- Update required ---------- */
#update-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(10, 6, 4, .78); }
#update-overlay[hidden] { display: none; }
#update-overlay .card { max-width: 360px; text-align: center; }
#update-overlay h2 { margin: 0 0 8px; font-family: Georgia, serif; color: #ffd77a; }
#update-overlay button { margin-top: 10px; min-width: 160px; }

/* ---------- Character stats ---------- */
.stats-button { margin-top: 6px; padding: 3px 10px; font-size: 12px; border-radius: 10px; position: relative; }
.stats-button kbd { font-size: 9px; min-width: 12px; line-height: 13px; }
#stats-badge { margin-left: 5px; padding: 0 6px; border-radius: 9px; background: #e8743b; color: #1a0f08; font-weight: 700; }
#stats-window {
  top: 56px; left: 200px; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 300px); /* clear of the chat box */ z-index: 5;
  border: 1px solid rgba(233,185,73,.45); background: rgba(24, 16, 12, .96); /* solid: names in the world mustn't show through */
}
.stats-head { margin-bottom: 4px; }
/* Windows (pinWindowHeaders in draggable.js): the title bar and its ✕ stay put; only the body below scrolls. */
.win-window { display: flex; flex-direction: column; overflow: hidden !important; }
.win-window > .stats-head, .win-window > .row:first-child, .win-window > .patch-actions { flex: none; }
.win-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -10px; padding-right: 10px; }
/* Windows that didn't have a height limit: never taller than the screen. */
#social-window { max-height: calc(100vh - 72px); }
#daily-window { max-height: calc(100vh - 32px); }
#skills-window { max-height: calc(100vh - 150px); }
.stats-points { font-size: 14px; margin-bottom: 6px; }
.stats-points b { color: #ffd77a; font-size: 18px; }
.stats-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2px 8px; padding: 6px 8px; margin-bottom: 4px; border-radius: 8px; background: rgba(0,0,0,.25); }
.stats-row.primary { box-shadow: inset 0 0 0 1px rgba(233,185,73,.55); }
.stats-name b { font-size: 14px; }
.stats-name em { margin-left: 6px; font-style: normal; font-size: 10px; color: #1a0f08; background: #e9b949; border-radius: 6px; padding: 0 5px; vertical-align: 1px; }
.stats-value { font-size: 16px; font-weight: 700; min-width: 44px; text-align: right; }
.stats-buttons { display: flex; gap: 4px; }
.stats-buttons button { width: 28px; height: 26px; padding: 0; font-weight: 700; }
.stats-desc { grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: #cfc2ad; }
.stats-sub { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #b9a98f; }
.stats-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 2px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.stats-line b { font-weight: 600; text-align: right; }
.stats-derived .up, .stats-row .up { color: #8fe08a; }
.stats-derived .down { color: #ff9a7a; }
.stats-actions { justify-content: flex-end; gap: 10px; margin-top: 10px; }
@media (max-width: 620px) { #stats-window { left: 16px; top: 120px; max-height: calc(100vh - 140px); } }
.fx-number.dodge { color: #cfe7ff; font-size: 16px; font-style: italic; }
.nameplate.enemy { color: #ffb3a8; box-shadow: 0 0 0 2px #e8433b; }
#target-frame.enemy-player { border-color: rgba(232,67,59,.7); }
#target-frame.enemy-player #target-name::before { content: '⚔ '; color: #ff8a7a; }
.xp-bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 13px; font-weight: 600; color: #f3eaff; text-shadow: 0 1px 2px #000; }
.xp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a5cff, #c9a6ff); transition: width .4s ease; }
.xp-bar.max i { background: linear-gradient(90deg, #e9b949, #fff2b0); }
.fx-number.xp { color: #c9a6ff; font-size: 15px; }
.fx-number.heal { color: #7aff8a; font-size: 26px; }
#zone-banner.levelup { color: #fff2b0; text-shadow: 0 2px 6px #000, 0 0 30px rgba(255,210,90,.9); }
/* Seven skills: centered, but never under the chat box (bottom left, 436 px wide). */
#action-bar { left: max(50%, 660px); bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.action-buttons { display: flex; gap: 7px; pointer-events: auto; }
.action-error { min-height: 20px; color: #ffb3a8; font: 600 15px Georgia, serif; text-shadow: 0 1px 3px #000; opacity: 0; transition: opacity .2s; }
.action-error.show { opacity: 1; }
/* Returning to the shrine: a cast bar above the hotbar. */
.recall-bar {
  position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); width: min(300px, calc(100vw - 32px));
  z-index: 6; pointer-events: none; text-align: center;
}
.recall-label { font: 600 15px Georgia, serif; color: #cfe6ff; text-shadow: 0 1px 3px #000; margin-bottom: 5px; }
.recall-track { height: 10px; border-radius: 5px; background: rgba(10, 14, 24, .7); border: 1px solid #6f8fb8; overflow: hidden; }
#recall-fill { height: 100%; width: 0; background: linear-gradient(90deg, #6fb6ff, #d8f0ff); }
body.touch .recall-bar { bottom: auto; top: 38%; }
.ability {
  position: relative; width: 52px; height: 52px; padding: 0; border-radius: 11px; overflow: hidden;
  background: radial-gradient(circle at 40% 30%, #4a3a5a, #1c1426); border: 2px solid #b8862b;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.ability:hover { border-color: #ffd77a; }
.ability.active { transform: scale(.94); }
.ability-icon { position: absolute; inset: 6px; }
.ability-icon svg { width: 100%; height: 100%; }
.ability-key { position: absolute; left: 4px; top: 2px; font-size: 11px; color: #ffd77a; text-shadow: 0 1px 2px #000; }
.ability-cd {
  position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(rgba(0,0,0,.72) calc(var(--cd, 0) * 360deg), transparent 0);
}
.ability.unusable .ability-icon { filter: grayscale(.8) brightness(.6); }
/* Not unlocked yet: dimmed, with the level it unlocks at. */
.ability.locked .ability-icon { filter: grayscale(1) brightness(.35); }
.ability.locked::after {
  content: attr(data-lock); position: absolute; inset: auto 0 4px 0; text-align: center;
  font: 700 11px "Segoe UI", sans-serif; color: #ffd77a; text-shadow: 0 1px 2px #000;
}
body.touch .action-buttons { flex-wrap: wrap; max-width: 150px; justify-content: flex-end; }
/* The hotbar: ten slots (keys 1-0) for skills, potions, food and gear, a little smaller so ten fit beside the chat. */
body:not(.touch) #action-bar { left: max(50%, 704px); }
#hotbar { gap: 6px; }
#hotbar .ability { width: 46px; height: 46px; }
.hotbar-slot.empty { background: rgba(20,14,30,.55); border-style: dashed; border-color: rgba(184,134,43,.55); box-shadow: none; }
.hotbar-slot.drop { border-color: #7adf8a; box-shadow: 0 0 12px rgba(122,223,138,.7); }
.hotbar-slot.equipped { border-color: #7ac8ff; }
.hotbar-slot.missing .ability-icon { filter: grayscale(1) brightness(.4); }
.hotbar-slot .ability-icon .glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 26px; line-height: 1; }
.ability-count { position: absolute; right: 3px; bottom: 1px; font: 800 12px "Segoe UI", sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.ability-count[hidden] { display: none; }
body.touch .hotbar-slot.empty { display: none; }
#hotbar.unusable .ability-icon { filter: grayscale(.8) brightness(.6); }
/* Supplies in the bags window and the shop, and the skill book. */
.inv-supplies { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.inv-supplies p { margin: 0; font-size: 12px; }
.inv-slot.supply .glyph, .shop-item .supply .glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 24px; }
.buy-supply { display: flex; gap: 4px; }
#skills-window { left: 50%; bottom: 120px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); z-index: 6; }
.skills-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.skill-entry { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: rgba(0,0,0,.25); cursor: grab; text-align: left; border: 1px solid rgba(233,185,73,.25); color: inherit; }
.skill-entry .ability-icon { position: static; display: block; width: 36px; height: 36px; flex: none; }
.skill-entry.locked { opacity: .5; cursor: default; }
.skill-entry small { display: block; font-size: 11px; color: #cfc2ad; }
#hurt-flash {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(200,20,10,.55) 100%);
}
#hurt-flash.show { animation: hurt .45s ease-out; }
@keyframes hurt { 0% { opacity: 1; } 100% { opacity: 0; } }
#death-overlay {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(20, 10, 10, .45); color: #ffe9c9; text-shadow: 0 2px 6px #000; pointer-events: none;
}
#death-overlay[hidden] { display: none; }
#death-overlay { padding: 0 24px; text-align: center; box-sizing: border-box; }
#death-overlay h2 { font: 700 clamp(28px, 6vw, 48px) Georgia, serif; margin: 0 0 8px; color: #ff9a7a; }
#death-overlay p { font-size: clamp(15px, 4vw, 18px); margin: 0; max-width: 32em; line-height: 1.4; }
body.dead #game-host canvas { filter: grayscale(.85) brightness(.8); }
.fx-number-anchor { pointer-events: none; }
.fx-number {
  display: block; font: 800 24px Georgia, serif; color: #fff; white-space: nowrap;
  /* A dark outline all round so numbers read against sky, grass and carpet alike. */
  text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000, 0 3px 6px rgba(0,0,0,.8);
  animation: fx-rise 2.2s ease-out forwards; /* duration is set per kind in fx.js */
}
.fx-number.crit { font-size: 32px; color: #ffe066; }
.fx-number.other { font-size: 17px; color: #e4ddd2; }
.fx-number.hurt { font-size: 30px; color: #ff4d3d; }
.fx-number.gold { color: #ffd77a; font-size: 20px; }
/* Pop in, hold still long enough to read, then drift up and fade. */
@keyframes fx-rise {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  8% { transform: translateY(-10px) scale(1.25); opacity: 1; }
  16% { transform: translateY(-12px) scale(1); opacity: 1; }
  65% { transform: translateY(-22px) scale(1); opacity: 1; }
  100% { transform: translateY(-56px) scale(.95); opacity: 0; }
}
.fx-drop { font: 700 12px "Segoe UI", sans-serif; color: #ffd77a; background: rgba(20,12,4,.7); padding: 1px 7px; border-radius: 8px; border: 1px solid rgba(255,215,122,.5); white-space: nowrap; }
.fx-drop.theirs { color: #cfc6b4; border-color: rgba(255,255,255,.2); }
body.touch #action-bar { bottom: 170px; right: 18px; left: auto; transform: none; }
body.touch .action-buttons { flex-direction: column-reverse; }
body.touch .ability { width: 64px; height: 64px; }

.area-label {
  font-family: Georgia, serif; font-size: 18px; font-weight: bold; color: #ffd77a; text-align: center;
  text-shadow: 0 2px 4px #000, 0 0 12px rgba(255,180,60,.6); pointer-events: none; white-space: nowrap;
}
.area-label small { display: block; font-size: 11px; font-weight: normal; color: #f1e6d6; font-family: "Segoe UI", sans-serif; }

#target-frame { top: 50px; left: 50%; transform: translateX(-50%); width: min(280px, calc(100vw - 32px)); }
#target-frame .row { margin-bottom: 6px; flex-wrap: nowrap; }
#target-name { font-size: 15px; }
#target-level { font-size: 13px; font-weight: 600; }
.hp-bar { position: relative; height: 16px; background: rgba(0,0,0,.6); border-radius: 4px; overflow: hidden; }
.hp-bar i { display: block; height: 100%; background: linear-gradient(#ff7a5c, #b8271a); }
.hp-bar span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 16px; text-shadow: 0 1px 2px #000; }

#zone-banner {
  top: 22%; left: 50%; transform: translateX(-50%); pointer-events: none; opacity: 0;
  font-family: Georgia, serif; font-size: clamp(24px, 5vw, 44px); color: #ffd77a; white-space: nowrap;
  text-shadow: 0 2px 6px #000, 0 0 24px rgba(255,170,60,.5);
}
#zone-banner.show { animation: zone-fade 3.5s ease-out; }
/* The casino pit's countdown: leave in time or the bouncers come. */
#pit-timer {
  top: 15%; left: 50%; transform: translateX(-50%); pointer-events: none; max-width: calc(100vw - 32px); text-align: center;
  padding: 8px 18px; border-radius: 10px; font: 700 clamp(15px, 3.2vw, 22px) Georgia, serif; color: #fff;
  background: rgba(120, 14, 24, .85); border: 2px solid #ff7a6a; text-shadow: 0 1px 3px #000;
  animation: pit-pulse .8s ease-in-out infinite alternate;
}
#pit-timer[hidden] { display: none; }
#pit-timer[data-kind="safe"] { background: rgba(24, 80, 40, .85); border-color: #7adf8a; animation: none; }
@keyframes pit-pulse { from { box-shadow: 0 0 0 rgba(255,90,70,0); } to { box-shadow: 0 0 22px rgba(255,90,70,.8); } }
@keyframes zone-fade { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Gold ---------- */
.coin {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -1px;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #e9b949 45%, #9a6b12); box-shadow: 0 0 0 1px #6b4a0c;
}
.hud-gold { margin-top: 4px; font-size: 13px; color: #ffd77a; }

kbd {
  display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 4px; text-align: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); font: 600 11px/16px "Segoe UI", sans-serif;
}

#interact-prompt {
  left: 50%; bottom: 140px; transform: translateX(-50%); padding: 8px 14px; border-radius: 8px;
  background: var(--panel); border: 1px solid rgba(233,185,73,.5); color: #ffd77a; font-size: 15px;
}


/* ---------- Blackjack: control bar while seated ---------- */
#bj-bar, #ph-bar, #wr-bar, #fl-bar {
  left: 50%; bottom: 16px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); padding: 10px 14px 8px;
  border: 1px solid rgba(233,185,73,.45); z-index: 3;
}
#ph-bar { border-color: rgba(122,170,255,.5); }
#wr-bar { border-color: rgba(230,110,110,.55); }
#fl-bar { border-color: rgba(255,201,90,.55); }
#ph-leave, #wr-leave, #fl-leave { margin-left: auto; }
.bj-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#bj-status, #ph-status, #wr-status, #fl-status { font-family: Georgia, serif; font-size: 18px; color: #fff4d6; transition: color .3s; }
:is(#bj-status, #ph-status, #wr-status, #fl-status)[data-kind="win"] { color: #ffe066; }
:is(#bj-status, #ph-status, #wr-status, #fl-status)[data-kind="lose"] { color: #ffb3a8; }
:is(#bj-status, #ph-status, #wr-status, #fl-status)[data-kind="push"] { color: #cfe7ff; }
:is(#bj-status, #ph-status, #wr-status, #fl-status)[data-kind="turn"] { color: #ffd77a; }
/* Table signs: crisp page text warped onto each sign's board (tableSign.js maps its corners onto the board's, in
   perspective). Laid out large (one em is 4 px) and warped down, so it stays sharp. */
.table-sign-anchor { width: 0; height: 0; pointer-events: none; }
/* The board's lettering, laid out large and warped onto the board (tableSign.js). Its size is in pixels, never in
   em: phones (Safari in landscape, or with its text size turned up) enlarge text, and an em-sized box grew with it, so
   the lettering was stretched off the edge of the board. Text enlarging is switched off here, and anything that
   still overflows is clipped to the board. */
.table-sign {
  position: absolute; left: 0; top: 0; width: 920px; height: 312px; box-sizing: border-box; overflow: hidden;
  padding: 0 32px; border: 16px solid var(--accent, #f3d27a);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(var(--top, #0f3a22), var(--bottom, #06180e)); font-family: Georgia, serif; text-align: center;
  transform-origin: 0 0; backface-visibility: hidden; -webkit-text-size-adjust: none; text-size-adjust: none;
}
.table-sign b { color: var(--accent, #f3d27a); font-weight: 700; line-height: 1.05; white-space: nowrap; text-shadow: 0 0.06em 0.08em rgba(0,0,0,.7); }
.table-sign span { color: #fff; font-weight: 700; line-height: 1.15; white-space: nowrap; margin-top: 12px; }
/* Casino War: the tie bets under the chips. */
.wr-ties { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; }
/* Four Lanterns: the table at a glance, your hand, the wild's color picker. */
.fl-table { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; margin-bottom: 6px; font-size: 13px; }
.fl-color { padding: 2px 9px; border-radius: 10px; background: var(--c); color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.fl-dir { font-size: 20px; color: #ffd98a; }
.fl-other { padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.28); color: #f1e6d6; }
.fl-other b { color: #ffd77a; }
.fl-other.turn { box-shadow: inset 0 0 0 1px #ffd77a; color: #fff; }
/* A Draw Two or Four played on you: the Draw button pulses until you take them. */
#fl-draw.fl-must:not(:disabled) { animation: fl-must 0.9s ease-in-out infinite alternate; }
@keyframes fl-must { from { box-shadow: 0 0 0 0 rgba(255,120,60,.0); transform: scale(1); } to { box-shadow: 0 0 0 4px rgba(255,120,60,.85), 0 0 18px rgba(255,120,60,.7); transform: scale(1.06); } }
.fl-hand { display: flex; gap: 4px; overflow-x: auto; padding: 4px 2px 8px; min-height: 76px; align-items: flex-end; overscroll-behavior: contain; }
.fl-card {
  --c: #2a2140; --d: #120c22; position: relative; flex: none; width: 46px; height: 66px; padding: 0; border-radius: 7px;
  background: linear-gradient(var(--c) 0 9px, #fbf3df 9px calc(100% - 9px), var(--c) calc(100% - 9px));
  border: 2px solid var(--d); color: var(--d); font-family: Georgia, serif; cursor: pointer; opacity: .78;
  transition: transform .12s, opacity .12s, box-shadow .12s;
}
.fl-card.cR { --c: #d8452b; --d: #7a1e10; } .fl-card.cB { --c: #2c7cc4; --d: #123e66; }
.fl-card.cG { --c: #3d9a46; --d: #1a4a20; } .fl-card.cY { --c: #e2a823; --d: #7a5208; }
.fl-card.cW { background: linear-gradient(90deg, #d8452b 0 25%, #2c7cc4 25% 50%, #3d9a46 50% 75%, #e2a823 75%) top / 100% 9px no-repeat,
  linear-gradient(90deg, #d8452b 0 25%, #2c7cc4 25% 50%, #3d9a46 50% 75%, #e2a823 75%) bottom / 100% 9px no-repeat, #fbf3df; }
.fl-card .fl-glass {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 36px; border-radius: 45%;
  display: grid; place-items: center; background: radial-gradient(#fff6d8, var(--c) 60%, var(--d)); color: #fff;
  font-size: 17px; font-weight: 700; text-shadow: 0 0 3px var(--d), 0 0 2px var(--d);
}
.fl-card.cW .fl-glass { background: conic-gradient(#d8452b 0 25%, #e2a823 0 50%, #3d9a46 0 75%, #2c7cc4 0); }
.fl-card .fl-corner { position: absolute; left: 3px; top: 9px; font-size: 10px; font-style: normal; font-weight: 700; }
.fl-card.playable { opacity: 1; transform: translateY(-6px); box-shadow: 0 0 0 2px #ffe066, 0 4px 10px rgba(255,224,102,.45); }
.fl-card.small { width: 30px; height: 42px; opacity: 1; cursor: default; border-width: 1px; }
.fl-card.small .fl-glass { width: 20px; height: 24px; font-size: 12px; }
.fl-card.small .fl-corner { display: none; }
.fl-colors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; color: #ffd77a; }
.fl-pick { color: #fff; font-weight: 700; border: none; }
.fl-pick.cR { background: #d8452b; } .fl-pick.cB { background: #2c7cc4; } .fl-pick.cG { background: #3d9a46; } .fl-pick.cY { background: #c8901a; }
.fl-seat-badge {
  padding: 3px 9px; border-radius: 10px; background: rgba(20,14,40,.82); color: #f1e6d6; font: 600 12px/1.3 system-ui, sans-serif;
  border: 1px solid rgba(255,214,120,.35); white-space: nowrap; pointer-events: none;
}
.fl-seat-badge.turn { border-color: #ffd77a; color: #fff; box-shadow: 0 0 10px rgba(255,215,122,.6); }
.fl-seat-badge.winner { background: rgba(120,90,10,.92); color: #ffe066; }
.fl-seat-badge.mine { border-color: #ffd77a; }
.fl-last { padding: 3px 10px; border-radius: 10px; background: rgba(0,0,0,.6); color: #ffe9b0; font: 600 12px/1.3 Georgia, serif; white-space: nowrap; pointer-events: none; }
.bj-gold { color: #ffd77a; font-weight: 600; white-space: nowrap; }
.bj-timer { height: 4px; margin: 6px 0 8px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.bj-timer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e9b949, #ff9a5c); transition: width .1s linear; }
.bj-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bj-info { display: flex; flex-direction: column; min-width: 130px; }
.bj-info strong { color: #fff; font-size: 15px; min-height: 1.2em; }
.bj-hands { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.bj-line { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.25); }
.bj-line.active { background: rgba(233,185,73,.18); box-shadow: inset 0 0 0 1px rgba(233,185,73,.6); }
.bj-line b { min-width: 64px; color: #ffd77a; font-weight: 600; font-size: 13px; }
.bj-line em { margin-left: auto; font-style: normal; color: #f1e6d6; font-weight: 600; }
.bj-card {
  display: inline-block; min-width: 34px; padding: 2px 5px; border-radius: 5px; text-align: center;
  background: #fffdf7; color: #111; font: 700 17px/1.2 Georgia, serif; box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.bj-card.red { color: #d0101a; }
.bj-card.back { background: repeating-linear-gradient(45deg, #6a1e3a 0 4px, #8a2e4a 4px 8px); color: #e9b949; }
.bj-info span { font-size: 13px; }
.bj-chips { display: flex; gap: 6px; align-items: center; }
.chip {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; font-weight: 700; font-size: 12px; color: #fff;
  border: 3px dashed rgba(255,255,255,.75); box-shadow: 0 2px 4px rgba(0,0,0,.5); transition: transform .12s;
}
.chip.c5 { background: #c0392b; } .chip.c25 { background: #1e8449; } .chip.c100 { background: #1a1a1a; } .chip.c500 { background: #6c3483; }
.chip.c1000 { background: #d4a017; color: #2a1a00; } .chip.c5000 { background: #a0522d; }
.chip[hidden] { display: none; }
.table-limits {
  margin-left: auto; margin-right: 8px; padding: 2px 9px; border-radius: 10px; white-space: nowrap; cursor: help;
  font-size: 12px; color: #f1e3b0; background: rgba(0,0,0,.35); border: 1px solid rgba(233,185,73,.4);
}
.chip:hover:not(:disabled) { transform: translateY(-3px); border-color: #fff; }
.bj-actions { display: flex; gap: 8px; }
.bj-actions button { min-width: 84px; transition: opacity .15s; }
.bj-shoe { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; flex-wrap: wrap; }
.bj-shoe-meter { position: relative; flex: 1; min-width: 120px; height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; }
.bj-shoe-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #e8dfc6; transition: width .5s ease; }
.bj-shoe-meter i.low { background: #ff9a5c; }
.bj-shoe-meter b { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: #f2c230; border-radius: 1px; }
#bj-leave { margin-left: auto; }

/* ---------- Slot machines ---------- */
#sl-bar, #dg-bar, #ts-bar {
  left: 50%; bottom: 16px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); padding: 10px 14px 8px;
  border: 1px solid rgba(233,185,73,.45); z-index: 3;
}
#dg-bar { width: min(620px, calc(100vw - 32px)); border-color: rgba(122,216,255,.55); }
#fw-bar { width: min(600px, calc(100vw - 32px)); border-color: rgba(255,90,60,.6); background: linear-gradient(rgba(60,6,12,.92), rgba(24,6,12,.94)); }
.fw-bet { display: flex; flex-direction: column; justify-content: center; gap: 2px; margin-right: auto; }
.fw-bet b { font: 800 26px/1 Georgia, serif; color: #ffd77a; }
.fw-bet span { font-size: 12px; }
#fw-bar .sl-row { display: flex; align-items: center; gap: 12px; }
#fw-paytable .sl-paytable-rows { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
#fw-paytable .sl-pay-row canvas { width: 28px; height: 28px; }
#fw-paytable-note .fw-badges { float: left; margin: 2px 8px 2px 0; }
#fw-paytable-note .fw-badges canvas { width: 30px; height: 30px; }
/* While a Fortune Wheel turns, phones' chat (pinned top middle, over the wheel's pointer) steps aside. */
body.touch.fw-wheel :is(#chat, #chat-show) { visibility: hidden; }
#sl-status, #dg-status, #ts-status, #fw-status { font-family: Georgia, serif; font-size: 18px; color: #fff4d6; min-height: 1.3em; }
:is(#sl-status, #dg-status, #ts-status, #fw-status)[data-kind="win"] { color: #ffe066; text-shadow: 0 0 10px rgba(255,200,60,.6); }
:is(#sl-status, #dg-status, #ts-status, #fw-status)[data-kind="lose"] { color: #ffb3a8; }
:is(#sl-status, #dg-status, #ts-status, #fw-status)[data-kind="turn"] { color: #ffd77a; }
#ts-bar { width: min(640px, calc(100vw - 32px)); }
.ts-title { font: 700 18px Georgia, serif; color: #ffd77a; }
#ts-paytable .sl-paytable-rows { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
#ts-paytable .sl-pay-row canvas { width: 28px; height: 28px; }
#ts-paytable .sl-pay-row small { margin-left: 4px; font-size: 11px; }
#ts-paytable .sl-pay-row b { font-size: 12px; }
.sl-row { margin-top: 8px; }
.sl-betbox { display: flex; flex-direction: column; gap: 4px; }
.sl-bets { display: flex; gap: 6px; }
.sl-bet {
  min-width: 42px; height: 34px; padding: 0 8px; border-radius: 17px; font-weight: 700;
  background: rgba(0,0,0,.35); border: 1px solid rgba(233,185,73,.5); color: #ffd77a;
}
.sl-bet.selected { background: #e9b949; color: #1a0f08; border-color: #fff2b0; }
.sl-bet:disabled { opacity: .4; }
#sl-total { font-size: 12px; }
.sl-spin {
  min-width: 150px; height: 52px; border-radius: 26px; font: 800 20px/1 Georgia, serif; letter-spacing: 2px; color: #2a0e06;
  background: linear-gradient(#ffe58a, #e9a020); border: 2px solid #fff2b0; box-shadow: 0 3px 10px rgba(233,160,32,.45);
}
.sl-spin kbd { font-size: 10px; letter-spacing: 0; vertical-align: 3px; background: rgba(0,0,0,.15); border-color: rgba(0,0,0,.25); color: #2a0e06; }
.sl-spin:disabled { filter: grayscale(.6) brightness(.8); }
.sl-paytable { margin-top: 8px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,.3); }
.sl-paytable-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.sl-pay-row { display: flex; align-items: center; justify-content: space-between; }
.sl-pay-row canvas { width: 26px; height: 26px; vertical-align: middle; }
.sl-pay-row b { color: #ffd77a; }
.sl-paytable p { margin: 6px 0 0; font-size: 12px; }
#sl-leave, #dg-leave, #ts-leave, #fw-leave { margin-left: auto; }
#ts-total { font-size: 12px; }
#dg-total { font-size: 12px; }
#dg-paytable .sl-pay-row canvas { width: 30px; height: 30px; }
body.touch :is(#sl-bar, #dg-bar, #ts-bar, #fw-bar) { bottom: 6px; padding: 8px 10px 6px; }
body.touch .sl-spin kbd, body.touch :is(#sl-bar, #dg-bar, #ts-bar, #fw-bar) kbd { display: none; }

/* ---------- Roulette ---------- */
#rl-bar {
  left: 50%; bottom: 16px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); padding: 10px 14px 8px;
  border: 1px solid rgba(233,185,73,.45); z-index: 3;
}
#rl-status { font-family: Georgia, serif; font-size: 18px; color: #fff4d6; }
#rl-status[data-kind="win"] { color: #ffe066; }
#rl-status[data-kind="lose"] { color: #ffb3a8; }
#rl-status[data-kind="push"] { color: #cfe7ff; }
#rl-status[data-kind="turn"] { color: #ffd77a; }
.rl-history { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; min-height: 26px; }
.rl-num {
  min-width: 26px; padding: 2px 4px; border-radius: 13px; text-align: center; font: 700 13px/18px Georgia, serif; color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.rl-num.red { background: #c8202a; } .rl-num.black { background: #16121a; } .rl-num.green { background: #1aa04f; }
.rl-num.latest { transform: scale(1.15); box-shadow: 0 0 8px rgba(255,215,122,.7); }
.chip.selected { outline: 3px solid #ffe066; outline-offset: 2px; transform: translateY(-3px); }
.rl-hover { color: #ffd77a; font-size: 13px; }
.rl-result {
  padding: 4px 14px; border-radius: 16px; font: 700 26px Georgia, serif; color: #fff; pointer-events: none;
  background: rgba(10,10,14,.85); border: 2px solid #e0b040; text-shadow: 0 2px 4px #000;
}
.rl-result[data-color="red"] { background: rgba(170, 20, 30, .9); }
.rl-result[data-color="green"] { background: rgba(20, 130, 60, .9); }

/* Floating totals on the 3D table. */
.bj-badge {
  padding: 2px 8px; border-radius: 10px; background: rgba(10, 30, 18, .82); border: 1px solid rgba(232,194,90,.7);
  color: #fff; font: 600 13px "Segoe UI", sans-serif; white-space: nowrap; pointer-events: none;
}
.bj-badge.mine { border-color: #ffd77a; box-shadow: 0 0 8px rgba(255,215,122,.5); }
.bj-badge.active { outline: 2px solid #ffe066; }
.bj-badge[data-kind="win"] { background: rgba(120, 90, 10, .9); color: #ffe066; }
.bj-badge[data-kind="lose"] { background: rgba(90, 20, 20, .85); color: #ffc2b8; }
.bj-badge[data-kind="push"] { background: rgba(20, 50, 90, .85); color: #d6ecff; }
.bj-badge.shuffle { font-family: Georgia, serif; font-size: 15px; color: #ffd77a; }

/* ---------- Chat toggle ---------- */
#chat { position: absolute; }
.chat-hide {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 22px; padding: 0; line-height: 18px;
  font-size: 18px; border-radius: 6px; background: rgba(0,0,0,.35); z-index: 1;
}
.chat-show {
  left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 18px; background: var(--panel);
  border: 1px solid rgba(233,185,73,.5); color: #ffd77a; font-weight: 600;
}
#chat-unread { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: #e8743b; color: #1a0f08; font-size: 12px; }
#chat-unread[hidden] { display: none; }

/* ---------- Minimap ---------- */
#minimap {
  top: 16px; right: 16px; width: 160px; height: 160px; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 3px #b8862b, 0 4px 14px rgba(0,0,0,.5); background: #0c1a10;
  transition: width .25s ease, height .25s ease, border-radius .25s ease;
}
#minimap.big { transition: none; width: min(calc(100vw - 48px), 1200px); height: min(calc(100vh - 48px), 860px); border-radius: 14px; top: 50%; right: 50%; transform: translate(50%, -50%); z-index: 6; }

/* ---------- Phones and tablets ---------- */
#game-screen { touch-action: none; }
/* The loading screen between choosing a character and seeing them in the world. */
#loading-screen { position: fixed; inset: 0; z-index: 50; transition: opacity .45s ease; } /* (the whole screen, notch too) */
#loading-screen.done { opacity: 0; pointer-events: none; }
.loading-box { width: min(360px, 100%); text-align: center; }
.loading-name { margin: 8px 0 22px; color: var(--muted); font-family: Georgia, serif; font-size: 18px; }
.loading-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); border: 1px solid var(--border); overflow: hidden; }
#loading-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--ember-hi)); transition: width .35s ease; }
.loading-step { margin-top: 12px; color: var(--muted); font-size: 14px; min-height: 1.3em; }
#interact-prompt { cursor: pointer; }
#touch-controls { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#joystick {
  position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: max(28px, env(safe-area-inset-bottom));
  width: 136px; height: 136px; border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle, rgba(0,0,0,.15), rgba(0,0,0,.35)); border: 2px solid rgba(255,255,255,.35);
}
#joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe7a8, #e0a83a); box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.touch-btn {
  position: absolute; right: max(28px, env(safe-area-inset-right)); bottom: max(44px, env(safe-area-inset-bottom));
  width: 78px; height: 78px; padding: 0; border-radius: 50%; pointer-events: auto; touch-action: manipulation;
  background: rgba(0,0,0,.4); color: #fff; border: 2px solid rgba(255,255,255,.45); font-weight: 700; font-size: 15px;
}
body.touch button { touch-action: manipulation; }
body.touch #hud-help { display: none; }
body.touch #chat { top: 84px; bottom: auto; left: 10px; width: min(300px, 44vw); padding: 6px; }
body.touch #chat-log { height: 62px; margin-top: 20px; font-size: 12px; }
body.touch .chat-show { top: 84px; bottom: auto; left: 10px; }
body.touch #minimap { top: 10px; right: 10px; width: 108px; height: 108px; }
body.touch #hud-menu { top: 10px; right: 128px; }
body.touch #minimap.big { width: calc(100vw - 16px); height: calc(100vh - 16px); top: 50%; right: 50%; border-radius: 12px; }
body.touch #interact-prompt { bottom: 190px; padding: 12px 20px; font-size: 18px; border-width: 2px; }
body.touch #hud-player { padding: 6px 10px; }
/* Narrow screens: only the FPS fits between the top panels. Tapping it opens the (invisible) quality menu. */
@media (max-width: 560px) {
  #hud-perf { top: 12px; font-size: 11px; padding: 5px 8px; gap: 0; }
  #hud-perf::after { content: ' ▾'; color: #b9a98f; margin-left: 3px; }
  #hud-fps { min-width: 0; }
  #gfx-quality { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
}
body.touch #bj-bar, body.touch #rl-bar, body.touch #ph-bar { bottom: 6px; padding: 8px 10px 6px; }
body.touch .bj-actions button { min-width: 64px; padding: 10px 12px; }
body.touch .chip { width: 44px; height: 44px; }
@media (max-height: 480px) {
  /* The bottom row keeps its buttons (Stand up / Leave, the paytable), but not the shoe meter and its text. */
  body.touch .bj-shoe { margin-top: 4px; gap: 8px; }
  body.touch .bj-shoe :is(.bj-shoe-meter, #bj-shoe-text, #rl-hover) { display: none; }
  body.touch #bj-bar .bj-shoe > span.muted:first-child { display: none; } /* ("Shoe", with the meter gone) */
}
/* Roulette on a phone held sideways: chips and buttons share one row, so the layout gets more of the screen. */
@media (orientation: landscape) and (max-height: 500px) {
  body.touch #rl-bar .bj-row { flex-wrap: nowrap; gap: 8px; }
  body.touch #rl-bar .bj-chips { width: auto; flex: none; flex-wrap: nowrap; gap: 5px; }
  body.touch #rl-bar .chip { width: 40px; height: 40px; }
  body.touch #rl-bar .bj-actions { width: auto; flex: 1; gap: 5px; }
  body.touch #rl-bar .bj-actions button { min-width: 0; min-height: 40px; padding: 6px 4px; }
  body.touch #rl-bar .bj-top { flex-wrap: nowrap; }
  body.touch #rl-bar .bj-timer { margin: 4px 0 6px; }
}
/* Phones: leaving a table is a proper button, not a small link. */
body.touch .bj-shoe button[id$="-leave"] {
  min-height: 36px; padding: 0 16px; border-radius: 10px; font-size: 13px; text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(233, 185, 73, .5); color: #f3e7d3;
}
@media (max-height: 480px) {
  body.touch #rl-history { display: none; }
  body.touch .bj-hands { margin-bottom: 4px; }
  body.touch .bj-line { padding: 1px 6px; }
}

.overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0,0,0,.55); }
.overlay p { margin: 0; text-align: center; }

/* ---------- Inventory (I) ---------- */
#inv-window {
  top: 56px; left: 200px; width: min(372px, calc(100vw - 32px)); max-height: calc(100vh - 140px); overflow-y: auto; z-index: 5;
  border: 1px solid rgba(233,185,73,.45); background: rgba(24, 16, 12, .97);
}
@media (max-width: 620px) { #inv-window { left: 16px; top: 120px; } }
.inv-equip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.inv-bag { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.inv-slot {
  position: relative; aspect-ratio: 1; border-radius: 8px; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 24px; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none; /* (an iPhone's press and hold opens our menu, not its own) */
}
.inv-slot.empty { cursor: default; color: rgba(255,255,255,.18); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.inv-slot.selected { outline: 2px solid #ffd77a; outline-offset: 1px; }
.inv-slot.unusable::after { content: ''; position: absolute; inset: 0; border-radius: 6px; background: rgba(160, 20, 20, .35); }
.inv-slot svg { width: 70%; height: 70%; filter: drop-shadow(0 1px 1px #000); }
.inv-slot .lv { position: absolute; right: 3px; bottom: 1px; font-size: 9px; color: #f1e6d6; text-shadow: 0 1px 2px #000; }
.r0 { --rc: #d8d8d8; } .r1 { --rc: #3ad04a; } .r2 { --rc: #3a8aff; } .r3 { --rc: #b04aff; } .r4 { --rc: #ff3a2a; }
.inv-slot.r0, .inv-slot.r1, .inv-slot.r2, .inv-slot.r3, .inv-slot.r4 { border-color: var(--rc); box-shadow: inset 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent); }
.rname { color: var(--rc); font-weight: 700; }
.inv-detail { margin-top: 10px; min-height: 20px; }
.inv-detail .inv-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.inv-detail button.danger { background: #6a1f1f; }
.inv-merchant { margin-bottom: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(233,185,73,.15); font-size: 13px; }
.inv-hint { font-size: 11px; margin: 8px 0 0; }
.inv-tip {
  position: fixed; z-index: 20; pointer-events: none; width: 240px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  background: rgba(14, 10, 8, .97); border: 1px solid var(--rc, #888); box-shadow: 0 6px 18px rgba(0,0,0,.6);
}
.inv-tip .rname { font-size: 14px; }
.inv-tip .muted { font-size: 11.5px; }
.inv-tip .stat { display: flex; justify-content: space-between; }
.inv-tip .up { color: #8fe08a; } .inv-tip .down { color: #ff9a7a; } .inv-tip .bad { color: #ff7a6a; }
#inv-badge { margin-left: 5px; padding: 0 6px; border-radius: 9px; background: #3a8aff; color: #fff; font-weight: 700; }
/* Right-click menu on a bag slot, and the "drop it?" question in the detail panel. */
.inv-menu {
  position: fixed; z-index: 30; min-width: 150px; padding: 4px; border-radius: 8px; display: flex; flex-direction: column;
  background: rgba(20, 14, 10, .98); border: 1px solid rgba(233,185,73,.45); box-shadow: 0 6px 18px rgba(0,0,0,.6);
}
.inv-menu button { background: none; border: 0; text-align: left; padding: 7px 10px; border-radius: 5px; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.inv-menu button:hover, .inv-menu button:focus-visible { background: rgba(233,185,73,.18); }
body.touch .inv-menu button { padding: 11px 14px; font-size: 15px; }
.inv-drop { padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid var(--rc, rgba(233,185,73,.45)); font-size: 13px; }
.inv-drop-qty { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.inv-drop-qty input[type=range] { flex: 1; }
.inv-drop-qty input[type=number] { width: 56px; }

/* ---------- Quests ---------- */
#quest-dialog {
  top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; z-index: 6;
  border: 1px solid rgba(233,185,73,.55); background: rgba(24, 16, 12, .97);
}
.quest { padding: 8px 10px; margin-top: 8px; border-radius: 8px; background: rgba(0,0,0,.28); }
.quest h4 { margin: 0 0 4px; font: 700 15px Georgia, serif; color: #ffd77a; display: flex; justify-content: space-between; gap: 8px; }
.quest h4 small { font: 600 11px "Segoe UI", sans-serif; color: #b9a98f; }
.quest p { margin: 0 0 6px; font-size: 13px; color: #e9dfcf; }
.quest .reward { font-size: 12px; color: #cfc2ad; }
.quest .row { justify-content: flex-end; gap: 8px; margin-top: 6px; }
.quest.done { opacity: .55; }
#quest-tracker {
  top: 192px; right: 16px; width: 210px; font-size: 12.5px; text-align: right; pointer-events: none;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.8);
}
#quest-tracker b { display: block; color: #ffd77a; font-family: Georgia, serif; font-size: 13.5px; margin-top: 6px; }
#quest-tracker .complete { color: #8fe08a; }
body.touch #quest-tracker { top: 128px; width: 150px; font-size: 11px; }
.npc-marker { font: 900 30px Georgia, serif; color: #ffd23a; text-shadow: 0 0 4px #000, 0 2px 3px #000, 0 0 14px rgba(255,200,40,.8); pointer-events: none; }
.npc-marker.active { color: #b8b8b8; text-shadow: 0 0 4px #000, 0 2px 3px #000; }
.drop-item { font: 600 12px "Segoe UI", sans-serif; color: var(--rc); text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; pointer-events: none; }
.stats-value .gear { color: #8ab8ff; font-size: 13px; }
.inv-detail .stat { display: flex; justify-content: space-between; font-size: 13px; }
.inv-detail .muted { font-size: 12px; }
.inv-detail .up { color: #8fe08a; } .inv-detail .down { color: #ff9a7a; } .inv-detail .bad { color: #ff7a6a; }
/* NPC names: green serif italics with the role underneath, unlike players' plain white names. */
.nameplate.npc {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; color: #8fe58a;
  background: rgba(10, 30, 12, .55); border: 1px solid rgba(143, 229, 138, .35);
}
.nameplate.npc .lvl { margin: 0; font-size: 10.5px; font-weight: normal; font-style: normal; color: #e6d9b8; letter-spacing: .02em; }
/* Tracker entries can be hovered (details) and clicked (quest log); the gaps between them stay click-through. */
#quest-tracker .qt-item { pointer-events: auto; cursor: help; padding: 2px 4px; border-radius: 6px; }
#quest-tracker .qt-item:hover { background: rgba(0, 0, 0, .45); }
#quest-tracker .qt-hint { font-size: 10.5px; color: #cfc2ad; margin-top: 4px; opacity: .8; }
.quest-tip { --rc: #ffd77a; width: 260px; }
.quest-tip p { margin: 6px 0; color: #e9dfcf; }

/* ---------- Character creator ---------- */
#select-screen .card.wide { width: min(820px, 100%); }
.creator { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.creator-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; position: sticky; top: 0; }
#creator-preview {
  width: 300px; height: 380px; border-radius: 14px; cursor: grab; touch-action: none;
  background: radial-gradient(ellipse at 50% 35%, #4a3a5a 0%, #2a2030 55%, #18121a 100%); border: 1px solid var(--border);
}
#creator-preview:active { cursor: grabbing; }
.creator-form { display: flex; flex-direction: column; gap: 12px; }
.creator-basics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.creator-basics label { margin: 0; }
.pick > span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; }
.pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch-pick { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); box-shadow: inset 0 -3px 6px rgba(0,0,0,.25); }
.swatch-pick.selected { border-color: #ffd77a; box-shadow: 0 0 0 2px rgba(255,215,122,.45), inset 0 -3px 6px rgba(0,0,0,.25); }
.style-pick { padding: 6px 10px; font-size: 13px; border-radius: 16px; }
.style-pick.selected { background: var(--ember); color: #1a0f08; border-color: var(--ember); font-weight: 700; }
.creator-actions { justify-content: flex-end; gap: 12px; }
@media (max-width: 700px) {
  .creator { grid-template-columns: 1fr; }
  .creator-stage { position: static; }
  #creator-preview { width: 240px; height: 300px; }
  .creator-basics { grid-template-columns: 1fr 1fr; }
}

/* ---------- Online player list (Tab) ---------- */
.online-link { padding: 0; color: inherit; text-decoration: none; font-size: 14px; }
.online-link:hover { color: #ffd77a; }
.online-link kbd { font-size: 9px; margin-left: 2px; }
#player-list {
  top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; z-index: 6;
  border: 1px solid rgba(233,185,73,.55); background: rgba(24, 16, 12, .97);
}
.pl-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.pl-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pl-table td { padding: 6px 8px; border-bottom: 1px dashed rgba(255,255,255,.07); vertical-align: top; }
.pl-table tr.me td { background: rgba(233,185,73,.1); }
.pl-table tr.me .pl-name::after { content: ' (you)'; color: var(--muted); font-weight: normal; }
.pl-name { font-weight: 700; }
.pl-level { font-weight: 700; color: #ffd77a; text-align: center; }
.pl-class.Warrior { color: #f0a868; } .pl-class.Mage { color: #8ac4ff; } .pl-class.Ranger { color: #8fe08a; } .pl-class.Cleric { color: #ffe08a; }

/* Buffs (blessings, War Cry) on the player and target frames: an icon each, its time left as a shrinking sweep and
   a countdown, and a shield's remaining strength (js/support.js). */
.buff-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.buff-row[hidden] { display: none; }
.buff-icon { position: relative; width: 30px; height: 30px; border-radius: 6px; overflow: hidden; background: rgba(10,8,20,.75); border: 1.5px solid var(--buff, #ffe08a); box-shadow: 0 0 6px color-mix(in srgb, var(--buff, #ffe08a) 55%, transparent); cursor: help; }
.buff-icon .buff-glyph { position: absolute; inset: 2px; }
.buff-icon .buff-glyph svg { width: 100%; height: 100%; display: block; }
/* The dark wedge grows as the buff runs down (--left: the share of its time left). */
.buff-icon .buff-sweep { position: absolute; inset: 0; background: conic-gradient(transparent calc(var(--left, 1) * 360deg), rgba(0,0,0,.6) 0); pointer-events: none; }
.buff-icon .buff-time { position: absolute; right: 1px; bottom: 0; font-size: 10px; line-height: 1; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.buff-icon .buff-abs { position: absolute; left: 1px; top: 0; font-size: 9px; line-height: 1.1; font-style: normal; font-weight: 700; color: #fff0b0; text-shadow: 0 1px 2px #000; }
.buff-icon.ending { animation: buff-ending .5s ease-in-out infinite alternate; }
@keyframes buff-ending { to { opacity: .45; } }
#target-frame.friendly-player { border-color: rgba(122,240,160,.7); }
#target-frame.friendly-player #target-name::before { content: '✚ '; color: #9cf0a8; }
.pl-doing { display: block; font-size: 11.5px; color: #e9b949; }
.pl-hint { font-size: 11px; margin: 8px 0 0; text-align: right; }

/* ---------- Shops ---------- */
#shop-window {
  top: 56px; left: 584px; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 140px); overflow-y: auto; z-index: 5; /* beside the inventory */
  border: 1px solid rgba(233,185,73,.45); background: rgba(24, 16, 12, .97);
}
@media (max-width: 1000px) { #shop-window { left: auto; right: 16px; top: 120px; } }
.shop-sub { font-size: 13px; margin-bottom: 8px; }
.shop-sub b { color: #ffd77a; }
.shop-items { display: flex; flex-direction: column; gap: 6px; }
.shop-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.28); }
.shop-item .inv-slot { width: 44px; cursor: default; }
.shop-item .info b { display: block; font-size: 14px; }
.shop-item .info small { display: block; font-size: 11.5px; color: #cfc2ad; }
.shop-item .info .bad { color: #ff8a7a; }
.shop-item .buy { min-width: 88px; }
.shop-item .buy .coin { margin-right: 4px; }
.shop-tabs { position: sticky; top: -10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 6px 0; background: rgba(24, 16, 12, .97); border-bottom: 1px solid rgba(233,185,73,.25); }
.shop-tabs button { padding: 4px 10px; font-size: 12.5px; border-radius: 14px; border: 1px solid rgba(233,185,73,.3); background: rgba(0,0,0,.3); color: #e8dcc6; cursor: pointer; }
.shop-tabs button:hover { border-color: rgba(233,185,73,.7); }
.shop-tabs button.active { background: linear-gradient(#e9b949, #b9832a); color: #1a0f08; border-color: #ffd77a; font-weight: 600; }
.shop-tabs .n { margin-left: 5px; font-size: 11px; opacity: .7; }
.shop-filter { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: -2px 0 8px; cursor: pointer; }
.shop-filter[hidden] { display: none; }
.shop-empty { font-size: 13px; padding: 8px 2px; }
.shop-group { margin: 8px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.npc-marker.shop { font: 700 12px 'Segoe UI', sans-serif; color: #1a0f08; background: #ffd23a; padding: 1px 7px; border-radius: 8px; text-shadow: none; box-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ---------- Friends and private messages (F) ---------- */
#social-window {
  top: 56px; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); z-index: 6;
  border: 1px solid rgba(233,185,73,.45); background: rgba(24, 16, 12, .97);
}
#social-badge { margin-left: 5px; padding: 0 6px; border-radius: 9px; background: #c86ae8; color: #fff; font-weight: 700; }
.social { display: grid; grid-template-columns: 220px 1fr; gap: 12px; height: min(420px, calc(100vh - 220px)); }
.social-side { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.friend-add { display: flex; gap: 6px; }
.friend-add input { margin: 0; flex: 1; min-width: 0; }
.friend-req { padding: 6px 8px; border-radius: 8px; background: rgba(200,106,232,.15); font-size: 13px; }
.friend-req .row { gap: 6px; margin-top: 4px; }
.friend-list .group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 4px 0 2px; }
.friend { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.25); margin-bottom: 4px; border: 1px solid transparent; }
.friend.selected { border-color: #ffd77a; }
.friend .dot { width: 9px; height: 9px; border-radius: 50%; background: #5a5048; }
.friend.online .dot { background: #5ee06a; box-shadow: 0 0 6px #5ee06a; }
.friend b { display: block; font-size: 14px; }
.friend small { display: block; font-size: 11px; color: var(--muted); }
.friend .unread { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #c86ae8; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.friend .remove { font-size: 11px; padding: 0 4px; opacity: .6; }
.social-chat { display: flex; flex-direction: column; min-width: 0; }
.convo-title { padding: 2px 0 6px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.convo-title b { color: #f3eaff; }
.convo-log { flex: 1; overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column; gap: 4px; }
.pm-bubble { max-width: 80%; padding: 5px 9px; border-radius: 10px; font-size: 14px; line-height: 1.35; background: rgba(255,255,255,.07); align-self: flex-start; word-wrap: break-word; }
.pm-bubble.self { align-self: flex-end; background: rgba(200,106,232,.28); }
.pm-bubble time { display: block; font-size: 10px; color: var(--muted); }
.convo-form { display: flex; gap: 6px; margin-top: 6px; }
.convo-form input { margin: 0; flex: 1; }
#social-error { min-height: 0; margin: 6px 0 0; font-size: 13px; }
#chat-log .pm { color: #e2a8ff; }
.pl-actions { white-space: nowrap; text-align: right; }
.pl-actions button { font-size: 11.5px; padding: 2px 7px; margin-left: 4px; }
@media (max-width: 620px) { .social { grid-template-columns: 1fr; height: auto; } .convo-log { height: 200px; flex: none; } }
.sl-jackpot { margin-left: auto; margin-right: 12px; font: 800 14px Georgia, serif; color: #ffd23a; text-shadow: 0 0 8px rgba(255,190,40,.7); letter-spacing: .03em; }
#zone-banner.jackpot { color: #ffe680; font-size: clamp(30px, 7vw, 64px); text-shadow: 0 2px 6px #000, 0 0 40px rgba(255,200,40,1); }

/* ---------- Trading with another player ---------- */
#trade-window {
  top: 56px; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); z-index: 8;
  max-height: calc(100vh - 72px); display: flex; flex-direction: column;
  border: 1px solid rgba(233,185,73,.6); background: rgba(24, 16, 12, .97);
}
.trade-body { overflow-y: auto; min-height: 0; flex: 1; }
.trade-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-col { padding: 8px; border-radius: 10px; background: rgba(0,0,0,.28); border: 2px solid rgba(255,255,255,.06); transition: border-color .2s, box-shadow .2s; }
.trade-col.ready { border-color: #5ee06a; box-shadow: 0 0 12px rgba(94,224,106,.35); }
.trade-col.flash { animation: trade-flash .9s ease-out; }
@keyframes trade-flash { 0% { box-shadow: 0 0 0 3px #ffd77a; } 100% { box-shadow: none; } }
.trade-col-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 2px 0 6px; display: flex; gap: 6px; align-items: baseline; }
.trade-col-head .muted { text-transform: none; letter-spacing: 0; }
.trade-ok { display: none; margin-left: auto; color: #5ee06a; font-weight: 700; text-transform: none; letter-spacing: 0; }
.trade-col.ready .trade-ok { display: inline; }
.trade-list { display: flex; flex-direction: column; gap: 4px; min-height: 40px; }
.trade-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); max-height: 210px; overflow-y: auto; }
.trade-item { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; width: 100%; padding: 4px 6px; text-align: left; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--rc, #555); box-shadow: inset 0 0 10px color-mix(in srgb, var(--rc, #555) 25%, transparent); }
.trade-item:disabled { opacity: .45; }
.trade-item .ti-icon svg { width: 30px; height: 30px; display: block; }
.trade-item b { display: block; font-size: 13px; color: var(--rc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-item small { display: block; font-size: 11px; color: var(--muted); }
.trade-empty { font-size: 12px; margin: 4px 2px; }
.trade-gold { margin-top: 6px; font-weight: 700; color: #ffd23a; display: flex; align-items: center; gap: 5px; }
.trade-gold-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; font-size: 13px; }
.trade-gold-row input { margin: 0; width: 120px; }
.trade-status { font-size: 13px; margin: 8px 0 4px; min-height: 18px; }
.trade-actions { justify-content: flex-end; gap: 8px; }
.trade-actions button { min-width: 96px; }
.trade-request { top: 120px; left: 50%; transform: translateX(-50%); z-index: 9; padding: 10px 14px; border: 1px solid #ffd77a; background: rgba(24,16,12,.97); font-size: 14px; }
.trade-request .row { gap: 8px; margin-top: 8px; justify-content: flex-end; }
.target-actions { display: flex; gap: 6px; margin-top: 6px; }
.target-actions button { font-size: 12px; padding: 3px 10px; }
@media (max-width: 560px) {
  .trade-offers { grid-template-columns: 1fr; }
  #trade-window { top: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .trade-bag { grid-template-columns: 1fr; max-height: 160px; }
}
@media (max-height: 500px) { #trade-window { top: 6px; max-height: calc(100vh - 12px); } .trade-bag { max-height: 110px; } }

/* ---------- Loot card (phones: tap something on the ground) ---------- */
.loot-card {
  left: 50%; bottom: 12px; transform: translateX(-50%); width: min(520px, calc(100vw - 16px)); z-index: 8;
  max-height: calc(100vh - 24px); overflow-y: auto; border: 1px solid rgba(233,185,73,.6); background: rgba(24, 16, 12, .97); font-size: 13px;
}
.loot-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.loot-side { padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.28); min-width: 0; }
.loot-side-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.loot-tip .rname { color: var(--rc); font-weight: 700; font-size: 14px; }
.loot-tip .stat { display: flex; justify-content: space-between; gap: 6px; }
.loot-tip .up { color: #6be36b; } .loot-tip .down { color: #ff7a6a; } .loot-tip .bad { color: #ff7a6a; }
.loot-icon { float: right; width: 34px; height: 34px; margin-left: 6px; font-size: 24px; text-align: center; }
.loot-icon svg { width: 34px; height: 34px; }
.loot-card-actions { justify-content: space-between; align-items: center; gap: 8px; }
.loot-card-actions button { min-height: 40px; padding: 0 16px; }
@media (max-width: 380px) { .loot-card-body { grid-template-columns: 1fr; } }
@media (max-height: 500px) { .loot-card { bottom: 6px; width: min(640px, calc(100vw - 220px)); } }

/* ---------- The Glimmer Line ---------- */
.station-label { pointer-events: none; text-align: center; padding: 3px 10px; border-radius: 6px; background: rgba(31,90,58,.88); border: 1px solid #e0b040;
  color: #fff6dc; font: 700 13px Georgia, serif; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.station-label small { display: block; font: 600 10.5px "Segoe UI", sans-serif; color: #ffd77a; }
#interact-prompt.info kbd { display: none; } /* (when the next train's due: nothing to press yet) */

/* ---------- Reconnecting banner ---------- */
.conn-banner { top: 10px; left: 50%; transform: translateX(-50%); z-index: 20; padding: 6px 16px; border-radius: 16px;
  background: rgba(20,14,10,.9); border: 1px solid #ffd77a; color: #ffe6a8; font: 600 13px "Segoe UI", sans-serif; pointer-events: none; }

/* ---------- Daily login reward ---------- */
#daily-window {
  top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); z-index: 7;
  border: 1px solid rgba(233,185,73,.6); background: rgba(24, 16, 12, .97);
}
#daily-badge { margin-left: 5px; padding: 0 6px; border-radius: 9px; background: #e8743b; color: #1a0f08; font-weight: 800; }
.daily-sub { font-size: 13px; margin: 2px 0 10px; }
.daily-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.daily-day { border-radius: 10px; padding: 8px 4px; text-align: center; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.daily-day b { display: block; font: 700 13px Georgia, serif; color: #cfc2ad; margin-bottom: 4px; }
.daily-day .gold { color: #ffd77a; font-weight: 700; }
.daily-day .item { display: block; font-size: 10.5px; margin-top: 3px; color: #8ab8ff; }
.daily-day.past { opacity: .5; }
.daily-day.past b::after { content: ' ✓'; color: #8fe08a; }
.daily-day.today { border-color: #ffd77a; box-shadow: 0 0 0 2px rgba(255,215,122,.35), inset 0 0 18px rgba(255,200,80,.2); }
.daily-day.today b { color: #ffd77a; }
.daily-actions { justify-content: space-between; align-items: center; margin-top: 12px; gap: 10px; }
@media (max-width: 520px) { .daily-days { grid-template-columns: repeat(4, 1fr); } }

/* Item links in chat */
#chat-log .item-link { cursor: help; font-weight: 700; color: var(--rc); pointer-events: auto; }
#chat-log .item-link:hover { text-decoration: underline; }
/* Hover a ground item's label to see the item; click it to pick it up. */
.ground-item-label { font: 600 12px "Segoe UI", sans-serif; color: var(--rc); text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; pointer-events: auto; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ground-item-label:hover, .ground-item-label.hover { background: rgba(10,8,16,.6); }
.ground-item-label small { display: block; font-size: 10px; color: #cfc2ad; font-weight: normal; }
/* What it is at a glance: its icon, then the name over its kind ("Rare sword · Warrior"). */
.ground-item-label { background: rgba(10,8,16,.38); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); text-align: left; }
.ground-item-label .gi-main { display: flex; align-items: center; gap: 5px; }
.ground-item-label .gi-icon { display: inline-flex; width: 22px; height: 22px; flex: none; align-items: center; justify-content: center; border-radius: 5px; background: rgba(0,0,0,.45); }
.ground-item-label .gi-icon svg { width: 20px; height: 20px; }
.ground-item-label .gi-glyph { font-size: 15px; }
.ground-item-label .gi-kind { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: #f0e6d2; }
/* Windows move by their title bar. */
.drag-handle { cursor: move; user-select: none; touch-action: none; }
.drag-handle button { cursor: pointer; }
.dragging { box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.new-char { margin-left: auto; }
.creator-view { align-self: center; }
.creator-view-name { font: 700 28px Georgia, serif; color: #ffd77a; }
.creator-view p { font-size: 13px; margin-top: 14px; }
/* Character screen: room between the buttons and the 3D preview below them. */
.char-actions { margin: 6px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
/* No character picked (nothing shown below): no divider and no gap under the buttons. */
.card:has(#creator-panel[hidden]) .char-actions { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
#creator-title { margin-top: 0; }
body.touch #action-bar { left: auto; right: 12px; transform: none; }

/* ---------- Patch notes ---------- */
.patch-window { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(8, 5, 4, .55); }
.patch-panel { width: min(560px, 100%); max-height: min(78vh, 720px); overflow-y: auto; border: 1px solid rgba(233,185,73,.6); background: rgba(24, 16, 12, .98); padding: 18px 20px; }
.patch-panel #patch-title { font: 700 22px Georgia, serif; color: #ffd77a; }
.patch-entry { margin-top: 14px; }
.patch-entry h4 { margin: 0; font: 700 16px Georgia, serif; color: #f3e6cc; }
.patch-entry .date { font-size: 12px; color: var(--muted); }
.patch-entry ul { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.45; color: #e9dfcf; }
.patch-entry.older h4 { font-size: 14px; color: #cfc2ad; }
.patch-entry.older ul { font-size: 13px; color: #cfc2ad; }
/* Each update's new features, then its bug fixes, under their own headings. */
.patch-section { margin-top: 8px; }
.patch-section h5 { margin: 0; display: flex; align-items: center; gap: 6px; font: 700 12px "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.patch-section h5::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.patch-section .count { padding: 0 6px; border-radius: 8px; font-size: 10.5px; letter-spacing: 0; background: rgba(255,255,255,.1); color: #e9dfcf; }
.patch-section.features h5 { color: #ffd77a; }
.patch-section.fixes h5 { color: #7fd8ff; }
.patch-section ul { margin-top: 4px; }
.patch-older-toggle { margin-top: 12px; font-size: 13px; }
.patch-actions { justify-content: flex-end; margin-top: 14px; }
/* Private messages: the conversation scrolls inside the window instead of running off the bottom. (Flex and grid
   children won't shrink below their content unless min-height is 0.) */
.social { grid-template-rows: minmax(0, 1fr); }
.social-side, .social-chat { min-height: 0; }
.convo-log { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }

/* ==========================================================================
   Touch layout (phones and tablets). Comes last so it wins over the desktop rules above.
   Portrait phone:   player frame, then chat, down the left; minimap, menu, FPS and quests down the right;
                     joystick bottom left; skills in two columns above Jump, bottom right; target frame above
                     the joystick.
   Landscape phone:  chat beside the player frame along the top; skills in a row left of Jump.
   ========================================================================== */
body.touch .hud kbd, body.touch .ability-key { display: none; } /* no keyboard on a phone */

/* Login / character screens: the card may shrink (a grid track would otherwise grow to the big logo and push the
   card off a phone's right edge). */
.menu { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.logo { font-size: clamp(30px, 10.5vw, 44px); }
@media (max-width: 420px) { .card { padding: 22px 18px; } }

/* Player frame: compact, with its four buttons in a 2 x 2 grid of proper tap targets. */
body.touch #hud-player {
  top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); width: 176px; padding: 6px 8px 8px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px;
}
body.touch #hud-player > :not(button) { grid-column: 1 / -1; }
body.touch .hud-name { font-size: 15px; line-height: 1.25; }
body.touch #hud-class { font-size: 11.5px; }
body.touch .hp-bar.me, body.touch .xp-bar { width: 100%; }
body.touch .hud-gold { margin-top: 3px; font-size: 12.5px; }
body.touch #hud-player .stats-button { margin: 5px 0 0; min-height: 34px; padding: 0 4px; font-size: 12.5px; }

/* Top right: minimap in the corner, a round menu button beside it, the FPS pill under it. */
body.touch #minimap { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 96px; height: 96px; }
body.touch #minimap.big { width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); top: 50%; right: 50%; border-radius: 12px; touch-action: none; } /* (pinch zooms the map, not the page) */
body.touch #hud-menu { top: max(8px, env(safe-area-inset-top)); right: calc(max(8px, env(safe-area-inset-right)) + 106px); }
body.touch .menu-button { width: 44px; height: 44px; padding: 0; font-size: 0; border-radius: 50%; }
body.touch .menu-button::before { content: '☰'; font-size: 22px; line-height: 44px; }
body.touch .menu-panel { top: 50px; max-height: calc(100vh - 80px); overflow-y: auto; }
body.touch .menu-panel button { min-height: 42px; font-size: 15px; }
body.touch #hud-perf {
  top: calc(max(8px, env(safe-area-inset-top)) + 104px); left: auto; right: max(8px, env(safe-area-inset-right)); transform: none;
  font-size: 11px; padding: 5px 8px; gap: 0;
}
/* Compact: just the FPS; tapping it opens the (invisible, full-size) quality picker. */
body.touch #hud-perf::after { content: ' ▾'; color: #b9a98f; margin-left: 3px; }
body.touch #hud-fps { min-width: 0; }
body.touch #gfx-quality { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }

/* Chat under the player frame, clear of the quest list on the right. */
body.touch #chat, body.touch .chat-show { top: calc(max(8px, env(safe-area-inset-top)) + 192px); bottom: auto; left: max(8px, env(safe-area-inset-left)); }
body.touch #chat { width: min(240px, calc(100vw - 172px)); padding: 6px; }
body.touch #chat-log { height: 76px; font-size: 12.5px; }
body.touch #chat-input { min-height: 38px; font-size: 16px; }
body.touch .chat-hide { width: 34px; height: 26px; }

body.touch #quest-tracker {
  top: calc(max(8px, env(safe-area-inset-top)) + 140px); right: max(8px, env(safe-area-inset-right)); width: 150px; font-size: 11.5px;
  max-height: calc(100% - 140px - 400px); overflow: hidden;
}
body.touch #quest-tracker .qt-hint { display: none; }

/* Skills: two columns stacked above the Jump button, skill 1 nearest your thumb. */
body.touch #action-bar {
  left: auto; right: max(10px, env(safe-area-inset-right)); bottom: calc(max(44px, env(safe-area-inset-bottom)) + 90px);
  transform: none;
}
body.touch .action-buttons {
  display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; justify-content: flex-start;
  width: 114px; max-width: none; gap: 6px;
}
body.touch .ability { width: 54px; height: 54px; border-radius: 12px; }
body.touch .ability.locked { opacity: .75; }
body.touch .ability.locked::after { font-size: 10.5px; }
/* "Too far" and friends: mid-screen where you'll see them, not squeezed above the skill column. */
body.touch .action-error {
  position: fixed; left: 50%; top: 47%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  text-align: center; font-size: 16px;
}

/* Target frame above the joystick; the interact prompt above that, both clear of the skills. */
body.touch #target-frame {
  top: auto; bottom: calc(max(28px, env(safe-area-inset-bottom)) + 150px); left: max(8px, env(safe-area-inset-left)); transform: none;
  width: min(280px, calc(100vw - 148px)); padding: 8px 10px;
}
body.touch #interact-prompt {
  bottom: calc(max(28px, env(safe-area-inset-bottom)) + 224px); left: max(8px, env(safe-area-inset-left)); transform: none;
  max-width: calc(100vw - 148px); padding: 10px 16px; font-size: 16px; text-align: left;
}

/* Windows on phones: a sheet across the screen that scrolls inside. (!important: dragged windows carry
   inline positions from wider screens.) */
@media (max-width: 700px), (max-height: 500px) {
  body.touch #stats-window, body.touch #inv-window, body.touch #shop-window, body.touch #social-window,
  body.touch #quest-dialog, body.touch #player-list, body.touch #daily-window {
    top: max(8px, env(safe-area-inset-top)) !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    margin: 0 auto !important; transform: none !important; width: min(560px, calc(100vw - 16px)) !important;
    max-height: calc(100% - 16px) !important; overflow-y: auto; overscroll-behavior: contain; z-index: 8;
  }
  body.touch .win-window > .stats-head { position: static; margin: 0 0 6px; padding: 0; background: none; }
  body.touch .stats-head { position: sticky; top: -10px; z-index: 1; margin: -10px -14px 6px; padding: 10px 14px 6px; background: rgba(24, 16, 12, .98); }
  body.touch .stats-head .link { min-width: 40px; min-height: 36px; font-size: 18px; }
  body.touch .stats-buttons button { width: 38px; height: 36px; font-size: 18px; }
  body.touch .social { height: auto; }
  body.touch .pl-table { font-size: 12.5px; }
  body.touch .pl-table th, body.touch .pl-table td { padding: 5px 4px; }
  body.touch .pl-actions { white-space: normal; }
  body.touch .pl-actions button { display: block; width: 100%; min-height: 34px; margin: 0 0 4px; font-size: 12px; }
  body.touch .pl-hint { display: none; }
  body.touch .patch-panel { max-height: calc(100% - 8px); padding: 14px 16px; }
  /* Selling: the shop on the top half, your bags on the bottom half (they used to lie on top of each other). */
  body.touch:has(#shop-window:not([hidden])) #shop-window { max-height: calc(50% - 10px) !important; }
  body.touch:has(#shop-window:not([hidden])) #inv-window { top: calc(50% + 2px) !important; max-height: calc(50% - 10px) !important; }
}

/* Casino bars on phones: full width with wrapping rows. While you're seated the player frame, quest list and
   FPS step aside (the bar shows your gold) and chat shrinks to the top, so the table stays in view above the bar. */
@media (max-width: 700px), (max-height: 500px) {
  body.touch #bj-bar, body.touch #rl-bar, body.touch #sl-bar, body.touch #dg-bar, body.touch #fw-bar, body.touch #ts-bar, body.touch #ph-bar, body.touch #wr-bar, body.touch #fl-bar {
    left: 0; right: 0; margin: 0 auto; transform: none; width: calc(100vw - 16px);
    bottom: max(6px, env(safe-area-inset-bottom)); max-height: 62vh; overflow-y: auto; overscroll-behavior: contain;
  }
  body.touch #bj-status, body.touch #rl-status, body.touch #sl-status, body.touch #dg-status, body.touch #ts-status, body.touch #fw-status { font-size: 16px; }
  body.touch .bj-top { flex-wrap: wrap; gap: 6px; }
  body.touch .bj-row { gap: 8px; }
  body.touch .bj-info { min-width: 0; }
  body.touch .bj-chips { flex-wrap: wrap; width: 100%; }
  body.touch .bj-chips > button:not(.chip) { min-height: 40px; padding: 0 12px; }
  body.touch .bj-actions { width: 100%; gap: 6px; }
  body.touch .bj-actions button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; }
  body.touch .bj-shoe button { min-height: 36px; }
  body.touch .sl-row { flex-wrap: wrap; }
  body.touch .sl-bets { flex-wrap: wrap; }
  body.touch .sl-bet { min-height: 40px; }
  body.touch .sl-spin { flex: 1; min-width: 140px; }
  body.touch:has(#bj-bar:not([hidden]), #rl-bar:not([hidden]), #sl-bar:not([hidden]), #dg-bar:not([hidden]), #fw-bar:not([hidden]), #ts-bar:not([hidden]), #ph-bar:not([hidden]), #wr-bar:not([hidden]), #fl-bar:not([hidden])) :is(#hud-player, #quest-tracker, #hud-perf, #target-frame) { display: none; }
  body.touch:has(#bj-bar:not([hidden]), #rl-bar:not([hidden]), #sl-bar:not([hidden]), #dg-bar:not([hidden]), #fw-bar:not([hidden]), #ts-bar:not([hidden]), #ph-bar:not([hidden]), #wr-bar:not([hidden]), #fl-bar:not([hidden])) :is(#chat, .chat-show) { top: max(8px, env(safe-area-inset-top)); }
  body.touch:has(#bj-bar:not([hidden]), #rl-bar:not([hidden]), #sl-bar:not([hidden]), #dg-bar:not([hidden]), #fw-bar:not([hidden]), #ts-bar:not([hidden]), #ph-bar:not([hidden]), #wr-bar:not([hidden]), #fl-bar:not([hidden])) #chat { width: min(300px, calc(100vw - 172px)); }
  body.touch:has(#bj-bar:not([hidden]), #rl-bar:not([hidden]), #sl-bar:not([hidden]), #dg-bar:not([hidden]), #fw-bar:not([hidden]), #ts-bar:not([hidden]), #ph-bar:not([hidden]), #wr-bar:not([hidden]), #fl-bar:not([hidden])) #chat-log { height: 46px; }
}

/* Landscape phones: short screens. Chat moves up beside the player frame, the quest list under it, the target
   frame under the menu, and the skills into a row to the left of Jump. */
@media (orientation: landscape) and (max-height: 500px) {
  body.touch #chat, body.touch .chat-show { top: max(8px, env(safe-area-inset-top)); left: calc(max(8px, env(safe-area-inset-left)) + 186px); }
  body.touch #chat { width: min(300px, calc(100vw - 186px - 260px)); }
  body.touch #chat-log { height: 64px; }
  body.touch #quest-tracker {
    top: calc(max(8px, env(safe-area-inset-top)) + 146px); right: auto; left: calc(max(8px, env(safe-area-inset-left)) + 186px);
    width: 190px; text-align: left; max-height: calc(100% - 146px - 90px);
  }
  body.touch #action-bar { right: calc(max(28px, env(safe-area-inset-right)) + 88px); bottom: max(20px, env(safe-area-inset-bottom)); }
  body.touch .action-buttons { width: 234px; }
  body.touch .touch-btn { bottom: max(24px, env(safe-area-inset-bottom)); }
  body.touch #target-frame {
    top: calc(max(8px, env(safe-area-inset-top)) + 144px); bottom: auto; left: auto; right: max(8px, env(safe-area-inset-right));
    width: min(220px, calc(100vw - 186px - 240px - 24px));
  }
  body.touch #interact-prompt { bottom: max(20px, env(safe-area-inset-bottom)); left: calc(max(24px, env(safe-area-inset-left)) + 150px); max-width: min(280px, calc(100vw - 600px)); }
  body.touch #joystick { width: 120px; height: 120px; bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Phones: more of the world on screen. A compact player frame (its buttons in one row), the quest list folded to
   a small tab, a lighter chat, and only the skills you can use (locked ones wait in the character sheet).
   ========================================================================== */
/* The quest tab only exists on phones; computers keep the full list. */
#quest-tracker .qt-head { display: none; }

body.touch #hud-player { width: 168px; padding: 5px 7px 6px; grid-template-columns: repeat(4, 1fr); column-gap: 3px; }
body.touch .hud-name { font-size: 13.5px; line-height: 1.2; }
body.touch #hud-class { font-size: 10.5px; }
body.touch .hp-bar.me { margin-top: 4px; height: 12px; }
body.touch .hp-bar.me span { line-height: 12px; font-size: 10px; }
body.touch .xp-bar { margin-top: 3px; height: 10px; }
body.touch .xp-bar span { line-height: 10px; font-size: 8.5px; }
body.touch .hud-gold { margin-top: 2px; font-size: 11.5px; }
body.touch #hud-player .stats-button { margin: 4px 0 0; min-height: 30px; padding: 0; font-size: 10px; border-radius: 8px; letter-spacing: -.02em; overflow: visible; }
/* Their badges (points to spend, new items, messages, a reward waiting) sit on the corner instead of beside the word. */
body.touch #hud-player .stats-button > span[id$="-badge"] {
  position: absolute; top: -6px; right: -4px; margin: 0; padding: 0 4px; min-width: 14px; font-size: 9px; line-height: 14px;
  letter-spacing: 0; pointer-events: none;
}

/* Chat (when open): under the compact frame, see-through, three lines. */
body.touch #chat, body.touch .chat-show { top: calc(max(8px, env(safe-area-inset-top)) + 130px); }
body.touch #chat { width: min(220px, calc(100vw - 184px)); padding: 4px 5px; background: rgba(20, 14, 10, .45); }
body.touch #chat-log { height: 52px; margin-top: 16px; font-size: 11.5px; line-height: 1.3; }
body.touch #chat-input { min-height: 32px; padding: 4px 8px; }
body.touch .chat-hide { width: 30px; height: 22px; }

/* Quests: a tab under the minimap. Folded, it shows how many and the first one's progress on one line. */
body.touch #quest-tracker {
  top: calc(max(8px, env(safe-area-inset-top)) + 134px); right: max(8px, env(safe-area-inset-right)); left: auto;
  width: 158px; max-height: calc(100% - 134px - 330px); overflow: hidden; font-size: 11px; text-align: left;
}
body.touch #quest-tracker .qt-head {
  display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 30px; padding: 4px 9px;
  pointer-events: auto; cursor: pointer; border-radius: 10px; background: rgba(20, 14, 10, .62);
  border: 1px solid rgba(233, 185, 73, .35); font: 700 12px Georgia, serif; color: #ffd77a; text-shadow: none;
}
body.touch #quest-tracker .qt-head i { font-style: normal; color: #cfc2ad; }
body.touch #quest-tracker .qt-head i::after { content: '▾'; }
body.touch #quest-tracker.folded .qt-head i::after { content: '▸'; }
body.touch #quest-tracker .qt-item b { font-size: 12px; margin-top: 4px; }
body.touch #quest-tracker.folded .qt-item ~ .qt-item { display: none; }
body.touch #quest-tracker.folded .qt-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 4px 0; }
body.touch #quest-tracker.folded .qt-item b { display: inline; margin: 0 5px 0 0; font-size: 11.5px; }

/* Skills: only the ones you have, a little smaller. */
body.touch .ability.locked { display: none; }
/* Placing something on the bar (tap a slot): every slot shows, empty ones too, and they glow so you know to tap one. */
body.touch #hotbar.placing .hotbar-slot.empty, body.touch #hotbar.placing .ability.locked { display: block; }
#hotbar.placing .hotbar-slot { animation: slot-pulse 1s ease-in-out infinite; border-color: #ffd77a; }
@keyframes slot-pulse { 50% { box-shadow: 0 0 14px rgba(255,215,122,.85); } }
.hotbar-slot { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* The + under the bar (touch screens): opens the skill book. */
.hotbar-edit { display: none; pointer-events: auto; width: 50px; height: 34px; border-radius: 10px; padding: 0; font-size: 22px; line-height: 1;
  background: rgba(20,14,30,.7); border: 1px dashed rgba(233,185,73,.7); color: #ffd77a; }
body.touch .hotbar-edit { display: block; align-self: flex-end; }
.hotbar-place { top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 21; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px; border-radius: 18px; background: rgba(20,14,10,.94); border: 1px solid #ffd77a; color: #ffe6a8; font: 600 13px "Segoe UI", sans-serif;
  max-width: calc(100vw - 24px); }
.hotbar-place[hidden] { display: none; }
/* Phones: under the player frame and chat (portrait), or along the bottom between the joystick and the bar (sideways). */
body.touch .hotbar-place { top: 31%; }
@media (orientation: landscape) and (max-height: 500px) { body.touch .hotbar-place { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); } }
.hotbar-place button { padding: 5px 12px; font-size: 13px; }
/* The skill book on a phone: big rows to tap. */
body.touch .skill-entry { min-height: 52px; }
body.touch .ability { width: 50px; height: 50px; }
body.touch .action-buttons { width: 106px; }

@media (orientation: landscape) and (max-height: 500px) {
  /* Chat beside the frame along the top; quests under the frame on the left; skills in a row by Jump. */
  body.touch #chat, body.touch .chat-show { top: max(8px, env(safe-area-inset-top)); left: calc(max(8px, env(safe-area-inset-left)) + 176px); }
  body.touch #chat { width: min(260px, calc(100vw - 176px - 240px)); }
  body.touch #chat-log { height: 44px; }
  body.touch #quest-tracker {
    top: calc(max(8px, env(safe-area-inset-top)) + 130px); left: max(8px, env(safe-area-inset-left)); right: auto;
    width: 168px; max-height: calc(100% - 130px - 150px);
  }
  body.touch .action-buttons { width: 218px; }
}