:root {
  --violet: #49378a;
  --violet-deep: #2c215f;
  --violet-soft: #7564bf;
  --sky: #89dcf4;
  --sky-light: #e4faff;
  --sun: #ffd44d;
  --orange: #ff8a4c;
  --pink: #ff6f9f;
  --mint: #68d6b0;
  --cream: #fff9e8;
  --paper: #fffdf5;
  --ink: #332850;
  --shadow: 0 20px 50px rgba(44, 33, 95, .2);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #dff7ff;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 16%, rgba(255,255,255,.95) 0 3px, transparent 4px) 0 0 / 42px 42px,
    linear-gradient(155deg, #dff9ff 0%, #b7ebf7 54%, #f4e8ff 100%);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  overscroll-behavior: none;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; touch-action: manipulation; }

.topbar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 7px max(18px, env(safe-area-inset-right)) 7px max(18px, env(safe-area-inset-left));
  color: #fff;
  background: var(--violet-deep);
  border-bottom: 4px solid var(--sun);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font: 900 .74rem/1.1 Arial, sans-serif;
  letter-spacing: .13em;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 0 #bf9b28;
  font-size: 1.22rem;
}

.sound-button {
  min-height: 36px;
  padding: 6px 13px;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.27);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}

.sound-button[aria-pressed="true"] { color: var(--sun); background: rgba(255,212,77,.15); }

.page-shell {
  display: grid;
  grid-template-columns: minmax(330px, 480px) minmax(380px, 500px);
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 6vw, 84px);
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 35px;
}

.intro { position: relative; padding: 2px 0; }
.eyebrow { margin: 0 0 8px; color: var(--pink); font: 1000 .72rem/1 Arial, sans-serif; letter-spacing: .17em; }

h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--violet-deep);
  font-size: clamp(3rem, 5.3vw, 5.3rem);
  font-weight: 1000;
  line-height: .98;
  letter-spacing: -.08em;
  text-wrap: balance;
  filter: drop-shadow(0 4px 0 #fff);
}

h1 em { display: inline-block; margin-top: 7px; color: var(--pink); font-style: normal; font-size: .73em; letter-spacing: -.07em; }
.lead { position: relative; z-index: 2; margin: 17px 0 18px; font-size: clamp(.95rem, 1.8vw, 1.16rem); font-weight: 800; line-height: 1.7; }

.hero-clock {
  position: absolute;
  z-index: 0;
  right: -32px;
  top: 55px;
  width: 190px;
  height: 210px;
  transform: rotate(8deg);
  opacity: .92;
}

.hero-face {
  position: absolute;
  left: 20px;
  top: 33px;
  width: 150px;
  height: 150px;
  background: #fffdf5;
  border: 13px solid var(--violet);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px #d9eff5, 0 8px 0 rgba(44,33,95,.2);
}

.hero-face::before { content: "12\A 9　　　3\A 6"; white-space: pre; position: absolute; inset: 10px; color: var(--violet); font: 900 1rem/3.15 Arial; text-align: center; }
.hero-face i { position: absolute; left: calc(50% - 4px); bottom: 50%; width: 8px; border-radius: 99px; transform-origin: 50% 100%; }
.hero-hour { height: 38px; background: var(--violet-deep); transform: rotate(305deg); }
.hero-minute { height: 51px; background: var(--pink); transform: rotate(65deg); }
.hero-face b { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; background: var(--sun); border: 4px solid var(--violet-deep); border-radius: 50%; transform: translate(-50%,-50%); }
.hero-bell { position: absolute; top: 15px; width: 62px; height: 35px; background: var(--orange); border: 7px solid var(--violet); border-radius: 70px 70px 16px 16px; }
.hero-bell.left { left: 9px; transform: rotate(-24deg); }
.hero-bell.right { right: 9px; transform: rotate(24deg); }
.hero-foot { position: absolute; bottom: 12px; width: 13px; height: 41px; background: var(--violet); border-radius: 8px; }
.hero-foot.left { left: 47px; transform: rotate(25deg); }.hero-foot.right { right: 47px; transform: rotate(-25deg); }
.hero-spark { position: absolute; color: var(--sun); font-size: 1.4rem; filter: drop-shadow(0 2px 0 #fff); }
.hero-spark.one { left: -12px; top: 85px; }.hero-spark.two { right: -6px; top: 4px; }.hero-spark.three { right: 2px; bottom: 18px; color: var(--pink); font-size: .8rem; }

.feature-list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 420px; margin: 0; padding: 0; list-style: none; }
.feature-list li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; background: rgba(255,255,255,.75); border: 2px solid rgba(73,55,138,.1); border-radius: 14px; box-shadow: 0 6px 16px rgba(62,51,100,.07); }
.feature-list b { color: var(--pink); font: 1000 1.45rem/1 Arial, sans-serif; }
.feature-list span { font-size: .64rem; font-weight: 850; line-height: 1.35; }
.save-note { margin: 13px 0 0; color: #6f6590; font-size: .68rem; font-weight: 700; }

.game-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  min-height: 630px;
  background: var(--paper);
  border: 4px solid var(--violet-deep);
  border-radius: 28px;
  box-shadow: var(--shadow), 0 7px 0 var(--violet-deep);
  isolation: isolate;
}

.sky-decor { position: absolute; z-index: 0; inset: 0 0 auto; height: 210px; overflow: hidden; color: rgba(255,255,255,.8); pointer-events: none; }
.cloud { position: absolute; font-size: 1.35rem; letter-spacing: -.55em; filter: blur(.2px); opacity: .8; }
.cloud-a { left: 21px; top: 98px; }.cloud-b { right: 30px; top: 133px; transform: scale(.8); }
.star { position: absolute; color: rgba(255,255,255,.72); }.star-a { right: 43px; top: 80px; }.star-b { left: 45px; top: 158px; font-size: .7rem; }.star-c { right: 120px; top: 113px; color: rgba(255,225,102,.82); font-size: .7rem; }

.status-bar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  min-height: 49px;
  padding: 7px 10px 6px;
  color: #fff;
  background: var(--violet-deep);
  text-align: center;
}
.status-bar div { border-right: 1px dashed rgba(255,255,255,.22); }.status-bar div:last-child { border: 0; }
.status-bar small { display: block; color: #cfc6ff; font-size: .58rem; font-weight: 800; }.status-bar strong { display: block; margin-top: 1px; font: 900 .87rem/1.1 Arial, "Yu Gothic", sans-serif; }.status-bar div:nth-child(3) strong { color: var(--sun); }

.playfield {
  position: relative;
  z-index: 1;
  min-height: 530px;
  padding: 10px 14px 9px;
  background: linear-gradient(180deg, #79d7f0 0 165px, #dff9f6 165px 100%);
  transition: background .3s;
}

.game-card[data-theme="moon"] .playfield { background: linear-gradient(180deg, #776dc5 0 165px, #f0eaff 165px 100%); }
.game-card[data-theme="forest"] .playfield { background: linear-gradient(180deg, #65c990 0 165px, #e7fae6 165px 100%); }
.game-card[data-theme="desert"] .playfield { background: linear-gradient(180deg, #f6b05e 0 165px, #fff0ce 165px 100%); }
.game-card[data-theme="port"] .playfield { background: linear-gradient(180deg, #5199cf 0 165px, #d9f2ff 165px 100%); }
.game-card[data-theme="castle"] .playfield { background: linear-gradient(180deg, #9b68c5 0 165px, #f4e4ff 165px 100%); }

.island-ribbon { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 8px; color: #fff; background: rgba(44,33,95,.78); border-radius: 11px; box-shadow: 0 4px 0 rgba(44,33,95,.18); backdrop-filter: blur(3px); }
.island-ribbon > span { font-size: 1.35rem; }.island-ribbon div { min-width: 0; }.island-ribbon small { display: block; color: #d7d0ff; font: 900 .5rem/1 Arial; letter-spacing: .12em; }.island-ribbon b { display: block; margin-top: 2px; font-size: .75rem; white-space: nowrap; }
.island-ribbon button { margin-left: auto; width: 32px; height: 30px; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; font-weight: 900; cursor: pointer; }

.mission-card { position: relative; z-index: 3; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 7px; min-height: 67px; margin-top: 8px; padding: 6px 10px 7px; background: rgba(255,255,255,.94); border: 3px solid var(--violet-deep); border-radius: 16px; box-shadow: 0 5px 0 rgba(44,33,95,.16); }
.mission-card::before { content: ""; position: absolute; left: 45px; bottom: -10px; width: 16px; height: 16px; background: #fff; border-right: 3px solid var(--violet-deep); border-bottom: 3px solid var(--violet-deep); transform: rotate(45deg); }
.mascot { position: relative; z-index: 2; font-size: 2.75rem; line-height: 1; text-align: center; filter: drop-shadow(0 3px 0 rgba(44,33,95,.12)); transform-origin: 50% 100%; }.mascot.talk { animation: mascotTalk .55s ease; }
.mission-card small { color: var(--pink); font-size: .57rem; font-weight: 1000; }.mission-card h2 { margin: 1px 0 0; color: var(--violet-deep); font-size: 1.25rem; line-height: 1.15; letter-spacing: -.04em; }.mission-card p { margin: 2px 0 0; color: #756d8e; font-size: .61rem; font-weight: 750; }

.clock-zone { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 224px 1fr; align-items: center; gap: 6px; width: 100%; margin: 7px auto 0; }
.clock {
  position: relative;
  width: 224px;
  height: 224px;
  margin: 0 auto;
  touch-action: none;
  outline: none;
  user-select: none;
}
.clock:focus-visible .clock-face { box-shadow: 0 0 0 5px var(--sun), 0 8px 0 rgba(44,33,95,.23); }
.clock-face { position: absolute; z-index: 2; inset: 10px; background: var(--paper); border: 11px solid var(--violet-deep); border-radius: 50%; box-shadow: inset 0 0 0 4px #d9edf3, 0 7px 0 rgba(44,33,95,.23); cursor: grab; }
.clock.is-dragging .clock-face { cursor: grabbing; }
.clock-face::after { content: ""; position: absolute; inset: 25px; border: 2px dashed #d4caeb; border-radius: 50%; pointer-events: none; }

.num { position: absolute; z-index: 4; display: grid; width: 25px; height: 25px; place-items: center; color: var(--violet-deep); font: 1000 .9rem/1 Arial, sans-serif; transform: translate(-50%,-50%); pointer-events: none; }
.n12 { left: 50%; top: 11%; }.n1 { left: 70%; top: 17%; }.n2 { left: 84%; top: 31%; }.n3 { left: 89%; top: 50%; }.n4 { left: 84%; top: 69%; }.n5 { left: 70%; top: 83%; }.n6 { left: 50%; top: 89%; }.n7 { left: 30%; top: 83%; }.n8 { left: 16%; top: 69%; }.n9 { left: 11%; top: 50%; }.n10 { left: 16%; top: 31%; }.n11 { left: 30%; top: 17%; }
.tick { position: absolute; z-index: 3; left: calc(50% - 2px); top: 3px; width: 4px; height: 10px; background: var(--violet-soft); border-radius: 3px; transform-origin: 2px 86px; }
.t0 { transform: rotate(0); }.t1 { transform: rotate(30deg); }.t2 { transform: rotate(60deg); }.t3 { transform: rotate(90deg); }.t4 { transform: rotate(120deg); }.t5 { transform: rotate(150deg); }.t6 { transform: rotate(180deg); }.t7 { transform: rotate(210deg); }.t8 { transform: rotate(240deg); }.t9 { transform: rotate(270deg); }.t10 { transform: rotate(300deg); }.t11 { transform: rotate(330deg); }
.hand { position: absolute; z-index: 7; left: 50%; bottom: 50%; border-radius: 99px 99px 4px 4px; transform-origin: 50% 100%; pointer-events: none; transition: transform .16s cubic-bezier(.2,.8,.3,1); }
.hour-hand { width: 11px; height: 51px; margin-left: -5.5px; background: var(--violet-deep); box-shadow: 2px 1px 0 rgba(255,255,255,.7); }
.minute-hand { width: 8px; height: 70px; margin-left: -4px; background: var(--pink); box-shadow: 2px 1px 0 rgba(255,255,255,.7); }
.minute-hand i { position: absolute; left: 50%; top: -7px; width: 18px; height: 18px; background: var(--pink); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--violet-deep); transform: translateX(-50%); }
.clock-pin { position: absolute; z-index: 9; left: 50%; top: 50%; width: 20px; height: 20px; background: var(--sun); border: 5px solid var(--violet-deep); border-radius: 50%; box-shadow: 0 2px 0 rgba(44,33,95,.2); transform: translate(-50%,-50%); pointer-events: none; }
.drag-hint { position: absolute; z-index: 1; left: 50%; bottom: 34px; padding: 2px 7px; color: #968cab; background: #f4eefb; border-radius: 99px; font-size: .49rem; font-weight: 900; transform: translateX(-50%); pointer-events: none; transition: opacity .2s; }.clock.has-moved .drag-hint { opacity: 0; }
.clock-ear { position: absolute; z-index: 1; top: 0; width: 68px; height: 39px; background: var(--orange); border: 8px solid var(--violet-deep); border-radius: 70px 70px 14px 14px; }.clock-ear.left { left: 3px; transform: rotate(-27deg); }.clock-ear.right { right: 3px; transform: rotate(27deg); }
.clock-leg { position: absolute; z-index: 1; bottom: -2px; width: 13px; height: 34px; background: var(--violet-deep); border-radius: 8px; }.clock-leg.left { left: 46px; transform: rotate(25deg); }.clock-leg.right { right: 46px; transform: rotate(-25deg); }

.clock-step { display: grid; width: 55px; min-height: 69px; padding: 5px 2px; place-items: center; color: var(--violet-deep); background: #fff; border: 3px solid var(--violet-deep); border-radius: 16px; box-shadow: 0 4px 0 var(--violet-deep); cursor: pointer; }.clock-step span { display: block; color: var(--pink); font: 1000 1.45rem/1 Arial; }.clock-step small { font-size: .52rem; font-weight: 900; }.clock-step.minus { justify-self: end; }.clock-step.plus { justify-self: start; }.clock-step:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--violet-deep); }

.time-controls { position: relative; z-index: 4; display: grid; grid-template-columns: 82px 1fr 82px; align-items: center; gap: 7px; width: min(340px, 100%); margin: -1px auto 0; }
.time-controls button { display: flex; align-items: baseline; justify-content: center; gap: 2px; min-height: 36px; padding: 4px; color: var(--violet); background: #fff; border: 2px solid #9f92cf; border-radius: 11px; box-shadow: 0 3px 0 #9f92cf; font-weight: 1000; cursor: pointer; }.time-controls button span { font-size: .96rem; }.time-controls button small { font-size: .52rem; }.time-controls button:active { transform: translateY(2px); box-shadow: 0 1px 0 #9f92cf; }
.time-controls output { padding: 3px 8px; color: #fff; background: var(--violet-deep); border: 3px solid #fff; border-radius: 10px; box-shadow: 0 3px 0 rgba(44,33,95,.25); font: 1000 1.22rem/1.2 Arial, sans-serif; letter-spacing: .03em; text-align: center; }

.action-row { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1.7fr; gap: 8px; width: min(355px, 100%); margin: 7px auto 0; }
.action-row button { min-height: 41px; border-radius: 12px; font-size: .78rem; font-weight: 1000; cursor: pointer; }
.hint-button { color: var(--violet); background: #fff9d7; border: 2px solid #d3ac2f; box-shadow: 0 3px 0 #d3ac2f; }.check-button { color: #fff; background: var(--pink); border: 2px solid #bc3a69; box-shadow: 0 4px 0 #bc3a69; animation: checkPulse 1.6s ease-in-out infinite; }.action-row button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(44,33,95,.45); }
.hint-text { min-height: 14px; margin: 5px 0 0; color: var(--violet); font-size: .62rem; font-weight: 850; text-align: center; }

.feedback { position: absolute; z-index: 18; left: 50%; top: 245px; min-width: 200px; padding: 11px 18px; color: #fff; background: var(--mint); border: 4px solid #fff; border-radius: 999px; box-shadow: 0 8px 22px rgba(44,33,95,.27); font-size: 1rem; font-weight: 1000; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%,8px) scale(.75); }.feedback.show { animation: feedbackPop .9s ease; }.feedback.bad { background: var(--orange); }
.confetti { position: absolute; z-index: 17; inset: 0; overflow: hidden; pointer-events: none; }.confetti i { position: absolute; top: 39%; width: 8px; height: 15px; background: var(--sun); border-radius: 2px; animation: confetti 1s ease-out forwards; }.confetti i:nth-child(3n) { background: var(--pink); }.confetti i:nth-child(3n+1) { background: var(--mint); }

.game-nav { position: relative; z-index: 5; display: grid; grid-template-columns: .8fr .9fr 1.4fr; min-height: 41px; background: var(--paper); border-top: 2px solid #ddd4ef; }.game-nav button { min-width: 0; padding: 4px 3px; color: #72678e; background: transparent; border: 0; border-right: 1px solid #e6e0f1; font-size: .61rem; font-weight: 850; cursor: pointer; }.game-nav button:last-child { border: 0; }

.screen { position: absolute; z-index: 30; inset: 49px 0 41px; display: grid; padding: 17px; place-items: center; background: rgba(36,26,78,.79); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }.screen.is-visible { opacity: 1; visibility: visible; }
.screen-card { width: min(402px, 100%); max-height: 100%; overflow-y: auto; padding: 21px 21px 19px; background: var(--paper); border: 4px solid var(--violet-deep); border-radius: 23px; box-shadow: 0 7px 0 var(--sun), 0 20px 42px rgba(22,14,60,.3); text-align: center; }
.screen-kicker { margin: 0 0 4px !important; color: var(--pink); font: 1000 .59rem/1 Arial, sans-serif !important; letter-spacing: .15em; }.screen h2 { margin: 4px 0 9px; color: var(--violet-deep); font-size: 1.72rem; line-height: 1.12; letter-spacing: -.05em; }.screen-card > p { margin: 0 0 12px; font-size: .76rem; font-weight: 700; line-height: 1.55; }
.start-mascot { position: relative; display: grid; width: 83px; height: 83px; margin: 0 auto 3px; place-items: center; background: #dff8ff; border: 4px solid var(--violet-deep); border-radius: 50%; box-shadow: 0 5px 0 #8ccad8; }.start-mascot span { font-size: 3.7rem; filter: drop-shadow(0 3px 0 rgba(44,33,95,.12)); }.start-mascot i { position: absolute; right: -8px; top: -4px; color: var(--sun); font-style: normal; font-size: 1.65rem; animation: starSpin 3s linear infinite; }
.start-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 11px 0 13px; }.start-chips span { padding: 6px 8px; color: var(--violet); background: #eee9ff; border-radius: 999px; font-size: .61rem; font-weight: 900; }
.screen-button { width: 100%; min-height: 47px; padding: 8px 12px; color: #fff; background: var(--pink); border: 2px solid #bd3a69; border-radius: 13px; box-shadow: 0 4px 0 #bd3a69; font-weight: 1000; cursor: pointer; }.screen-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #bd3a69; }
.text-button { margin-top: 10px; padding: 4px 8px; color: #756c8c; background: transparent; border: 0; font-size: .67rem; font-weight: 850; text-decoration: underline; cursor: pointer; }

.map-card { padding-right: 16px; padding-left: 16px; }.map-progress { color: var(--violet); background: #efeaff; border-radius: 99px; padding: 6px; font-size: .65rem !important; font-weight: 900 !important; }.island-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.island-button { position: relative; min-height: 91px; padding: 7px 4px; color: var(--violet-deep); background: #e8faff; border: 2px solid #8dcfe0; border-radius: 14px; box-shadow: 0 3px 0 #8dcfe0; cursor: pointer; }.island-button:nth-child(2) { background: #eee9ff; border-color: #a89be0; box-shadow: 0 3px 0 #a89be0; }.island-button:nth-child(3) { background: #e9fae6; border-color: #8bce8f; box-shadow: 0 3px 0 #8bce8f; }.island-button:nth-child(4) { background: #fff1cf; border-color: #e3b965; box-shadow: 0 3px 0 #e3b965; }.island-button:nth-child(5) { background: #e2f4ff; border-color: #86b9d9; box-shadow: 0 3px 0 #86b9d9; }.island-button:nth-child(6) { background: #f4e7ff; border-color: #bb93d7; box-shadow: 0 3px 0 #bb93d7; }.island-button:disabled { color: #9e99aa; background: #eee !important; border-color: #ccc !important; box-shadow: 0 3px 0 #ccc !important; cursor: default; filter: grayscale(1); }.island-button .island-emoji { display: block; font-size: 1.65rem; }.island-button b { display: block; margin-top: 3px; font-size: .62rem; line-height: 1.2; }.island-button small { display: block; margin-top: 4px; color: var(--pink); font-size: .55rem; font-weight: 1000; }.island-button .lock { position: absolute; right: 5px; top: 4px; font-size: .78rem; }

.help-clock { display: block; font-size: 2.8rem; }.help-card ol { display: grid; gap: 8px; margin: 9px 0; padding: 0; list-style: none; text-align: left; }.help-card li { display: grid; grid-template-columns: 27px 1fr; align-items: start; gap: 8px; font-size: .7rem; line-height: 1.5; }.help-card li > b { display: grid; width: 27px; height: 27px; place-items: center; color: #fff; background: var(--violet-soft); border-radius: 50%; }.help-card .tip { margin-top: 10px; padding: 8px; color: #665c7d; background: #fff5c8; border-radius: 9px; font-size: .58rem; }

.result-mascot { font-size: 4rem; line-height: 1; filter: drop-shadow(0 4px 0 rgba(44,33,95,.12)); animation: resultBounce 1.2s ease-in-out infinite; }.result-stars { margin: 7px 0; color: #d5cfdb; font-size: 2rem; letter-spacing: .12em; text-shadow: 0 2px 0 #968ca5; }.result-stars .earned { color: var(--sun); text-shadow: 0 2px 0 #b58717; }.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 8px 0 11px; }.result-stats div { padding: 8px; background: #eee9ff; border-radius: 10px; }.result-stats small { display: block; color: #776c91; font-size: .56rem; font-weight: 850; }.result-stats strong { display: block; color: var(--violet); font: 1000 1.25rem/1.2 Arial, sans-serif; }.result-card .text-button { margin: 8px 3px 0; }

footer { padding: 0 16px max(16px, env(safe-area-inset-bottom)); color: #716990; font: 900 .54rem/1 Arial, sans-serif; letter-spacing: .27em; text-align: center; }

@keyframes mascotTalk { 0%,100% { transform: rotate(0) translateY(0); } 28% { transform: rotate(-7deg) translateY(-7px); } 58% { transform: rotate(7deg) translateY(-3px); } }
@keyframes checkPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }
@keyframes feedbackPop { 0% { opacity: 0; transform: translate(-50%,12px) scale(.7); } 16%,72% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; transform: translate(-50%,-18px) scale(.9); } }
@keyframes confetti { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(480deg); } }
@keyframes starSpin { to { transform: rotate(360deg); } }
@keyframes resultBounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(3deg); } }

@media (max-width: 840px) {
  .page-shell { display: block; width: min(520px, calc(100% - 22px)); padding: 19px 0 34px; }
  .intro { padding: 0 8px 18px; text-align: center; }
  .intro h1 { font-size: clamp(2.65rem, 12vw, 4.7rem); }.intro .lead { margin: 12px 0 0; }.hero-clock, .feature-list, .save-note { display: none; }
  .game-card { margin: 0 auto; }
}

@media (max-width: 520px) {
  .topbar { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
  .page-shell { width: 100%; padding: 13px 0 0; }
  .intro { padding: 0 15px 13px; }.intro .eyebrow { font-size: .58rem; }.intro h1 { font-size: clamp(2.28rem, 11vw, 3.35rem); }.intro h1 em { margin-top: 4px; }.intro .lead { display: none; }
  .game-card { max-width: none; min-height: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -5px 22px rgba(44,33,95,.15); }
  .playfield { min-height: 530px; }.clock-zone { grid-template-columns: 1fr min(56vw, 224px) 1fr; }.clock { width: min(56vw, 224px); height: min(56vw, 224px); }.clock-face { inset: 4.5%; }.tick { transform-origin: 2px calc((min(56vw, 224px) * .455) - 10px); }
  .clock-step { width: min(13vw, 55px); min-height: 64px; }.clock-step span { font-size: 1.28rem; }.clock-step small { font-size: .45rem; }
  .mission-card { grid-template-columns: 49px 1fr; min-height: 62px; }.mascot { font-size: 2.4rem; }.mission-card h2 { font-size: 1.12rem; }
  .screen { inset: 49px 0 41px; padding: 13px; }.screen-card { padding: 18px 16px 16px; }
  footer { display: none; }
}

@media (max-width: 370px) {
  .brand { font-size: .64rem; }.brand-mark { width: 31px; height: 31px; }.sound-button { padding: 5px 9px; font-size: .65rem; }
  .playfield { padding-right: 9px; padding-left: 9px; }.status-bar { padding-right: 6px; padding-left: 6px; }.clock-step { min-height: 58px; border-width: 2px; }.time-controls { grid-template-columns: 74px 1fr 74px; }.action-row { margin-top: 6px; }.island-grid { gap: 5px; }.island-button { min-height: 84px; }
}

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