/* The field is the viewport; controls float above it. */
html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-width: 320px; background: #83ad83; }
.app-shell { max-width: none; min-height: 100dvh; }
.content { padding: 0; }
.dashboard { display: contents; }
.world-card {
  position: fixed; inset: 0; z-index: 0;
  display: block; min-height: 0; overflow: visible;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
#world {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; background: #86ad86;
}
#hover-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}

.topbar, .welcome-line, .world-toolbar, .map-footer, .bottom-note,
.panel, .stat-card, .lobby-card, .shop-dialog {
  -webkit-backdrop-filter: blur(15px) saturate(1.2);
  backdrop-filter: blur(15px) saturate(1.2);
  box-shadow: 0 12px 34px #193b2f26, inset 0 1px #ffffff94;
}
.topbar {
  position: fixed; top: 15px; left: 18px; right: 18px; z-index: 20;
  height: 64px; padding: 0 19px;
  border: 1px solid #d3e5d186; border-radius: 16px;
  background: #193d2bdc;
}
.brand-mark { height: 38px; width: 38px; font-size: 23px; }
.brand h1 { font-size: 24px; }
.brand h1 em { font-size: 15px; }
.brand-kicker { font-size: 8px; }
.menu-toggle {
  height: 34px; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 11px; border: 1px solid #a9cba98a; border-radius: 9px;
  background: #ffffff1b; color: #eef4e7; font-size: 12px; font-weight: 800;
}
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: #ffffff30; }
.menu-toggle:focus-visible, .world-toolbar button:focus-visible,
.shop-main-button:focus-visible, .seed-option:focus-visible {
  outline: 3px solid #e9c86c; outline-offset: 2px;
}

.welcome-line {
  position: fixed; top: 96px; left: 18px; z-index: 10;
  width: min(380px, calc(100vw - 390px));
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 15px 17px;
  border: 1px solid #ffffffba; border-radius: 15px;
  background: #fffcf3d6;
}
.welcome-line > div:first-child { flex: 1; min-width: 0; }
.welcome-line h2 { font-size: 25px; margin: 4px 0 3px; }
.welcome-line p { font-size: 11px; line-height: 1.4; }
.season-badge { flex: 0 0 auto; padding: 6px; box-shadow: none; background: #fffaf29e; }
.season-badge .sun { height: 32px; width: 32px; font-size: 18px; }
.season-badge div { display: none; }

.world-toolbar {
  position: absolute; left: 18px; bottom: 70px; z-index: 4;
  width: min(430px, calc(100vw - 390px)); height: 49px;
  padding: 0 11px 0 15px;
  border: 1px solid #ffffffb2; border-radius: 12px;
  background: #fffdf1d9;
}
.map-controls button { background: #fafaf0b8; }
.map-footer { display: none; }
.bottom-note {
  position: fixed; left: 18px; bottom: 15px; z-index: 10;
  width: min(620px, calc(100vw - 390px)); height: 44px;
  padding: 0 13px; border: 1px solid #ffffffb2; border-radius: 11px;
  background: #fffdf1df;
}
.bottom-note p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tile-coordinates { flex: 0 0 auto; }

.sidebar {
  position: fixed; top: 94px; right: 16px; bottom: 13px; z-index: 20;
  display: flex; flex-direction: column; align-items: stretch; gap: 11px;
  width: 320px; padding: 2px 4px 4px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #e8ecd4a6 transparent;
  transition: transform .25s ease, opacity .25s ease;
}
.sidebar .stat-card, .sidebar .panel { flex: 0 0 auto; }
.panel, .stat-card {
  border: 1px solid #ffffffb5;
  background: #fffdf1d9;
}
.panel.shop-panel { background: #fffae8df; }
.panel.land-panel { background: #f5f0dfdf; }
.account-panel > p { color: #71816d; font-size: 11px; line-height: 1.45; }
.resume-row input { min-width: 0; flex: 1; border: 1px solid #e0e5da; border-radius: 8px; padding: 9px; background: white; color: #375042; font: inherit; font-size: 11px; }
.recovery-dialog { max-width: 500px; }
.recovery-dialog code { display: block; margin: 15px 0; padding: 15px 10px; border: 1px solid #d7dfce; border-radius: 9px; background: #f4f7ed; color: #34583e; text-align: center; font-size: clamp(12px, 2.6vw, 18px); font-weight: 800; letter-spacing: .06em; overflow-wrap: anywhere; }
.recovery-actions { display: flex; gap: 9px; }
.recovery-actions button { flex: 1; }
.land-panel > p { margin: 8px 0 11px; color: #71816d; font-size: 11px; line-height: 1.45; }
.land-options { display: grid; gap: 6px; }
.land-option { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #d5ddc9; border-radius: 9px; background: #fffdf1b8; }
.land-option.owned { background: #e5eee0b8; }
.land-option-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.land-option-copy strong { color: #3d593e; font-size: 11px; }
.land-option-copy small { color: #81917b; font-size: 9px; }
.land-option button { flex: 0 0 auto; padding: 7px 9px; border: 0; border-radius: 7px; background: #64824c; color: #fff; font-size: 10px; font-weight: 800; }
.land-option button:hover { background: #496d39; }
.land-option button:disabled { background: #e2e7d8; color: #879583; cursor: not-allowed; }
.stat-card { height: 88px; padding: 13px 16px; }
.stat-card > div:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.stat-card > div:nth-child(2) > span { display: block; }
.stat-card strong { margin: 0; line-height: 1.05; }
.stat-card small { white-space: nowrap; }
.stat-flourish { opacity: .55; }
.stat-icon { height: 47px; width: 47px; }
.panel { padding: 15px; }
.panel-heading h3 { font-size: 19px; }
.seed-option { background: #fffef5ba; }
.seed-option:hover { background: #f6f8ebd9; }
.worker-summary, .seed-help { background: #f3f5e9bd; }
.farmhands-panel > p { margin: 8px 0 11px; color: #778b79; font-size: 11px; line-height: 1.45; }
.farmhands-panel .farmhand-feedback { margin: 7px 0 0; color: #426d4f; font-size: 11px; }
.farmhands-panel .farmhand-feedback.error { color: #a64537; }
.farmhand-feedback:empty { display: none; }
.farmhand-list { display: grid; gap: 8px; margin-top: 10px; }
.farmhand-card { padding: 10px; border: 1px solid #d4dfcf; border-radius: 10px; background: #fffef5bc; }
.farmhand-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.farmhand-top strong { color: #345846; font-size: 12px; }
.farmhand-top small { color: #758979; font-size: 10px; text-align: right; }
.farmhand-duties { display: flex; gap: 12px; margin: 9px 0; }
.farmhand-duties label { display: flex; align-items: center; gap: 5px; color: #3e5946; font-size: 11px; font-weight: 700; cursor: pointer; }
.farmhand-duties input { accent-color: #477d55; }
.farmhand-seed { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #5b765d; font-size: 10px; font-weight: 800; }
.farmhand-seed select { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid #ccd9c8; border-radius: 7px; background: #fffdf3; color: #375141; font: inherit; font-size: 11px; }
.farmhand-seed select:disabled { opacity: .55; }
.wallet-line { background: #f3e7c7bb; }
.army-summary { display: flex; align-items: center; justify-content: space-between; margin: 13px 0 7px; padding: 10px 11px; border-radius: 9px; background: #e5ede2ad; color: #536b57; font-size: 11px; font-weight: 800; }
.army-summary[hidden] { display: none; }
.army-summary strong { font-family: Fraunces, Georgia, serif; font-size: 19px; color: #386449; }
.barracks-panel > p, .raid-section p { margin: 8px 0 11px; color: #778b79; font-size: 11px; line-height: 1.45; }
.barracks-button { width: 100%; padding: 10px; border: 0; border-radius: 8px; background: #506e60; color: #fff; font-size: 12px; font-weight: 800; }
.barracks-button:hover, .barracks-button.active { background: #335948; }
.barracks-button:disabled { background: #cbd5c9; color: #edf0e9; cursor: not-allowed; }
.barracks-button[hidden], .raid-section[hidden], .battle-report[hidden] { display: none; }
.raid-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid #d8e0d2; }
.raid-targets { display: grid; gap: 6px; }
.raid-target { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #dce5d8; border-radius: 9px; background: #fffdf1ae; }
.raid-target-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.raid-target-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #34503c; font-size: 11px; }
.raid-target-copy small { color: #869484; font-size: 9px; }
.raid-target button { flex: 0 0 auto; padding: 7px 9px; border: 0; border-radius: 7px; background: #ae664c; color: white; font-size: 10px; font-weight: 800; }
.raid-target button:hover { background: #94513b; }
.raid-target button:disabled { background: #e5e4dc; color: #aaa99f; cursor: not-allowed; }
.battle-report { margin-top: 11px; padding: 10px; border-radius: 8px; background: #f3e9d4bd; color: #735944; font-size: 11px; line-height: 1.45; }
.soldier-upgrades { margin-top: 14px; padding-top: 12px; border-top: 1px solid #d8e0d2; }
.soldier-upgrades[hidden] { display: none; }
.soldier-upgrades > p { margin: 5px 0 10px; color: #778b79; font-size: 11px; }
.soldier-upgrade-list { display: grid; gap: 7px; }
.soldier-upgrade-item { padding: 9px; border: 1px solid #d9dfd1; border-radius: 9px; background: #fffcf0bf; }
.soldier-upgrade-top { display: flex; align-items: center; gap: 8px; }
.soldier-rank { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 8px; background: #687f71; color: #fff; font-family: Georgia, serif; font-size: 13px; font-weight: 800; }
.soldier-upgrade-item.high-rank .soldier-rank { background: #ad8655; color: #fff8da; }
.soldier-upgrade-copy { display: grid; gap: 2px; min-width: 0; }
.soldier-upgrade-copy strong { color: #344c3e; font-size: 11px; }
.soldier-upgrade-copy small { color: #7c8b7d; font-size: 10px; }
.soldier-upgrade-item button { width: 100%; margin-top: 8px; padding: 7px 9px; border: 0; border-radius: 7px; background: #586e62; color: white; text-align: left; font-size: 10px; font-weight: 800; }
.soldier-upgrade-item button:hover { background: #385845; }
.soldier-upgrade-item button:disabled { background: #e5e7df; color: #a1a9a0; cursor: not-allowed; }
.upgrade-ladder { margin-top: 10px; color: #657868; font-size: 11px; }
.upgrade-ladder summary { cursor: pointer; font-weight: 800; }
.upgrade-ladder ol { display: grid; gap: 4px; margin: 9px 0 0; padding-left: 22px; }
.upgrade-ladder li span { color: #869487; font-size: 10px; }
.neighbor-panel { min-height: 120px; }
.app-shell.panels-hidden .sidebar { transform: translateX(calc(100% + 30px)); opacity: 0; pointer-events: none; }

.lobby {
  position: fixed; inset: 0; z-index: 60;
  background: #1f412d91;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lobby-card { border: 1px solid #ffffffb8; background: #fffdf4e8; }
.shop-overlay { z-index: 80; background: #162d23a1; }
.shop-dialog { border-color: #ffffffae; background: #fffdf4e8; }
.shop-item { background: #fbfaf5ca; }
.cave-panel { background: #f4eff8df; }
.cave-panel > p { margin: 10px 0 12px; color: #667068; font-size: 11px; line-height: 1.45; }
.cave-dialog { max-height: min(90dvh, 800px); overflow-y: auto; }
.cave-control { margin: 12px 0; padding: 13px; border: 1px solid #d3c6df; border-radius: 11px; background: #e9def1bd; display: grid; gap: 6px; }
.cave-control strong { color: #58446c; font-family: Fraunces, Georgia, serif; font-size: 18px; }
.cave-control span, .cave-control p { color: #736782; font-size: 12px; }
.cave-control p { margin: 2px 0 5px; }
.cave-control button { background: #795b91; }
.cave-control button:hover { background: #614378; }
.cave-control button[hidden] { display: none; }
.cave-troop-picker { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #58446c; font-size: 12px; font-weight: 800; }
.cave-troop-picker[hidden] { display: none; }
.cave-troop-picker select { min-width: 78px; padding: 8px 10px; border: 1px solid #baa9cc; border-radius: 8px; background: #fffafee0; color: #58446c; font: inherit; }
.shop-item.tier-mythic { border-color: #caa5d8; background: #f9f0fccc; }
.shop-item-art.dragonroot, .seed-illustration.dragonroot { color: #b676dc; background: #ead5f4; }
.shop-item-art.phoenix_bloom, .seed-illustration.phoenix_bloom { color: #de784b; background: #f9ddcd; }

@media (max-width: 950px) {
  .welcome-line { width: min(340px, calc(100vw - 360px)); }
  .welcome-line .season-badge { display: none; }
  .world-toolbar { width: min(390px, calc(100vw - 360px)); }
  .map-footer, .bottom-note { max-width: calc(100vw - 360px); }
}
@media (max-width: 820px) {
  .topbar { top: 10px; left: 10px; right: 10px; height: 57px; padding: 0 12px; }
  .brand { gap: 8px; }
  .brand h1 { font-size: 20px; }
  .brand h1 em { font-size: 13px; }
  .brand-kicker { font-size: 7px; }
  .welcome-line {
    top: 76px; left: 10px; right: 10px; width: min(350px, calc(100vw - 20px));
    padding: 11px 13px;
  }
  .welcome-line h2 { font-size: 21px; }
  .welcome-line p { display: none; }
  .world-toolbar { left: 10px; right: 10px; bottom: 66px; width: min(430px, calc(100vw - 20px)); }
  .map-footer { display: none; }
  .bottom-note { left: 10px; right: 10px; bottom: 10px; width: calc(100vw - 20px); max-width: 430px; }
  .sidebar {
    top: auto; left: 10px; right: 10px; bottom: 10px;
    width: auto; max-height: min(62dvh, 680px);
    padding: 7px; border: 1px solid #ffffffbd; border-radius: 17px;
    background: #f4f4e3a8;
    -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
    box-shadow: 0 18px 55px #1b3c2d65;
    transform: translateY(calc(100% + 20px)); pointer-events: none;
  }
  .app-shell.panels-open .sidebar { transform: none; opacity: 1; pointer-events: auto; }
  .app-shell.panels-hidden .sidebar { transform: translateY(calc(100% + 20px)); }
}
@media (max-width: 520px) {
  .brand-mark { display: none; }
  .brand h1 { font-size: 18px; }
  .brand h1 em { font-size: 11px; }
  .header-right { gap: 5px; }
  .menu-toggle { padding: 0 9px; }
  .menu-toggle span { display: none; }
  .live-pill { padding: 7px 9px; }
  .welcome-line { width: fit-content; max-width: calc(100vw - 20px); }
  .world-toolbar { max-width: calc(100vw - 20px); }
  .world-tag { font-size: 8px; }
  .map-controls { gap: 3px; }
  .bottom-note { font-size: 10px; }
  #tile-coordinates { display: none; }
  .lobby-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}