/* ═══════════════════ v2 HUD — styled after the concept art ═══════════════════
   Dark slate plates with bronze/gold trim, glossy 3D icons rendered in Blender (art/blender/ui_icons.py),
   heraldic attack shield, bottom build dock with a card carousel. Loaded after game.css. */
:root {
  --slate: #23262b;
  --slate-2: #2f343b;
  --slate-3: #3b414a;
  --rim: #b8862f;
  --rim-hi: #f4cf6a;
  --rim-dk: #6e4c17;
  --txt: #fff7e6;
  --txt-dim: #c9bfa8;
  --plate-shadow: 0 4px 0 #0008, 0 8px 18px #0007;
  /* dark ink outline around building pictures (info panel, build dock, build menu) */
  --obj-outline: drop-shadow(1.4px 0 0 #2a1a0b) drop-shadow(-1.4px 0 0 #2a1a0b) drop-shadow(0 1.4px 0 #2a1a0b) drop-shadow(0 -1.4px 0 #2a1a0b) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.45));
}
.sheet-icon, .card canvas, .card img { filter: var(--obj-outline); }
#sheet, #place-bar { background: rgba(243, 230, 200, 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ui-icon, .res-icon { display: inline-block; object-fit: contain; filter: drop-shadow(0 2px 1px #0007); pointer-events: none; vertical-align: middle; }
.profile, .resources, .builders, .chip.shield, .hud-btn, .dock-frame {
  /* slightly see-through plates so the village shows behind the HUD */
  background: linear-gradient(180deg, rgba(59, 65, 74, 0.82), rgba(35, 38, 43, 0.78) 55%, rgba(27, 29, 33, 0.8));
  -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1);
  border: 3px solid var(--rim);
  box-shadow: inset 0 0 0 2px #0009, inset 0 2px 0 #ffffff1c, var(--plate-shadow);
  color: var(--txt);
}
.profile { border-radius: 16px; padding: 6px 16px 6px 70px; position: relative; min-height: 58px; gap: 14px; margin-left: 6px; }
.profile .emblem { position: absolute; left: -12px; top: -10px; width: 74px; height: 78px; }
.profile .emblem .ui-icon { width: 74px !important; height: 78px !important; filter: drop-shadow(0 3px 2px #000a); }
.profile .council-level { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 20px var(--font-title); color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
.profile-text b { font-size: 17px; color: var(--txt); text-shadow: 0 2px 0 #000; }
.profile .muted, .profile .small { color: var(--txt-dim) !important; display: block; }
.kurin-name { color: var(--rim-hi); }
.trophies { display: flex; align-items: center; gap: 4px; font-size: 18px; text-shadow: 0 2px 0 #000; }

.resources { border-radius: 16px; padding: 6px 12px 6px 8px; gap: 6px; }
.res-chip { position: relative; display: flex; align-items: center; gap: 2px; min-width: 128px; padding-right: 10px; }
.res-chip + .res-chip { border-left: 2px solid #ffffff14; padding-left: 8px; }
.res-chip .res-icon { width: 40px !important; height: 40px !important; margin: -6px -2px -6px -4px; }
.res-chip .res-text { min-width: 70px; gap: 3px; }
.res-chip b { font-size: 19px; color: var(--txt); text-shadow: 0 2px 0 #000; font-variant-numeric: tabular-nums; }
.res-chip .progress { height: 6px; border-radius: 4px; background: #0009; border: 1px solid #000; min-width: 70px; }
.res-gold .progress .fill { background: linear-gradient(#ffe27a, #e0a51c); }
.res-water .progress .fill { background: linear-gradient(#8fd8ff, #2f8ae0); }
.res-energy .progress .fill { background: linear-gradient(#c6b2ff, #6c4ad8); }
.res-chip.crystals { min-width: 110px; }
.res-chip.crystals b { color: #efd2ff; }
.res-chip.full b { color: #ffb4a8; }
.plus-btn { width: 30px; height: 30px; border-radius: 8px; margin-left: 4px; cursor: pointer; font: 900 22px/1 var(--font); color: #5a3a08;
  background: linear-gradient(#ffe48a, #d9a332); border: 2px solid var(--rim-dk); box-shadow: inset 0 2px 0 #fff8, 0 2px 0 #0008; }
.builders { border-radius: 14px; padding: 6px 12px; gap: 6px; font-size: 19px; }
.builders b { color: var(--txt); text-shadow: 0 2px 0 #000; }

.hud-btn { width: 88px; height: 84px; border-radius: 16px; gap: 0; font: 700 13px var(--font); color: var(--txt); text-shadow: 0 2px 0 #000; padding: 4px 2px 6px; }
.hud-btn .ico { width: 52px !important; height: 52px !important; margin-top: -2px; }
.hud-btn .lbl { line-height: 1.05; }
.hud-btn:hover { border-color: var(--rim-hi); }
.hud-btn.active { border-color: var(--rim-hi); box-shadow: inset 0 0 0 2px #0009, 0 0 14px #f4cf6a88, var(--plate-shadow); }
.hud-btn .badge { top: -8px; right: -8px; min-width: 24px; height: 24px; line-height: 20px; border-radius: 50%; background: radial-gradient(#ff6a52, #b51d12); border: 2px solid #fff; font-size: 13px; padding: 0 4px; }
#hud-left { left: 12px; bottom: 16px; gap: 10px; }
#hud-right { right: 12px; top: 84px; gap: 10px; }
#hud-right .hud-btn { width: 76px; height: 72px; font-size: 11px; }
#hud-right .hud-btn .ico { width: 42px !important; height: 42px !important; }

#tutorial { border-radius: 14px; padding: 8px 10px 8px 12px; gap: 12px; background: linear-gradient(180deg, rgba(247, 236, 210, 0.9), rgba(233, 214, 168, 0.88));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 3px solid var(--rim); color: var(--ink); box-shadow: inset 0 0 0 2px #fff6, var(--plate-shadow); }
#tutorial .tut-text b { font-size: 15px; }
#tutorial .tut-text span { color: var(--ink-soft); }
.tut-arrow { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--rim-dk); background: linear-gradient(#ffe48a, #d9a332);
  font: 900 24px/1 var(--font); color: #5a3a08; cursor: pointer; box-shadow: 0 2px 0 #0007; }

/* heraldic red attack shield */
#hud-attack { right: 16px; bottom: 16px; }
.attack-btn {
  width: 156px; height: 170px; border: none; border-radius: 0; padding: 0; position: relative; cursor: pointer;
  background: linear-gradient(#f4cf6a, #8e6418); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.attack-btn::before {
  content: ""; position: absolute; inset: 7px; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  background: radial-gradient(circle at 50% 28%, #e8432e, #9a1610 70%, #6d0d08);
}
.attack-btn .swords { position: relative; width: 96px !important; height: 96px !important; margin-top: -30px; }
.attack-btn .attack-label { position: relative; font: 400 22px var(--font-title); color: #fff3d0; text-shadow: 0 3px 0 #4a0905, 0 0 8px #000; margin-top: -12px; }
.attack-btn:hover { filter: brightness(1.08); }
#hud-attack { filter: drop-shadow(0 6px 6px #000a); }

/* bottom build dock */
#build-dock { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(1180px, calc(100vw - 360px)); z-index: 8; }
.dock-frame { position: relative; border-radius: 18px; padding: 0 12px 12px; }
.dock-tabs { display: flex; gap: 6px; transform: translateY(-22px); margin-bottom: -14px; padding-left: 8px; flex-wrap: wrap; }
.dock-tab { display: flex; align-items: center; gap: 6px; padding: 6px 16px 6px 8px; border-radius: 12px 12px 6px 6px; cursor: pointer;
  font: 700 15px var(--font); color: var(--txt); text-shadow: 0 2px 0 #000;
  background: linear-gradient(var(--slate-3), var(--slate)); border: 2px solid var(--rim-dk); box-shadow: 0 3px 0 #0008; }
.dock-tab.active { background: linear-gradient(#ffe48a, #c98f23); color: #3a2405; text-shadow: none; border-color: var(--rim-hi); }
.dock-cards { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.dock-card { position: relative; flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; cursor: pointer;
  border-radius: 12px; background: linear-gradient(180deg, rgba(52, 58, 66, 0.86), rgba(31, 34, 38, 0.86)); border: 2px solid #555c66; color: var(--txt);
  box-shadow: inset 0 2px 0 #ffffff12, 0 3px 0 #0008; font: 13px var(--font); transition: transform .08s; }
.dock-card:hover:not(.locked) { border-color: var(--rim-hi); box-shadow: 0 0 0 2px var(--rim-hi), 0 0 18px #f4cf6a66; transform: translateY(-3px); }
.dock-card.locked { filter: grayscale(.85) brightness(.75); cursor: default; }
.dock-card.poor .cost-item { color: #ff8b7a; }
.dock-icon-wrap { position: relative; width: 132px; height: 94px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(#4a5560, #252a30 75%); overflow: hidden; }
.dock-icon { max-width: 130px; max-height: 94px; object-fit: contain; filter: var(--obj-outline); transform: scale(1.55) translate(9%, 6%); }
.dock-lock { position: absolute; top: 4px; right: 6px; font-size: 18px; }
.dock-name { font-weight: 700; font-size: 15px; text-shadow: 0 2px 0 #000; text-align: center; line-height: 1.1; min-height: 34px; display: grid; place-items: center; }
.dock-count { color: var(--txt-dim); font-size: 12px; }
.dock-card .cost { color: var(--txt); justify-content: center; }
.dock-card .cost-item { color: var(--txt); text-shadow: 0 1px 0 #000; font-size: 15px; }
.dock-card .free { color: #b8f08a; }
.dock-time { display: flex; align-items: center; gap: 4px; color: var(--txt-dim); font-size: 12px; }
.dock-lockmsg { font-size: 11px; color: #ffb39e; text-align: center; }
.dock-close { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--txt-dim); font-size: 20px; cursor: pointer; }

/* modal panels pick up the same frame */
.panel { border-color: var(--rim); box-shadow: 0 16px 40px #0009, inset 0 0 0 2px var(--rim-dk); }
.panel-head { background: linear-gradient(var(--slate-3), var(--slate)); border-bottom: 2px solid var(--rim); }
.panel-title { color: var(--rim-hi); text-shadow: 0 2px 0 #000; }

@media (max-width: 760px) {
  .profile { padding: 4px 10px 4px 52px; min-height: 48px; }
  .profile .emblem { width: 56px; height: 60px; left: -8px; top: -6px; }
  .profile .emblem .ui-icon { width: 56px !important; height: 60px !important; }
  .res-chip { min-width: 0; }
  .res-chip .res-icon { width: 30px !important; height: 30px !important; }
  .res-chip .res-text { min-width: 44px; }
  .res-chip .progress { min-width: 44px; }
  .res-chip b { font-size: 15px; }
  .plus-btn { width: 24px; height: 24px; font-size: 18px; }
  .hud-btn { width: 64px; height: 62px; font-size: 10px; }
  .hud-btn .ico { width: 36px !important; height: 36px !important; }
  #hud-right { top: 200px; }
  #hud-right .hud-btn { width: 56px; height: 54px; }
  #hud-right .hud-btn .ico { width: 30px !important; height: 30px !important; }
  .attack-btn { width: 108px; height: 118px; }
  .attack-btn .swords { width: 64px !important; height: 64px !important; margin-top: -20px; }
  .attack-btn .attack-label { font-size: 15px; }
  #build-dock { width: calc(100vw - 16px); bottom: 6px; z-index: 9; }
  .dock-card { flex-basis: 118px; }
  .dock-icon-wrap { width: 104px; height: 72px; }
  .dock-icon { max-width: 102px; max-height: 72px; }
}

/* collect: icons flying into the resource bar */
.fly-res { position: fixed; left: -17px; top: -17px; width: 34px; height: 34px; pointer-events: none; z-index: 60; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5)); will-change: transform; }
.res-chip.bump .res-icon { animation: res-bump 0.22s ease-out; }
@keyframes res-bump { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* rolling counters and idle-builder hint */
.res-amount.rolling { color: #fff1b0 !important; }
.builders { position: relative; }
.builders.idle { border-color: #b6f06a; animation: idle-glow 1.6s ease-in-out infinite; }
.builders .idle-badge { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 900 14px/1 var(--font); color: #1f3d0c; background: radial-gradient(#d8ff8a, #7ccf2e); border: 2px solid #fff; box-shadow: 0 2px 0 #0007; }
@keyframes idle-glow { 0%, 100% { box-shadow: inset 0 0 0 2px #0009, var(--plate-shadow); } 50% { box-shadow: inset 0 0 0 2px #0009, 0 0 14px #b6f06aaa, var(--plate-shadow); } }

/* battle: star conditions under the stars */
.b-conds { display: flex; gap: 6px; justify-content: center; margin-top: 4px; flex-wrap: wrap; }
.b-cond { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 5px; border-radius: 10px; font: 700 11px var(--font);
  color: #e8dcc0; background: rgba(20, 18, 16, 0.55); border: 1px solid rgba(255, 255, 255, 0.15); }
.b-cond i { font-style: normal; color: #6b6255; }
.b-cond.ok { color: #fff6c8; border-color: #f4cf6a; background: rgba(120, 80, 10, 0.55); }
.b-cond.ok i { color: #ffd34a; text-shadow: 0 0 6px #ffcf4a; }
/* pvp panel and result */
.hint.warn { color: #b3410f; font-weight: 700; }
.daily-bonus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 10px; background: rgba(244, 207, 106, 0.18); border: 1px solid rgba(184, 134, 47, 0.5); margin: 6px 0; }
.daily-bonus.done { background: rgba(120, 200, 80, 0.18); border-color: rgba(80, 150, 40, 0.5); }
.star-bonus b { color: #b8860b; }

/* account restore: QR in settings, camera overlay */
.qr-block { margin: 6px 0 4px; }
.qr-box { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
.qr-canvas { width: 196px; height: 196px; image-rendering: pixelated; border-radius: 10px; border: 3px solid var(--rim); background: #fff; }
.qr-overlay { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(10, 12, 14, 0.88); color: #fff6e0; padding: 16px; text-align: center; }
.qr-frame { position: relative; width: min(78vw, 340px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 3px solid var(--rim); background: #000; }
.qr-video { width: 100%; height: 100%; object-fit: cover; }
.qr-aim { position: absolute; inset: 16%; border: 3px dashed rgba(244, 207, 106, 0.85); border-radius: 12px; }
#welcome .welcome-card > .btn.ghost { margin-top: 4px; }
/* panels opened from the welcome screen (account restore) must sit above it */
body:has(#welcome:not(.hidden)) #panels { z-index: 40; }