:root {
  --ink: #294052;
  --muted: #6b7d8b;
  --sky: #8bdcff;
  --red: #ed4e4e;
  --red-deep: #c82f38;
  --white-flag: #fff;
  --blue: #2e9ed5;
  --yellow: #ffd65b;
  --green: #57c986;
  --panel: rgba(255,255,255,.94);
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; min-height:100%; margin:0; overflow:hidden; }
body {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100dvh;
  min-height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:linear-gradient(#86dcff 0 62%,#dff4a6 62%);
  color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic UI",sans-serif;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}
button { border:0; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.game-shell {
  --fit-scale: 1;
  position:relative;
  width:360px;
  height:640px;
  flex:0 0 auto;
  overflow:hidden;
  background:linear-gradient(#86dcff 0 62%,#dff4a6 62%);
  border:0;
  box-shadow:none;
  transform:scale(var(--fit-scale));
  transform-origin:50% 50%;
}
.sky { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sun { position:absolute; top:42px; right:28px; width:76px; height:76px; border-radius:50%; background:#ffe56d; box-shadow:0 0 0 14px rgba(255,229,109,.25); }
.cloud { position:absolute; width:96px; height:30px; border-radius:999px; background:rgba(255,255,255,.78); animation:cloud-drift 22s linear infinite; }
.cloud::before,.cloud::after { content:""; position:absolute; bottom:4px; border-radius:50%; background:inherit; }
.cloud::before { left:18px; width:40px; height:40px; }
.cloud::after { left:48px; width:52px; height:52px; }
.cloud-a { top:118px; left:-110px; }
.cloud-b { top:208px; left:-160px; scale:.72; animation-duration:31s; animation-delay:-12s; }
@keyframes cloud-drift { to { translate:570px 0; } }
.hill { position:absolute; bottom:-120px; width:390px; height:310px; border-radius:50% 50% 0 0; }
.hill-a { left:-190px; background:#a8dc76; transform:rotate(7deg); }
.hill-b { right:-215px; bottom:-138px; background:#8fce6a; transform:rotate(-8deg); }
.screen { position:absolute; inset:0; z-index:2; display:none; }
.screen.active { display:flex; }
.title-screen { flex-direction:column; padding:14px 16px 18px; }
.title-top { display:flex; justify-content:flex-end; gap:8px; min-height:40px; }
.home-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:auto;
  padding:0 10px;
  border:1px solid rgba(132,167,184,.55);
  border-radius:12px;
  background:rgba(255,255,255,.86);
  color:#587080;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(68,86,92,.1);
}
.home-button:active { translate:0 2px; box-shadow:0 2px 5px rgba(68,86,92,.1); }
.coin-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:78px;
  height:38px;
  padding:0 12px;
  border:2px solid rgba(196,139,42,.24);
  border-radius:999px;
  background:#fff4bf;
  color:#805713;
  font-weight:900;
  box-shadow:0 6px 14px rgba(68,86,92,.12);
}
.coin-image { display:block; width:18px; height:18px; flex:0 0 auto; object-fit:contain; }
.icon-button { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 6px 14px rgba(68,86,92,.12); }
.title-card {
  width:100%;
  margin:auto 0;
  padding:16px 18px 14px;
  text-align:center;
  border:3px solid rgba(255,255,255,.96);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,253,255,.91));
  box-shadow:0 18px 36px rgba(42,101,127,.18),0 0 0 2px rgba(48,155,204,.16) inset;
}
.title-logo { display:block; width:100%; height:84px; margin:0 auto 2px; object-fit:contain; transform-origin:50% 50%; }
.title-logo[hidden] { display:none; }
.title-character { height:238px; margin:-2px -10px -10px; }
.title-character img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 7px rgba(44,69,75,.18)); }
.title-copy { margin:0 0 11px; font-size:14px; font-weight:800; line-height:1.55; }
.start-button {
  width:100%;
  padding:14px 18px;
  border-radius:16px;
  background:linear-gradient(#ff6a65,#ed4148);
  color:#fff;
  font-size:21px;
  font-weight:1000;
  letter-spacing:.05em;
  box-shadow:0 6px 0 #bd3038,0 10px 20px rgba(195,48,56,.23);
}
.start-button:active { translate:0 4px; box-shadow:0 2px 0 #bd3038,0 5px 10px rgba(195,48,56,.2); }
.text-button {
  width:100%;
  margin-top:10px;
  padding:10px 14px;
  border:1px solid #c8dbe5;
  border-radius:12px;
  background:#eaf3f7;
  color:#587080;
  font-size:14px;
  font-weight:900;
  box-shadow:0 3px 0 #c8d9e2;
  text-decoration:none;
}
.text-button:active { translate:0 2px; box-shadow:0 1px 0 #c8d9e2; }
.best-record { margin:5px 0 0; color:var(--muted); font-size:12px; }
.title-tools {
  width:150px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:8px;
  margin:7px auto 0;
}
.title-tools .settings-gear { width:100%; min-width:0; }
.settings-gear {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:66px;
  height:30px;
  margin:0;
  padding:0 10px;
  border:1px solid rgba(132,167,184,.55);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#587080;
  box-shadow:0 4px 10px rgba(68,86,92,.1);
}
.shop-button { color:#7a5b14; background:#fff7d4; border-color:#e8cf7a; }
.settings-gear span { font-size:16px; }
.settings-gear small { font-size:10px; font-weight:900; }
.settings-gear:active { translate:0 2px; box-shadow:0 2px 5px rgba(68,86,92,.1); }
.play-screen { flex-direction:column; padding:10px 12px 12px; }
.game-header {
  display:grid;
  grid-template-columns:66px 1fr auto 34px;
  gap:6px;
  align-items:center;
}
.level-box,.score-box {
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.86);
  border-radius:14px;
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 14px rgba(56,103,123,.12);
}
.level-box { flex-direction:column; background:#fff1af; color:#875f14; }
.level-box span,.score-box span { font-size:9px; font-weight:900; letter-spacing:.06em; }
.level-box strong { font-size:24px; line-height:.9; }
.score-box { gap:6px; padding:0 9px; }
.score-box strong { color:var(--blue); font-size:16px; }
.game-header .coin-pill { min-width:65px; height:36px; padding:0 8px; font-size:13px; }
.game-header .icon-button { width:34px; height:34px; font-size:14px; }
.command-card {
  position:relative;
  z-index:4;
  margin-top:9px;
  padding:9px 12px 8px;
  border:3px solid rgba(255,255,255,.96);
  border-radius:20px;
  background:var(--panel);
  text-align:center;
  box-shadow:0 10px 22px rgba(51,105,128,.17),0 0 0 2px rgba(46,158,213,.14) inset;
}
.command-kicker { margin:0; color:var(--muted); font-size:10px; font-weight:900; }
.command-text {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:61px;
  padding:3px 0;
  color:#203a4c;
  font-size:clamp(21px,6.5vw,28px);
  font-weight:1000;
  line-height:1.16;
  letter-spacing:-.04em;
}
.timer-track { height:12px; overflow:hidden; border:2px solid #d7e7ef; border-radius:999px; background:#e8f0f4; }
.timer-fill { width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#55c985,#88dc68); transform-origin:0 50%; }
.timer-fill.danger { background:linear-gradient(90deg,#ffcf4f,#ef4c4c); }
.timer-seconds { margin-top:2px; color:var(--muted); font-size:10px; font-weight:900; }
.item-bar {
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin:8px 0 4px;
}
.item-use-button {
  --item-edge:#8faebb;
  min-width:0;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 9px;
  border:3px solid rgba(255,255,255,.96);
  border-radius:999px;
  color:#365267;
  background:rgba(255,255,255,.92);
  box-shadow:0 7px 0 var(--item-edge),0 11px 15px rgba(42,87,107,.17);
}
.item-use-button > span:last-child { min-width:0; display:grid; text-align:left; }
.item-use-button strong { overflow:hidden; font-size:13px; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; }
.item-use-button small { margin-top:4px; color:var(--muted); font-size:10px; font-weight:900; }
.item-icon { flex:0 0 auto; font-size:25px; }
.stop-item { --item-edge:#75b9d5; background:#eaf8ff; }
.skip-item { --item-edge:#d7b448; background:#fff5d5; }
.item-use-button:active:not(:disabled) { translate:0 5px; box-shadow:0 2px 0 var(--item-edge),0 5px 8px rgba(42,87,107,.13); }
.item-use-button:disabled { opacity:.5; cursor:not-allowed; filter:grayscale(.35); }
.item-notice {
  position:absolute;
  z-index:8;
  top:270px;
  left:50%;
  width:max-content;
  max-width:310px;
  padding:7px 13px;
  border:2px solid #fff;
  border-radius:999px;
  opacity:0;
  translate:-50% -6px;
  color:#fff;
  background:rgba(38,78,98,.91);
  font-size:12px;
  font-weight:1000;
  text-align:center;
  pointer-events:none;
}
.item-notice.show { animation:item-notice 1.3s ease-out both; }
@keyframes item-notice {
  0% { opacity:0; translate:-50% -10px; }
  15%,75% { opacity:1; translate:-50% 0; }
  100% { opacity:0; translate:-50% 5px; }
}
.character-stage { position:relative; flex:1; min-height:0; margin-top:-3px; }
.character-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:50% 100%;
  transform:translateY(-40px);
  pointer-events:none;
  filter:drop-shadow(0 10px 7px rgba(48,77,75,.18));
}
.flag-hit {
  position:absolute;
  z-index:3;
  bottom:24%;
  width:38%;
  height:72%;
  padding:0;
  border-radius:48%;
  background:transparent;
  transform:translateY(65px);
}
.flag-hit-red { left:0; }
.flag-hit-white { right:0; }
.flag-hit span {
  position:absolute;
  bottom:4px;
  left:50%;
  min-width:38px;
  padding:5px 8px;
  border-radius:999px;
  opacity:.82;
  translate:-50% 0;
  color:#fff;
  font-size:12px;
  font-weight:1000;
  box-shadow:0 4px 10px rgba(36,60,70,.15);
}
.flag-hit-red span { background:var(--red); }
.flag-hit-white span { color:#546673; background:#fff; border:1px solid #c9d5dc; }
.flag-hit:active { background:rgba(255,255,255,.12); }
.flag-hit.pressed::after {
  content:"";
  position:absolute;
  inset:22% 7% 5%;
  border:4px solid rgba(255,255,255,.7);
  border-radius:50%;
  animation:tap-ring .28s ease-out both;
}
@keyframes tap-ring { from { scale:.75; opacity:1; } to { scale:1.12; opacity:0; } }
.result-flash {
  position:absolute;
  z-index:5;
  top:22%;
  left:50%;
  opacity:0;
  translate:-50% 0;
  scale:.7;
  font-family:"M PLUS Rounded 1c","Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  font-size:54px;
  font-weight:900;
  text-shadow:0 4px #fff,0 8px 16px rgba(40,77,91,.2);
  white-space:pre-line;
  pointer-events:none;
}
.result-flash.show { animation:result-pop .52s ease-out both; }
.result-flash.ok {
  top:13%;
  color:#fff;
  text-shadow:0 3px 0 rgba(32,80,103,.32),0 8px 16px rgba(40,77,91,.22);
}
.result-flash.levelup { width:100%; color:#f29a28; font-size:35px; line-height:1.15; text-align:center; }
@keyframes result-pop { 0% { opacity:0; scale:.6; } 28%,72% { opacity:1; scale:1.06; } 100% { opacity:0; scale:1; } }
.tap-guide { position:relative; z-index:4; margin:0; color:#466171; font-size:11px; font-weight:900; text-align:center; }
.red-dot,.white-dot { display:inline-block; width:9px; height:9px; margin:0 6px; border-radius:50%; vertical-align:0; }
.red-dot { background:var(--red); }
.white-dot { background:#fff; border:1px solid #9fb2bd; }
.start-countdown {
  position:absolute;
  inset:0;
  z-index:15;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(33,68,85,.28);
  backdrop-filter:blur(2px);
  pointer-events:auto;
}
.start-countdown.show { display:flex; }
.start-countdown strong {
  display:flex;
  width:132px;
  height:132px;
  align-items:center;
  justify-content:center;
  border:6px solid rgba(255,255,255,.95);
  border-radius:50%;
  color:#fff;
  background:rgba(46,158,213,.92);
  font-family:"M PLUS Rounded 1c","Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  font-size:88px;
  font-weight:900;
  line-height:1;
  text-shadow:0 4px 0 rgba(32,80,103,.25);
  box-shadow:0 12px 28px rgba(31,73,93,.3);
}
.start-countdown strong.pop { animation:countdown-pop .8s ease-out both; }
@keyframes countdown-pop {
  0% { opacity:0; scale:.55; }
  20% { opacity:1; scale:1.08; }
  72% { opacity:1; scale:1; }
  100% { opacity:0; scale:.86; }
}
.overlay {
  position:absolute;
  inset:0;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(28,54,70,.55);
  backdrop-filter:blur(4px);
}
.overlay.open { display:flex; }
.modal-card {
  position:relative;
  width:100%;
  max-height:590px;
  overflow:auto;
  padding:23px 20px 19px;
  border:3px solid #fff;
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 55px rgba(22,48,62,.32);
}
.modal-card h2 { margin:0 0 14px; color:var(--blue); font-size:27px; text-align:center; }
.modal-close { position:absolute; top:8px; right:9px; width:34px; height:34px; border-radius:50%; background:#e8f1f5; font-size:23px; }
.modal-card ol { margin:0; padding-left:23px; font-size:14px; font-weight:700; line-height:1.65; }
.modal-card li + li { margin-top:8px; }
.example-box { display:grid; gap:4px; margin:15px 0; padding:12px; border-radius:13px; background:#fff4bf; text-align:center; }
.example-box strong { color:#ad3d3d; }
.example-box span { font-size:12px; font-weight:700; }
.primary-small { width:100%; padding:11px; border-radius:12px; background:var(--blue); color:#fff; font-weight:1000; }
.settings-card { display:grid; gap:15px; }
.settings-card h2 { margin-bottom:0; }
.volume-setting { display:grid; gap:8px; padding:12px 13px; border-radius:14px; background:#f2f7fa; }
.volume-setting > span { display:flex; align-items:center; justify-content:space-between; }
.volume-setting strong { font-size:15px; }
.volume-setting output { color:var(--blue); font-size:13px; font-weight:1000; }
.volume-setting input[type="range"] { width:100%; accent-color:var(--blue); }
.settings-note { margin:0; color:var(--muted); font-size:11px; font-weight:700; line-height:1.55; text-align:center; }
.system-blocker {
  position:absolute;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(28,54,70,.72);
  backdrop-filter:blur(5px);
}
.system-blocker[hidden] { display:none; }
.system-blocker-card {
  width:100%;
  padding:26px 20px 20px;
  border:3px solid #fff;
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 55px rgba(22,48,62,.35);
  text-align:center;
}
.system-blocker-card h2 { margin:0 0 12px; color:#bd3c43; font-size:24px; }
.system-blocker-card p { margin:0 0 18px; font-size:14px; font-weight:700; line-height:1.7; white-space:pre-line; }
.system-home-button {
  display:block;
  margin-top:12px;
  padding:10px;
  border-radius:999px;
  color:#587080;
  background:#e8f1f5;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}
.shop-card { display:grid; gap:12px; }
.shop-card h2 { margin-bottom:0; }
.shop-balance {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 13px;
  border:2px solid #f1d275;
  border-radius:13px;
  background:#fff4bf;
}
.shop-balance span { color:#805713; font-size:11px; font-weight:900; }
.shop-balance strong { display:inline-flex; align-items:center; gap:5px; color:#805713; font-size:18px; }
.shop-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:12px;
  border-radius:15px;
  background:#f2f7fa;
}
.shop-item > div { min-width:0; }
.shop-item strong { font-size:14px; }
.shop-item p { margin:3px 0; color:var(--muted); font-size:10px; font-weight:700; line-height:1.4; }
.shop-item small { color:#527080; font-size:10px; font-weight:900; }
.shop-item button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:104px;
  padding:9px 8px;
  border-radius:11px;
  color:#fff;
  background:#e94f55;
  font-size:11px;
  font-weight:1000;
  box-shadow:0 3px 0 #b9323a;
}
.coin-image-reward { width:24px; height:24px; }
.coin-image-price { width:18px; height:18px; }
.shop-item button:active { translate:0 2px; box-shadow:0 1px 0 #b9323a; }
.shop-item button:disabled { opacity:.55; cursor:wait; filter:grayscale(.35); }
.shop-status { min-height:1.5em; margin:0; color:var(--muted); font-size:11px; font-weight:900; text-align:center; }
.shop-status.success { color:#16814a; }
.shop-status.error { color:#bd3038; }
.gameover-card { text-align:center; }
.gameover-label { margin:0; color:var(--red); font-size:13px; font-weight:1000; letter-spacing:.14em; }
.gameover-card h2 { margin:2px 0 10px; color:var(--red); font-size:30px; }
.final-command { padding:9px; border-radius:12px; background:#edf7fc; font-size:17px; font-weight:1000; }
.final-state { margin-top:5px; color:var(--muted); font-size:11px; font-weight:800; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:13px 0 9px; }
.result-grid div { display:grid; gap:2px; padding:9px; border-radius:13px; background:#f3f7f9; }
.result-grid span,.reward-box span { color:var(--muted); font-size:10px; font-weight:900; }
.result-grid strong { font-size:22px; }
.reward-box { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; padding:11px 15px; border:2px solid #f1d275; border-radius:14px; background:#fff4bf; }
.reward-box strong { display:inline-flex; align-items:center; gap:5px; color:#8a5d12; font-size:21px; }
.gameover-input-wait {
  min-height:1.5em;
  margin:-7px 0 8px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-align:center;
}
.gameover-card button:disabled {
  opacity:.48;
  cursor:wait;
  translate:none;
  filter:grayscale(.25);
}
.start-button.compact { padding:11px; font-size:17px; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; }
  .start-countdown strong.pop {
    opacity:1;
    scale:1;
    animation:none!important;
  }
  .result-flash.show {
    opacity:1;
    scale:1;
    animation:none!important;
  }
}