: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; }
/* No highlighting text by accident: a click and drag (turning the camera, dragging a window) used to paint the page's
   text blue like a document. Text boxes still select as usual, and so does the chat log (to copy a line). On an
   iPhone, press and hold no longer pops up its copy menu either. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"], #chat-log { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

.screen { position: fixed; inset: 0; }
.menu {
  display: grid; place-items: center; padding: 16px; overflow-y: auto;
  /* The grove's night sky from the first frame (the old brown casino backdrop flashed before loginArt.js ran). */
  background: linear-gradient(180deg, #120b24 0%, #1f1438 38%, #2c1c50 68%, #150d28 100%);
}
/* Until loginArt.js dresses a screen (index.html runs it first thing) its card waits unseen: the plain card used to show
   for a moment. Shown anyway after 3 s, should the script ever fail. */
.menu:not(.grove) > * { visibility: hidden; animation: menu-reveal 0s 3s forwards; }
@keyframes menu-reveal { to { visibility: visible; } }

.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%); }
/* The login card's link to the Facebook page. */
.social-link {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 0; padding-top: 14px;
  border-top: 1px solid rgba(233, 185, 73, .2); color: #e8dcc4; font-size: 14px; text-decoration: none;
}
.social-link svg { flex: none; padding: 4px; border-radius: 50%; background: #1877f2; fill: #fff; box-sizing: content-box; }
.social-link:hover, .social-link:focus-visible { color: #ffd77a; }

/* ---------- Before the game: the glimmering grove, the logo's scene (js/loginArt.js draws it; branding/) ---------- */
.menu.grove {
  isolation: isolate;
  background: linear-gradient(180deg, #120b24 0%, #1f1438 38%, #2c1c50 68%, #150d28 100%);
}
.gv-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* (The stars fade out toward the treeline; the glow is sized by the screen's height, not its width, so a widescreen
   monitor doesn't smear it across the whole sky.) */
.gv-stars {
  position: absolute; inset: 0; background-repeat: repeat; background-size: 900px 600px; background-position: center top;
  -webkit-mask-image: linear-gradient(#000 0%, #000 55%, transparent 85%); mask-image: linear-gradient(#000 0%, #000 55%, transparent 85%);
}
.gv-glow { position: absolute; inset: 0; background: radial-gradient(circle max(46vh, 320px) at 50% 42%, rgba(255,176,84,.24) 0%, rgba(232,116,59,.1) 54%, transparent 100%); }
.gv-trees { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(200px, 46vh, 470px); }
/* Stars that twinkle, and fireflies that drift and glow on and off (opacity and movement only: cheap). */
.gv-twinkles i {
  position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%;
  background: #fff6d8; box-shadow: 0 0 5px 1px rgba(255,240,200,.7);
  animation: gv-twinkle var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes gv-twinkle { from { opacity: .1; } to { opacity: .95; } }
.gv-flies i {
  position: absolute; left: var(--x); bottom: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff4b8; box-shadow: 0 0 6px 2px rgba(255,214,110,.8), 0 0 20px 7px rgba(255,170,60,.3); opacity: 0;
  animation: gv-blink var(--b) ease-in-out var(--d) infinite; /* (their drift: loginArt.js drift) */
}
@keyframes gv-blink { 0%, 100% { opacity: 0; } 35%, 65% { opacity: .95; } }

.grove .card {
  position: relative; background: linear-gradient(180deg, rgba(36, 25, 48, .9), rgba(18, 12, 26, .93));
  border: 1px solid rgba(233,185,73,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 44px rgba(255,170,80,.16), 0 24px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,230,160,.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* Gold corner filigree on the card. */
.grove .card::before, .grove .card::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
  border: 2px solid #e9b949; opacity: .7;
}
.grove .card::before { top: 7px; left: 7px; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.grove .card::after { bottom: 7px; right: 7px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }
/* The emblem crowns the title, rising out of the card's top edge, its lantern glowing softly. */
.gv-crest { position: relative; display: flex; justify-content: center; margin: -94px 0 6px; }
.gv-crest::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,186,90,.45), rgba(255,140,60,.12) 45%, transparent 70%);
  animation: gv-lantern 3.8s ease-in-out infinite alternate;
}
/* (Plain transform and opacity: kept running by the compositor even while the page is busy loading the world.) */
@keyframes gv-lantern { from { opacity: .55; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.gv-crest img { position: relative; width: 132px; height: 132px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.grove .card:has(.gv-crest) { margin-top: 66px; }
.loading-box .gv-crest { margin: 0 0 10px; } /* (no card edge to rise out of) */
/* The title: the gold name (icons/wordmark.png), its shadow and glow added here. */
.grove .logo img { display: block; width: min(300px, 100%); height: auto; margin: 0 auto; filter: drop-shadow(0 3px 2px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(232,116,59,.5)); }
.grove .tagline { color: #e2cfae; }
.grove h2 { color: #f3d58a; }

/* Phones: a smaller emblem and fewer fireflies; a short screen (landscape) leaves the emblem out to keep the form in view. */
@media (max-width: 700px) {
  .gv-flies i:nth-child(n+11), .gv-twinkles i:nth-child(n+8) { display: none; }
  .gv-crest { margin-top: -78px; }
  .gv-crest img { width: 108px; height: 108px; }
  .grove .card:has(.gv-crest) { margin-top: 56px; }
}
@media (max-height: 560px) { .gv-crest { display: none; } .grove .card:has(.gv-crest) { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gv-flies i, .gv-twinkles i, .gv-crest::before { animation: none; }
  .gv-flies i { opacity: .7; }
}

.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; }

/* Password with our own show/hide eye (Edge's built-in one was a black glyph, invisible on the dark card, and phones
   had none): light, inside the box on the right. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
input::-ms-reveal, input::-ms-clear { display: none; }
.pw-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(calc(-50% + 2px)); /* +2px: the input's margin-top */
  width: 40px; height: 36px; padding: 0; display: grid; place-items: center;
  background: transparent; border: none; border-radius: 6px; color: var(--text); opacity: .85;
}
.pw-toggle:hover:not(:disabled) { opacity: 1; color: var(--ember-hi); }
.pw-toggle:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.pw-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pw-toggle .pw-slash { display: none; }
.pw-toggle[aria-pressed="true"] .pw-slash { display: inline; }
.field-note { margin: -6px 0 12px; font-size: 12px; }

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: 14px; text-align: left; width: 100%; padding: 10px 14px 10px 10px;
  background: linear-gradient(90deg, rgba(58, 38, 28, .85), rgba(34, 24, 18, .7));
}
.char-card.selected {
  border-color: #e9b949; background: linear-gradient(90deg, rgba(110, 58, 26, .75), rgba(48, 30, 20, .75));
  box-shadow: 0 0 0 1px rgba(233,185,73,.35), 0 0 18px rgba(232,116,59,.25);
}
.char-card .char-text { min-width: 0; }
.char-card .name { font: 700 19px Georgia, serif; color: #f6e7c8; }
.char-card.selected .name { color: #ffd77a; }
.char-card .meta { color: var(--muted); font-size: 13px; }
/* A class's emblem (js/classIcons.js): name lists, tooltips, anywhere. */
.class-icon { display: inline-block; flex: none; line-height: 0; vertical-align: middle; }
.class-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.char-card .class-icon { filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); transition: transform .15s; }
.char-card:hover .class-icon, .char-card.selected .class-icon { transform: scale(1.06); }

.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); }
/* Phones and tablets too (measured 2026-11-10: the blur costs ~5% of a frame even on a desktop graphics card, and blur
   over WebGL is far dearer on phone chips, iPhones above all). The sign-in card over the grove scene likewise. */
@media (pointer: coarse) {
  .panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 16, 14, 0.86); }
  .grove .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
#hud-player { top: 16px; left: 16px; }
.hud-name { font-size: 18px; font-weight: 600; }
/* Name and level beside your class emblem. */
.hud-id { display: flex; align-items: center; gap: 9px; }
.hud-id-text { min-width: 0; }
.hud-id-text > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-class-icon { width: 42px; height: 42px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
/* Top right: the minimap in the corner, the menu button beside it. */
/* A server announcement (main.js showBanner): an update on its way, say. */
#server-banner {
  position: fixed; top: max(70px, calc(env(safe-area-inset-top) + 60px)); left: 50%; transform: translateX(-50%); z-index: 20;
  width: min(560px, calc(100vw - 24px)); padding: 12px 18px; border-radius: 12px; text-align: center;
  font: 600 16px/1.35 Georgia, serif; color: #fff2c4; background: rgba(40, 22, 10, .94);
  border: 1px solid rgba(243, 194, 90, .8); box-shadow: 0 10px 30px rgba(0,0,0,.55); pointer-events: none;
}
#server-banner[hidden] { display: none; }
#hud-menu { top: 16px; right: 190px; z-index: 9; } /* above every window (the daily reward, 7, covered half the menu) */
.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-select { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; font-size: 14px; border-radius: 6px; }
.menu-select:hover { background: rgba(233,185,73,.15); }
.menu-select select { width: auto; margin: 0; padding: 3px 6px; border-radius: 10px; font: inherit; font-size: 13px; background: rgba(0,0,0,.4); color: #f3e7d3; border: 1px solid rgba(255,255,255,.18); cursor: pointer; }
.menu-select option { background: #241a12; color: #f3e7d3; }
body.touch .menu-select { min-height: 42px; font-size: 15px; }
body.touch .menu-select select { min-height: 34px; font-size: 15px; }
.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, .win-window > .stats-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: 11px; 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; }
#zone-banner.show.long { animation-duration: 6s; }
/* The line under a place's name: what's there, or whether players can fight here. */
#zone-banner small {
  display: block; width: min(560px, calc(100vw - 32px)); margin: 6px auto 0; text-align: center; white-space: normal;
  font: 500 clamp(13px, 1.7vw, 16px)/1.35 system-ui, sans-serif; color: #f6ead6; text-shadow: 0 1px 4px #000, 0 0 10px rgba(0,0,0,.8);
}
#zone-banner { text-align: center; }
/* Phones: below the chat and quest panels in the top half, so the lines under the name are readable. */
body.touch #zone-banner { top: 34%; }
/* Walking into a place (zoneBanner, zoneNote): small, and low on the screen above the hotbar, out of your view of
   the world. (It used to be the big middle-of-the-screen banner, which hid what was ahead.) Level-ups, jackpots
   and the bouncers' warning keep the big one. */
#zone-banner.place { top: auto; bottom: 108px; font-size: clamp(17px, 2vw, 22px); text-shadow: 0 1px 4px #000, 0 0 12px rgba(0,0,0,.7); }
#zone-banner.place small { width: min(380px, calc(100vw - 32px)); margin-top: 2px; font-size: clamp(12px, 1.2vw, 13px); }
/* Phones: on the left, above the joystick, clear of the skill buttons down the right-hand side. */
body.touch #zone-banner.place {
  top: auto; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 178px); left: max(10px, env(safe-area-inset-left));
  transform: none; width: min(250px, calc(100vw - 140px)); white-space: normal; font-size: 16px;
}
body.touch #zone-banner.place small { width: auto; font-size: 12px; }
/* 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 42px; border: 5px solid var(--accent, #f3d27a);
  box-shadow: inset 0 0 0 7px var(--bottom, #06180e), inset 0 0 0 9px 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 {
  --chip-color: #24232c;
  position: relative; width: 40px; height: 40px; padding: 11px 0 0; border-radius: 50%; font-weight: 800; font-size: 12px; color: #fff2d2;
  border: 3px dashed #f1dfb5; background: radial-gradient(circle, #0000 50%, #0004 71%), var(--chip-color);
  box-shadow: inset 0 0 0 1px #d1a85b, inset 0 0 0 4px #0002, 0 3px 0 #19111b, 0 5px 7px #0007; text-shadow: 0 1px 2px #000a; transition: transform .12s;
}
.chip::before { content: ''; position: absolute; width: 13px; height: 13px; top: 2px; left: 50%; transform: translateX(-50%); background: url('../icons/emblem.svg') center/contain no-repeat; pointer-events: none; }
.chip.c1 { --chip-color: #e8e2d0; color: #39251b; text-shadow: none; }
.chip.c5 { --chip-color: #b83143; } .chip.c25 { --chip-color: #19764d; } .chip.c100 { --chip-color: #24232c; } .chip.c500 { --chip-color: #71419a; }
.chip.c1000 { --chip-color: #d4a017; color: #2a1a00; text-shadow: none; } .chip.c5000 { --chip-color: #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; }
.minimap-layers { position:fixed;top:184px;right:16px;z-index:7;color:#f4e6c9;font:12px "Segoe UI",sans-serif;background:#142128ed;border:1px solid #b8862b;border-radius:7px;padding:5px 8px; }
.minimap-layers[hidden] { display:none; }
.minimap-layers summary { cursor:pointer;min-height:22px;display:flex;align-items:center; }
.minimap-layers label { display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:30px;cursor:pointer;white-space:nowrap; }
.minimap-layers input { accent-color:#e4c58a;flex:0 0 16px;width:16px;height:16px;min-height:0;margin:0;padding:0; }
body.touch .minimap-layers { top:calc(max(8px, env(safe-area-inset-top)) + 138px);right:calc(max(8px, env(safe-area-inset-right)) + 166px); }
body.touch .minimap-layers summary { min-height:28px; }
body.touch .minimap-layers label { min-height:38px; }

/* ---------- 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; }
/* Filled by scaling (main.js setLoading animates it), so the compositor keeps it moving while the world is built. */
#loading-fill { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--ember), var(--ember-hi)); }
.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; }
/* Menu → NPC names: Off hides those names and the Shop signs (main.js setNpcNames). Quest marks (! and ?) stay, and
   so does the name of someone you've targeted (their plate gets .enemy). */
body.hide-npc-names .nameplate.npc:not(.enemy), body.hide-npc-names .npc-marker.shop { display: none !important; }
/* 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; }
/* Over the preview while the character model is being built (the first time it opens). */
.creator-view { position: relative; }
.creator-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center; color: var(--muted); font-size: 14px; pointer-events: none;
}
.creator-loading[hidden] { display: none; }
.creator-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,215,122,.18); border-top-color: #ffd77a; animation: creator-spin .9s linear infinite; }
.creator-loading.failed .creator-spinner { display: none; }
@keyframes creator-spin { to { transform: rotate(360deg); } }
.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 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; }
/* Online friends: invite them to your party (party.js), or "Party" if they're already in it. */
.friend .friend-invite { font-size: 11.5px; padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(122,240,160,.45); color: #bff5cb; text-decoration: none; }
.friend .friend-invite:hover { background: rgba(122,240,160,.15); }
.friend .friend-party { font-size: 11px; color: #9cf0a8; }
body.touch .friend .friend-invite { padding: 6px 10px; font-size: 12.5px; }
.convo-invite { margin-left: 6px; font-size: 12px; padding: 2px 9px; }
.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; text-align: right; line-height: 1.1; }
.sl-jackpot b { display: block; font-weight: 800; }
.sl-jackpot small { display: block; font: 600 10.5px system-ui, sans-serif; color: #f3e2a6; text-shadow: none; letter-spacing: .02em; }
.sl-jp-note { margin: 0 0 8px !important; padding: 6px 8px; border-radius: 6px; font-size: 12.5px !important; color: #ffe6a0; background: rgba(255,200,60,.12); border: 1px solid rgba(255,200,60,.45); }
#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); } }

/* ---------- The top-level prize (js/levelPrize.js): off to the left, so the outfit tried on shows on you ---------- */
#prize-window {
  top: 50%; left: 24px; transform: translateY(-50%); width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 48px); z-index: 7;
  border: 1px solid rgba(233,185,73,.75); background: rgba(24, 16, 12, .96);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 32px rgba(255,200,80,.18);
}
#prize-window > .prize-actions { flex: none; }
#prize-badge { margin-left: 5px; padding: 0 6px; border-radius: 9px; background: #ffd77a; color: #1a0f08; font-weight: 800; }
#prize-button { border-color: rgba(255,215,122,.8); animation: prize-glow 1.6s ease-in-out infinite alternate; }
@keyframes prize-glow { from { box-shadow: 0 0 0 rgba(255,215,122,0); } to { box-shadow: 0 0 12px rgba(255,215,122,.6); } }
.prize-sub { font-size: 13.5px; line-height: 1.45; margin: 2px 0 10px; }
.prize-sub b { color: #ffd77a; }
.prize-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.prize-choice { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; text-align: left; border-radius: 10px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); color: #e8dcc6; font: 600 13px "Segoe UI", sans-serif; cursor: pointer; }
.prize-choice:hover { border-color: rgba(255,215,122,.5); }
.prize-choice.picked { border-color: #ffd77a; box-shadow: 0 0 0 2px rgba(255,215,122,.35), inset 0 0 16px rgba(255,200,80,.18); color: #ffe6a8; }
.prize-icon { flex: none; width: 36px; height: 36px; }
.prize-icon svg { width: 100%; height: 100%; display: block; }
.prize-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.prize-actions .row { justify-content: flex-end; gap: 8px; }
.prize-actions #prize-status { font-size: 12px; min-height: 1em; }
/* Phones: a sheet along the bottom, so you can still see yourself above it wearing what you tapped. */
@media (max-width: 700px), (max-height: 500px) {
  body.touch #prize-window {
    top: auto !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; left: 0 !important; right: 0 !important;
    margin: 0 auto !important; transform: none !important; width: min(560px, calc(100vw - 16px)) !important;
    max-height: 50% !important; z-index: 8;
  }
  body.touch .prize-choices { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  body.touch .prize-choice { flex-direction: column; justify-content: center; text-align: center; gap: 2px; min-height: 64px; padding: 6px 4px; font-size: 12px; }
  body.touch .prize-icon { width: 30px; height: 30px; }
  body.touch .prize-sub { font-size: 12.5px; margin-bottom: 6px; }
  body.touch .prize-actions button { min-height: 40px; }
}
@media (max-height: 500px) {
  body.touch #prize-window { max-height: calc(100% - 16px) !important; width: min(420px, 48vw) !important; left: max(8px, env(safe-area-inset-left)) !important; right: auto !important; margin: 0 !important; bottom: 8px !important; }
  body.touch .prize-choices { grid-template-columns: repeat(2, 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); }
/* Character screen: your heroes, then an empty slot for a new one, then what to do with the one you picked. */
.select-title { margin-bottom: 16px; }
.new-char {
  display: block; width: 100%; min-height: 46px; background: transparent; color: #e9c879; font-weight: 600;
  border: 1px dashed rgba(233,185,73,.45);
}
.new-char:hover:not(:disabled) { border-color: #e9b949; background: rgba(233,185,73,.08); }
#select-error:empty { min-height: 0; margin: 0 0 14px; }
.char-actions { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.char-actions button { min-height: 44px; padding-inline: 10px; }
.char-actions .primary { font-size: 17px; }
/* With the creator closed (nothing shown below), no divider under the buttons. */
.card:has(#creator-panel[hidden]) .char-actions { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.select-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(233,185,73,.18); padding-right: 14px; /* clear of the card's gold corner */ }
/* Phones: Enter world across the card, the other two side by side under it. */
@media (max-width: 560px) {
  #select-screen .card { padding: 22px 18px 24px; }
  .char-actions { grid-template-columns: 1fr 1fr; }
  .char-actions .primary { grid-column: 1 / -1; min-height: 50px; }
}
#creator-title { margin-top: 0; }
body.touch #action-bar { left: auto; right: 12px; transform: none; }

/* ---------- Class guide (js/classGuide.js), from the character creator ---------- */
.class-guide-open {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 12px 6px 6px; text-align: left;
  background: linear-gradient(90deg, rgba(233,185,73,.16), rgba(233,185,73,.04)); border-color: rgba(233,185,73,.5);
  color: #f3d58a; font-weight: 600;
}
.class-guide-open:hover:not(:disabled) { border-color: #e9b949; background: linear-gradient(90deg, rgba(233,185,73,.26), rgba(233,185,73,.08)); }
.class-guide-open #class-guide-emblem { display: flex; }
.class-guide-open .cg-open-hint { margin-left: auto; color: var(--muted); font-weight: normal; font-size: 12px; }
.class-guide { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8, 5, 4, .7); }
.class-guide-panel {
  width: min(640px, 100%); max-height: min(88vh, 820px); display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1px solid rgba(233,185,73,.6); background: linear-gradient(180deg, rgba(40, 26, 20, .99), rgba(22, 15, 11, .99));
  box-shadow: 0 0 40px rgba(232,116,59,.18), 0 24px 70px rgba(0,0,0,.7);
}
.class-guide-head { padding: 14px 18px 8px; }
.class-guide-head strong { font: 22px Georgia, serif; color: #f3d58a; font-weight: normal; }
.class-guide-x { font-size: 18px; padding: 4px 8px; }
.class-guide-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 18px 12px; border-bottom: 1px solid rgba(233,185,73,.25); }
.class-guide-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; font-size: 13px; background: rgba(0,0,0,.2); }
.class-guide-tab .class-icon { transition: transform .15s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.class-guide-tab.selected { border-color: #e9b949; background: rgba(233,185,73,.14); color: #ffd77a; font-weight: 600; }
.class-guide-tab.selected .class-icon, .class-guide-tab:hover .class-icon { transform: scale(1.08); }
.class-guide-body { overflow-y: auto; padding: 14px 18px; overscroll-behavior: contain; }
.class-guide-actions { justify-content: flex-end; padding: 12px 18px 14px; border-top: 1px solid rgba(233,185,73,.25); }
.cg-hero { display: flex; align-items: center; gap: 14px; }
.cg-hero .class-icon { filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.cg-name { margin: 0; color: #f6e7c8; font-size: 26px; }
.cg-role { color: #e9b949; font-size: 14px; letter-spacing: .3px; }
.cg-blurb { margin: 12px 0; line-height: 1.5; }
.cg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cg-fact { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.07); }
.cg-fact .cg-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.cg-fact strong { color: #ffd77a; font-size: 16px; }
.cg-fact small { font-size: 12px; line-height: 1.3; }
.cg-tip { margin: 10px 0 4px; color: #d9c3a0; font-style: italic; font-size: 14px; }
.cg-skills h4 { margin: 14px 0 8px; font: 17px Georgia, serif; color: #f3d58a; font-weight: normal; }
.cg-skill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cg-skill { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.cg-skill-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cg-skill-top strong { color: #f6e7c8; }
.cg-lvl { flex: none; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: rgba(233,185,73,.15); color: #e9b949; border: 1px solid rgba(233,185,73,.35); }
.cg-lvl.start { background: rgba(120,200,120,.14); color: #9fdc8c; border-color: rgba(120,200,120,.35); }
.cg-skill-desc { font-size: 13.5px; margin-top: 2px; line-height: 1.4; }
.cg-skill-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Phones: the guide fills the screen; the tabs stay one row of four. */
@media (max-width: 600px) {
  .class-guide { padding: 0; }
  .class-guide-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; border: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .class-guide-tabs { gap: 6px; padding: 4px 12px 10px; }
  .class-guide-tab { font-size: 12px; padding: 6px 2px; }
  .class-guide-body { padding: 12px 14px; }
  .cg-name { font-size: 22px; }
  .class-guide-open .cg-open-hint { display: 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; }

/* ---------- How to play (js/guide.js): from the Menu and the character screen ---------- */
.guide { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(8, 5, 4, .72); }
.guide-panel {
  width: min(1080px, 100%); height: min(90vh, 920px); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(233,185,73,.6); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(40, 26, 20, .99), rgba(22, 15, 11, .99));
  box-shadow: 0 0 40px rgba(232,116,59,.18), 0 24px 70px rgba(0,0,0,.7);
}
.guide-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid rgba(233,185,73,.25); }
.guide-title { flex: 1; min-width: 0; font: 22px Georgia, serif; color: #f3d58a; font-weight: normal; }
.guide-x { font-size: 20px; padding: 4px 10px; text-decoration: none; }
.guide-toc-toggle { display: none; align-items: center; gap: 8px; max-width: 55%; padding: 7px 12px; border-color: rgba(233,185,73,.5); color: #f3d58a; font-weight: 600; }
.guide-toc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.guide-toc { overflow-y: auto; overscroll-behavior: contain; padding: 10px 8px 18px; border-right: 1px solid rgba(233,185,73,.18); background: rgba(0,0,0,.18); }
.guide-toc a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.25; }
.guide-toc a.top { margin-top: 2px; font-weight: 600; }
.guide-toc a.sub { padding: 4px 10px 4px 36px; font-size: 13px; color: var(--muted); }
.guide-toc a:hover { background: rgba(233,185,73,.1); }
.guide-toc a.current { background: rgba(233,185,73,.16); color: #ffd77a; }
.guide-toc a.sub.current { background: rgba(233,185,73,.08); }
.guide-toc a.sub .class-icon { flex: none; margin-left: -24px; }
.guide .gd-ico { flex: none; width: 1.3em; text-align: center; }
.guide-body { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 4px 26px 40px; font-size: 14.5px; line-height: 1.5; outline: none; }
.gd-loading { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.gd-section { padding-top: 12px; }
.gd-section + .gd-section { margin-top: 22px; border-top: 1px solid rgba(233,185,73,.2); }
.gd-section h2 { display: flex; align-items: center; gap: 10px; margin: 8px 0 8px; font: 25px Georgia, serif; color: #f3d58a; font-weight: normal; }
.gd-section h3 { margin: 20px 0 6px; font: 18px Georgia, serif; color: #f6e7c8; font-weight: normal; }
.gd-section .gd-h4 { margin: 14px 0 6px; font-size: 14px; color: #e9b949; text-transform: uppercase; letter-spacing: .5px; }
.gd-section p { margin: 6px 0; }
.gd-section ul, .gd-section ol { margin: 6px 0; padding-left: 22px; }
.gd-section li { margin: 4px 0; }
.gd-section .cg-skill-list { padding-left: 0; }
.gd-section a { color: #ffd77a; }
.gd-section code { padding: 0 4px; border-radius: 4px; background: rgba(255,255,255,.08); font-size: .95em; }
.gd-lead { color: #efe4d2; font-size: 15px; }
.gd-note { color: var(--muted); font-size: 13px; }
.gd-tip { padding: 8px 12px; border-left: 3px solid #e9b949; background: rgba(233,185,73,.08); border-radius: 0 8px 8px 0; }
.gd-mark { display: inline-block; min-width: 1.2em; text-align: center; color: #ffd24a; text-shadow: 0 0 6px rgba(255,200,60,.6); }
.gd-steps li { margin: 6px 0; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; margin: 10px 0; }
.gd-card { padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.gd-card h4 { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 15px; color: #f6e7c8; }
.gd-card p { margin: 0 0 6px; font-size: 13.5px; }
.gd-meta { font-size: 13px; color: var(--muted); line-height: 1.45; }
.gd-where { font-size: 13px; margin-bottom: 4px; }
.gd-lvl { font-size: 12px; font-weight: 600; color: #e9b949; }
.gd-tag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; white-space: nowrap; background: rgba(233,185,73,.14); color: #e9b949; border: 1px solid rgba(233,185,73,.35); }
.gd-tag.boss { background: rgba(220,80,60,.18); color: #ff9a80; border-color: rgba(220,80,60,.45); }
.gd-tag.sea { background: rgba(80,170,220,.15); color: #8fd0ff; border-color: rgba(80,170,220,.4); }
.gd-keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: baseline; font-size: 13.5px; }
.gd-keys kbd { justify-self: start; white-space: nowrap; }
.gd-table-wrap { overflow-x: auto; margin: 8px 0; overscroll-behavior-x: contain; }
.gd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gd-table th { padding: 6px 8px; text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #e9b949; border-bottom: 1px solid rgba(233,185,73,.3); white-space: nowrap; }
.gd-table td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.06); }
.gd-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gd-table tbody tr:hover td { background: rgba(255,255,255,.025); }
details.gd-more { margin: 8px 0; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(0,0,0,.16); }
details.gd-more > summary { cursor: pointer; padding: 9px 12px; color: #f3d58a; font-weight: 600; list-style-position: inside; }
details.gd-more > summary .gd-note { font-weight: normal; margin-left: 4px; }
details.gd-more > div { padding: 0 12px 10px; }
.gd-class-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.gd-class-pick { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 8px; text-align: center; text-decoration: none; color: var(--text) !important; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); }
.gd-class-pick:hover { border-color: #e9b949; background: rgba(233,185,73,.1); }
.gd-class-pick span:not(.class-icon) { font-weight: 600; color: #ffd77a; }
.gd-class-pick small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.gd-class { margin-top: 18px; padding: 14px; border-radius: 10px; background: rgba(0,0,0,.18); border: 1px solid rgba(233,185,73,.2); }
.gd-class .gd-class-name { margin: 0; font: 24px Georgia, serif; color: #f6e7c8; }
.gd-class .cg-facts { margin: 10px 0; }
.cg-fact.gd-small strong { font-size: 14px; line-height: 1.3; }
.gd-xp { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px 8px; margin: 8px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.gd-xp span { display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.04); }
.gd-xp b { color: var(--muted); font-weight: 600; }
.gd-pays { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.gd-pays span { display: inline-flex; gap: 8px; padding: 4px 10px; border-radius: 14px; background: rgba(233,185,73,.1); border: 1px solid rgba(233,185,73,.28); font-size: 13px; font-variant-numeric: tabular-nums; }
.gd-pays b { color: #f6e7c8; font-weight: 600; }
.gd-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; margin: 8px 0; }
.gd-day { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: 13px; }
.gd-day b { color: #ffd77a; }
.gd-day small { color: #9fdc8c; }
.gd-rarity.r0 { color: #e8e0d4; } .gd-rarity.r1 { color: #6fe06f; } .gd-rarity.r2 { color: #5fa8ff; } .gd-rarity.r3 { color: #c77dff; } .gd-rarity.r4 { color: #ff5a4a; }
.gd-end { margin-top: 28px; text-align: center; }
.menu-panel .menu-guide { color: #f3d58a; font-weight: 600; }
/* The character screen's link to it. */
.select-guide {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; font-weight: 600; color: #f3d58a;
  border-color: rgba(233,185,73,.55); background: linear-gradient(90deg, rgba(233,185,73,.18), rgba(233,185,73,.05));
}
.select-guide:hover:not(:disabled) { border-color: #e9b949; background: linear-gradient(90deg, rgba(233,185,73,.28), rgba(233,185,73,.1)); }
/* Phones (either way up): the guide fills the screen; the contents fold away behind a button at the top. */
@media (max-width: 760px), (max-height: 500px) {
  .guide { padding: 0; }
  .guide-panel { width: 100%; height: 100%; border: none; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .guide-head { padding: 8px 8px 8px 10px; gap: 8px; }
  .guide-toc-toggle { display: inline-flex; }
  .guide-title { font-size: 17px; text-align: center; }
  .guide-main { grid-template-columns: minmax(0, 1fr); position: relative; }
  .guide-toc { position: absolute; inset: 0; z-index: 2; display: none; padding: 8px 12px 28px; border-right: none; background: #1a120d; }
  .guide.toc-open .guide-toc { display: block; }
  .guide-toc a { padding: 10px 12px; font-size: 16px; }
  .guide-toc a.sub { padding: 8px 12px 8px 40px; font-size: 14.5px; }
  .guide-body { padding: 2px 14px 36px; font-size: 15px; }
  .gd-section h2 { font-size: 22px; }
  .gd-grid { grid-template-columns: minmax(0, 1fr); }
  .gd-class-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-class { padding: 12px 10px; }
  .gd-table { font-size: 13px; }
  .gd-table th, .gd-table td { padding: 5px 6px; }
  .gd-table th { white-space: normal; }
}
@media (max-width: 340px) { .guide-title { display: none; } .guide-toc-toggle { max-width: none; flex: 1; } }

/* ==========================================================================
   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 .hud-id { gap: 7px; }
body.touch .hud-class-icon { width: 34px; height: 34px; }
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; }
  /* No keyboard on a phone: the key hints only took room (blackjack's five buttons didn't fit and "Surrender" was cut
     off). And a button never shrinks below its label: a row that still doesn't fit wraps instead. */
  body.touch :is(#bj-bar, #ph-bar, #wr-bar, #fl-bar) kbd { display: none; }
  body.touch :is(#bj-bar, #ph-bar, #wr-bar, #fl-bar) .bj-actions { flex-wrap: wrap; }
  body.touch :is(#bj-bar, #ph-bar, #wr-bar, #fl-bar) .bj-actions button { flex: 1 1 auto; min-width: max-content; white-space: nowrap; }
  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; }

/* (Nothing in the frame under 11 px: 8.5-10 px bar and button text was hard to read on a phone.) */
body.touch #hud-player { width: 184px; 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: 11.5px; }
body.touch .hud-id { gap: 6px; }
body.touch .hud-class-icon { width: 30px; height: 30px; }
body.touch .hp-bar.me { margin-top: 4px; height: 14px; }
body.touch .hp-bar.me span { line-height: 14px; font-size: 11px; }
body.touch .xp-bar { margin-top: 3px; height: 13px; }
body.touch .xp-bar span { line-height: 13px; font-size: 11px; }
body.touch .hud-gold { margin-top: 2px; font-size: 12px; }
body.touch #hud-player .stats-button { margin: 4px 0 0; min-height: 30px; padding: 0; font-size: 11px; border-radius: 8px; letter-spacing: -.03em; 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: -7px; right: -4px; margin: 0; padding: 0 4px; min-width: 16px; font-size: 11px; line-height: 16px;
  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)) + 136px); }
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; }
}

/* ---------- Party (party.js): the members under your own frame, top left ---------- */
.party-frame {
  top: 186px; left: 16px; width: 214px; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
}
.party-frame > * { pointer-events: auto; }
.party-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 8px; border-radius: 8px;
  background: rgba(20, 14, 10, .62); border: 1px solid rgba(122, 240, 160, .28); font: 700 12px Georgia, serif; color: #bff5cb;
}
.party-head .muted { font: 400 11px "Segoe UI", sans-serif; }
.party-head button, .pm-more { text-decoration: none; }
.party-head button { padding: 0 4px; font-size: 16px; line-height: 18px; color: #e9dfcf; }
.pm {
  background: var(--panel); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 4px 7px 5px; cursor: pointer;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
body.firefox .pm, body.gfx-low .pm { background: rgba(20, 16, 14, 0.86); }
.pm:hover { border-color: rgba(122, 240, 160, .45); }
.pm.sel { border-color: #7af0a0; box-shadow: 0 0 0 1px #7af0a0 inset; }
.pm.far { opacity: .62; }
.pm-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pm-icon { display: inline-flex; width: 16px; height: 16px; flex: none; }
.pm-icon svg { width: 16px; height: 16px; }
.pm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.pm-lead { color: #ffd77a; font-size: 11px; }
.pm-lv { color: #cfc2ad; font-size: 11px; white-space: nowrap; }
.pm-lv::before { content: 'Lv '; }
.pm-dist { margin-left: auto; color: #cfc2ad; font-size: 11px; white-space: nowrap; }
.pm-key { font-size: 9.5px; padding: 0 3px; line-height: 13px; opacity: .7; }
.pm-more { padding: 0 3px; font-size: 14px; line-height: 14px; color: #e9dfcf; opacity: .55; }
.pm:hover .pm-more, body.touch .pm-more { opacity: 1; }
.pm-bar { position: relative; height: 13px; margin-top: 3px; border-radius: 4px; background: rgba(0,0,0,.55); overflow: hidden; }
.pm-bar i { position: absolute; top: 0; bottom: 0; }
.pm-hp { left: 0; background: linear-gradient(#5fd17a, #2f9a4c); }
.pm-shield { background: repeating-linear-gradient(-45deg, #fff3b0, #fff3b0 3px, #e9c95a 3px, #e9c95a 6px); opacity: .9; }
.pm-bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 13px; color: #fff; text-shadow: 0 1px 2px #000; }
.pm.dead .pm-hp { background: #6b2a24; }
.pm-cond { margin-top: 2px; font-size: 10.5px; color: #cfc2ad; }
.pm-cond.bad { color: #ff8a7a; font-weight: 600; }
.pm-cond.warn { color: #ffd77a; }
.pm-cond.off { color: #a9a29a; font-style: italic; }
.party-mine { padding: 0 4px; text-shadow: 0 1px 2px #000; }
.party-menu { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.party-menu button { font-size: 12px; padding: 4px 8px; text-align: left; }
.party-menu button.danger { color: #ff9a8a; }
.pm-menu-title { font: 700 12px Georgia, serif; color: #ffd77a; padding: 0 2px 2px; }
.party-invite { top: 170px; border-color: #7af0a0; }
.nameplate.party { color: #bff5cb; }
.nameplate.party.enemy { color: #bff5cb; box-shadow: 0 0 0 2px #7af0a0; }
.pl-party { font-size: 11px; color: #9cf0a8; margin-right: 6px; }

/* Phones: a narrower panel under your frame, top left (the joystick sits well below it). */
body.touch .party-frame { top: calc(max(8px, env(safe-area-inset-top)) + 178px); left: max(8px, env(safe-area-inset-left)); width: 168px; font-size: 11.5px; gap: 3px; }
body.touch:has(#chat:not([hidden])) .party-frame { top: calc(max(8px, env(safe-area-inset-top)) + 254px); } /* (under the open chat) */
@media (orientation: landscape) and (max-height: 500px) {
  /* Sideways: along the top, right of the chat (the left column is the frame, quests and the joystick). */
  body.touch .party-frame, body.touch:has(#chat:not([hidden])) .party-frame {
    top: max(8px, env(safe-area-inset-top)); left: calc(max(8px, env(safe-area-inset-left)) + 176px + min(260px, calc(100vw - 176px - 240px)) + 8px); width: 178px;
  }
}
body.touch .pm { padding: 3px 6px 4px; }
body.touch .pm-key { display: none; }
body.touch .pm-bar { height: 11px; }
body.touch .pm-bar span { font-size: 9px; line-height: 11px; }
body.touch .pm-more { font-size: 16px; padding: 0 5px; }
body.touch .party-invite { top: calc(max(8px, env(safe-area-inset-top)) + 110px); }
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])) #party-frame { display: none; }

/* Aggressive monsters (server MonsterManager.IsAggressive: they attack anyone who comes close): a red name with a claw
   mark before it (monsters.js). When one jumps someone it flashes. */
.nameplate.monster.aggressive > .nm { color: #ff8a7a; display: inline-flex; align-items: center; gap: 3px; }
.nameplate.monster.aggressive .aggr { width: 12px; height: 12px; flex: none; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
.nameplate.monster.aggressive.ambush > .nm { animation: aggro-flash .45s ease-out 3; }
@keyframes aggro-flash { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); color: #ffd0c8; } }

/* Monster ownership (main.js applyOwner): someone outside your party is fighting it, so it's greyed with their name;
   a world boss everyone can fight gets a gold frame. */
.nameplate.monster.tapped { color: #a9a29a; }
.nameplate.monster.tapped .hp { display: block; filter: grayscale(1); }
.nameplate.monster.tapped::after, .nameplate.monster.global::after {
  content: attr(data-owner); font-size: 10px; font-weight: 500; color: #cfc2ad; white-space: nowrap;
}
.nameplate.monster.global { color: #ffd77a; box-shadow: 0 0 0 1px #e9b949, 0 0 10px rgba(255, 170, 60, .45); font-size: 15px; }
.nameplate.monster.global::after { color: #ffcf85; }
.nameplate.monster.global .hp { display: block; width: 140px; }

/* Four Lanterns: "Forfeit this round?" (lanternsBar.js). */
.fl-forfeit { padding: 6px 8px; border-radius: 8px; background: rgba(232, 67, 59, .14); border: 1px solid rgba(232, 67, 59, .5); color: #ffd2c8; }
.fl-forfeit-yes { background: #b8352e; border-color: #e8433b; color: #fff; }
body.touch .fl-forfeit button { min-height: 40px; padding: 0 14px; }

/* Monster specials (monsterFx.js, main.js onMonsterTelegraph / showStunGuard). */
.mon-warn {
  font: 900 34px/1 system-ui, sans-serif; color: #ffdf4a; pointer-events: none;
  -webkit-text-stroke: 2px #6a0a00; text-shadow: 0 0 10px rgba(255, 60, 20, .9), 0 2px 4px #000;
  animation: mon-warn .35s ease-in-out infinite alternate;
}
@keyframes mon-warn { from { transform: scale(.85); } to { transform: scale(1.18); } }
body.touch .mon-warn { font-size: 40px; }
#stun-guard {
  position: absolute; z-index: 6; left: calc(100% + 8px); top: 6px; white-space: nowrap; pointer-events: auto;
  padding: 3px 10px 3px 26px; border-radius: 12px; font: 600 13px/18px system-ui, sans-serif; color: #e8f6ff;
  background: rgba(20, 40, 70, .78) no-repeat 7px 50%/14px 14px; border: 1px solid rgba(140, 200, 255, .6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l6 2.5v4c0 3.6-2.6 6.4-6 7.5-3.4-1.1-6-3.9-6-7.5v-4z' fill='%238fd0ff'/%3E%3C/svg%3E");
}
body.stunned-tint #hurt-flash { opacity: .55; background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 210, 60, .35) 85%, rgba(120, 80, 0, .6) 100%); transition: opacity .15s; }
body.touch #stun-guard { left: auto; right: 0; top: calc(100% + 8px); } /* (phones: under your frame, beside Chat, clear of the menu button) */