:root {
  color-scheme: light;
  --ink: #173d3d;
  --muted: #5d7471;
  --teal: #178678;
  --teal-dark: #0d5b54;
  --coral: #ef704e;
  --coral-dark: #aa3d2b;
  --gold: #f4bb45;
  --paper: #fffdf7;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 1100px; min-height: 700px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: #dcefeb; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #075f86; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.quest { position: relative; height: 100%; min-height: 700px; overflow: hidden; isolation: isolate; background: #cde9e5; }
.world-art, .world-wash { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; }
.world-art { object-fit: cover; filter: saturate(.86); }
.world-wash { z-index: -2; background: linear-gradient(90deg,rgba(226,245,241,.74),rgba(255,250,231,.57) 30% 72%,rgba(226,245,241,.72)), linear-gradient(rgba(229,247,244,.25),rgba(227,239,230,.58)); backdrop-filter: blur(1px); }

.quest-hud { position: absolute; z-index: 10; top: 24px; left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.mission-chip, .practice-stats { border: 1px solid rgba(21,78,72,.12); background: rgba(255,253,247,.9); box-shadow: 0 9px 28px rgba(34,75,68,.12); backdrop-filter: blur(12px); }
.mission-chip { min-width: 178px; display: grid; gap: 3px; padding: 11px 16px; border-radius: 16px; }
.mission-chip span, .practice-stats span, .target-ticket span { color: var(--teal-dark); font-size: 10px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.mission-chip strong { font-size: 15px; }
.mission-dots { position: absolute; left: 50%; display: flex; gap: 8px; transform: translateX(-50%); }
.mission-dots i { width: 12px; height: 12px; border: 2px solid rgba(23,61,61,.32); border-radius: 50%; background: rgba(255,255,255,.65); transition: transform 150ms ease-out, background 150ms ease-out; }
.mission-dots i.is-done { border-color: var(--teal); background: var(--teal); }
.mission-dots i.is-current { transform: scale(1.25); border-color: var(--coral-dark); background: var(--coral); }
.practice-stats { display: flex; align-items: stretch; padding: 7px; border-radius: 17px; }
.practice-stats > div { min-width: 70px; display: grid; place-content: center; padding: 5px 12px; text-align: center; }
.practice-stats > div + div { border-left: 1px solid #d7e2dc; }
.practice-stats strong { display: block; font-size: 20px; line-height: 1; }
.challenge-stat { width: 154px; }
.challenge-stat i { display: block; width: 126px; height: 7px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #dce9e4; }
.challenge-stat i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--coral)); transition: width 180ms ease-out; }

.game-card { position: absolute; z-index: 2; top: 96px; bottom: 28px; left: 50%; width: min(900px, calc(100% - 370px)); min-width: 760px; padding: 26px 34px 30px; border: 1px solid rgba(209,226,218,.95); border-radius: 32px; background: rgba(255,253,247,.94); box-shadow: 0 25px 70px rgba(30,76,68,.17), 0 3px 0 rgba(255,255,255,.7) inset; transform: translateX(-50%); backdrop-filter: blur(16px); }
.mission-copy { text-align: center; }
.phase-label { display: inline-block; margin-bottom: 6px; color: var(--coral-dark); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(29px,2.7vw,39px); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.mission-copy p { margin: 7px 0 0; color: var(--muted); font-size: 14px; font-weight: 650; }
.play-row { height: calc(100% - 77px); display: grid; grid-template-columns: minmax(370px,1.05fr) minmax(260px,.8fr); align-items: center; gap: 29px; }

.clock-shell { position: relative; min-width: 0; }
.clock { display: block; width: min(100%,440px); margin: 0 auto; overflow: visible; touch-action: none; filter: drop-shadow(0 13px 15px rgba(40,65,56,.12)); }
.clock-shadow { fill: #b67a3b; opacity: .28; }
.clock-rim { fill: #f1b846; stroke: #875226; stroke-width: 8; }
.clock-face { fill: #fffaf0; stroke: #fff2d7; stroke-width: 11; }
.tick { stroke: #76928c; stroke-width: 3; stroke-linecap: round; }
.tick.major { stroke: #335c58; stroke-width: 7; }
.numerals text { fill: var(--ink); font-size: 31px; font-weight: 900; text-anchor: middle; dominant-baseline: middle; }
.clock-hand { transform-origin: 260px 260px; transition: transform 150ms ease-out, filter 150ms ease-out; cursor: grab; }
.clock-hand:active { cursor: grabbing; }
.clock-hand line { stroke-linecap: round; }
.hour-hand line { stroke: var(--teal); stroke-width: 28; }
.minute-hand line { stroke: var(--coral); stroke-width: 20; }
.hand-grip { fill: rgba(255,255,255,.01); stroke: rgba(255,255,255,.01); stroke-width: 12; }
.clock-pin { fill: #f2bd48; stroke: #80512c; stroke-width: 7; }
.clock-pin-glint { fill: #fff4bc; }
.clock-shell.is-locked .clock-hand { cursor: default; filter: drop-shadow(0 0 8px rgba(244,187,69,.9)); }
.clock-shell.highlight-hour .hour-hand { animation: handPulse 520ms ease-out 2; filter: drop-shadow(0 0 9px rgba(23,134,120,.7)); }
.clock-shell.highlight-minute .minute-hand { animation: handPulse 520ms ease-out 2; filter: drop-shadow(0 0 9px rgba(239,112,78,.75)); }
.clock-shell.is-miss { animation: gentleShake 320ms ease-out; }
.clock-shell.is-chiming .clock { animation: clockChime 640ms cubic-bezier(.2,.85,.25,1.2); }
.hand-key { display: flex; justify-content: center; gap: 18px; margin-top: -7px; color: var(--muted); font-size: 11px; font-weight: 850; }
.hand-key span { display: flex; align-items: center; gap: 6px; }
.hand-key i { width: 11px; height: 11px; border-radius: 50%; }
.hour-dot { background: var(--teal); }.minute-dot { background: var(--coral); }

.decision-panel { min-height: 360px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.target-ticket { padding: 15px 17px; border: 2px dashed #dba94b; border-radius: 17px; background: #fff5d8; text-align: center; }
.target-ticket strong { display: block; margin: 2px 0; font-size: 36px; letter-spacing: -.03em; }
.target-ticket small { color: #795326; font-size: 12px; font-weight: 800; }
.choice-area, .explain-area { display: grid; gap: 10px; }
.time-choice, .explain-choice, .next-button, .ring-button, #practiceButton { min-height: 57px; border: 2px solid #c4d4ce; border-radius: 15px; background: white; box-shadow: 0 5px 0 #d9e2de; font-weight: 950; transition: transform 140ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out; }
.time-choice { font-size: 24px; letter-spacing: .02em; }
.time-choice:hover, .explain-choice:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 7px 0 #cee0da; }
.time-choice:active, .explain-choice:active, .next-button:active, .ring-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #cbd9d4; }
.explain-choice { min-height: 54px; padding: 8px 12px; font-size: 13px; line-height: 1.25; }
.set-controls { display: grid; gap: 10px; }
.stepper { display: grid; gap: 6px; }
.stepper > span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.stepper > div { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; overflow: hidden; border: 1px solid #c8d7d1; border-radius: 14px; background: white; }
.stepper button { width: 48px; height: 48px; border: 0; background: #edf7f3; color: var(--teal-dark); font-size: 25px; font-weight: 900; }
.stepper strong { text-align: center; font-size: 21px; }
.ring-button, .next-button, #practiceButton { border-color: var(--teal-dark); color: white; background: var(--teal); box-shadow: 0 6px 0 var(--teal-dark); }
.ring-button { margin-top: 3px; }
.next-button { width: 100%; }
.feedback { min-height: 38px; margin: 0; display: grid; place-items: center; color: var(--teal-dark); font-size: 13px; font-weight: 850; line-height: 1.3; text-align: center; }
.feedback.is-error { color: var(--coral-dark); }

.mascot { position: absolute; z-index: 4; left: max(18px,calc(50% - 690px)); bottom: 35px; width: 205px; pointer-events: none; transform-origin: 50% 100%; }
.sticker-art, .friend-sticker, .finale-sticker { overflow: hidden; padding: 7px; border: 1px solid rgba(29,74,68,.1); border-radius: 27px; background: #fffdf7; box-shadow: 0 13px 32px rgba(31,66,60,.18); }
.sticker-art img, .friend-sticker img, .finale-sticker img { display: block; width: 100%; border-radius: 20px; }
.mascot p { position: absolute; z-index: 2; top: -46px; left: 130px; width: 157px; margin: 0; padding: 11px 13px; border-radius: 16px 16px 16px 5px; background: rgba(255,255,255,.96); box-shadow: 0 10px 25px rgba(32,72,64,.14); color: var(--teal-dark); font-size: 12px; font-weight: 850; line-height: 1.3; }
.mascot.is-happy { animation: mascotPop 620ms cubic-bezier(.2,.85,.25,1.2); }
.mascot.is-miss { animation: mascotNudge 340ms ease-out; }
.friend-sticker { position: absolute; z-index: 1; right: max(20px,calc(50% - 690px)); bottom: 46px; width: 155px; opacity: .76; transform: rotate(3deg); pointer-events: none; }

.bell-burst { position: absolute; z-index: 3; left: 50%; top: 48%; pointer-events: none; }
.bell-burst i { position: absolute; width: 13px; height: 13px; opacity: 0; border-radius: 4px; background: var(--gold); }
.clock-shell.is-chiming .bell-burst i { animation: burst 700ms ease-out both; }
.bell-burst i:nth-child(1){--x:-190px;--y:-110px}.bell-burst i:nth-child(2){--x:175px;--y:-130px;animation-delay:50ms}.bell-burst i:nth-child(3){--x:205px;--y:30px;animation-delay:100ms}.bell-burst i:nth-child(4){--x:-205px;--y:55px;animation-delay:140ms}.bell-burst i:nth-child(5){--x:110px;--y:155px;animation-delay:180ms}.bell-burst i:nth-child(6){--x:-105px;--y:160px;animation-delay:220ms}

.finale { position: absolute; z-index: 20; left: 50%; top: 50%; width: min(560px,calc(100% - 80px)); padding: 26px 34px 30px; border: 1px solid #e1d7bd; border-radius: 30px; background: rgba(255,253,247,.98); box-shadow: 0 30px 90px rgba(27,66,59,.28); transform: translate(-50%,-50%); text-align: center; }
.finale-sticker { width: 155px; margin: -104px auto 16px; }
.finale > span { color: var(--coral-dark); font-size: 11px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.finale h1 { margin-top: 7px; }.finale p { max-width: 440px; margin: 10px auto 18px; color: var(--muted); line-height: 1.5; }
#practiceButton { min-width: 240px; padding: 0 24px; }
.toast { position: absolute; z-index: 30; left: 50%; bottom: 25px; max-width: 72%; padding: 10px 17px; opacity: 0; transform: translate(-50%,10px); border-radius: 999px; color: white; background: var(--ink); pointer-events: none; font-size: 12px; font-weight: 900; transition: opacity 150ms ease-out, transform 150ms ease-out; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes gentleShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px) rotate(-.25deg)} 65%{transform:translateX(6px) rotate(.2deg)} }
@keyframes handPulse { 50%{transform:var(--hand-angle) scale(1.06)} }
@keyframes clockChime { 0%,100%{transform:rotate(0) scale(1)} 28%{transform:rotate(-2deg) scale(1.035)} 58%{transform:rotate(2deg) scale(1.02)} }
@keyframes mascotPop { 0%,100%{transform:translateY(0) rotate(0)} 35%{transform:translateY(-18px) rotate(-3deg)} 65%{transform:translateY(0) rotate(2deg)} }
@keyframes mascotNudge { 35%{transform:rotate(-4deg)} 70%{transform:rotate(3deg)} }
@keyframes burst { 0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)} 20%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(290deg) scale(1.2)} }

@media (max-width: 1240px) {
  .game-card { width: min(850px,calc(100% - 260px)); min-width: 760px; }
  .mascot { left: 14px; width: 130px; bottom: 30px; }
  .mascot p { left: 40px; top: -55px; width: 140px; border-radius: 16px 16px 5px 16px; }
  .friend-sticker { right: 12px; width: 115px; }
}
@media (max-height: 780px) {
  .game-card { top: 82px; bottom: 18px; padding-top: 18px; padding-bottom: 19px; }
  .quest-hud { top: 15px; }
  .clock { width: min(100%,390px); }
  .play-row { height: calc(100% - 65px); }
  .decision-panel { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}