/* STAGE 09 · a small drafting desk in the established night palette. */
body[data-stage-id="stage-09"] .moves-block { min-width: 0; gap: 6px; }
body[data-stage-id="stage-09"] .moves-block strong {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(.6rem, calc(3.7rem / var(--blueprint-counter-digits, 2)), 1.8rem);
}
.blueprint-play { min-width: 0; }
.blueprint-shell {
  position: relative;
  padding: 15px 13px;
  overflow: hidden;
  border: 1px solid rgba(153, 206, 233, .28);
  border-radius: 22px;
  background: linear-gradient(rgba(116, 186, 225, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 186, 225, .035) 1px, transparent 1px),
    linear-gradient(155deg, #14273f, #0c192e 65%, #14233a);
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow: inset 0 1px rgba(224, 246, 255, .07), 0 12px 25px rgba(0, 0, 0, .17);
}
.blueprint-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 13px; }
.blueprint-heading > div { min-width: 0; }
.blueprint-heading span { color: #89c4db; font-size: .54rem; font-weight: 800; letter-spacing: .13em; }
.blueprint-heading h3 { margin: 4px 0 0; color: #e1eef8; font-size: .88rem; }
.blueprint-heading > strong { padding: 6px 8px; color: #9bb9cf; border: 1px solid rgba(160, 199, 226, .16); border-radius: 8px; background: rgba(3, 12, 28, .4); font-size: .49rem; letter-spacing: .035em; }
.blueprint-heading > strong[data-state="matched"] { color: #b3e8cd; border-color: rgba(140, 225, 190, .4); }
.blueprint-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.blueprint-view { min-width: 0; padding: 8px 4px; text-align: center; border: 1px solid rgba(146, 189, 224, .22); border-radius: 12px; background: rgba(4, 13, 30, .43); transition: border-color 160ms; }
.blueprint-view.matched { border-color: rgba(142, 226, 192, .6); }
.blueprint-view h4 { margin: 0 0 6px; color: #cde3ed; font-size: .69rem; }
.blueprint-view-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 72px); aspect-ratio: 1; gap: 3px; margin: auto; }
.blueprint-view-grid i { position: relative; display: block; min-width: 0; border: 1px solid rgba(151, 199, 227, .12); border-radius: 2px; background: rgba(110, 167, 206, .04); }
.blueprint-view-grid i.expected { border-color: #75b7d7; background: #315f7c; }
.blueprint-view-grid i.actual::after { position: absolute; inset: 3px; border: 2px solid #f3d394; border-radius: 1px; content: ""; }
.blueprint-view-grid i.excess::after { border-color: #eea9a0; background: rgba(228, 128, 121, .18); }
.blueprint-view > small { display: block; margin-top: 5px; color: #8fa7bb; font-size: .49rem; letter-spacing: .02em; }
.blueprint-view > strong { display: block; margin-top: 5px; color: #a7c3d6; font-size: .58rem; font-weight: 600; }
.blueprint-view.matched > strong { color: #a9e2bf; }
.blueprint-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 13px; margin: 9px 0 0; color: #afc5d8; font-size: .58rem; line-height: 1.5; }
.blueprint-legend span { display: inline-flex; align-items: center; gap: 5px; }
.blueprint-legend i { width: 9px; height: 9px; display: inline-block; border: 1px solid #75b7d7; border-radius: 2px; background: #315f7c; }
.blueprint-legend i.current { background: none; border: 2px solid #f3d394; }
.blueprint-legend i.excess { background: rgba(228, 128, 121, .18); border: 2px solid #eea9a0; }
.blueprint-model { display: block; width: min(100%, 340px); height: auto; max-height: 225px; margin: 9px auto 0; overflow: visible; }
.blueprint-model-base { fill: rgba(32, 70, 105, .5); stroke: #6094ad; stroke-width: .7; }
.blueprint-model-front { fill: #214c6d; stroke: #76b7d2; stroke-width: .8; }
.blueprint-model-right { fill: #193a59; stroke: #6393b1; stroke-width: .8; }
.blueprint-model-top { fill: rgba(92, 151, 184, .1); stroke: #679ab5; stroke-width: 1; }
.blueprint-model-top.raised { fill: #5387a5; }
.blueprint-model-top.selected { stroke: #f6d798; stroke-width: 2; }
.blueprint-model-front.lit { fill: #5b859c; }
.blueprint-model-right.lit { fill: #3e657e; }
.blueprint-model-top.raised.lit { fill: #a8dce4; }
.blueprint-window { fill: #91c1d5; opacity: .38; }
.blueprint-window.lit { fill: #ffe4a3; opacity: 1; filter: drop-shadow(0 0 3px #f3d394); }
.blueprint-model-label { fill: #b2c7d6; font-size: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.blueprint-model-caption { fill: #88bed6; font-size: 8px; letter-spacing: 1.5px; }
.blueprint-editor-heading { display: flex; justify-content: space-between; gap: 8px; margin: 2px 2px 7px; color: #96b5cb; font-size: .57rem; }
.blueprint-editor-heading > strong { color: #edd7ad; font-size: .62rem; font-variant-numeric: tabular-nums; }
.blueprint-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.blueprint-cell { display: flex; align-items: center; justify-content: space-between; min-width: 0; min-height: 44px; gap: 4px; padding: 8px 10px; border: 1px solid rgba(130, 188, 221, .24); border-radius: 10px; color: #c7e1ee; background: rgba(12, 31, 51, .8); font-family: inherit; touch-action: manipulation; }
.blueprint-cell small { color: #86a7bd; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .63rem; }
.blueprint-cell strong { font-size: .79rem; font-variant-numeric: tabular-nums; }
.blueprint-cell.selected { border-color: #e5cb94; background: rgba(176, 143, 88, .14); box-shadow: inset 0 0 0 1px rgba(234, 203, 151, .12); }
.blueprint-cell:disabled { opacity: .78; }
.blueprint-cell:focus-visible, .blueprint-controls button:focus-visible, .blueprint-complete:focus-visible { outline: 2px solid #f3d394; outline-offset: 3px; }
.blueprint-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.blueprint-controls button, .blueprint-complete { min-height: 46px; border: 1px solid rgba(160, 208, 231, .4); border-radius: 11px; color: #e2f0fa; background: linear-gradient(145deg, #284767, #17324e); font-family: inherit; font-size: .81rem; font-weight: 700; touch-action: manipulation; }
.blueprint-controls button:disabled { opacity: .38; }
.blueprint-complete { width: 100%; margin-top: 12px; border-color: rgba(224, 207, 156, .58); color: #f7e9c8; background: linear-gradient(145deg, #40535e, #24394a); font-size: .75rem; }
.blueprint-complete:disabled { color: #8099ae; border-color: rgba(139, 171, 195, .17); background: rgba(12, 27, 45, .65); }
.blueprint-restored .blueprint-complete:disabled { color: #b9e6cc; border-color: rgba(142, 226, 192, .35); }
.blueprint-building .blueprint-model { animation: blueprintRise 1100ms ease-out both; }
@keyframes blueprintRise { 0% { filter: brightness(1); transform: translateY(5px); } 48% { filter: brightness(1.8) drop-shadow(0 0 13px rgba(149, 217, 240, .5)); } 100% { filter: brightness(1); transform: translateY(0); } }

/* A small elephant: rounded ears, a short trunk, and the same 54 tag. */
.animal-elephant { --animal-head: #7f9ba9; --animal-head-dark: #405c75; --animal-body: #6f899c; --animal-body-dark: #344a68; --animal-accent: 166, 217, 240; }
.animal-elephant .animal-head { width: 39px; border-radius: 48% 48% 43% 43%; }
.animal-elephant .animal-ear { top: 2px; width: 23px; height: 31px; clip-path: none; border-radius: 65% 55% 65% 45%; }
.animal-elephant .animal-ear::after { inset: 4px; border-radius: inherit; background: rgba(204, 183, 201, .27); }
.animal-elephant .animal-ear.ear-left { left: -16px; transform: rotate(9deg); }
.animal-elephant .animal-ear.ear-right { right: -16px; transform: rotate(-9deg); }
.animal-elephant .animal-eye { top: 11px; width: 8px; height: 10px; }
.animal-elephant .animal-eye.eye-left { left: 6px; }
.animal-elephant .animal-eye.eye-right { right: 6px; }
.animal-elephant .animal-eye b { top: 3px; width: 3px; height: 5px; }
.animal-elephant .animal-trunk { position: absolute; z-index: 4; top: 22px; left: 50%; width: 12px; height: 23px; border: 1px solid rgba(182, 223, 241, .35); border-top: 0; border-radius: 4px 4px 9px 9px; background: linear-gradient(90deg, #59788f, #9bb3bd 40%, #577187); transform: translateX(-50%) rotate(-6deg); }
.animal-elephant .animal-trunk::after { position: absolute; bottom: 3px; left: 3px; right: 3px; height: 1px; content: ""; background: rgba(30, 53, 77, .4); box-shadow: 0 -4px rgba(30, 53, 77, .25); }
.animal-elephant .animal-tail { right: 2px; width: 14px; height: 4px; bottom: 10px; transform: rotate(-42deg); }
.animal-elephant .animal-tag { left: auto; right: 3px; }
.guide-avatar.guide-elephant { border-color: rgba(160, 214, 239, .36); background: radial-gradient(circle at 50% 44%, rgba(151, 211, 240, .15), transparent 60%), #16263c; }
.guide-elephant .wolf-ear { top: 13px; width: 18px; height: 26px; border-color: rgba(179, 217, 237, .4); border-radius: 65%; background: #627c92; clip-path: none; }
.guide-elephant .wolf-ear-left { left: 3px; transform: rotate(10deg); }
.guide-elephant .wolf-ear-right { right: 3px; transform: rotate(-10deg); }
.guide-elephant::before { position: absolute; top: 13px; left: 50%; width: 31px; height: 29px; border: 1px solid rgba(185, 223, 240, .4); border-radius: 50%; content: ""; background: radial-gradient(circle at 29% 45%, #e3f6fc 0 2px, #263d57 2.5px 3.8px, transparent 4px), radial-gradient(circle at 71% 45%, #e3f6fc 0 2px, #263d57 2.5px 3.8px, transparent 4px), linear-gradient(130deg, #9cb9c5, #526f88); transform: translateX(-50%); }
.guide-elephant::after { position: absolute; top: 32px; left: 50%; width: 9px; height: 18px; border: 1px solid rgba(185, 223, 240, .4); border-radius: 3px 3px 7px 7px; content: ""; background: #7894a8; transform: translateX(-50%); }
.guide-elephant .moon-mark { align-self: end; z-index: 4; margin-bottom: 1px; color: #b9e3f1; font-size: .68rem; }
@media (max-width: 359px) { .blueprint-shell { padding: 12px 9px; } .blueprint-views { gap: 5px; } .blueprint-cell { padding: 8px 7px; } .blueprint-heading > strong { font-size: .44rem; } }
@media (prefers-reduced-motion: reduce) { .blueprint-building .blueprint-model { animation: none; } .blueprint-view { transition: none; } }