/* Castle Defense. The board's pixel size is set by the script from .cd-fit's measured box, so
   nothing here gives .cd-stage a size. */
.game-root[data-game="castle-defense"] {
  padding: clamp(10px, 2.2vw, 18px);
  background: radial-gradient(120% 100% at 50% 0%, #4a2a26 0%, #33201d 55%, #221513 100%);
  border-color: #1d1110;
}
.cd { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }

.cd-fit { display: grid; place-items: center; width: 100%; height: calc(100svh - 160px); min-height: 300px; }
.cd-stage {
  position: relative; overflow: hidden; border-radius: 10px;
  box-shadow: 0 10px 26px rgba(10, 4, 2, .5);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cd-canvas { display: block; width: 100%; height: 100%; }

/* Emptied between hints: the min-height must equal one line, or the board below it in the
   page-filling panel resizes every time a hint comes and goes. */
.cd-cap {
  min-height: 1.6em; line-height: 1.6; margin: 0; text-align: center; font-size: .86rem; font-weight: 600;
  color: rgba(255, 236, 220, .88);
}

.cd-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.cd-ctl {
  border: 1px solid rgba(255, 236, 220, .25); border-radius: 9px; padding: 6px 12px;
  background: rgba(255, 236, 220, .1); color: #ffece0; font: inherit; font-size: .84rem;
  font-weight: 650; cursor: pointer; white-space: nowrap;
}
.cd-ctl:hover { background: rgba(255, 236, 220, .2); }
.cd-speed { min-width: 3.2em; font-variant-numeric: tabular-nums; }
.cd-fs { display: inline-flex; align-items: center; gap: 7px; }
/* Two nested corners read as "expand" at any size; U+26F6 tofus on Windows and Android. */
.cd-fsicon {
  position: relative; display: inline-block; width: .85em; height: .72em;
  border: 2px solid currentColor; border-radius: 2px;
}
.cd-fsicon::before {
  content: ''; position: absolute; inset: 2px;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .45;
}

/* The upgrade pick between waves. */
.cd-pick {
  position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 12px;
  background: rgba(20, 8, 6, .55);
}
.cd-pick:empty { display: none; }
.cd-pick-in { display: flex; flex-direction: column; gap: 8px; width: min(100%, 330px); animation: cd-pop .28s cubic-bezier(.3, 1.4, .5, 1); }
.cd-pick-title {
  margin: 0 0 2px; text-align: center; color: #fff4e6; font-weight: 800; font-size: 1.02rem;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.cd-card {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
  border: 2px solid #e8d2b0; border-radius: 14px; background: #fff8ec; color: #3a2418;
  font: inherit; cursor: pointer; box-shadow: 0 4px 0 #b99a74, 0 8px 18px rgba(0, 0, 0, .3);
  transition: transform .1s ease, box-shadow .1s ease;
}
.cd-card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #b99a74, 0 10px 20px rgba(0, 0, 0, .32); }
.cd-card:active { transform: translateY(3px); box-shadow: 0 1px 0 #b99a74, 0 4px 10px rgba(0, 0, 0, .3); }
.cd-card.is-hero { border-color: #ffc857; background: #fff3d6; }
.cd-card-icon { flex: none; width: 44px; font-size: 2rem; line-height: 1; text-align: center; }
.cd-card-icon img { display: block; margin: 0 auto; }
.cd-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-card-head { display: flex; align-items: baseline; gap: 8px; }
.cd-card-head strong { font-size: .98rem; }
.cd-card-head em {
  font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; background: #d9822b;
  border-radius: 6px; padding: 1px 6px;
}
.cd-card.is-hero .cd-card-head em { background: #2fa85a; }
.cd-card-line { font-size: .8rem; line-height: 1.3; color: #6b4a36; }

.cd-end { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 12px; background: rgba(20, 8, 6, .5); }
.cd-end:empty { display: none; }
.cd-end .result-card {
  width: min(100%, 320px); padding: 18px 20px 20px; border-radius: 18px; background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25); animation: cd-pop .32s cubic-bezier(.3, 1.4, .5, 1);
}
.cd-end .result-card .result-done { font-size: 1.6rem; margin: 0 0 6px; }
.cd-end .result-card .btn { margin-top: 12px; }
.cd-end .btn-primary { background: #2fa85a; }
.cd-end .btn-primary:hover { background: #268c4a; }
@keyframes cd-pop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Mode 3 — phone. The panel sheds its card and reaches the gutter. */
@media (max-width: 640px) {
  .game-root[data-game="castle-defense"] { border-radius: 0; margin-inline: -8px; padding: 8px 8px 12px; }
  .cd { gap: 6px; }
  /* The board is bound by the width on every phone, so the box takes the board's shape; a
     height budget alone leaves dead panel above and below it and pushes the controls down. */
  .cd-fit { height: auto; aspect-ratio: 400 / 660; max-height: calc(100svh - 180px); min-height: 0; }
  .cd-controls { gap: 6px; flex-wrap: nowrap; }
  .cd-fslabel { display: none; }
  .cd-ctl { padding: 6px 9px; font-size: .8rem; }
}

/* Mode 1 — page-embedded above the phone: the whole card fits under the header. */
@media (min-width: 641px) {
  .cd-fit { height: min(780px, calc(100svh - 200px)); }
}

/* A phone on its side. */
@media (max-width: 900px) and (max-height: 480px) {
  .cd-cap { display: none; }
  .cd-fslabel { display: none; }
  .cd-fit { height: max(160px, calc(100svh - 110px)); min-height: 0; }
}

/* Mode 2 — page-filling. The panel's size is game-layout.css's; all that is left here is how
   the box inside it divides, so nothing below may name a window measurement. */
html.fills-window .game-root[data-game="castle-defense"] .cd { height: 100%; }
html.fills-window .game-root[data-game="castle-defense"] .cd > :not(.cd-fit) { flex: none; }
html.fills-window .game-root[data-game="castle-defense"] .cd-fit { flex: 1 1 0; height: auto; min-height: 0; }

/* Mode 4 — true full screen, over the page. */
body.cd-locked { overflow: hidden; }
.game-root .cd-full {
  position: fixed; inset: 0; z-index: 200; margin: 0; padding: 10px;
  background: radial-gradient(120% 100% at 50% 0%, #4a2a26 0%, #33201d 55%, #1a0f0d 100%);
}
.game-root .cd-full .cd-fit { flex: 1 1 0; height: auto; max-height: none; min-height: 0; aspect-ratio: auto; }
.game-root .cd-full > :not(.cd-fit) { flex: none; }