:root {
  color-scheme: light;
  --ink: #172b35;
  --paper: #f6edda;
  --paper-dark: #e9d3ac;
  --red: #d94b3d;
  --orange: #ed963b;
  --teal: #168b86;
  --blue: #236a92;
  --yellow: #f2c84b;
  --sea: #0e6679;
  --shadow: #102d35;
  --lane-0: #d94b3d;
  --lane-1: #e49a2e;
  --lane-2: #168b86;
  --lane-3: #386b9a;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
html { background: #173844; }
body {
  margin: 0;
  min-width: 300px;
  color: var(--ink);
  background-color: #173844;
  background-image: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 18px 18px;
  overflow-x: hidden;
}
button { font: inherit; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--ink); }
[hidden] { display: none !important; }

.shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  border-inline: 5px solid var(--ink);
  box-shadow: 0 0 0 8px rgba(0,0,0,.12);
}

.masthead {
  min-height: 112px;
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px clamp(14px, 4vw, 40px);
  color: var(--paper);
  background: var(--ink);
  border-bottom: 8px solid var(--yellow);
}
.masthead h1 { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.05; letter-spacing: .05em; }
.masthead h1 span { color: var(--yellow); font-size: 1.15em; }
.eyebrow { margin: 0 0 5px; color: #9dd8d0; font: 700 .72rem/1.1 Consolas, monospace; letter-spacing: .16em; }
.brand-mark { position: relative; width: 70px; height: 70px; border: 4px solid var(--paper); transform: rotate(-2deg); }
.brand-mark span, .brand-mark i { position: absolute; bottom: 8px; width: 11px; background: var(--yellow); border: 2px solid var(--ink); }
.brand-mark span { left: 13px; height: 28px; box-shadow: 15px -13px 0 var(--red), 30px -25px 0 var(--teal); }
.brand-mark i { right: 4px; height: 54px; background: var(--blue); }
.square-button { min-width: 70px; min-height: 52px; padding: 8px; color: var(--paper); background: transparent; border: 3px solid var(--paper); font-weight: 900; cursor: pointer; }
.square-button[aria-pressed="true"] { color: var(--ink); background: var(--yellow); }

.start-screen { display: grid; grid-template-columns: minmax(330px, 1.05fr) minmax(340px, .95fr); min-height: 650px; }
.poster-scene { position: relative; min-height: 620px; overflow: hidden; background: #7bc5c5; border-right: 6px solid var(--ink); }
.paper-sun { position: absolute; width: 130px; height: 130px; top: 45px; left: 55px; border-radius: 50%; background: var(--yellow); border: 5px solid var(--ink); box-shadow: 10px 9px 0 rgba(23,43,53,.15); }
.paper-sea { position: absolute; inset: auto 0 0; height: 155px; background: var(--sea); border-top: 8px solid var(--ink); clip-path: polygon(0 13%, 9% 5%, 19% 17%, 31% 6%, 42% 16%, 55% 4%, 69% 13%, 80% 2%, 91% 14%, 100% 7%, 100% 100%, 0 100%); }
.poster-crane { position: absolute; left: 37%; top: 90px; width: 56%; height: 320px; border-left: 24px solid var(--red); border-top: 24px solid var(--red); filter: drop-shadow(7px 7px 0 rgba(23,43,53,.16)); }
.poster-crane::after { content: ""; position: absolute; right: 5%; top: 0; width: 7px; height: 175px; background: var(--ink); }
.poster-crane span { position: absolute; left: -50px; bottom: 0; width: 120px; height: 40px; background: var(--red); border: 5px solid var(--ink); transform: skew(-16deg); }
.poster-crane i { position: absolute; right: 0; top: 160px; width: 54px; height: 14px; background: var(--ink); }
.poster-crane b { position: absolute; right: -2px; top: 176px; width: 54px; height: 54px; display: grid; place-items: center; color: var(--paper); background: var(--blue); border: 5px solid var(--ink); font-size: 1.5rem; }
.poster-bars { position: absolute; z-index: 2; left: 33%; right: 8%; bottom: 112px; height: 275px; display: flex; align-items: flex-end; gap: 10px; }
.poster-bars i { flex: 1; height: 38%; background: var(--red); border: 5px solid var(--ink); box-shadow: inset 0 -14px rgba(255,255,255,.15); }
.poster-bars i:nth-child(2) { height: 65%; background: var(--orange); }
.poster-bars i:nth-child(3) { height: 48%; background: var(--teal); }
.poster-bars i:nth-child(4) { height: 84%; background: var(--blue); }
.captain { position: absolute; z-index: 3; left: 25px; bottom: 90px; width: 170px; height: 255px; }
.captain .hat { position: absolute; left: 18px; top: 5px; width: 127px; height: 50px; background: var(--paper); border: 5px solid var(--ink); border-radius: 50% 50% 12% 12%; box-shadow: 0 15px 0 -8px var(--red); }
.captain .face { position: absolute; left: 40px; top: 43px; width: 92px; height: 95px; background: #d69059; border: 5px solid var(--ink); border-radius: 48% 45% 42% 44%; }
.captain .face::before { content: "•  •"; position: absolute; top: 25px; left: 24px; font: 900 1.1rem monospace; }
.captain .face::after { content: "◡"; position: absolute; top: 45px; left: 34px; font-size: 1.45rem; }
.captain .coat { position: absolute; left: 10px; top: 128px; width: 150px; height: 120px; background: var(--yellow); border: 5px solid var(--ink); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); }

.start-copy { align-self: center; padding: clamp(28px, 6vw, 64px); }
.start-copy h2 { margin: 12px 0 18px; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; }
.start-copy > p { line-height: 1.9; }
.stamp { display: inline-block; margin: 0; padding: 6px 10px; color: var(--red); border: 3px solid var(--red); font-weight: 900; letter-spacing: .08em; transform: rotate(-2deg); }
.start-points { margin: 20px 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.start-points li { display: grid; grid-template-columns: 7.4em 1fr; gap: 12px; padding: 10px 4px; border-bottom: 2px dotted var(--ink); }
.start-points b { color: var(--blue); }
.start-button { width: 100%; min-height: 60px; padding: 14px 20px; color: var(--paper); background: var(--red); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); font-weight: 900; font-size: 1.05rem; cursor: pointer; }
.start-button:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.key-help { text-align: center; font-size: .82rem; color: #52646a; }

.game-screen { padding: 18px clamp(10px, 3vw, 28px) 42px; }
.dock-hud { display: grid; grid-template-columns: repeat(4, 1fr); border: 4px solid var(--ink); background: var(--paper-dark); }
.dock-hud div { padding: 9px 12px; border-right: 2px solid var(--ink); }
.dock-hud div:last-child { border-right: 0; }
.dock-hud span, .dock-hud strong { display: block; }
.dock-hud span { font-size: .72rem; font-weight: 700; }
.dock-hud strong { font: 900 1.2rem/1.2 Consolas, monospace; }
.manifest-strip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; color: var(--paper); background: var(--ink); border: 4px solid var(--ink); }
.manifest-strip span { display: block; color: #a8d9d4; font-size: .72rem; }
.manifest-strip strong { font-size: 1.25rem; }
.manifest-strip p { grid-column: 1 / -1; margin: 0; color: var(--paper); }
.wind-notice { min-width: 150px; padding: 7px 10px; text-align: center; color: var(--ink); background: var(--yellow); border: 3px solid var(--paper); font-weight: 900; }
.wind-notice[data-level="2"] { color: #fff; background: var(--red); }

.harbor { position: relative; min-height: 520px; margin-top: 12px; overflow: hidden; background-color: #83c9c5; border: 5px solid var(--ink); touch-action: pan-y; }
.sky-label { position: absolute; z-index: 4; top: 14px; left: 14px; max-width: 48%; padding: 7px 12px; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); font-weight: 900; transform: rotate(-1deg); }
.wind-flag { position: absolute; z-index: 4; top: 14px; right: 20px; width: 75px; height: 45px; border-left: 5px solid var(--ink); }
.wind-flag span { display: block; width: 65px; height: 28px; background: var(--yellow); border: 3px solid var(--ink); clip-path: polygon(0 0, 100% 10%, 76% 52%, 100% 95%, 0 100%); transform-origin: left; }
.wind-flag[data-dir="-1"] { transform: scaleX(-1); }
.wind-flag[data-level="2"] span { background: var(--red); animation: flagWarn .6s ease-in-out infinite alternate; }
.crane { position: absolute; z-index: 8; top: 54px; left: 50%; width: 82px; height: 162px; transform: translateX(-50%); transition: left .06s linear; pointer-events: none; }
.crane-head { position: absolute; inset: 0 auto auto 0; width: 82px; height: 36px; background: var(--red); border: 4px solid var(--ink); }
.crane-head::before { content: ""; position: absolute; left: -900px; right: 78px; top: 9px; height: 13px; background: var(--red); border-block: 4px solid var(--ink); }
.cable { position: absolute; top: 34px; left: 38px; width: 6px; height: 78px; background: var(--ink); }
.cargo-box { position: absolute; top: 106px; left: 10px; width: 63px; height: 54px; display: grid; place-items: center; color: #fff; background: var(--blue); border: 4px solid var(--ink); box-shadow: inset 0 -10px rgba(0,0,0,.12); font-size: 1.5rem; transition: transform .24s ease; }
.cargo-box.dropping { transform: translateY(245px) rotate(3deg); }
.measure-lines { position: absolute; z-index: 1; left: 8px; right: 8px; top: 214px; height: 235px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.measure-lines i { display: block; height: 1px; border-top: 2px dashed rgba(23,43,53,.28); color: var(--ink); font: 700 .7rem monospace; }
.tower-grid { position: absolute; z-index: 3; left: 38px; right: 20px; bottom: 58px; height: 275px; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(4px, 1.5vw, 18px); align-items: end; }
.tower-lane { height: 100%; display: grid; grid-template-rows: 1fr auto auto; min-width: 0; position: relative; }
.block-stack { align-self: end; display: flex; min-height: 20px; flex-direction: column-reverse; align-items: stretch; justify-content: flex-start; padding-inline: clamp(2px, 1vw, 12px); }
.graph-block { height: 42px; display: grid; place-items: center; margin-top: -3px; color: #fff; background: var(--lane-color); border: 4px solid var(--ink); box-shadow: inset 0 -8px rgba(0,0,0,.12); font-size: 1.1rem; font-weight: 900; animation: blockLand .32s cubic-bezier(.2,.9,.3,1.4); }
.tower-lane.near-miss .block-stack { transform-origin: bottom; animation: sway .5s ease-in-out 2; }
.lane-base { min-height: 54px; display: grid; place-items: center; padding: 5px 2px; color: #fff; background: var(--lane-color); border: 4px solid var(--ink); font-size: clamp(.75rem, 2vw, 1rem); font-weight: 900; text-align: center; }
.stability { min-height: 35px; padding: 5px 1px; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-top: 0; text-align: center; font-size: .72rem; font-weight: 900; }
.stability b { letter-spacing: .04em; }
.stability[data-danger="true"] { color: #fff; background: var(--red); }
.quay { position: absolute; z-index: 2; left: 0; right: 0; bottom: 45px; height: 44px; background: var(--paper-dark); border-block: 5px solid var(--ink); }
.quay::after { content: ""; position: absolute; inset: 11px 0; background: repeating-linear-gradient(90deg, var(--ink) 0 24px, transparent 24px 47px); }
.sea { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: var(--sea); }
.sea i { position: absolute; width: 55px; border-top: 4px solid #b6e6dc; }
.sea i:nth-child(1) { left: 10%; top: 13px; }.sea i:nth-child(2) { left: 51%; top: 25px; }.sea i:nth-child(3) { right: 7%; top: 10px; }

.control-deck { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 9px; margin-top: 12px; }
.control-deck button { min-height: 58px; border: 4px solid var(--ink); cursor: pointer; touch-action: manipulation; font-weight: 900; }
.move-button { color: var(--paper); background: var(--blue); }
.move-button span { font-size: .8rem; }
.drop-button { color: var(--ink); background: var(--yellow); font-size: 1.05rem; }
.utility-button { color: var(--paper); background: var(--teal); }
.utility-button small { display: block; }
.utility-button[aria-pressed="true"] { color: var(--ink); background: var(--orange); box-shadow: inset 0 0 0 4px var(--paper); }
.utility-button.repair { background: var(--red); }
.utility-button:nth-of-type(4) { grid-column: 1 / 2; }
.utility-button:nth-of-type(5) { grid-column: 2 / 4; }
.control-deck button:disabled { opacity: .45; cursor: not-allowed; }

.data-table-wrap { margin-top: 22px; padding: 16px; background: #fffaf0; border: 4px solid var(--ink); }
.data-table-wrap h2 { margin: 0; font-size: 1.2rem; }
.data-table-wrap p { margin: 5px 0 12px; }
.data-table-wrap table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.data-table-wrap th, .data-table-wrap td { padding: 9px 3px; border: 3px solid var(--ink); text-align: center; overflow-wrap: anywhere; }
.data-table-wrap th { color: #fff; background: var(--cell-color); }
.data-table-wrap td { font: 900 1.2rem Consolas, monospace; background: var(--paper); }

.quiz-screen { min-height: 650px; padding: clamp(30px, 7vw, 90px) clamp(16px, 10vw, 150px); background: #eadab9; }
.quiz-kicker { color: var(--blue); font-weight: 900; }
.quiz-screen h2 { margin: 4px 0; font-size: clamp(1.7rem, 5vw, 3.1rem); }
.quiz-question { margin: 28px 0; padding: 20px; background: var(--paper); border: 4px solid var(--ink); font-size: clamp(1.1rem, 3vw, 1.55rem); font-weight: 900; box-shadow: 7px 7px 0 var(--ink); }
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-choices button { min-width: 0; min-height: 62px; padding: 11px; background: #fffaf0; border: 4px solid var(--ink); font-weight: 900; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.quiz-choices button[data-result="correct"] { background: #b9e2bf; box-shadow: inset 0 0 0 4px #24733d; }
.quiz-choices button[data-result="wrong"] { background: #f5c3b5; text-decoration: line-through 3px; }
.quiz-explanation { margin: 18px 0; padding: 16px; background: #fff; border-left: 9px solid var(--teal); line-height: 1.8; }

.result-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; min-height: 650px; padding: clamp(20px, 5vw, 58px); background: #7bc5c5; }
.result-poster, .ranking-panel { align-self: start; padding: clamp(18px, 4vw, 34px); background: var(--paper); border: 5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.result-poster h2 { margin: 16px 0; font-size: clamp(1.7rem, 4vw, 2.8rem); }
.result-score { margin: 18px 0; padding: 14px; color: var(--paper); background: var(--ink); }
.result-score span, .result-score strong { display: block; }
.result-score strong { color: var(--yellow); font: 900 clamp(2.4rem, 7vw, 4.8rem)/1 Consolas, monospace; }
.result-facts { display: grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--ink); }
.result-facts div { padding: 9px; border: 1px solid var(--ink); }
.result-facts dt { font-size: .75rem; }.result-facts dd { margin: 0; font-weight: 900; }
.ranking-panel { max-width: 100%; overflow-x: auto; }
.ranking-panel .itc-ranking__tabs button { color: var(--ink); background: #fff; }
.ranking-panel .itc-ranking__tabs button[aria-pressed="true"] { color: #fff; background: var(--blue); }

@keyframes blockLand { from { transform: translateY(-80px) rotate(6deg); opacity: .4; } to { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes sway { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes flagWarn { from { transform: skewY(-5deg); } to { transform: skewY(7deg); } }

@media (max-width: 760px) {
  .shell { border-inline-width: 0; }
  .masthead { grid-template-columns: 52px 1fr auto; min-height: 92px; gap: 10px; padding: 12px 10px; }
  .brand-mark { width: 50px; height: 50px; }.brand-mark span { left: 5px; }.brand-mark i { right: 1px; }
  .eyebrow { display: none; }.masthead h1 { font-size: 1.1rem; }.square-button { min-width: 58px; min-height: 46px; font-size: .75rem; }
  .start-screen { grid-template-columns: 1fr; }.poster-scene { min-height: 390px; border-right: 0; border-bottom: 6px solid var(--ink); }
  .paper-sun { width: 90px; height: 90px; top: 30px; left: 25px; }.poster-crane { top: 48px; height: 230px; }.poster-crane::after { height: 110px; }.poster-crane b { top: 115px; }
  .poster-bars { bottom: 75px; height: 190px; }.captain { transform: scale(.72); transform-origin: left bottom; bottom: 50px; }.paper-sea { height: 100px; }
  .start-copy { padding: 28px 18px 42px; }.start-points li { grid-template-columns: 6.5em 1fr; }
  .game-screen { padding-inline: 7px; }.dock-hud { grid-template-columns: 1fr 1fr; }.dock-hud div:nth-child(2) { border-right: 0; }.dock-hud div:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
  .manifest-strip { grid-template-columns: 1fr; }.wind-notice { width: 100%; }.harbor { min-height: 480px; }
  .tower-grid { left: 22px; right: 7px; gap: 3px; height: 250px; }.graph-block { height: 39px; }.lane-base { font-size: .7rem; }.stability { font-size: .62rem; }
  .measure-lines { top: 195px; height: 215px; }.crane { top: 64px; }
  .control-deck { grid-template-columns: 1fr 1.2fr 1fr; gap: 5px; }.control-deck button { min-height: 60px; padding: 6px 3px; font-size: .78rem; }.move-button span { display: none; }
  .utility-button:nth-of-type(4) { grid-column: 1 / 2; }.utility-button:nth-of-type(5) { grid-column: 2 / 4; }
  .data-table-wrap { padding: 10px 5px; }.data-table-wrap th { font-size: .7rem; }
  .quiz-screen { min-height: 700px; padding: 30px 12px 50px; }.quiz-choices { grid-template-columns: 1fr; }.quiz-choices button { width: 100%; }
  .result-screen { grid-template-columns: 1fr; padding: 20px 10px 45px; }.result-poster, .ranking-panel { box-shadow: 5px 5px 0 var(--ink); }
}

@media (max-width: 390px) {
  .masthead h1 { font-size: .92rem; }.brand-mark { display: none; }.masthead { grid-template-columns: 1fr auto; }
  .harbor { min-height: 455px; }.tower-grid { height: 230px; }.graph-block { height: 36px; }
  .sky-label { max-width: 65%; font-size: .78rem; }.wind-flag { transform: scale(.8); transform-origin: right top; }
}

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