@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Share+Tech+Mono&display=swap');

:root{
  --bg:            #0b0e1a;
  --bg-2:          #12172a;
  --panel:         #161c33;
  --magenta:       #ff2e88;
  --cyan:          #28e0ff;
  --amber:         #f2a541;
  --ink:           #f4f0e6;
  --ink-dim:       #93a0c2;
  --line:          #2a3358;
  --radius:        14px;
  --font-display:  'Oswald', 'Hiragino Sans', sans-serif;
  --font-mono:      'Share Tech Mono', 'Menlo', monospace;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-display);
  overflow:hidden; -webkit-tap-highlight-color: transparent;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,46,136,0.06) 0, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(40,224,255,0.06) 0, transparent 40%);
}
#canvas-wrap{ position:fixed; inset:0; z-index:0; }
#scene{ width:100%; height:100%; display:block; }

#hud{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; gap:18px; padding:14px 20px;
  background:linear-gradient(180deg, rgba(11,14,26,0.92), rgba(11,14,26,0));
  z-index:10; pointer-events:none;
}
#lane-title{
  font-weight:700; letter-spacing:0.12em; font-size:15px;
  color:var(--amber); text-shadow:0 0 12px rgba(242,165,65,0.5); white-space:nowrap;
}
#scoreboard{ flex:1; display:flex; gap:4px; overflow-x:auto; font-family:var(--font-mono); }
.frame-box{
  min-width:46px; border:1px solid var(--line); border-radius:6px;
  background:rgba(22,28,51,0.85); padding:4px 6px; text-align:center;
}
.frame-box.current{ border-color:var(--cyan); box-shadow:0 0 10px rgba(40,224,255,0.35); }
.frame-num{ font-size:10px; color:var(--ink-dim); }
.frame-rolls{ font-size:13px; color:var(--cyan); letter-spacing:0.1em; min-height:14px; }
.frame-total{ font-size:16px; font-weight:700; color:var(--ink); }

#status-line{
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-dim);
  font-family:var(--font-mono); white-space:nowrap;
}
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-off{ background:#555; }
.dot-on{ background:#37e07a; box-shadow:0 0 8px #37e07a; }

#banner{
  position:fixed; top:22%; left:50%; transform:translate(-50%,-50%) scale(0.3) rotate(-6deg);
  font-size:min(15vw, 110px); font-weight:700; letter-spacing:0.06em; line-height:1.05;
  background:linear-gradient(180deg, #fff6c8 0%, var(--amber) 35%, var(--magenta) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 24px rgba(255,46,136,0.8)) drop-shadow(0 6px 0 rgba(0,0,0,0.5));
  opacity:0; z-index:11; pointer-events:none; text-align:center; white-space:pre-line;
}
#banner.show{ animation:banner-pop .9s cubic-bezier(.2,1.6,.4,1) forwards; }
#banner .banner-sub{
  display:block; font-size:0.35em; letter-spacing:0.2em; margin-top:0.1em;
}
@keyframes banner-pop{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.2) rotate(-10deg); }
  45%  { opacity:1; transform:translate(-50%,-50%) scale(1.25) rotate(3deg); }
  65%  { transform:translate(-50%,-50%) scale(0.95) rotate(-1deg); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}
@keyframes screen-shake{
  0%,100%{ transform:translate(0,0); }
  15%{ transform:translate(-12px, 6px) rotate(-0.6deg); }
  30%{ transform:translate(10px, -8px) rotate(0.5deg); }
  45%{ transform:translate(-8px, 4px) rotate(-0.4deg); }
  60%{ transform:translate(6px, -4px) rotate(0.3deg); }
  75%{ transform:translate(-4px, 2px); }
}
#canvas-wrap.shake{ animation:screen-shake .5s linear; }

#throw-hint{
  position:fixed; bottom:36px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:14px; letter-spacing:0.05em;
  color:var(--ink-dim); z-index:10; animation:pulse 1.6s infinite ease-in-out;
}
@keyframes pulse{ 0%,100%{opacity:.5;} 50%{opacity:1;} }
.hidden{ display:none !important; }

.overlay{
  position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%, rgba(255,46,136,0.08), rgba(6,8,15,0.94));
  backdrop-filter:blur(3px);
  padding:16px;
}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 34px; max-width:440px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  max-height:calc(100dvh - 32px); overflow-y:auto;
}
.panel.wide{ max-width:560px; }
.panel h1{
  margin:0 0 6px; font-size:34px; letter-spacing:0.06em; color:var(--ink);
  text-shadow:0 0 24px rgba(255,46,136,0.45), 0 0 2px rgba(40,224,255,0.5);
}
.panel h2{ margin:0 0 10px; font-size:22px; letter-spacing:0.04em; }
.panel .sub{ color:var(--ink-dim); font-size:14px; line-height:1.6; margin:0 0 18px; }
.panel code{ background:var(--bg-2); padding:1px 6px; border-radius:4px; font-family:var(--font-mono); font-size:12.5px;}
.panel .warn{ color:#ffcf5c; font-size:12.5px; line-height:1.6; background:rgba(242,165,65,0.08); border:1px solid rgba(242,165,65,0.3); border-radius:8px; padding:10px 12px; margin-bottom:16px; }

.mode-cards{ display:flex; flex-direction:column; gap:12px; }
.mode-card{
  text-align:left; background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; cursor:pointer; color:var(--ink); font-family:var(--font-display);
  transition:border-color .15s, transform .15s;
}
.mode-card:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.mode-card:focus-visible,.primary-btn:focus-visible,.link-btn:focus-visible,.icon-btn:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px;
}
.mode-card:disabled{ opacity:.35; cursor:not-allowed; transform:none; }
.mode-card-title{ font-weight:600; font-size:16px; margin-bottom:4px; }
.mode-card-desc{ font-family:var(--font-display); font-size:12.5px; color:var(--ink-dim); font-weight:400; }

label{ display:block; font-size:12px; color:var(--ink-dim); margin-bottom:6px; letter-spacing:.03em;}
.primary-btn{
  width:100%; padding:12px; border:none; border-radius:8px; cursor:pointer;
  background:linear-gradient(135deg, var(--magenta), #c2196b);
  color:white; font-family:var(--font-display); font-weight:600; letter-spacing:0.04em; font-size:14px;
  box-shadow:0 8px 20px rgba(255,46,136,0.3);
}
.primary-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.link-btn{
  width:100%; margin-top:10px; padding:8px; background:transparent; border:none;
  color:var(--ink-dim); font-family:var(--font-display); font-size:12.5px; cursor:pointer;
}
.link-btn:hover{ color:var(--ink); }
.error-text{ color:#ff5a6e; font-size:12.5px; margin-top:8px; min-height:14px; }
.check-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-dim); margin:14px 0; }

/* BLE接続パネル */
#ble-status-box{
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:14px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-dim); margin-bottom:16px; min-height:20px;
}
#ble-swing-check{ margin-top:16px; }
#swing-check-bar-wrap{ height:10px; background:#0a0d18; border-radius:5px; overflow:hidden; margin-top:8px; }
#swing-check-bar{ height:100%; width:0%; background:linear-gradient(90deg, var(--cyan), var(--magenta)); transition:width .05s linear; }

/* 常時表示のリスタートボタン */
#hud-restart-wrap{ position:fixed; bottom:20px; left:20px; z-index:15; display:flex; gap:8px; }

/* ボーナススター表示 */
#bonus-display{
  font-family:var(--font-mono); font-size:15px; font-weight:700;
  color:var(--amber); text-shadow:0 0 10px rgba(242,165,65,0.6);
  white-space:nowrap;
}
#star-popup{
  position:fixed; top:38%; left:50%; transform:translate(-50%,-50%) scale(0.5);
  font-family:var(--font-display); font-weight:700; font-size:44px;
  color:#ffd34d; text-shadow:0 0 16px rgba(255,211,77,0.8), 0 3px 0 rgba(0,0,0,0.4);
  opacity:0; z-index:12; pointer-events:none;
}
#star-popup.show{ animation:star-pop .7s ease-out forwards; }
@keyframes star-pop{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.4); }
  25%  { opacity:1; transform:translate(-50%,-50%) scale(1.2); }
  100% { opacity:0; transform:translate(-50%,-110%) scale(1); }
}

/* 転がり中のステアリング入力の可視化 */
#steer-indicator{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%);
  width:min(60vw, 240px); z-index:13; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
#steer-track{
  width:100%; height:10px; border-radius:5px;
  background:#0a0d18; border:1px solid var(--line); position:relative;
}
#steer-track::before{
  content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px;
  background:var(--ink-dim); opacity:0.6;
}
#steer-dot{
  position:absolute; top:50%; left:50%;
  width:16px; height:16px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--cyan); box-shadow:0 0 10px rgba(40,224,255,0.7);
  transition:left .05s linear;
}
#steer-label{
  font-family:var(--font-mono); font-size:10px; color:var(--ink-dim); letter-spacing:0.1em;
}

/* スマホ傾きモードの投球コントロール */
#tilt-controls{
  position:fixed; bottom:70px; left:50%; transform:translateX(-50%);
  width:min(90vw, 380px); z-index:14;
  display:flex; flex-direction:column; gap:10px;
}
#tilt-status{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-dim);
  text-align:center; text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
#tilt-power-wrap{
  height:12px; background:#0a0d18; border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
#tilt-power-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--cyan), var(--amber), var(--magenta));
  transition:width .03s linear;
}
#tilt-btn-row{ display:flex; gap:10px; align-items:stretch; }
#tilt-throw-btn{
  flex:1; padding:20px 12px; border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg, var(--magenta), #c2196b);
  color:white; font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:0.03em;
  box-shadow:0 8px 24px rgba(255,46,136,0.4);
  touch-action:none; user-select:none; -webkit-user-select:none;
}
#tilt-throw-btn:active{ transform:scale(0.97); }
#tilt-zero-btn{ width:56px; height:auto; border-radius:14px; font-size:22px; touch-action:manipulation; }

/* 投球調整パネル */
#tune-panel{ position:fixed; bottom:20px; right:20px; z-index:15; }
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-size:18px; cursor:pointer;
}
#tune-body{
  position:absolute; bottom:50px; right:0; width:220px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px;
}
.tune-row{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim); margin-bottom:10px; }
.tune-row input[type="range"]{ flex:1; margin-left:auto; width:90px; }
#swing-meter-wrap{ height:6px; background:#0a0d18; border-radius:3px; overflow:hidden; margin-top:4px; }
#swing-meter-bar{ height:100%; width:0%; background:linear-gradient(90deg, var(--amber), var(--magenta)); }

#final-score{ font-family:var(--font-mono); font-size:28px; text-align:center; color:var(--amber); margin-bottom:18px; }

@media (max-width: 480px){
  #lane-title{ display:none; }
  .frame-box{ min-width:36px; }
  #hud{ gap:8px; padding:calc(8px + env(safe-area-inset-top)) 10px 8px; }
  #scoreboard{ min-width:0; }
  .panel{ width:100%; padding:22px 20px; }
  .panel h1{ font-size:29px; }
  #hud-restart-wrap{ left:calc(12px + env(safe-area-inset-left)); bottom:calc(12px + env(safe-area-inset-bottom)); }
  #tune-panel{ right:calc(12px + env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); }
  #tilt-controls{ bottom:calc(66px + env(safe-area-inset-bottom)); }
}