/* Bastion Siege · v1.37 "Polish" layer.
   Loaded after style.css. Everything here is additive: a themed backdrop with drifting particles, motion on every screen,
   a game-style bottom bar on the home page, the Daily Supplies chest, record celebrations, and a tighter battle header on
   phones. Reduced motion (the in-game setting or the OS setting) switches the motion off. */

/* ---------- a living, themed backdrop ---------- */
#app {
  background: radial-gradient(130% 70% at 50% -12%, #5c3322 0%, transparent 62%), var(--night);
  background:
    radial-gradient(130% 70% at 50% -12%, color-mix(in srgb, var(--gold-deep) 34%, var(--night)) 0%, transparent 62%),
    radial-gradient(120% 55% at 50% 118%, color-mix(in srgb, var(--crimson) 22%, var(--night)) 0%, transparent 62%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.35) 100%),
    var(--night);
}
#screen { background: transparent; }
#ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#ambient[hidden], #app:has(#game-view:not([hidden])) #ambient { display: none; }
/* ---------- motion ---------- */
@keyframes rise { from { transform: translateY(14px); } }
@keyframes riseSm { from { transform: translateY(8px); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.86) translateY(10px); } 60% { opacity: 1; transform: scale(1.02); } 100% { transform: none; } }
@keyframes backIn { from { opacity: 0; backdrop-filter: blur(0); } }
@keyframes shine { 0%, 72% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes breathe { 50% { transform: translateY(-3px); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,179,61,0); } 50% { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--gold) 45%, transparent); } }
@keyframes ring { 0% { transform: scale(.85); opacity: .75; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes shimmerText { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-7deg) scale(1.04); } 30% { transform: rotate(6deg) scale(1.06); } 45% { transform: rotate(-5deg) scale(1.05); } 60% { transform: rotate(4deg) scale(1.07); } 75% { transform: rotate(-2deg) scale(1.08); } }
@keyframes idleBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes coinFly { 0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--r)) scale(1); opacity: 0; } }
@keyframes amountIn { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes stamp { 0% { transform: scale(1.8) rotate(-8deg); opacity: 0; } 60% { transform: scale(.95) rotate(-3deg); opacity: 1; } 100% { transform: scale(1) rotate(-3deg); } }
@keyframes tabIn { from { transform: scaleX(.3); opacity: 0; } }

/* Screens slide up into place, their cards one after another. */
.screen-inner > *, .home-wrap > *, .home-col > * { animation: rise .42s cubic-bezier(.2,.8,.25,1) both; }
.screen-inner > :nth-child(2), .home-wrap > :nth-child(2), .home-col > :nth-child(2) { animation-delay: .04s; }
.screen-inner > :nth-child(3), .home-wrap > :nth-child(3), .home-col > :nth-child(3) { animation-delay: .08s; }
.screen-inner > :nth-child(4), .home-wrap > :nth-child(4) { animation-delay: .12s; }
.screen-inner > :nth-child(5), .home-wrap > :nth-child(5) { animation-delay: .16s; }
.screen-inner > :nth-child(n+6), .home-wrap > :nth-child(n+6) { animation-delay: .2s; }
.mode-rail > .mode-tile { animation: riseSm .45s cubic-bezier(.2,.8,.25,1) both; }
.mode-rail > .mode-tile:nth-child(2) { animation-delay: .06s; } .mode-rail > .mode-tile:nth-child(3) { animation-delay: .12s; }
.mode-rail > .mode-tile:nth-child(4) { animation-delay: .18s; } .mode-rail > .mode-tile:nth-child(n+5) { animation-delay: .24s; }
/* Home and the setup screen re-render in place (online data arriving, a tap on an option): only animate the first paint. */
.screen-inner.settled > * { animation: none; }
.home.v2.settled .home-wrap > *, .home.v2.settled .home-col > *, .home.v2.settled .mode-rail > .mode-tile, .home.v2.settled + .home-nav { animation: none; }

/* Buttons squash a touch when pressed, like a toy. */
.btn:not(:disabled), .mode-tile, .nav-item, .nav-play, .tbtn, .abil, .today-row, .help-row, .plaque.realm-strip, .theme-card:not(:disabled), .boon { transition: transform .12s cubic-bezier(.3,1.6,.5,1), filter .15s, box-shadow .15s; }
.btn:active:not(:disabled), .nav-item:active, .tbtn:active, .today-row:active, .help-row:active, .theme-card:active:not(:disabled) { transform: scale(.955); }
.nav-play:active { transform: translateY(-2px) scale(.94); }
.boon:active { transform: scale(.97); }
/* Primary gold buttons catch the light now and then. */
.btn.gold { overflow: hidden; isolation: isolate; }
.btn.gold::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-130%) skewX(-18deg); animation: shine 4.8s ease-in-out infinite; }
.btn.gold.small::after { animation-duration: 6.5s; }
.btn.gold:disabled::after { display: none; }
/* Cards lift on hover (mouse) and glow at the edge. */
@media (hover: hover) {
  .plaque.realm-strip:hover, .help-row:hover { transform: translateY(-2px); }
  .mode-tile:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: inset 0 0 0 2px var(--gold-deep), 0 10px 0 #0f0b08, 0 14px 30px rgba(0,0,0,.35); }
}
/* Modals pop with a little spring; the page behind blurs. */
.modal-back { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: backIn .22s both; }
.modal-back > .modal { animation: pop .34s cubic-bezier(.2,.9,.3,1.2) both; }
/* Toasts slide in with a bounce. */
@keyframes toastin { 0% { transform: translateY(-14px) scale(.96); opacity: 0; } 70% { transform: translateY(2px) scale(1.01); opacity: 1; } 100% { transform: none; } }
.toast.ach { position: relative; overflow: hidden; }
.toast.ach::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,232,160,.35), transparent); animation: shine 2.2s ease-out 1; transform: translateX(-130%) skewX(-18deg); }
/* Active tabs underline themselves. */
.hub-tabs .btn[aria-pressed="true"], .tabs .btn[aria-pressed="true"] { position: relative; }
.hub-tabs .btn[aria-pressed="true"]::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -7px; height: 3px; border-radius: 3px; background: var(--gold); animation: tabIn .25s ease-out both; }
/* Bars fill with a slide, not a jump. */
.bar > i { transition: width .45s cubic-bezier(.2,.8,.25,1); }

/* ---------- home: the hero ---------- */
.home-title h1 { background-size: 200% 100%; background-image: linear-gradient(100deg, #ffe9a6 0%, #f6c04a 30%, #fff6d0 45%, #f6c04a 60%, #c98a1b 100%); animation: shimmerText 7s linear infinite; }
.home-crest { animation: breathe 4s ease-in-out infinite; }
.rank-chip { box-shadow: 0 4px 14px rgba(0,0,0,.35); }
/* The map name clears the red banners on both sides. */
.dio-chips { left: 50px; right: 190px; }
@media (max-width: 420px) { .dio-chips { left: 42px; right: 178px; } }
.dio-map { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-corner { position: absolute; top: calc(.5rem + env(safe-area-inset-top, 0px)); right: 46px; z-index: 3; display: flex; gap: .35rem; line-height: 1; }
@media (max-width: 420px) { .hero-corner { right: 40px; } }
.btn.round { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; font-size: 1.05rem; background: rgba(26,20,16,.72); border-color: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* The corner buttons replace the old footer row; the hint chip makes room for them on the right. */
.home .dio-tip { display: none; }

/* Today's date on the Daily card */
.date-badge { display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #fff8ea; line-height: 1; text-align: center; }
.date-badge small { display: block; background: var(--crimson, #a8323a); color: #fff; font: 800 .52rem/1.5 var(--font); letter-spacing: .08em; }
.date-badge b { display: grid; place-items: center; color: #1a1410; font: 800 1.15rem/1 var(--font); }
.mt-ico:has(.date-badge) { padding: 0; overflow: hidden; }

/* ---------- home: the bottom bar ---------- */
.home.v2 { padding-bottom: 1rem; }
.home-nav { position: sticky; bottom: 0; z-index: 6; padding: 0 .55rem calc(.45rem + var(--safe-b)); margin-top: .4rem; pointer-events: none; animation: rise .5s .15s cubic-bezier(.2,.8,.25,1) both; }
.home-nav::before { content: ""; position: absolute; inset: -24px 0 0; z-index: -1; background: linear-gradient(transparent, color-mix(in srgb, var(--night) 92%, transparent) 55%); pointer-events: none; }
.nav-inner { pointer-events: auto; max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr; align-items: end; gap: .15rem;
  padding: .3rem .3rem .35rem; border-radius: 22px; background: color-mix(in srgb, var(--enamel) 92%, transparent); border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--line), 0 8px 0 #0f0b08, 0 12px 32px rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav-item { position: relative; display: grid; justify-items: center; gap: 1px; padding: .35rem .1rem .25rem; border: 0; border-radius: 14px; background: none; color: var(--text); font: inherit; cursor: pointer; min-height: 52px; }
.nav-item:hover { background: rgba(255,255,255,.06); }
.ni-ico { font-size: 1.35rem; line-height: 1.1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
.ni-lbl { font-size: .72rem; font-weight: 800; color: var(--muted); letter-spacing: .01em; }
.nav-item .badge { position: absolute; top: 2px; right: calc(50% - 1.6rem); font-size: .62rem; padding: 0 .35rem; line-height: 1.35; animation: pop .4s .4s both; }
.nav-play { position: relative; margin-top: -30px; display: grid; justify-items: center; align-content: center; gap: 0; min-height: 82px; padding: .45rem .3rem .4rem; border-radius: 22px;
  border: 2.5px solid var(--ink); color: var(--ink); font: inherit; cursor: pointer;
  background: linear-gradient(180deg, #ffe08a 0%, var(--gold) 45%, var(--gold-deep) 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 5px 0 #0f0b08, 0 10px 26px color-mix(in srgb, var(--gold) 35%, transparent); overflow: visible; isolation: isolate; }
.nav-play::after { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%) no-repeat; background-size: 60% 100%; background-position: -120% 0; animation: navShine 5s ease-in-out infinite; }
@keyframes navShine { 0%, 70% { background-position: -120% 0; } 100% { background-position: 240% 0; } }
.nav-play .np-ring { position: absolute; inset: -6px; border-radius: 26px; border: 3px solid var(--gold); z-index: -2; animation: ring 2.4s ease-out infinite; pointer-events: none; }
.nav-play .np-ico { font-size: 1.55rem; line-height: 1; filter: drop-shadow(0 2px 0 rgba(255,255,255,.45)); }
.nav-play b { font-family: var(--display); font-size: 1.35rem; line-height: 1; letter-spacing: .02em; }
.nav-play small { font-size: .62rem; font-weight: 800; opacity: .8; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nav-play.resume { background: linear-gradient(180deg, #9fd0ff 0%, #5aa7ff 45%, #2f72c9 100%); color: #fff; }
.nav-play.resume .np-ring { border-color: #5aa7ff; }
.nav-play.resume b, .nav-play.resume small { text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.home-foot { opacity: .75; margin-top: -.2rem; }
@media (min-width: 761px) { .nav-inner { max-width: 620px; } }

/* ---------- Today card: the supplies row ---------- */
.supply-row .ti { line-height: 0; display: grid; place-items: center; }
.supply-row .ti svg { overflow: visible; }
.supply-row.ready { margin: .1rem 0 .3rem; padding: .5rem .4rem; border-radius: 12px; border-top: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, transparent); animation: glowPulse 2.6s ease-in-out infinite; }
.supply-row.ready + .today-row { border-top: 0; }
.supply-row.ready .ti svg { animation: idleBob 1.8s ease-in-out infinite; transform-origin: 50% 90%; }
.sup-open { padding: .25rem .8rem; border-radius: 999px; font-weight: 800; font-size: .85rem; color: var(--ink); background: linear-gradient(#ffe08a, var(--gold)); border: 2px solid var(--ink); box-shadow: 0 2px 0 #0f0b08; }

/* ---------- the Daily Supplies modal ---------- */
.modal.supplies { text-align: center; overflow-x: hidden; }
.sup-head h2 { font-family: var(--display); color: var(--gold); font-size: 2rem; margin: 0; text-shadow: 0 3px 0 var(--ink); }
.sup-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin: .7rem 0 .2rem; }
.sup-day { display: grid; justify-items: center; gap: .05rem; padding: .3rem .1rem .25rem; border-radius: 10px; background: var(--enamel-2); border: 2px solid var(--ink); line-height: 1.1; }
.sup-day .sd-n { font-size: .6rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.sup-day .sd-ico { line-height: 0; }
.sup-day .sd-v { font-size: .66rem; font-weight: 800; color: var(--gold); }
.sup-day.past { opacity: .55; }
.sup-day.past .sd-v { color: #8fe08a; }
.sup-day.future { opacity: .8; filter: saturate(.75); }
.sup-day.today { background: color-mix(in srgb, var(--gold) 20%, var(--enamel-2)); border-color: var(--gold); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 50%, transparent); transform: translateY(-3px); }
.sup-day.royal { background: linear-gradient(180deg, color-mix(in srgb, #8a5ad8 30%, var(--enamel-2)), var(--enamel-2)); }
.sup-stage { position: relative; display: grid; place-items: center; height: 190px; margin: .3rem 0; }
.sup-rays { position: absolute; width: 260px; height: 260px; border-radius: 50%; opacity: 0; transition: opacity .4s;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 40%, transparent) 0deg 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: rays 14s linear infinite; }
.sup-stage.ready .sup-rays { opacity: .45; }
.sup-stage.open .sup-rays { opacity: 1; }
.sup-chest { position: relative; border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.sup-stage.ready .sup-chest { animation: idleBob 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.sup-stage.shaking .sup-chest { animation: wobble .65s ease-in-out both; transform-origin: 50% 90%; }
.sup-stage.opened .sup-chest { cursor: default; }
.chest-svg .chest-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.sup-stage.open .chest-lid, .sup-stage.opened .chest-lid { transform: translateY(-14px) rotate(-24deg); }
.sup-stage.open .chest-glow circle, .sup-stage.opened .chest-glow circle { opacity: .55; transition: opacity .3s; }
.sup-amount { position: absolute; bottom: 4px; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .9rem; border-radius: 999px; background: rgba(26,20,16,.85); border: 2px solid var(--gold-deep); animation: amountIn .55s cubic-bezier(.2,.9,.3,1.3) both; }
.sup-amount b { font-size: 1.8rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.sup-amount .sa-ico { color: var(--gold); font-size: 1.3rem; }
.sup-amount .sa-lbl { font-weight: 800; color: var(--muted); font-size: .8rem; }
.sup-hint { font-weight: 800; color: var(--gold); min-height: 1.3em; }
.sup-lucky { display: inline-block; margin: .3rem auto 0; padding: .15rem .7rem; border-radius: 10px; background: #2f6b2a; border: 2px solid var(--ink); font-weight: 800; animation: stamp .5s cubic-bezier(.2,.9,.3,1.4) both; }
.sup-next { margin: .5rem 0 .7rem; }
.coin-burst { position: absolute; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.coin-burst i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; animation: coinFly 1.25s cubic-bezier(.15,.7,.35,1) both; }
.coin-burst i.coin { background: radial-gradient(circle at 35% 30%, #fff3b0, #f2b33d 45%, #b77812 100%); border: 2px solid #5a3a0a; }
.coin-burst i.spark { width: 10px; height: 10px; left: -5px; top: -5px; background: #fff; border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 10px #fff, 0 0 4px var(--gold); }

/* ---------- in battle: record chase and celebrations ---------- */
.best-chip { display: inline-flex; align-items: center; padding: 0 .4rem; border-radius: 8px; font-size: .72rem; font-weight: 800; color: var(--gold); background: rgba(242,179,61,.14); border: 1.5px solid rgba(242,179,61,.45); white-space: nowrap; }
.pennant.record { background: linear-gradient(180deg, #ffe08a, var(--gold) 55%, var(--gold-deep)); color: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 3px #fff6d0, 0 8px 0 #0f0b08, 0 0 40px rgba(255,214,102,.7); }
.pennant.record .t { color: var(--ink); text-shadow: 0 2px 0 rgba(255,255,255,.5); }
.pennant.record .s { color: #3a2a10; }
.pennant { animation-timing-function: cubic-bezier(.2,.9,.3,1.25) !important; }
/* Ready castle arts breathe a little; the start button glows when a wave is ready to call. */
.abil.ready:not(.idle) .ic { animation: breathe 1.6s ease-in-out infinite; display: inline-block; }
.start-btn:not(:disabled) { animation: glowPulse 2.4s ease-in-out infinite; }

/* ---------- phones: a battle header two rows tall instead of three ---------- */
@media (orientation: portrait) and (max-width: 700px) {
  /* Row 1: pause, view, wave, keep/wall, gold. Row 2: the next-wave line between waves, the wave's progress bar during
     one, with sound and speed at the right end. Both lines are the buttons' height, so nothing jumps when a wave starts. */
  #hud::before { content: ""; order: 15; flex: 0 0 100%; height: 3px; }
  #hud .hud-strip { order: 19; flex: 1 1 0; min-width: 0; height: 28px; }
  #hud .hud-strip.wave { flex: 0 1 auto; }
  #hud .wave-progress { order: 20; flex: 1 1 0; min-width: 0; height: 20px; margin: 0; align-self: center; }
  #hud .wave-progress:not(.on) { display: none; }
  #hud .hud-right { order: 21; margin-left: 0; }
  #hud .hud-right .btn { height: 28px; min-height: 28px; padding: 0 .5rem; font-size: .82rem; }
  #hud .hud-right .btn::before { inset: -6px -3px; }
  #hud .view-btn, #hud .hero-view-btn { padding: 0 .45rem; }
  #hud .hud-strip .next-chip .best-chip { font-size: .64rem; padding: 0 .3rem; }
  /* The garrison button shows its count, not the word, so the Valor number never gets cut off. */
  .dock-actions .gar-btn { font-size: .78rem; }
  .gar-btn .gar-word { display: none; }
  .abil .key { display: none; }
}

/* ---------- setup: maps in a swipeable rail on phones ---------- */
@media (max-width: 700px) {
  .setup-screen .map-cards { display: flex !important; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: .2rem 1rem .7rem; scroll-padding: 0 1rem; scrollbar-width: none; }
  .setup-screen .map-cards::-webkit-scrollbar { display: none; }
  .setup-screen .map-cards > .map-card { flex: 0 0 62%; max-width: 260px; scroll-snap-align: start; }
  .setup-screen .map-cards > .map-card.locked { flex-basis: 46%; }
  .setup-screen .diff-cards { display: flex !important; gap: .45rem; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -1rem; padding: .2rem 1rem .6rem; scrollbar-width: none; }
  .setup-screen .diff-cards::-webkit-scrollbar { display: none; }
  .setup-screen .diff-cards > .diff-card { flex: 0 0 38%; scroll-snap-align: start; }
}
/* A still glow: an endlessly animated box-shadow repaints the whole card every frame, which on iPhones left patches of the
   page blank while scrolling. */
.map-card.sel, .diff-card.sel { box-shadow: inset 0 0 0 3px var(--gold), 0 0 16px 1px color-mix(in srgb, var(--gold) 38%, transparent), 0 6px 0 #0f0b08; }

/* Setup: the locked weapons and arts sum up in one line, and the advanced options fold away. */
.opt.locked-more { opacity: .8; border-style: dashed; }
.opt.locked-more .chev { font-size: 1.3rem; color: var(--muted); }
.adv-toggle { margin-top: 1rem; }

/* ---------- reduced motion: keep it still ---------- */
[data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before, [data-reduced-motion="true"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Today rows: the title stays on one line on narrow phones; the progress bar gives way. */
@media (max-width: 420px) {
  .today-row .tt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .today-row .tv .bar { width: 54px; }
}

/* ---------- run summary: the next run is one thumb away ---------- */
.summary-actions { position: sticky; bottom: 0; z-index: 4; justify-content: center; margin: 1rem -1rem 0; padding: .9rem 1rem calc(.8rem + var(--safe-b));
  background: linear-gradient(transparent, color-mix(in srgb, var(--night) 94%, transparent) 35%); }
.summary-head .big { font-variant-numeric: tabular-nums; }
.summary-head .records { animation: stamp .55s .35s cubic-bezier(.2,.9,.3,1.4) both; display: inline-block; }
.kpis .kpi { animation: riseSm .4s cubic-bezier(.2,.8,.25,1) both; }
.kpis .kpi:nth-child(2) { animation-delay: .05s; } .kpis .kpi:nth-child(3) { animation-delay: .1s; }
.kpis .kpi:nth-child(4) { animation-delay: .15s; } .kpis .kpi:nth-child(5) { animation-delay: .2s; } .kpis .kpi:nth-child(6) { animation-delay: .25s; }
.up-next { display: grid; gap: .3rem; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 40%, var(--line)), 0 6px 0 #0f0b08; }
.up-next h3 { margin-bottom: .1rem; }
.up-next div { font-weight: 600; }
.summary-actions .btn.gold.big { flex: 1 1 auto; max-width: 340px; }
.summary-head .records > div + div { margin-top: .15rem; }

/* Short screens (phones held sideways): a slimmer bottom bar and a compact chest. */
@media (max-height: 520px) {
  .nav-item { min-height: 42px; padding: .2rem .1rem; }
  .ni-ico { font-size: 1.1rem; }
  .nav-play { margin-top: -12px; min-height: 56px; padding: .25rem .3rem; }
  .nav-play .np-ico { display: none; }
  .nav-play b { font-size: 1.15rem; }
  .sup-head h2 { font-size: 1.5rem; }
  .sup-track { margin: .4rem 0 0; }
  .sup-day .sd-ico svg { width: 24px; height: 22px; }
  .sup-stage { height: 120px; }
  .sup-chest svg { width: 96px; height: 88px; }
  .sup-rays { width: 180px; height: 180px; }
  .sup-amount b { font-size: 1.4rem; }
  .sup-next { margin: .3rem 0 .4rem; }
}

/* The gold purse hops when coin comes in. */
@keyframes hop { 0% { transform: none; } 40% { transform: translateY(-3px) scale(1.08); } 100% { transform: none; } }
.hud-stat.gold.hop { animation: hop .28s ease-out; }

/* ---------- War Room: boons and blessings, written out in full ---------- */
.bless-list { display: grid; gap: .3rem; }
.bless-row { display: grid; gap: .1rem; padding: .35rem .55rem; border-radius: 10px; background: rgba(255,255,255,.05); border-left: 4px solid var(--line); text-align: left; }
.bless-row b { font-size: .92rem; }
.bless-row small { color: var(--muted); line-height: 1.3; font-size: .84rem; }
.bless-row.boon-rare { border-left-color: #6aa8ff; }
.bless-row.boon-epic { border-left-color: #c58bff; }
.bless-row.boon-common { border-left-color: var(--gold-deep, #c98a1b); }
.bless-row:has(.bi) { display: flex; align-items: center; gap: .5rem; }
.bless-row .bi { font-size: 1.05rem; }
.bless-row .bi + small { color: var(--text); font-size: .88rem; }

/* ---------- touch screens: only compositor-friendly motion runs forever ----------
   Background-position and box-shadow animations repaint their element every frame. On iPhone Safari, with a scrolling page
   and many of them, that left blank patches. Touch devices keep transform and opacity motion and lose those loops. */
@media (hover: none) {
  .home-title h1 { animation: none; }
  .btn.gold::after { animation: none; display: none; }
  .nav-play::after { animation: none; }
  .supply-row.ready, .start-btn:not(:disabled), .btn.tile.ready, .btn.pulse:not(.in-game) { animation: none; }
}

/* Hero Mode: a crosshair for the first-person wall view */
#board-wrap.wall::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid rgba(255, 255, 255, .75); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; }
#board-wrap.wall::before { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #ffd666; border-radius: 50%; z-index: 1; pointer-events: none; }

/* Hero Mode: the commander's status line takes the tower bar's place */
.cmd-line { display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .35rem .7rem; margin-bottom: .35rem; border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 214, 102, .35); font-size: .9rem; }
.cmd-line b { color: var(--gold, #f2b33d); white-space: nowrap; }
.cmd-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-line[hidden] { display: none; }
/* The Daily Siege set-up */
.siege-card { display: grid; gap: .8rem; margin: .6rem 0; }
.siege-map { display: grid; gap: .3rem; justify-items: start; }
.siege-map canvas { width: 100%; max-width: 360px; height: auto; border-radius: 10px; }
.siege-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.siege-unit { display: grid; gap: .2rem; padding: .55rem .65rem; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.siege-unit .chip { justify-self: start; }
.siege-unit small { font-size: .78rem; line-height: 1.3; }
.mode-rules { margin: .2rem 0 .6rem; padding-left: 1.1rem; display: grid; gap: .35rem; }
body.puzzle-mode .abil-bar, body.puzzle-mode .hero-hud, body.puzzle-mode .gar-btn, body.puzzle-mode .auto-btn { display: none !important; }
body.puzzle-mode #toolrow { display: none !important; }
body.auto-mode .tower-bar { display: none !important; }

/* Hero Mode touch controls: FIRE button with an ammo/reload ring, auto-look toggle, lock and hit-marker crosshair states */
.hero-fire { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: 14px; width: 86px; height: 86px; border-radius: 50%; border: 0; padding: 0; z-index: 6;
  display: grid; place-items: center; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(circle at 50% 40%, rgba(70, 40, 20, .78), rgba(25, 14, 8, .82)); box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 214, 102, .35); }
.hero-fire .hf-ring { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#ffd666 calc(var(--rl, 1) * 1turn), rgba(255, 255, 255, .15) 0); -webkit-mask: radial-gradient(circle, transparent 46px, #000 47px); mask: radial-gradient(circle, transparent 46px, #000 47px); }
.hero-fire b { font-size: 30px; line-height: 1; margin-top: -8px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.hero-fire small { position: absolute; bottom: 13px; font: 800 12px/1 "Baloo 2", system-ui; letter-spacing: .02em; opacity: .9; }
.hero-fire.armed { box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 0 0 3px #ffd666, 0 0 18px rgba(255, 214, 102, .45); }
.hero-fire.empty b { opacity: .45; }
.hero-fire:active { transform: scale(.94); }
.hero-autolook { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: 112px; z-index: 6; border: 0; border-radius: 999px; padding: 6px 10px;
  font: 700 12px/1 "Baloo 2", system-ui; color: #fff; background: rgba(20, 14, 10, .62); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); touch-action: manipulation; }
.hero-autolook[aria-pressed="true"] { background: rgba(120, 84, 20, .85); box-shadow: inset 0 0 0 2px #ffd666; }
.hero-fire[hidden], .hero-autolook[hidden] { display: none; }
#board-wrap.wall.locked::after { border-color: #ffd666; transform: scale(.85); transition: transform .12s, border-color .12s; }
#board-wrap.wall.hm-hit::after { border-color: #fff; transform: scale(1.25) rotate(45deg); border-radius: 4px; }
#board-wrap.wall.hm-crit::after { border-color: #ffd25e; transform: scale(1.45) rotate(45deg); border-radius: 4px; border-width: 3px; }
#board-wrap.wall.hm-kill::after { border-color: #ff5a4a; transform: scale(1.6) rotate(45deg); border-radius: 4px; border-width: 3px; }
#board-wrap.wall.hm-nope::after { animation: hm-shake .16s; }
@keyframes hm-shake { 25% { margin-left: -16px; } 75% { margin-left: -10px; } }
.hero-coach { position: absolute; z-index: 6; pointer-events: none; padding: 6px 10px; border-radius: 10px; font: 800 13px/1.1 "Baloo 2", system-ui; color: #1e1a14; background: #ffd666; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); animation: hc-bob 1.2s ease-in-out infinite; }
.hero-coach.hc-fire { right: calc(max(14px, env(safe-area-inset-right)) + 96px); bottom: 40px; }
.hero-coach.hc-fire::after { content: ''; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 0; border-left-color: #ffd666; }
.hero-coach.hc-look { left: 50%; top: 30%; transform: translateX(-50%); }
.hero-coach[hidden] { display: none; }
@keyframes hc-bob { 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .hero-coach { animation: none; } }

/* v1.39: More modes, Siege Trials and Draft cards */
.trial-row { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .7rem; align-items: center; margin: .5rem 0; }
.trial-row.locked { opacity: .55; }
.trial-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font: 800 1rem/1 "Baloo 2", system-ui; background: rgba(255, 214, 102, .18); color: var(--gold, #f2b33d); }
.trial-body { display: grid; gap: .15rem; min-width: 0; }
.trial-body small { line-height: 1.3; }
.trial-side { display: grid; gap: .35rem; justify-items: end; }
.trial-side .stars { color: var(--gold, #f2b33d); letter-spacing: .08em; font-size: 1.05rem; }
.draft-card canvas { width: 56px; height: 56px; justify-self: center; }
.draft-card { display: grid; gap: .3rem; }

/* v1.50.1: one-tap first-person Hero view button */
#hud .hero-view-btn.on { background: rgba(255, 214, 102, .22); border-color: #ffd666; color: #ffd666; }

/* v1.51: three kinds of game, one Continue that asks which */
.cat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cat-card { position: relative; display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; font: inherit; color: var(--text); text-align: left; cursor: pointer; border-radius: 12px; background: var(--enamel); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1.5px var(--line), 0 3px 0 #0f0b08; transition: transform .1s, filter .12s; min-width: 0; }
.cat-card:hover { filter: brightness(1.12); }
.cat-card:active { transform: translateY(2px); }
.cat-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cat-card .cc-ico { font-size: 1.7rem; line-height: 1; flex: none; }
.cat-card .cc-txt { display: grid; min-width: 0; }
.cat-card b { font-size: 1.02rem; }
.cat-card small { color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-card .cc-going { position: absolute; top: -8px; right: 6px; font-size: .68rem; font-weight: 800; padding: .05rem .4rem; border-radius: 999px; background: #3b82c4; color: #fff; border: 2px solid var(--ink); }
.cat-card.on { color: var(--ink); background: linear-gradient(#f4c55a, #e5a628); box-shadow: 0 3px 0 #0f0b08; }
.cat-card.on small { color: rgba(26, 20, 16, .75); }
@media (max-width: 560px) { .cat-card { flex-direction: column; text-align: center; gap: .2rem; padding: .55rem .3rem; } .cat-card small { max-width: 100%; } }
.save-pick h2 { margin: 0 0 .2rem; }
.save-list { display: grid; gap: .45rem; margin: .7rem 0; max-height: 55vh; overflow: auto; }
.save-row { display: flex; align-items: center; gap: .7rem; text-align: left; width: 100%; cursor: pointer; font: inherit; color: var(--text); }
.save-row small { display: block; }
.ms-tabs[hidden] { display: none; }

/* v1.51: the Dominion war map wears the Realm map's parchment-and-ink look */
.dom-map { background: #d9c08a; border: 3px solid #3b2a1a; box-shadow: inset 0 0 0 2px #a8895a, 0 4px 0 #0f0b08; }
.dom-map .hex polygon { stroke: rgba(106, 74, 44, 0.7); stroke-width: 1.1; }
.dom-map .hex .fogfill, .dom-map .hex.fog polygon:first-child { fill: #d9c9a2; }
.dom-map .hex.fog polygon { stroke: rgba(106, 74, 44, 0.45); stroke-dasharray: 3 3; }
.dom-map .hex .own { fill: none; stroke-width: 2.6; stroke-opacity: .95; stroke-dasharray: none; pointer-events: none; }
.dom-map .hex .gl, .dom-map .hex .gl * { pointer-events: none; stroke-dasharray: none; }
.dom-map .hex .gl path, .dom-map .hex .gl circle, .dom-map .hex .gl ellipse { stroke: #4a3420; stroke-width: .9; }
.dom-map .hex.mine polygon:first-child { stroke: #3b2a1a; stroke-width: 1.4; }
.dom-map .hex.front:not(.mine) polygon:first-child { stroke: rgba(179, 38, 46, 0.8); stroke-dasharray: 4 3; }
.dom-map .hex.sel polygon:first-child { stroke: #b3262e; stroke-width: 3.6; stroke-dasharray: none; }
.dom-map .hex.threat polygon:first-child { stroke: #b3262e; stroke-width: 3.6; }
.dom-map .hex .hn { fill: #2c1d10; stroke: rgba(246, 236, 207, 0.85); font-family: Georgia, 'Grenze Gotisch', serif; }
.dom-map .hex.fog .hi { fill: rgba(74, 52, 32, .7); }
.dom-map .hex .hp { fill: #6a1519; }
.dom-map .lake polygon { fill: #8fb3b6; fill-opacity: .9; stroke: #3b2a1a; stroke-width: 1.2; }
.dom-map .decor .cart-t { font: 800 15px 'Grenze Gotisch', Georgia, serif; fill: #3b2a1a; }
.dom-map .decor .cart-s { font: italic 7.5px Georgia, serif; fill: #3b2a1a; }
.dom-map .decor .rose-n { font: 800 11px 'Grenze Gotisch', Georgia, serif; fill: #3b2a1a; stroke: none; }
.dom-legend i { border: 1.5px solid #3b2a1a; }

/* v1.52: tap "citizens online now" to see who */
button.front-foot.linklike { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: 0; display: flex; align-items: center; gap: .4rem; }
button.front-foot.linklike:hover span:nth-child(2) { text-decoration: underline; }

/* v1.53: Warrior mode — on foot in the 3D world. A floating stick on the left, attack, skill, dodge and fury on the right. */
body.warrior-mode #dock, body.warrior-mode #toolrow, body.warrior-mode .abil-bar, body.warrior-mode .hero-hud, body.warrior-mode .hero-fire, body.warrior-mode .hero-autolook, body.warrior-mode .as-cmd { display: none !important; }
.wr-ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wr-ui[hidden] { display: none; }
.wr-zone { position: absolute; pointer-events: auto; touch-action: none; }
.wr-stick-zone { left: 0; top: 0; bottom: 0; width: 50%; }   /* the whole board: no tap ever falls through to building or the wall bow */
.wr-look-zone { right: 0; top: 0; bottom: 0; width: 50%; }
.wr-stick { position: absolute; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(20, 16, 12, .15), rgba(20, 16, 12, .38)); border: 2px solid rgba(255, 255, 255, .45); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.wr-stick.idle { left: calc(max(14px, env(safe-area-inset-left)) + 62px); top: calc(100% - 78px); opacity: .5; }
.wr-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%, #fff, #d9d2c2); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.wr-btns { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: 10px; width: 180px; height: 176px; pointer-events: none; }
.wr-btn { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; overflow: hidden; cursor: pointer; color: #fff;
  background: radial-gradient(circle at 50% 32%, rgba(104, 80, 56, .94), rgba(38, 28, 20, .94)); box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 214, 102, .5); transition: transform .08s; }
.wr-btn b { position: relative; z-index: 1; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.wr-btn .wb-cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, .58); pointer-events: none; }
.wr-btn.down { transform: scale(.9); }
.wr-btn.nope { animation: wr-nope .2s; }
@keyframes wr-nope { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.wr-atk { width: 90px; height: 90px; right: 0; bottom: 0; }
.wr-atk b { font-size: 36px; }
.wr-atk.armed { box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 0 0 3px #ffd666, 0 0 18px rgba(255, 214, 102, .45); }
.wr-skill { width: 62px; height: 62px; right: 102px; bottom: 6px; }
.wr-skill b, .wr-fury b { font-size: 26px; }
.wr-skill.ready { box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 0 0 2px #9fd8ff; }
.wr-dodge { width: 52px; height: 52px; right: 86px; bottom: 82px; }
.wr-dodge b { font-size: 22px; }
.wr-fury { width: 64px; height: 64px; right: 13px; bottom: 102px; --fill: 0; }
.wr-fury::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill) * 100%); background: linear-gradient(to top, rgba(224, 83, 47, .95), rgba(255, 179, 71, .85)); pointer-events: none; }
.wr-fury .wb-lbl { position: absolute; bottom: 7px; z-index: 1; font: 800 9px/1 "Baloo 2", system-ui; letter-spacing: .08em; opacity: .9; }
.wr-fury.ready { animation: wr-glow 1s ease-in-out infinite; box-shadow: 0 0 0 3px #ffd666, 0 0 22px rgba(255, 140, 40, .8); }
.wr-fury.active { box-shadow: 0 0 0 3px #ff7a3a, 0 0 22px rgba(255, 90, 40, .9); }
@keyframes wr-glow { 50% { transform: scale(1.08); } }
.wr-plate { position: absolute; left: max(8px, env(safe-area-inset-left)); top: 8px; width: min(48vw, 230px); padding: 5px 8px 6px; border-radius: 10px; background: rgba(20, 16, 12, .66); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); pointer-events: none; }
.wp-top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; font: 800 13px/1.1 "Baloo 2", system-ui; }
.wp-lv { color: #ffd666; }
.wp-hp, .wp-xp { display: block; position: relative; margin-top: 4px; border-radius: 4px; overflow: hidden; background: #3a1a1a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.wp-hp { height: 10px; } .wp-xp { height: 4px; background: #2a2418; }
.wp-hp > i, .wp-xp > i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .15s; }
.wp-hp > i { background: linear-gradient(#9fd86a, #5fa83a); } .wp-hp.low > i { background: linear-gradient(#ff8a7a, #d9473b); }
.wp-xp > i { background: #f2b33d; }
.wr-tools { position: absolute; left: max(8px, env(safe-area-inset-left)); top: 62px; display: flex; gap: 6px; z-index: 2; }
.wr-tool { pointer-events: auto; touch-action: manipulation; min-width: 46px; height: 40px; padding: 2px 7px; border: 0; border-radius: 10px; display: grid; justify-items: center; align-content: center; color: #fff; cursor: pointer;
  background: rgba(20, 16, 12, .62); box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .22); font-family: "Baloo 2", system-ui; }
.wr-tool b { font-size: 17px; line-height: 1; } .wr-tool small { font: 800 9px/1 "Baloo 2", system-ui; letter-spacing: .06em; opacity: .85; }
.wr-tool.on { box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 0 0 2px #ffd666; }
.wr-tool.locked { opacity: .55; } .wr-tool.cool { opacity: .6; }
.wr-ui.dead .wr-tools { opacity: .5; }
.wr-swapgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: .6rem 0; }
.wr-swapcard { display: flex; gap: .5rem; align-items: center; text-align: left; padding: .5rem .6rem; cursor: pointer; }
.wr-swapcard:disabled { opacity: .55; cursor: default; }
.wr-swapcard.sel { box-shadow: inset 0 0 0 2px #ffd666; }
.wr-swapcard .wc-ico { font-size: 28px; line-height: 1; }
.wr-swapcard .ws-txt { display: grid; gap: 1px; } .wr-swapcard small { font-size: 11px; line-height: 1.2; }
.wr-ko { position: absolute; right: max(8px, env(safe-area-inset-right)); top: 8px; display: grid; justify-items: end; color: #fff; pointer-events: none; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.wr-ko b { font: 800 30px/0.9 "Grenze Gotisch", Georgia, serif; color: #ffd666; }
.wr-ko small { font: 800 11px/1 "Baloo 2", system-ui; letter-spacing: .12em; margin-top: -2px; }
.wr-hits { font: 800 15px/1 "Baloo 2", system-ui; margin-top: 3px; }
.wr-hits.hot { color: #ffb347; transform: scale(1.12); transform-origin: right; }
.wr-down { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); display: grid; gap: .2rem; text-align: center; padding: .6rem 1rem; border-radius: 12px; background: rgba(20, 10, 10, .72); color: #fff; font: 700 14px/1.2 "Baloo 2", system-ui; pointer-events: none; }
.wr-down b { font: 800 22px/1 "Grenze Gotisch", Georgia, serif; color: #ff9a8a; }
.wr-down[hidden] { display: none; }
.wr-ui.dead .wr-btns { opacity: .4; }
.wr-coach { position: absolute; z-index: 7; pointer-events: none; padding: 6px 10px; border-radius: 10px; font: 800 13px/1.1 "Baloo 2", system-ui; color: #1e1a14; background: #ffd666; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); animation: hc-bob 1.2s ease-in-out infinite; }
.wr-coach.wc-move { left: 12px; bottom: 150px; }
.wr-coach.wc-atk { right: 10px; bottom: 186px; }
@media (max-height: 520px) { .wr-btns { transform: scale(.85); transform-origin: bottom right; } .wr-stick.idle { top: calc(100% - 66px); } }
@media (prefers-reduced-motion: reduce) { .wr-fury.ready, .wr-coach { animation: none; } }

/* the Warrior set-up page */
.wr-sides { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .6rem 0; }
.wr-side { display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.wr-side .ws-ico { font-size: 1.7rem; }
.wr-side b { display: block; }
.wr-side.sel, .wr-class.sel { box-shadow: inset 0 0 0 3px var(--gold), 0 4px 0 #0f0b08; }
.wr-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.wr-class { display: grid; gap: .4rem; text-align: left; cursor: pointer; font: inherit; color: var(--text); padding: .7rem .8rem; }
.wc-head { display: flex; align-items: center; gap: .55rem; }
.wc-head > div { flex: 1; display: grid; }
.wc-ico { font-size: 2rem; line-height: 1; }
.wc-lv { font: 800 .8rem/1 "Baloo 2", system-ui; padding: .2rem .45rem; border-radius: 999px; background: rgba(242, 179, 61, .18); color: var(--gold); border: 1.5px solid rgba(242, 179, 61, .6); }
.wc-blurb { margin: 0; font-size: .85rem; color: var(--muted); }
.wc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .8rem; }
.wc-stat { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: .75rem; }
.pips { display: inline-flex; gap: 2px; }
.pips b { width: 9px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.pips b.on { background: var(--gold); }
.wc-moves { display: grid; gap: .25rem; font-size: .78rem; }
.wc-moves small { display: block; color: var(--muted); }
.wc-mastery { display: grid; gap: .2rem; }
.wc-mastery .bar { height: 5px; }
.cat-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .cat-cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wr-sides { grid-template-columns: 1fr; } }

/* v1.53: the command layer in every attack mode (select, March, Hold, Fall back), and the Warlord's posts */
.as-cmd { display: flex; align-items: center; gap: 4px; flex: 1 0 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 2px; }
.as-cmd::-webkit-scrollbar { display: none; }
.as-chip, .as-order { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 42px; height: 42px; padding: 2px 3px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--text);
  background: var(--enamel); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1.5px var(--line), 0 2px 0 #0f0b08; touch-action: manipulation; }
.as-chip span, .as-order span { font-size: 1.05rem; line-height: 1; }
.as-chip small, .as-order small { font: 700 .58rem/1 "Baloo 2", system-ui; color: var(--muted); }
.as-chip .n { position: absolute; top: -7px; right: -5px; min-width: 16px; padding: 1px 4px; border-radius: 999px; font: 800 .6rem/1.2 "Baloo 2", system-ui; font-style: normal; color: #fff; background: #3b82c4; border: 1.5px solid var(--ink); }
.as-chip[disabled] { opacity: .45; cursor: default; }
.as-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px #7fe08a, 0 2px 0 #0f0b08; }
.as-chip:active, .as-order:active { transform: translateY(1px); }
.as-cmd.has-sel .as-order { box-shadow: inset 0 0 0 2px rgba(127, 224, 138, .7), 0 2px 0 #0f0b08; }
.as-sep { flex: 0 0 2px; height: 30px; background: var(--line); border-radius: 2px; }
.as-sel-info { flex: 0 0 auto; font-size: .72rem; white-space: nowrap; padding-left: 2px; }
@media (max-width: 520px) { .as-sel-info { display: none; } .as-cmd { justify-content: space-between; } }
@media (orientation: landscape) and (min-width: 700px) { .as-cmd { flex-wrap: wrap; overflow: visible; } }
/* landscape phones: the dock is a side column, so the command bar sits as a compact block on top instead of filling it */
@media (orientation: landscape) and (max-height: 520px) { .as-cmd { flex: 0 0 auto; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; overflow: visible; gap: 3px; padding-top: 6px; } .as-chip, .as-order { min-width: 40px; height: 36px; } .as-sep { display: none; } .as-sel-info { display: none; } }
body.warrior-mode .view-btn, body.warrior-mode .hero-view-btn, body.warrior-mode .rot-btn { display: none !important; }
@media (max-width: 700px) { body.warrior-mode #app:has(#game-view:not([hidden])) #toasts { top: calc(var(--map-top, 5.5rem) + 58px); } }
.warrior-setup .setup-foot .btn { white-space: nowrap; }
@media (max-width: 520px) { .warrior-setup .setup-foot small { font-size: .7rem; } }

/* v1.56: quick build — tap an empty plot and its towers open beside it (Kingdom Rush style). */
.qb { position: absolute; z-index: 7; left: 0; top: 0; max-width: min(92%, 330px); padding: 6px; border-radius: 14px; background: rgba(24, 20, 36, .94); box-shadow: 0 6px 20px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 214, 102, .45); color: #fff; animation: qb-in .14s ease-out; touch-action: manipulation; }
@keyframes qb-in { from { transform: scale(.85); opacity: 0; } }
.qb-info { font: 600 12px/1.25 "Baloo 2", system-ui; color: #d8d0c0; padding: 0 4px 5px; max-width: 300px; }
.qb-info b { color: #ffd666; }
.qb-grid { display: grid; grid-template-columns: repeat(4, 62px); gap: 5px; }
.qb-grid.many { grid-template-columns: repeat(5, 56px); }
@media (max-width: 360px) { .qb-grid, .qb-grid.many { grid-template-columns: repeat(4, 54px); } }
.qb-btn { display: grid; justify-items: center; gap: 1px; padding: 4px 2px 3px; min-height: 58px; border: 0; border-radius: 10px; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); font: 800 12px/1 "Baloo 2", system-ui; }
.qb-btn canvas { width: 34px; height: 34px; }
.qb-btn .qb-c { color: #ffd666; white-space: nowrap; }
.qb-btn.poor { opacity: .5; } .qb-btn.poor .qb-c { color: #ff9a8a; }
.qb-btn.capped { opacity: .4; }
.qb-btn.sel { background: rgba(255, 214, 102, .22); box-shadow: inset 0 0 0 2px #ffd666; opacity: 1; }
.qb-btn.sel .qb-c { color: #9be9a0; }
.qb-btn:active { transform: scale(.94); }

/* v1.56: coins fly to the gold counter; the board's edge flashes red when the horde breaks through. */
.coin-fly { position: fixed; left: -9px; top: -9px; width: 18px; height: 18px; z-index: 60; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c4, #ffd25e 45%, #c98a1a); box-shadow: 0 0 0 1.5px #7a4f0e, 0 2px 6px rgba(0, 0, 0, .35); will-change: transform; }
.hud-stat.gold.bump { animation: gold-bump .22s ease-out; }
@keyframes gold-bump { 40% { transform: scale(1.14); filter: brightness(1.25); } }
.hurt-vig { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; box-shadow: inset 0 0 calc(40px + 50px * var(--k, .6)) rgba(217, 40, 30, calc(.35 + .4 * var(--k, .6))); }
.hurt-vig.on { animation: hurt-vig .55s ease-out; }
@keyframes hurt-vig { 0% { opacity: 1; } 100% { opacity: 0; } }

/* v1.56: pinch zoom — a small button brings the whole field back. */
.zoom-reset { position: absolute; z-index: 6; left: max(8px, env(safe-area-inset-left)); bottom: 10px; width: 42px; height: 42px; border: 0; border-radius: 12px; cursor: pointer; color: #fff; font: 800 22px/1 system-ui; background: rgba(24, 20, 36, .78); box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 0 0 1.5px rgba(255, 214, 102, .5); touch-action: manipulation; }