/* DARTS EYE — 店舗のダーツ機の画面のような、暗い背景に光る色と斜体の太い数字 */
:root {
  --bg0: #04060c;
  --bg1: #0a1022;
  --bg2: #121a33;
  --line: rgba(110, 160, 255, 0.28);
  --line-strong: rgba(120, 180, 255, 0.6);
  --text: #ffffff;
  --dim: rgba(205, 220, 255, 0.62);
  --faint: rgba(205, 220, 255, 0.28);
  --red: #ff2a4f;
  --blue: #1f9dff;
  --cyan: #35e3ff;
  --gold: #ffd23a;
  --green: #2ff08f;
  --orange: #ff9a1f;
  --p1: var(--red);
  --p2: var(--blue);
  --p3: var(--green);
  --p4: var(--orange);
  --num: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --jp: 'M PLUS 1', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  --skew: -10deg;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg0);
  color: var(--text);
  font-family: var(--jp);
  font-weight: 700;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; -webkit-user-select: text; user-select: text; } /* 選択禁止のままだと Safari で文字を打てないことがある */

/* ---- 画面全体 ---- */
.app {
  height: 100vh; /* iOS 15.3 以前は dvh を知らない */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(31, 157, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255, 42, 79, 0.16), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; padding: 18px 22px; overflow: auto; }
body[data-screen="home"] #screen-home,
body[data-screen="calib"] #screen-calib,
body[data-screen="play"] #screen-play,
body[data-screen="stats"] #screen-stats { display: flex; }

/* 光る縁の板 */
.panel {
  background: linear-gradient(180deg, rgba(28, 40, 78, 0.78), rgba(10, 15, 32, 0.86));
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* 斜めに切った見出し */
.sec-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font: italic 800 17px/1 var(--num);
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(53, 227, 255, 0.55);
}
.sec-h::before {
  content: '';
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  transform: skewX(var(--skew));
  box-shadow: 0 0 10px var(--cyan);
}
.sec-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

/* 選んだもの */
.sel {
  color: #fff !important;
  background: linear-gradient(180deg, var(--blue), #0b5fd0) !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 14px rgba(31, 157, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---- 操作のバー ---- */
.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(20, 28, 56, 0.95), rgba(6, 9, 20, 0.98));
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(53, 227, 255, 0.25);
}
.controls .spacer { flex: 1; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #e9f1ff;
  background: linear-gradient(180deg, #2a3866, #141c38);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  transform: skewX(var(--skew));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.1s;
}
.btn > * , .btn { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.btn:active { transform: skewX(var(--skew)) translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 0 rgba(0, 0, 0, 0.5); filter: brightness(1.2); }
.btn.sub { background: linear-gradient(180deg, #1c6fd6, #0c3f8c); border-color: rgba(53, 227, 255, 0.7); }
.btn.warn { background: linear-gradient(180deg, #4a2033, #241020); border-color: rgba(255, 42, 79, 0.7); color: #ffd0d9; }
.btn.undo { background: linear-gradient(180deg, #3a3f55, #1c2030); }
.btn.main {
  height: 50px;
  padding: 0 34px;
  font: italic 900 22px/1 var(--num), var(--jp);
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(180deg, #ff5a75, var(--red) 55%, #b5122f);
  border-color: #ff9fb0;
  box-shadow: 0 0 22px rgba(255, 42, 79, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 0 rgba(0, 0, 0, 0.5);
  animation: glow 2.2s ease-in-out infinite;
}
.btn[disabled] { opacity: 0.35; pointer-events: none; }
.btn:focus-visible, .menu-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@keyframes glow { 50% { box-shadow: 0 0 34px rgba(255, 42, 79, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 0 rgba(0, 0, 0, 0.5); } }

/* ---- ゲーム選択 ---- */
#screen-home { flex-direction: column; gap: 16px; }
.home-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.logo {
  margin: 0;
  font: italic 900 clamp(38px, 6.5vw, 62px)/1 var(--num);
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 18px rgba(31, 157, 255, 0.7);
}
.logo b { color: var(--red); margin-left: 6px; text-shadow: 0 0 18px rgba(255, 42, 79, 0.8); }
.tag { margin: 0; color: var(--dim); font-size: 14px; font-weight: 500; }
.home-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 36px; }
.col { min-width: 0; }

.menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.menu-item {
  position: relative;
  min-height: 112px;
  padding: 14px 14px 12px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(40, 56, 104, 0.8), rgba(10, 15, 32, 0.9));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.menu-item::before {
  content: '';
  position: absolute;
  right: -20px; top: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mc, var(--blue)) 0, transparent 70%);
  opacity: 0.35;
}
.menu-item[data-game="01"] { --mc: var(--red); }
.menu-item[data-game="cricket"] { --mc: var(--blue); }
.menu-item[data-game="countup"] { --mc: var(--green); }
.menu-item .en { position: relative; font: italic 900 clamp(26px, 3.4vw, 36px)/1 var(--num); letter-spacing: 0.02em; }
.menu-item .jp { position: relative; font-size: 12px; color: var(--dim); margin-top: 4px; }
.menu-item .price { position: relative; font: italic 700 15px/1 var(--num); color: var(--dim); margin-top: 8px; letter-spacing: 0.05em; }
.menu-item.on {
  border-color: var(--mc);
  box-shadow: 0 0 0 1px var(--mc), 0 0 26px color-mix(in srgb, var(--mc) 60%, transparent);
}
.menu-item.on .en { text-shadow: 0 0 14px var(--mc); }
.menu-item:active { transform: scale(0.98); }

.opts { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.opt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.opt > span { width: 5.2em; color: var(--dim); font-size: 13px; }
.opt .choices { display: flex; gap: 6px; flex-wrap: wrap; }
.opt button, .dial .seg button, .who button {
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 26, 0.7);
  color: var(--dim);
}

.roster { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.roster .pl {
  --pc: var(--p1);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px 0 0;
  font-size: 19px;
  font-weight: 900;
  border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 40%, transparent), rgba(10, 15, 32, 0.6) 60%);
  border-left: 4px solid var(--pc);
}
.roster .pl i {
  font: italic 900 18px/44px var(--num);
  width: 46px;
  text-align: center;
  background: var(--pc);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
.roster .pl button { margin-left: auto; color: var(--dim); font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.add-player input {
  width: 100%;
  height: 42px;
  margin-bottom: 18px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px dashed var(--line-strong);
  background: rgba(8, 12, 26, 0.6);
  color: #fff;
  font-size: 17px; /* 16px 未満だと iPhone が拡大する */
  outline: none;
}
.add-player input::placeholder { color: var(--faint); }
.add-player input:focus { border-style: solid; border-color: var(--cyan); box-shadow: 0 0 12px rgba(53, 227, 255, 0.35); }
.cam-line { margin: 0 0 12px; padding: 12px 14px; font-size: 14px; font-weight: 500; line-height: 1.7; }
.cam-line b { color: var(--green); font-weight: 900; }
.cam-line b.no { color: var(--orange); }

.note { display: flex; gap: 14px; align-items: center; padding: 12px; font-size: 13px; font-weight: 500; line-height: 1.55; width: max-content; max-width: 100%; }
.note[hidden] { display: none; }
.note p { margin: 0; }
.note small { color: var(--dim); }
#qr { padding: 6px; background: #fff; border-radius: 6px; }
#qr img, #qr canvas { display: block; width: 104px; height: 104px; }

/* ---- カメラ合わせ ---- */
#screen-calib { gap: 18px; padding: 14px; }
.host { position: relative; background: #02040a; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 0 20px rgba(31, 157, 255, 0.2); }
.host .overlay { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; z-index: 2; }
.calib-view { flex: 1.6; min-width: 0; }
.calib-side { flex: 1; min-width: 250px; max-width: 370px; overflow: auto; }
.step { margin: 0 0 14px; padding: 12px 14px; font-size: 16px; line-height: 1.65; min-height: 3.4em; }
.step em { font-style: normal; color: var(--gold); }
.step .place { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--dim); }
.step .inline { color: var(--cyan); border-bottom: 1px solid var(--cyan); padding: 0 2px; font-weight: 900; }
.step .rot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.step .rot .inline {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 14px;
  background: rgba(31, 157, 255, 0.15);
}
.step .warn { display: block; margin-top: 10px; padding: 8px 10px; font-size: 13px; color: #ffd9a6; background: rgba(255, 154, 31, 0.14); border-left: 3px solid var(--orange); border-radius: 4px; }
.dial .seg.wrap { flex-wrap: wrap; }
.tries { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.9; color: var(--dim); }
.tries b { display: inline-block; margin: 0 8px 6px 0; padding: 2px 10px; font: italic 900 22px/1.2 var(--num); color: #fff; background: rgba(31, 157, 255, 0.25); border: 1px solid var(--line-strong); border-radius: 4px; transform: skewX(var(--skew)); }

.dials { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 14px; }
.dial { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
.dial .seg { display: flex; gap: 6px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 8px rgba(53, 227, 255, 0.4); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--cyan));
  box-shadow: 0 0 10px var(--cyan);
}
input[type=range]::-moz-range-track { height: 4px; background: var(--cyan); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--cyan); }

/* ---- 試合 ---- */
#screen-play { flex-direction: column; padding: 12px 18px; gap: 10px; }
.play-head { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; white-space: nowrap; }
.play-head .game-name {
  padding: 6px 18px;
  font: italic 900 20px/1 var(--num);
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, var(--red), #a50e2b);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  box-shadow: 0 0 16px rgba(255, 42, 79, 0.5);
}
.play-head .round { font: italic 800 20px/1 var(--num); letter-spacing: 0.08em; color: var(--dim); }
.play-head .round b { color: #fff; font-size: 1.25em; }
.eye { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.eye i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.eye.moving i { background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: pulse 0.5s infinite alternate; }
.eye.blocked i { background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.eye.stalled i { background: var(--red); box-shadow: 0 0 12px var(--red); animation: pulse 0.5s infinite alternate; }
.eye.stalled b { color: var(--red); }
.eye.off i { background: transparent; border: 2px solid var(--faint); box-shadow: none; }
@keyframes pulse { to { transform: scale(1.5); opacity: 0.6; } }
.play-head .quit { font-size: 12px; color: var(--dim); padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; }

.play-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(250px, 34%); gap: 16px; }
.scoreboard { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.play-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.cam-mini { aspect-ratio: 4 / 3; width: 100%; }
.cam-mini.none::after {
  content: 'カメラ未設定 — 手入力で遊べます';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--dim); font-size: 13px; padding: 10px; text-align: center;
}

.darts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dart {
  position: relative;
  height: clamp(66px, 12.5vh, 108px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: italic 900 clamp(22px, min(5vh, 6.5vw), 44px)/1 var(--num);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(36, 50, 92, 0.85), rgba(10, 15, 32, 0.92));
  transform: skewX(var(--skew));
}
.dart small { font: 700 12px/1 var(--jp); color: var(--dim); margin-top: 5px; letter-spacing: 0; }
.dart.next { border-color: var(--cyan); box-shadow: 0 0 14px rgba(53, 227, 255, 0.45), inset 0 0 18px rgba(53, 227, 255, 0.15); animation: next 1.2s ease-in-out infinite; }
@keyframes next { 50% { box-shadow: 0 0 22px rgba(53, 227, 255, 0.75), inset 0 0 24px rgba(53, 227, 255, 0.25); } }
.dart.empty { color: var(--faint); }
.dart.void { color: var(--faint); text-decoration: line-through; }
.dart.T { background: linear-gradient(180deg, #c8183c, #5a0a1d); border-color: #ff7b92; box-shadow: 0 0 16px rgba(255, 42, 79, 0.5); }
.dart.D { background: linear-gradient(180deg, #0f8a52, #054028); border-color: #6cffb8; box-shadow: 0 0 16px rgba(47, 240, 143, 0.4); }
.dart.B { background: linear-gradient(180deg, #d99a00, #6b4300); border-color: #ffe27a; box-shadow: 0 0 18px rgba(255, 210, 58, 0.55); }
.dart.hand::after { content: '手'; position: absolute; top: 5px; right: 8px; font: 700 10px/1 var(--jp); color: rgba(255, 255, 255, 0.7); }
.arrange { margin: 0; font-size: 13px; color: var(--dim); min-height: 1.6em; }
.arrange b { font: italic 900 22px/1 var(--num); color: var(--gold); margin-left: 10px; letter-spacing: 0.04em; text-shadow: 0 0 10px rgba(255, 210, 58, 0.5); }

/* 01・カウントアップ */
.big-score {
  --pc: var(--p1);
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pc) 60%, transparent);
  background:
    radial-gradient(ellipse 70% 80% at 30% 50%, color-mix(in srgb, var(--pc) 28%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(20, 30, 60, 0.75), rgba(6, 9, 20, 0.9));
  box-shadow: 0 0 30px color-mix(in srgb, var(--pc) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.big-score .who-now {
  align-self: flex-start;
  padding: 6px 26px 6px 14px;
  font-size: clamp(16px, 3vh, 24px);
  font-weight: 900;
  background: var(--pc);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.big-score .num {
  font: italic 900 clamp(84px, min(31vh, 32vw), 330px)/0.95 var(--num);
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 0 24px color-mix(in srgb, var(--pc) 70%, transparent), 0 4px 0 rgba(0, 0, 0, 0.4);
}
.big-score .turn-sum { font-size: clamp(14px, 2.6vh, 20px); color: var(--dim); }
.big-score .turn-sum b { font: italic 900 1.5em/1 var(--num); color: var(--gold); margin: 0 4px; }
.big-score .bust { font: italic 900 1.6em/1 var(--num); color: var(--red); text-shadow: 0 0 12px var(--red); letter-spacing: 0.1em; }
.others { display: flex; gap: 8px; flex-wrap: wrap; }
.others .o {
  --pc: var(--p2);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 0;
  height: clamp(36px, 6vh, 50px);
  font-size: clamp(14px, 2.4vh, 18px);
  border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 35%, transparent), rgba(10, 15, 32, 0.7) 70%);
  border-left: 4px solid var(--pc);
  padding-left: 12px;
}
.others .o b { font: italic 900 1.7em/1 var(--num); }

/* クリケット */
.cricket { flex: 1; display: grid; align-content: stretch; min-height: 0; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 30, 60, 0.7), rgba(6, 9, 20, 0.9)); overflow: hidden; }
.cricket .row { display: grid; align-items: center; border-bottom: 1px solid rgba(110, 160, 255, 0.14); }
.cricket .row:last-child { border-bottom: 0; }
.cricket .head { --pc: var(--p1); text-align: center; padding: 6px 4px 4px; font-size: clamp(13px, 2.3vh, 18px); color: var(--dim); }
.cricket .head .sc { display: block; color: #fff; font: italic 900 clamp(30px, 6.5vh, 64px)/1 var(--num); }
.cricket .head.now { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 45%, transparent), transparent); box-shadow: inset 0 3px 0 var(--pc); }
.cricket .head.now .sc { text-shadow: 0 0 16px var(--pc); }
.cricket .n { text-align: center; font: italic 900 clamp(24px, 5vh, 46px)/1 var(--num); color: #fff; text-shadow: 0 0 10px rgba(53, 227, 255, 0.4); }
.cricket .n.dead { color: var(--faint); text-shadow: none; text-decoration: line-through; }
.cricket .m { --pc: var(--p1); display: grid; place-items: center; height: 100%; }
.cricket .m svg { height: clamp(26px, 5.6vh, 50px); width: auto; overflow: visible; }
.cricket .m svg * { fill: none; stroke: var(--pc); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--pc)); }
.cricket .m.now { background: color-mix(in srgb, var(--pc) 10%, transparent); }

/* ---- 記録 ---- */
#screen-stats { flex-direction: column; gap: 12px; }
.who { display: flex; gap: 6px; flex-wrap: wrap; }
.who button { font-size: 15px; padding: 7px 16px; }
.stats-body { display: grid; grid-template-columns: 1fr minmax(220px, 40%); gap: 20px; align-items: start; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(28, 40, 78, 0.78), rgba(10, 15, 32, 0.86)); }
.stat span { display: block; font-size: 12px; color: var(--dim); }
.stat b { font: italic 900 38px/1.1 var(--num); color: #fff; text-shadow: 0 0 12px rgba(31, 157, 255, 0.5); }
.stat small { font-size: 12px; color: var(--dim); margin-left: 6px; }
.heat { margin: 0; padding: 10px; text-align: center; }
.heat canvas { width: 100%; max-width: 420px; height: auto; }
.heat figcaption { color: var(--dim); font-size: 12px; }
.recent { font-size: 14px; font-weight: 500; line-height: 2; color: var(--dim); }
.recent div b { color: #fff; margin: 0 10px; font-weight: 900; }
.empty-msg { color: var(--dim); font-size: 15px; }

/* ---- 手入力・結果 ---- */
.sheet { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(2, 4, 10, 0.72); z-index: 20; padding: 16px; animation: fade 0.15s ease; }
.sheet[hidden] { display: none; }
.sheet-card {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 18px 20px 20px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #16214a, #070b18);
  box-shadow: 0 0 40px rgba(31, 157, 255, 0.35), 0 20px 50px rgba(0, 0, 0, 0.6);
}
.sheet-tools { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 14px; flex-wrap: wrap; }
#picker-board { width: 100%; max-height: 62vh; display: block; touch-action: none; }
#picker-board path { fill: #10162c; stroke: rgba(160, 190, 255, 0.35); stroke-width: 0.006; cursor: pointer; transition: fill 0.1s; }
#picker-board path.alt.SI, #picker-board path.alt.SO { fill: #d8dbe6; }
#picker-board path.SI, #picker-board path.SO { fill: #141a30; }
#picker-board path.T, #picker-board path.D { fill: #d01f3f; }
#picker-board path.alt.T, #picker-board path.alt.D { fill: #1677d8; }
#picker-board path.N { fill: #05070d; stroke: rgba(160, 190, 255, 0.15); }
#picker-board path.OB { fill: #1677d8; }
#picker-board path.IB { fill: #d01f3f; }
#picker-board path:hover { fill: var(--gold) !important; }
#picker-board path.press { fill: #fff !important; }
#picker-board text { fill: #fff; font: italic 900 0.13px var(--num); text-anchor: middle; dominant-baseline: central; pointer-events: none; }

.result-card { border-color: rgba(255, 210, 58, 0.6); box-shadow: 0 0 50px rgba(255, 210, 58, 0.3), 0 20px 50px rgba(0, 0, 0, 0.6); }
.winner { margin: 4px 0 18px; text-align: center; font-size: clamp(20px, 4vw, 28px); font-weight: 900; }
.winner .sel {
  display: inline-block;
  padding: 4px 22px;
  margin: 0 6px;
  font: italic 900 clamp(34px, 7vw, 52px)/1.1 var(--num), var(--jp);
  background: linear-gradient(180deg, #ffe680, var(--gold) 50%, #c98f00) !important;
  color: #2a1a00 !important;
  border: 0 !important;
  transform: skewX(var(--skew));
  box-shadow: 0 0 30px rgba(255, 210, 58, 0.7);
}
.result-table { display: grid; gap: 8px; }
.result-table .r { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: baseline; padding: 8px 12px; border-radius: 8px; background: rgba(10, 15, 32, 0.7); border: 1px solid var(--line); font-size: 17px; }
.result-table .r > span:nth-child(2) { font: italic 900 24px/1 var(--num); }
.result-table .r small { color: var(--dim); font-size: 13px; }
.result-table .aw { grid-column: 1 / -1; font: italic 800 15px/1.3 var(--num); color: var(--gold); letter-spacing: 0.05em; }

/* ---- 当たりの演出 ---- */
.flash { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 30; overflow: hidden; }
.flash span {
  font: italic 900 clamp(70px, 17vw, 230px)/1 var(--num);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.25);
  text-shadow: 0 0 30px rgba(31, 157, 255, 0.9), 0 6px 0 rgba(0, 0, 0, 0.35);
  animation: hit 1.3s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.flash span.T { color: #ff5470; text-shadow: 0 0 34px var(--red), 0 0 80px rgba(255, 42, 79, 0.6), 0 6px 0 rgba(0, 0, 0, 0.35); }
.flash span.D { color: #5dffae; text-shadow: 0 0 34px var(--green), 0 0 80px rgba(47, 240, 143, 0.5), 0 6px 0 rgba(0, 0, 0, 0.35); }
.flash span.B { color: var(--gold); text-shadow: 0 0 34px var(--gold), 0 0 90px rgba(255, 210, 58, 0.6), 0 6px 0 rgba(0, 0, 0, 0.35); }
.flash span.MISS { color: rgba(205, 220, 255, 0.7); text-shadow: 0 0 20px rgba(205, 220, 255, 0.3); font-size: clamp(50px, 11vw, 150px); }
.flash span.bust { color: var(--red); text-shadow: 0 0 40px var(--red), 0 0 100px rgba(255, 42, 79, 0.7); animation: bust 1.4s ease forwards; }
.flash span.name { font: 900 clamp(34px, 7vw, 90px)/1 var(--jp); text-shadow: 0 0 30px rgba(31, 157, 255, 0.8); animation: slide 1.4s ease forwards; }
/* 賞（HAT TRICK・TON 80 など）は光の筋を背にして大きく */
.flash.award::before {
  content: '';
  position: absolute;
  width: 160vmax; height: 160vmax;
  background: repeating-conic-gradient(rgba(255, 210, 58, 0.22) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 55%);
  mask: radial-gradient(circle, #000 0, transparent 55%);
  animation: rays 2.6s ease-out forwards;
}
.flash.award span {
  position: relative;
  font-size: clamp(60px, 13vw, 190px);
  background: linear-gradient(180deg, #fff6c2, var(--gold) 45%, #ff8a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: drop-shadow(0 0 24px rgba(255, 170, 0, 0.8)) drop-shadow(0 6px 0 rgba(0, 0, 0, 0.4));
  animation: award 2.6s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
@keyframes hit {
  0% { transform: scale(2.4) skewX(var(--skew)); opacity: 0; }
  18% { transform: scale(1) skewX(var(--skew)); opacity: 1; }
  70% { transform: scale(1.04) skewX(var(--skew)); opacity: 1; }
  100% { transform: scale(1.1) skewX(var(--skew)); opacity: 0; }
}
@keyframes bust {
  0% { transform: scale(0.6); opacity: 0; }
  12% { transform: scale(1.15) rotate(-3deg); opacity: 1; }
  20%, 30%, 40% { transform: translateX(-10px) rotate(-3deg); }
  25%, 35% { transform: translateX(10px) rotate(-3deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-3deg) scale(1.05); }
}
@keyframes slide {
  0% { transform: translateX(60vw) skewX(var(--skew)); opacity: 0; }
  20% { transform: translateX(0) skewX(var(--skew)); opacity: 1; }
  75% { transform: translateX(-2vw) skewX(var(--skew)); opacity: 1; }
  100% { transform: translateX(-60vw) skewX(var(--skew)); opacity: 0; }
}
@keyframes award {
  0% { transform: scale(0.2) skewX(var(--skew)); opacity: 0; }
  14% { transform: scale(1.12) skewX(var(--skew)); opacity: 1; }
  24% { transform: scale(1) skewX(var(--skew)); }
  85% { opacity: 1; }
  100% { transform: scale(1.06) skewX(var(--skew)); opacity: 0; }
}
@keyframes rays { 0% { transform: rotate(0) scale(0.3); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: rotate(40deg) scale(1); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* 映像は body に置いたまま、今の画面の枠の位置に重ねる（app.js の placeVideo） */
#cam { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; object-fit: contain; pointer-events: none; z-index: 1; border-radius: 10px; }
#cam.on { opacity: 1; }

/* ---- 縦持ち ---- */
@media (max-aspect-ratio: 1/1) {
  .home-body { grid-template-columns: 1fr; }
  #screen-calib { flex-direction: column; }
  .calib-view { flex: none; aspect-ratio: 4 / 3; }
  .calib-side { max-width: none; }
  .play-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .play-side { display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto auto; gap: 8px; }
  .big-score .num { font-size: clamp(84px, min(30vh, 44vw), 330px); }
  .cam-mini { grid-row: span 2; }
  .stats-body { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .screen { padding: 12px 12px; }
  .menu { gap: 8px; }
  .menu-item { min-height: 92px; padding: 10px; }
  .menu-item .en { font-size: clamp(18px, 5.6vw, 26px); white-space: nowrap; }
  .menu-item .price { font-size: 12px; }
  .controls { gap: 8px; padding-left: 10px; padding-right: 10px; overflow-x: auto; }
  .controls > * { flex-shrink: 0; }
  .btn { padding: 0 12px; font-size: 14px; height: 40px; }
  .btn.main { padding: 0 18px; font-size: 19px; height: 46px; }
  .play-head .game-name { font-size: 16px; padding: 5px 14px; }
  .play-head .round { font-size: 16px; }
  .eye b { display: none; }
}