:root {
  --ink: #33251d;
  --cream: #fff1c9;
  --paper: #f8dda0;
  --wood: #a9522d;
  --wood-dark: #6c301f;
  --gold: #f2b83d;
  --blue: #3c7992;
  --safe: #287c61;
  --danger: #a33232;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--ink);
  background: #edd194;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #271a18; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: #edd194; }
button, a { font: inherit; }
button { min-height: 46px; }
button:focus-visible, a:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
[hidden] { display: none !important; }

.site-mast {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 7px max(12px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left));
  color: #fff5d5; background: #33251d; border-bottom: 4px solid #d39337;
}
.home-link { color: inherit; font-size: .86rem; font-weight: 800; text-decoration: none; letter-spacing: .06em; }
.sound-button { min-height: 34px; padding: 4px 11px; color: #fff5d5; border: 2px solid #f0c66d; border-radius: 4px; background: #563628; cursor: pointer; }
main { width: 100%; }
.screen { min-height: calc(100vh - 52px); position: relative; overflow: hidden; }
.eyebrow { margin: 0 0 7px; color: #774324; font-weight: 900; letter-spacing: .13em; }

.start-screen { padding: 34px 18px 20px; background: #95cad1; isolation: isolate; }
.start-town { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #95cad1; }
.start-town::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -90px; height: 46%; border-radius: 50% 50% 0 0; background: #839958; border-top: 14px solid #708449; }
.roof { position: absolute; bottom: 10%; width: 180px; height: 150px; background: #e9bd72; border: 7px solid #713823; box-shadow: inset 0 0 0 7px #f5d694; }
.roof::before { content: ""; position: absolute; left: -16px; top: -62px; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 65px solid #9b3f2c; }
.roof-a { left: -35px; transform: scale(.78); }
.roof-b { right: -40px; transform: scale(.9); }
.roof-c { left: 65%; bottom: 4%; transform: scale(.55); }
.start-tower { position: absolute; left: 50%; bottom: 15%; width: 118px; height: 300px; transform: translateX(-50%); background: #df9a4e; border: 8px solid #6f3522; box-shadow: inset 0 0 0 7px #f0be69; }
.start-tower::before { content: ""; position: absolute; left: -26px; top: -77px; border-left: 77px solid transparent; border-right: 77px solid transparent; border-bottom: 80px solid #8f382c; }
.start-tower i { position: absolute; top: 28px; left: 18px; width: 66px; aspect-ratio: 1; border-radius: 50%; border: 7px solid #593422; background: #fff0bb; }
.start-tower i::before, .start-tower i::after { content: ""; position: absolute; left: 29px; bottom: 29px; width: 5px; height: 24px; transform-origin: 50% 100%; background: #553021; }
.start-tower i::after { transform: rotate(110deg); height: 20px; }
.start-tower b { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); color: #fff6d9; }
.cloud { position: absolute; top: 12%; width: 130px; height: 35px; border-radius: 40px; background: #e9f6ed; opacity: .9; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 8px; border-radius: 50%; background: inherit; }
.cloud::before { left: 20px; width: 50px; height: 50px; }.cloud::after { right: 16px; width: 64px; height: 64px; }
.cloud-a { left: 7%; }.cloud-b { right: 8%; top: 20%; transform: scale(.75); }
.title-sign { width: min(650px, 94vw); margin: 0 auto; padding: 28px clamp(18px, 5vw, 50px); text-align: center; background: #fff0c7; border: 8px solid #7d3e25; border-radius: 8px 8px 28px 28px; box-shadow: 0 9px 0 #4b2a1f, inset 0 0 0 5px #d6963e; }
.title-sign h1 { margin: 0 0 12px; font-size: clamp(2rem, 7vw, 4.2rem); line-height: 1.05; letter-spacing: -.05em; }
.title-sign h1 span { color: #a23b2d; }
.title-sign p:not(.eyebrow):not(.best-line) { line-height: 1.75; font-weight: 700; }
.start-button { padding: 13px 28px; color: #fff8db; font-weight: 900; border: 0; border-bottom: 6px solid #692c1c; border-radius: 7px; background: #a84829; cursor: pointer; }
.start-button:active { transform: translateY(3px); border-bottom-width: 3px; }
.best-line { margin: 13px 0 0; font-size: .9rem; }.best-line strong { font-size: 1.25rem; }
.how-strip { width: min(760px, 96vw); margin: 22px auto 0; display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.how-strip span { padding: 7px 11px; color: #fff4d3; font-weight: 800; background: #4d3529; border-radius: 4px; }
.how-strip b { display: inline-grid; width: 24px; height: 24px; place-items: center; margin-right: 4px; color: #36241a; border-radius: 50%; background: #f3c15a; }

.play-screen { padding-bottom: 24px; background: #f5dfaa; }
.workbench-hud { display: grid; grid-template-columns: 1.25fr .7fr 1fr; gap: 2px; color: #fff0c9; background: #4b2e25; border-bottom: 5px solid #b86b32; }
.workbench-hud > div { min-height: 64px; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; border-right: 2px solid #7c4930; }
.workbench-hud small { color: #e8c88c; font-size: .72rem; font-weight: 800; }.workbench-hud strong { font-size: clamp(.95rem, 3vw, 1.3rem); }
.score-board { text-align: center; }.stability-track { height: 11px; overflow: hidden; border: 2px solid #f5d48b; background: #2c211d; }
.stability-track i { display: block; width: 88%; height: 100%; background: #6fd08b; transition: width .3s ease, background .3s ease; }
.time-plan { position: relative; z-index: 3; width: min(780px, calc(100% - 18px)); margin: 9px auto; padding: 7px 10px; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 24px); background: #fff1c7; border: 4px solid #70402a; box-shadow: 0 4px 0 #b16b36; }
.time-plan small { display: block; color: #7b4b2f; font-size: .72rem; font-weight: 900; }.time-plan strong { font-size: clamp(1rem, 4vw, 1.45rem); }
.time-arrow { font-size: 1.5rem; font-weight: 900; }.remaining-badge { padding: 6px 10px; color: #fff; font-weight: 800; background: #2e7181; border: 3px solid #174654; transform: rotate(-1deg); }
.mini-clock { --minute-angle: 120deg; --hour-angle: 280deg; flex: 0 0 48px; width: 48px; height: 48px; position: relative; border: 4px solid #5e3826; border-radius: 50%; background: #fff9dd; }
.mini-clock::before { content: "12"; position: absolute; left: 50%; top: 1px; transform: translateX(-50%); font-size: 8px; font-weight: 900; }
.mini-clock i { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; background: #412a20; border-radius: 3px; }
.hour-hand { width: 4px; height: 13px; transform: translateX(-50%) rotate(var(--hour-angle)); }.minute-hand { width: 3px; height: 18px; transform: translateX(-50%) rotate(var(--minute-angle)); }.clock-pin { width: 7px; height: 7px !important; bottom: calc(50% - 3px) !important; border-radius: 50% !important; transform: translateX(-50%); }

.tower-world { --sky: #a7d4d5; position: relative; width: min(900px, 100%); height: 535px; margin: 0 auto; overflow: hidden; background: var(--sky); border-top: 7px solid #6c3b29; border-bottom: 9px solid #6c3b29; touch-action: pan-y; }
.tower-world.noon { --sky: #82c6ce; }.tower-world.sunset { --sky: #e4a161; }
.world-sun { position: absolute; right: 7%; top: 48px; width: 70px; height: 70px; border-radius: 50%; background: #ffe189; border: 5px solid #cf7d35; }
.town-backdrop { position: absolute; inset: auto 0 48px; height: 145px; display: flex; align-items: flex-end; justify-content: space-around; opacity: .72; }
.town-backdrop i { width: 16%; height: 65%; background: #c97a4b; border: 4px solid #79412b; }
.town-backdrop i:nth-child(2), .town-backdrop i:nth-child(4) { height: 95%; background: #e1aa65; }.town-backdrop i::before { content: ""; display: block; height: 24px; margin-top: -27px; background: #884134; clip-path: polygon(50% 0,100% 100%,0 100%); }
.wind-banner { position: absolute; left: 12px; top: 12px; z-index: 5; min-width: 150px; padding: 7px 11px; color: #fff8dc; border: 3px solid #4f3024; background: #3c7180; transform: rotate(-1deg); }
.wind-banner span { display: block; font-size: 1.15rem; font-weight: 900; }.wind-banner b { font-size: .78rem; }
.crane-rail { position: absolute; left: 6%; right: 6%; top: 45px; height: 17px; background: #6a3926; border: 4px solid #3e271d; }
.crane-rail i { position: absolute; left: 0; right: 0; top: 4px; border-top: 3px dashed #e3ac51; }
.crane { --crane-x: 50%; position: absolute; z-index: 8; left: var(--crane-x); top: 38px; width: 10px; height: 122px; transform: translateX(-50%); will-change: left; }
.crane .wheel { position: absolute; left: -10px; width: 30px; height: 24px; border-radius: 4px; background: #d58a34; border: 4px solid #4b2e23; }
.crane .rope { position: absolute; left: 3px; top: 22px; width: 4px; height: 69px; background: #4b3429; }
.crane-beam { position: absolute; left: 50%; top: 86px; height: 35px; display: grid; place-items: center; color: #fff6d9; font-weight: 900; border: 4px solid #51291c; background: #b75c32; transform: translateX(-50%); box-shadow: inset 0 -6px 0 rgba(80,35,23,.2); white-space: nowrap; }
.crane-beam.duration-5 { width: 178px; }.crane-beam.duration-10 { width: 147px; }.crane-beam.duration-15 { width: 119px; }.crane-beam.duration-20 { width: 100px; }
.tower-stack { --tower-tilt: 0deg; position: absolute; left: 50%; bottom: 45px; width: min(430px, 76vw); height: 355px; transform: translateX(-50%) rotate(var(--tower-tilt)); transform-origin: 50% 100%; transition: transform .32s ease; }
.tower-base { position: absolute; left: 6%; bottom: 0; width: 88%; height: 48px; display: grid; place-items: center; color: #ffe9b5; font-size: .75rem; font-weight: 900; background: #6d3926; border: 5px solid #41281f; clip-path: polygon(4% 0,96% 0,100% 100%,0 100%); }
.tower-beam { position: absolute; height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #fff3c3; font-weight: 900; border: 4px solid #54291c; background: #b55a32; box-shadow: inset 0 -7px 0 rgba(74,31,19,.23); transition: transform .35s ease; }
.tower-beam::before, .tower-beam::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f2c25c; border: 2px solid #6a361f; }
.tower-beam.risky { background: #98452f; }.tower-beam.newest { animation: settle .42s ease-out; }.tower-beam small { color: #ffe294; }
.safety-net { position: absolute; z-index: 2; left: 14%; right: 14%; bottom: 48px; height: 28px; color: #5b3c2b; text-align: center; font-size: .7rem; font-weight: 900; border: 4px dashed #8b5c35; background: rgba(248,219,143,.82); transform: rotate(-1deg); }
.street { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: #756557; border-top: 7px solid #e7b755; }.street span { position: absolute; top: 19px; width: 12%; height: 7px; background: #f7e8ad; }.street span:nth-child(1){left:8%}.street span:nth-child(2){left:44%}.street span:nth-child(3){right:8%}
.danger-callout { position: absolute; z-index: 12; left: 50%; top: 176px; width: min(360px, 88%); padding: 11px; color: #fff; text-align: center; font-weight: 900; background: #9c332b; border: 5px solid #ffdd81; transform: translateX(-50%) rotate(-1deg); }
.tower-world.danger .wind-banner { background: #9c332b; }.tower-world.impact .tower-stack { animation: wobble .45s ease; }.tower-world.release::after { content: "時刻ぴったり！"; position: absolute; z-index: 20; left: 50%; top: 42%; padding: 12px 22px; color: #55301e; font-size: clamp(1.3rem, 5vw, 2.3rem); font-weight: 1000; background: #ffdf63; border: 6px solid #7d4024; transform: translate(-50%,-50%) rotate(-2deg); animation: pop .7s ease both; }
.mission-hint { width: min(880px, calc(100% - 24px)); margin: 9px auto; color: #65402c; font-weight: 800; }

.beam-workbench { width: min(880px, calc(100% - 18px)); margin: 0 auto; padding: 11px; background: #5a3528; border: 5px solid #3a251e; box-shadow: inset 0 0 0 4px #895034; }
.beam-heading { display: flex; justify-content: space-between; gap: 8px; color: #fff0c4; }.beam-heading small { display: block; color: #e7b973; font-weight: 900; }.beam-heading strong { font-size: .95rem; }.combo-stamp { align-self: center; padding: 4px 8px; color: #4b2d20; font-weight: 900; background: #ffd26a; transform: rotate(2deg); }
.beam-rack { margin-top: 10px; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.beam-rack button { min-width: 0; padding: 8px 5px; color: #492b20; border: 4px solid #d99b4f; border-bottom-width: 8px; border-radius: 3px; background: #f1cd84; cursor: pointer; }
.beam-rack button b, .beam-rack button span { display: block; }.beam-rack button b { font-size: 1.15rem; }.beam-rack button span { font-size: .68rem; font-weight: 800; }.beam-rack button[aria-pressed="true"] { color: #fff6dc; border-color: #f2cc69; background: #a94e2f; transform: translateY(2px); }.beam-rack button[aria-pressed="true"]::after { content: "選択中"; display: block; font-size: .62rem; font-weight: 900; }.beam-rack button:disabled { opacity: .38; cursor: not-allowed; }
.preview-line { margin-top: 8px; padding: 7px 9px; color: #4a2e22; font-weight: 800; background: #f4d99b; border-left: 7px solid #e29b3e; }
.action-row { margin-top: 9px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }.drop-button, .brace-button { padding: 11px; color: #fff7d8; font-weight: 900; border: 0; border-bottom: 6px solid #58261b; border-radius: 4px; background: #b94e2e; cursor: pointer; }.drop-button kbd { margin-left: 5px; padding: 2px 5px; color: #4b2d22; border-radius: 3px; background: #ffe3a0; }.brace-button { color: #3d2a20; border-color: #77623b; background: #e1bb68; }.drop-button:disabled, .brace-button:disabled { opacity: .5; cursor: not-allowed; }
.status-message { min-height: 2.9em; margin: 9px 0 0; padding: 7px 9px; color: #fff0c9; border: 2px dashed #bb8351; }.status-message.success { color: #ffeb86; border-style: solid; }.status-message.warning { color: #ffd6c8; border-color: #f28b66; }
.mission-overlay { position: fixed; z-index: 50; inset: 52px 0 0; display: grid; place-content: center; justify-items: center; padding: 20px; text-align: center; background: rgba(43,28,22,.86); color: #fff1c2; }.mission-overlay h2 { margin: 4px 0; font-size: clamp(2rem,8vw,4rem); }.mission-overlay p { max-width: 560px; line-height: 1.7; }.mission-overlay button { padding: 12px 25px; color: #4b2c20; font-weight: 900; border: 5px solid #a25730; background: #ffdc77; cursor:pointer; }.bell-burst { font-size: 4rem; animation: bell .75s ease infinite alternate; }

.quiz-screen { padding: 32px max(14px, 4vw); text-align: center; background: #edd89e; }
.quiz-clock { width: 90px; height: 90px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 2.6rem; font-weight: 1000; border: 8px solid #633824; border-radius: 50%; background: #fff5d1; box-shadow: 0 6px 0 #ae6d35; }.quiz-screen h2 { margin: 5px 0; font-size: clamp(1.7rem, 6vw, 3rem); }.quiz-progress { font-weight: 900; color: #8c4a2c; }.quiz-question { max-width: 700px; margin: 20px auto; font-size: clamp(1.2rem, 4vw, 1.7rem); font-weight: 900; line-height: 1.55; }.quiz-choices { width: min(720px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.quiz-choices button { min-width: 0; padding: 12px 10px; color: #3f2a20; font-weight: 800; border: 4px solid #77432c; border-bottom-width: 7px; background: #fff0bd; cursor: pointer; overflow-wrap: anywhere; }.quiz-choices button[data-correct="true"] { border-color: #246c50; background: #cfe9bd; }.quiz-choices button[data-chosen="true"] { outline: 4px solid #a83f31; outline-offset: -7px; }.quiz-feedback { width: min(720px, 100%); margin: 18px auto 0; padding: 16px; text-align: left; line-height: 1.65; border: 5px solid #6b3b28; background: #fff5d5; }.quiz-feedback strong { font-size: 1.2rem; }.quiz-feedback button { display:block; margin-left:auto; padding: 9px 23px; font-weight:900; color:#fff7d8; border:0; border-bottom:5px solid #5b281b; background:#aa492d; cursor:pointer; }

.result-screen { padding: 34px max(14px, 4vw) 50px; text-align: center; background: #96c7c5; }.result-town { height: 190px; position: relative; max-width: 650px; margin: 0 auto 15px; border-bottom: 15px solid #6f573a; }.result-town i { position: absolute; bottom: 0; width: 25%; height: 42%; background:#d29a5b; border:5px solid #70402b; }.result-town i:nth-of-type(1){left:0}.result-town i:nth-of-type(2){right:0;height:55%}.result-town i:nth-of-type(3){left:14%;height:28%}.finished-tower { position:absolute; z-index:2; left:50%; bottom:0; width:135px; height:180px; display:grid; place-items:start center; padding-top:20px; color:#fff0a5; font-size:2.3rem; font-weight:900; background:#b65c34; border:8px solid #633422; transform:translateX(-50%); }.finished-tower::before { content:""; position:absolute; left:16px; top:65px; width:87px; height:87px; border-radius:50%; border:7px solid #633422; background:#fff1be; }.result-screen h2 { margin: 4px 0; font-size: clamp(2rem,7vw,4rem); }.final-score { display:inline-flex; flex-direction:column; min-width:230px; padding:12px 22px; color:#fff1c3; background:#4a3026; border:6px solid #d39442; transform:rotate(-1deg); }.final-score strong { font-size:2.5rem; }.result-ledger { width:min(720px,100%); margin:20px auto; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.result-ledger span { padding:9px 5px; color:#422b21; font-size:.83rem; font-weight:800; background:#f5df9f; border:3px solid #75442d; }.result-ledger b { display:block; font-size:1.3rem; }.result-message { max-width:700px; margin:18px auto; line-height:1.75; font-weight:700; }.result-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }.ranking-button { padding:12px 18px; color:#fff1ce; font-weight:900; border:4px solid #2f211c; background:#4e352b; cursor:pointer; }.ranking-panel { width:min(720px,100%); max-height:70vh; overflow:auto; margin:20px auto 0; padding:14px; color:#30231e; text-align:left; background:#fff2cb; border:6px solid #5c3728; scroll-margin:20px; }.ranking-panel .itc-leaderboard, .ranking-panel button { color:#30231e; }.ranking-panel button[aria-selected="true"], .ranking-panel .active { color:#fff8de; background:#78432e; }

@keyframes settle { 0% { transform: translateY(-95px) rotate(3deg); } 70% { transform: translateY(5px) rotate(-1deg); } 100% { transform: none; } }
@keyframes wobble { 0%,100%{transform:translateX(-50%) rotate(var(--tower-tilt))} 25%{transform:translateX(-50%) rotate(-5deg)} 70%{transform:translateX(-50%) rotate(4deg)} }
@keyframes pop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-4deg)} 60%{transform:translate(-50%,-50%) scale(1.12) rotate(2deg)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)} }
@keyframes bell { to { transform: rotate(9deg) scale(1.07); } }

@media (max-width: 620px) {
  .screen { min-height: calc(100vh - 48px); }
  .workbench-hud { grid-template-columns: 1.25fr .75fr; }.stability-board { grid-column: 1 / -1; min-height: 45px !important; }
  .time-plan { gap: 7px; }.time-plan .mini-clock { display:none; }.remaining-badge { font-size:.8rem; padding:5px; }.time-arrow { font-size:1rem; }
  .tower-world { height: 485px; }.crane-beam.duration-5 { width: 145px; }.crane-beam.duration-10 { width: 121px; }.crane-beam.duration-15 { width: 98px; }.crane-beam.duration-20 { width: 83px; }
  .tower-stack { width: 88vw; height: 320px; }.town-backdrop { height: 105px; }
  .beam-rack { grid-template-columns: repeat(2,minmax(0,1fr)); }.action-row { grid-template-columns: 1fr; }.drop-button { min-height:58px; }
  .quiz-choices { grid-template-columns: 1fr; }.quiz-choices button { width:100%; }
  .result-ledger { grid-template-columns:repeat(2,1fr); }
  .title-sign { border-width:6px; }.title-sign p br { display:none; }
}

@media (max-width: 380px) {
  .time-plan strong { font-size:.9rem; }.remaining-badge { max-width:65px; }.tower-world { height:455px; }.tower-stack { height:300px; }
  .beam-heading { align-items:flex-start; }.beam-heading strong { font-size:.8rem; }.combo-stamp { font-size:.75rem; }
}

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