:root { color-scheme: light; --ink: #173d46; --paper: #fff9e9; --orange: #ed8549; }
* { box-sizing: border-box; }
body { margin: 0; background: #dbeae4; color: var(--ink); font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: radial-gradient(#173d4610 1px, transparent 1px); background-size: 12px 12px; }
[hidden] { display: none !important; }
.app-shell { width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 16px 36px; }
.masthead { margin-bottom: 18px; }
.eyebrow { margin: 0 0 8px; font: 800 .64rem/1.5 ui-monospace, "Courier New", monospace; letter-spacing: .12em; }
.masthead h1 { max-width: 450px; margin: 0 0 18px; font-size: clamp(2.3rem, 9.5vw, 3.2rem); font-weight: 950; line-height: .99; letter-spacing: -.055em; text-transform: uppercase; }
.harbor-vignette { position: relative; height: 83px; overflow: hidden; border-bottom: 4px solid var(--ink); background: linear-gradient(transparent 56%, #77b9bd 56% 68%, #278b95 68%); }
.pixel-dock { position: absolute; bottom: 17px; left: 0; width: 154px; height: 17px; border-block: 4px solid var(--ink); background: repeating-linear-gradient(90deg, #c69b67 0 18px, #775d43 18px 22px); box-shadow: 0 7px 0 #173d4640; }
.pixel-pole { position: absolute; bottom: 17px; left: 18px; width: 10px; height: 56px; background: #876c4e; border: 2px solid var(--ink); }
.pixel-pole::after { content: ""; position: absolute; top: 10px; left: -5px; width: 16px; height: 21px; border: 3px solid var(--ink); background: linear-gradient(#fff9e9 50%, #dc684a 50% 72%, #fff9e9 72%); }
.pixel-cabinet { position: absolute; bottom: 34px; left: 46px; width: 33px; height: 29px; border: 3px solid var(--ink); background: linear-gradient(90deg, #e3d7b9 45%, var(--ink) 45% 55%, #e3d7b9 55%); }
.pixel-float { position: absolute; bottom: 36px; left: 89px; width: 22px; height: 22px; border: 6px solid #ed86b0; outline: 2px solid #944d76; border-radius: 50%; }
.pixel-boat { position: absolute; bottom: 11px; right: 11%; width: 91px; height: 45px; }
.pixel-hull { position: absolute; bottom: 0; width: 91px; height: 23px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 45%, 88% 45%, 88% 70%, 76% 70%, 76% 100%, 13% 100%, 13% 75%, 0 75%); }
.pixel-hull::after { content: ""; position: absolute; inset: 4px 4px 7px; background: var(--orange); }
.pixel-cabin { position: absolute; bottom: 21px; left: 26px; width: 34px; height: 24px; border: 4px solid var(--ink); background: linear-gradient(90deg, var(--paper) 48%, #80bbc1 48%); }
.safety-sign { position: relative; padding: 25px 12px 22px; border: 3px solid #171e1c; background: #ffd400; color: #171e1c; text-align: center; box-shadow: 4px 4px 0 var(--ink); }
.safety-sign::before, .safety-sign::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(135deg, #171e1c 0 8px, #ffd400 8px 16px); }
.safety-sign::before { top: 0; } .safety-sign::after { bottom: 0; }
.safety-sign h2 { max-width: 320px; margin: 0 auto 10px; font-family: "Arial Narrow", Impact, system-ui, sans-serif; font-size: 1.1rem; line-height: 1.2; font-weight: 900; letter-spacing: .04em; }
.safety-clock { margin: 0; font: 900 clamp(2.2rem, 10vw, 3.5rem)/1.15 ui-monospace, "Courier New", monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.safety-empty { margin: 12px auto; max-width: 260px; font-size: 1.25rem; font-weight: 850; line-height: 1.25; }
.incident-count { margin: 8px 0 0; font-size: .78rem; font-weight: 750; }
.rank-result { margin: 18px 0 0; padding: 13px; border: 2px solid #316c4c; background: #edf3d8; color: #214831; font-weight: 800; }
.departure { margin: 24px 0 18px; text-align: center; }
.instructions { margin: 0; font-size: .87rem; font-weight: 650; }
.story-note { margin: 8px 0 14px; color: #526c72; font-size: .76rem; }
.ui-button { min-height: 44px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 0; font: inherit; font-size: .93rem; line-height: 1.35; font-weight: 750; cursor: pointer; color: var(--ink); touch-action: manipulation; }
.primary-button { display: block; width: 100%; min-height: 56px; border-width: 3px; background: var(--orange); box-shadow: 4px 4px 0 var(--ink); font-size: 1.1rem; font-weight: 850; }
.ui-button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.ui-button:disabled { cursor: wait; opacity: .65; }
.text-button { display: block; max-width: 100%; margin: 10px auto 0; border-color: transparent; padding-inline: 7px; background: transparent; color: #365961; font-size: .8rem; text-decoration: underline; text-underline-offset: 4px; }
.small-button { background: var(--paper); font-size: .8rem; }
.notice-error { margin: 16px 0; padding: 12px; border: 2px solid #9c4936; background: #fff0df; }
.notice-error p { margin: 0 0 9px; font-size: .85rem; }
.log-status { margin: 0 0 24px; font: .65rem/1.5 ui-monospace, monospace; color: #526c72; text-align: center; }
.clipboard { position: relative; margin-top: 24px; padding: 25px 16px 8px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 #a5b7aa; }
.clipboard::before { content: ""; position: absolute; top: -8px; left: calc(50% - 33px); width: 66px; height: 13px; border: 2px solid var(--ink); background: #a9b9af; }
.clipboard h2 { margin: 0 0 12px; font-size: 1.3rem; line-height: 1.15; font-weight: 850; letter-spacing: -.025em; }
.log-list { list-style: none; counter-reset: incidents; margin: 0; padding: 0; }
.log-list > li { position: relative; counter-increment: incidents; padding: 13px 0 13px 29px; border-top: 1px solid #cfd5c4; overflow-wrap: anywhere; }
.log-list > li::before { content: counter(incidents, decimal-leading-zero); position: absolute; top: 14px; left: 0; font: 700 .68rem/1.5 ui-monospace, monospace; color: #607273; }
.log-row-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.log-captain { min-width: 0; font-size: .83rem; line-height: 1.4; }
.log-time { flex-shrink: 0; white-space: nowrap; font: 800 .81rem/1.4 ui-monospace, monospace; }
.log-obstacle { margin: 3px 0 4px; color: #5a6e71; font-size: .71rem; }
.log-excuse { margin: 0; font-size: .78rem; line-height: 1.5; }
.log-list > .empty-log { padding: 15px 0; color: #526c72; font-size: .83rem; }
.log-list > .empty-log::before { content: none; }
.log-list > .highlight { animation: report-highlight 7s ease-out both; }
.screen-title { margin: 0 0 14px; font-size: 1.65rem; line-height: 1.15; letter-spacing: -.035em; }
.voyage-instruments { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0 10px; padding: 9px 12px; border: 2px solid var(--ink); background: var(--paper); }
.voyage-instruments .eyebrow { margin: 0; }
.voyage-timer { margin: 0; font: 850 1.5rem/1.2 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.canvas-frame { border: 3px solid var(--ink); box-shadow: 4px 4px 0 #a5b7aa; }
#sea { width: 100%; height: auto; touch-action: none; display: block; }
.steering-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.steer-button { min-height: 56px; border-width: 3px; background: #f7efce; box-shadow: 3px 3px 0 var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; font-size: 1rem; font-weight: 850; }
.steer-button.is-held { background: #ffd400; transform: translate(2px, 2px); box-shadow: none; }
.report-sheet { padding-bottom: 18px; }
.crash-reaction { display: flex; align-items: center; justify-content: center; gap: 24px; height: 136px; margin: 12px 0; pointer-events: none; user-select: none; }
.reaction-character { flex: 0 0 128px; width: 128px; height: 128px; background: url("./crash-reaction.png") 100% 0 / 200% 100% no-repeat; transform: rotate(-7deg); }
.reaction-shout { margin: 0; color: #bf502b; font: 1000 3.4rem/.85 ui-monospace, monospace; letter-spacing: -.09em; transform: rotate(5deg); }
.crash-reaction.is-reacting .reaction-character { animation: reaction-bounce .8s steps(4, end) both, reaction-talk .225s step-end 4 forwards; }
.crash-summary { margin: 16px 0; padding: 12px; border-left: 4px solid var(--orange); background: #f2e9d3; font-weight: 750; }
.field-label { display: block; margin: 20px 0 7px; font-size: .83rem; font-weight: 800; }
.report-field { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 10px; border: 2px solid var(--ink); border-radius: 0; background: #fffdf7; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; }
.field-hint { margin: 6px 0 0; color: #526c72; font-size: .69rem; }
.report-sheet .primary-button { margin-top: 24px; }
.page-footer { margin-top: 30px; color: #526c72; text-align: center; font: 700 .6rem/1.5 ui-monospace, monospace; letter-spacing: .08em; }
.ui-button:focus-visible, .report-field:focus-visible, .screen-title:focus-visible { outline: 3px solid #076d87; outline-offset: 4px; }
@media (hover: hover) { .primary-button:hover:not(:disabled) { background: #f6a165; } .text-button:hover:not(:disabled) { color: #112e36; } }
@media (max-width: 380px) { .app-shell { padding-inline: 14px; } .clipboard { padding-inline: 12px; } .log-row-heading { gap: 7px; } .log-time { font-size: .76rem; } }
@keyframes report-highlight { 0%, 25% { background: #ffe775; } 100% { background: transparent; } }
@keyframes reaction-bounce { 0% { transform: translateY(12px) rotate(-12deg) scale(.8); } 35% { transform: translateY(-5px) rotate(3deg) scale(1.08); } 70% { transform: translateY(3px) rotate(-10deg); } 100% { transform: rotate(-7deg); } }
@keyframes reaction-talk { 0% { background-position: 0 0; } 50%, 100% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .log-list > .highlight { animation: none; background: #ffe775; } .ui-button:active:not(:disabled) { transform: none; } .crash-reaction.is-reacting .reaction-character { animation: none; transform: none; } }