/* =====================================================================
   style.css — カラーキッカーズ RUSH！ レイアウト・フィールド・トークン・リング
   - スマホ縦持ち特化（390x844基準 / 320x568対応）。100dvh + safe-area
   - 動きは transform / opacity のみ（layout/paint 不発生 §8.3）
   - 子供向けトーン: 明るく・丸く・大きく
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  /* iOS 既定動作の全面抑止（§2.1 / §12 品質） */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDGothic", "Yu Gothic",
               system-ui, sans-serif;
  background: #0e3b1f;
  color: #fff;
}

#app {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(180deg, #1a7a3c 0%, #136231 100%);
}

/* ---------------- 画面切替 ---------------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}
.screen.active { display: flex; }
#screen-match { padding: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); justify-content: flex-start; }

/* ---------------- タイトル ---------------- */
#screen-title {
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,160,.25), transparent 60%),
    linear-gradient(180deg, #2bb55a 0%, #0e6b32 70%, #0a4a23 100%);
  text-align: center;
}
.title-ball { font-size: 72px; animation: ball-bounce 1.2s ease-in-out infinite; }
@keyframes ball-bounce {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-22px) rotate(180deg) }
}
.title-logo { line-height: 1.15; margin: 10px 0 6px; }
.t-color {
  font-size: clamp(26px, 8.5vw, 38px);
  background: linear-gradient(90deg, #ff5b4b, #ffd23f, #3ecf5a, #2b9bff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}
.t-rush {
  font-size: clamp(44px, 15vw, 68px);
  color: #ffd23f;
  text-shadow: 0 4px 0 #b76b00, 0 6px 14px rgba(0,0,0,.4);
  letter-spacing: .04em;
}
.title-sub { font-size: clamp(14px, 4.5vw, 18px); color: #d8ffe2; margin-bottom: 36px; }
.title-start { font-size: clamp(18px, 5.5vw, 24px); font-weight: bold; color: #fff; }
.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.12); opacity: .8 } }

/* ---------------- チーム確認 ---------------- */
.team-head { font-size: clamp(22px, 7vw, 30px); margin-bottom: 18px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.team-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(92vw, 360px); margin-bottom: 26px; }
.team-card {
  background: rgba(255,255,255,.95);
  color: #234;
  border-radius: 18px;
  padding: 12px 6px 10px;
  text-align: center;
  border: 4px solid #ccc;
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.team-card .tc-emoji { font-size: 40px; line-height: 1.2; }
.team-card .tc-name { font-size: 13px; font-weight: bold; margin-top: 4px; }
.team-card .tc-type { font-size: 11px; color: #678; margin-top: 2px; }
.team-card.c-red   { border-color: #ff4b2b; }
.team-card.c-blue  { border-color: #2b9bff; }
.team-card.c-green { border-color: #3ecf5a; }

.big-btn {
  font-family: inherit;
  font-size: clamp(20px, 6vw, 26px);
  font-weight: bold;
  color: #5a3500;
  background: linear-gradient(180deg, #ffe066, #ffb300);
  border: none;
  border-radius: 999px;
  padding: 16px 38px;
  box-shadow: 0 6px 0 #b76b00, 0 8px 16px rgba(0,0,0,.35);
  cursor: pointer;
  touch-action: manipulation;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b76b00; }

/* ---------------- 20秒バー（上端固定・高さ8px §8.2） ---------------- */
#clock-bar {
  flex: 0 0 8px;
  width: 100%;
  background: rgba(0,0,0,.45);
  overflow: hidden;
}
#clock-fill {
  height: 100%;
  width: 100%;
  background: #3ecf5a;
  transform-origin: left center;
  transform: scaleX(1);
  will-change: transform;
}
#clock-fill.warn-mid { background: #ffd23f; }
#clock-fill.warn-low { background: #ff4b2b; animation: clock-blink .4s steps(2) infinite; }
@keyframes clock-blink { 50% { opacity: .35 } }

/* ---------------- フィールド ---------------- */
#field-wrap {
  position: relative;
  width: 100%;                /* .screen の align-items:center で潰れないよう明示 */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#field {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 10%, rgba(0,0,0,.05) 10% 20%),
    linear-gradient(180deg, #2da653 0%, #1f8a42 100%);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
  overflow: hidden;
}

/* ゾーン（§3.1）。y は論理→画面で上下反転: ゴール前=上部 */
.zone { position: absolute; left: 0; right: 0; pointer-events: none; }
.zone-gold {                       /* 110≤y≤140 → 上から 0〜21.4% : 光る芝=2点 */
  top: 0; height: 21.43%;
  background: linear-gradient(180deg, rgba(255,224,102,.4), rgba(255,224,102,.12));
  animation: gold-glow 1.6s ease-in-out infinite;
}
@keyframes gold-glow { 0%,100% { opacity: .75 } 50% { opacity: 1 } }
.zone-mid {                        /* 70≤y<110 → 21.4%〜50% : ミドル=1点 */
  top: 21.43%; height: 28.57%;
  background: rgba(255,255,255,.05);
  border-bottom: 2px dashed rgba(255,255,255,.4);
}
#goal-mouth {                      /* x∈[35,65] on y=140 */
  position: absolute;
  top: 0; left: 35%; width: 30%; height: 4.5%;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.25));
  border: 3px solid #fff; border-top: none;
  border-radius: 0 0 12px 12px;
  opacity: .8;
  pointer-events: none;
}
/* シュートゾーン内アフォーダンス: ゴールマウスが薄く発光（§2.2 #4） */
#field.shootable #goal-mouth {
  opacity: 1;
  box-shadow: 0 0 22px 8px rgba(255,240,150,.85);
  transition: box-shadow .25s, opacity .25s;
}

/* SVGオーバーレイ（パスレーン / 守備番作戦線） */
#lane-svg, #plan-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.lane {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10 8;
  animation: lane-flow .6s linear infinite;
  opacity: .85;
}
@keyframes lane-flow { to { stroke-dashoffset: -18; } }
.lane.green { stroke: #6dff8f; filter: drop-shadow(0 0 4px rgba(110,255,140,.9)); }
.lane.red   { stroke: #ff5b4b; filter: drop-shadow(0 0 4px rgba(255,80,60,.9)); opacity: .7; }
.plan-line {
  fill: none; stroke: #ffd23f; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 6 10; opacity: 0;
}
.plan-line.show { opacity: 1; animation: lane-flow .5s linear infinite; }
.plan-line.dim  { opacity: .25; stroke: #ffffff; }

/* ---------------- トークン（選手・GK・ボール） ---------------- */
.token {
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 44px;          /* ヒット領域44px以上（§2.1） */
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
  pointer-events: none;               /* 入力は input.js が field 全面で最近傍吸着 */
}
.token .body {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 4px solid #999;
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
  transition: transform .15s;
}

/* 味方: チームカラー縁 + 常時脈動タップリング（§2.2 #1） */
.token.ally .body { border-color: #ffd23f; background: #fffbe8; }
.token.ally.c-red   .body { border-color: #ff4b2b; }
.token.ally.c-blue  .body { border-color: #2b9bff; }
.token.ally.c-green .body { border-color: #3ecf5a; }
.token.ally::before {                 /* タップリング */
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.85);
  animation: tap-ring 1.2s ease-out infinite;
}
@keyframes tap-ring {
  0%   { transform: scale(.7); opacity: .9 }
  70%  { transform: scale(1.25); opacity: 0 }
  100% { transform: scale(1.25); opacity: 0 }
}
.token.ally.holder::before { display: none; }   /* 保持者はタップ対象でない（§2.2 #4） */
.token.ally.holder .body {
  transform: scale(1.15);                       /* 保持者は発光＋わずかに拡大（§3.2） */
  box-shadow: 0 0 16px 5px rgba(255,255,200,.9), 0 3px 6px rgba(0,0,0,.35);
}
/* ゲージMAX: 金色発光・脈動（§6.1） */
.token.ally.holder.gold .body {
  border-color: #ffd23f;
  box-shadow: 0 0 22px 9px rgba(255,210,60,.95);
  animation: gold-pulse .5s ease-in-out infinite;
}
@keyframes gold-pulse { 0%,100% { transform: scale(1.15) } 50% { transform: scale(1.28) } }
/* フリーの合図キラ点滅（§4.3） */
.token.ally.kira .body { animation: kira-blink .25s steps(2) 4; }
@keyframes kira-blink { 50% { background: #fff176; box-shadow: 0 0 18px 8px rgba(255,241,118,.95) } }
/* 空振りフィードバック（§2.2 規則5） */
.token.ally.bounce .body { animation: whiff-bounce .25s ease-out 1; }
@keyframes whiff-bounce { 30% { transform: scale(.85) } 70% { transform: scale(1.1) } }

/* 敵DF: 色＝性格（§4.5） */
.token.df .body { font-size: 22px; }
.token.df.c-red   .body { background: #ffded7; border-color: #ff4b2b; }
.token.df.c-blue  .body { background: #d7ecff; border-color: #2b9bff; }
.token.df.c-green .body { background: #ddf7e2; border-color: #3ecf5a; }
/* 体の傾き（テレグラフ: 飛び込み方向が見える §4.4） */
.token.df .body { transition: transform .2s; }
.token.df.telegraph .body { animation: tele-shake .18s linear infinite; }
@keyframes tele-shake { 0%,100% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } }
/* 「!」テレグラフ */
.token.df .excl {
  position: absolute;
  top: -26px; left: 50%;
  transform: translateX(-50%) scale(0);
  font-size: 24px; font-weight: bold; color: #ffe14b;
  text-shadow: 0 0 6px #c80000, 0 2px 0 #900;
  transition: transform .12s;
  will-change: transform;
}
.token.df.telegraph .excl, .token.df.dive .excl { transform: translateX(-50%) scale(1.4); }
/* 進行方向矢印（飛び込みテレグラフ） */
.token.df .dive-arrow {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  border: 9px solid transparent;
  border-bottom: 16px solid rgba(255,225,75,.95);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg) translateY(-26px) scale(0);
  will-change: transform;
}
.token.df.dive .dive-arrow, .token.df.telegraph .dive-arrow {
  transform: translate(-50%, -100%) rotate(var(--dive-rot, 0deg)) translateY(-26px) scale(1);
}
/* 赤い湯気メーター（PRESS予兆 §4.3） */
.token.df .steam {
  position: absolute;
  bottom: -14px; left: 50%;
  width: 26px; height: 10px;
  margin-left: -13px;
  border-radius: 6px;
  background: radial-gradient(ellipse at center, rgba(255,70,40,.95), rgba(255,70,40,0));
  opacity: 0;
  will-change: transform, opacity;
}
.token.df.foretell .steam, .token.df.press .steam {
  opacity: 1;
  animation: steam-up .7s ease-out infinite;
}
@keyframes steam-up {
  0% { transform: translateY(0) scale(.8); opacity: .95 }
  100% { transform: translateY(-10px) scale(1.3); opacity: 0 }
}
/* PRESS中: ふちが赤熱 */
.token.df.press .body { box-shadow: 0 0 12px 4px rgba(255,80,50,.75), 0 3px 6px rgba(0,0,0,.35); }
/* BROKEN: 転倒1.5s（§4.4） */
.token.df.broken .body {
  transform: rotate(90deg) scale(.9);
  opacity: .55;
  filter: grayscale(.6);
}
.token.df.broken::after {
  content: "💫";
  position: absolute; top: -22px; left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  animation: pulse .5s ease-in-out infinite;
}

/* GK */
#tok-gk .body { background: #ffe9a8; border-color: #b76b00; font-size: 20px; }

/* ボール */
#tok-ball {
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  font-size: 20px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
  z-index: 5;
}

/* ---------------- 磁石リング（長押しキープ §2.2 #5） ---------------- */
#magnet-ring {
  position: absolute; top: 0; left: 0;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 4px dashed rgba(255,240,150,.95);
  box-shadow: 0 0 18px rgba(255,240,150,.6), inset 0 0 18px rgba(255,240,150,.35);
  opacity: 0;
  transform: translate3d(-100px,-100px,0) scale(.4);
  will-change: transform, opacity;
  pointer-events: none;
}
#magnet-ring.active {
  opacity: 1;
  animation: magnet-grow 1.1s ease-out infinite;
}
@keyframes magnet-grow {
  0%   { transform: translate3d(var(--mx), var(--my), 0) scale(.6) rotate(0deg); opacity: .95 }
  100% { transform: translate3d(var(--mx), var(--my), 0) scale(2.6) rotate(60deg); opacity: 0 }
}

/* ---------------- 守備番ヤマはり ---------------- */
#yama-spots { position: absolute; inset: 0; pointer-events: none; }
.yama-spot {
  position: absolute;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 4px solid #ffd23f;
  background: radial-gradient(circle, rgba(255,210,63,.5), rgba(255,210,63,.08));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  pointer-events: auto;
  animation: pulse 1s ease-in-out infinite;
  will-change: transform;
}
.yama-spot.picked { animation: none; background: #ffd23f; border-color: #fff; }
.yama-spot.hidden { display: none; }
.def-dot {
  position: absolute; top: 0; left: 0;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: #fff; border: 4px solid #c2185b;
  box-shadow: 0 3px 6px rgba(0,0,0,.4);
  transform: translate3d(-100px,-100px,0);
  transition: transform .55s linear;
  will-change: transform;
  pointer-events: none;
}
.def-dot.mine { border-color: #ffd23f; background: #fffbe8; }

/* ---------------- 中央バナー ---------------- */
#banner {
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: clamp(30px, 10vw, 46px);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 18px rgba(255,255,255,.45);
  white-space: nowrap;
  pointer-events: none;
  z-index: 30;
  will-change: transform, opacity;
}
#banner.show { animation: banner-pop .9s ease-out 1 forwards; }
#banner.good { color: #ffe14b; }
#banner.bad  { color: #ff8a80; }
#banner.gold { color: #ffd23f; text-shadow: 0 0 24px rgba(255,210,63,.95), 0 3px 0 rgba(0,0,0,.45); }
@keyframes banner-pop {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0 }
  18%  { transform: translate(-50%,-50%) scale(1.25); opacity: 1 }
  30%  { transform: translate(-50%,-50%) scale(1); }
  80%  { transform: translate(-50%,-50%) scale(1); opacity: 1 }
  100% { transform: translate(-50%,-50%) scale(.9); opacity: 0 }
}

/* ---------------- 赤ビネット（残り5秒 §8.2） ---------------- */
#vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px 24px rgba(255,30,10,.55);
  opacity: 0;
  will-change: opacity;
  z-index: 25;
}
#vignette.active { animation: vignette-beat .5s ease-in-out infinite; }
@keyframes vignette-beat { 0%,100% { opacity: .25 } 50% { opacity: .85 } }

/* ---------------- オーバーレイ共通 ---------------- */
.overlay {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 20, 8, .45);
  z-index: 40;
}
.overlay.active { display: flex; }
#setup-overlay { background: transparent; pointer-events: none; justify-content: flex-start; padding-top: 12%; }
#setup-count {
  font-size: clamp(60px, 22vw, 96px);
  font-weight: bold; color: #ffd23f;
  text-shadow: 0 4px 0 #b76b00, 0 6px 18px rgba(0,0,0,.45);
}
.setup-hint { font-size: clamp(16px, 5vw, 20px); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); animation: pulse 1.2s infinite; }
#phase-msg {
  font-size: clamp(28px, 9vw, 40px);
  font-weight: bold; color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.5);
  text-align: center;
  line-height: 1.4;
}
.pk-title { font-size: clamp(30px, 10vw, 44px); font-weight: bold; color: #ffd23f; text-shadow: 0 3px 0 #b76b00; }
#pk-count { font-size: clamp(56px, 20vw, 88px); font-weight: bold; color: #fff; }
.pk-hint { font-size: clamp(18px, 6vw, 24px); animation: pulse .5s infinite; }

/* ---------------- 下部HUD（高さ72px §8.2） ---------------- */
#hud-bottom {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(0, 25, 10, .65);
}
#faces { display: flex; gap: 6px; }
.face {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fffbe8;
  border: 3px solid #999;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  position: relative;
  will-change: transform;
}
.face.c-red { border-color: #ff4b2b; }
.face.c-blue { border-color: #2b9bff; }
.face.c-green { border-color: #3ecf5a; }
.face.holder { box-shadow: 0 0 10px 3px rgba(255,255,200,.9); transform: scale(1.08); }
.face.gold { animation: gold-pulse-face .5s ease-in-out infinite; box-shadow: 0 0 14px 5px rgba(255,210,63,.95); }
@keyframes gold-pulse-face { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } }

#gauge { display: flex; flex-direction: column-reverse; gap: 3px; margin-left: 2px; }
#gauge i {
  display: block;
  width: 30px; height: 13px;
  border-radius: 5px;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.5);
  will-change: transform;
}
#gauge i.fill { background: linear-gradient(90deg, #ffd23f, #ff9a3f); border-color: #ffd23f; }
#gauge.max i.fill { animation: gauge-fire .4s steps(2) infinite; box-shadow: 0 0 10px 3px rgba(255,160,40,.95); }
@keyframes gauge-fire { 50% { background: #fff176 } }

#hud-info { margin-left: auto; text-align: right; }
#score { font-size: 24px; font-weight: bold; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
#attacks-left { font-size: 13px; letter-spacing: 2px; opacity: .9; }
#attacks-left .used { opacity: .25; }

/* ---------------- リザルト ---------------- */
#screen-result { background: linear-gradient(180deg, #173a6b 0%, #0b1f3a 100%); text-align: center; }
#result-head { font-size: clamp(26px, 8vw, 34px); margin-bottom: 14px; }
#result-score { font-size: clamp(52px, 18vw, 80px); font-weight: bold; color: #ffd23f; text-shadow: 0 4px 0 #b76b00; }
#result-stars { font-size: clamp(34px, 12vw, 52px); margin: 10px 0 4px; letter-spacing: 6px; }
#result-msg { font-size: clamp(18px, 6vw, 24px); margin-bottom: 28px; }

/* ---------------- 320px幅の縮小調整（§8.2 / §2.1） ---------------- */
@media (max-width: 359px) {
  .face { width: 38px; height: 38px; font-size: 20px; }
  #gauge i { width: 24px; height: 11px; }
  #score { font-size: 19px; }
  #hud-bottom { flex-basis: 64px; }
  .token { font-size: 21px; }
  .token .body { width: 36px; height: 36px; }
}