:root {
  --petrol: #102B3A;
  --coal: #171A1C;
  --sand: #B89D72;
  --ivory: #E8E1D3;
  --alert: #C8473D;
  --amber: #D89A35;
  --people: #5F9279;
  --line: rgba(232, 225, 211, .22);
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --editorial: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ivory); background: var(--coal); font-family: var(--mono); }
button, a { color: inherit; font: inherit; }
button { border-radius: 0; }
.hidden { display: none !important; }

.game-shell {
  display: grid;
  width: min(1280px, 100%);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  grid-template-rows: minmax(56px, .66fr) minmax(58px, .7fr) minmax(250px, 3.9fr) minmax(68px, .82fr) minmax(156px, 1.9fr);
  overflow: hidden;
  border-inline: 1px solid var(--line);
  background: var(--coal);
}

.topbar { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) auto auto; border-bottom: 1px solid var(--line); background: var(--petrol); }
.slogan { display: flex; min-width: 0; align-items: center; gap: 8px; border: 0; border-right: 1px solid var(--line); padding: 7px 16px; color: rgba(232,225,211,.58); background: transparent; text-align: left; cursor: default; }
.slogan span { font: 700 clamp(.58rem, 1vw, .75rem)/1 var(--mono); letter-spacing: .07em; }
.slogan strong { font: 700 clamp(.78rem, 1.7vw, 1.3rem)/1 var(--editorial); }
.slogan.ready { color: var(--ivory); background: var(--people); cursor: pointer; animation: readyPulse 1.2s steps(2, end) infinite; }
.slogan.used { color: var(--people); text-decoration: line-through; }
.turn-block { display: grid; min-width: 88px; place-content: center; padding: 5px 14px; border-right: 1px solid var(--line); text-align: center; }
.turn-block span { color: var(--sand); font-size: .55rem; letter-spacing: .12em; }
.turn-block strong { font-size: .92rem; }
.utilities { display: flex; }
.icon-button { display: grid; width: 52px; min-height: 100%; place-items: center; border: 0; border-left: 1px solid var(--line); color: var(--ivory); background: transparent; cursor: pointer; font: 800 1rem/1 var(--mono); }
.icon-button:hover, .icon-button:focus-visible, .icon-button.active { color: var(--coal); background: var(--sand); }

.meters { display: grid; min-height: 0; grid-template-columns: minmax(112px, .55fr) minmax(112px, .55fr) minmax(0, 1.9fr); border-bottom: 1px solid var(--line); }
.meters > div { display: grid; min-width: 0; grid-template-columns: 1fr auto; align-content: center; gap: 5px 12px; padding: 8px 15px; border-right: 1px solid var(--line); }
.meters span { color: var(--sand); font-size: .58rem; letter-spacing: .12em; }
.meters strong { font-size: .78rem; }
.meters i { grid-column: 1 / -1; height: 4px; overflow: hidden; background: rgba(232,225,211,.12); }
.meters i b { display: block; height: 100%; width: 0; background: var(--amber); transition: width .3s steps(4, end); }
.meters > div:nth-child(2) i b { background: var(--people); }
.meters p { display: flex; min-width: 0; align-items: center; gap: 14px; margin: 0; padding: 8px 18px; color: rgba(232,225,211,.72); font: .68rem/1.3 var(--mono); }
.meters p span { flex: 0 0 auto; color: var(--alert); font-weight: 800; }

.map-panel { position: relative; min-height: 0; overflow: hidden; background: var(--petrol); isolation: isolate; }
.map-art { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: saturate(.58) contrast(1.2) brightness(.55); }
.map-wash { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(200,71,61,.36), rgba(16,43,58,.22) 45%, rgba(216,154,53,.32)), repeating-linear-gradient(0deg, transparent 0 7px, rgba(23,26,28,.12) 7px 8px); transition: background .4s; }
.map-panel.resolving .map-wash { background: linear-gradient(90deg, rgba(200,71,61,.62), rgba(16,43,58,.12) 45%, rgba(216,154,53,.58)), repeating-linear-gradient(0deg, transparent 0 7px, rgba(23,26,28,.2) 7px 8px); }
.sector-rows { display: grid; height: 100%; min-height: 0; align-content: center; gap: clamp(7px, 1.1vh, 13px); padding: clamp(16px, 3vw, 40px) clamp(12px, 5vw, 70px) 30px; }
.sector { display: grid; min-height: 60px; grid-template-columns: minmax(116px, 1fr) minmax(126px, .74fr) minmax(116px, 1fr); align-items: center; border: 1px solid rgba(232,225,211,.38); background: rgba(23,26,28,.78); box-shadow: 8px 8px 0 rgba(16,43,58,.36); transition: border-color .3s, transform .3s; }
.map-panel.resolving .sector { transform: translateY(-2px); }
.sector.lost { border-color: var(--alert); background: rgba(73,24,24,.85); }
.sector h2 { display: grid; align-self: stretch; place-content: center; margin: 0; border-inline: 1px solid var(--line); font: 700 clamp(.9rem, 2vw, 1.55rem)/.94 var(--editorial); text-align: center; text-transform: uppercase; }
.sector h2 span { margin-bottom: 5px; color: var(--people); font: 700 .47rem/1 var(--mono); letter-spacing: .15em; }
.sector.lost h2 span { color: var(--alert); }
.pressure { display: grid; grid-template-columns: minmax(46px, auto) 1fr auto; align-items: center; gap: 8px; padding: 7px clamp(9px, 2vw, 24px); }
.pressure > span { font-size: .53rem; font-weight: 800; letter-spacing: .08em; }
.pressure > div { display: flex; gap: 3px; }
.pressure i { display: block; width: clamp(7px, 1.3vw, 15px); height: clamp(11px, 1.7vw, 20px); border: 1px solid currentColor; opacity: .45; }
.pressure i.on { opacity: 1; background: currentColor; animation: pressurePulse 1.6s steps(2, end) infinite; }
.pressure strong { font-size: .78rem; }
.pressure-rabat { color: var(--alert); }
.pressure-state { color: var(--amber); direction: rtl; }
.pressure-state > * { direction: ltr; }
.map-note { position: absolute; right: 10px; bottom: 7px; margin: 0; color: rgba(232,225,211,.65); font-size: .48rem; letter-spacing: .06em; }

.forecast { display: grid; min-height: 0; grid-template-columns: minmax(150px, .58fr) minmax(0, 2fr); border-block: 1px solid var(--line); background: var(--petrol); }
.forecast > div { display: grid; align-content: center; padding: 10px 16px; border-right: 1px solid var(--line); }
.forecast span { color: var(--sand); font-size: .53rem; letter-spacing: .12em; }
.forecast p { display: flex; min-width: 0; align-items: center; gap: 10px; margin: 0; padding: 10px 18px; font-size: clamp(.6rem, 1.2vw, .78rem); white-space: nowrap; }
.forecast p b:first-child { color: var(--alert); }
.forecast p b:nth-of-type(2) { color: var(--amber); }
.forecast p i { display: block; width: 1px; height: 20px; background: var(--line); }
.forecast p em { color: var(--people); font-style: normal; }

.actions { display: grid; min-height: 0; grid-template-columns: repeat(3, 1fr); }
.action { display: grid; min-width: 0; min-height: 0; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 0; border-right: 1px solid var(--line); padding: clamp(12px, 2.4vw, 27px); color: var(--ivory); background: var(--coal); text-align: left; cursor: pointer; }
.action:last-child { border-right: 0; }
.action > span { align-self: start; color: var(--sand); font-size: .58rem; }
.action > div { display: grid; min-width: 0; gap: 8px; }
.action strong { font: 700 clamp(.78rem, 1.5vw, 1.18rem)/1.05 var(--editorial); }
.action small { color: rgba(232,225,211,.62); font: .56rem/1.45 var(--mono); }
.action > b { color: var(--sand); font-size: 1.25rem; }
.action:hover:not(:disabled), .action:focus-visible:not(:disabled) { color: var(--coal); background: var(--sand); outline: none; }
.action:hover:not(:disabled) small, .action:focus-visible:not(:disabled) small, .action:hover:not(:disabled) > span, .action:focus-visible:not(:disabled) > span { color: var(--petrol); }
.action:disabled { cursor: wait; opacity: .48; }

.overlay { position: fixed; z-index: 20; inset: 0; display: grid; overflow: hidden; place-items: center; padding: 18px; background: rgba(23,26,28,.95); }
.overlay::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(16,43,58,.9), rgba(23,26,28,.68)), url("assets/ceuta-nasa-pixel.webp") center/cover; image-rendering: pixelated; content: ""; filter: saturate(.55); }
.start-card, .rules-card, .ending-card, .info-card { width: 100%; min-width: 0; max-width: 720px; max-height: calc(100dvh - 36px); border: 1px solid var(--line); padding: clamp(22px, 5vh, 50px) clamp(20px, 5vw, 52px); background: rgba(16,43,58,.93); box-shadow: 12px 12px 0 rgba(23,26,28,.65); }
.eyebrow { margin: 0 0 10px; color: var(--sand); font-size: .58rem; letter-spacing: .17em; }
.start-card h1 { margin: 0; color: var(--ivory); font: 700 clamp(3rem, 10vh, 6.6rem)/.73 var(--editorial); letter-spacing: -.045em; }
.start-card > p:not(.eyebrow, .ethical-note), .ending-card > p:not(.eyebrow), .info-card > p { color: rgba(232,225,211,.76); font: clamp(.72rem, 1.5vh, .9rem)/1.55 var(--mono); }
.start-rules { display: grid; gap: 5px; margin: clamp(13px, 2.5vh, 24px) 0; }
.start-rules span { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 8px 0; font-size: .67rem; }
.start-rules b { color: var(--amber); }
.ethical-note { border-left: 3px solid var(--people); padding: 8px 11px; color: rgba(232,225,211,.62); background: rgba(23,26,28,.4); font: .58rem/1.45 var(--mono); }
.start-button { width: 100%; min-height: 52px; border: 1px solid var(--sand); color: var(--coal); background: var(--sand); cursor: pointer; font-weight: 900; letter-spacing: .08em; }
.start-button:hover, .start-button:focus-visible { background: var(--ivory); }
.start-card > small { display: block; margin-top: 9px; color: rgba(232,225,211,.54); font-size: .5rem; text-align: center; }
.rules-card h2, .ending-card h2, .info-card h2 { margin: 5px 0 14px; font: 700 clamp(2.5rem, 8vh, 5.4rem)/.88 var(--editorial); }
.rules-card { max-width: 650px; }
.rules-card h2 { font-size: clamp(2.4rem, 7vh, 4.6rem); }
.rule-list { display: grid; margin: 16px 0; border-top: 1px solid var(--line); }
.rule-list section { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rule-list section > b { color: var(--amber); font-size: .62rem; }
.rule-list section div { display: grid; gap: 4px; }
.rule-list strong { font: 700 1rem/1 var(--editorial); }
.rule-list p, .rules-goal { margin: 0; color: rgba(232,225,211,.68); font: .64rem/1.5 var(--mono); }
.rule-list em { color: var(--ivory); font-style: normal; font-weight: 900; }
.rules-goal { margin: 14px 0; border-left: 3px solid var(--people); padding: 8px 10px; background: rgba(23,26,28,.38); }
.ending-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0; border: 1px solid var(--line); }
.ending-stats span { display: grid; gap: 4px; padding: 12px; border-right: 1px solid var(--line); color: rgba(232,225,211,.6); font-size: .52rem; text-align: center; }
.ending-stats span:last-child { border: 0; }
.ending-stats b { color: var(--ivory); font-size: .8rem; }

.info-overlay { overflow-y: auto; place-items: center; }
.info-card { position: relative; overflow-y: auto; }
.info-card h2 { font-size: clamp(2rem, 6vh, 4rem); }
.info-card ul { padding-left: 20px; }
.info-card li { margin: 9px 0; color: rgba(232,225,211,.72); font-size: .68rem; line-height: 1.4; }
.info-card a { color: var(--sand); }
.asset-credit { border-top: 1px solid var(--line); padding-top: 14px; }
.close-button { position: sticky; float: right; top: 0; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--coal); cursor: pointer; font-size: 1.3rem; }

@keyframes pressurePulse { 50% { filter: brightness(1.5); transform: scaleY(.82); } }
@keyframes readyPulse { 50% { filter: brightness(1.18); } }

@media (max-width: 640px) {
  .game-shell { grid-template-rows: 58px 64px minmax(286px, 1fr) 58px 210px; border: 0; }
  .topbar { grid-template-columns: minmax(0, 1fr) 70px 88px; }
  .slogan { display: grid; gap: 1px; padding: 6px 10px; }
  .slogan span { font-size: .48rem; }
  .slogan strong { font-size: .72rem; }
  .turn-block { min-width: 0; padding: 5px; }
  .turn-block span { font-size: .43rem; }
  .turn-block strong { font-size: .72rem; }
  .icon-button { width: 44px; min-height: 58px; }
  .meters { grid-template-columns: 1fr 1fr; }
  .meters > div { padding: 7px 10px; }
  .meters p { grid-column: 1 / -1; display: none; }
  .sector-rows { gap: 8px; padding: 13px 8px 24px; }
  .sector { min-height: 68px; grid-template-columns: 1fr 96px 1fr; box-shadow: 4px 4px 0 rgba(16,43,58,.4); }
  .sector h2 { font-size: .84rem; }
  .pressure { grid-template-columns: 1fr auto; gap: 4px; padding: 5px 7px; }
  .pressure > span { font-size: .42rem; }
  .pressure > div { grid-row: 2; grid-column: 1 / -1; gap: 2px; }
  .pressure i { width: 10px; height: 14px; }
  .pressure strong { font-size: .62rem; }
  .map-note { right: 7px; font-size: .4rem; }
  .forecast { grid-template-columns: 105px minmax(0, 1fr); }
  .forecast > div { padding: 8px 9px; }
  .forecast span { font-size: .4rem; white-space: nowrap; }
  .forecast p { display: block; overflow: hidden; padding: 8px 10px; font-size: .49rem; line-height: 1.55; white-space: normal; }
  .forecast p i { display: none; }
  .forecast p b:nth-of-type(2) { margin-left: 5px; }
  .actions { grid-template-columns: 1fr; }
  .action { grid-template-columns: 26px 1fr 16px; gap: 5px; border-right: 0; border-bottom: 1px solid var(--line); padding: 7px 10px; }
  .action:last-child { border-bottom: 0; }
  .action > span { align-self: center; font-size: .46rem; }
  .action > div { gap: 3px; }
  .action strong { font-size: .72rem; }
  .action small { font-size: .43rem; line-height: 1.25; }
  .action > b { font-size: .85rem; }
  .overlay { padding: 12px; }
  .start-card, .rules-card, .ending-card, .info-card { max-height: calc(100dvh - 24px); padding: clamp(18px, 3.2vh, 27px) 19px; box-shadow: 6px 6px 0 rgba(23,26,28,.65); }
  .start-card h1 { font-size: clamp(3.2rem, 10vh, 5rem); }
  .start-card > p:not(.eyebrow, .ethical-note), .ending-card > p:not(.eyebrow), .info-card > p { font-size: .65rem; line-height: 1.42; }
  .start-rules { margin: 12px 0; }
  .start-rules span { padding: 6px 0; font-size: .58rem; }
  .ethical-note { margin: 10px 0; padding: 6px 8px; font-size: .5rem; }
  .start-button { min-height: 48px; font-size: .66rem; }
  .rules-card h2 { font-size: 2.7rem; }
  .rule-list { margin: 10px 0; }
  .rule-list section { grid-template-columns: 28px 1fr; gap: 8px; padding: 9px 0; }
  .rule-list strong { font-size: .86rem; }
  .rule-list p, .rules-goal { font-size: .54rem; line-height: 1.4; }
  .rules-goal { margin: 9px 0; padding: 6px 8px; }
  .ending-card h2 { font-size: 2.8rem; }
  .ending-stats { margin: 14px 0; }
}

@media (max-height: 700px) and (min-width: 641px) {
  .game-shell { grid-template-rows: 52px 54px minmax(220px, 1fr) 62px 144px; }
  .sector { min-height: 52px; }
  .action { padding-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}