/* Layout: full-bleed canvas with a fixed crosshair; thin HUD band on top; flat rounded cards for menus */
:root{
  --ink:#11161c;
  --panel:rgba(17,22,28,.94);
  --bone:#eef2f4;
  --mute:#9aa8b2;
  --accent:#ffb000;
  --hot:#ff7a1a;
  --line:rgba(238,242,244,.16);
  --f-disp:"Chakra Petch","Zen Kaku Gothic New",system-ui,sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:var(--ink);color:var(--bone);font-family:var(--f-body);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
[hidden]{display:none!important}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

#hud{
  position:fixed;left:0;right:0;top:0;pointer-events:none;
  padding-top:calc(env(safe-area-inset-top,0px) + 10px);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;justify-content:space-between;align-items:flex-start;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.streak{display:flex;flex-direction:column;gap:2px}
#streak{font-family:var(--f-disp);font-weight:700;font-size:52px;line-height:.9;font-variant-numeric:tabular-nums;color:var(--bone)}
#streak.bump{animation:bump .28s ease-out}
@keyframes bump{0%{transform:scale(1.35);color:var(--accent)}100%{transform:scale(1)}}
.streak small{font-size:11px;letter-spacing:.18em;color:var(--bone);opacity:.75}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#best{font-family:var(--f-disp);font-weight:700;font-size:15px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
#diffTag{font-size:11px;letter-spacing:.1em;padding:3px 8px;border:1px solid var(--line);border-radius:4px;background:rgba(17,22,28,.55)}

.overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;
  touch-action:pan-y;-webkit-overflow-scrolling:touch;
  padding-block:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(180deg,rgba(17,22,28,.55),rgba(17,22,28,.82));
}
.card{
  width:100%;max-width:400px;margin:auto;background:var(--panel);border-radius:12px;
  padding:20px 18px 18px;display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.eyebrow{font-family:var(--f-disp);font-size:12px;letter-spacing:.32em;color:var(--accent)}
h1{margin:0;font-family:var(--f-body);font-weight:700;font-size:26px;line-height:1.2;text-wrap:balance}
.rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.5;color:var(--bone)}
.rules li{display:flex;gap:10px}
.rules b{color:var(--accent);font-family:var(--f-disp);min-width:1.2em}
.label{font-size:11px;letter-spacing:.16em;color:var(--mute)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg.two{grid-template-columns:repeat(2,1fr)}
.hint{letter-spacing:.04em;margin-left:6px}
.seg button{
  font:inherit;color:var(--bone);background:transparent;border:1px solid var(--line);border-radius:6px;
  padding:8px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
}
.seg button span{font-size:14px;font-weight:700}
.seg button em{font-style:normal;font-family:var(--f-disp);font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.seg button[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,176,0,.14)}
.seg button[aria-pressed="true"] em{color:var(--bone)}
.row{display:flex;gap:8px}
.btn{
  flex:1;font-family:var(--f-disp),var(--f-body);font-weight:700;font-size:18px;letter-spacing:.08em;
  color:var(--ink);background:var(--accent);border:0;border-radius:8px;padding:14px 10px;cursor:pointer;
}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line);font-size:14px;letter-spacing:.04em;flex:0 0 auto;padding:14px}
.btn.wide{width:100%;flex:none;border-color:var(--accent);color:var(--accent);padding:11px}
button:focus-visible,a:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.sounds{gap:16px;align-items:center;flex-wrap:wrap}
.sound{font:inherit;font-size:12px;color:var(--mute);background:none;border:0;padding:2px 0;cursor:pointer;letter-spacing:.04em}
.sound.link{color:var(--bone);text-decoration:underline;text-underline-offset:3px}

.daily{
  font:inherit;color:var(--bone);text-align:left;cursor:pointer;
  background:rgba(255,176,0,.1);border:1px solid var(--accent);border-radius:8px;
  padding:10px 12px;display:flex;flex-direction:column;gap:3px;
}
.daily strong{font-size:15px}
.daily span{font-size:12px;color:var(--mute);line-height:1.4}
.challenge{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--hot);border-radius:8px;background:rgba(255,122,26,.12)}
.challenge strong{font-size:18px}
.challenge span{font-size:12px;color:var(--mute)}
.challenge .row{margin-top:4px}
.challenge .btn{font-size:15px;padding:11px}
.challenge .btn.ghost{padding:11px;font-size:13px}
body.has-challenge #dailyBtn{display:none}

.links{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px}
.links a,.tip{color:var(--mute);text-underline-offset:3px}
a.tip{color:var(--accent);font-size:12px}

.cause{font-family:var(--f-body);font-weight:700;font-size:28px;color:var(--hot);line-height:1.1}
.detail{font-size:14px;color:var(--bone);opacity:.9;line-height:1.5;min-height:1.5em}
.score{display:flex;align-items:baseline;gap:10px}
.score strong{font-family:var(--f-disp);font-weight:700;font-size:76px;line-height:.9;font-variant-numeric:tabular-nums}
.score span{font-size:13px;letter-spacing:.14em;color:var(--mute)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.stats div{background:var(--ink);padding:8px 8px 7px;display:flex;flex-direction:column;gap:2px}
.stats dt{font-size:10px;letter-spacing:.1em;color:var(--mute)}
.stats dd{margin:0;font-family:var(--f-disp);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.mode{font-size:12px;letter-spacing:.08em;color:var(--mute);margin-top:-6px}
.newbest{font-family:var(--f-disp),var(--f-body);font-size:12px;letter-spacing:.14em;color:var(--ink);background:var(--bone);padding:3px 8px;align-self:flex-start;border-radius:3px}
.versus{font-weight:700;font-size:15px;color:var(--accent)}
.diag{font-size:13px;line-height:1.5;color:var(--bone)}
.diag b{color:var(--accent)}
.share{display:flex;flex-wrap:wrap;gap:6px}
.share button{flex:1 1 auto;font:inherit;font-size:12px;color:var(--bone);background:rgba(238,242,244,.08);border:1px solid var(--line);border-radius:6px;padding:9px 6px;cursor:pointer;white-space:nowrap}

/* 横向きスマホと 800×450 の埋め込み：スクロールなしでスタートまで届くように詰める */
@media (max-height:560px){
  .overlay{padding-block:8px}
  .card{max-width:680px;gap:6px;padding:10px 16px}
  .eyebrow{display:none}
  h1{font-size:18px}
  .daily{flex-direction:row;align-items:baseline;gap:10px;padding:5px 10px}
  .daily strong{font-size:13px;white-space:nowrap}
  .daily span{font-size:11px}
  .rules{font-size:12px;gap:2px}
  .rules li:not(:nth-child(2)){display:none}
  .rules b{display:none}
  .label{display:none}
  .seg button{flex-direction:row;justify-content:center;gap:6px;padding:4px}
  .seg button span{font-size:13px}
  .btn{padding:8px;font-size:16px}
  .btn.ghost{padding:8px}
  .sounds,.links{font-size:11px}
  .links{gap:4px 12px}
  .score strong{font-size:48px}
  .cause{font-size:20px}
  .detail{font-size:12px}
  .diag{font-size:11px}
  .stats div{padding:4px 8px}
  .stats dd{font-size:14px}
  .share button{padding:5px}
}
@media (prefers-reduced-motion:reduce){#streak.bump{animation:none}}