:root { color-scheme: light; font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; color: #19233d; background: #fff8ec; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: linear-gradient(#dff3ff 0 180px, #fff8ec 180px); } button, a { font: inherit; } button { cursor: pointer; } button:focus-visible, a:focus-visible { outline: 4px solid #19233d; outline-offset: 3px; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 20; background: #fff; color: #19233d; padding: 12px; border-radius: 12px; } .skip-link:focus { top: 12px; }
.game-header { position: sticky; top: 0; z-index: 15; background: #19233d; color: #fff; } .game-header__inner { min-height: 58px; max-width: 1120px; margin: auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; } .game-header__inner strong { margin-right: auto; } .home-link { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; font-weight: 800; } .quiet-button { min-height: 44px; border: 2px solid #fff; background: transparent; color: #fff; border-radius: 12px; padding: 7px 14px; font-weight: 800; }
.game-main { max-width: 1120px; margin: 0 auto; padding: clamp(16px, 3vw, 34px) 16px 46px; } .welcome-card, .game-shell, .completion-card { background: #fff; border: 3px solid #19233d; box-shadow: 8px 8px 0 #ffd54a; border-radius: 24px; padding: clamp(18px, 3vw, 34px); } .welcome-card, .completion-card { max-width: 720px; margin: 25px auto; text-align: center; } h1, h2, p { margin-top: 0; } h1 { font-size: clamp(1.65rem, 5vw, 2.7rem); line-height: 1.08; } h2 { font-size: clamp(1.1rem, 3.5vw, 1.45rem); } .eyebrow { color: #6e4e00; font-size: .8rem; font-weight: 900; letter-spacing: .08em; } .gentle-note { font-size: .92rem; }
.welcome-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .primary-button, .secondary-button, .tool-button, .exchange-button, .choice-button { min-height: 48px; border: 2px solid #19233d; border-radius: 14px; padding: 10px 16px; font-weight: 850; color: #19233d; text-decoration: none; text-align: center; } .primary-button { background: #2457db; color: #fff; } .secondary-button, .tool-button { background: #fff; } .exchange-button { background: #ffd54a; } button:disabled { cursor: not-allowed; opacity: .52; background: #e6e7eb; }
.task-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; } .prompt { max-width: 690px; font-size: clamp(1.08rem, 3vw, 1.35rem); font-weight: 750; line-height: 1.35; } .target-card { flex: 0 0 145px; text-align: center; background: #ffd54a; border: 3px solid #19233d; border-radius: 18px; padding: 12px; } .target-card span { display: block; font-weight: 800; } .target-card strong { display: block; font-size: 3rem; line-height: 1; }
.harbour-scene { position: relative; height: 92px; margin: 10px 0 14px; overflow: hidden; border: 3px solid #19233d; border-radius: 18px; background: linear-gradient(#dff3ff 0 58%, #51a9d5 58%); } .lighthouse { position: absolute; left: 8%; bottom: 30px; width: 24px; height: 44px; background: repeating-linear-gradient(0deg, #fff 0 7px, #ef6e57 7px 14px); border: 2px solid #19233d; } .lighthouse::before { content: ""; position: absolute; top: -12px; left: -5px; width: 30px; height: 12px; border: 2px solid #19233d; background: #ffd54a; border-radius: 50% 50% 0 0; } .boat { position: absolute; left: calc(22% + (var(--boat, 0) * 6%)); bottom: 20px; width: 86px; height: 28px; background: #ef6e57; border: 2px solid #19233d; border-radius: 0 0 45% 45%; } .boat::before { content: ""; position: absolute; width: 2px; height: 41px; background: #19233d; left: 40px; bottom: 25px; } .boat i { display: inline-block; width: 13px; height: 13px; margin: 5px 2px; background: #ffd54a; border: 1px solid #19233d; } .water-line { position: absolute; left: 0; right: 0; bottom: 11px; height: 4px; background: repeating-linear-gradient(90deg, #dff3ff 0 22px, transparent 22px 31px); } .harbour-scene[data-tens="0"] .boat { left: 22%; } .harbour-scene[data-tens="1"] .boat { left: 29%; } .harbour-scene[data-tens="2"] .boat { left: 36%; } .harbour-scene[data-tens="3"] .boat { left: 43%; } .harbour-scene[data-tens="4"] .boat { left: 50%; } .harbour-scene[data-tens="5"] .boat { left: 57%; } .harbour-scene[data-tens="6"] .boat { left: 64%; } .harbour-scene[data-tens="7"] .boat { left: 69%; } .harbour-scene[data-tens="8"] .boat { left: 74%; } .harbour-scene[data-tens="9"] .boat { left: 79%; }
.status-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; margin: 18px 0; background: #e7f5ff; border-radius: 15px; border: 2px solid #4d7c98; } .status-strip p { margin: 0; font-weight: 800; } #live-count { position: relative; }
.bays { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .bays.assist-view .bay { box-shadow: 0 0 0 5px #2457db; } .bays.assist-view::before { content: "Compare both bays: each ten bundle has exactly 10 parcels."; grid-column: 1 / -1; padding: 9px 12px; border: 2px solid #2457db; background: #e7f5ff; border-radius: 12px; font-weight: 850; } .bay { min-width: 0; border: 3px solid #19233d; border-radius: 20px; padding: 14px; background: #fff; } .tens-bay { background: #e3f4e9; } .ones-bay { background: #fff1d4; } .bay header { display: flex; align-items: center; gap: 10px; border-bottom: 2px dashed #526178; padding-bottom: 10px; } .bay header h2, .bay header p { margin: 0; } .bay header p { font-weight: 750; } .bay-icon { display: grid; place-items: center; flex: 0 0 43px; height: 43px; color: #fff; background: #19233d; border-radius: 50%; font-weight: 900; }
.bundles, .singles { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 9px; min-height: 158px; padding-top: 14px; } .bundle { width: min(100%, 150px); background: #257567; border: 2px solid #173d3a; border-radius: 12px; padding: 7px; color: #fff; } .bundle-title { font-size: .76rem; font-weight: 900; display: block; margin-bottom: 5px; } .unit-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; } .unit { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; font-size: .55rem; font-weight: 900; background: #e3f4e9; color: #173d3a; border-radius: 2px; } .single { display: grid; place-items: center; width: 34px; height: 34px; background: #f68d3b; color: #19233d; border: 2px solid #8a3c12; border-radius: 7px; font-size: .68rem; font-weight: 900; }
.controls-card, .explanation-card, .exchange-card, .hint-card, .retry-card { margin-top: 18px; padding: 16px; border: 2px solid #19233d; border-radius: 18px; background: #f7fbff; } .controls-card h2, .controls-card p, .explanation-card h2, .exchange-card h2, .exchange-card p { margin-bottom: 8px; } .control-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; } .control-grid button { font-size: .88rem; } .choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .choice-button { background: #fff; text-align: left; } .choice-button[data-selected="true"] { background: #e7f5ff; box-shadow: inset 0 0 0 3px #2457db; } .retry-support { padding: 10px 12px; border: 2px solid #4d7c98; border-radius: 12px; background: #e7f5ff; font-weight: 800; } .hint-units { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 410px; padding: 7px; background: #257567; } .hint-units span { display: grid; place-items: center; min-height: 26px; background: #e3f4e9; font-weight: 900; font-size: .75rem; } .mini-bays { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; border: 2px dashed #526178; } .mini-bays > div { min-height: 50px; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; } .mini-bays .bundle { width: 120px; } .mini-bays .single { width: 27px; height: 27px; font-size: .55rem; }
.feedback { min-height: 1.5em; margin: 16px 0; font-weight: 850; font-size: 1.02rem; } .feedback[data-kind="error"] { color: #8b2f16; } .feedback[data-kind="success"] { color: #145a46; } .next-button { float: right; } .game-shell::after { content: ""; display: table; clear: both; }
.learning-note { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; } .learning-note section { background: #fff; border: 2px solid #19233d; border-radius: 16px; padding: 14px; } .learning-note h2 { font-size: 1rem; } .learning-note p { margin-bottom: 0; font-size: .92rem; }
dialog { max-width: min(550px, calc(100% - 28px)); border: 3px solid #19233d; border-radius: 24px; padding: 0; color: #19233d; } dialog::backdrop { background: rgb(25 35 61 / .7); } .dialog-card { padding: 26px; text-align: center; background: #fff8ec; } .practice-bundle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 16px auto; max-width: 430px; background: #257567; padding: 9px; border: 2px solid #173d3a; border-radius: 14px; } .practice-bundle span { display: grid; place-items: center; aspect-ratio: 1; background: #e3f4e9; color: #173d3a; font-weight: 900; border-radius: 4px; } details { margin: 18px 0; text-align: left; } summary { display: list-item; min-height: 44px; margin-left: 1.2rem; padding: 10px 4px; cursor: pointer; font-weight: 850; }
.noscript { padding: 16px; margin: 16px auto; max-width: 720px; background: #fff; border: 2px solid #19233d; }
@media (max-width: 700px) { .game-main { padding-inline: 12px; } .game-header__inner { gap: 8px; padding-inline: 12px; } .game-header__inner strong { display: none; } .task-header { display: block; } .target-card { max-width: 170px; margin: 12px auto 0; } .status-strip { grid-template-columns: 1fr; } .bays { gap: 12px; } .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choice-list { grid-template-columns: 1fr; } .learning-note { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .bays { grid-template-columns: 1fr; } .bundles, .singles { min-height: 80px; } .welcome-card, .game-shell, .completion-card { border-radius: 18px; padding: 16px; box-shadow: 5px 5px 0 #ffd54a; } }
@media (max-height: 600px) and (orientation: landscape) { .game-header__inner { min-height: 52px; padding-block: 4px; } .game-main { padding-block: 6px 22px; } .welcome-card { display: grid; grid-template: "eyebrow actions" auto "title actions" auto "copy actions" auto "note actions" auto / minmax(0, 1fr) minmax(190px, auto); align-items: center; gap: 4px 14px; margin: 4px auto; padding: 10px 14px; text-align: left; } .welcome-card .eyebrow { grid-area: eyebrow; margin: 0; } .welcome-card h1 { grid-area: title; margin: 0; } .welcome-card > p:nth-of-type(2) { grid-area: copy; margin: 0; } .welcome-card > p:last-child { grid-area: note; margin: 0; } .welcome-card .welcome-actions { grid-area: actions; flex-direction: column; } .learning-note { grid-template-columns: repeat(3, 1fr); } .harbour-scene { height: 62px; } .bay { padding: 10px; } .bundles, .singles { min-height: 70px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }