/* World RPS — 世界じゃんけん大会 / スタイル
   テーマ: 深い紫の“アリーナ”＋ネオンのアクセント。装飾は控えめで読みやすさ優先。 */
:root {
  --bg:        #100a24;
  --bg-2:      #181034;
  --panel:     #1f1546;
  --panel-2:   #281a5c;
  --line:      rgba(180,150,255,.22);
  --ink:       #f3effd;
  --ink-soft:  #c3b7e8;
  --ink-mute:  #9183c0;
  --brand:     #b388ff;
  --brand-2:   #7c4dff;
  --neon:      #38e8d0;
  --rock:      #EF4444;   /* グー（赤） */
  --scissors:  #FACC15;   /* チョキ（黄） */
  --paper:     #3B82F6;   /* パー（青） */
  --win:       #46e08a;
  --lose:      #ff5d73;
  --draw:      #ffd24c;
  --radius:    14px;
  --shadow:    0 10px 30px rgba(0,0,0,.45);
  --sans: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
/* スマホの連打拡大対策: ダブルタップ拡大だけ無効化する（ピンチズームは残す＝視覚障害者の拡大を妨げない）。 */
html { scroll-behavior: smooth; touch-action: manipulation; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,77,255,.28), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(56,232,208,.16), transparent 55%),
    var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;   /* 端末回転などでの勝手な文字サイズ変更を防ぐ */
}
/* 操作要素は連打しても拡大・テキスト選択・タップ光が出ないようにする（手選び・道選びは高速連打されうる）。 */
button, .hand-btn, .path-btn, .primary-btn, .ghost-btn, .bgm-toggle, label.bgm-toggle, .lang-select, kbd {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
h1, h2, h3 { line-height: 1.25; }

/* ===== アクセシビリティ基盤 ===== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.a11y-skip { position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-180%); background: var(--brand-2); color: #fff; border: 1px solid var(--neon); padding: 10px 16px; border-radius: var(--radius); font: 600 14px/1 var(--sans); cursor: pointer; transition: transform .2s ease; }
.a11y-skip:focus { transform: translateY(0); outline: 2px solid var(--neon); outline-offset: 2px; }
#a11y-voice-start { left: 200px; }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; border-radius: 4px; }
/* 連勝中 HUD（3D 画面内・左上。ゲーム中のみ表示） */
.stage-hud { position: absolute; top: 10px; left: 12px; z-index: 3; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; background: rgba(10,16,10,.5); border: 1px solid rgba(160,200,150,.4); border-radius: 12px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.stage-hud[hidden] { display: none; }
.stage-hud .streak-hero { margin: 0; gap: 6px; }
.stage-hud .streak-big { font-size: clamp(26px, 7vw, 42px); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.stage-hud .streak-unit { font-size: clamp(11px, 2.4vw, 14px); }

/* 3D ステージ上部のアイコンボタン（BGM / 音声ガイド） */
.stage-top { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 8px; }
.stage-icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; background: rgba(10,16,10,.55); color: var(--ink); border: 1px solid rgba(160,200,150,.45); cursor: pointer; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: transform .12s ease, background .12s ease, opacity .12s ease; }
.stage-icon-btn:hover { transform: translateY(-2px); }
.stage-icon { font-size: 19px; line-height: 1; }
/* 音声ガイド: 既定オフ＝薄く、オン（.is-on）＝強調 */
#a11y-voice-toggle.stage-icon-btn:not(.is-on) { opacity: .5; }
#a11y-voice-toggle.stage-icon-btn.is-on { background: var(--neon); border-color: var(--neon); }
/* BGM: 既定オン、ミュート（.is-off）＝薄く */
#bgm-toggle.stage-icon-btn.is-off { opacity: .5; }

/* ===== トップバー ===== */
.topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px clamp(14px,4vw,32px); padding-top: calc(12px + env(safe-area-inset-top)); background: rgba(16,10,36,.78); backdrop-filter: blur(10px) saturate(140%); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark { font-size: 24px; letter-spacing: 2px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
/* h1（ページ唯一の見出しレベル1）。トップバー内表示なので UA 既定の margin/サイズを上書き */
.brand-title { margin: 0; font-weight: 800; font-size: 20px; letter-spacing: .04em; background: linear-gradient(90deg, var(--brand), var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-tagline { font-size: 12px; color: var(--ink-soft); }
.topbar-controls { display: flex; align-items: center; gap: 10px; }
/* 更新日時ラベル（更新ごとに色が 12 色で循環＝前回と区別できる） */
.build-stamp { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); color: var(--stamp, var(--ink-soft)); border: 1px solid var(--stamp, var(--line)); background: rgba(255,255,255,.04); border-radius: 999px; padding: 6px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stamp, var(--ink-soft)); box-shadow: 0 0 8px var(--stamp, transparent); }
@media (max-width: 560px) { .build-stamp .build-time { display: none; } }
.lang-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.lang-select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: inherit; }
.ghost-btn { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font: 600 13px/1 var(--sans); cursor: pointer; }
.ghost-btn:hover { color: var(--ink); border-color: var(--brand); }

/* ===== レイアウト ===== */
.app { max-width: 880px; margin: 0 auto; padding: clamp(16px,4vw,28px) clamp(14px,4vw,28px) 90px; }
.screen-h { font-size: clamp(20px,3vw,28px); margin: 6px 0 4px; }
.screen-help { color: var(--ink-soft); margin: 0 0 18px; }

/* ===== 3D 演出ステージ（森の山道） ===== */
.stage3d {
  position: relative;
  width: 100%;
  height: clamp(360px, 60vh, 560px);
  margin: 0 0 22px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(96,150,96,.22), transparent 60%),
    linear-gradient(180deg, #1a2c1c 0%, #0e160f 78%);
  box-shadow: var(--shadow);
}
.stage3d canvas { display: block; width: 100%; height: 100%; }
/* 上端に薄いビネット（空が枠に溶ける） */
.stage3d::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,22,15,.4) 0%, transparent 18%);
}
/* WebGL/three.js が使えない環境: canvas（3D 描画）だけ畳み、
   中に入れた操作オーバーレイ（手選び等）は通常フローで使えるよう残す。 */
.stage3d.is-off {
  height: auto;
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.stage3d.is-off canvas,
.stage3d.is-off::after { display: none; }
.stage3d.is-off .stage-overlay {
  position: static;
  background: none;
  padding: 0;
}
.stage3d.is-off .stage-overlay-h { font-size: clamp(20px, 3vw, 28px); }
.stage3d.is-off .stage-top { position: static; justify-content: flex-end; margin-bottom: 8px; }

/* 手選びボタンのキー表示（R / S / P） */
.key-hint { margin-top: 2px; font: 700 11px/1 var(--sans); color: var(--ink-soft); background: rgba(255,255,255,.1); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }

/* 操作オーバーレイ（手選び／分かれ道／もう一度）: 3D 下部に重ねる。キャラは上部に残る */
.stage-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 12px clamp(10px, 3vw, 20px) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, rgba(10,16,10,.5) 28%, rgba(7,11,8,.88) 100%);
}
.stage-overlay[hidden] { display: none; }
.stage-overlay-h { font-size: clamp(15px, 2.4vw, 19px); margin: 0 0 2px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.stage-overlay-help { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; text-shadow: 0 1px 8px rgba(0,0,0,.7); }

/* 共通: オーバーレイ内のボタン群を一段コンパクトに */
.stage-overlay .paths,
.stage-overlay .hand-choices { gap: 10px; margin: 0; }
.stage-overlay .path-btn,
.stage-overlay .hand-btn {
  min-height: auto;
  padding: 11px 8px;
  gap: 4px;
  background: rgba(22,32,20,.74);
  border-color: rgba(150,200,140,.4);
}
.stage-overlay .path-btn:hover:not(:disabled),
.stage-overlay .hand-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--win); }
.stage-overlay .path-num { font-size: 15px; }
.stage-overlay .path-hint { font-size: 12px; }
.stage-overlay .hand-emoji { font-size: clamp(26px, 6vw, 34px); }
.stage-overlay .hand-name { font-size: 14px; }

/* もう一度遊ぶ: ボタンを中央に大きく */
/* ゲームオーバーは 3D 画面内に縦並びで表示（終了表記→自己ベスト→世界順位→もう一度遊ぶ） */
.stage-over { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 2px; }
.stage-over .primary-btn { font-size: 16px; margin-top: 8px; }

/* ===== 世界1位バナー ===== */
.leader-banner { background: linear-gradient(120deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px; box-shadow: var(--shadow); }
.leader-h { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--neon); margin: 0 0 6px; }
.leader-body { font-size: clamp(16px,2.4vw,20px); font-weight: 700; margin: 0; }
.leader-hint { margin: 8px 0 0; color: var(--scissors); font-weight: 600; }

/* ===== 手の選択 ===== */
.lobby-intro { color: var(--ink-soft); margin: 0 0 18px; }
.hand-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.hand-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 8px; background: var(--panel); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.hand-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--brand); background: var(--panel-2); }
.hand-btn:disabled { opacity: .5; cursor: default; }
.hand-btn .hand-emoji { font-size: 44px; }
.hand-btn .hand-name { font-weight: 700; font-size: 16px; }
.hand-btn[data-hand="rock"]:hover:not(:disabled) { border-color: var(--rock); }
.hand-btn[data-hand="scissors"]:hover:not(:disabled) { border-color: var(--scissors); }
.hand-btn[data-hand="paper"]:hover:not(:disabled) { border-color: var(--paper); }

/* ===== 手の分布 ===== */
.hand-dist { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.dist-h { font-size: 14px; margin: 0 0 12px; color: var(--ink-soft); }
.dist-bars { display: flex; flex-direction: column; gap: 10px; }
.dist-row { display: grid; grid-template-columns: 92px 1fr 48px; align-items: center; gap: 10px; }
.dist-label { font-weight: 600; font-size: 14px; }
.dist-bar { height: 12px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; }
.dist-fill { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.dist-rock { background: var(--rock); }
.dist-scissors { background: var(--scissors); }
.dist-paper { background: var(--paper); }
.dist-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 14px; }

/* ===== 連勝数の大表示 ===== */
.streak-hero { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 2px 0 16px; }
.streak-big { font-size: clamp(54px, 15vw, 104px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--brand), var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 6px 30px rgba(124,77,255,.25); }
.streak-unit { font-size: clamp(16px, 3.4vw, 24px); font-weight: 800; color: var(--ink-soft); }

/* ===== ステータスバー ===== */
.status-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.status-avatar { font-size: 26px; }
.status-name { font-weight: 700; }
.status-hand { color: var(--ink-soft); }
.status-metric { margin-left: auto; font-size: 14px; color: var(--ink-soft); }
.status-metric + .status-metric { margin-left: 0; }
.status-metric b { color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; }
.status-hunted { background: var(--lose); color: #2a0008; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; letter-spacing: .06em; }

/* ===== フィードバック ===== */
.game-feedback { min-height: 1.6em; font-weight: 700; font-size: clamp(16px,2.4vw,20px); margin: 4px 0 14px; }
.fb-win  { color: var(--win); }
.fb-draw { color: var(--draw); }
.fb-lose { color: var(--lose); }

/* ===== 分かれ道 ===== */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.path-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 10px; min-height: 120px; justify-content: center; background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.path-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--neon); }
.path-btn:disabled { opacity: .55; cursor: default; }
.path-num { font-weight: 800; font-size: 17px; }
.path-hint { font-size: 14px; color: var(--ink-soft); text-align: center; }

/* ===== 結果画面 ===== */
/* 3D 画面内オーバーレイ上で読めるよう、影付き・余白詰めで表示 */
.over-h { color: var(--lose); margin: 0 0 2px; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.over-final { font-size: clamp(16px,2.6vw,21px); font-weight: 700; margin: 2px 0; text-shadow: 0 1px 8px rgba(0,0,0,.85); }
.over-best { color: var(--win); font-weight: 800; margin: 2px 0; text-shadow: 0 1px 8px rgba(0,0,0,.85); }
.over-rank { color: var(--ink-soft); margin: 2px 0 0; text-shadow: 0 1px 8px rgba(0,0,0,.85); }
.primary-btn { background: linear-gradient(90deg, var(--brand-2), var(--brand)); color: #fff; border: none; border-radius: 999px; padding: 14px 28px; font: 800 16px/1 var(--sans); cursor: pointer; box-shadow: var(--shadow); }
.primary-btn:hover { filter: brightness(1.08); }

/* ===== ランキング ===== */
.rankings { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.rank-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.rank-h { font-size: 15px; margin: 0 0 12px; color: var(--neon); }
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rank-row { font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.rank-row:last-child { border-bottom: none; }
.rank-empty { color: var(--ink-mute); font-size: 14px; }

/* ===== フッター ===== */
.site-footer { position: relative; text-align: center; color: var(--ink-mute); padding: 36px 16px calc(80px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); margin-top: 30px; }
.footer-brand { margin: 0 0 4px; color: var(--ink-soft); }
.footer-copy { margin: 0; font-size: 13px; }
/* コピーライト横の YouTube リンク（@jissouman） */
.footer-yt { display: inline-flex; vertical-align: middle; margin-left: 8px; color: #ff0000; line-height: 0; border-radius: 4px; transition: opacity .15s ease; }
.footer-yt:hover { opacity: .8; }
.footer-yt:focus-visible { outline: 2px solid #ff0000; outline-offset: 3px; }
.footer-yt-ico { display: block; width: 18px; height: 18px; }
/* 更新日時ラベルはフッター右下に配置（PWA 更新確認用） */
.footer-stamp { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 560px) { .footer-stamp { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); } }

/* ===== 管理者ダイアログ ===== */
.admin-dialog { width: min(680px, 92vw); max-height: 86vh; overflow: auto; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.admin-dialog::backdrop { background: rgba(8,5,20,.7); }
.admin-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; gap: 12px; }
.admin-head h2 { font-size: 18px; margin: 0; }
.admin-chart { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 20px; }
.mini-row { display: grid; grid-template-columns: 120px 1fr 40px; align-items: center; gap: 8px; }
.mini-label { font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.mini-bar { height: 10px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.mini-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.mini-val { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ===== レスポンシブ ===== */
@media (max-width: 560px) {
  .rankings { grid-template-columns: 1fr; }
  .dist-row { grid-template-columns: 80px 1fr 44px; }
  .hand-btn .hand-emoji { font-size: 38px; }
}

/* ===== モーション配慮 ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}