/* フリップゲーム（答えは手元のフリップに書いて一斉オープン）の共通スタイル
   共通のクラス名（.card .big .row .btn .ok .ng など）と重ならないよう fg- を付ける */

/* ---------- メイン画面 ---------- */
.fg-now { font-size: 13px; color: var(--muted); font-weight: 700; }
.fg-q { font-size: 22px; font-weight: 900; margin: 4px 0 8px; line-height: 1.4; }
.fg-ans { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: var(--surface2); font-weight: 800; cursor: pointer; user-select: none; }
.fg-ans b { filter: blur(7px); transition: filter .15s; }
.fg-ans:hover b, .fg-ans.show b { filter: none; }
.fg-ans small { color: var(--muted); font-weight: 600; font-size: 11px; }
.fg-step { display: block; width: 100%; border: 0; border-radius: 18px; padding: 24px 16px; font: inherit; font-size: 28px; font-weight: 900; color: #fff; cursor: pointer; background: #1f9d55; box-shadow: 0 5px 0 rgba(0,0,0,.18); margin-top: 12px; touch-action: manipulation; }
.fg-step small { display: block; font-size: 14px; font-weight: 700; opacity: .9; margin-top: 2px; }
.fg-step:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.fg-step.red { background: #e53935; }
.fg-step.blue { background: #1e6fe5; }
.fg-phase { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.fg-phase span { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface2); color: var(--muted); font-weight: 700; }
.fg-phase span.on { background: var(--accent); color: #fff; }
.fg-judge { display: grid; gap: 6px; margin-top: 12px; }
.fg-jrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface2); border-left: 6px solid var(--c); }
.fg-jrow .nm { font-weight: 800; }
.fg-jrow .nm small { color: var(--muted); font-weight: 600; margin-left: 6px; }
.fg-jrow input { width: 140px; }
.fg-jrow input.txt { width: 200px; }
.fg-ox { display: flex; gap: 6px; }
.fg-ox button { width: 56px; height: 44px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-size: 22px; font-weight: 900; cursor: pointer; }
.fg-ox button.on.o { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.fg-ox button.on.x { background: #e53935; border-color: #e53935; color: #fff; }
.fg-pts { display: flex; align-items: center; gap: 6px; }
.fg-pts b { font-family: var(--num); font-size: 22px; min-width: 2ch; text-align: center; }
.fg-teams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fg-teams span { padding: 4px 10px; border-radius: 8px; background: var(--surface2); border-left: 5px solid var(--c); font-weight: 700; font-size: 14px; }
.fg-teams b { font-family: var(--num); margin-left: 6px; }
.fg-songs { display: grid; gap: 6px; margin-top: 8px; }
.fg-song { display: grid; grid-template-columns: 2.4em 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--surface2); }
.fg-song.cur { box-shadow: 0 0 0 2px var(--accent) inset; }
.fg-song small { color: var(--muted); font-size: 11px; display: block; }
.fg-song input { width: 100%; }

/* ---------- 出力画面 ---------- */
.fg { --stage: radial-gradient(circle at 50% 30%, #2a2350, #0b0c10 75%); justify-content: flex-start; padding: 3vmin 4vmin 2vmin; gap: 1.5vmin; }
.fg.open { --stage: radial-gradient(circle at 50% 35%, #5a3a00, #120b00 80%); }
.fg-top { width: 100%; display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #9fb0d6; font-size: 3.4vmin; }
.fg-mid { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; min-height: 0; }
.fg-no { font-size: 5vmin; font-weight: 900; color: #ffd84d; }
.fg-qtxt { font-size: 7vmin; font-weight: 900; text-align: center; line-height: 1.35; max-width: 92vw; text-shadow: 0 .5vmin 2vmin rgba(0,0,0,.5); }
.fg-qtxt.small { font-size: 4.2vmin; color: #c9d2ea; }
.fg-flash { font-size: min(22vw, 40vh); font-weight: 900; line-height: 1.1; text-align: center; letter-spacing: .05em; }
.fg-count { font-family: var(--num); font-size: min(30vw, 50vh); line-height: 1; color: #ffd84d; }
.fg-timer { font-family: var(--num); font-size: min(14vw, 26vh); line-height: 1; }
.fg-timer.low { color: #ff6b6b; }
.fg-bar { width: min(80vw, 140vmin); height: 2vmin; border-radius: 1vmin; background: rgba(255,255,255,.12); overflow: hidden; }
.fg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd84d, #ff7a2f); transition: width .2s linear; }
.fg-big { font-size: min(12vw, 22vh); font-weight: 900; text-align: center; line-height: 1.15; }
.fg-answer { font-size: min(10vw, 18vh); font-weight: 900; color: #ffd84d; text-align: center; line-height: 1.2; text-shadow: 0 1vmin 3vmin rgba(0,0,0,.5); }
.fg-answer small { font-size: .4em; color: #fff; margin-left: .2em; }
.fg-res { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4vmin; max-width: 96vw; }
.fg-rc { display: flex; align-items: center; gap: 1.2vmin; padding: 1vmin 2vmin; border-radius: 1.6vmin; background: rgba(255,255,255,.09); border-left: 1.2vmin solid var(--c); font-size: 3.8vmin; font-weight: 800; }
.fg-rc .v { font-family: var(--num); color: #ffd84d; }
.fg-rc .d { font-size: .7em; color: #c9d2ea; }
.fg-rc.win { background: rgba(255,216,77,.25); box-shadow: 0 0 0 .4vmin #ffd84d inset; }
.fg-rc.lose { opacity: .5; }
.fg-rc .mk { font-size: 1.3em; }
.fg-rc .mk.o { color: #6ee7a0; } .fg-rc .mk.x { color: #ff6b6b; }
.fg-score { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 1vmin; }
.fg-score span { padding: .6vmin 1.6vmin; border-radius: 1.2vmin; background: rgba(255,255,255,.08); border-left: .9vmin solid var(--c); font-size: 3vmin; font-weight: 800; }
.fg-score b { font-family: var(--num); color: #ffd84d; margin-left: 1vmin; }
.fg-eq { display: flex; align-items: flex-end; gap: 1.2vmin; height: 22vh; }
.fg-eq i { width: 3vmin; border-radius: 1vmin; background: linear-gradient(#ffd84d, #ff7a2f); animation: fgeq .5s ease-in-out infinite alternate; }
.fg-eq i:nth-child(2) { animation-delay: -.2s; } .fg-eq i:nth-child(3) { animation-delay: -.35s; } .fg-eq i:nth-child(4) { animation-delay: -.1s; } .fg-eq i:nth-child(5) { animation-delay: -.45s; }
.fg-eq.stop i { animation: none; height: 20% !important; opacity: .4; }
@keyframes fgeq { from { height: 15%; } to { height: 100%; } }