/* 7Tir in-game interface: status chips, seeker, roster, chat, dock, bottom bar, side panel, map.
   The HUD never blocks the world: only its controls take the pointer. */

.hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; --dock-w: 84px; --dock-h: 500px; --edge: 14px; }
.hud :where(button, a, input, select, textarea, label, .roster, .chat-log, .side-panel, .mapview, .specbar, .me, .belt, .dock, .toast) { pointer-events: auto; }
.hud-surface, .chip, .seek, .roster, .dock, .me, .hotbar, .abilities, .specbar {
  background: rgba(9, 15, 44, 0.76); border: 1px solid var(--line-soft); box-shadow: 0 8px 24px rgba(3, 6, 22, 0.35);
}

/* ------------------------------------------------------------------ top */
.hud-top { position: absolute; inset-inline: var(--edge); top: var(--edge); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); }
.hud-where { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; max-width: 46vw; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: var(--fs--1); font-weight: 600; }
:root[dir="rtl"] .chip { padding: 6px 10px 6px 14px; }
.chip svg { width: 17px; height: 17px; color: var(--firuze-hi); }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.crown { border-color: var(--saffron); color: var(--saffron-hi); background: linear-gradient(180deg, rgba(80, 56, 10, 0.75), rgba(40, 28, 8, 0.75)); }
.chip.crown svg { color: var(--saffron); }
.status { font-size: var(--fs--1); color: var(--ivory-2); text-shadow: 0 1px 2px rgba(3, 6, 22, 0.9); padding-inline: 6px; }
.status:empty { display: none; }

.seek { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; --heat: #6d8cf0; }
:root[dir="rtl"] .seek { padding: 5px 5px 5px 16px; }
.seek[data-heat="0"] { --heat: #6d8cf0; }
.seek[data-heat="1"] { --heat: #5cc6d6; }
.seek[data-heat="2"] { --heat: #f2c14e; }
.seek[data-heat="3"] { --heat: #f28a3a; }
.seek[data-heat="4"] { --heat: #ff4d5e; border-color: rgba(255, 77, 94, 0.6); }
.seek-dial { width: 44px; height: 44px; color: var(--heat); }
.seek-ring { fill: rgba(4, 8, 28, 0.6); stroke: rgba(246, 238, 220, 0.16); stroke-width: 1; }
.seek-arcs path { fill: none; stroke: rgba(246, 238, 220, 0.15); stroke-width: 4; stroke-linecap: round; }
.seek-arcs path.on { stroke: var(--heat); }
.seek-text { display: grid; line-height: 1.3; }
.seek-text b { font-size: var(--fs-0); color: var(--heat); }
.seek-text span { font-size: var(--fs--2); color: var(--ivory-2); }
.seek[data-heat="4"] .seek-dial { animation: burn 1.1s ease-in-out infinite alternate; }
@keyframes burn { from { filter: drop-shadow(0 0 0 rgba(255, 77, 94, 0)); } to { filter: drop-shadow(0 0 7px rgba(255, 77, 94, 0.9)); } }

/* roster */
.roster { width: 256px; max-height: max(132px, min(46vh, calc(100vh - var(--dock-h) - 3 * var(--edge)))); overflow: hidden auto; padding: 8px 10px 10px; border-radius: 16px; font-size: var(--fs--1); }
.roster:empty { display: none; }
.hud:has(.side-panel:not([hidden])) .roster, .hud:has(.mapview:not([hidden])) .roster { visibility: hidden; }
.roster-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roster h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs--1); font-weight: 700; color: var(--ivory); padding: 4px 2px; }
.roster h2 svg { width: 16px; height: 16px; color: var(--firuze-hi); }
.roster-toggle { width: 28px; height: 28px; border-radius: 8px; }
.roster-toggle svg { width: 16px; height: 16px; transition: transform 0.2s; }
.roster.collapsed .roster-toggle svg { transform: rotate(180deg); }
.roster.collapsed ul, .roster.collapsed .meta { display: none; }
.roster ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.roster li > *, .roster li { min-width: 0; }
.ro-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--ivory); text-align: start; font: inherit; }
button.ro-row { cursor: pointer; }
button.ro-row:hover { background: rgba(246, 238, 220, 0.07); }
.roster li.is-me .ro-row { background: rgba(53, 84, 184, 0.32); }
.roster li.is-following .ro-row { box-shadow: inset 0 0 0 1px var(--firuze); }
.ro-row canvas, .ro-face { width: 26px; height: 26px; border-radius: 7px; image-rendering: pixelated; background: rgba(4, 8, 28, 0.5); }
.ro-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ro-name bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ro-sub { display: block; font-size: var(--fs--2); color: var(--ivory-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-lvl { font-size: var(--fs--2); font-weight: 700; color: var(--saffron-hi); }
.tribe-tag { font-size: var(--fs--2); font-weight: 700; }
.ro-name .ai-badge { font-size: 9.5px; }
.badge-crown { width: 15px; height: 15px; flex: none; color: var(--saffron); }
.roster .meta { margin-block-start: 6px; padding-inline: 4px; font-size: var(--fs--2); color: var(--ivory-3); }

/* ------------------------------------------------------------------ chat */
.chat { position: absolute; inset-inline-start: var(--edge); bottom: 170px; width: min(460px, 40vw); display: grid; gap: 6px; }
.chat-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; max-height: 34vh; overflow: hidden auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.chat-log::-webkit-scrollbar { display: none; }
.chat-log li {
  justify-self: start; max-width: 100%; padding: 3px 11px 4px; border-radius: 11px;
  background: rgba(7, 12, 36, 0.66); font-size: var(--fs--1); line-height: 1.5; color: var(--ivory);
  transition: opacity 1.2s;
}
:root:lang(fa) .chat-log li { line-height: 1.75; }
.chat-log li.old { opacity: 0; }
.chat.open .chat-log li.old, .chat:hover .chat-log li.old { opacity: 1; }
.chat-log .who { font-weight: 700; color: var(--saffron-hi); margin-inline-end: 6px; }
.chat-log .who .ai-badge, .chat-log .who .badge-crown { margin-inline-start: 4px; vertical-align: -0.15em; }
.chat-log .chan { display: inline-block; margin-inline-end: 6px; padding: 0 6px; border-radius: 5px; font-size: var(--fs--2); font-weight: 700; color: var(--ink); background: var(--firuze); }
.chat-log .where { margin-inline-start: 6px; font-size: var(--fs--2); color: var(--ivory-3); }
.chat-log .c-shout .txt { font-weight: 700; color: #ffe0a3; }
.chat-log .c-tribe { box-shadow: inset 3px 0 0 var(--firuze); }
:root[dir="rtl"] .chat-log .c-tribe { box-shadow: inset -3px 0 0 var(--firuze); }
.chat-log .c-sys { color: var(--ivory-2); background: rgba(7, 12, 36, 0.5); }
.chat-log .c-announce { box-shadow: inset 3px 0 0 var(--saffron); }
:root[dir="rtl"] .chat-log .c-announce { box-shadow: inset -3px 0 0 var(--saffron); }
.chat-log .c-announce .who { color: var(--saffron); }
.chat-log li.c-decree {
  justify-self: stretch; display: grid; gap: 2px; padding: 10px 14px; text-align: center;
  background: linear-gradient(180deg, rgba(92, 64, 12, 0.85), rgba(46, 31, 6, 0.85)); border: 1px solid var(--saffron); border-radius: 12px;
}
.chat-log li.c-decree .decree-head { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: var(--fs--2); font-weight: 800; color: var(--saffron); }
.chat-log li.c-decree .decree-head svg { width: 15px; height: 15px; }
.chat-log li.c-decree .txt { font-size: var(--fs-0); font-weight: 600; color: #fff3d6; }
.chat-log li.c-decree .by { font-size: var(--fs--2); color: var(--saffron-hi); }
.chat-form input { background: rgba(7, 12, 36, 0.86); border-color: var(--line); }
.chat-hint { font-size: var(--fs--2); color: var(--ivory-3); text-shadow: 0 1px 2px rgba(3, 6, 22, 0.9); padding-inline: 4px; }
.chat-hint:empty { display: none; }
.chat.open .chat-hint { display: none; }

/* ------------------------------------------------------------------ dock (inline-end rail) */
.dock { position: fixed; inset-inline-end: var(--edge); bottom: var(--edge); z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 18px; width: var(--dock-w); }
.dock-btn {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ivory-2); cursor: pointer; font: 600 var(--fs--2) / 1.2 var(--font);
  transition: background-color 0.15s, color 0.15s;
}
.dock-btn svg { width: 22px; height: 22px; }
.dock-btn:hover { color: var(--ivory); background: rgba(246, 238, 220, 0.08); }
.dock-btn[aria-pressed="true"], .dock-btn[aria-expanded="true"] { color: var(--ivory); background: linear-gradient(180deg, var(--lapis-500), var(--lapis-700)); box-shadow: inset 0 0 0 1px rgba(242, 181, 58, 0.6); }
.dock-btn[aria-pressed="true"] svg { color: var(--saffron-hi); }
.dock-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; }
.dock-btn kbd { position: absolute; top: 3px; inset-inline-end: 4px; min-width: 0; padding: 0 3px; font-size: 9px; line-height: 1.4; border-width: 1px; color: var(--ivory-3); background: rgba(4, 8, 28, 0.5); }
.dock-btn .dot { position: absolute; top: 6px; inset-inline-start: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--anar); box-shadow: 0 0 0 2px rgba(9, 15, 44, 0.9); }
.dock-sep { height: 1px; margin: 3px 8px; background: var(--line-soft); }

/* ------------------------------------------------------------------ bottom bar */
.bar { position: absolute; inset-inline: 0; bottom: 0; pointer-events: none; }
.me { position: absolute; inset-inline-start: var(--edge); bottom: var(--edge); display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 20px; max-width: calc(50vw - 360px); min-width: 0; }
:root[dir="rtl"] .me { padding: 10px 10px 10px 16px; }
.me-portrait { position: relative; flex: none; width: 60px; height: 60px; }
.me-portrait canvas { width: 60px; height: 60px; border-radius: 14px; image-rendering: pixelated; background: radial-gradient(circle at 50% 35%, rgba(60, 194, 180, 0.35), rgba(33, 52, 135, 0.5) 70%); box-shadow: inset 0 0 0 1px var(--hero, var(--line)); }
.level-star { position: absolute; bottom: -10px; inset-inline-end: -12px; display: grid; place-items: center; width: 34px; height: 34px; color: var(--saffron); filter: drop-shadow(0 2px 3px rgba(3, 6, 22, 0.7)); }
.level-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.level-star b { position: relative; font-size: 12px; font-weight: 900; color: var(--ink); line-height: 1; }
.level-star.up { animation: levelup 1.2s var(--ease); }
@keyframes levelup { 0% { transform: scale(1); } 30% { transform: scale(1.5) rotate(22deg); } 100% { transform: scale(1) rotate(0); } }
.me-info { display: grid; gap: 4px; min-width: 0; }
.me-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.me-line b { font-size: var(--fs-0); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.me-line span { font-size: var(--fs--2); color: var(--ivory-3); overflow: hidden; text-overflow: ellipsis; }
.hearts { display: flex; flex-wrap: wrap; gap: 1px; }
.hearts svg { width: 19px; height: 19px; color: var(--anar); filter: drop-shadow(0 1px 1px rgba(3, 6, 22, 0.6)); }
.hearts svg.empty { color: rgba(246, 238, 220, 0.3); filter: none; }
.hearts.hit { animation: hit 0.35s; }
@keyframes hit { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.breath { height: 6px; width: 140px; border-radius: 3px; background: rgba(246, 238, 220, 0.12); overflow: hidden; }
.breath i { display: block; height: 100%; width: var(--p, 100%); background: linear-gradient(90deg, #8fd0ff, #cfeeff); border-radius: inherit; }
:root[dir="rtl"] .breath i { margin-inline-start: auto; }
.xp { position: relative; height: 6px; width: 180px; border-radius: 3px; background: rgba(246, 238, 220, 0.12); overflow: hidden; }
.xp i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--firuze-deep), var(--firuze-hi)); transition: width 0.5s var(--ease); }
:root[dir="rtl"] .xp i { background: linear-gradient(270deg, var(--firuze-deep), var(--firuze-hi)); }
.coins { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 8px; border-radius: 999px; background: rgba(9, 15, 44, 0.82); border: 1px solid rgba(242, 181, 58, 0.45); box-shadow: 0 6px 18px rgba(3, 6, 22, 0.35); }
:root[dir="rtl"] .coins { padding: 4px 8px 4px 14px; }
.coins svg { width: 20px; height: 20px; color: var(--saffron); }
.coins b { font-size: var(--fs-0); font-weight: 800; color: var(--saffron-hi); font-variant-numeric: tabular-nums; }
.coins.bump b { animation: bump 0.5s var(--ease); }
@keyframes bump { 30% { transform: scale(1.25); } }
.coins-delta { position: absolute; inset-inline-start: calc(100% + 8px); top: 4px; white-space: nowrap; font-size: var(--fs--1); font-weight: 800; opacity: 0; pointer-events: none; }
.coins-delta.show { animation: delta 1.4s var(--ease) forwards; }
.coins-delta.gain { color: var(--firuze-hi); }
.coins-delta.loss { color: var(--anar-hi); }
@keyframes delta { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

.belt { position: absolute; bottom: var(--edge); inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 28px); display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.belt > * { pointer-events: auto; }
.slot-name { position: absolute; bottom: calc(100% + 6px); inset-inline: 0; text-align: center; font-size: var(--fs--1); font-weight: 600; color: var(--ivory); text-shadow: 0 1px 3px rgba(3, 6, 22, 0.95); pointer-events: none; transition: opacity 0.4s; }
.slot-name.fade { opacity: 0; }
.hotbar, .abilities { display: flex; gap: 4px; padding: 6px; border-radius: 18px; }
.slot {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(246, 238, 220, 0.12); background: rgba(4, 8, 28, 0.6);
  transition: transform 0.12s var(--ease), border-color 0.12s, box-shadow 0.12s;
}
.slot:hover { border-color: rgba(246, 238, 220, 0.4); }
.slot canvas { width: 34px; height: 34px; image-rendering: pixelated; }
.slot .k { position: absolute; top: 2px; inset-inline-start: 5px; font-size: 10px; font-weight: 700; color: var(--ivory-3); }
.slot .n { position: absolute; bottom: 1px; inset-inline-end: 5px; font-size: var(--fs--2); font-weight: 800; color: var(--ivory); text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.slot.sel { border-color: var(--saffron); box-shadow: 0 0 0 1px var(--saffron), 0 0 16px rgba(242, 181, 58, 0.35); transform: translateY(-4px); background: rgba(33, 52, 135, 0.7); }
.abilities { align-items: stretch; }
.ab { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-content: center; gap: 3px; width: 84px; padding: 5px 4px; border-radius: 12px; background: rgba(4, 8, 28, 0.6); border: 1px solid rgba(246, 238, 220, 0.12); overflow: hidden; --cd: 0; }
.ab kbd { font-size: 11px; }
.ab span { font-size: var(--fs--2); font-weight: 600; line-height: 1.25; text-align: center; color: var(--ivory); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ab::after { content: ""; position: absolute; inset: 0; background: conic-gradient(rgba(3, 6, 22, 0.72) calc(var(--cd) * 360deg), rgba(0, 0, 0, 0) 0); pointer-events: none; }
.ab.cool span { color: var(--ivory-3); }
.ab.ready { border-color: rgba(60, 194, 180, 0.45); }
.weave { display: grid; place-items: center; padding: 4px 10px; font-size: var(--fs--2); font-weight: 600; color: var(--firuze-hi); max-width: 90px; text-align: center; line-height: 1.3; }

/* ------------------------------------------------------------------ side panel */
.side-panel {
  position: absolute; top: var(--edge); bottom: var(--edge); inset-inline-end: calc(var(--edge) + var(--dock-w) + 10px); z-index: 3;
  width: min(460px, calc(100vw - var(--dock-w) - 48px)); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22, 35, 90, 0.93), rgba(10, 17, 48, 0.95));
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(3, 6, 22, 0.55);
}
.panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 18px; border-block-end: 1px solid var(--line-soft); }
:root[dir="rtl"] .panel-head { padding: 14px 18px 12px 14px; }
.panel-icon { width: 22px; height: 22px; color: var(--saffron); }
.panel-head h2 { flex: 1; min-width: 0; font-size: var(--fs-1); font-weight: 800; }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 18px 22px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(246, 238, 220, 0.25) transparent; }
.panel-body h3 { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: var(--fs--1); font-weight: 700; color: var(--saffron-hi); }
.panel-body h3:first-child { margin-block-start: 4px; }
.panel-body h3 .count { margin-inline-start: auto; color: var(--ivory-3); font-weight: 500; }
.note { font-size: var(--fs--1); color: var(--ivory-2); }
.note.small { font-size: var(--fs--2); }
.acts { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.check { display: flex; align-items: center; gap: 8px; margin-block: 10px; font-size: var(--fs--1); cursor: pointer; }
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 28px 12px; text-align: center; color: var(--ivory-2); font-size: var(--fs--1); }
.empty-state svg { width: 36px; height: 36px; color: var(--ivory-3); }

/* item slots */
.grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.pslot { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border-radius: 10px; border: 1px solid rgba(246, 238, 220, 0.12); background: rgba(4, 8, 28, 0.55); cursor: pointer; }
.pslot:hover { border-color: rgba(246, 238, 220, 0.45); }
.pslot canvas { width: 68%; height: 68%; image-rendering: pixelated; }
.pslot .n { position: absolute; bottom: 0; inset-inline-end: 4px; font-size: var(--fs--2); font-weight: 800; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.pslot.sel { border-color: var(--saffron); box-shadow: inset 0 0 0 1px var(--saffron), 0 0 12px rgba(242, 181, 58, 0.3); }
.pslot.extra { border-style: dashed; border-color: rgba(60, 194, 180, 0.4); }
.equip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.eslot { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 12px; border: 1px solid rgba(246, 238, 220, 0.12); background: rgba(4, 8, 28, 0.45); font-size: var(--fs--2); color: var(--ivory-3); cursor: pointer; }
.eslot.on { color: var(--ivory); border-color: rgba(60, 194, 180, 0.5); }
.eslot canvas, .eslot .empty-eq { width: 30px; height: 30px; image-rendering: pixelated; }
.eslot .empty-eq { border-radius: 8px; border: 1px dashed rgba(246, 238, 220, 0.22); }
.info { margin-block-start: 16px; padding: 14px; border-radius: 14px; background: rgba(4, 8, 28, 0.45); border: 1px solid var(--line-soft); }
.info-top { display: flex; gap: 12px; align-items: center; }
.info-top canvas { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
.iname { font-weight: 700; }
.idesc { margin-block-start: 6px; font-size: var(--fs--1); color: var(--ivory-2); }

/* recipes */
.recipes { display: grid; gap: 6px; }
.recipe {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 4px 12px; width: 100%; padding: 8px 12px 8px 8px; text-align: start;
  border-radius: 12px; border: 1px solid rgba(246, 238, 220, 0.12); background: rgba(4, 8, 28, 0.45); color: var(--ivory); cursor: pointer; font: inherit;
}
:root[dir="rtl"] .recipe { padding: 8px 8px 8px 12px; }
.recipe:hover { border-color: rgba(246, 238, 220, 0.4); background: rgba(53, 84, 184, 0.25); }
.recipe-main { display: grid; gap: 4px; min-width: 0; }
.recipe canvas { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 8px; background: rgba(246, 238, 220, 0.05); }
.recipe .rname { font-weight: 700; font-size: var(--fs-0); }
.recipe .cost { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--fs--2); }
.recipe .cost span { padding: 0 7px; border-radius: 6px; background: rgba(246, 238, 220, 0.07); }
.recipe .cost .have { color: var(--firuze-hi); }
.recipe .cost .need { color: var(--anar-hi); background: rgba(208, 51, 77, 0.12); }
.recipe .why { display: flex; align-items: center; gap: 5px; font-size: var(--fs--2); color: var(--saffron-hi); }
.recipe .why svg { width: 13px; height: 13px; }
.recipe.off { background: rgba(4, 8, 28, 0.3); }
.recipe.off .rname { color: var(--ivory-2); }
.recipe.off canvas { opacity: 0.6; }

/* bazaar */
.store-top { display: grid; gap: 8px; }
.purse { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(80, 56, 10, 0.55); border: 1px solid rgba(242, 181, 58, 0.45); font-weight: 700; color: var(--saffron-hi); }
:root[dir="rtl"] .purse { padding: 6px 10px 6px 14px; }
.purse svg { width: 20px; height: 20px; color: var(--saffron); }
.store-note { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; font-size: var(--fs--2); color: var(--ivory-2); background: rgba(242, 181, 58, 0.08); border: 1px solid rgba(242, 181, 58, 0.25); }
.store-note svg { width: 15px; height: 15px; margin-top: 0.2em; color: var(--saffron); }
.store-mode { margin-block: 14px 4px; }
.cats { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 10px; }
.cats button { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(246, 238, 220, 0.2); background: transparent; color: var(--ivory-2); font: 600 var(--fs--1) / 1.3 var(--font); cursor: pointer; }
.cats button:hover { color: var(--ivory); border-color: rgba(246, 238, 220, 0.45); }
.cats button[aria-pressed="true"] { color: var(--ink); background: var(--ivory); border-color: var(--ivory); }
.wares { display: grid; gap: 6px; }
.ware { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 10px 8px 8px; border-radius: 12px; border: 1px solid rgba(246, 238, 220, 0.12); background: rgba(4, 8, 28, 0.45); }
:root[dir="rtl"] .ware { padding: 8px 8px 8px 10px; }
.ware canvas { width: 44px; height: 44px; image-rendering: pixelated; border-radius: 9px; background: rgba(246, 238, 220, 0.05); }
.ware-main { min-width: 0; display: grid; gap: 1px; }
.ware-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ware-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs--2); color: var(--ivory-3); }
.price { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--saffron-hi); font-size: var(--fs--1); }
.price svg { width: 15px; height: 15px; color: var(--saffron); }
.price s { font-weight: 500; color: var(--ivory-3); margin-inline-start: 2px; }
.ware-acts { display: flex; gap: 4px; }
.ware-acts .btn { min-height: 32px; padding: 0.2em 0.7em; }
.ware.locked { opacity: 0.72; }
.lock { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs--2); font-weight: 700; color: var(--saffron-hi); padding: 2px 8px; border-radius: 999px; background: rgba(242, 181, 58, 0.12); white-space: nowrap; }
.lock svg { width: 13px; height: 13px; }

/* tasks */
.tasks { display: grid; gap: 10px; }
.task { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(246, 238, 220, 0.14); background: rgba(4, 8, 28, 0.45); }
.task-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(246, 238, 220, 0.06); color: var(--firuze-hi); }
.task-icon canvas { width: 34px; height: 34px; image-rendering: pixelated; }
.task-icon svg { width: 24px; height: 24px; }
.task-main { display: grid; gap: 6px; min-width: 0; }
.task-title { font-weight: 700; }
.task-role { font-size: var(--fs--2); color: var(--saffron-hi); font-weight: 600; }
.progress { position: relative; height: 8px; border-radius: 4px; background: rgba(246, 238, 220, 0.12); overflow: hidden; }
.progress i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--firuze-deep), var(--firuze-hi)); }
:root[dir="rtl"] .progress i { margin-inline-start: auto; background: linear-gradient(270deg, var(--firuze-deep), var(--firuze-hi)); }
.task-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: var(--fs--2); color: var(--ivory-2); }
.task-foot .reward { display: inline-flex; align-items: center; gap: 10px; }
.task-foot .reward span { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ivory); }
.task-foot .reward svg { width: 14px; height: 14px; }
.task-foot .reward .c svg { color: var(--saffron); }
.task-foot .reward .x svg { color: var(--firuze-hi); }
.task.done { border-color: rgba(60, 194, 180, 0.6); }

/* court */
.king-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(92, 64, 12, 0.55), rgba(40, 28, 8, 0.4)); border: 1px solid rgba(242, 181, 58, 0.55); }
.king-face { position: relative; grid-row: span 3; width: 76px; height: 76px; }
.king-face canvas { width: 76px; height: 76px; border-radius: 16px; image-rendering: pixelated; background: radial-gradient(circle at 50% 35%, rgba(242, 181, 58, 0.4), rgba(80, 56, 10, 0.4) 70%); }
.king-face svg { position: absolute; top: -12px; inset-inline-start: 22px; width: 32px; height: 32px; color: var(--saffron); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.king-name { font-size: var(--fs-2); font-weight: 800; line-height: 1.2; }
.king-who { font-size: var(--fs--1); color: var(--saffron-hi); }
.king-since { font-size: var(--fs--2); color: var(--ivory-3); }
.king-card.empty { grid-template-columns: 1fr; text-align: center; background: rgba(4, 8, 28, 0.45); border-style: dashed; }
.king-card.empty svg { justify-self: center; width: 34px; height: 34px; color: rgba(242, 181, 58, 0.6); }
.laws { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs--1); }
.laws li { display: flex; gap: 8px; align-items: flex-start; }
.laws li svg { width: 16px; height: 16px; margin-top: 0.25em; color: var(--firuze-hi); }
.decree-card {
  position: relative; margin-block: 8px; padding: 16px 18px; text-align: center; border-radius: 4px;
  background: linear-gradient(180deg, #f8efd9, #ecdcb5); color: #2a1d08; font-weight: 600; line-height: 1.7;
  box-shadow: inset 0 0 0 1px #c9a14a, inset 0 0 0 4px #f8efd9, inset 0 0 0 5px rgba(185, 129, 28, 0.6), 0 8px 18px rgba(3, 6, 22, 0.35);
}
.decree-card::before, .decree-card::after { content: ""; position: absolute; inset-inline: 50%; width: 10px; height: 10px; margin-inline-start: -5px; background: #b9811c; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.decree-card::before { top: 4px; }
.decree-card::after { bottom: 4px; }
.legend { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(4, 8, 28, 0.45); border: 1px solid var(--line-soft); font-size: var(--fs--1); color: var(--ivory-2); }
.riddle { padding: 10px 12px; border-radius: 10px; border-inline-start: 3px solid var(--saffron); background: rgba(242, 181, 58, 0.08); color: var(--ivory); font-weight: 600; }
.royal-form { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid rgba(242, 181, 58, 0.4); background: rgba(4, 8, 28, 0.4); margin-block-end: 10px; }
.royal-form legend, .royal-form .rf-title { font-size: var(--fs--1); font-weight: 700; color: var(--ivory); }
.rf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rf-row > input, .rf-row > select { flex: 1 1 140px; }
.rf-row > input.short { flex: 0 0 90px; }
.rf-range { display: flex; gap: 12px; align-items: center; }
.rf-range input { flex: 1; }
.rf-range output { min-width: 3.4em; font-weight: 800; color: var(--saffron-hi); text-align: end; }
textarea { resize: vertical; min-height: 4.5em; }

/* tribe */
.members { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.members li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(4, 8, 28, 0.4); }
.members .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(246, 238, 220, 0.25); flex: none; }
.dot.on { background: var(--firuze); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid rgba(246, 238, 220, 0.25); cursor: pointer; background: var(--sw); }
.swatch[aria-checked="true"] { border-color: var(--ivory); box-shadow: 0 0 0 2px var(--saffron); }
.invite-box { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--tc, var(--saffron)); background: rgba(4, 8, 28, 0.45); margin-block-end: 12px; }
.tribe-name { display: flex; align-items: center; gap: 10px; font-size: var(--fs-2); font-weight: 800; }
.tribe-name i { width: 16px; height: 16px; border-radius: 4px; background: var(--tc); flex: none; }

/* companion */
.ai-mount { min-height: 200px; }

/* ------------------------------------------------------------------ map */
.mapview {
  position: absolute; inset: 5vh calc(var(--edge) + var(--dock-w) + 10px) 5vh max(var(--edge), 6vw); z-index: 4;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: linear-gradient(180deg, rgba(22, 35, 90, 0.95), rgba(10, 17, 48, 0.97)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(3, 6, 22, 0.6);
}
:root[dir="rtl"] .mapview { inset: 5vh max(var(--edge), 6vw) 5vh calc(var(--edge) + var(--dock-w) + 10px); }
.mapview-size { font-size: var(--fs--2); color: var(--ivory-3); }
.mapview-frame { position: relative; margin: 0 14px; border-radius: 12px; overflow: hidden; background: #0a1131; box-shadow: inset 0 0 0 1px var(--line-soft); }
.mapview-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.mapview-frame canvas:active { cursor: grabbing; }
.mapview-zoom { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; gap: 4px; }
.mapview-zoom .icon-btn { background: rgba(9, 15, 44, 0.85); }
.mapview-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 18px 14px; font-size: var(--fs--2); color: var(--ivory-2); }
.mapview-legend .help { flex-basis: 100%; font-size: var(--fs--2); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.lg.village::before { background: #f6eedc; transform: rotate(45deg); border-radius: 1px; width: 8px; height: 8px; }
.lg.open::before { background: #ffd36b; box-shadow: 0 0 6px #3cc2b4; }
.lg.shut::before { background: #6a6f86; }
.lg.home::before { background: #3cc2b4; border-radius: 50%; }
.lg.you::before { background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px #d0334d; }

/* ------------------------------------------------------------------ notes */
.toast {
  position: absolute; top: 70px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: min(620px, calc(100vw - 32px));
  padding: 10px 18px; border-radius: 14px; text-align: center; font-weight: 600;
  background: rgba(9, 15, 44, 0.9); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(3, 6, 22, 0.45);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.25s, transform 0.25s var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }
.hint {
  position: absolute; bottom: 150px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 32px);
  padding: 5px 14px; border-radius: 999px; background: rgba(9, 15, 44, 0.78); font-size: var(--fs--1); color: var(--ivory);
}
.hint:empty { display: none; }
.banner {
  position: absolute; top: 0; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 32px); z-index: 5;
  padding: 10px 22px; border-radius: 0 0 14px 14px; background: var(--anar-deep); border: 1px solid var(--anar); border-top: 0; font-weight: 600; text-align: center;
}

/* spectator */
.specbar { position: absolute; inset-inline-end: var(--edge); bottom: var(--edge); width: min(320px, calc(100vw - 28px)); display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; }
.spec-title { font-size: var(--fs-1); font-weight: 800; }
.spec-map { display: grid; gap: 4px; font-size: var(--fs--1); font-weight: 600; }
.spec-follow { font-size: var(--fs--1); color: var(--firuze-hi); }
.specbar .help { font-size: var(--fs--2); }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 1180px) {
  .me { max-width: calc(100vw - var(--dock-w) - 3 * var(--edge)); }
  .belt { bottom: 112px; }
  .chat { bottom: 236px; }
  .hint { bottom: 196px; }
}
@media (max-height: 780px) {
  .hud { --dock-h: 400px; }
  .dock-btn { padding: 6px 2px 4px; }
  .dock-btn svg { width: 20px; height: 20px; }
}
@media (max-width: 760px) {
  .hud { --dock-w: 58px; --dock-h: 380px; --edge: 8px; }
  .dock-label { display: none; }
  .dock-btn { padding: 9px 2px; }
  .chat { width: calc(100vw - 16px - var(--dock-w) - 16px); }
  .roster { width: 200px; }
  .specbar .help { display: none; }
  .hud:has(#specbar:not([hidden])) .chat { bottom: 236px; width: calc(100vw - 16px); }
  .side-panel { inset-inline: var(--edge); width: auto; top: auto; height: 78vh; z-index: 6; }
  .mapview { inset: 8px !important; z-index: 6; }
  .slot { width: 40px; height: 40px; }
  .slot canvas { width: 26px; height: 26px; }
  .ab { width: 64px; }
  .xp { width: 120px; }
}

/* ================================================================== touch screens
   html.touch (touch.js) on phones and tablets; html[data-tc] says which controls show (play | watch | off).
   Thumbs do not change with the language: the stick stays at the lower left and the action pad at the lower
   right (physical sides), while the top of the screen mirrors in Persian like everything else. */
.tc, .chat-form .tc-only, .dock-btn.dock-more { display: none; }
.dock-more-list { display: contents; }

:root.touch .hud {
  --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
  --pt: calc(var(--sa-t) + 8px); --pr: calc(var(--sa-r) + 8px); --pb: calc(var(--sa-b) + 6px); --pl: calc(var(--sa-l) + 8px);
  --ps: var(--pl); --pe: var(--pr);                         /* inline start / end */
  --edge: 8px;
  --dk: 44px;                                               /* dock button */
  --dock-n: 9;
  --dock-len: calc(var(--dock-n) * var(--dk) + (var(--dock-n) - 1) * 2px + 10px);
  --slot: clamp(36px, calc((100vw - var(--pl) - var(--pr) - 38px) / 8), 50px);
  --belt-h: calc(var(--slot) + 10px);
  /* the action pad: jump button size, other buttons, inner and outer arcs, centre of the jump button */
  --j: 66px; --b: 52px; --r1: 76px; --r2: 134px;
  --pad-x: calc(var(--pr) + 6px + var(--j) / 2);
  --pad-y: calc(var(--pb) + var(--belt-h) + 12px + var(--j) / 2);
  --pad-top: calc(var(--pad-y) + var(--r2) * 0.95 + var(--b) / 2);
  --top-h: 60px;                                            /* the "me" card */
}
:root.touch[dir="rtl"] .hud { --ps: var(--pr); --pe: var(--pl); }
@media (orientation: landscape) {
  :root.touch .hud {
    --slot: clamp(34px, calc((100vw - 2 * var(--pr) - 2 * 152px - 38px) / 8), 50px);
    --pad-y: calc(var(--pb) + 4px + var(--j) / 2);
    --top-h: 56px;
  }
}
/* short screens on their side: a more compact pad, so the round buttons stay below the player list */
@media (orientation: landscape) and (max-height: 420px) {
  :root.touch .hud { --j: 60px; --b: 48px; --r1: 68px; --r2: 120px; }
}
/* small screens fold the less used panels behind "More" */
@media (orientation: landscape) and (max-width: 799px), (orientation: portrait) and (max-height: 759px) {
  :root.touch .hud { --dock-n: 5; }
  :root.touch .dock-btn.dock-more { display: grid; }
  :root.touch .dock-more-list { display: none; }
  :root.touch .dock.more-open .dock-more-list {
    position: absolute; z-index: 3; display: grid; gap: 2px; padding: 6px; width: max-content; min-width: 180px;
    background: rgba(9, 15, 44, 0.96); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(3, 6, 22, 0.55);
  }
  :root.touch .dock.more-open .dock-more-list .dock-btn {
    width: auto; height: 46px; grid-auto-flow: column; justify-content: start; gap: 12px; padding: 0 16px 0 12px;
    font-size: var(--fs-0); color: var(--ivory);
  }
  :root.touch[dir="rtl"] .dock.more-open .dock-more-list .dock-btn { padding: 0 12px 0 16px; }
  :root.touch .dock.more-open .dock-more-list .dock-label { display: block; }
  :root.touch .dock-more-list:has([aria-pressed="true"]) ~ .dock-more { color: var(--saffron-hi); }
}
@media (orientation: landscape) {
  :root.touch .dock.more-open .dock-more-list { top: calc(100% + 6px); inset-inline-end: 0; }
}
@media (orientation: portrait) {
  :root.touch .dock.more-open .dock-more-list { top: 0; inset-inline-end: calc(100% + 6px); }
}

/* the page never moves; the HUD's own text is not for selecting */
:root.touch .hud { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:root.touch .hud :is(.panel-body, .roster, .mapview-legend, .chat.open .chat-log) { touch-action: pan-y; }
:root.touch .hud :is(input, textarea, select) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
:root.touch .hud button { touch-action: manipulation; }

/* ------------------------------------------------------------------ touch: the top */
:root.touch .me {
  position: fixed; top: var(--pt); bottom: auto; inset-inline-start: var(--ps); z-index: 1;
  gap: 10px; min-height: 52px; padding: 5px 12px 5px 5px; border-radius: 16px;
  max-width: calc(100vw - var(--ps) - var(--pe) - var(--dock-len) - 2 * 40px - 26px);   /* beside the turn buttons and the dock */
}
:root.touch[dir="rtl"] .me { padding: 5px 5px 5px 12px; }
:root.touch .me-portrait, :root.touch .me-portrait canvas { width: 42px; height: 42px; }
:root.touch .me-portrait canvas { border-radius: 11px; }
:root.touch .level-star { width: 26px; height: 26px; bottom: -7px; inset-inline-end: -9px; }
:root.touch .level-star b { font-size: 10.5px; }
:root.touch .me-info { gap: 2px; }
:root.touch .me-line b { font-size: var(--fs--1); }
:root.touch .me-line span { display: none; }
:root.touch .hearts svg { width: 16px; height: 16px; }
:root.touch .xp, :root.touch .breath { width: auto; min-width: 96px; height: 5px; }
:root.touch .coins { position: relative; bottom: auto; inset-inline-start: auto; flex: none; align-self: center; padding: 3px 10px 3px 6px; box-shadow: none; }
:root.touch[dir="rtl"] .coins { padding: 3px 6px 3px 10px; }
:root.touch .coins svg { width: 17px; height: 17px; }
:root.touch .coins b { font-size: var(--fs--1); }
:root.touch .coins-delta { inset-inline-start: auto; inset-inline-end: 0; top: calc(100% + 4px); }

:root.touch .dock {
  position: fixed; top: var(--pt); bottom: auto; inset-inline-end: var(--pe); z-index: 2;
  width: auto; flex-direction: row; padding: 4px; gap: 2px; border-radius: 15px;
}
:root.touch .dock-btn { width: var(--dk); height: var(--dk); padding: 0; place-items: center; place-content: center; border-radius: 11px; }
:root.touch .dock-btn svg { width: 22px; height: 22px; }
:root.touch .dock-btn .dock-label, :root.touch .dock-btn kbd { display: none; }
:root.touch .dock-btn:active { background: rgba(246, 238, 220, 0.14); }
@media (orientation: portrait) {
  :root.touch .dock { flex-direction: column; }
  :root.touch .me { max-width: calc(100vw - var(--ps) - var(--pe) - var(--dk) - 22px); }
}

:root.touch .hud-top { top: calc(var(--pt) + var(--top-h) + 8px); inset-inline-start: var(--ps); inset-inline-end: var(--pe); gap: 8px; }
:root.touch .chip { max-width: min(62vw, 340px); padding-block: 4px; }
:root.touch .seek { padding-block: 3px; }
:root.touch .seek-dial { width: 36px; height: 36px; }
:root.touch .roster { width: min(240px, 46vw); max-height: 34vh; padding: 4px 8px 6px; border-radius: 14px; }
:root.touch .roster-toggle { width: 36px; height: 36px; }
@media (orientation: portrait) {
  :root.touch .hud-top { inset-inline-end: calc(var(--pe) + var(--dk) + 18px); flex-direction: column; align-items: flex-start; }
  :root.touch .roster { width: min(250px, 100%); }
}
/* watching: no portrait card and no dock, so the top is free */
:root.touch[data-tc="watch"] .hud-top { top: var(--pt); inset-inline-end: var(--pe); flex-direction: row; }
:root.touch[data-tc="watch"] .roster { max-height: 40vh; }

/* ------------------------------------------------------------------ touch: the bottom */
:root.touch .belt { position: fixed; bottom: var(--pb); z-index: 1; gap: 0; max-width: calc(100vw - var(--pl) - var(--pr)); }
:root.touch .abilities { display: none; }
:root.touch .hotbar { gap: 4px; padding: 4px; border-radius: 15px; }
:root.touch .slot { width: var(--slot); height: var(--slot); border-radius: 10px; }
:root.touch .slot canvas { width: calc(var(--slot) * 0.66); height: calc(var(--slot) * 0.66); }
:root.touch .slot .k { display: none; }
:root.touch .slot .n { bottom: 0; inset-inline-end: 3px; font-size: 12px; }
:root.touch .slot.sel { transform: translateY(-3px); }
:root.touch .slot-name { bottom: calc(100% + 8px); }

:root.touch .hint { display: none; }
:root.touch .toast { top: calc(var(--pt) + var(--top-h) + 6px); max-width: min(560px, calc(100vw - 2 * var(--pe) - 2 * var(--dk) - 24px)); padding: 8px 14px; font-size: var(--fs--1); }

/* the chat log: a few lines at the left, never in the way of the fingers */
:root.touch .chat {
  position: fixed; z-index: 1; inset-inline-start: var(--ps); bottom: calc(var(--pb) + 150px);
  width: min(42vw, 360px);
}
:root.touch .chat-log { max-height: min(30vh, calc(100vh - var(--pt) - var(--top-h) - 150px - var(--pb) - 64px)); pointer-events: none; }
:root.touch .chat-log li { font-size: 13px; padding: 2px 9px 3px; }
:root.touch .chat-hint { display: none; }
@media (orientation: portrait) {
  :root.touch .chat { bottom: calc(var(--pad-top) + 102px); width: calc(100vw - var(--ps) - var(--pe) - 86px - 16px); }
  :root.touch .chat-log { max-height: min(24vh, calc(100vh - var(--pad-top) - 102px - var(--pt) - var(--top-h) - 96px)); }
}
@media (orientation: landscape) {
  :root.touch .chat { inset-inline-start: auto; left: var(--pl); right: auto; }
  :root.touch[dir="rtl"] .chat-log li { justify-self: end; }
  :root.touch .roster { position: relative; z-index: 2; }
}
/* talking: the field at the top (clear of the on-screen keyboard), the log below it */
:root.touch .chat.open {
  top: var(--pt); bottom: auto; left: var(--pl); right: var(--pr); width: auto; z-index: 7;
  display: flex; flex-direction: column-reverse; gap: 8px;
}
:root.touch .chat.open .chat-log {
  max-height: 38vh; pointer-events: auto; overflow-y: auto; -webkit-mask-image: none; mask-image: none;
  padding: 6px; border-radius: 14px; background: rgba(9, 15, 44, 0.86); border: 1px solid var(--line-soft);
}
:root.touch .chat.open .chat-log:empty { display: none; }
:root.touch .chat-form { display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 16px; background: rgba(9, 15, 44, 0.94); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(3, 6, 22, 0.5); }
:root.touch .chat-form[hidden] { display: none; }
:root.touch .chat-form input { flex: 1; min-height: 46px; font-size: 16px; }
:root.touch .chat-form .tc-only { display: inline-grid; width: 46px; height: 46px; border-radius: 12px; }
:root.touch .chat-form .chat-send { color: var(--ink); background: var(--saffron); border-color: #ffe3a3; }
:root.touch .chat-form .tc-only svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ touch: the controls */
:root.touch .tc { display: block; position: fixed; inset: 0; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:root.touch .tc :is(.tc-zone, .tc-pad, .tc-quick, .tc-cam, .tc-watch, .tc-hint) { display: none; }
:root.touch[data-tc="play"] .tc :is(.tc-zone, .tc-pad, .tc-quick, .tc-cam) { display: block; }
:root.touch[data-tc="watch"] .tc :is(.tc-cam, .tc-watch) { display: flex; }
:root.touch[data-tc="play"] .tc .tc-hint:not([hidden]) { display: block; }
:root.touch .tc button { pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
:root.touch .tc svg { width: 24px; height: 24px; }

/* the stick: appears where the left thumb lands */
.tc-zone { position: fixed; left: 0; bottom: 0; width: min(46vw, 380px); height: 62vh; pointer-events: auto; touch-action: none; }
.tc-stick {
  position: absolute; left: calc(var(--sa-l) + 30px); bottom: calc(var(--sa-b) + 26px); width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(9, 15, 44, 0.12), rgba(9, 15, 44, 0.42));
  border: 1.5px solid rgba(246, 238, 220, 0.3); box-shadow: inset 0 0 0 6px rgba(246, 238, 220, 0.04);
  opacity: 0.55; transition: opacity 0.18s;
}
.tc-stick.on { opacity: 1; transition: none; border-color: rgba(242, 181, 58, 0.55); }
.tc-knob {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6df, var(--ivory) 45%, #cdbf9f);
  box-shadow: 0 4px 12px rgba(3, 6, 22, 0.5), inset 0 -2px 0 rgba(120, 96, 50, 0.4);
}
.tc-stick.go .tc-knob { background: radial-gradient(circle at 40% 35%, #ffe7a8, var(--saffron) 55%, var(--saffron-deep)); }
@media (orientation: portrait) {
  .tc-zone { bottom: calc(var(--pb) + var(--belt-h) + 6px); width: min(50vw, calc(100vw - var(--pad-x) - var(--r2) * 0.87 - var(--b) / 2 - 8px)); height: min(46vh, 340px); }
  .tc-stick { bottom: 16px; }
}

/* the action pad: jump in the corner, down and the two abilities around it, use and eat further out */
.tc-pad { position: fixed; right: var(--pad-x); bottom: var(--pad-y); width: 0; height: 0; }
.tc-btn {
  --a: 0deg; --r: 0px; --s: var(--b);
  position: absolute; left: calc(cos(var(--a)) * var(--r) - var(--s) / 2); top: calc(sin(var(--a)) * var(--r) * -1 - var(--s) / 2);
  width: var(--s); height: var(--s); padding: 0; display: grid; place-items: center; place-content: center; gap: 1px;
  border-radius: 50%; border: 1.5px solid rgba(246, 238, 220, 0.34); color: var(--ivory); cursor: pointer;
  background: radial-gradient(circle at 50% 30%, rgba(53, 84, 184, 0.62), rgba(9, 15, 44, 0.78) 72%);
  box-shadow: 0 6px 16px rgba(3, 6, 22, 0.4), inset 0 1px 0 rgba(246, 238, 220, 0.12);
  font: 700 11px / 1.1 var(--font);
  transition: transform 0.08s, background-color 0.08s;
}
.tc-btn.on { transform: scale(0.93); border-color: var(--saffron); background: radial-gradient(circle at 50% 30%, rgba(242, 181, 58, 0.55), rgba(80, 56, 10, 0.85) 75%); }
.tc-jump { --s: var(--j); border-width: 2px; border-color: rgba(242, 181, 58, 0.7); background: radial-gradient(circle at 50% 30%, rgba(242, 181, 58, 0.5), rgba(9, 15, 44, 0.8) 75%); }
.tc-jump svg { width: 30px !important; height: 30px !important; }
.tc-down { --a: 180deg; --r: var(--r1); }
.tc-a1 { --a: 135deg; --r: var(--r1); }
.tc-a2 { --a: 90deg; --r: var(--r1); }
.tc-use { --a: 160deg; --r: var(--r2); }
.tc-eat { --a: 116deg; --r: var(--r2); }
.tc-eat svg { color: var(--anar); }
.tc-cap { font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--ivory-2); max-width: calc(var(--s) - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-btn > svg { width: 22px !important; height: 22px !important; }
/* role abilities: the label, with the cooldown sweeping over it */
.tc-ab { --s: calc(var(--b) + 4px); overflow: hidden; border-color: rgba(60, 194, 180, 0.55); }
.tc-ab.none { display: none !important; }
.tc-ab-label { position: relative; z-index: 1; padding: 0 5px; font-size: 11.5px; font-weight: 700; line-height: 1.15; text-align: center; color: var(--ivory);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(3, 6, 22, 0.8); }
:root:lang(fa) .tc-ab-label { font-size: 12px; line-height: 1.3; -webkit-line-clamp: 2; }
.tc-ab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(rgba(3, 6, 22, 0.75) calc(var(--cd, 0) * 360deg), rgba(0, 0, 0, 0) 0); pointer-events: none; }
.tc-ab.cool { border-color: rgba(246, 238, 220, 0.2); }
.tc-ab.cool .tc-ab-label { color: var(--ivory-2); }
.tc-ab[data-badge]::before {
  content: attr(data-badge); position: absolute; z-index: 2; top: 2px; left: 50%; transform: translateX(-50%);
  padding: 0 5px; border-radius: 999px; background: var(--firuze-deep); color: #e8fffb; font-size: 10px; line-height: 1.4;
}

@media (orientation: portrait) {
  .tc-use { --a: 150deg; }
  .tc-eat { --a: 108deg; }
}

/* small round buttons: talk, rest, head home; turn and zoom the camera */
.tc-quick, .tc-cam { position: fixed; gap: 8px; }
.tc-quick { direction: ltr; }
:root.touch[dir="rtl"] .tc-cam { flex-direction: row-reverse; }      /* keep "turn left" on the left */
.tc-quick { right: var(--pr); bottom: calc(var(--pad-top) + 10px); }
:root.touch[data-tc="play"] .tc .tc-quick { display: flex; }
.tc-mini {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-soft); color: var(--ivory); background: rgba(9, 15, 44, 0.74); box-shadow: 0 6px 16px rgba(3, 6, 22, 0.35);
}
.tc-mini svg { width: 21px !important; height: 21px !important; }
.tc-mini.on { background: rgba(53, 84, 184, 0.8); border-color: var(--saffron); }
.tc-cam .tc-mini { width: 40px; height: 40px; border-radius: 12px; }
/* playing: the turn buttons wait beside the dock (below it when the dock stands upright);
   zoom joins the round buttons by the right thumb */
:root.touch[data-tc="play"] .tc .tc-cam { display: contents; }
:root.touch[data-tc="play"] .tc-cam .tc-mini { position: fixed; }
:root.touch[data-tc="play"] .tc-cam .tc-mini:nth-child(-n+2) { top: var(--pt); --cam-e: calc(var(--pe) + var(--dock-len) + 8px); }
:root.touch[data-tc="play"] .tc-cam .tc-mini:nth-child(1) { inset-inline-end: calc(var(--cam-e) + 46px); }
:root.touch[data-tc="play"] .tc-cam .tc-mini:nth-child(2) { inset-inline-end: var(--cam-e); }
:root.touch[dir="rtl"][data-tc="play"] .tc-cam .tc-mini:nth-child(1) { inset-inline-end: var(--cam-e); }
:root.touch[dir="rtl"][data-tc="play"] .tc-cam .tc-mini:nth-child(2) { inset-inline-end: calc(var(--cam-e) + 46px); }
:root.touch[data-tc="play"] .tc-cam .tc-mini:nth-child(n+3) { width: 44px; height: 44px; border-radius: 50%; bottom: calc(var(--pad-top) + 10px); }
:root.touch[data-tc="play"] .tc-cam .tc-mini:nth-child(3) { right: calc(var(--pr) + 3 * 52px); }
:root.touch[data-tc="play"] .tc-cam .tc-mini:nth-child(4) { right: calc(var(--pr) + 4 * 52px); }
@media (orientation: portrait) {
  :root.touch[data-tc="play"] .tc-cam .tc-mini:nth-child(-n+2) { top: calc(var(--pt) + var(--dock-len) + 8px); --cam-e: var(--pe); }
}
/* watching: the camera and follow buttons together at the lower start */
:root.touch[data-tc="watch"] .tc-cam { top: auto; bottom: calc(var(--pb) + 52px); inset-inline-start: var(--ps); inset-inline-end: auto; width: auto; flex-wrap: nowrap; }
.tc-watch { position: fixed; bottom: var(--pb); inset-inline-start: var(--ps); gap: 6px; flex-wrap: wrap; max-width: calc(100vw - var(--ps) - var(--pe)); }
.tc-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-soft); color: var(--ivory); background: rgba(9, 15, 44, 0.8); font: 600 var(--fs--1) / 1.2 var(--font);
}
.tc-pill svg { width: 19px !important; height: 19px !important; color: var(--firuze-hi); }
.tc-pill.on { background: rgba(53, 84, 184, 0.8); }

/* the hint, as a button when there is something to do */
.tc-hint {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--pb) + var(--belt-h) + 30px);
  width: max-content; max-width: calc(100vw - 2 * (var(--pad-x) + var(--r2) * 0.94 + var(--b) / 2 + 8px)); padding: 6px 14px; border-radius: 18px;
  border: 1px solid var(--line-soft); background: rgba(9, 15, 44, 0.82); color: var(--ivory); text-align: center;
  font: 500 var(--fs--1) / 1.4 var(--font); pointer-events: none;
}
.tc-hint.act { pointer-events: auto; border-color: rgba(242, 181, 58, 0.6); background: rgba(46, 33, 8, 0.88); }
.tc-hint.act::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 50%; background: var(--saffron); vertical-align: 0.1em; }
@media (orientation: portrait) {
  .tc-hint { bottom: calc(var(--pad-top) + 60px); max-width: calc(100vw - 2 * var(--pr) - 8px); }
}

/* watching on a touch screen */
:root.touch .specbar { inset-inline-end: var(--pe); bottom: var(--pb); width: min(300px, calc(100vw - var(--ps) - var(--pe))); padding: 10px 12px; gap: 6px; }
:root.touch .specbar .help { display: none; }
:root.touch .spec-title { font-size: var(--fs-0); }
:root.touch .hud:has(#specbar:not([hidden])) .chat { bottom: calc(var(--pb) + 110px); }
@media (orientation: portrait) {
  :root.touch .specbar { inset-inline: var(--ps) var(--pe); width: auto; bottom: calc(var(--pb) + 104px); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  :root.touch .specbar .spec-title { grid-column: 1 / -1; grid-row: 1; }
  :root.touch .specbar .spec-map { grid-column: 1; grid-row: 2; }
  :root.touch .specbar #spec-join { grid-column: 2; grid-row: 2; align-self: end; min-height: 46px; padding-inline: 1.4em; }
  :root.touch .specbar .spec-follow { grid-column: 1 / -1; grid-row: 3; }
  :root.touch .hud:has(#specbar:not([hidden])) .chat { bottom: calc(var(--pb) + 270px); width: calc(100vw - var(--ps) - var(--pe)); }
  :root.touch .hud:has(#specbar:not([hidden])) .chat-log { max-height: min(24vh, calc(100vh - var(--pb) - 270px - var(--pt) - 120px)); }
}

/* ------------------------------------------------------------------ touch: panels, the map and dialogs as sheets */
:root.touch .side-panel {
  position: fixed; z-index: 6; top: var(--pt); bottom: var(--pb); inset-inline-end: var(--pe); inset-inline-start: auto;
  width: min(480px, calc(100vw - var(--ps) - var(--pe))); height: auto;
}
:root.touch .panel-head { min-height: 56px; padding-block: 6px; }
:root.touch .panel-head .icon-btn, :root.touch .mapview .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
:root.touch .panel-body { padding-bottom: calc(var(--pb) + 18px); -webkit-overflow-scrolling: touch; }
:root.touch .mapview { position: fixed; z-index: 6; inset: var(--pt) var(--pr) var(--pb) var(--pl) !important; }
:root.touch .mapview-zoom { gap: 6px; }
:root.touch .grid { gap: 6px; }
:root.touch .pslot .n { font-size: 12px; }
:root.touch .cats button { min-height: 40px; padding-inline: 14px; }
:root.touch .ware-acts .btn { min-height: 42px; padding-inline: 0.9em; }
:root.touch .btn.small { min-height: 42px; }
:root.touch .recipe { min-height: 56px; }
:root.touch .swatch { width: 40px; height: 40px; }
:root.touch .check { min-height: 40px; }
:root.touch .check input { width: 22px; height: 22px; }
:root.touch .eslot { min-height: 60px; }
@media (max-width: 699px), (max-height: 500px) {
  :root.touch .side-panel { inset: 0; width: auto; border-radius: 0; border: 0; padding: var(--sa-t) var(--sa-r) 0 var(--sa-l); background: linear-gradient(180deg, rgba(22, 35, 90, 0.985), rgba(10, 17, 48, 0.99)); }
  :root.touch .mapview { inset: 0 !important; border-radius: 0; border: 0; padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); }
  :root.touch .mapview-frame { margin: 0 8px; }
  :root.touch .mapview-legend { padding: 8px 12px 10px; }
}
/* phones on their side: a full-height sheet at the end, not the whole width */
@media (max-height: 500px) and (min-width: 700px) {
  :root.touch .side-panel {
    inset: 0 0 0 auto; inset-inline-start: auto; inset-inline-end: 0; width: min(540px, 68vw);
    border-radius: 0; border-width: 0; border-inline-start-width: 1px;
    padding: 0 var(--sa-r) 0 0;
  }
  :root.touch[dir="rtl"] .side-panel { padding: 0 0 0 var(--sa-l); }
}
@media (max-width: 699px) {
  :root.touch .panel-body { padding-inline: 14px; }
  :root.touch .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  :root.touch .equip { gap: 4px; }
  :root.touch .ware { grid-template-columns: 40px minmax(0, 1fr); }
  :root.touch .ware canvas { width: 40px; height: 40px; }
  :root.touch .ware-acts { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
  :root.touch .king-card:not(.empty) { grid-template-columns: 60px minmax(0, 1fr); }
  :root.touch .king-face, :root.touch .king-face canvas { width: 60px; height: 60px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root.touch .mapview-legend .help { display: none; }
  :root.touch .mapview { grid-template-rows: auto minmax(0, 1fr) auto; }
}
:root.touch[dir="rtl"] .tc-watch .tc-pill:first-child svg { transform: scaleX(-1); }