:root {
  --ink: #302923;
  --ink-soft: #51463c;
  --paper: #eadfb8;
  --paper-light: #f1e8c8;
  --paper-dark: #c8b988;
  --red: #a5483c;
  --blue: #45697a;
  --gold: #d0a84c;
  --shadow: #4b4052;
  --green: #64744b;
  --chalk: #f5e8b0;
  --danger: #a23e37;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23302923' stroke-opacity='.095' stroke-linecap='round'%3E%3Cpath d='M3 16l22-3M42 8l31 4M7 43l17 3M35 34l39-6M11 70l34 3M58 58l21 5'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: "Comic Neue", "Comic Sans MS", "Segoe Print", cursive;
  background: #171512;
  color: var(--ink);
  user-select: none;
}
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; background: #8d9a68; cursor: crosshair; }

.crayon-icon { width: 100%; height: 100%; display: block; overflow: visible; }
.crayon-icon path, .crayon-icon circle, .crayon-icon ellipse { vector-effect: non-scaling-stroke; }

/* Civilization ledger: intentionally loose rather than a full-width dashboard slab. */
#topbar {
  position: absolute;
  top: 7px;
  left: 10px;
  right: 10px;
  min-height: 62px;
  display: grid;
  grid-template-columns: 220px minmax(430px, 1fr) auto;
  align-items: start;
  gap: 12px;
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.brand-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 7px 7px;
  background: var(--paper);
  background-image: var(--grain);
  border: 3px solid var(--ink);
  clip-path: polygon(1% 5%, 98% 0, 100% 91%, 70% 97%, 36% 93%, 0 100%);
  box-shadow: 4px 5px 0 rgba(29, 24, 20, .34);
  transform: rotate(-.35deg);
}
.brand-block h1 { margin: 0; font-size: 16px; letter-spacing: .7px; line-height: 1; }
#ageLabel { margin-top: 4px; color: var(--red); font-size: 10px; font-weight: 800; }
.tiny-logo { width: 38px; height: 42px; position: relative; flex: 0 0 38px; }
.tiny-logo::before { content: ""; position: absolute; width: 13px; height: 13px; left: 13px; top: 1px; border: 4px solid var(--ink); background: var(--gold); border-radius: 50%; }
.tiny-logo::after { content: ""; position: absolute; left: 20px; top: 16px; width: 4px; height: 24px; background: var(--ink); transform: rotate(-5deg); }
.tiny-logo i { position: absolute; height: 4px; background: var(--ink); transform-origin: left center; left: 19px; top: 24px; width: 18px; }
.tiny-logo i:nth-child(1) { transform: rotate(-150deg); }
.tiny-logo i:nth-child(2) { transform: rotate(-28deg); }
.tiny-logo i:nth-child(3) { top: 36px; transform: rotate(135deg); }

#resources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  max-height: 116px;
  overflow: hidden;
}
.resource-mark {
  width: clamp(74px, 7.4vw, 112px);
  min-height: 54px;
  display: grid;
  grid-template-columns: 31px 1fr;
  grid-template-rows: 28px 15px;
  align-items: center;
  padding: 4px 7px 3px 5px;
  background: var(--paper-light);
  background-image: var(--grain);
  border: 3px solid var(--ink);
  box-shadow: 2px 3px 0 rgba(34, 28, 23, .28);
  clip-path: polygon(1% 8%, 96% 1%, 100% 86%, 89% 100%, 6% 94%);
  transform: rotate(var(--tilt, 0deg));
}
.resource-mark:nth-child(2n) { clip-path: polygon(3% 0, 100% 8%, 96% 96%, 10% 100%, 0 77%); }
.resource-mark .resource-icon { width: 30px; height: 30px; grid-row: 1 / 3; }
.resource-mark b { font-size: 16px; line-height: 1; align-self: end; }
.resource-mark small { font-family: inherit; font-size: 8px; letter-spacing: .5px; font-weight: 900; color: var(--ink-soft); }
.resource-mark.changed { animation: resourceScratch .35s steps(2, end); }
@keyframes resourceScratch { 50% { transform: translateY(-4px) rotate(-1.4deg) scale(1.06); } }

.options-scrap {
  display: flex;
  gap: 3px;
  align-items: center;
  padding: 5px 6px;
  background: var(--paper-dark);
  background-image: var(--grain);
  border: 3px solid var(--ink);
  clip-path: polygon(1% 8%, 99% 0, 96% 95%, 5% 100%);
  box-shadow: 3px 4px 0 rgba(29, 24, 20, .3);
  transform: rotate(.3deg);
}

.sketch-button {
  --crayon-tilt: 0deg;
  position: relative;
  border: 3px solid var(--ink);
  background: var(--paper-light);
  background-image: var(--grain);
  box-shadow: 2px 3px 0 rgba(24, 20, 17, .32);
  cursor: pointer;
  transform: rotate(var(--crayon-tilt));
  transition: transform .08s linear, translate .08s linear;
}
.sketch-button::after {
  content: "";
  position: absolute;
  inset: 3px 2px 2px 4px;
  border: 1px solid rgba(48, 41, 35, .38);
  clip-path: polygon(0 8%, 96% 0, 100% 94%, 8% 100%);
  pointer-events: none;
}
.sketch-button:hover:not(:disabled) { translate: 0 -2px; transform: rotate(calc(var(--crayon-tilt) * -1)); }
.sketch-button:active:not(:disabled) { translate: 1px 2px; box-shadow: 1px 1px 0 rgba(24,20,17,.35); }
.sketch-button:disabled { cursor: not-allowed; color: #786f61; background-color: #cfc4a2; box-shadow: none; }
.sketch-button:disabled::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%; top: 48%;
  border-top: 4px solid rgba(162, 62, 55, .72);
  transform: rotate(-10deg);
  z-index: 3;
  pointer-events: none;
}
.glyph-button, .speed { width: 35px; height: 31px; font-weight: 900; }
.speed.active { background-color: var(--gold); }
.text-button { min-width: 47px; height: 31px; font-size: 9px; font-weight: 900; }

/* Two overlapping left-side scraps. */
#leftPanel { position: absolute; top: 84px; left: 11px; width: 208px; pointer-events: none; }
#leftPanel > * { pointer-events: auto; }
.crayon-panel {
  position: relative;
  background: var(--paper);
  background-image: var(--grain);
  border: 4px solid var(--ink);
  box-shadow: 5px 6px 0 rgba(28, 23, 19, .3);
}
.crayon-panel::before {
  content: "";
  position: absolute;
  inset: 5px 7px 6px 4px;
  border: 2px solid rgba(48, 41, 35, .32);
  clip-path: polygon(1% 6%, 98% 0, 100% 93%, 8% 100%, 0 73%);
  pointer-events: none;
}
.tribe-scrap {
  padding: 12px 13px 14px;
  clip-path: polygon(2% 2%, 98% 0, 100% 92%, 73% 98%, 44% 94%, 4% 100%, 0 52%);
  transform: rotate(-.45deg);
}
.age-scrap {
  margin-top: -2px;
  margin-left: 13px;
  padding: 12px 10px 11px;
  clip-path: polygon(0 4%, 95% 0, 100% 25%, 96% 96%, 56% 100%, 3% 95%);
  transform: rotate(.65deg);
}
.panel-pin { position: absolute; right: 15px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }
.crayon-panel h2, .tribe-board h2 { margin: 0 0 8px; font-size: 14px; letter-spacing: .4px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.stat-sketch { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; min-height: 29px; gap: 5px; font-size: 10px; }
.stat-sketch .stat-icon { width: 24px; height: 24px; }
.stat-sketch b { font-size: 12px; }
.stability-face { display: grid; grid-template-columns: 28px 1fr; gap: 6px; align-items: center; margin-top: 4px; }
.stability-face .face-icon { width: 27px; height: 27px; }
.stability-scratch { height: 11px; position: relative; border-bottom: 4px solid var(--ink); transform: rotate(-1deg); }
.stability-scratch i { position: absolute; left: 0; bottom: -4px; height: 7px; background: var(--gold); border: 2px solid var(--ink); width: var(--stability, 50%); clip-path: polygon(0 30%, 98% 0, 100% 100%, 4% 85%); }
.alignment-mark { margin-top: 7px; padding-top: 5px; border-top: 2px dashed rgba(48,41,35,.6); font-size: 10px; font-weight: 900; text-align: center; }

.age-path { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; margin: 3px 0 7px; align-items: end; }
.age-rune { min-width: 0; text-align: center; opacity: .3; }
.age-rune i { display: block; width: 16px; height: 16px; margin: 0 auto 2px; border: 3px solid var(--ink); border-radius: 50%; transform: rotate(var(--rune-tilt, 0deg)); }
.age-rune span { display: none; }
.age-rune.past, .age-rune.current { opacity: 1; }
.age-rune.past i { background: var(--ink-soft); }
.age-rune.current i { background: var(--gold); outline: 3px solid rgba(208,168,76,.35); animation: agePulse 1.1s steps(2,end) infinite; }
.age-rune.future i { border-style: dashed; }
@keyframes agePulse { 50% { transform: scale(1.17) rotate(5deg); } }
.age-caption { font-size: 10px; display: flex; justify-content: space-between; font-weight: 900; }
.project-scratch { height: 14px; margin: 6px 2px; border: 3px solid var(--ink); background: var(--paper-dark); clip-path: polygon(0 16%, 100% 0, 98% 90%, 4% 100%); }
.project-scratch i { display: block; height: 100%; width: var(--progress); background: var(--gold); background-image: var(--grain); }
.advance-button { width: 100%; min-height: 40px; margin-top: 6px; font-size: 11px; font-weight: 900; background-color: var(--gold); }
.small-copy { margin-top: 7px; font-size: 9px; line-height: 1.4; }
.requirement-list { display: grid; gap: 3px; }
.requirement-mark { display: grid; grid-template-columns: 14px 1fr; gap: 4px; align-items: start; }
.requirement-mark::before { content: "○"; font-family: sans-serif; font-weight: 900; color: var(--danger); }
.requirement-mark.met::before { content: "●"; color: var(--green); }

.requirement-groups { display: grid; gap: 6px; }
.requirement-group { display: grid; gap: 2px; padding: 4px 5px; border: 2px dashed rgba(48,41,35,.38); background: rgba(255,255,255,.16); }
.requirement-group-title { font-size: 8px; letter-spacing: .8px; color: var(--ink-soft); }
.requirement-group .requirement-mark { grid-template-columns: 12px 1fr; font-size: 9px; line-height: 1.15; }
.requirement-group .requirement-mark span > b { font-size: 9px; }
.requirement-group .requirement-mark small { font-size: 7px; margin-top: 1px; }
.age-project-foot { margin-top: 5px; padding-top: 4px; border-top: 2px dashed rgba(48,41,35,.48); font-size: 8px; font-weight: 900; line-height: 1.2; }
.requirement-ready, .age-project-readout { display: grid; gap: 3px; padding: 6px; border: 2px dashed rgba(48,41,35,.55); background: rgba(208,168,76,.18); }
.requirement-ready b, .age-project-readout b { font-size: 10px; }
.requirement-ready small, .age-project-readout small { font-size: 8px; line-height: 1.25; }
.build-category[hidden] { display: none !important; }

/* Command sketchbook. */
#rightPanel {
  position: absolute;
  top: 84px;
  right: 11px;
  width: 236px;
  min-height: 244px;
  max-height: calc(100vh - 276px);
  padding: 15px 13px 15px 18px;
  overflow-y: auto;
  clip-path: polygon(3% 1%, 100% 4%, 97% 94%, 80% 100%, 7% 97%, 0 30%);
  transform: rotate(.35deg);
}
#rightPanel::-webkit-scrollbar { width: 8px; }
#rightPanel::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--paper); }
.book-rings { position: absolute; left: 3px; top: 24px; bottom: 20px; display: flex; flex-direction: column; justify-content: space-around; }
.book-rings i { width: 17px; height: 8px; border: 3px solid var(--ink); border-radius: 45%; background: var(--paper-dark); }
.selection-portrait {
  width: 74px;
  height: 66px;
  margin: 0 auto 3px;
  padding: 5px;
  border-bottom: 3px solid var(--ink);
  transform: rotate(-1deg);
}
.selection-portrait .crayon-icon { filter: drop-shadow(2px 2px 0 rgba(48,41,35,.18)); }
.portrait-empty { height: 100%; position: relative; }
.portrait-empty span { position: absolute; left: 8px; right: 8px; height: 3px; background: rgba(48,41,35,.38); transform: rotate(-12deg); }
.portrait-empty span:nth-child(2) { top: 25px; transform: rotate(7deg); }
.portrait-empty span:nth-child(3) { top: 45px; transform: rotate(-3deg); }
#selectionTitle { margin: 2px 0 7px; text-align: center; font-size: 15px; line-height: 1.1; }
.selection-body { min-height: 68px; font-size: 10px; line-height: 1.45; border-top: 2px dashed rgba(48,41,35,.45); border-bottom: 2px dashed rgba(48,41,35,.45); padding: 7px 2px; }
.entity-health { margin: 4px 0; }
.injury-line { position: relative; height: 10px; border-bottom: 4px solid rgba(48,41,35,.32); }
.injury-line i { position: absolute; left: 0; bottom: -4px; height: 6px; width: var(--health); background: var(--red); clip-path: polygon(0 30%, 98% 0, 100% 100%, 6% 85%); }
.selection-details { display: grid; grid-template-columns: 1fr auto; gap: 3px 7px; }
#actionGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.command-card { min-height: 76px; padding: 5px 4px 4px; font-size: 9px; display: grid; grid-template-rows: 29px auto auto; justify-items: center; align-items: center; }
.command-card .command-icon { width: 31px; height: 31px; }
.command-card b { line-height: 1.05; text-align: center; }
.command-card small { font-size: 7px; line-height: 1.2; }
.command-card.cost-poor { background-color: #cdbf9d; }
.command-card.busy::before { content: "WAIT"; position: absolute; top: 4px; right: 4px; font-size: 7px; color: var(--red); transform: rotate(9deg); }

/* Messages are torn charcoal notes, not toasts. */
#messageFeed { position: absolute; left: 231px; bottom: 104px; width: min(410px, 35vw); display: flex; flex-direction: column-reverse; gap: 4px; pointer-events: none; }
.feed-message { color: var(--chalk); background: rgba(49, 42, 37, .9); padding: 6px 12px 6px 10px; font-size: 10px; border-left: 5px solid var(--gold); clip-path: polygon(0 5%, 100% 0, 97% 92%, 68% 100%, 2% 94%); animation: noteScratch .22s steps(2,end); }
.feed-message.warning { border-left-color: var(--red); }
@keyframes noteScratch { from { transform: translateX(-9px) rotate(-1deg); opacity: 0; } }

/* Bottom pile of construction drawings. */
#buildBar {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  align-items: end;
  padding: 4px 7px 5px;
  background: rgba(234, 223, 184, .92);
  background-image: var(--grain);
  border: 4px solid var(--ink);
  clip-path: polygon(1% 7%, 12% 0, 29% 4%, 47% 0, 65% 4%, 82% 1%, 99% 8%, 97% 95%, 5% 100%);
  box-shadow: 5px 6px 0 rgba(25,20,17,.3);
}
.build-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8px; font-weight: 900; padding: 4px 1px; border-left: 2px dashed var(--ink); }
.build-label small { color: var(--red); }
.build-card { width: 72px; height: 74px; padding: 3px 4px; display: grid; grid-template-rows: 42px 12px 10px; justify-items: center; align-items: center; clip-path: polygon(2% 4%, 96% 0, 100% 92%, 78% 100%, 7% 96%); }
.build-card:nth-of-type(even) { clip-path: polygon(5% 0, 100% 7%, 96% 96%, 14% 100%, 0 81%); }
.build-card .build-icon { width: 44px; height: 42px; }
.build-card b { font-size: 8px; line-height: 1; text-align: center; }
.build-card small { font-size: 6px; white-space: nowrap; }
.build-card.locked-age { background-color: #b7ad95; }
.build-card.locked-age::before { content: "TOO SMART"; position: absolute; top: 23px; left: 1px; right: 1px; color: var(--danger); font-size: 7px; font-weight: 900; transform: rotate(-11deg); z-index: 4; }
.build-card.cost-poor { background-color: #c8b98c; }
.cancel-card { width: 52px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #d7c29a; }
.cancel-mark { font-family: sans-serif; color: var(--red); font-size: 31px; line-height: 23px; font-weight: 900; }
.cancel-card b { font-size: 8px; }
.cancel-card small { font-size: 6px; }

/* Hide-map minimap frame. */
#minimapWrap {
  position: absolute;
  right: 12px;
  bottom: 9px;
  width: 230px;
  height: 164px;
  padding: 11px 6px 6px;
  background: #a78b5f;
  background-image: var(--grain);
  border: 4px solid var(--ink);
  box-shadow: 4px 5px 0 rgba(25,20,17,.35);
  clip-path: polygon(5% 2%, 95% 0, 100% 17%, 97% 94%, 77% 100%, 3% 95%, 0 42%);
  transform: rotate(-.4deg);
}
.map-label { position: absolute; top: -9px; left: 23px; background: var(--paper-light); border: 3px solid var(--ink); padding: 2px 8px; font-size: 8px; font-weight: 900; transform: rotate(1.5deg); z-index: 2; }
#minimap { width: 214px; height: 144px; display: block; image-rendering: pixelated; clip-path: polygon(2% 3%, 97% 0, 100% 91%, 84% 100%, 4% 96%, 0 48%); cursor: pointer; }
.map-stitch { position: absolute; inset: 7px 4px 4px 5px; border: 2px dashed rgba(48,41,35,.55); clip-path: polygon(2% 3%, 97% 0, 100% 91%, 84% 100%, 4% 96%, 0 48%); pointer-events: none; }

/* Overlays */
.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(25, 21, 18, .78); z-index: 20; }
.overlay.visible { display: flex; }
.mural-overlay { background: #625d49; overflow: hidden; }
.cave-mural { position: absolute; inset: 0; background-color: #69624c; background-image: var(--grain); }
.cave-mural::after { content: ""; position: absolute; inset: 2%; border: 7px solid rgba(42,36,31,.55); clip-path: polygon(1% 8%, 99% 0, 97% 94%, 70% 100%, 2% 95%); }
.mural-hill { position: absolute; bottom: -7%; width: 58%; height: 50%; background: #37342d; border: 8px solid var(--ink); border-radius: 50% 50% 0 0; }
.hill-a { left: -12%; transform: rotate(9deg); }
.hill-b { right: -15%; transform: rotate(-8deg); }
.mural-sun { position: absolute; left: 12%; top: 10%; width: 90px; height: 90px; border: 10px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 8px rgba(208,168,76,.18); }
.mural-sun::before, .mural-sun::after { content: ""; position: absolute; left: -34px; right: -34px; top: 35px; border-top: 9px solid var(--gold); transform: rotate(17deg); }
.mural-sun::after { transform: rotate(-27deg); }
.mural-shadow { position: absolute; right: 9%; top: 8%; width: 120px; height: 150px; background: var(--shadow); border: 8px solid var(--ink); clip-path: polygon(42% 0, 72% 20%, 94% 16%, 79% 46%, 100% 76%, 66% 69%, 49% 100%, 34% 68%, 0 81%, 17% 47%, 3% 19%, 31% 23%); opacity: .86; }
.mural-stick { position: absolute; bottom: 10%; width: 160px; height: 190px; }
.mural-stick::before { content: ""; position: absolute; left: 62px; top: 0; width: 38px; height: 38px; border: 10px solid var(--ink); border-radius: 50%; background: var(--red); }
.mural-stick::after { content: ""; position: absolute; left: 78px; top: 43px; width: 10px; height: 95px; background: var(--ink); transform: rotate(-5deg); }
.mural-stick i { position: absolute; left: 82px; top: 78px; width: 78px; height: 10px; background: var(--ink); transform-origin: left center; }
.mural-stick i:nth-child(1) { transform: rotate(-160deg); }
.mural-stick i:nth-child(2) { transform: rotate(-20deg); }
.mural-stick i:nth-child(3) { top: 132px; transform: rotate(132deg); }
.tribe-a { left: 4%; transform: rotate(-7deg) scale(.8); }
.tribe-b { right: 3%; transform: rotate(7deg) scale(.8) scaleX(-1); }
.tribe-b::before { background: var(--blue); }
.title-card { width: min(700px, 88vw); position: relative; text-align: center; padding: 20px 26px 22px; color: var(--chalk); text-shadow: 3px 3px 0 var(--ink); }
.title-scratch { display: inline-block; padding: 3px 12px; border: 4px solid var(--chalk); font-size: 10px; transform: rotate(-1deg); }
.title-card h1 { font-size: clamp(46px, 8vw, 88px); line-height: .78; letter-spacing: -6px; margin: 14px 0 18px; transform: rotate(-1deg); }
.title-card h1 em { color: var(--gold); font-style: normal; }
.title-card p { max-width: 510px; margin: 0 auto 15px; font-size: 13px; }
.mural-controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; text-shadow: none; }
.mural-control { min-width: 230px; padding: 8px 11px; color: var(--ink); background: var(--paper); background-image: var(--grain); border: 4px solid var(--ink); font-size: 9px; font-weight: 900; clip-path: polygon(2% 4%, 98% 0, 100% 93%, 9% 100%, 0 68%); }
.mural-control input, .mural-control select { display: block; width: 100%; margin-top: 5px; padding: 7px; background: transparent; border: 0; border-bottom: 4px solid var(--ink); color: var(--ink); text-align: center; font-weight: 900; outline: none; }
.huge { min-height: 58px; padding: 8px 24px; font-weight: 900; font-size: 15px; margin-top: 13px; }
.fire-button { background-color: var(--gold); display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.drawn-fire { width: 28px; height: 35px; display: inline-block; background: var(--red); border: 4px solid var(--ink); clip-path: polygon(48% 0, 65% 33%, 85% 18%, 100% 68%, 74% 100%, 27% 96%, 0 61%, 28% 39%); }
.controls-note { margin-top: 13px; font-size: 9px; opacity: .86; }

.doctrine-overlay { background-color: rgba(35, 30, 26, .9); background-image: var(--grain); }
.doctrine-modal { width: min(840px, 94vw); }
.doctrine-heading { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; text-align: center; color: var(--chalk); }
.doctrine-heading h1 { margin: 0; font-size: clamp(22px, 4vw, 38px); }
.doctrine-heading p { margin: 4px 0 12px; font-size: 11px; }
.chalk-sun { width: 58px; height: 58px; border: 7px solid var(--gold); border-radius: 50%; justify-self: center; }
.ink-hole { width: 68px; height: 68px; background: var(--shadow); border: 7px solid var(--ink); clip-path: polygon(47% 0, 65% 22%, 91% 12%, 77% 42%, 100% 63%, 70% 72%, 58% 100%, 35% 76%, 5% 90%, 17% 54%, 0 30%, 31% 25%); justify-self: center; }
#doctrineChoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.doctrine-choice { min-height: 326px; padding: 13px 14px; display: grid; grid-template-rows: 108px auto auto auto auto; justify-items: center; border-width: 6px; clip-path: polygon(1% 5%, 98% 0, 100% 90%, 84% 99%, 6% 95%, 0 64%); }
.doctrine-choice.dark { color: var(--chalk); background-color: var(--shadow); }
.doctrine-choice.light { color: var(--ink); background-color: #e1c86c; }
.doctrine-choice.wild { color: var(--ink); background-color: #9fb96d; background-image: repeating-linear-gradient(135deg, rgba(82,99,59,.2) 0 7px, rgba(234,223,184,.12) 7px 13px), var(--grain); }
.doctrine-choice.wild .doctrine-beast { filter: saturate(1.18) contrast(1.04); }
.doctrine-choice.wild .crayon-icon { filter: drop-shadow(2px 2px 0 rgba(48,41,35,.25)); }
.doctrine-beast { width: 108px; height: 102px; }
.doctrine-path-marker { align-self: center; margin: 2px 0 3px; padding: 3px 7px; border: 3px solid var(--ink); background: var(--paper-light); color: var(--ink); font-size: 8px; font-weight: 900; letter-spacing: .4px; text-align: center; clip-path: polygon(3% 0, 100% 8%, 96% 100%, 0 92%); }
.doctrine-path-marker.light { background-color: color-mix(in srgb, var(--gold) 34%, var(--paper-light)); }
.doctrine-path-marker.dark { color: var(--chalk); background-color: color-mix(in srgb, var(--shadow) 78%, var(--ink)); border-color: var(--chalk); }
.doctrine-path-marker.wild { background-color: #d7e0a7; }
.doctrine-choice.wild .doctrine-path-marker::before { content: '↟ '; font-family: sans-serif; }
.icon-root-wild path, .icon-root-wild ellipse, .icon-root-wild circle { vector-effect: non-scaling-stroke; }
.doctrine-choice h2 { margin: 3px 0; font-size: 24px; }
.doctrine-choice p { margin: 4px 0; min-height: 62px; font-size: 10px; }
.doctrine-choice strong { display: block; font-size: 10px; }

.history-overlay { background-color: rgba(24,20,17,.86); background-image: var(--grain); }
.end-card { width: min(610px, 90vw); padding: 30px; text-align: center; clip-path: polygon(2% 2%, 97% 0, 100% 84%, 88% 100%, 7% 96%, 0 43%); }
.end-card h1 { font-size: clamp(40px, 7vw, 68px); line-height: .9; margin: 2px 0 15px; color: var(--red); }
.history-tallies { margin: 18px auto; max-width: 360px; padding: 12px; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); font-size: 12px; line-height: 1.8; }
.battle-scratch { width: 100%; height: 38px; border-bottom: 5px dashed var(--ink); transform: rotate(-2deg); }

#crayonTooltip { position: fixed; z-index: 99; display: none; max-width: 260px; padding: 8px 11px; color: var(--chalk); background: var(--ink); background-image: var(--grain); border: 3px solid var(--chalk); clip-path: polygon(2% 4%, 98% 0, 100% 88%, 89% 100%, 4% 95%); font-size: 9px; line-height: 1.35; pointer-events: none; }
#crayonTooltip.visible { display: block; }


#buildBar.attention { animation: buildAttention .42s steps(3,end); }
@keyframes buildAttention { 35% { transform: translateX(-50%) translateY(-8px) rotate(-1deg); } 70% { transform: translateX(-50%) translateY(-2px) rotate(1deg); } }
.pause-glyph { position: relative; width: 18px; height: 18px; display: inline-block; }
.pause-glyph i { position: absolute; top: 2px; bottom: 2px; width: 5px; background: var(--ink); border: 1px solid var(--ink); transform: rotate(-2deg); }
.pause-glyph i:first-child { left: 2px; }
.pause-glyph i:last-child { right: 2px; transform: rotate(2deg); }
#pauseButton.paused .pause-glyph i { display: none; }
#pauseButton.paused .pause-glyph::before { content: ""; position: absolute; left: 4px; top: 1px; border-left: 14px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; transform: rotate(2deg); }
.cancel-mark { position: relative; width: 27px; height: 27px; display: block; }
.cancel-mark::before, .cancel-mark::after { content: ""; position: absolute; left: 12px; top: 0; width: 5px; height: 29px; background: var(--red); border: 1px solid var(--ink); transform: rotate(43deg); }
.cancel-mark::after { transform: rotate(-48deg); }

/* Drop 003 — Living Cave War additions */
.counter-note {
  margin-top: 8px;
  padding: 7px 9px;
  border: 2px dashed rgba(48,41,35,.55);
  background: rgba(224,207,153,.28);
  font-size: 11px;
  line-height: 1.25;
  transform: rotate(-.25deg);
}
.feed-message.fire { border-left-color: #d28b3f; }
.feed-message.command { border-left-color: #8f7357; }

/* Drop 004 multiplayer scraps */
.online-controls[hidden]{display:none!important}.network-mark,.room-mark,.latency-mark{font-weight:900;font-size:12px;letter-spacing:.08em;padding:4px 7px;border-bottom:3px solid #3a3029}.network-mark.connected{color:#315f45}.network-mark.warning{color:#9b3e35}.danger{color:#8e2f2b!important}.start-mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.start-mode-buttons .fire-button{grid-column:1/-1}.network-button{font-size:14px!important;min-height:48px!important}.lobby-overlay{background:rgba(37,31,35,.84)}.lobby-card{width:min(680px,90vw);padding:30px;transform:rotate(-.25deg)}.lobby-card h1{font-size:38px;margin:8px 0}.lobby-players{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.lobby-player{min-height:100px;padding:15px;border:4px solid #342d28;background:#d9ca91;box-shadow:5px 6px 0 rgba(35,28,25,.35)}.lobby-player:nth-child(2){transform:rotate(.8deg)}.lobby-player.ready{outline:5px solid rgba(179,128,49,.55)}.lobby-player.empty{opacity:.55}.ready-flame{display:inline-block;width:15px;height:20px;border-radius:50% 50% 45% 45%;background:#bc623e;margin-right:8px;transform:rotate(8deg)}.ready-flame.out{background:#554d47}.doctrine-lobby-control{max-width:420px;margin:0 auto 18px}.lobby-actions{display:flex;justify-content:center;gap:12px;align-items:center}@media(max-width:900px){.start-mode-buttons{grid-template-columns:1fr}.start-mode-buttons .fire-button{grid-column:auto}.lobby-players{grid-template-columns:1fr}.online-controls{max-width:48vw;flex-wrap:wrap}}

/* Drop 005 multiplayer reliability marks. */
.copy-room-button{position:absolute;top:27px;right:30px;transform:rotate(1deg);font-size:10px;padding:7px 10px}.lobby-card{position:relative}.lobby-player.disconnected{background:#b7aa92;outline:5px dashed #9b3e35;opacity:.78}.lobby-player em{display:block;color:#9b3e35;font-size:8px;font-style:normal;margin-top:7px}.fire-button.lit{box-shadow:0 0 0 5px rgba(208,168,76,.35),5px 6px 0 rgba(35,28,25,.35)}.rematch-status{min-height:20px;font-size:11px;font-weight:900;color:#6a4b2e}.build-card.pending,.command-card.pending{outline:4px dashed #d0a84c;animation:pendingScratch .65s steps(2,end) infinite}@keyframes pendingScratch{50%{outline-offset:4px;filter:contrast(1.08)}}
[hidden]{display:none!important}
.lobby-player>b,.lobby-player>small,.lobby-player>div,.lobby-player>em{display:block;margin-top:5px}.lobby-player>b{font-size:18px;overflow-wrap:anywhere}.lobby-player>small{font-size:9px;letter-spacing:.08em}.doctrine-lobby-control select{appearance:auto;background:var(--paper-light);border:3px solid var(--ink);padding:8px;text-align:left}.online-controls{white-space:nowrap}
.doctrine-lobby-control{display:block;width:min(420px,100%)}

/* Drop 006 construction sketchbook pages and Soil overlay controls. */
.build-categories{display:flex;gap:3px;align-items:center;margin:0 5px 4px}.build-category{height:26px;padding:2px 8px;font-size:9px;font-weight:900}.build-category.active{background:#98a963}.build-page{display:flex;gap:5px;align-items:flex-end;min-width:0}.build-card[hidden]{display:none!important}.soil-toggle{min-width:62px;height:54px;font-size:9px;font-weight:900;background:#9aa56a}.soil-toggle.active{background:#d0a84c}.field-state{margin-top:5px;padding:5px;border:2px dashed rgba(48,41,35,.55);font-size:9px}.fertility-number{color:#68784b;font-weight:900}



/* Drop 011 — Everything Fits on the Cave Wall.
   Geometry is owned by UILayoutController; major panels reflow and never use
   transform scaling as a substitute for layout. */
:root {
  --ui-scale: 1;
  --left-panel-width: 208px;
  --right-panel-width: 236px;
  --minimap-width: 230px;
  --minimap-height: 164px;
  --build-card-width: 72px;
  --build-card-height: 74px;
  --bottom-tray-height: 96px;
  --safe-edge: 10px;
}

#leftPanel {
  left: var(--safe-edge);
  width: var(--left-panel-width);
  transform: none;
}

#rightPanel {
  right: var(--safe-edge);
  width: var(--right-panel-width);
  max-height: calc(100vh - 84px - var(--minimap-height) - (var(--safe-edge) * 2));
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: rotate(.35deg);
}

.selection-portrait { flex: 0 0 auto; }
.selection-body {
  min-height: 54px;
  max-height: 104px;
  overflow: hidden;
  flex: 0 1 auto;
}

.command-pager {
  display: grid;
  gap: 4px;
  margin-top: 7px;
  flex: 0 0 auto;
}
.command-page-tabs {
  display: flex;
  gap: 3px;
  justify-content: center;
  min-width: 0;
}
.command-page-tab {
  min-width: 0;
  flex: 1 1 auto;
  height: 24px;
  padding: 1px 3px;
  font-size: 8px;
  font-weight: 900;
}
.command-page-tab.active { background: var(--gold); }
.command-page-turns {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 4px;
}
.command-page-arrow { width: 28px; height: 24px; padding: 0; font-size: 10px; }
.command-page-label { text-align: center; font-size: 9px; letter-spacing: .04em; }
#actionGrid {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 5px;
  min-height: 0;
  flex: 0 0 auto;
}
.command-card {
  min-height: 68px;
  height: 68px;
  padding: 4px;
  grid-template-rows: 27px minmax(18px, auto) minmax(10px, auto);
  font-size: 9px;
  overflow: hidden;
}
.command-card b { font-size: 9px; overflow-wrap: anywhere; }
.command-card small { font-size: 8px; line-height: 1.05; white-space: normal; overflow-wrap: anywhere; }

#buildBar {
  left: calc(var(--left-panel-width) + (var(--safe-edge) * 2));
  right: calc(var(--minimap-width) + (var(--safe-edge) * 2));
  bottom: var(--safe-edge);
  transform: none;
  min-height: var(--bottom-tray-height);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "label categories soil cancel"
    "label cards soil cancel";
  align-items: center;
  gap: 4px 6px;
  padding: 5px 7px;
}
.build-label { grid-area: label; }
.build-categories {
  grid-area: categories;
  position: static;
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  min-width: 0;
}
.build-category {
  height: 25px;
  min-width: 46px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 900;
}
.build-category.active { background: #98a963; }
.build-page-indicator {
  margin-left: auto;
  padding: 2px 5px;
  border-bottom: 2px dashed var(--ink);
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}
.build-page {
  grid-area: cards;
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  max-width: none;
  overflow: visible;
}
.build-card {
  width: var(--build-card-width);
  min-width: var(--build-card-width);
  height: var(--build-card-height);
  grid-template-rows: minmax(34px, 1fr) minmax(12px, auto) minmax(12px, auto);
}
.build-card .build-icon { width: min(44px, calc(var(--build-card-width) - 12px)); height: 38px; }
.build-card b { font-size: 9px; overflow-wrap: anywhere; }
.build-card small {
  min-height: 9px;
  font-size: 8px;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.soil-toggle { grid-area: soil; min-width: 56px; height: 56px; font-size: 9px; font-weight: 900; background: #9aa56a; }
.soil-toggle.active { background: #d0a84c; }
.cancel-card { grid-area: cancel; width: 52px; height: 64px; }
.cancel-card small { font-size: 8px; }

#minimapWrap {
  right: var(--safe-edge);
  bottom: var(--safe-edge);
  width: var(--minimap-width);
  height: var(--minimap-height);
  transform: rotate(-.4deg);
}
#minimap {
  width: calc(var(--minimap-width) - 16px);
  height: calc(var(--minimap-height) - 20px);
}

#messageFeed {
  left: calc(var(--left-panel-width) + (var(--safe-edge) * 2));
  bottom: calc(var(--bottom-tray-height) + (var(--safe-edge) * 2));
  width: min(410px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 80px));
}
.feed-message { font-size: 10px; }

.start-mode-buttons .sketch-button { color: var(--ink); text-shadow: none; }
.network-button { color: var(--ink) !important; }
.mural-overlay { overflow: hidden; }
.title-card { max-height: calc(100vh - (var(--safe-edge) * 2)); overflow: auto; scrollbar-width: thin; }
.title-card h1 { line-height: .86; }
.mural-control, .mural-control input, .mural-control select { min-width: 0; }
.overlay { padding: var(--safe-edge); overflow: auto; }
.doctrine-modal, .lobby-card, .end-card { max-height: calc(100vh - (var(--safe-edge) * 2)); }
.doctrine-choice p { overflow-wrap: anywhere; }
.lobby-player b, .lobby-player div, .lobby-player small { overflow-wrap: anywhere; }

#crayonTooltip { max-width: min(260px, calc(100vw - 32px)); }

#buildBar.attention { animation: buildAttention011 .42s steps(3,end); }
@keyframes buildAttention011 {
  35% { translate: 0 -8px; rotate: -1deg; }
  70% { translate: 0 -2px; rotate: 1deg; }
}

html[data-ui-layout="standard"] #topbar {
  grid-template-columns: 180px minmax(360px, 1fr) auto;
}
html[data-ui-layout="standard"] .brand-block h1 { font-size: 13px; }
html[data-ui-layout="standard"] .resource-mark { width: 74px; }
html[data-ui-layout="standard"] #leftPanel { width: var(--left-panel-width); }
html[data-ui-layout="standard"] #rightPanel { width: var(--right-panel-width); }

html[data-ui-layout="compact"] #topbar {
  top: 5px;
  left: var(--safe-edge);
  right: var(--safe-edge);
  grid-template-columns: 158px minmax(0, 1fr);
  gap: 6px;
}
html[data-ui-layout="compact"] .brand-block { padding: 4px 7px; }
html[data-ui-layout="compact"] .brand-block h1 { font-size: 12px; }
html[data-ui-layout="compact"] .tiny-logo { width: 32px; flex-basis: 32px; transform: scale(.82); transform-origin: left center; }
html[data-ui-layout="compact"] #resources { justify-content: flex-end; gap: 2px; }
html[data-ui-layout="compact"] .resource-mark {
  width: clamp(58px, 7vw, 68px);
  min-height: 48px;
  grid-template-columns: 23px 1fr;
  grid-template-rows: 24px 13px;
  padding: 3px;
}
html[data-ui-layout="compact"] .resource-mark .resource-icon { width: 23px; height: 23px; }
html[data-ui-layout="compact"] .resource-mark b { font-size: 12px; }
html[data-ui-layout="compact"] .resource-mark small { font-size: 7px; }
html[data-ui-layout="compact"] .options-scrap {
  position: absolute;
  right: 0;
  top: 54px;
  max-width: calc(100vw - var(--left-panel-width) - 24px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
html[data-ui-layout="compact"] #leftPanel { top: 78px; }
html[data-ui-layout="compact"] #rightPanel {
  top: 112px;
  max-height: calc(100vh - 112px - var(--minimap-height) - (var(--safe-edge) * 2));
  padding: 9px 9px 10px 14px;
}
html[data-ui-layout="compact"] .selection-portrait { width: 56px; height: 45px; padding: 2px; margin-bottom: 1px; }
html[data-ui-layout="compact"] #selectionTitle { font-size: 12px; margin: 1px 0 4px; }
html[data-ui-layout="compact"] .selection-body { min-height: 44px; max-height: 68px; font-size: 9px; line-height: 1.25; padding: 4px 1px; }
html[data-ui-layout="compact"] .counter-note { margin-top: 4px; padding: 4px; font-size: 9px; }
html[data-ui-layout="compact"] .command-page-tab { font-size: 7px; padding-inline: 1px; }
html[data-ui-layout="compact"] .command-page-turns { grid-template-columns: 25px 1fr 25px; }
html[data-ui-layout="compact"] .command-page-arrow { width: 25px; }
html[data-ui-layout="compact"] .command-card { min-height: 68px; height: 68px; grid-template-rows: 25px minmax(19px, auto) minmax(12px, auto); }
html[data-ui-layout="compact"] .command-card .command-icon { width: 26px; height: 26px; }
html[data-ui-layout="compact"] .command-card b { font-size: 8px; }
html[data-ui-layout="compact"] .command-card small { font-size: 8px; }
html[data-ui-layout="compact"] .build-label { display: none; }
html[data-ui-layout="compact"] #buildBar {
  left: calc(var(--left-panel-width) + var(--safe-edge));
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "categories soil cancel"
    "cards soil cancel";
  gap: 3px 5px;
}
html[data-ui-layout="compact"] .build-category { min-width: 41px; height: 23px; padding: 1px 5px; font-size: 8px; }
html[data-ui-layout="compact"] .build-page-indicator { font-size: 7px; }
html[data-ui-layout="compact"] .build-page { gap: 4px; }
html[data-ui-layout="compact"] .build-card .build-icon { height: 32px; }
html[data-ui-layout="compact"] .build-card b { font-size: 8px; }
html[data-ui-layout="compact"] .soil-toggle { min-width: 50px; height: 52px; }
html[data-ui-layout="compact"] .cancel-card { width: 48px; height: 58px; }
html[data-ui-layout="compact"] #messageFeed { width: min(330px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 52px)); }
html[data-ui-layout="compact"] .feed-message:nth-child(n+4) { display: none; }

@media (max-height: 680px) {
  .title-card {
    width: min(960px, 96vw);
    padding: 6px 14px 10px;
  }
  .title-scratch { padding: 2px 9px; font-size: 9px; border-width: 3px; }
  .title-card h1 {
    font-size: clamp(38px, 6vw, 58px);
    line-height: .9;
    letter-spacing: -3px;
    margin: 4px 0 5px;
  }
  .title-card p { margin-bottom: 6px; font-size: 11px; }
  .mural-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 7px;
  }
  .mural-control { min-width: 0; padding: 4px 7px; font-size: 8px; }
  .mural-control input, .mural-control select { margin-top: 2px; padding: 4px; border-bottom-width: 3px; }
  .start-mode-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 5px; }
  .start-mode-buttons .fire-button { grid-column: auto; }
  .huge, .network-button { min-height: 42px !important; margin-top: 0; padding: 5px 8px; font-size: 11px !important; }
  .drawn-fire { width: 20px; height: 25px; border-width: 3px; }
  .controls-note { margin-top: 5px; font-size: 8px; }

  .lobby-card { width: min(760px, 94vw); padding: 12px 18px; }
  .lobby-card h1 { font-size: 28px; margin: 3px 0; }
  .lobby-players { grid-template-columns: 1fr 1fr; gap: 8px; margin: 7px 0; }
  .lobby-player { min-height: 72px; padding: 8px; }
  .doctrine-lobby-control { margin-bottom: 7px; }
  .copy-room-button { top: 12px; right: 15px; }

  .doctrine-modal { width: min(880px, 96vw); }
  .doctrine-heading { grid-template-columns: 58px 1fr 58px; }
  .chalk-sun { width: 43px; height: 43px; border-width: 5px; }
  .ink-hole { width: 48px; height: 48px; border-width: 5px; }
  .doctrine-heading h1 { font-size: 24px; }
  .doctrine-heading p { margin: 2px 0 5px; font-size: 9px; }
  #doctrineChoices { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
  .doctrine-choice {
    min-height: 224px;
    padding: 7px 10px;
    grid-template-rows: 68px auto auto auto auto;
  }
  .doctrine-beast { width: 72px; height: 66px; }
  .doctrine-path-marker { font-size: 7px; padding: 2px 5px; border-width: 2px; }
  .doctrine-choice h2 { font-size: 18px; margin: 1px 0; }
  .doctrine-choice p { min-height: 42px; font-size: 9px; }
  .doctrine-choice strong { font-size: 9px; }

  .end-card { padding: 14px 22px; }
  .end-card h1 { font-size: 42px; margin-bottom: 6px; }
  .history-tallies { margin: 7px auto; padding: 7px; line-height: 1.35; }
  .battle-scratch { height: 20px; }
}

@media (max-width: 1080px) and (min-height: 681px) {
  .start-mode-buttons { grid-template-columns: 1fr; }
  .start-mode-buttons .fire-button { grid-column: auto; }
  .lobby-players { grid-template-columns: 1fr; }
}

/* Drop 013 — Finish What You Started. Persistent construction ledger. */
.construction-ledger {
  margin-top: 8px;
  padding: 9px 8px 8px;
  transform: rotate(.35deg);
  max-height: 246px;
  overflow: hidden;
}
.construction-ledger-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.construction-ledger-head h2 { margin-bottom:5px; }
#constructionLedgerPage { font-size:8px; font-weight:900; border-bottom:2px dashed var(--ink); }
#constructionJobs { display:grid; gap:5px; }
.construction-empty { padding:7px 3px; text-align:center; font-size:8px; opacity:.7; }
.construction-job {
  display:grid;
  grid-template-columns:minmax(0,1fr) 43px 43px;
  gap:3px;
  padding:4px;
  border:2px dashed rgba(48,41,35,.58);
  background:rgba(239,225,178,.72);
}
.construction-job.priority-2 { border-left:5px solid var(--red); }
.construction-job.priority-0 { opacity:.82; }
.construction-job.state-paused { background:rgba(190,179,148,.78); }
.construction-focus {
  min-width:0;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  padding:0 2px;
  cursor:pointer;
  font:inherit;
}
.construction-focus b { display:block; font-size:9px; line-height:1.05; overflow-wrap:anywhere; }
.construction-focus span { display:block; font-size:7px; line-height:1.15; margin-top:2px; overflow-wrap:anywhere; }
.construction-mini { min-width:0; padding:2px; font-size:7px; font-weight:900; border:2px solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer; }
.construction-ledger-pager { display:grid; grid-template-columns:25px 1fr 25px; align-items:center; gap:3px; margin-top:5px; text-align:center; font-size:7px; font-weight:900; }
.construction-page { width:25px; height:22px; padding:0; font-size:9px; }
.construction-ledger.empty .construction-ledger-pager { opacity:.55; }
html[data-ui-layout="compact"] .construction-ledger { max-height:170px; padding:6px; margin-top:5px; }
html[data-ui-layout="compact"] .construction-job { grid-template-columns:minmax(0,1fr) 38px 38px; padding:3px; }
html[data-ui-layout="compact"] .construction-focus b { font-size:8px; }
html[data-ui-layout="compact"] .construction-focus span,
html[data-ui-layout="compact"] .construction-mini { font-size:7px; }

/* Drop 019 — keep the construction ledger inside common 768p desktop viewports. */
@media (min-height:681px) and (max-height:800px) {
  html[data-ui-layout="standard"] .construction-ledger {
    max-height:158px;
    margin-top:4px;
    padding:6px 7px;
  }
  html[data-ui-layout="standard"] .construction-ledger-head h2 { margin-bottom:3px; }
  html[data-ui-layout="standard"] #constructionJobs { gap:3px; }
  html[data-ui-layout="standard"] .construction-job { padding:3px; }
  html[data-ui-layout="standard"] .construction-ledger-pager { margin-top:3px; }
}
@media (max-height:680px) {
  .construction-ledger { max-height:148px; padding:5px 6px; margin-top:4px; }
  .construction-ledger-head h2 { font-size:10px; margin-bottom:3px; }
  .construction-job { grid-template-columns:minmax(0,1fr) 35px 35px; gap:2px; padding:2px; }
  .construction-focus b { font-size:8px; }
  .construction-focus span, .construction-mini { font-size:6px; }
  .construction-ledger-pager { margin-top:3px; }
}

@media (max-height:740px) {
  #constructionLedger {
    position: fixed;
    left: calc(var(--left-panel-width) + (var(--safe-edge) * 2));
    bottom: calc(var(--bottom-tray-height) + (var(--safe-edge) * 2));
    width: min(310px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 64px));
    max-height: 96px;
    z-index: 8;
  }
  #constructionJobs { grid-template-columns: 1fr 1fr; }
  .construction-ledger-pager { grid-column: 1 / -1; }
  #messageFeed {
    left: calc(var(--left-panel-width) + 340px);
    width: min(320px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 380px));
  }
}


/* Drop 021: a runtime exception must never masquerade as an empty battlefield. */
#runtimeFaultSurface {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(23, 21, 18, .86);
}
#runtimeFaultSurface.visible { display: grid; }
.runtime-fault-card {
  width: min(620px, 94vw);
  padding: 24px 28px 28px;
  text-align: center;
  transform: rotate(-.25deg);
}
.runtime-fault-card h1 { margin: 14px 0 8px; font-size: clamp(25px, 5vw, 44px); }
.runtime-fault-card p { margin: 0 auto 18px; max-width: 520px; font-weight: 800; }
.runtime-fault-card strong { display: block; padding: 12px; background: var(--paper-light); border: 3px solid var(--ink); user-select: text; }
.runtime-fault-card small { display: block; margin-top: 8px; color: var(--red); font-weight: 900; }
.runtime-fault-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.runtime-fault-actions button { min-width: 190px; min-height: 48px; font-weight: 900; }

/* Drop 022 — Find Me an Idiot: public queue and viewport-safe cave walls. */
.random-rival-button {
  background-color: var(--gold) !important;
  font-weight: 900;
  letter-spacing: .04em;
}
.start-mode-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.start-mode-buttons .fire-button { grid-column: 1 / -1; }
.start-mode-buttons .random-rival-button { grid-column: 1 / -1; min-height: 56px; }

.matchmaking-overlay { background: rgba(25, 21, 18, .88); }
.matchmaking-card {
  width: min(620px, calc(100vw - (var(--safe-edge) * 2)));
  max-height: calc(100vh - (var(--safe-edge) * 2));
  overflow: auto;
  padding: 24px 32px 28px;
  text-align: center;
  transform: rotate(-.25deg);
}
.matchmaking-card h1 { margin: 16px 0 8px; font-size: clamp(23px, 4vw, 38px); }
.matchmaking-card p { margin: 8px 0; font-weight: 900; }
#matchmakingWaiting { font-size: clamp(20px, 3vw, 30px); }
#matchmakingPosition { padding: 8px; border-block: 2px dashed var(--ink); }
#matchmakingNotice { min-height: 24px; color: var(--red); }
.queue-fire { position: relative; width: 78px; height: 72px; margin: 8px auto 14px; }
.queue-fire::before { content: ""; position: absolute; left: 25px; top: 7px; width: 34px; height: 52px; background: var(--gold); border: 5px solid var(--ink); clip-path: polygon(51% 0, 72% 28%, 100% 43%, 85% 83%, 52% 100%, 16% 84%, 0 51%, 29% 30%); animation: queueFlame .9s steps(3,end) infinite; }
.queue-fire i { position: absolute; bottom: 4px; left: 7px; width: 65px; height: 7px; background: var(--ink); transform: rotate(12deg); }
.queue-fire i:nth-child(2) { transform: rotate(-12deg); }
.queue-fire i:nth-child(3) { bottom: 0; transform: rotate(2deg); }
@keyframes queueFlame { 50% { transform: scale(.9, 1.08) rotate(3deg); } }

.end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.end-actions .huge { flex: 1 1 220px; }
.ui-size-control { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 3px; padding: 2px 4px; font-size: 8px; font-weight: 900; white-space: nowrap; }
.ui-size-control select { max-width: 70px; height: 25px; padding: 1px; border: 2px solid var(--ink); background: var(--paper-light); color: var(--ink); font-size: 8px; font-weight: 900; }

#leftPanel { width: var(--left-panel-width); left: var(--safe-edge); }
#rightPanel {
  width: var(--right-panel-width);
  right: var(--safe-edge);
  max-height: min(var(--right-panel-available-height), calc(100vh - 100px));
}
#buildBar {
  max-width: calc(100vw - var(--left-panel-width) - var(--minimap-width) - (var(--safe-edge) * 5));
  overflow: hidden;
}
.build-page { overflow: hidden; max-width: 100%; }
#minimapWrap { max-width: calc(100vw - (var(--safe-edge) * 2)); }
#topbar { left: var(--safe-edge); right: var(--safe-edge); }

html[data-ui-short="true"] #leftPanel { top: 74px; }
html[data-ui-short="true"] #rightPanel { top: 78px; }
html[data-ui-short="true"] #messageFeed { max-height: 96px; overflow: hidden; }
html[data-ui-short="true"] .feed-message:nth-child(n+4) { display: none; }
html[data-ui-short="true"] #buildBar { min-height: var(--bottom-tray-height); }
html[data-ui-short="true"] .build-card { height: var(--build-card-height); }

@media (min-aspect-ratio: 21/9) {
  #topbar { grid-template-columns: var(--left-panel-width) minmax(520px, 1fr) auto; }
  #resources { max-width: 900px; justify-self: center; }
  #buildBar { justify-self: center; }
}

@media (max-height: 680px) {
  .start-mode-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-mode-buttons .fire-button,
  .start-mode-buttons .random-rival-button { grid-column: 1 / -1; }
  .matchmaking-card { padding: 12px 20px 16px; }
  .matchmaking-card h1 { margin: 7px 0 4px; }
  .queue-fire { transform: scale(.78); margin-block: -2px 2px; }
}

/* Drop 023 — first-match coaching and clear placement feedback */
.guided-practice-button{background:#d8c77a;border-color:#4b402b}
.coach-panel{display:none;position:fixed;left:calc(var(--safe-edge) + var(--left-panel-width) + 12px);top:88px;width:min(330px,calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 60px));max-height:calc(100vh - var(--bottom-tray-height) - 120px);overflow:auto;z-index:18;padding:12px;background:#efe4b7;color:#2d291f;box-shadow:5px 6px 0 rgba(35,31,24,.45)}
.coach-panel.visible{display:block}.coach-panel header{display:flex;justify-content:space-between;gap:8px;align-items:center}.coach-panel h2{font-size:18px;margin:0}.coach-panel p{font-size:12px}.coach-panel ol{padding-left:8px;list-style:none;margin:8px 0}.coach-panel li{font-size:13px;padding:3px 5px;opacity:.68}.coach-panel li.current{font-weight:900;opacity:1;background:#d6b04d}.coach-panel li.done{text-decoration:line-through;opacity:.48}
.placement-reason{display:none;position:fixed;left:50%;bottom:calc(var(--bottom-tray-height) + 16px);transform:translateX(-50%);z-index:19;max-width:min(520px,80vw);padding:8px 14px;background:#5b332a;color:#fff4cf;border:3px solid #2f261d;box-shadow:4px 4px 0 rgba(0,0,0,.35);font-weight:800;text-align:center}.placement-reason.visible{display:block}.placement-reason.valid{background:#506a38}
@media (max-height:720px){.coach-panel{top:58px;max-height:calc(100vh - var(--bottom-tray-height) - 76px);width:280px}.coach-panel li{font-size:11px;padding:2px 4px}}

/* Drop 024 — persistent instruction layer, readable lobby clock, and learning summary */
.coach-hint{margin:7px 0;padding:8px;background:#d7c26e;border:2px dashed #4a3c27;font-weight:800;line-height:1.25}
.coach-truth{margin-bottom:4px}.coach-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;position:sticky;bottom:-12px;background:#efe4b7;padding:8px 0 2px}
.resume-coach{position:fixed;left:calc(var(--safe-edge) + var(--left-panel-width) + 12px);top:88px;z-index:18;background:#d6b04d}
.coach-target{outline:4px dashed #f0c84f!important;outline-offset:4px!important;box-shadow:0 0 0 3px rgba(240,200,79,.22)!important}
#gameCanvas.coach-target{animation:none!important;filter:none!important;transform:none!important;outline:none!important;box-shadow:none!important}
.player-name-control{position:relative;padding-bottom:24px}.tiny-name-button{position:absolute;right:7px;bottom:3px;border:0;background:transparent;text-decoration:underline;font:700 9px inherit;cursor:pointer;color:#4a3c27}
.lobby-ready-clock{margin:8px auto 0;padding:7px 10px;max-width:520px;background:#5b332a;color:#fff1c7;border:3px solid #2e251c;text-align:center;font-weight:900;letter-spacing:.04em}
.learning-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left}.learning-player{padding:10px;background:#e8dcae;border:3px solid #3c3225;box-shadow:4px 4px 0 rgba(0,0,0,.2)}.learning-player.winner{background:#dfc66d}.learning-player h2{font-size:18px;margin:0 0 7px}.learning-tallies{display:grid;gap:3px}.learning-tallies>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(46,37,28,.45);font-size:12px}.next-scribble{grid-column:1/-1;margin-top:12px;padding:10px;background:#5a4a34;color:#fff1c7;border:3px solid #2e251c;text-align:left}.next-scribble h2{margin:0 0 6px;font-size:18px}.next-scribble p{margin:4px 0;line-height:1.35}.history-tallies:has(.learning-comparison){display:block;max-width:min(900px,88vw)}
@media(max-width:850px){.learning-comparison{grid-template-columns:1fr}.coach-actions{grid-template-columns:1fr}.resume-coach{top:58px}}
@media(max-height:720px){.resume-coach{top:58px}.coach-hint{font-size:10px;padding:5px}.coach-actions{position:static}}

/* Drop 024: keep the age action fully legible in short-height layouts. */
.advance-button { min-height: 46px; padding: 5px 4px; line-height: 1.15; }

/* Drop 024: readable physical sizing on high-resolution ultrawide displays. */
html[data-ui-density="large"] .brand-block h1 { font-size: 22px; }
html[data-ui-density="large"] #ageLabel { font-size: 13px; }
html[data-ui-density="large"] .resource-mark b { font-size: 21px; }
html[data-ui-density="large"] .resource-mark small { font-size: 11px; }
html[data-ui-density="large"] .text-button,
html[data-ui-density="large"] .build-category,
html[data-ui-density="large"] .command-page-tab { font-size: 12px; }
html[data-ui-density="large"] .crayon-panel h2,
html[data-ui-density="large"] .tribe-board h2 { font-size: 20px; }
html[data-ui-density="large"] .stat-sketch,
html[data-ui-density="large"] .alignment-mark,
html[data-ui-density="large"] .age-caption,
html[data-ui-density="large"] .small-copy,
html[data-ui-density="large"] .requirement-mark,
html[data-ui-density="large"] .selection-body,
html[data-ui-density="large"] .counter-note { font-size: 14px; }
html[data-ui-density="large"] .stat-sketch b { font-size: 17px; }
html[data-ui-density="large"] .advance-button { font-size: 16px; min-height: 58px; }
html[data-ui-density="large"] #selectionTitle { font-size: 20px; }
html[data-ui-density="large"] .build-card,
html[data-ui-density="large"] .command-card { font-size: 12px; }
html[data-ui-density="large"] .build-card small,
html[data-ui-density="large"] .command-card small { font-size: 10px; }
html[data-ui-density="large"] .feed-message { font-size: 14px; }
html[data-ui-density="large"] .coach-panel { width: min(520px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 80px)); }
html[data-ui-density="large"] .coach-panel h2 { font-size: 26px; }
html[data-ui-density="large"] .coach-panel p { font-size: 16px; }
html[data-ui-density="large"] .coach-panel li { font-size: 17px; padding: 5px 7px; }
html[data-ui-density="large"] .coach-panel button { font-size: 16px; min-height: 48px; }
html[data-ui-density="large"] #placementReason { font-size: 16px; }
html[data-ui-density="large"] .options-scrap button,
html[data-ui-density="large"] .options-scrap select { font-size: 12px; }

html[data-ui-layout="compact"] #resources { max-height: 100px; }
.resource-mark[data-resource="ironOre"], .resource-mark[data-resource="iron"] { background-color: #d4d1c7; }
.requirement-mark small{display:block;margin-top:.18rem;font-size:.72em;opacity:.78;line-height:1.15}.requirement-mark b{display:block}.observer-progression{margin-top:.45rem;padding-top:.35rem;border-top:1px dashed currentColor;display:grid;gap:.12rem}.observer-progression span{font-size:.72em;line-height:1.1}

/* Drop 026: structured age blockers remain actionable without stretching the cave wall off-screen. */
#ageRequirements{max-height:min(190px,calc(100vh - 430px));overflow-y:auto;padding-right:3px}
#ageRequirements::-webkit-scrollbar{width:6px}#ageRequirements::-webkit-scrollbar-thumb{background:var(--ink);border:1px solid var(--paper)}
.requirement-more{padding:.25rem .15rem 0;font-weight:900;border-top:1px dashed currentColor;opacity:.78}
html[data-ui-short="true"] #ageRequirements{max-height:112px}


/* Drop 027: modular cave-noise controls */
.audio-control-wrap{position:relative;display:inline-flex}.audio-button{font-size:20px;min-width:38px}.audio-button.muted{opacity:.48;text-decoration:line-through}.audio-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:230px;padding:12px;display:grid;gap:8px;background:#d6bd82;color:#302923;box-shadow:5px 7px 0 rgba(30,20,10,.35);transform:rotate(-.4deg)}.audio-panel[hidden]{display:none}.audio-panel label{display:grid;grid-template-columns:74px 1fr;gap:8px;align-items:center;font-size:11px;font-weight:800}.audio-panel label:has(input[type=checkbox]){grid-template-columns:20px 1fr}.audio-panel input[type=range]{width:100%;accent-color:#6b2d22}.audio-panel small{line-height:1.25;opacity:.75}.feed-message.age{animation:ageCuePulse .6s ease-out}@keyframes ageCuePulse{0%{transform:scale(.92) rotate(-1deg);filter:brightness(1.7)}100%{transform:none;filter:none}}

/* Drop 028 — close the two low-height certification gaps without hiding controls. */
@media (min-height:681px) and (max-height:740px) {
  .title-card { width:min(960px,96vw); padding:5px 14px 8px; }
  .title-scratch { padding:2px 8px; font-size:9px; border-width:3px; }
  .title-card h1 { font-size:clamp(38px,5.5vw,54px); line-height:.88; margin:3px 0 4px; }
  .title-card p { margin:3px 0 5px; font-size:10px; line-height:1.15; }
  .mural-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 7px; }
  .mural-control { min-width:0; padding:3px 7px; font-size:8px; }
  .mural-control input,.mural-control select { margin-top:1px; padding:3px; border-bottom-width:3px; }
  .start-mode-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:4px; }
  .start-mode-buttons .fire-button { grid-column:auto; }
  .huge,.network-button { min-height:39px!important; margin-top:0; padding:4px 7px; font-size:10px!important; line-height:1.05; }
  .drawn-fire { width:18px; height:22px; border-width:3px; }
  .controls-note { margin-top:3px; font-size:7px; line-height:1.1; }
}

html[data-ui-short="true"] .build-card {
  overflow:hidden;
  padding:2px 3px;
  grid-template-rows:minmax(27px,1fr) 9px 8px;
}
html[data-ui-short="true"] .build-card .build-icon { height:27px; }
html[data-ui-short="true"] .build-card b { font-size:7px; line-height:.92; max-height:14px; overflow:hidden; }
html[data-ui-short="true"] .build-card small { min-height:0; max-height:8px; font-size:6px; line-height:1; white-space:nowrap; overflow:hidden; }
html[data-ui-short="true"] .audio-panel { width:210px; max-height:calc(100vh - 82px); overflow:auto; padding:9px; gap:6px; }
html[data-ui-layout="compact"] .build-card { overflow:hidden; padding:2px 3px; grid-template-rows:minmax(29px,1fr) 11px 9px; }
html[data-ui-layout="compact"] .build-card .build-icon { height:29px; }
html[data-ui-layout="compact"] .build-card b { max-height:16px; overflow:hidden; line-height:.94; }
html[data-ui-layout="compact"] .build-card small { min-height:0; max-height:9px; overflow:hidden; line-height:1; }
html[data-ui-short="true"] #leftPanel { max-height:calc(100vh - 80px); overflow:hidden; }
html[data-ui-short="true"] .tribe-scrap { padding:7px 8px 8px; }
html[data-ui-short="true"] .tribe-scrap h2,html[data-ui-short="true"] .age-scrap h2 { margin-bottom:4px; font-size:11px; }
html[data-ui-short="true"] .stat-sketch { min-height:22px; gap:3px; font-size:8px; }
html[data-ui-short="true"] .stat-sketch .stat-icon { width:18px; height:18px; }
html[data-ui-short="true"] .stat-sketch b { font-size:10px; }
html[data-ui-short="true"] .stability-face { margin-top:2px; }
html[data-ui-short="true"] .alignment-mark { margin-top:3px; padding-top:3px; font-size:8px; }
html[data-ui-short="true"] .age-scrap { margin-left:7px; padding:7px 7px 8px; max-height:310px; overflow-y:auto; }
html[data-ui-short="true"] .age-path { margin:2px 0 4px; }
html[data-ui-short="true"] .age-rune i { width:12px; height:12px; border-width:2px; }
html[data-ui-short="true"] .age-caption { font-size:8px; }
html[data-ui-short="true"] .project-scratch { height:10px; margin:3px 2px; border-width:2px; }
html[data-ui-short="true"] .advance-button { min-height:34px; margin-top:3px; font-size:9px; }
html[data-ui-short="true"] .small-copy { margin-top:4px; font-size:7px; line-height:1.2; }
html[data-ui-short="true"] #ageRequirements { max-height:76px; }

/* Drop 031: the ninth age completes the path; detach the work ledger
   through common 900p desktop heights so the left cave wall remains bounded. */
@media (min-height:681px) and (max-height:940px) {
  #constructionLedger {
    position:fixed;
    left:calc(var(--left-panel-width) + (var(--safe-edge) * 2));
    bottom:calc(var(--bottom-tray-height) + (var(--safe-edge) * 2));
    width:min(310px,calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 64px));
    max-height:120px;
    z-index:8;
  }
  #constructionJobs { grid-template-columns:1fr 1fr; }
  .construction-ledger-pager { grid-column:1 / -1; }
}

/* Drop 029: soundtrack and cover mural */
.cave-mural::before{content:"";position:absolute;inset:0;background-color:rgba(45,39,30,.5);background-image:url('assets/branding/rise-of-stick-kind-cover.png');background-position:center;background-size:cover;opacity:.42;filter:saturate(.78) contrast(1.05);mix-blend-mode:multiply;pointer-events:none}
.now-scratching{display:grid;gap:2px;padding:7px 8px;border:2px dashed rgba(48,41,35,.5);background:rgba(255,247,220,.24);transform:rotate(.25deg)}
.now-scratching small{font-size:9px;letter-spacing:1.3px;opacity:.68}.now-scratching strong{font-size:12px;line-height:1.15}.now-scratching span{font-size:10px;opacity:.78}.soundtrack-next{font-size:10px;padding:6px 8px}
@media (max-height:680px),(max-width:900px){.cave-mural::before{opacity:.25;background-position:center top}.now-scratching{padding:5px 6px}.audio-panel{max-height:calc(100vh - 76px);overflow:auto}}
.audio-panel.audio-panel-portal{position:fixed;z-index:80;transform:rotate(-.4deg)}

/* Drop 031: nine age-runes still leave every ledger reachable at 720p. */
@media (min-height:681px) and (max-height:740px) {
  #leftPanel { top:78px; max-height:calc(100vh - 82px); }
  .tribe-scrap { padding:9px 10px 10px; }
  .age-scrap { max-height:300px; overflow-y:auto; padding:8px 8px 9px; }
  .age-path { margin-block:3px 6px; }
}

.crown-objective{margin-top:8px;padding:8px 10px;border:2px dashed rgba(49,41,31,.55);background:rgba(255,244,194,.72);transform:rotate(-.15deg)}
.crown-objective[hidden]{display:none}.objective-title{display:block;letter-spacing:.08em;margin-bottom:5px}.objective-row{margin:5px 0}.objective-row>span{display:flex;justify-content:space-between;gap:8px}.objective-row i{font-style:normal;font-size:.72rem}.objective-row small{display:block;margin-top:2px}.objective-scratch{height:8px;border:2px solid #342d24;background:rgba(255,255,255,.45);overflow:hidden}.objective-scratch>i{display:block;height:100%;width:var(--objective);background:repeating-linear-gradient(90deg,#8b6b28 0 8px,#c69d3d 8px 13px);transition:width .2s}.objective-row.paused .objective-scratch>i{filter:grayscale(.75)}.objective-row.complete .objective-scratch>i{background:#d9b64f}

/* Drop 032 — persistent cave profiles */
.profile-mini-card{margin:10px auto 14px;max-width:660px;border:3px solid #302923;border-radius:10px;background:rgba(246,226,167,.9);box-shadow:4px 5px 0 rgba(48,41,35,.32);transform:rotate(-.3deg)}
.profile-mini-card[data-border="village"]{border-style:dashed}.profile-mini-card[data-border="iron"]{box-shadow:inset 0 0 0 3px #777,4px 5px 0 rgba(48,41,35,.32)}.profile-mini-card[data-border="crown"]{outline:3px double #a77b20}.profile-mini-card[data-border="five"]{border-width:5px}.profile-mini-card[data-border="mastery5"]{outline:4px solid rgba(71,51,36,.45)}
.profile-mini-open{width:100%;display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center;text-align:left;border:0;background:transparent;padding:8px 12px;color:#302923;cursor:pointer;font:inherit}
.profile-mini-emblem,.profile-big-emblem{display:grid;place-items:center;border:3px solid currentColor;border-radius:50%;font-weight:900;background:#e8c969}.profile-mini-emblem{width:42px;height:42px;font-size:23px}.profile-mini-open span:nth-child(2){display:flex;flex-direction:column}.profile-mini-open small{font-size:11px}.profile-mini-rank{text-align:right;display:flex;flex-direction:column}
.profile-overlay{z-index:46;background:rgba(20,16,13,.78);overflow:auto;padding:24px}.profile-panel{box-sizing:border-box;width:min(940px,96vw);max-height:92vh;overflow:auto;margin:auto;padding:20px;background:#ead9a6;color:#302923}.profile-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.profile-panel-head h1{margin:.15rem 0}.profile-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px;border-bottom:3px solid #302923;padding-bottom:8px}.profile-tabs .active{transform:translateY(3px);background:#302923;color:#f3dfa1}.profile-page{min-height:420px}.profile-portrait-card{display:flex;gap:18px;align-items:center;padding:14px;border:4px double #302923;background:rgba(255,248,213,.55)}.profile-big-emblem{width:74px;height:74px;font-size:38px}.profile-portrait-card h2,.profile-portrait-card p{margin:3px 0}.profile-name-edit{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;gap:10px;align-items:center;margin:15px 0;font-weight:900}.profile-name-edit input,.profile-recovery input{font:inherit;padding:9px;border:3px solid #302923;background:#fff7d7;color:#302923}.profile-mastery{display:grid;gap:7px;margin:12px 0}.profile-mastery>span{height:20px;border:3px solid #302923;background:#aa9c78;overflow:hidden}.profile-mastery i{display:block;height:100%;background:#d59635;width:0;transition:width .25s}.profile-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:9px}.profile-stats-grid div{display:flex;flex-direction:column;padding:10px;border:2px dashed #302923;background:rgba(255,248,213,.48);font-size:11px}.profile-stats-grid b{font-size:18px;margin-top:3px}.profile-recovery{margin-top:18px;padding:13px;border-top:3px solid #302923}.profile-recovery h2,.profile-recovery p{margin:4px 0 8px}.profile-recovery input{width:100%;box-sizing:border-box}.profile-recovery>div{display:flex;gap:8px;margin-top:8px}.profile-status{min-height:1.2em;font-weight:800}.profile-status.error{color:#8f261f}.profile-unlock-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:10px}.profile-unlock{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:10px;border:3px solid #302923;background:rgba(255,248,213,.55)}.profile-unlock>span{font-size:24px;text-align:center}.profile-unlock div{display:flex;flex-direction:column}.profile-unlock.locked{filter:grayscale(1);opacity:.55}.profile-unlock.equipped{outline:4px double #9d6d1a}.profile-history{display:grid;gap:9px}.profile-history-row{display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:10px;padding:10px;border-left:8px solid #6e6250;background:rgba(255,248,213,.58)}.profile-history-row.win{border-color:#487b38}.profile-history-row.loss{border-color:#94372f}.profile-history-row.draw{border-color:#8a7935}.profile-history-row small{text-align:right}.profile-rewards{margin:14px 0;padding:13px;border:4px double #302923;background:rgba(245,210,99,.35)}.profile-rewards h2,.profile-rewards p{margin:4px}.reward-unlock{display:block;width:100%;margin:6px 0}
.lobby-player b .profile-tag{font-size:.7em}.lobby-profile-line{display:flex;align-items:center;gap:7px;font-size:11px}.lobby-profile-emblem{display:inline-grid;place-items:center;width:24px;height:24px;border:2px solid currentColor;border-radius:50%}
@media (max-width:720px){.profile-overlay{padding:8px}.profile-stats-grid{grid-template-columns:repeat(2,1fr)}.profile-unlock-grid{grid-template-columns:1fr}.profile-history-row{grid-template-columns:1fr}.profile-history-row small{text-align:left}.profile-name-edit{grid-template-columns:1fr}.profile-mini-open{grid-template-columns:44px 1fr}.profile-mini-rank{grid-column:2;text-align:left;flex-direction:row;gap:8px}}

/* Drop 032: the title Cave Card stays visible without pushing match controls below common 768p screens. */
@media (min-height:681px) and (max-height:940px) {
  .title-card { width:min(960px,96vw); padding:4px 14px 7px; }
  .title-scratch { padding:2px 8px; font-size:9px; border-width:3px; }
  .title-card h1 { font-size:clamp(34px,5vw,48px); line-height:.86; margin:2px 0 3px; letter-spacing:-3px; }
  .title-card>p { margin:2px auto 4px; font-size:9px; line-height:1.1; }
  .profile-mini-card { margin:2px auto 4px; max-width:620px; }
  .profile-mini-open { grid-template-columns:34px 1fr auto; gap:6px; padding:3px 8px; }
  .profile-mini-emblem { width:27px; height:27px; font-size:15px; border-width:2px; }
  .profile-mini-open b { font-size:10px; line-height:1.05; }
  .profile-mini-open small { font-size:8px; line-height:1.05; }
  .mural-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 7px; }
  .mural-control { min-width:0; padding:3px 7px; font-size:8px; }
  .mural-control input,.mural-control select { margin-top:1px; padding:3px; border-bottom-width:3px; }
  .start-mode-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:3px; }
  .start-mode-buttons .fire-button,.start-mode-buttons .random-rival-button { grid-column:auto; }
  .huge,.network-button { min-height:37px!important; margin-top:0; padding:4px 7px; font-size:9px!important; line-height:1.05; }
  .drawn-fire { width:17px; height:21px; border-width:3px; }
  .controls-note { margin-top:2px; font-size:7px; line-height:1.05; }
}

/* Drop 033 — ranked ledger */
.ranked-rival-button{background-color:#d2b75d;background-image:var(--grain);border-color:#4b3815;color:#241b0d;box-shadow:4px 5px 0 #3c2d16;}
.matchmaking-overlay.ranked .matchmaking-card{border-color:#b89437;box-shadow:0 0 0 4px rgba(184,148,55,.25),10px 12px 0 rgba(0,0,0,.28);}
.matchmaking-overlay.ranked .title-scratch{color:#7f601d}.matchmaking-overlay.ranked .queue-fire i{background:#d5b24e;}
.ranked-profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.ranked-profile-head h2{font-size:clamp(26px,3vw,42px);margin:4px 0}.ranked-profile-head p{margin:0;font-weight:800;color:#6e5520}
.ranked-history-row{display:grid;grid-template-columns:140px 110px 1fr;gap:12px;align-items:center;padding:11px 12px;border-bottom:2px dashed rgba(48,41,35,.28)}.ranked-history-row.win b{color:#426428}.ranked-history-row.loss b{color:#8f2f28}.ranked-history-row.draw b{color:#5e536d}
.leaderboard-overlay{z-index:45}.leaderboard-panel{width:min(900px,92vw);max-height:86vh;overflow:hidden;display:flex;flex-direction:column;padding:22px}.leaderboard-panel header{display:flex;align-items:flex-start;justify-content:space-between}.leaderboard-panel h1{margin:.1em 0}.leaderboard-labels,.leaderboard-row{display:grid;grid-template-columns:70px minmax(220px,1fr) 130px 100px 100px;gap:12px;align-items:center}.leaderboard-labels{padding:10px 12px;border-bottom:3px solid #302923;font-size:12px}.leaderboard-entries{overflow:auto;min-height:160px}.leaderboard-row{padding:12px;border-bottom:2px dashed rgba(48,41,35,.3)}.leaderboard-row>span:nth-child(2){display:flex;flex-direction:column}.leaderboard-row strong{font-size:18px}.leaderboard-row small{opacity:.75}.ranked-rewards{border-color:#b89437;background:rgba(239,226,167,.65)}
@media(max-width:760px){.leaderboard-labels,.leaderboard-row{grid-template-columns:45px minmax(130px,1fr) 90px 70px}.leaderboard-labels>*:last-child,.leaderboard-row>*:last-child{display:none}.ranked-history-row{grid-template-columns:1fr 90px}.ranked-history-row small{grid-column:1/-1}.ranked-profile-head{flex-direction:column}}
@media(max-height:720px){.start-mode-buttons{gap:6px}.start-mode-buttons .huge{min-height:42px;padding:7px 12px;font-size:14px}.profile-mini-card{margin:4px auto}.mural-controls{gap:5px}.title-card>p{margin:4px 0}}

/* Drop 034 — dynamic Grand Melee seating */
.grand-melee-button{border-color:#d0aa43;background-color:#765061;background-image:var(--grain);color:#f5e8b0;}
.lobby-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.lobby-player{border-color:var(--seat-color,#a46b55);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--seat-color,#a46b55) 34%,transparent);}
.seat-controls{margin-top:7px}.seat-controls .sketch-button{font-size:10px;padding:5px 8px;}
@media(max-width:760px){.lobby-players{grid-template-columns:1fr;}}
@media(max-height:760px){.mural-controls{grid-template-columns:repeat(4,minmax(0,1fr));}.start-mode-buttons{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* Drop 034: nine title controls and seven modes remain fully reachable at 600p. */
@media (min-width:900px) and (max-height:650px) {
  .title-card { width:min(1180px,97vw); padding:2px 8px 4px; overflow:hidden; }
  .title-scratch { padding:1px 7px; border-width:2px; font-size:7px; }
  .title-card h1 { font-size:30px; line-height:.78; letter-spacing:-2px; margin:1px 0 2px; }
  .title-card>p { display:none; }
  .profile-mini-card { margin:1px auto 3px; max-width:560px; border-width:2px; }
  .profile-mini-open { grid-template-columns:28px 1fr auto; gap:5px; padding:2px 7px; }
  .profile-mini-emblem { width:23px; height:23px; border-width:2px; font-size:12px; }
  .profile-mini-open b { font-size:8px; line-height:1; }
  .profile-mini-open small,.profile-mini-rank { font-size:7px; line-height:1; }
  .mural-controls { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px 5px; }
  .mural-control { min-width:0; padding:2px 5px; border-width:2px; font-size:7px; line-height:1; }
  .mural-control input,.mural-control select { margin-top:1px; padding:1px 2px; border-bottom-width:2px; font-size:8px; line-height:1; }
  .player-name-control { padding-bottom:12px; }
  .tiny-name-button { bottom:1px; right:5px; font-size:6px; }
  .start-mode-buttons { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px 5px; margin-top:3px; }
  .start-mode-buttons .fire-button,.start-mode-buttons .random-rival-button { grid-column:auto; }
  .start-mode-buttons .huge,.start-mode-buttons .network-button { min-height:30px!important; margin-top:0; padding:2px 5px; font-size:8px!important; line-height:1; }
  .drawn-fire { width:13px; height:17px; border-width:2px; }
  .controls-note { display:none; }
}

/* Drop 034: eliminated players retain a clearly read-only battlefield view. */
.defeated-notice{position:absolute;z-index:18;top:76px;left:50%;translate:-50% 0;max-width:min(620px,72vw);padding:7px 14px;border:3px solid var(--ink);background:#8f3e35;color:#fff1c7;box-shadow:4px 5px 0 rgba(20,16,13,.38);font-weight:900;font-size:11px;text-align:center;letter-spacing:.04em;pointer-events:none}
body.defeated-view #rightPanel,body.defeated-view #bottomDock{filter:grayscale(.75);opacity:.72}
body.defeated-view #gameCanvas{cursor:default}
/* Drop 035 crowded lobby scaling */
.lobby-card{width:min(1120px,94vw);max-height:92vh;overflow:auto}
.lobby-players[data-seat-count="5"],.lobby-players[data-seat-count="6"],.lobby-players[data-seat-count="7"],.lobby-players[data-seat-count="8"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lobby-players[data-seat-count="5"] .lobby-player,.lobby-players[data-seat-count="6"] .lobby-player,.lobby-players[data-seat-count="7"] .lobby-player,.lobby-players[data-seat-count="8"] .lobby-player{min-height:82px;padding:8px}
.lobby-players[data-seat-count="5"] .lobby-player>b,.lobby-players[data-seat-count="6"] .lobby-player>b,.lobby-players[data-seat-count="7"] .lobby-player>b,.lobby-players[data-seat-count="8"] .lobby-player>b{font-size:14px}
@media(max-width:900px){.lobby-players[data-seat-count]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1700px){.lobby-players[data-seat-count="8"]{grid-template-columns:repeat(8,minmax(0,1fr))}}

/* Drop 037 — The Cave Wall Has Doors */
.menu-page[hidden],#playModePicker[hidden],#playModeSetup[hidden],#multiplayerLanding[hidden],#quickPlayPicker[hidden],#privateModePicker[hidden],#privateHostSetup[hidden],#privateJoinSetup[hidden],[data-play-setup][hidden],[data-play-action][hidden],[data-private-only][hidden]{display:none!important}
.menu-book{width:min(980px,94vw);max-height:calc(100vh - 24px);padding:16px 22px 18px;overflow:auto;scrollbar-color:#d0a84c #4d4739;scrollbar-width:thin}
.menu-page{position:relative;text-shadow:none;color:var(--chalk)}
.main-menu-page{text-align:center}
.main-menu-page>.title-scratch{margin-top:2px}
.main-menu-page>h1{margin:10px 0 13px}
.main-menu-page>p{margin-bottom:17px}
.main-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:790px;margin:0 auto}
.main-menu-choice{min-height:112px;width:100%;display:grid;grid-template-columns:94px 1fr;align-items:center;gap:14px;padding:14px 18px;text-align:left;color:var(--ink);background-color:#e8ddb5;background-image:var(--grain);border-width:5px}
.main-menu-choice>span:last-child{display:flex;flex-direction:column;gap:4px}
.main-menu-choice b{font-size:24px;line-height:.95;letter-spacing:-.5px}
.main-menu-choice small{font-size:10px;line-height:1.25;font-weight:800}
.menu-play-choice{clip-path:polygon(2% 4%,98% 0,100% 88%,87% 100%,4% 96%,0 40%);background-color:#d6b85e;transform:rotate(-.35deg)}
.menu-multiplayer-choice{clip-path:polygon(4% 0,100% 5%,97% 96%,72% 100%,0 91%,2% 18%);background-color:#9aafad;transform:rotate(.25deg)}
.menu-settings-choice{clip-path:polygon(0 8%,95% 0,100% 18%,96% 100%,8% 95%,2% 72%);background-color:#cbbd96;transform:rotate(-.2deg)}
.main-menu-profile{max-width:none;margin:0;border-width:5px;border-radius:0;background:#d7c783;background-image:var(--grain);clip-path:polygon(2% 1%,98% 5%,100% 88%,80% 100%,4% 94%,0 24%);transform:rotate(.45deg)}
.main-menu-profile .main-menu-choice{min-height:102px;border:0;box-shadow:none;background:transparent;clip-path:none;transform:none;grid-template-columns:68px 1fr auto;padding:12px 16px}
.main-menu-profile .main-menu-choice::after{display:none}
.main-menu-profile .profile-mini-emblem{width:54px;height:54px;font-size:27px}
.main-menu-profile .profile-mini-rank{align-items:flex-end;white-space:nowrap}
.menu-choice-art{position:relative;width:82px;height:72px;display:block;justify-self:center}
.fire-scratch{width:62px;height:70px;border:7px solid var(--ink);background:#a5483c;clip-path:polygon(48% 0,64% 32%,83% 17%,100% 68%,75% 100%,25% 96%,0 61%,27% 39%)}
.fire-scratch i{position:absolute;bottom:7px;width:8px;height:25px;background:#d0a84c;border:3px solid var(--ink)}
.fire-scratch i:first-child{left:17px;transform:rotate(13deg)}.fire-scratch i:last-child{right:16px;transform:rotate(-10deg)}
.bridge-scratch{border-bottom:8px solid var(--ink);transform:rotate(-2deg)}
.bridge-scratch::before,.bridge-scratch::after{content:"";position:absolute;bottom:0;width:9px;height:64px;background:var(--ink)}.bridge-scratch::before{left:9px;transform:rotate(7deg)}.bridge-scratch::after{right:8px;transform:rotate(-7deg)}
.bridge-scratch i{position:absolute;left:17px;right:17px;height:7px;background:var(--ink);transform-origin:left center}.bridge-scratch i:nth-child(1){top:18px;transform:rotate(16deg)}.bridge-scratch i:nth-child(2){top:36px;transform:rotate(-13deg)}.bridge-scratch i:nth-child(3){top:52px;transform:rotate(8deg)}
.tool-scratch i{position:absolute;left:37px;top:3px;width:10px;height:67px;background:var(--ink);border-radius:7px}.tool-scratch i:first-child{transform:rotate(43deg)}.tool-scratch i:last-child{transform:rotate(-43deg)}.tool-scratch::before{content:"";position:absolute;left:24px;top:0;width:35px;height:18px;border:7px solid var(--ink);border-bottom:0;transform:rotate(43deg)}
.menu-page-head{display:grid;grid-template-columns:105px 1fr 105px;align-items:start;gap:12px;margin-bottom:18px}
.menu-page-head>div{grid-column:2;text-align:center}.menu-page-head h2,.setup-heading h2{margin:5px 0 0;font-size:clamp(32px,5vw,58px);line-height:.9;color:var(--gold);text-shadow:3px 3px 0 var(--ink)}
.menu-page-head .title-scratch{border-color:var(--chalk)}
.menu-back,.setup-back{min-height:42px;padding:7px 10px;font-weight:900;background:#d5c79d;color:var(--ink)}
.mode-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:820px;margin:0 auto}
.mode-choice{min-height:128px;padding:18px 20px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;color:var(--ink);border-width:5px;background-color:#e5d8ad;background-image:var(--grain)}
.mode-choice b{font-size:21px;line-height:1}.mode-choice small{margin-top:8px;font-size:10px;font-weight:800;line-height:1.3}
.practice-choice{background-color:#caa85e;clip-path:polygon(0 5%,96% 0,100% 86%,78% 100%,4% 94%)}
.solo-choice{background-color:#c9b785;clip-path:polygon(4% 0,100% 7%,96% 100%,13% 94%,0 72%)}
.grand-choice{background-color:#765061;color:var(--chalk);clip-path:polygon(2% 0,96% 4%,100% 90%,87% 100%,0 94%)}
.team-choice{background-color:#6f8b8a;clip-path:polygon(5% 3%,100% 0,95% 95%,67% 100%,0 90%)}
.two-choice-grid{max-width:680px}
.host-choice{background-color:#c7a75f}.join-choice{background-color:#91aaa7}
.menu-setup{max-width:900px;margin:0 auto}
.setup-heading{display:grid;grid-template-columns:150px 1fr;gap:15px;align-items:start;margin-bottom:13px}.setup-heading>div{text-align:left}.setup-heading h2{font-size:clamp(26px,4vw,44px);margin-top:0}.setup-heading p{max-width:none;margin:5px 0;font-size:11px;color:var(--chalk)}
.menu-control-mount{display:grid;gap:8px}.menu-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-shadow:none}.identity-control-set{grid-template-columns:minmax(250px,420px);justify-content:center}.team-control-set{grid-template-columns:repeat(2,minmax(0,1fr));max-width:590px;margin:0 auto}.mode-only-controls{margin-top:8px}.private-room-controls{margin-top:8px}.join-code-grid{grid-template-columns:minmax(270px,430px);justify-content:center}
.menu-book .mural-control{min-width:0;padding:7px 10px;background-color:#eadfb8;color:var(--ink);border-width:4px}.menu-book .mural-control input,.menu-book .mural-control select{padding:6px;margin-top:4px}.menu-book .player-name-control{padding-bottom:24px}.menu-book .tiny-name-button{bottom:3px}
.guided-note{grid-column:1/-1;max-width:620px;margin:8px auto 0;padding:18px 22px;color:var(--ink);text-align:left;transform:rotate(-.2deg)}.guided-note b{font-size:18px}.guided-note p{max-width:none;margin:8px 0 0;font-size:11px}
.menu-action-row{display:flex;justify-content:center;margin-top:12px}.menu-action-row .huge{width:min(520px,100%);margin:0;min-height:58px}.menu-action-row .grand-melee-button{color:var(--chalk)}
.multiplayer-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:900px;margin:12px auto 0}.multiplayer-choice-grid .huge{min-height:136px;margin:0;padding:15px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left}.multiplayer-choice-grid b{font-size:20px}.multiplayer-choice-grid small{margin-top:8px;font-size:10px;line-height:1.3}.random-rival-button{background-color:#9ab1ad;background-image:var(--grain)}.ranked-rival-button{background-color:#d2b75d;background-image:var(--grain)}.private-rival-button,.network-button{background-color:#c7a75f;background-image:var(--grain)}
.private-mode-picker{max-width:820px;margin:0 auto}
.menu-status{display:none;max-width:720px;margin:12px auto 0;padding:8px 12px;border:4px solid #2c2420;background:#a5483c;color:#fff1c7;font-size:11px;font-weight:900;text-align:center;text-shadow:none;transform:rotate(-.3deg)}.menu-status.visible{display:block}
.settings-columns{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;text-align:left;color:var(--ink)}.settings-scrap{padding:15px 17px;transform:rotate(-.2deg)}.settings-scrap:nth-child(2){transform:rotate(.35deg)}.settings-scrap:nth-child(3){transform:rotate(-.1deg)}.settings-scrap h3{margin:0 0 10px;font-size:20px}.settings-scrap label{display:grid;grid-template-columns:82px 1fr;gap:8px;align-items:center;margin:8px 0;font-size:10px;font-weight:900}.settings-scrap .check-setting{grid-template-columns:22px 1fr}.settings-scrap input[type=range]{width:100%;accent-color:#6b2d22}.settings-scrap small{display:block;line-height:1.25}.display-settings{align-self:start}.display-settings .settings-select{grid-template-columns:70px 1fr}.display-settings select{width:100%;padding:7px;background:#f1e8c8;border:3px solid var(--ink)}.display-settings p{max-width:none;margin:8px 0;font-size:10px}.controls-settings{grid-column:1/-1}.control-scribbles{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:0}.control-scribbles div{padding:8px;border-left:5px solid var(--ink);background:rgba(255,248,213,.42)}.control-scribbles dt{font-size:10px;font-weight:900}.control-scribbles dd{margin:4px 0 0;font-size:9px;line-height:1.25}
#menuControlBank[hidden]{display:none!important}

@media (max-width:760px){
  .menu-book{width:96vw;padding:12px;max-height:96vh}.main-menu-grid,.mode-choice-grid,.multiplayer-choice-grid{grid-template-columns:1fr}.main-menu-choice{min-height:82px;grid-template-columns:70px 1fr}.main-menu-profile .main-menu-choice{grid-template-columns:50px 1fr}.main-menu-profile .profile-mini-rank{grid-column:2;align-items:flex-start}.menu-choice-art{scale:.75}.menu-page-head{grid-template-columns:80px 1fr}.menu-page-head>div{grid-column:2}.menu-control-grid,.team-control-set{grid-template-columns:1fr}.settings-columns{grid-template-columns:1fr}.controls-settings{grid-column:auto}.control-scribbles{grid-template-columns:1fr 1fr}.setup-heading{grid-template-columns:120px 1fr}
}
@media (min-width:900px) and (max-height:680px){
  .menu-book{width:min(1060px,96vw);max-height:calc(100vh - 10px);padding:7px 15px}.main-menu-page>.title-scratch{font-size:7px;border-width:2px}.main-menu-page>h1{font-size:38px!important;line-height:.82!important;margin:3px 0 5px!important}.main-menu-page>p{font-size:9px;margin-bottom:7px}.main-menu-grid{gap:8px;max-width:830px}.main-menu-choice{min-height:82px;padding:8px 12px;grid-template-columns:64px 1fr;gap:9px;border-width:4px}.main-menu-choice b{font-size:18px}.main-menu-choice small{font-size:8px}.menu-choice-art{scale:.7}.main-menu-profile .main-menu-choice{min-height:74px;grid-template-columns:48px 1fr auto;padding:7px 12px}.main-menu-profile .profile-mini-emblem{width:38px;height:38px;font-size:18px}.menu-page-head{margin-bottom:8px}.menu-page-head h2{font-size:34px}.mode-choice{min-height:88px;padding:10px 14px}.mode-choice b{font-size:16px}.mode-choice small{font-size:8px;margin-top:5px}.setup-heading{margin-bottom:7px}.setup-heading h2{font-size:27px}.setup-heading p{font-size:8px}.menu-control-grid{gap:5px}.menu-book .mural-control{padding:3px 7px;font-size:7px;border-width:3px}.menu-book .mural-control input,.menu-book .mural-control select{padding:2px;margin-top:1px;border-bottom-width:3px;font-size:8px}.menu-book .player-name-control{padding-bottom:14px}.multiplayer-choice-grid{gap:8px;margin-top:7px}.multiplayer-choice-grid .huge{min-height:84px;padding:9px}.multiplayer-choice-grid b{font-size:15px}.multiplayer-choice-grid small{font-size:8px}.settings-columns{gap:7px}.settings-scrap{padding:8px 11px}.settings-scrap h3{font-size:15px;margin-bottom:5px}.settings-scrap label{margin:4px 0}.controls-settings{padding-top:6px}.control-scribbles div{padding:5px}.menu-status{margin-top:5px;padding:4px 8px}
}

/* Drop 037: the cave mural is a fixed screen, never a scrollable web page. */
.overlay.mural-overlay { overflow: hidden; }


/* Drop 038 — public playlist scraps */
.quick-play-picker{max-width:980px;margin:0 auto}.playlist-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px auto 0}.playlist-choice{min-height:172px;padding:13px 15px;display:grid;grid-template-rows:82px auto;align-items:center;text-align:left;background-image:var(--grain);border-width:4px}.playlist-choice>[data-playlist-icon]{display:grid;place-items:center;height:78px}.playlist-choice .playlist-icon{width:88px;height:76px;filter:drop-shadow(1px 2px 0 rgba(48,41,35,.18))}.playlist-choice>span:last-child{display:flex;flex-direction:column;gap:7px}.playlist-choice b{font-size:19px;line-height:1}.playlist-choice small{font-size:10px;line-height:1.35}.playlist-duel-choice{background-color:#9ab1ad;clip-path:polygon(2% 5%,96% 0,100% 92%,72% 98%,4% 94%,0 29%);transform:rotate(-.25deg)}.playlist-grand-choice{background-color:#c49b52;clip-path:polygon(5% 0,100% 6%,97% 95%,43% 100%,0 91%,2% 18%);transform:rotate(.2deg)}.playlist-team-choice{background-color:#9d8580;clip-path:polygon(0 8%,94% 2%,100% 34%,96% 96%,24% 100%,3% 91%);transform:rotate(-.15deg)}.playlist-choice.selected{outline:4px dashed rgba(48,41,35,.7);outline-offset:-9px}.quick-play-note{max-width:820px;margin:12px auto 0;padding:8px 14px;background:#eadfb8;border:3px solid #302923;color:#302923;transform:rotate(-.15deg);font-size:11px;line-height:1.35;text-shadow:none}
@media(max-width:900px){.playlist-choice-grid{grid-template-columns:1fr;max-width:650px}.playlist-choice{min-height:106px;grid-template-columns:88px 1fr;grid-template-rows:1fr}.quick-play-picker{max-width:720px}}
@media(max-height:700px) and (min-width:901px){.playlist-choice{min-height:136px;grid-template-rows:58px auto;padding:8px 12px}.playlist-choice>[data-playlist-icon]{height:56px}.playlist-choice .playlist-icon{width:66px;height:56px}.playlist-choice b{font-size:16px}.playlist-choice small{font-size:9px}.quick-play-note{margin-top:7px;padding:5px 10px}}

/* Drop 040 — compact practice instructions and an obvious way back to the mural. */
.menu-button{background:#d6b85e!important;color:#2f2922!important;border-style:double!important;min-width:58px}

.coach-checklist-backdrop{position:fixed;inset:0;z-index:43;background:rgba(25,21,18,.72)}
.coach-checklist-backdrop[hidden]{display:none!important}
.coach-panel,
html[data-ui-density="large"] .coach-panel{
  display:none;
  position:fixed;
  left:50%;
  top:calc(var(--safe-edge) + 68px);
  width:min(390px,calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 48px));
  max-height:none;
  overflow:visible;
  z-index:19;
  padding:10px 12px 11px;
  transform:translateX(-50%) rotate(-.25deg);
  background:#efe4b7;
  color:#2d291f;
  box-shadow:5px 6px 0 rgba(35,31,24,.45)
}
.coach-panel.visible{display:block}
.coach-panel>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.coach-panel>header small{display:block;font-size:8px;font-weight:900;letter-spacing:.15em;color:#795c2b}
.coach-panel>header h2,
html[data-ui-density="large"] .coach-panel>header h2{font-size:16px;line-height:1.05;margin:2px 0 0;white-space:normal}
.coach-panel>header>b{font-size:14px;padding:4px 6px;border:2px solid #302923;background:#d6b04d;transform:rotate(.8deg)}
.coach-panel>.coach-hint,
html[data-ui-density="large"] .coach-panel>.coach-hint{margin:7px 0 8px;padding:0;font-size:11px;line-height:1.25;background:transparent;border:0}
.coach-compact-actions{display:grid;grid-template-columns:1fr .7fr;gap:7px}
.coach-compact-actions .sketch-button{min-height:34px;padding:5px 8px;font-size:10px}
.coach-checklist{display:none}
.coach-panel.expanded,
html[data-ui-density="large"] .coach-panel.expanded{
  display:block;
  left:50%;
  top:50%;
  width:min(720px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  overflow:auto;
  z-index:44;
  padding:18px 20px;
  transform:translate(-50%,-50%) rotate(-.12deg)
}
.coach-panel.expanded>header,.coach-panel.expanded>.coach-hint,.coach-panel.expanded>.coach-compact-actions{display:none}
.coach-panel.expanded .coach-checklist{display:block}
.coach-checklist-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;border-bottom:3px solid #302923;padding-bottom:10px}
.coach-checklist-head small{font-size:9px;font-weight:900;letter-spacing:.12em;color:#795c2b}
.coach-checklist-head h2{font-size:28px!important;line-height:.95;margin:4px 0}
.coach-checklist .coach-truth{font-size:12px!important;margin:10px 0}
.coach-checklist ol{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:0;list-style:none;margin:10px 0 14px}
.coach-checklist li,
html[data-ui-density="large"] .coach-checklist li{font-size:12px;padding:7px 8px;border-left:5px solid #7b6d50;background:rgba(255,248,213,.45);opacity:.72;text-decoration:none}
.coach-checklist li.current{font-weight:900;opacity:1;background:#d6b04d;border-left-color:#9a3e32}
.coach-checklist li.done{opacity:.55;text-decoration:line-through;border-left-color:#416345}
.coach-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:static}
.coach-actions .sketch-button,
html[data-ui-density="large"] .coach-actions .sketch-button{min-height:42px;font-size:11px}
.resume-coach,
html[data-ui-density="large"] .resume-coach{position:fixed;left:50%;top:calc(var(--safe-edge) + 68px);z-index:19;transform:translateX(-50%) rotate(-.3deg);background:#d6b04d;font-size:10px;min-height:36px;padding:6px 10px}

.in-game-menu-overlay{z-index:50;background-color:rgba(24,20,17,.83);background-image:var(--grain)}
.in-game-menu-card{box-sizing:border-box;width:min(650px,94vw);max-height:calc(100vh - 24px);overflow:auto;padding:20px 24px;text-align:center;background:#ead9a6;color:#302923;clip-path:polygon(1% 2%,98% 0,100% 88%,91% 100%,5% 97%,0 35%);box-shadow:8px 10px 0 rgba(20,16,13,.48)}
.in-game-menu-card h1{font-size:clamp(38px,6vw,62px);line-height:.9;margin:8px 0 10px;color:#9b3e35;text-shadow:2px 2px 0 #d6b85e}
.in-game-menu-card>section>p{font-size:12px;font-weight:800;margin:8px auto 14px;max-width:520px}
.in-game-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:560px;margin:0 auto}
.in-game-menu-actions .huge{grid-column:1/-1}
.in-game-menu-actions .sketch-button{min-height:48px;font-size:12px}
.in-game-menu-actions .main-mural-button{grid-column:1/-1}
.main-mural-button{background:#d6b85e!important;color:#302923!important;border-style:double!important}
.in-game-subhead{display:grid;grid-template-columns:90px 1fr 90px;gap:8px;align-items:start}
.in-game-subhead>div{grid-column:2}
.in-game-subhead h1{font-size:44px;margin:6px 0 12px}
.in-game-settings-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:10px;text-align:left}
.in-game-settings-grid .settings-scrap{margin:0;min-height:0;padding:13px;background:rgba(255,248,213,.52)}
.in-game-settings-grid .settings-scrap h3{margin:0 0 9px}
.in-game-settings-grid label{display:grid;grid-template-columns:80px 1fr;gap:8px;align-items:center;margin:7px 0;font-weight:900;font-size:10px}
.in-game-settings-grid label.check-setting{grid-template-columns:auto 1fr}
.in-game-settings-grid small,.in-game-settings-grid p{display:block;font-size:9px;line-height:1.35}
.in-game-confirm-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;max-width:520px;margin:18px auto 0}
.in-game-confirm-actions .sketch-button{min-height:52px}
.end-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:9px!important}
.end-actions .main-mural-button{grid-column:1/-1}

@media(max-width:1000px){
  .coach-panel,html[data-ui-density="large"] .coach-panel{width:min(360px,calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 24px))}
  .in-game-settings-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .coach-panel,html[data-ui-density="large"] .coach-panel{left:50%;width:min(340px,calc(100vw - 24px))}
  .coach-checklist ol{grid-template-columns:1fr}
  .in-game-menu-actions,.in-game-confirm-actions{grid-template-columns:1fr}
  .in-game-menu-actions .huge,.in-game-menu-actions .main-mural-button,.end-actions .main-mural-button{grid-column:auto}
  .end-actions{grid-template-columns:1fr}
}
@media(max-height:720px){
  .coach-panel,html[data-ui-density="large"] .coach-panel,.resume-coach,html[data-ui-density="large"] .resume-coach{top:54px}
  .coach-panel>.coach-hint{font-size:10px;margin:5px 0 6px}
  .coach-compact-actions .sketch-button{min-height:30px}
  .in-game-menu-card{padding:13px 18px}
  .in-game-menu-card h1{font-size:38px;margin:5px 0 7px}
  .in-game-menu-actions{gap:6px}
  .in-game-menu-actions .sketch-button{min-height:40px}
}
.end-card{overflow:auto}
@media(min-width:761px){.end-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.end-actions .main-mural-button{grid-column:auto}}
@media(max-height:720px){.end-card{max-height:calc(100vh - 16px);padding:10px 16px}.end-card h1{font-size:36px;margin:0 0 4px}.end-card>p{margin:4px 0}.history-tallies{margin:7px 0!important}.end-actions .huge{min-height:38px!important;font-size:10px!important;padding:6px!important}}
/* Keep the compact instruction strip below the full top ledger at every certified desktop height. */
.coach-panel,html[data-ui-density="large"] .coach-panel,.resume-coach,html[data-ui-density="large"] .resume-coach{top:132px}
@media(max-height:720px){.coach-panel,html[data-ui-density="large"] .coach-panel,.resume-coach,html[data-ui-density="large"] .resume-coach{top:126px}}
html[data-ui-density="large"] .coach-panel.visible{display:block}

/* Drop 042 — See Your Tribe: selected-unit clarity, progressive HUD collapse,
   and landscape touch controls without removing the full desktop interface. */
#gameCanvas{touch-action:none}
.panel-collapse-button{position:absolute;z-index:6;display:grid;place-items:center;width:28px;height:28px;min-width:28px;padding:0;border-width:2px;background:#d6b85e;font-size:17px;line-height:1}
#leftPanel>.panel-collapse-button{top:0;right:-8px}
#rightPanel>.panel-collapse-button{top:5px;left:5px}
#buildBar>.build-collapse-button{top:-13px;right:72px}
.hud-collapsed{display:none!important}
.hud-restore{position:fixed;z-index:24;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:68px;min-height:42px;padding:5px 8px;background:#d6b85e;color:#302923;border-width:3px;box-shadow:3px 4px 0 rgba(31,25,20,.38)}
.hud-restore[hidden]{display:none!important}.hud-restore b{font-size:11px;line-height:1}.hud-restore span{font-size:8px;line-height:1.1;white-space:nowrap}
.hud-restore-left{left:var(--safe-edge);top:132px;align-items:flex-start;transform:rotate(-.4deg)}
.hud-restore-right{right:var(--safe-edge);top:132px;transform:rotate(.4deg)}
.hud-restore-build{left:50%;bottom:var(--safe-edge);transform:translateX(-50%) rotate(-.3deg);min-width:112px}
.selection-summary{position:fixed;z-index:18;left:50%;bottom:calc(var(--bottom-tray-height) + (var(--safe-edge) * 2));transform:translateX(-50%) rotate(-.15deg);box-sizing:border-box;width:min(520px,calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 64px));min-height:48px;padding:6px 9px;display:grid;grid-template-columns:minmax(145px,1fr) auto;align-items:center;gap:8px;background:rgba(239,228,183,.95);box-shadow:3px 4px 0 rgba(31,25,20,.32);pointer-events:auto}
html[data-build-panel-collapsed="true"] .selection-summary{bottom:calc(var(--safe-edge) + 48px)}
.selection-summary-main{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;align-items:baseline;min-width:0}.selection-summary-main small{grid-column:1/-1;font-size:7px;letter-spacing:.14em;color:#795c2b;font-weight:900}.selection-summary-main b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selection-summary-main span{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selection-summary-groups{display:flex;gap:4px;max-width:250px;overflow:hidden}.selection-chip{display:flex;align-items:center;gap:4px;min-width:0;min-height:32px;padding:3px 6px;border:2px solid #302923;background:#d9c888;color:#302923;font:inherit;cursor:pointer}.selection-chip b{max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.selection-chip span{font-size:9px;font-weight:900}.selection-chip:hover{background:#f0d96f}.selection-summary[data-empty="true"] .selection-summary-groups{display:none}.selection-summary[data-empty="true"]{opacity:.78}
.rotate-device-notice{display:none;position:fixed;inset:0;z-index:120;align-items:center;justify-content:center;padding:20px;background:#2d2830;background-image:var(--grain);color:#302923}.rotate-device-notice>div{width:min(330px,90vw);padding:24px;text-align:center;background:#ead9a6}.rotate-device-notice b{display:block;font-size:24px;color:#9b3e35}.rotate-device-notice span{display:block;margin-top:10px;font-size:12px;line-height:1.4}

html[data-left-panel-collapsed="true"] #messageFeed{left:var(--safe-edge)}
html[data-right-panel-collapsed="true"] .selection-summary{width:min(620px,calc(100vw - (var(--safe-edge) * 2) - 150px))}
html[data-left-panel-collapsed="true"][data-right-panel-collapsed="true"] .selection-summary{width:min(650px,calc(100vw - (var(--safe-edge) * 2) - 170px))}

@media(max-width:1150px){
  .selection-summary{width:min(430px,calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 34px));grid-template-columns:minmax(120px,1fr) auto}
  .selection-summary-groups{max-width:175px}.selection-chip b{max-width:56px}
}

@media(pointer:coarse) and (orientation:landscape) and (max-width:1100px){
  :root{--safe-edge:6px}
  button,.sketch-button,.selection-chip{min-height:42px}
  .panel-collapse-button{width:42px;height:42px;min-width:42px;font-size:22px}
  #leftPanel:not(.hud-collapsed){position:fixed;z-index:34;left:6px;top:72px;bottom:6px;width:min(282px,38vw);max-height:none;overflow:auto;padding-right:7px;background:rgba(43,36,30,.3)}
  #rightPanel:not(.hud-collapsed){position:fixed;z-index:35;right:6px;top:72px;bottom:6px;width:min(292px,39vw);max-height:none;overflow:auto;padding:12px 10px 14px 18px}
  #buildBar:not(.hud-collapsed){position:fixed;z-index:36;left:6px;right:6px;bottom:6px;max-height:46vh;min-height:132px;overflow:auto;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"categories soil cancel" "cards soil cancel";padding:10px}
  #buildBar:not(.hud-collapsed) .build-page{overflow-x:auto;padding-bottom:5px}
  #buildBar>.build-collapse-button{top:3px;right:4px}
  .hud-restore{min-width:86px;min-height:48px;padding:5px 9px}.hud-restore span{font-size:9px}
  .hud-restore-left{top:118px}.hud-restore-right{top:118px}.hud-restore-build{bottom:6px;min-width:128px}
  #minimapWrap{width:152px!important;height:108px!important;right:6px!important;bottom:6px!important}
  #minimap{width:138px!important;height:90px!important}
  html[data-right-panel-collapsed="false"] #minimapWrap{display:none}
  .selection-summary{left:50%;bottom:10px;width:min(480px,calc(100vw - 210px));min-height:54px;padding:6px 9px;grid-template-columns:minmax(150px,1fr) auto;z-index:26}
  html[data-build-panel-collapsed="true"] .selection-summary{bottom:62px}
  html[data-build-panel-collapsed="false"] .selection-summary{bottom:calc(46vh + 12px)}
  .selection-summary-main b{font-size:14px}.selection-summary-main span{font-size:10px}.selection-chip{min-height:40px}
  .selection-summary-groups{max-width:210px}
  #messageFeed{left:6px!important;bottom:122px!important;width:min(310px,38vw)!important}
  html[data-left-panel-collapsed="false"] #messageFeed{display:none}
  html[data-ui-layout="compact"] #topbar{grid-template-columns:132px minmax(0,1fr);top:4px}
  html[data-ui-layout="compact"] .brand-block{min-width:0}.brand-block h1{font-size:10px!important}.brand-block #ageLabel{font-size:8px}
  html[data-ui-layout="compact"] .resource-mark{width:clamp(45px,6vw,58px);min-height:42px;grid-template-columns:20px 1fr;grid-template-rows:21px 12px;padding:2px}.resource-mark .resource-icon{width:20px!important;height:20px!important}.resource-mark b{font-size:11px!important}.resource-mark small{font-size:6px!important}
  html[data-ui-layout="compact"] .options-scrap{top:48px;max-width:calc(100vw - 12px)}
  .top-actions .ui-size-control,.top-actions #saveButton,.top-actions #loadButton{display:none}
  .coach-panel,html[data-ui-density="large"] .coach-panel{top:104px;width:min(350px,48vw)}
}

@media(pointer:coarse) and (orientation:portrait) and (max-width:900px){
  .rotate-device-notice{display:flex}
}
#buildBar>.build-collapse-button{top:3px;right:3px}
html[data-touch-hud="true"] .hud-restore{touch-action:manipulation}


/* Drop 043 — Steady the Cave Wall: tutorial cues stay local and motion preferences are respected. */
@media (prefers-reduced-motion: reduce) {
  .resource-mark.changed,
  .age-rune.current i,
  .feed-message,
  .feed-message.age,
  #buildBar.attention,
  .build-card.pending,
  .command-card.pending,
  .queue-fire::before,
  .coach-target {
    animation: none !important;
  }
  .objective-scratch > i,
  .profile-mastery i {
    transition: none !important;
  }
}

/* Drop 044 — Let Me See the Fight: critical data stays; duplicate paperwork gets out of the battlefield. */
.selection-summary[hidden]{display:none!important}
html[data-right-panel-collapsed="false"] .selection-summary{width:min(290px,calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 56px));grid-template-columns:1fr;min-height:40px;padding:5px 8px}
html[data-right-panel-collapsed="false"] .selection-summary-main{grid-template-columns:1fr auto}
html[data-right-panel-collapsed="false"] .selection-summary-main small{display:none}
html[data-right-panel-collapsed="false"] .selection-summary-main span{font-size:8px;text-align:right}
html[data-right-panel-collapsed="false"] .selection-summary-groups{display:none}
.hud-restore{max-width:220px;text-align:left}
.hud-restore b,.hud-restore span{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-restore-right{align-items:flex-end;text-align:right}
.hud-restore-build{max-width:min(320px,calc(100vw - 24px))}

/* The practice prompt is a ribbon by default. The complete checklist remains one tap away. */
.coach-panel.visible:not(.expanded),html[data-ui-density="large"] .coach-panel.visible:not(.expanded){
  width:min(570px,calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 38px));
  min-height:46px;padding:6px 8px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head actions" "hint actions";gap:1px 8px;align-items:center
}
.coach-panel.visible:not(.expanded)>header{grid-area:head;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.coach-panel.visible:not(.expanded)>header small{display:none}
.coach-panel.visible:not(.expanded)>header h2{font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.coach-panel.visible:not(.expanded)>header>b{font-size:10px;padding:2px 5px}
.coach-panel.visible:not(.expanded)>.coach-hint{grid-area:hint;margin:0!important;font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coach-panel.visible:not(.expanded)>.coach-compact-actions{grid-area:actions;display:flex;gap:4px}
.coach-panel.visible:not(.expanded)>.coach-compact-actions .sketch-button{min-height:31px;padding:4px 6px;font-size:8px}

/* As resource families become relevant they join the ribbon; early ages no longer reserve four empty metal cards. */
#resources[data-resource-count="5"] .resource-mark{width:clamp(78px,8.4vw,118px)}

@media(max-height:680px){
  #leftPanel:not(.hud-collapsed){max-height:calc(100vh - 178px);overflow:auto;padding-right:4px}
  .tribe-scrap,.age-scrap{padding-top:9px;padding-bottom:9px}
  .stat-sketch{min-height:25px}
  .coach-panel.visible:not(.expanded),html[data-ui-density="large"] .coach-panel.visible:not(.expanded){top:74px}
}

@media(pointer:coarse) and (orientation:landscape) and (max-width:1100px){
  .coach-panel.visible:not(.expanded),html[data-ui-density="large"] .coach-panel.visible:not(.expanded){left:50%;top:70px;width:min(460px,calc(100vw - 210px));grid-template-columns:minmax(0,1fr) auto}
  .coach-panel.visible:not(.expanded)>.coach-hint{display:none}
  #resources{flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;max-height:48px}
  html[data-ui-layout="compact"] #resources .resource-mark{flex:0 0 clamp(45px,6vw,58px)}
  #leftPanel:not(.hud-collapsed),#rightPanel:not(.hud-collapsed),#buildBar:not(.hud-collapsed){box-shadow:0 0 0 100vmax rgba(20,17,14,.12)}
  html[data-right-panel-collapsed="false"] .selection-summary{display:none!important}
}
@media(pointer:coarse) and (orientation:landscape) and (max-width:1100px){
  #messageFeed{width:min(220px,27vw)!important;max-height:62px!important;overflow:hidden!important;bottom:116px!important}
  #messageFeed .feed-message{padding:4px 6px!important;font-size:8px!important;line-height:1.15!important}
  .selection-summary{width:min(410px,calc(100vw - 224px));min-height:48px}
}

/* Drop 045 — Put Your Thumbs on the Cave Wall: complete landscape-touch command flow. */
.selection-summary{grid-template-columns:minmax(145px,1fr) auto 34px}
.selection-clear{align-self:stretch;width:34px;min-width:34px;min-height:34px;padding:0;border:2px solid #302923;background:#c96853;color:#fff3d0;font:900 22px/1 system-ui;cursor:pointer;clip-path:polygon(8% 0,100% 7%,94% 100%,0 91%)}
.selection-clear:hover,.selection-clear:focus-visible{background:#9f4035;outline:2px dashed #f0d96f;outline-offset:2px}
html[data-right-panel-collapsed="false"] .selection-summary{grid-template-columns:minmax(0,1fr) 32px}
html[data-right-panel-collapsed="false"] .selection-clear{width:32px;min-width:32px;min-height:32px;font-size:19px}
#minimap{touch-action:none}
html[data-hud-profile="short"] .hud-restore{min-height:42px}

@media(pointer:coarse) and (orientation:landscape) and (max-width:1100px){
  #resources{
    display:grid!important;
    grid-template-columns:repeat(var(--resource-count,5),minmax(0,1fr));
    gap:2px!important;
    width:100%;
    max-width:none!important;
    max-height:48px;
    overflow:visible!important;
    justify-content:stretch!important;
  }
  html[data-ui-layout="compact"] #resources .resource-mark{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:42px;
    grid-template-columns:18px minmax(0,1fr);
    grid-template-rows:21px 11px;
    padding:2px;
  }
  #resources .resource-mark .resource-icon{width:18px!important;height:18px!important}
  #resources .resource-mark b{min-width:0;font-size:10px!important;overflow:hidden;text-overflow:ellipsis}
  #resources .resource-mark small{min-width:0;font-size:5.5px!important;letter-spacing:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .selection-summary{grid-template-columns:minmax(130px,1fr) auto 42px}
  .selection-clear{width:42px;min-width:42px;min-height:42px;font-size:24px;touch-action:manipulation}
}

@media(pointer:coarse) and (orientation:landscape) and (max-width:1100px){
  .hud-restore-right{right:calc((100vw - 100dvw) + 8px);transform:none}
  .hud-restore-build{left:50dvw;bottom:calc((100vh - 100dvh) + 8px);transform:translateX(-50%)}
  .hud-restore-left{left:8px;transform:none}
  .selection-summary{left:50dvw;transform:translateX(-50%)}
}

@media(pointer:coarse) and (orientation:landscape) and (max-width:1100px){
  .hud-restore-right{right:calc(100vw - var(--visual-viewport-width,100vw) + 8px)}
  .hud-restore-build{left:calc(var(--visual-viewport-width,100vw) / 2);bottom:calc(100vh - var(--visual-viewport-height,100vh) + 8px)}
  .selection-summary{left:calc(var(--visual-viewport-width,100vw) / 2)}
}

html[data-touch-hud="true"] body,
html[data-touch-hud="true"] #app{
  width:var(--visual-viewport-width,100vw);
  height:var(--visual-viewport-height,100vh);
  max-width:var(--visual-viewport-width,100vw);
  max-height:var(--visual-viewport-height,100vh);
}
html[data-touch-hud="true"] #gameCanvas{
  width:var(--visual-viewport-width,100vw);
  height:var(--visual-viewport-height,100vh);
}
html[data-touch-hud="true"] #app{position:fixed;left:0;top:0;right:auto;bottom:auto;overflow:hidden}
html[data-touch-hud="true"] #gameCanvas{left:0;top:0;right:auto;bottom:auto}

/* Drop 046 — The HUD Stays in the Match: lifecycle-gated match controls. */
html:not([data-game-hud-surface="active"]) .hud-restore,
html:not([data-game-hud-surface="active"]) .panel-collapse-button {
  display: none !important;
  pointer-events: none !important;
}

html[data-game-hud-surface="blocked"][data-touch-hud="true"] #leftPanel,
html[data-game-hud-surface="blocked"][data-touch-hud="true"] #rightPanel,
html[data-game-hud-surface="blocked"][data-touch-hud="true"] #buildBar,
html[data-game-hud-surface="blocked"][data-hud-profile="touch"] #leftPanel,
html[data-game-hud-surface="blocked"][data-hud-profile="touch"] #rightPanel,
html[data-game-hud-surface="blocked"][data-hud-profile="touch"] #buildBar {
  display: none !important;
  pointer-events: none !important;
}

html[data-game-hud-surface="hidden"] #topbar,
html[data-game-hud-surface="hidden"] #defeatedNotice,
html[data-game-hud-surface="hidden"] #leftPanel,
html[data-game-hud-surface="hidden"] #rightPanel,
html[data-game-hud-surface="hidden"] #buildBar,
html[data-game-hud-surface="hidden"] #messageFeed,
html[data-game-hud-surface="hidden"] #selectionSummary,
html[data-game-hud-surface="hidden"] #coachPanel,
html[data-game-hud-surface="hidden"] #resumeCoachButton,
html[data-game-hud-surface="hidden"] #placementReason,
html[data-game-hud-surface="hidden"] #minimapWrap,
html[data-game-hud-surface="hidden"] #audioPanel {
  display: none !important;
  pointer-events: none !important;
}

/* Restore-card text must not steal press/release targets while live values refresh. */
.hud-restore > * { pointer-events: none; }

/* Drop 047 — Follow the Charcoal Arrow: state-aware, static onboarding pointer. */
.tutorial-pointer-overlay {
  position: fixed;
  inset: 0;
  z-index: 52;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
.tutorial-pointer-overlay[hidden] { display: none !important; }
.tutorial-pointer-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tutorial-pointer-line,
.tutorial-pointer-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tutorial-pointer-shadow { stroke: rgba(239,228,183,.92); stroke-width: 8; }
.tutorial-pointer-line { stroke: #a92720; stroke-width: 4; stroke-dasharray: 11 5 4 6; }
#tutorialArrowHead path { fill: #a92720; stroke: #efe4b7; stroke-width: .7; }
.tutorial-pointer-label {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 112px;
  padding: 4px 7px 3px;
  border: 3px solid #302923;
  background: #d6b04d;
  color: #302923;
  box-shadow: 3px 3px 0 rgba(31,25,20,.42);
  font-size: 9px;
  line-height: 1.05;
  letter-spacing: .035em;
  text-align: center;
  white-space: normal;
}
.coach-target {
  outline-color: #a92720 !important;
  outline-style: dashed !important;
  box-shadow: 0 0 0 3px rgba(214,176,77,.34) !important;
}
@media (max-width: 960px), (max-height: 520px) {
  .tutorial-pointer-label { max-width: 92px; padding: 3px 5px; border-width: 2px; font-size: 8px; }
  .tutorial-pointer-shadow { stroke-width: 6; }
  .tutorial-pointer-line { stroke-width: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-pointer-overlay, .tutorial-pointer-overlay * { animation: none !important; transition: none !important; }
}
html[data-game-hud-surface="hidden"] .tutorial-pointer-overlay { display: none !important; }

/* Drop 048 — One Cave, One Song, Less Paper. */
/* The ordinary log is one compact line. The full scratch history only opens on request. */
#messageFeed.event-ticker {
  position: fixed;
  left: calc(var(--left-panel-width) + (var(--safe-edge) * 2));
  bottom: calc(var(--bottom-tray-height) + (var(--safe-edge) * 2));
  z-index: 19;
  width: min(430px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 96px));
  min-height: 31px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 4px;
  pointer-events: none;
  overflow: visible;
}
.event-ticker-line {
  min-width: 0;
  min-height: 31px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 8px;
  color: var(--chalk);
  background: rgba(49, 42, 37, .94);
  border-left: 5px solid var(--gold);
  clip-path: polygon(0 7%, 100% 0, 98% 91%, 4% 100%);
}
.event-ticker-line[hidden] { display: none !important; }
.event-ticker-line[data-event-type="warning"] { border-left-color: var(--red); }
.event-ticker-line b { font-size: 8px; letter-spacing: .08em; white-space: nowrap; color: #f0d96f; }
.event-ticker-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.event-log-button {
  pointer-events: auto;
  min-width: 55px;
  min-height: 31px;
  padding: 3px 7px;
  font-size: 8px;
  background: rgba(234, 223, 184, .94);
}
.event-log-button span { display: inline-block; min-width: 13px; margin-left: 2px; border-bottom: 2px solid var(--ink); }
.event-log-history {
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  width: min(430px, calc(100vw - 24px));
  max-height: min(350px, calc(100vh - var(--bottom-tray-height) - 110px));
  overflow: auto;
  padding: 9px;
  pointer-events: auto;
  background: rgba(239, 228, 183, .98);
  color: var(--ink);
  box-shadow: 5px 6px 0 rgba(35,31,24,.42);
}
.event-log-history[hidden] { display: none !important; }
.event-log-history header { display: flex; justify-content: space-between; align-items: start; gap: 8px; padding-bottom: 6px; border-bottom: 2px dashed rgba(48,41,35,.55); }
.event-log-history header small { display: block; font-size: 7px; letter-spacing: .15em; }
.event-log-history header h2 { margin: 1px 0 0; font-size: 14px; }
.event-log-rows { display: grid; gap: 4px; margin-top: 6px; }
.event-log-row { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 6px; padding: 4px 5px; border-left: 4px solid var(--gold); background: rgba(255,255,255,.18); }
.event-log-row.warning { border-left-color: var(--red); }
.event-log-row b { font-size: 7px; letter-spacing: .08em; }
.event-log-row span { font-size: 8px; line-height: 1.2; overflow-wrap: anywhere; }
.event-log-empty { padding: 12px 4px; text-align: center; font-size: 8px; opacity: .65; }
html[data-left-panel-collapsed="true"] #messageFeed.event-ticker { left: var(--safe-edge); }

/* The work queue stays attached to the tribe wall and owns its own compact state. */
#constructionLedger {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-height: none !important;
  z-index: auto !important;
  box-sizing: border-box;
}
.construction-ledger-head { gap: 4px; }
.construction-ledger-toggle {
  min-width: 0;
  flex: 1;
  min-height: 25px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 15px;
  align-items: center;
  gap: 4px;
  padding: 2px 3px;
  border: 0;
  border-bottom: 2px dashed rgba(48,41,35,.7);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.construction-ledger-toggle span { font-size: 11px; font-weight: 900; }
.construction-ledger-toggle b { min-width: 16px; text-align: center; font-size: 9px; background: var(--gold); border: 2px solid var(--ink); }
.construction-ledger-toggle i { font: 900 14px/1 sans-serif; text-align: center; }
.construction-ledger-toggle:hover,
.construction-ledger-toggle:focus-visible { background: rgba(208,168,76,.2); outline: 2px dashed var(--ink); outline-offset: 1px; }
.construction-ledger-summary { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px; align-items: center; min-height: 26px; padding: 4px 3px 1px; }
.construction-ledger-summary[hidden] { display: none !important; }
.construction-ledger-summary b { font-size: 9px; white-space: nowrap; }
.construction-ledger-summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }
.construction-ledger.compact { max-height: 72px !important; padding: 5px 6px; }
.construction-ledger.compact #constructionLedgerPage { opacity: .48; }
.construction-ledger.expanded { max-height: 246px !important; }
#constructionLedgerDetails[hidden] { display: none !important; }
#constructionLedger #constructionJobs { grid-template-columns: 1fr; }

@media (max-height: 940px) {
  #leftPanel:not(.hud-collapsed) { max-height: calc(100vh - 84px); overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
  #constructionLedger { margin-bottom: 4px; }
}
@media (max-height: 680px) {
  #messageFeed.event-ticker { bottom: calc(var(--safe-edge) + 52px); width: min(390px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 70px)); }
  .event-ticker-line span { font-size: 8px; }
  .construction-ledger.expanded { max-height: 150px !important; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  #messageFeed.event-ticker {
    left: 6px !important;
    bottom: 64px !important;
    width: min(330px, calc(100vw - 220px)) !important;
    max-height: none !important;
    display: grid;
  }
  html[data-left-panel-collapsed="false"] #messageFeed.event-ticker { display: none; }
  .event-ticker-line span { font-size: 8px; }
  .event-log-history { width: min(390px, calc(100vw - 12px)); max-height: calc(100vh - 82px); }
  .construction-ledger.expanded { max-height: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .event-ticker-line { animation: none !important; }
}

/* Drop 049 — Keep the Buttons on the Paper.
   The bottom HUD uses measured geometry instead of an estimated tray height,
   and the torn-paper silhouette is decoration rather than a clipping mask. */
:root {
  --build-tray-rendered-height: var(--bottom-tray-height);
  --bottom-hud-clearance: calc(var(--bottom-tray-height) + (var(--safe-edge) * 2));
  --selection-summary-rendered-height: 0px;
  --event-ticker-rendered-height: 0px;
  --bottom-hud-placement-stack: 0px;
}

#buildBar {
  box-sizing: border-box;
  isolation: isolate;
  overflow: visible;
  clip-path: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: max(12px, calc(var(--safe-edge) + 4px));
  padding-right: max(12px, calc(var(--safe-edge) + 4px));
}
#buildBar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(234, 223, 184, .95);
  background-image: var(--grain);
  border: 4px solid var(--ink);
  clip-path: polygon(1% 7%, 12% 0, 29% 4%, 47% 0, 65% 4%, 82% 1%, 99% 8%, 97% 95%, 5% 100%);
  box-shadow: 5px 6px 0 rgba(25,20,17,.3);
}
#buildBar > :not(.build-collapse-button) { position: relative; z-index: 1; }
#buildBar > .build-collapse-button { z-index: 3; }
#buildBar .build-page { overflow: hidden; }

#messageFeed.event-ticker,
.selection-summary {
  bottom: var(--bottom-hud-clearance);
}
.placement-reason {
  bottom: calc(var(--bottom-hud-clearance) + var(--bottom-hud-placement-stack));
}
.event-log-history {
  max-height: min(350px, calc(100vh - var(--bottom-hud-clearance) - 72px));
}
html[data-bottom-hud-stacked="true"] #messageFeed.event-ticker {
  bottom: calc(var(--bottom-hud-clearance) + var(--selection-summary-rendered-height) + var(--safe-edge));
}

@media (max-height: 680px) {
  #messageFeed.event-ticker {
    bottom: var(--bottom-hud-clearance);
  }
  html[data-bottom-hud-stacked="true"] #messageFeed.event-ticker {
    bottom: calc(var(--bottom-hud-clearance) + var(--selection-summary-rendered-height) + var(--safe-edge));
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  #buildBar:not(.hud-collapsed) {
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: 14px;
    padding-right: 14px;
  }
  #messageFeed.event-ticker {
    bottom: var(--bottom-hud-clearance) !important;
  }
  html[data-bottom-hud-stacked="true"] #messageFeed.event-ticker {
    bottom: calc(var(--bottom-hud-clearance) + var(--selection-summary-rendered-height) + var(--safe-edge)) !important;
  }
  .selection-summary,
  html[data-build-panel-collapsed="true"] .selection-summary,
  html[data-build-panel-collapsed="false"] .selection-summary {
    bottom: var(--bottom-hud-clearance) !important;
  }
}

/* Keep the collapse handle out of the Soil Eyes / Cancel action column. */
#buildBar > .build-collapse-button {
  top: -16px;
  right: 10px;
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  #buildBar:not(.hud-collapsed) { max-height: 40vh; }
  #buildBar > .build-collapse-button { top: -18px; right: 8px; }
}

/* The build collapse handle owns a real grid cell; it never floats over cards,
   action buttons, or the Current Circle strip. */
#buildBar {
  grid-template-columns: auto minmax(0, 1fr) 30px auto auto;
  grid-template-areas:
    "label categories collapse soil cancel"
    "label cards cards soil cancel";
}
#buildBar > .build-collapse-button {
  position: relative;
  grid-area: collapse;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  align-self: start;
  justify-self: center;
}
html[data-ui-layout="compact"] #buildBar {
  grid-template-columns: minmax(0, 1fr) 30px auto auto;
  grid-template-areas:
    "categories collapse soil cancel"
    "cards cards soil cancel";
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  #buildBar:not(.hud-collapsed) {
    grid-template-columns: minmax(0, 1fr) 42px auto auto;
    grid-template-areas:
      "categories collapse soil cancel"
      "cards cards soil cancel";
  }
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  #buildBar:not(.hud-collapsed) {
    left: 50%;
    right: auto;
    width: min(820px, calc(100vw - 96px));
    transform: translateX(-50%);
  }
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  #buildBar:not(.hud-collapsed) {
    left: 50% !important;
    right: auto !important;
    width: min(820px, calc(100vw - 96px)) !important;
    transform: translateX(-50%) !important;
  }
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  html[data-bottom-build-open="true"] #minimapWrap,
  html[data-bottom-build-open="true"] #messageFeed.event-ticker {
    display: none !important;
  }
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  html[data-bottom-build-open="true"] .selection-summary {
    width: min(280px, calc(100vw - 24px));
    min-height: 42px;
    padding: 4px 7px;
    grid-template-columns: minmax(0, 1fr) 32px;
  }
  html[data-bottom-build-open="true"] .selection-summary-groups,
  html[data-bottom-build-open="true"] .selection-summary-main small {
    display: none;
  }
  html[data-bottom-build-open="true"] .selection-summary-main {
    grid-template-columns: 1fr;
  }
  html[data-bottom-build-open="true"] .selection-summary-main b { font-size: 12px; }
  html[data-bottom-build-open="true"] .selection-summary-main span { font-size: 8px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  #buildBar:not(.hud-collapsed) {
    max-width: calc(100vw - var(--left-panel-width) - var(--minimap-width) - (var(--safe-edge) * 5) - 44px) !important;
  }
}

/* Drop 052/053: after-practice player journey bridge */
.journey-bridge-card {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(220px, auto);
  gap: 12px;
  align-items: center;
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-style: dashed;
  background: rgba(255, 245, 205, 0.94);
  color: var(--ink);
  text-shadow: none;
}
.journey-bridge-card[hidden] { display: none !important; }
.journey-bridge-card > div:first-child { min-width: 0; }
.journey-bridge-card small,
.coach-completion-bridge small {
  display: block;
  letter-spacing: .09em;
  opacity: .78;
  font-weight: 900;
}
.journey-bridge-card h2 {
  margin: 0 0 4px;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
}
.journey-bridge-card p {
  margin: 0;
  max-width: 62ch;
}
.journey-bridge-card h2,
.journey-bridge-card p,
.journey-bridge-card small,
.journey-bridge-card [data-journey-title],
.journey-bridge-card [data-journey-copy],
.journey-bridge-card [data-journey-eyebrow] {
  color: var(--ink);
  text-shadow: none;
}
.journey-bridge-actions,
.coach-completion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.journey-bridge-actions .sketch-button,
.coach-completion-actions .sketch-button {
  min-height: 38px;
  white-space: nowrap;
}
.journey-bridge-actions .sketch-button {
  color: var(--ink);
  text-shadow: none;
}
.coach-completion-bridge {
  margin: 8px 0;
  padding: 10px;
  border: 2px dashed rgba(48, 41, 35, .62);
  border-radius: 14px;
  background: rgba(255, 244, 196, .93);
}
.coach-completion-bridge[hidden] { display: none !important; }
.coach-completion-bridge h3 {
  margin: 0 0 4px;
  font-size: .96rem;
}
.coach-completion-bridge p {
  margin: 0 0 8px;
  font-size: .86rem;
  line-height: 1.25;
}
.history-tallies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.history-tallies-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 2px dashed rgba(48, 41, 35, .38);
  border-radius: 12px;
  background: rgba(255, 248, 220, .58);
}
.local-next-scribble {
  margin-top: 12px;
}
.local-next-scribble h2 {
  margin: 0 0 6px;
}
.local-next-scribble p {
  margin: 0;
}
@media (max-width: 760px) {
  .journey-bridge-card {
    grid-template-columns: 1fr;
  }
  .journey-bridge-actions,
  .coach-completion-actions {
    justify-content: stretch;
  }
  .journey-bridge-actions .sketch-button,
  .coach-completion-actions .sketch-button {
    flex: 1 1 160px;
  }
}
@media (max-width: 980px) and (max-height: 520px) {
  .journey-bridge-card {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 8px 0 10px;
    padding: 10px 12px;
  }
  .journey-bridge-card h2 { font-size: clamp(.92rem, 2.7vw, 1.08rem); }
  .journey-bridge-card p { font-size: .86rem; line-height: 1.22; }
  .journey-bridge-actions {
    justify-content: stretch;
    gap: 6px;
  }
  .journey-bridge-actions .sketch-button {
    flex: 1 1 135px;
    min-height: 34px;
    padding: 7px 8px;
    font-size: .74rem;
  }
}

/* Drop 054: first real match brief on Solo setup */
.first-real-match-brief {
  display: grid;
  grid-template-columns: minmax(22rem, 1fr) minmax(210px, auto);
  gap: 12px;
  align-items: center;
  max-width: 920px;
  margin: 8px auto 10px;
  padding: 12px 14px;
  background: rgba(255, 244, 200, .94);
  color: var(--ink);
  text-shadow: none;
  border-style: dashed;
  transform: rotate(-.12deg);
}
.first-real-match-brief[hidden] { display: none !important; }
.first-real-match-brief small {
  display: block;
  letter-spacing: .11em;
  font-weight: 900;
  opacity: .78;
  color: var(--ink);
  text-shadow: none;
}
.first-real-match-brief h3 {
  margin: 2px 0 4px;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--ink);
  text-shadow: none;
}
.first-real-match-brief p,
.first-real-match-brief b,
.first-real-match-brief span {
  color: var(--ink);
  text-shadow: none;
}
.first-real-match-brief p { margin: 0 0 6px; line-height: 1.25; }
.first-real-match-brief p:last-child { margin-bottom: 0; }
.first-real-match-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0 7px;
  padding: 0;
  list-style: none;
}
.first-real-match-route {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border: 2px dashed rgba(48, 41, 35, .42);
  border-radius: 12px;
  background: rgba(255, 250, 220, .68);
  color: var(--ink);
  text-shadow: none;
}
.first-real-match-route::before,
.first-real-match-route::marker,
.first-real-match-routes::before,
.first-real-match-routes::marker {
  content: none !important;
}
.first-real-match-route b {
  display: block;
  font-size: .86em;
  letter-spacing: .035em;
}
.first-real-match-route span {
  display: block;
  font-size: .84em;
  line-height: 1.18;
}
.first-real-match-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.first-real-match-actions .sketch-button {
  min-height: 38px;
  color: var(--ink);
  text-shadow: none;
  white-space: nowrap;
}
.first-real-match-actions [data-solo-launch-label],
#startButton [data-solo-legacy-label] {
  display: inline-block;
  color: var(--ink);
  text-shadow: none;
  min-width: 0;
}
.first-real-match-actions .fire-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 860px), (max-height: 600px) {
  .first-real-match-brief {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 6px auto 8px;
    padding: 9px 11px;
  }
  .first-real-match-actions { justify-content: stretch; gap: 6px; }
  .first-real-match-actions .sketch-button { flex: 1 1 170px; min-height: 34px; padding: 7px 8px; }
  .first-real-match-brief h3 { font-size: clamp(.94rem, 2.8vw, 1.08rem); }
  .first-real-match-brief p { font-size: .84rem; line-height: 1.2; }
  .first-real-match-routes { gap: 5px; }
  .first-real-match-route { padding: 5px 7px; }
  .first-real-match-route span { font-size: .78em; }
}
@media (max-width: 980px) and (max-height: 520px) {
  .first-real-match-brief {
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
    gap: 7px;
    margin: 4px auto 5px;
    padding: 7px 9px;
  }
  .first-real-match-brief small { font-size: .56rem; }
  .first-real-match-brief h3 { margin-bottom: 2px; font-size: .92rem; }
  .first-real-match-brief p { font-size: .72rem; line-height: 1.12; }
  .first-real-match-routes { grid-template-columns: 1fr; gap: 3px; margin: 3px 0 4px; }
  .first-real-match-route { grid-template-columns: minmax(72px, auto) 1fr; align-items: baseline; gap: 5px; padding: 3px 5px; border-width: 1px; }
  .first-real-match-route b { font-size: .68rem; }
  .first-real-match-route span { font-size: .66rem; line-height: 1.08; }
  .first-real-match-actions { flex-direction: column; align-content: stretch; }
  .first-real-match-actions .sketch-button { width: 100%; min-height: 30px; padding: 5px 6px; font-size: .66rem; }
}
@media (max-width: 980px) and (max-height: 520px) {
  .first-real-match-actions .sketch-button { flex: 0 0 auto; }
}

/* Drop 060: first Solo retry funnel. */
.first-solo-retry-card {
  margin: 7px 0 6px;
  padding: 7px 9px;
  border: 2px dashed rgba(165, 72, 60, .58);
  border-radius: 13px;
  background: rgba(255, 250, 220, .78);
  color: var(--ink);
  text-shadow: none;
}
.first-solo-retry-card[hidden] { display: none !important; }
.first-solo-retry-card small {
  margin-bottom: 3px;
  color: var(--ink);
  opacity: .96;
}
.first-solo-retry-card p {
  margin: 0 0 4px;
  color: var(--ink);
  text-shadow: none;
}
.first-solo-retry-card p:last-child { margin-bottom: 0; }
.first-real-match-brief[data-first-solo-retry-active="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(165, 72, 60, .14);
}
@media (max-width: 980px) and (max-height: 520px) {
  .first-solo-retry-card { margin: 4px 0; padding: 4px 6px; border-radius: 9px; }
  .first-solo-retry-card small { font-size: .52rem; }
  .first-solo-retry-card p { font-size: .66rem; line-height: 1.08; margin-bottom: 2px; }
}


/* Drop 057: readable first real Solo in-match opening plan. */
.first-solo-opening-plan {
  position: fixed;
  z-index: 17;
  top: calc(var(--safe-edge) + 82px);
  left: 50%;
  transform: translateX(-50%) rotate(-.22deg);
  width: min(460px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 64px));
  max-height: calc(100vh - var(--bottom-tray-height) - 122px);
  overflow: auto;
  box-sizing: border-box;
  padding: 10px 12px 11px;
  color: var(--ink);
  text-shadow: none;
  background: rgba(239, 226, 183, .96);
  box-shadow: 5px 6px 0 rgba(31, 25, 20, .35);
  pointer-events: auto;
}
.first-solo-opening-plan[hidden] { display: none !important; }
.first-solo-opening-plan header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.first-solo-opening-plan small {
  display: block;
  color: var(--red);
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: none;
}
.first-solo-opening-plan header .sketch-button {
  min-width: 30px;
  min-height: 28px;
  padding: 0 8px;
  color: var(--ink);
  text-shadow: none;
}
.first-solo-opening-sections {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
}
.first-solo-opening-step {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: start;
  gap: 7px;
  padding: 6px 7px;
  border: 2px dashed rgba(48, 41, 35, .45);
  background: rgba(255, 248, 213, .54);
  color: var(--ink);
  text-shadow: none;
  font-size: .74rem;
  line-height: 1.18;
}
.first-solo-opening-step b {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 22px;
  padding: 1px 5px;
  border: 2px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  text-shadow: none;
  font-size: .7rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
}
.first-solo-opening-step span {
  color: var(--ink);
  text-shadow: none;
  font-weight: 800;
}
.first-solo-opening-plan p {
  margin: 8px 0 8px;
  color: var(--ink);
  text-shadow: none;
  font-size: .8rem;
  line-height: 1.2;
  font-weight: 800;
}
.first-solo-opening-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}
.first-solo-opening-actions .sketch-button {
  min-height: 34px;
  color: var(--ink);
  text-shadow: none;
  white-space: nowrap;
}
@media (max-width: 980px) and (max-height: 520px) {
  .first-solo-opening-plan {
    top: calc(var(--safe-edge) + 35px);
    width: min(435px, calc(100vw - 24px));
    max-height: calc(100vh - var(--bottom-tray-height) - 62px);
    padding: 7px 9px;
  }
  .first-solo-opening-plan header { margin-bottom: 4px; }
  .first-solo-opening-plan small { font-size: .7rem; }
  .first-solo-opening-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .first-solo-opening-step { grid-template-columns: 58px 1fr; gap: 5px; padding: 4px 5px; font-size: .72rem; line-height: 1.2; border-width: 1px; }
  .first-solo-opening-step b { min-height: 19px; border-width: 1px; font-size: .62rem; padding: 1px 3px; }
  .first-solo-opening-plan p { margin: 5px 0 6px; font-size: .72rem; line-height: 1.2; }
  .first-solo-opening-actions { gap: 5px; }
  .first-solo-opening-actions .sketch-button { flex: 1 1 134px; min-height: 30px; padding: 4px 6px; font-size: .68rem; }
}

/* Drop 058: compact live tracker after the first Solo opening plan is dismissed. */
.first-solo-objective-tracker {
  position: fixed;
  z-index: 16;
  top: calc(var(--safe-edge) + 82px);
  right: calc(var(--right-panel-width) + 16px);
  width: min(286px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 72px));
  max-height: calc(100vh - var(--bottom-tray-height) - 124px);
  overflow: auto;
  box-sizing: border-box;
  padding: 8px 9px 9px;
  color: var(--ink);
  text-shadow: none;
  background: rgba(239, 226, 183, .95);
  box-shadow: 4px 5px 0 rgba(31, 25, 20, .32);
  pointer-events: auto;
  transform: rotate(.2deg);
}
.first-solo-objective-tracker[hidden] { display: none !important; }
.first-solo-objective-tracker header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 7px;
  margin-bottom: 5px;
}
.first-solo-objective-tracker small {
  display: block;
  color: var(--red);
  text-shadow: none;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: .68rem;
  line-height: 1;
}
.first-solo-objective-tracker header b {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 6px;
  border: 2px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  text-shadow: none;
  font-size: .7rem;
  line-height: 1;
}
.first-solo-objective-tracker header .sketch-button {
  min-width: 30px;
  min-height: 28px;
  padding: 0 8px;
  color: var(--ink);
  text-shadow: none;
}
.first-solo-tracker-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.first-solo-tracker-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 6px;
  padding: 5px 6px;
  border: 2px dashed rgba(48, 41, 35, .42);
  background: rgba(255, 248, 213, .52);
  color: var(--ink);
  text-shadow: none;
  font-size: .72rem;
  line-height: 1.16;
}
.first-solo-tracker-step b {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 19px;
  padding: 1px 4px;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  color: var(--ink);
  text-shadow: none;
  font-size: .58rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .03em;
}
.first-solo-tracker-step span,
.first-solo-tracker-step strong {
  color: var(--ink);
  text-shadow: none;
}
.first-solo-tracker-step strong {
  display: block;
  font-size: .58rem;
  letter-spacing: .08em;
  color: var(--red);
}
.first-solo-tracker-step.done {
  opacity: .68;
  border-style: solid;
  background: rgba(213, 194, 126, .42);
}
.first-solo-tracker-step.done b {
  background: #92a46d;
}
@media (max-width: 980px) and (max-height: 520px) {
  .first-solo-objective-tracker {
    top: calc(var(--safe-edge) + 42px);
    right: 8px;
    width: min(318px, 42vw);
    max-height: calc(100vh - var(--bottom-tray-height) - 70px);
    padding: 6px 7px 7px;
  }
  .first-solo-objective-tracker small { font-size: .62rem; }
  .first-solo-objective-tracker header b { font-size: .64rem; border-width: 1px; }
  .first-solo-tracker-list { gap: 3px; }
  .first-solo-tracker-step { grid-template-columns: 48px 1fr; gap: 5px; padding: 4px 5px; border-width: 1px; font-size: .66rem; line-height: 1.16; }
  .first-solo-tracker-step b { min-height: 18px; border-width: 1px; font-size: .54rem; }
  .first-solo-tracker-step strong { font-size: .54rem; }
  .first-solo-objective-tracker header .sketch-button { min-width: 30px; min-height: 30px; }
}
@media (max-width: 980px) and (max-height: 520px) {
  .first-solo-objective-tracker {
    transform: none;
    width: min(304px, calc(100vw - 16px));
  }
}

/* Drop 059: first Solo debrief inside the existing match-end card. */
.first-solo-debrief {
  margin: 12px auto 0;
  padding: 10px 11px;
  max-width: 460px;
  text-align: left;
  color: var(--ink);
  text-shadow: none;
  background: rgba(255, 248, 213, .72);
  border: 3px dashed rgba(48, 41, 35, .55);
  border-radius: 14px;
  box-sizing: border-box;
}
.first-solo-debrief-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.first-solo-debrief h2 {
  margin: 0;
  color: var(--red);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .07em;
}
.first-solo-debrief-header > b {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  font-size: .72rem;
  line-height: 1;
}
.first-solo-debrief-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.first-solo-debrief-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 6px;
  border: 2px solid rgba(48, 41, 35, .5);
  background: rgba(241, 232, 200, .74);
  font-size: .66rem;
  line-height: 1;
  font-weight: 900;
}
.first-solo-debrief-step span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.first-solo-debrief-step.complete b { color: #344d24; }
.first-solo-debrief-step.incomplete { opacity: .78; }
.first-solo-debrief-next {
  margin: 8px 0 0;
  font-size: .78rem;
  line-height: 1.25;
}
.first-solo-debrief-next strong {
  color: var(--red);
}
@media (max-width: 980px), (max-height: 620px) {
  .end-card { width: min(680px, 94vw); }
  .first-solo-debrief { margin-top: 7px; padding: 7px 8px; max-width: 520px; }
  .first-solo-debrief-header { margin-bottom: 5px; }
  .first-solo-debrief h2 { font-size: .82rem; }
  .first-solo-debrief-header > b { font-size: .62rem; border-width: 1px; padding: 2px 5px; }
  .first-solo-debrief-steps { gap: 4px; }
  .first-solo-debrief-step { padding: 4px 5px; border-width: 1px; font-size: .58rem; }
  .first-solo-debrief-next { margin-top: 6px; font-size: .68rem; line-height: 1.18; }
}
@media (max-width: 560px), (max-height: 430px) {
  .first-solo-debrief-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first-solo-debrief { max-width: 96%; }
}

/* Drop 059 compact end-card fit guard: keep debrief, advice, and buttons reachable on short landscape screens. */
.end-card { box-sizing: border-box; overflow: auto; }
@media (max-height: 520px) {
  .end-card {
    width: min(760px, 94vw);
    max-height: calc(100vh - 16px);
    padding: 8px 14px;
  }
  .end-card h1 { font-size: 30px; margin: 0 0 2px; line-height: .9; }
  .end-card > p { margin: 2px 0 4px; font-size: .74rem; line-height: 1.15; }
  .battle-scratch { height: 9px; border-bottom-width: 4px; }
  .history-tallies { max-width: min(650px, 94vw); margin: 4px auto !important; padding: 5px; line-height: 1.18; font-size: 10px; }
  .history-tallies-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .history-tallies-grid > div { padding: 4px 6px; border-width: 1px; border-radius: 8px; font-size: .58rem; }
  .first-solo-debrief { max-width: min(520px, 94vw); margin-top: 4px; padding: 5px 6px; border-width: 2px; }
  .first-solo-debrief-header { margin-bottom: 4px; }
  .first-solo-debrief h2 { font-size: .72rem; }
  .first-solo-debrief-header > b { font-size: .54rem; padding: 2px 4px; }
  .first-solo-debrief-steps { gap: 3px; }
  .first-solo-debrief-step { padding: 3px 4px; font-size: .52rem; }
  .first-solo-debrief-next { margin-top: 4px; font-size: .6rem; line-height: 1.12; }
  .local-next-scribble { margin-top: 5px; padding: 5px 7px; }
  .local-next-scribble h2 { margin: 0 0 2px; font-size: 14px; }
  .local-next-scribble p { margin: 0; font-size: 10px; line-height: 1.12; }
  .end-actions .huge { min-height: 30px !important; margin-top: 4px !important; padding: 4px 8px !important; font-size: 9px !important; }
}
@media (max-height: 520px) {
  .first-solo-debrief-step { font-size: .58rem; }
}

/* Drop 061: first Solo graduation retirement card. */
.first-solo-debrief.graduate {
  background: rgba(255, 248, 213, .88);
  border-style: solid;
}
.first-solo-debrief.graduate h2 {
  color: #344d24;
}
.first-solo-debrief-body {
  margin: 0 0 7px;
  font-size: .76rem;
  line-height: 1.2;
  font-weight: 800;
}
@media (max-height: 520px) {
  .first-solo-debrief-body { margin-bottom: 4px; font-size: .6rem; line-height: 1.12; }
}

/* Drop 062: tactical terrain meaning is surfaced in the selected-unit summary; no new HUD panel required. */
/* Drop 062: stack the event feed above the terrain-aware selection summary even when the feed skin class is absent. */
html[data-bottom-hud-stacked="true"] #messageFeed {
  bottom: calc(var(--bottom-hud-clearance) + var(--selection-summary-rendered-height) + var(--safe-edge));
}
@media (max-height: 680px) {
  html[data-bottom-hud-stacked="true"] #messageFeed {
    bottom: calc(var(--bottom-hud-clearance) + var(--selection-summary-rendered-height) + var(--safe-edge));
  }
}
html[data-bottom-hud-stacked="true"] #messageFeed.event-ticker,
html[data-bottom-hud-stacked="true"] #messageFeed {
  bottom: calc(var(--bottom-hud-clearance) + var(--selection-summary-rendered-height) + var(--safe-edge)) !important;
}

/* Drop 063 — Tactical Terrain Readability V1: small hover intel chip. */
.terrain-intel-chip {
  position: fixed;
  z-index: 24;
  max-width: min(240px, calc(100vw - 24px));
  min-width: 170px;
  padding: 7px 10px 8px;
  border: 3px solid var(--ink);
  background: rgba(239, 228, 183, .96);
  color: var(--ink);
  box-shadow: 3px 4px 0 rgba(31,25,20,.32);
  transform: rotate(-.35deg);
  pointer-events: none;
  font-weight: 900;
  line-height: 1.16;
}
.terrain-intel-chip[hidden] { display: none !important; }
.terrain-intel-chip b,
.terrain-intel-chip span,
.terrain-intel-chip small { display: block; }
.terrain-intel-chip b { font-size: 12px; letter-spacing: .08em; }
.terrain-intel-chip span { font-size: 10px; text-transform: uppercase; margin-top: 2px; }
.terrain-intel-chip small { font-size: 9px; margin-top: 4px; opacity: .88; }
.terrain-intel-chip[data-terrain="shallows"] { transform: rotate(.45deg); }
.terrain-intel-chip[data-terrain="rocky"] { border-style: dashed; }
.terrain-intel-chip[data-terrain="scrub"] { border-style: double; }
html[data-game-hud-surface="hidden"] #terrainIntelChip,
html[data-game-hud-surface="blocked"] #terrainIntelChip {
  display: none !important;
  pointer-events: none !important;
}
@media (max-width: 930px), (max-height: 440px) {
  .terrain-intel-chip {
    min-width: 145px;
    max-width: 210px;
    padding: 5px 7px 6px;
    border-width: 2px;
  }
  .terrain-intel-chip b { font-size: 10px; }
  .terrain-intel-chip span { font-size: 8px; }
  .terrain-intel-chip small { font-size: 7px; }
}

/* Drop 072 — Quick Play Score Victory V1: crayon score clock for casual public matches. */
.score-victory-notice {
  position: fixed;
  z-index: 23;
  left: clamp(220px, 24vw, 360px);
  top: calc(var(--safe-edge) + 76px);
  max-width: min(310px, calc(100vw - 40px));
  padding: 8px 12px 9px;
  border: 3px solid var(--ink);
  background: rgba(240, 221, 168, .94);
  color: var(--ink);
  box-shadow: 4px 5px 0 rgba(31,25,20,.26);
  transform: rotate(.32deg);
  pointer-events: none;
  font-weight: 900;
  line-height: 1.14;
}
.score-victory-notice[hidden] { display: none !important; }
.score-victory-notice b,
.score-victory-notice span,
.score-victory-notice small { display: block; }
.score-victory-notice b { font-size: 12px; letter-spacing: .08em; }
.score-victory-notice span { margin-top: 3px; font-size: 10px; text-transform: uppercase; }
.score-victory-notice small { margin-top: 4px; font-size: 8px; opacity: .82; }
html[data-game-hud-surface="hidden"] #scoreVictoryNotice,
html[data-game-hud-surface="blocked"] #scoreVictoryNotice,
.overlay.visible ~ #scoreVictoryNotice { display: none !important; }
@media (max-width: 930px), (max-height: 440px) {
  .score-victory-notice {
    left: 10px;
    top: calc(var(--safe-edge) + 66px);
    max-width: 220px;
    padding: 6px 8px;
    border-width: 2px;
  }
  .score-victory-notice b { font-size: 9px; }
  .score-victory-notice span { font-size: 8px; }
  .score-victory-notice small { display:none; }
}


/* Drop 075 — Compact HUD certification recovery.
   Short desktop viewports keep the work queue and lower feedback inside the
   visible paper stack instead of letting older compact cards hang below the
   viewport or collide with the current-circle summary. */
html[data-ui-layout="compact"] .construction-ledger.compact,
html[data-ui-short="true"] .construction-ledger.compact {
  max-height: 46px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
html[data-ui-layout="compact"] .construction-ledger.compact .construction-ledger-summary,
html[data-ui-short="true"] .construction-ledger.compact .construction-ledger-summary {
  min-height: 18px !important;
  padding-top: 1px !important;
  padding-bottom: 0 !important;
}
html[data-ui-layout="compact"] .construction-ledger.compact .construction-ledger-toggle,
html[data-ui-short="true"] .construction-ledger.compact .construction-ledger-toggle {
  min-height: 20px !important;
}
html[data-ui-short="true"] #messageFeed.event-ticker,
html[data-ui-short="true"] #messageFeed {
  max-height: 56px !important;
  overflow: hidden !important;
}
html[data-ui-short="true"][data-bottom-hud-stacked="true"] #messageFeed.event-ticker,
html[data-ui-short="true"][data-bottom-hud-stacked="true"] #messageFeed {
  bottom: calc(var(--bottom-hud-clearance) + var(--selection-summary-rendered-height) + max(12px, var(--safe-edge))) !important;
}
@media (max-height: 620px) {
  #messageFeed.event-ticker,
  #messageFeed {
    width: min(320px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 86px)) !important;
    max-height: 50px !important;
  }
}
html[data-ui-layout="compact"] #constructionLedger,
html[data-ui-short="true"] #constructionLedger {
  max-height: 52px !important;
  height: auto !important;
  overflow: hidden !important;
}
html[data-ui-short="true"] #messageFeed.event-ticker,
html[data-ui-short="true"] #messageFeed {
  width: min(280px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 126px)) !important;
}
html[data-right-panel-collapsed="false"] #messageFeed.event-ticker,
html[data-right-panel-collapsed="false"] #messageFeed {
  width: min(380px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 110px)) !important;
}
@media (max-height: 780px) {
  #constructionLedger {
    max-height: 56px !important;
    overflow: hidden !important;
  }
  html[data-right-panel-collapsed="false"] #messageFeed.event-ticker,
  html[data-right-panel-collapsed="false"] #messageFeed {
    width: min(270px, calc(100vw - var(--left-panel-width) - var(--right-panel-width) - 220px)) !important;
  }
}


/* Drop 081 Root/Wild readability: the third path must stay distinct without hue-only cues. */
:root[data-high-contrast-markers="true"] .doctrine-choice.wild,
:root[data-colorblind-mode="high-contrast"] .doctrine-choice.wild {
  background-image: repeating-linear-gradient(135deg, var(--ink) 0 4px, var(--paper-light) 4px 10px);
  outline: 5px solid var(--ink);
}
:root[data-high-contrast-markers="true"] .doctrine-choice.wild .doctrine-path-marker,
:root[data-colorblind-mode="high-contrast"] .doctrine-choice.wild .doctrine-path-marker {
  border-width: 4px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
:root[data-colorblind-mode="deuteranopia"] .doctrine-choice.wild,
:root[data-colorblind-mode="protanopia"] .doctrine-choice.wild,
:root[data-colorblind-mode="tritanopia"] .doctrine-choice.wild {
  background-image: repeating-linear-gradient(135deg, rgba(48,41,35,.22) 0 6px, rgba(234,223,184,.18) 6px 13px), var(--grain);
}

/* Drop 077 accessibility/control foundation: color meaning must have text, icon, and shape backup. */
:root[data-colorblind-mode="deuteranopia"] {
  --red: #b45f06;
  --danger: #9c4f00;
  --green: #1f77b4;
  --blue: #345f9f;
  --gold: #e0a72e;
  --shadow: #5d5470;
}
:root[data-colorblind-mode="protanopia"] {
  --red: #b07c00;
  --danger: #8a6400;
  --green: #0072b2;
  --blue: #0072b2;
  --gold: #e6b93f;
  --shadow: #5a4f67;
}
:root[data-colorblind-mode="tritanopia"] {
  --red: #a95474;
  --danger: #94415e;
  --green: #087f8c;
  --blue: #087f8c;
  --gold: #c4a000;
  --shadow: #4b4052;
}
:root[data-colorblind-mode="high-contrast"] {
  --ink: #15120f;
  --ink-soft: #25211c;
  --paper: #fff1bd;
  --paper-light: #fff8d8;
  --paper-dark: #d9c66e;
  --red: #000;
  --danger: #000;
  --green: #fff;
  --blue: #000;
  --gold: #ffe04f;
  --shadow: #000;
}

.accessibility-settings, .controls-settings { min-width: 240px; }
.accessibility-settings p, .controls-settings p { margin: 6px 0; font-size: 10px; line-height: 1.35; }
.accessibility-samples { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.score-verdict-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 3px 7px;
  border: 3px solid var(--ink);
  background: var(--paper-light);
  font-size: 10px;
  font-weight: 900;
  box-shadow: 2px 2px 0 rgba(24,20,17,.3);
}
.score-verdict-chip::before { content: attr(data-verdict-cue); font-family: sans-serif; font-weight: 900; }
.score-verdict-chip.verdict-winning { background-color: color-mix(in srgb, var(--green) 34%, var(--paper-light)); clip-path: polygon(2% 13%, 100% 0, 95% 100%, 8% 92%); }
.score-verdict-chip.verdict-even { background-color: color-mix(in srgb, var(--gold) 30%, var(--paper-light)); clip-path: polygon(0 7%, 97% 4%, 100% 86%, 4% 100%); }
.score-verdict-chip.verdict-losing { background-color: color-mix(in srgb, var(--danger) 29%, var(--paper-light)); clip-path: polygon(5% 0, 100% 13%, 91% 96%, 0 88%); }
.score-verdict-chip.verdict-critical { background-color: var(--paper-dark); outline: 3px dashed var(--danger); clip-path: polygon(6% 0, 100% 10%, 92% 100%, 0 92%); }
:root[data-high-contrast-markers="true"] .score-verdict-chip,
:root[data-colorblind-mode="high-contrast"] .score-verdict-chip { border-width: 4px; text-decoration: underline; text-decoration-thickness: 2px; }

.control-bindings-list { display: grid; gap: 5px; max-height: min(42vh, 360px); overflow: auto; padding-right: 2px; }
.control-binding-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 6px 7px;
  color: var(--ink);
  text-align: left;
  background: var(--paper-light);
  border: 2px solid var(--ink);
  cursor: pointer;
  clip-path: polygon(1% 7%, 98% 0, 100% 90%, 7% 100%);
}
.control-binding-row:hover { background: var(--paper-dark); }
.control-binding-row b { display: block; font-size: 10px; line-height: 1.1; }
.control-binding-row small { display: block; font-size: 8px; color: var(--ink-soft); }
.control-binding-row kbd { min-width: 52px; padding: 3px 6px; border: 2px solid var(--ink); background: var(--gold); text-align: center; font-weight: 900; }
.compact-controls-settings .control-bindings-list { max-height: 220px; }

:root[data-high-contrast-markers="true"] .neutral-site-marker,
:root[data-high-contrast-markers="true"] [data-neutral-site],
:root[data-high-contrast-markers="true"] [data-naval-marker],
:root[data-colorblind-mode="high-contrast"] .neutral-site-marker,
:root[data-colorblind-mode="high-contrast"] [data-neutral-site],
:root[data-colorblind-mode="high-contrast"] [data-naval-marker] {
  outline: 4px solid var(--ink);
  filter: contrast(1.28) saturate(.78);
}


/* Drop 089 — keep the casual Score Verdict below the compact Guided Practice ribbon. */
html:has(#coachPanel.visible:not(.expanded)) #scoreVictoryNotice:not([hidden]) {
  top: 202px;
}
@media (max-height: 680px) {
  html:has(#coachPanel.visible:not(.expanded)) #scoreVictoryNotice:not([hidden]) {
    top: 196px;
  }
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1100px) {
  html:has(#coachPanel.visible:not(.expanded)) #scoreVictoryNotice:not([hidden]) {
    top: 186px;
  }
}

/* Drop 090 — keep the production first-Solo retry brief inside short desktop viewports. */
@media (min-width: 981px) and (max-height: 640px) {
  .first-real-match-brief[data-first-solo-retry-active="true"] {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    gap: 8px;
    margin: 4px auto 6px;
    padding: 7px 10px;
  }
  .first-real-match-brief[data-first-solo-retry-active="true"] h3 { margin-bottom: 2px; font-size: 1rem; }
  .first-real-match-brief[data-first-solo-retry-active="true"] p { font-size: .75rem; line-height: 1.14; margin-bottom: 3px; }
  .first-real-match-brief[data-first-solo-retry-active="true"] .first-real-match-routes { gap: 4px; margin: 4px 0; }
  .first-real-match-brief[data-first-solo-retry-active="true"] .first-real-match-route { padding: 4px 6px; border-width: 1px; }
  .first-real-match-brief[data-first-solo-retry-active="true"] .first-solo-retry-card { margin: 4px 0; padding: 4px 6px; }
  .first-real-match-brief[data-first-solo-retry-active="true"] .first-solo-retry-card p { font-size: .68rem; line-height: 1.1; margin-bottom: 2px; }
  .first-real-match-brief[data-first-solo-retry-active="true"] .first-real-match-actions { flex-direction: column; align-content: stretch; }
  .first-real-match-brief[data-first-solo-retry-active="true"] .first-real-match-actions .sketch-button { width: 100%; min-height: 31px; padding: 5px 7px; font-size: .7rem; flex: 0 0 auto; }
}
@media (max-width: 980px) and (max-height: 520px) {
  .first-real-match-brief[data-first-solo-retry-active="true"] {
    max-height: 128px;
    overflow: hidden;
    align-items: stretch;
  }
  .first-real-match-brief[data-first-solo-retry-active="true"] .first-real-match-copy {
    max-height: 112px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
  }
  .first-real-match-brief[data-first-solo-retry-active="true"] .first-real-match-actions {
    justify-content: center;
  }
}

/* Drop 091 — Touch Orders stay on the paper.
   The desktop torn-paper silhouette is decorative, but on the short landscape
   drawer it clipped the lower naval actions out of browser hit testing. */
@media(pointer:coarse) and (orientation:landscape) and (max-width:1100px){
  #rightPanel:not(.hud-collapsed){
    top:72px !important;
    right:6px !important;
    bottom:6px !important;
    height:auto !important;
    max-height:none !important;
    clip-path:none !important;
    isolation:isolate;
    pointer-events:auto;
  }
  #rightPanel:not(.hud-collapsed) #actionGrid,
  #rightPanel:not(.hud-collapsed) #actionGrid button{
    position:relative;
    z-index:1;
    pointer-events:auto;
  }
}

/* Drop 094: authoritative online recovery surface. */
.network-recovery-overlay{background:rgba(26,22,25,.82);z-index:175;align-items:center;justify-content:center;padding:18px}.network-recovery-card{width:min(620px,92vw);max-height:min(84vh,620px);overflow:auto;padding:28px;text-align:center;box-shadow:10px 12px 0 rgba(20,16,15,.5);transform:rotate(-.2deg)}.network-recovery-card h1{font-size:clamp(26px,5vw,48px);margin:8px 0}.network-recovery-card p{font-weight:800;line-height:1.45}.network-recovery-roster{list-style:none;margin:18px auto;padding:0;display:grid;gap:8px;max-width:440px}.network-recovery-roster li{border:3px solid #3a3029;background:#ddcf9b;padding:10px 12px;font-weight:900;letter-spacing:.05em}.network-recovery-countdown{display:block;color:#963b34;font-size:20px;margin:14px 0}.network-recovery-actions{display:flex;justify-content:center}.network-recovery-overlay.visible~#endOverlay.visible{z-index:180}@media(max-height:520px){.network-recovery-overlay{padding:8px}.network-recovery-card{max-height:96vh;padding:16px}.network-recovery-card h1{font-size:26px}.network-recovery-roster{margin:10px auto}.network-recovery-roster li{padding:7px 9px}}

/* Drop 096 — local save/resume recovery */
.saved-match-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:12px auto 16px;padding:12px 15px;max-width:860px;background:#f3e7bd;transform:rotate(-.2deg)}
.saved-match-card[hidden]{display:none!important}.saved-match-copy{min-width:0}.saved-match-copy small{font-weight:900;letter-spacing:.08em}.saved-match-copy h2{margin:2px 0 3px;font-size:clamp(1rem,2vw,1.45rem)}.saved-match-copy p{margin:0;font-weight:800}.saved-match-copy span{display:block;margin-top:3px;font-size:.8rem;opacity:.8}.saved-match-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.saved-match-actions .sketch-button{min-height:42px}
.local-save-recovery-overlay{z-index:1700;align-items:center;justify-content:center;background:rgba(30,25,20,.72)}.local-save-recovery-overlay.visible{display:flex}.local-save-recovery-card{width:min(620px,calc(100vw - 28px));padding:24px;text-align:center;background:#f3e7bd}.local-save-recovery-card h1{margin:8px 0}.save-recovery-marks{display:flex;justify-content:center;gap:10px;margin-top:18px}.save-recovery-marks i{display:block;width:16px;height:16px;border:4px solid #392e26;border-radius:50%;animation:save-recovery-pulse 1s infinite alternate}.save-recovery-marks i:nth-child(2){animation-delay:.18s}.save-recovery-marks i:nth-child(3){animation-delay:.36s}@keyframes save-recovery-pulse{to{transform:translateY(-8px) rotate(12deg);background:#d0a84c}}
@media(max-width:760px),(max-height:520px){.saved-match-card{align-items:stretch;flex-direction:column;gap:8px;margin:7px 0 10px;padding:9px 11px}.saved-match-actions{justify-content:flex-start}.saved-match-actions .sketch-button{min-height:38px}.local-save-recovery-card{max-height:calc(100vh - 24px);overflow:auto;padding:16px}}