/* ممالك الرمال — sand ground, teal saddle-cloth chrome with the rider's gold zigzag trim. */
:root {
  --sand-1: #efdcae;
  --sand-2: #dcbb7f;
  --sand-3: #b88c53;
  --sand-4: #8d6537;
  --teal-9: #072f31;
  --teal-8: #0c4446;
  --teal-7: #135759;
  --teal-5: #2b7c78;
  --gold: #d4a84a;
  --gold-hi: #f3d68c;
  --ink: #2b1d0e;
  --ink-2: #5a4329;
  --paper: #f9eed5;
  --paper-2: #d9cfb5;
  --bad: #a8432a;
  --good: #2f7a52;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --f-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-disp: 'Reem Kufi', 'IBM Plex Sans Arabic', serif;
  --nav-h: 64px;
  --zig: 10px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-block-size: 100dvh;
  font: 400 15px/1.55 var(--f-body);
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 80% -10%, #f6e7c3 0%, transparent 60%),
    radial-gradient(90% 50% at 0% 100%, #c9a065 0%, transparent 70%),
    var(--sand-2);
  background-attachment: fixed;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--f-disp); font-weight: 700; line-height: 1.3; }
button, input { font: inherit; color: inherit; }
img { max-inline-size: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 46px; padding: 0 20px;
  border: 0; border-radius: var(--r-md);
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn.primary {
  color: var(--teal-9);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: inset 0 -3px 0 #a87c25, 0 2px 0 rgb(60 35 10 / .25);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.05); }
.btn.ghost { background: transparent; color: var(--paper-2); box-shadow: inset 0 0 0 1.5px rgb(249 238 213 / .35); }
.btn:disabled { cursor: not-allowed; color: #6d7a74; background: #c9c0a8; box-shadow: none; }
.btn.wide { inline-size: 100%; }
.icon-btn {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .08); color: var(--paper);
  font-size: 26px; line-height: 1.3; cursor: pointer; text-decoration: none;
}
/* Back points to the inline-start, which is the right in RTL: drawn by hand, not mirrored by glyph. */
.chev, .chev-l { display: inline-block; inline-size: 12px; block-size: 12px; border: solid currentColor; border-width: 0 3px 3px 0; }
.chev { transform: rotate(-45deg); margin-inline-end: 4px; }
.chev-l { transform: rotate(135deg); margin: 0 10px; inline-size: 9px; block-size: 9px; border-width: 0 2.5px 2.5px 0; }

/* ---------- lobby ---------- */
.lobby { max-inline-size: 1180px; margin: 0 auto; padding: 0 16px 48px; }
.lobby-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 0 22px;
}
.lobby-brand { display: flex; align-items: center; gap: 12px; }
.brand-rider { inline-size: 76px; block-size: 76px; object-fit: contain; filter: drop-shadow(0 6px 6px rgb(80 50 20 / .3)); transform: scaleX(-1); }
.brand { font-size: 34px; color: var(--teal-8); letter-spacing: 0; }
.tagline { color: var(--ink-2); font-size: 15px; max-inline-size: 34ch; }
.admin-link { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; font-size: 14px; color: var(--teal-8); font-weight: 600; padding: 0 8px; }
.worlds { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.world {
  --edge: var(--teal-7);
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 20px;
  color: var(--paper);
  background: linear-gradient(170deg, var(--teal-7), var(--teal-8) 55%, var(--teal-9));
  border-radius: var(--r-lg) var(--r-lg) 4px 4px;
  box-shadow: inset 0 0 0 1px rgb(243 214 140 / .22), 0 10px 22px -10px rgb(60 35 10 / .55);
  margin-block-end: var(--zig);
}
.world::after { /* gold zigzag hem */
  content: ''; position: absolute; inset-inline: 0; inset-block-end: calc(-1 * var(--zig)); block-size: var(--zig);
  background:
    linear-gradient(135deg, var(--gold) 50%, transparent 50%) 0 0 / calc(var(--zig) * 2) var(--zig) repeat-x,
    linear-gradient(225deg, var(--gold) 50%, transparent 50%) var(--zig) 0 / calc(var(--zig) * 2) var(--zig) repeat-x;
}
.world.strong {
  background: linear-gradient(170deg, #1c625e, var(--teal-8) 50%, #06292b);
  box-shadow: inset 0 0 0 2px var(--gold), 0 14px 26px -10px rgb(60 35 10 / .6);
}
.world-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.world-name { font-size: 28px; color: var(--paper); }
.tier {
  font-family: var(--f-disp); font-size: 15px; font-weight: 700;
  color: var(--teal-9); background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  padding: 2px 12px 4px; border-radius: 999px;
}
.world-why { color: var(--paper-2); font-size: 14px; line-height: 1.5; min-block-size: 3em; }
.world-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; gap: 4px; border-block: 1px solid rgb(243 214 140 / .18); padding-block: 10px; }
.world-facts div { display: flex; flex-direction: column; gap: 0; }
.world-facts dt { font-size: 13px; color: var(--paper-2); opacity: .85; }
.world-facts dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--gold-hi); }
.world-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.countdown { font-size: 14px; color: var(--paper); }
.countdown[data-state="soon"] { color: var(--gold-hi); }
.world.st-ended { filter: saturate(.55); }

/* ---------- world shell ---------- */
.wshell { min-block-size: 100dvh; display: flex; flex-direction: column; padding-block-end: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
.w-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px;
  background: var(--teal-9); color: var(--paper);
}
.w-titles { min-inline-size: 0; }
.w-title { font-size: 20px; color: var(--gold-hi); }
.w-sub { display: flex; flex-wrap: wrap; column-gap: 12px; font-size: 13px; color: var(--paper-2); }
.w-village { font-weight: 600; color: var(--paper); }

.resbar {
  list-style: none; margin: 0 0 var(--zig); padding: 10px 12px 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
  background: var(--teal-8);
  position: sticky; inset-block-start: 0; z-index: 30;
  box-shadow: 0 6px 14px -8px rgb(30 20 5 / .6);
}
.resbar::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: calc(-1 * var(--zig)); block-size: var(--zig);
  background:
    linear-gradient(135deg, var(--gold) 50%, transparent 50%) 0 0 / calc(var(--zig) * 2) var(--zig) repeat-x,
    linear-gradient(225deg, var(--gold) 50%, transparent 50%) var(--zig) 0 / calc(var(--zig) * 2) var(--zig) repeat-x;
}
.res {
  position: relative;
  display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 8px;
  padding: 6px 10px 9px; border-radius: var(--r-sm);
  background: rgb(0 0 0 / .18); color: var(--paper);
}
.ricon { inline-size: 28px; block-size: 28px; object-fit: contain; }
.res-line { font-size: 16px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.res-cap { font-size: 13px; font-weight: 400; color: var(--paper-2); margin-inline-start: 2px; }
.res-rate { font-size: 13px; color: #9fd0c6; line-height: 1.3; }
.res-fill { position: absolute; inset-inline: 10px; inset-block-end: 4px; block-size: 3px; border-radius: 3px; background: rgb(255 255 255 / .12); overflow: hidden; }
.res-fill i { display: block; block-size: 100%; inline-size: 0; background: var(--gold); transition: inline-size .25s linear; }
.res.full .res-fill i { background: #e0794f; }
.res.full .res-cap::after { content: ' ممتلئ'; color: #f0a07d; }
.res-pop {
  position: absolute; inset-inline-start: 34px; inset-block-start: -12px; z-index: 2;
  padding: 0 8px; border-radius: 999px; line-height: 1.5;
  font-weight: 700; font-size: 15px; color: var(--teal-9); background: var(--gold-hi); opacity: 0; pointer-events: none;
}
.res.gain { animation: gain-glow 1.6s ease-out; }
.res.gain .res-pop { animation: gain-pop 1.6s ease-out; }
@keyframes gain-glow { 0%, 40% { background: rgb(243 214 140 / .35); } 100% { background: rgb(0 0 0 / .18); } }
@keyframes gain-pop { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

.ended-banner { margin: 6px 12px 0; padding: 10px 14px; border-radius: var(--r-md); background: #5b2f1d; color: var(--paper); font-size: 14px; }

.w-main { flex: 1; display: flex; flex-direction: column; }
.w-content { flex: 1; min-inline-size: 0; }
.w-side { order: -1; }
.activity { list-style: none; margin: 6px 12px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.act {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-md);
  background: rgb(249 238 213 / .78); font-size: 14px; line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgb(141 101 55 / .25);
}
.act.idle { display: none; }
.act-t { font-weight: 700; color: var(--teal-8); font-size: 15px; }
.act-ic { inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--teal-5); }
.act.build .act-ic { border-radius: 4px; background: conic-gradient(var(--gold) 0 25%, var(--teal-5) 0 50%, var(--gold) 0 75%, var(--teal-5) 0); animation: spin 2.4s linear infinite; }
.act.march.back .act-ic { background: var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }

.tabs {
  position: fixed; z-index: 40;
  inset-inline: 12px; inset-block-end: calc(12px + env(safe-area-inset-bottom));
  block-size: var(--nav-h);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 6px; gap: 6px;
  border-radius: 20px; background: var(--teal-9);
  box-shadow: inset 0 0 0 1px rgb(243 214 140 / .3), 0 10px 24px -6px rgb(30 20 5 / .55);
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 14px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--paper-2);
}
.tabs a[aria-current] { background: var(--teal-7); color: var(--gold-hi); box-shadow: inset 0 -3px 0 var(--gold); }
.tab-ic { inline-size: 22px; block-size: 18px; background: currentColor; }
.ic-village { clip-path: polygon(50% 0, 100% 42%, 88% 42%, 88% 100%, 12% 100%, 12% 42%, 0 42%); }
.ic-map { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ic-reports { clip-path: polygon(10% 0, 90% 0, 90% 100%, 50% 78%, 10% 100%); }

/* ---------- village stage ---------- */
.village { padding: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.stage-wrap { min-inline-size: 0; }
.stage { position: relative; inline-size: min(100%, 820px, (100dvh - 250px) * 1.43); aspect-ratio: 1000 / 700; margin: 0 auto; }
/* plateau = the 3×3 tile rhombus (5%..95% wide, 22%..86% tall) plus an earth edge below it */
.plateau { position: absolute; inset: 22% 5% 9%; }
.plateau::before, .plateau::after { content: ''; position: absolute; inset: 0; }
.plateau::after {
  inset-block: 9% -9%;
  clip-path: polygon(0 41%, 50% 91%, 100% 41%, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(90deg, var(--sand-3), var(--sand-4));
}
.plateau::before {
  z-index: 1;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background:
    radial-gradient(45% 35% at 38% 36%, rgb(255 246 220 / .6), transparent 70%),
    linear-gradient(to top right, transparent calc(50% - .5px), rgb(141 101 55 / .14) 50%, transparent calc(50% + .5px)) 0 0 / 33.34% 33.34%,
    linear-gradient(to bottom right, transparent calc(50% - .5px), rgb(141 101 55 / .14) 50%, transparent calc(50% + .5px)) 0 0 / 33.34% 33.34%,
    var(--sand-1);
}
.slot {
  --ax: 50%; --ay: 60%;
  position: absolute; transform: translate(-50%, -60%);
  inline-size: 30%; min-block-size: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.slot.riders { inline-size: 17%; }
.slot.field { transform: translate(-50%, -42%); --ay: 42%; }
.slot-art { display: block; inline-size: 100%; block-size: auto; filter: drop-shadow(0 10px 6px rgb(80 50 20 / .28)); transition: transform .18s ease, filter .18s ease; }
.slot:hover .slot-art, .slot:focus-visible .slot-art { transform: translateY(-3px); filter: drop-shadow(0 14px 8px rgb(80 50 20 / .32)) brightness(1.05); }
/* level badge sits on the ground point, a little in front of the footprint */
.lvl {
  position: absolute; left: var(--ax); top: var(--ay); transform: translate(-50%, 10%);
  display: grid; place-items: center; min-inline-size: 28px; block-size: 28px; padding: 0 6px;
  border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.3;
  color: var(--gold-hi); background: var(--teal-8); box-shadow: inset 0 0 0 2px var(--gold), 0 3px 6px rgb(30 20 5 / .35);
}
.riders .lvl { background: var(--gold); color: var(--teal-9); box-shadow: inset 0 0 0 2px var(--teal-8), 0 3px 6px rgb(30 20 5 / .35); }
.slot-timer {
  position: absolute; left: var(--ax); top: var(--ay); transform: translate(-50%, -150%);
  font-weight: 700; font-size: 14px; padding: 1px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--teal-9); color: var(--gold-hi); box-shadow: 0 0 0 2px var(--gold);
}
.slot.building .slot-art { animation: build-bob 1.2s ease-in-out infinite; }
@keyframes build-bob { 50% { transform: translateY(-2px); filter: drop-shadow(0 10px 6px rgb(80 50 20 / .28)) sepia(.3); } }
.lvl-pop {
  position: absolute; inset-inline: 0; inset-block-start: 0; margin: auto; inline-size: max-content;
  font-family: var(--f-disp); font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--teal-9);
  padding: 2px 12px; border-radius: 999px; background: var(--gold-hi); box-shadow: 0 4px 12px rgb(60 35 10 / .35);
  white-space: nowrap; opacity: 0; pointer-events: none;
}
.slot.leveled .lvl { animation: lvl-pop .9s cubic-bezier(.2, 1.6, .4, 1); }
.slot.leveled .lvl-pop { animation: lvl-rise 2.2s ease-out; }
.slot.leveled .slot-art { animation: lvl-flash 1.1s ease-out; }
@keyframes lvl-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes lvl-rise { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes lvl-flash { 0% { filter: brightness(1.6) drop-shadow(0 0 18px var(--gold-hi)); } 100% { filter: drop-shadow(0 10px 6px rgb(80 50 20 / .28)); } }
.stage-hint, .map-hint { text-align: center; font-size: 13px; color: var(--ink-2); padding: 4px 16px 8px; }

.bpanel { padding: 0 12px; }
.blist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.brow {
  inline-size: 100%; display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "art name lvl" "art state state";
  align-items: center; column-gap: 10px; padding: 6px 12px 6px 10px; border: 0; border-radius: var(--r-md);
  background: rgb(249 238 213 / .82); text-align: start; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(141 101 55 / .2);
}
.brow-art { grid-area: art; inline-size: 40px; block-size: 40px; object-fit: contain; }
.brow-name { grid-area: name; font-weight: 700; font-size: 15px; }
.brow-lvl { grid-area: lvl; font-size: 13px; font-weight: 600; color: var(--teal-8); }
.brow-state { grid-area: state; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.brow[data-state="ready"] .brow-state { color: var(--good); font-weight: 600; }
.brow[data-state="ready"] { box-shadow: inset 0 0 0 1.5px rgb(47 122 82 / .5); }
.brow[data-state="building"] .brow-state { color: var(--teal-8); font-weight: 700; }
.brow[data-state="blocked"] .brow-state { color: #8a5a3c; }

/* ---------- sheets ---------- */
dialog.sheet {
  inline-size: 100%; max-inline-size: 520px; max-block-size: 88dvh;
  margin: auto auto 0; padding: 0 0 env(safe-area-inset-bottom);
  border: 0; border-radius: 22px 22px 0 0;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 -10px 40px rgb(30 20 5 / .35);
  overflow: auto;
}
dialog.sheet[open] { animation: sheet-in .26s cubic-bezier(.2, .9, .3, 1); }
dialog.sheet::backdrop { background: rgb(7 47 49 / .45); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: .4; } }
.sheet-grip { inline-size: 44px; block-size: 5px; border-radius: 3px; background: var(--paper-2); margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 4px; }
.sheet-head h2 { font-size: 22px; color: var(--teal-8); }
.sheet-head .icon-btn { background: rgb(12 68 70 / .08); color: var(--teal-8); }
.sheet-body { padding: 4px 18px 20px; }
.hint { font-size: 13px; color: var(--ink-2); }
.reason { font-size: 14px; color: var(--bad); margin-block-start: 8px; text-align: center; }
.form-err { color: var(--bad); font-size: 14px; min-block-size: 1.3em; }

.join-form, .admin-login { display: flex; flex-direction: column; gap: 10px; }
.join-form label, .admin-login label { font-weight: 600; }
.join-form input, .admin-login input {
  min-block-size: 48px; padding: 0 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--sand-3); background: #fffaf0; font-size: 17px;
}

.build-hero { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.build-art { inline-size: 112px; block-size: 112px; object-fit: contain; }
.build-role { color: var(--ink-2); font-size: 14px; }
.lv-row { display: flex; align-items: center; font-size: 15px; margin-block: 4px; }
.lv-row b { font-family: var(--f-disp); font-size: 26px; color: var(--teal-8); margin-inline-start: 6px; }
.lv-row .chev-l { color: var(--gold); }
.eff { font-size: 14px; }
.eff.next { color: var(--good); font-weight: 600; }
.build-running { margin-block: 10px 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--teal-8); color: var(--gold-hi); font-weight: 600; font-size: 14px; }
.cost { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cost li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: var(--r-sm); background: #f1e2bf; font-weight: 700; font-size: 15px; }
.cost li.short { background: #f4d4c6; color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad); }
.cost .ricon { inline-size: 26px; block-size: 26px; }
.clock-ic { inline-size: 24px; block-size: 24px; border-radius: 50%; border: 2.5px solid var(--teal-8); position: relative; }
.clock-ic::after { content: ''; position: absolute; inset-inline-start: 50%; inset-block-start: 3px; inline-size: 2.5px; block-size: 8px; background: var(--teal-8); transform-origin: bottom; }

/* raid */
.raid-hero { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; margin-block-end: 12px; }
.raid-wolf { inline-size: 84px; }
.raid-wolves { font-family: var(--f-disp); font-size: 20px; color: var(--teal-8); }
.raid-meta { font-size: 14px; color: var(--ink-2); }
.stepper { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: #f1e2bf; margin-block-end: 14px; }
.stepper label { font-weight: 600; }
.step-row { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; }
.step { block-size: 48px; border: 0; border-radius: var(--r-md); background: var(--teal-8); color: var(--gold-hi); font-size: 26px; font-weight: 700; cursor: pointer; }
.step:disabled { background: #c9c0a8; color: #7c7766; cursor: not-allowed; }
.count { text-align: center; font-family: var(--f-disp); font-size: 34px; font-weight: 700; color: var(--teal-8); }
.stepper input[type="range"] { inline-size: 100%; accent-color: var(--teal-7); block-size: 44px; }

/* ---------- map ---------- */
.map { display: flex; flex-direction: column; }
.map-scroll {
  overflow: auto; block-size: max(380px, calc(100dvh - 360px));
  overscroll-behavior: contain; touch-action: pan-x pan-y;
  background: radial-gradient(70% 60% at 50% 40%, #e2c48b, #c49a5d);
  box-shadow: inset 0 10px 20px -12px rgb(30 20 5 / .5);
}
.scene { position: relative; margin: 0 auto; }
.ground {
  position: absolute; inset-inline-start: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgb(141 101 55 / .22) 50%, transparent calc(50% + 1px)) 60px 0 / 120px 60px,
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(141 101 55 / .22) 50%, transparent calc(50% + 1px)) 60px 0 / 120px 60px,
    radial-gradient(60% 60% at 40% 40%, var(--sand-1), var(--sand-2));
}
.paths { position: absolute; inset: 0; pointer-events: none; z-index: 900; overflow: visible; }
.route { stroke: var(--teal-8); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .65; }
.route.back { stroke: #9a6a1f; }
.objects { position: absolute; inset: 0; }
.tile-g { position: absolute; inline-size: 0; block-size: 0; pointer-events: none; }
.tile-art { position: absolute; inline-size: 120px; left: -60px; top: -86px; max-inline-size: none; filter: drop-shadow(0 6px 4px rgb(80 50 20 / .25)); }
.tile-g.npc .tile-art { filter: saturate(.7) drop-shadow(0 6px 4px rgb(80 50 20 / .25)); }
.tile-g.mine::before {
  content: ''; position: absolute; inline-size: 132px; block-size: 66px; left: -66px; top: -33px;
  border-radius: 50%; border: 3px solid var(--teal-7); background: rgb(19 87 89 / .14);
}
.tile-name {
  position: absolute; top: 16px; left: 0; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; line-height: 1.4; padding: 0 8px; border-radius: 6px;
  background: rgb(249 238 213 / .9); color: var(--ink); white-space: nowrap; inline-size: max-content;
}
.labels { position: absolute; inset: 0; z-index: 950; pointer-events: none; }
.tile-l { position: absolute; inline-size: 0; block-size: 0; }
.tile-l.mine .tile-name { background: var(--teal-8); color: var(--gold-hi); }
.wolves {
  position: absolute; top: -64px; left: 14px;
  display: flex; align-items: center; gap: 2px; padding: 2px 8px 2px 4px; border-radius: 999px;
  background: #3b2a1a; color: var(--paper); font-weight: 700; font-size: 14px; white-space: nowrap; inline-size: max-content;
}
.wolf-ic { inline-size: 26px; block-size: 26px; object-fit: contain; }
.hits { position: absolute; inset: 0; z-index: 1100; pointer-events: none; }
/* hit area = the tile's own ground diamond, so overlapping art never steals a tap */
.tile-hit {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  -webkit-tap-highlight-color: transparent;
}
.tile-hit:hover, .tile-hit:focus-visible { background: rgb(243 214 140 / .45); }
.tile-hit:active { background: rgb(19 87 89 / .3); }
.riders-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1000; }
.rider { position: absolute; inset-inline-start: 0; inset-block-start: 0; will-change: transform; }
.rider-frame {
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  background-image: url('/assets/units/rider-gallop.webp');
  scale: .5; transform-origin: 0 0;
}
.rider-n, .rider-t {
  position: absolute; inset-inline-start: 0; transform: translateX(-50%);
  font-weight: 700; font-size: 13px; border-radius: 999px; padding: 0 8px; white-space: nowrap; line-height: 1.5;
}
.rider-n { inset-block-start: -70px; background: var(--teal-8); color: var(--gold-hi); }
.rider-t { inset-block-start: 6px; background: rgb(249 238 213 / .92); color: var(--teal-8); }
.rider.back .rider-n { background: #9a6a1f; color: var(--paper); }

/* ---------- reports ---------- */
.reports-view { padding: 14px 12px; max-inline-size: 760px; margin: 0 auto; }
.view-title { font-size: 22px; color: var(--teal-8); margin-block-end: 10px; }
.reports { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.report {
  inline-size: 100%; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px 12px 12px; border: 0; border-radius: var(--r-md); text-align: start; cursor: pointer;
  background: var(--paper); box-shadow: 0 2px 0 rgb(141 101 55 / .25);
}
.rep-mark { align-self: stretch; border-radius: 4px; background: var(--good); }
.report.lost .rep-mark { background: var(--bad); }
.rep-title { font-weight: 700; font-size: 16px; }
.rep-sub { font-size: 13px; color: var(--ink-2); }
.rep-nums { text-align: end; }
.rep-loot { font-family: var(--f-disp); font-size: 20px; font-weight: 700; color: var(--teal-8); }
.rep-loss { font-size: 13px; color: var(--bad); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 16px; text-align: center; color: var(--ink-2); }
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side { border-radius: var(--r-md); padding: 10px 12px 12px; background: #f1e2bf; }
.side.ours { background: #d8e7df; }
.duel-art { inline-size: 72px; block-size: 72px; object-fit: contain; display: block; margin: 0 auto; }
.side-name { text-align: center; font-weight: 700; margin-block-end: 6px; }
.side dl { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.side dl div { display: flex; justify-content: space-between; font-size: 14px; }
.side dd { margin: 0; font-weight: 700; font-size: 16px; }
.side dd.bad { color: var(--bad); }
.side dd.good { color: var(--good); }
.loot-title { font-size: 18px; color: var(--teal-8); margin: 16px 0 6px; }
.loot { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.loot li { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px; align-items: center; padding: 4px 0; border-block-end: 1px solid #e6d5ae; }
.loot bdi { font-weight: 700; }
.capped { font-size: 13px; color: var(--bad); font-weight: 600 !important; }
.loot-note { margin-block: 10px 6px; font-size: 14px; }

/* ---------- admin ---------- */
.admin { max-inline-size: 1180px; margin: 0 auto; padding-block-end: 40px; }
.admin-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--teal-9); color: var(--paper); }
.admin-head h1 { font-size: 22px; color: var(--gold-hi); }
.admin-body { padding: 16px; }
.admin-login { max-inline-size: 380px; margin: 30px auto; padding: 20px; border-radius: var(--r-lg); background: var(--paper); }
.admin-note { font-size: 14px; color: var(--ink-2); margin-block-end: 14px; max-inline-size: 70ch; }
.admin-worlds { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.admin-world { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 2px 0 rgb(141 101 55 / .3); }
.admin-world.strong { box-shadow: inset 0 0 0 2px var(--gold), 0 2px 0 rgb(141 101 55 / .3); }
.aw-top { display: flex; align-items: center; justify-content: space-between; }
.aw-top h2 { font-size: 22px; color: var(--teal-8); }
.admin-world .warn { font-size: 13px; font-weight: 600; color: var(--bad); }
.aw-status { font-size: 13px; color: var(--good); margin-block-start: -8px; }
.aw-status[data-state="ended"] { color: var(--bad); }
.aw-status[data-state="soon"] { color: var(--ink-2); }
.aw-row { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.aw-val { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--teal-8); }
.aw-num {
  inline-size: 80px; min-block-size: 44px; padding: 0 8px; text-align: center; direction: ltr;
  border: 1.5px solid var(--sand-3); border-radius: var(--r-sm); background: #fffaf0; font-size: 17px; font-weight: 700; color: var(--teal-8);
}
.aw-num:disabled, .aw-field input[type="range"]:disabled { opacity: .5; }
.aw-field input[type="range"] { inline-size: 100%; accent-color: var(--teal-7); block-size: 44px; }
.aw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.saved { font-size: 13px; color: var(--good); }

/* ---------- toast ---------- */
.toast {
  position: fixed; z-index: 100; inset-inline: 16px; inset-block-start: 12px; margin: 0 auto; max-inline-size: 460px;
  padding: 12px 16px; border-radius: var(--r-md); font-size: 15px; font-weight: 400;
  background: var(--bad); color: #fff; box-shadow: 0 10px 30px rgb(30 20 5 / .35);
  transform: translateY(-140%); transition: transform .25s ease;
}
.toast.ok { background: var(--teal-8); color: var(--gold-hi); }
.toast.info { background: var(--ink); color: var(--paper); }
.toast.show { transform: translateY(0); }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .resbar { grid-template-columns: repeat(4, 1fr); padding-inline: 24px; }
  .w-head { padding-inline: 24px; }
  .w-main { flex-direction: row; gap: 20px; padding: 10px 24px 0; }
  .w-side { order: 0; flex: 0 0 300px; }
  .activity { position: sticky; inset-block-start: 110px; margin: 10px 0 0; }
  .act.idle { display: grid; grid-template-columns: 1fr; color: var(--ink-2); }
  .tabs { inset-inline: auto; inset-inline-start: 50%; transform: translateX(50%); inline-size: 420px; }
  .map-scroll { block-size: calc(100dvh - 230px); border-radius: var(--r-lg); }
  dialog.sheet { margin: auto; border-radius: 22px; }
  .sheet-grip { visibility: hidden; }
  .village { flex-direction: row; align-items: flex-start; gap: 16px; }
  .stage-wrap { flex: 1; }
  .bpanel { flex: 0 0 300px; padding: 0; }
  .bpanel .view-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}