* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: #050a06; overflow: hidden; touch-action: none; }
body { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; color: #fff; -webkit-user-select: none; user-select: none; }
#wrap { position: fixed; inset: 0; }
#view { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font-family: inherit; cursor: pointer; color: inherit; }

/* ---------- 中継の画面 ---------- */
#tv { position: absolute; inset: 0; pointer-events: none; --u: min(1.45vmin, 1vw); font-size: calc(clamp(16px, calc(var(--u) * 1.6), 26px) * var(--fz, 1)); }
#tv.off { display: none; }
#tv > * { pointer-events: auto; }
#bug { position: absolute; left: calc(14px + env(safe-area-inset-left)); top: 14px; background: linear-gradient(180deg, rgba(10,32,20,.92), rgba(6,20,12,.92)); border-left: 4px solid #e8c34a;
  border-radius: 4px; padding: .35em .7em .45em; min-width: 12em; box-shadow: 0 2px 10px rgba(0,0,0,.4); pointer-events: none; }
.b-hole { display: flex; align-items: baseline; gap: .3em; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: .2em; margin-bottom: .2em; }
.b-hole b { font-size: 1.5em; color: #e8c34a; line-height: 1; } .b-hole small { font-size: .8em; } .b-hole span { margin-left: auto; font-size: .78em; opacity: .85; letter-spacing: .04em; }
.b-row { display: grid; grid-template-columns: 1em 1fr 2.2em 4.4em; align-items: center; gap: .3em; line-height: 1.5; }
.b-row .dot { width: .55em; height: .55em; border-radius: 50%; background: #c33; }
.b-row.me .dot { background: #3a86ff; }
.b-row.turn { background: rgba(232,195,74,.18); }
.b-row .tot { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.b-row .th { text-align: right; font-size: .85em; opacity: .9; }
#logo { position: absolute; right: calc(14px + env(safe-area-inset-right)); top: 14px; text-align: right; line-height: 1.1; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
#logo .live { display: block; font-size: .7em; color: #ff5a5a; font-weight: 800; letter-spacing: .1em; }
#logo b { font-size: 1.4em; letter-spacing: .06em; font-style: italic; } #logo small { display: block; font-size: .7em; opacity: .9; }
#meters { position: absolute; right: calc(14px + env(safe-area-inset-right)); top: calc(14px + 4.2em); background: rgba(6,20,12,.82); border-radius: 6px; padding: .35em .6em; width: 9.5em; pointer-events: none; }
#meters .m { display: flex; align-items: center; gap: .4em; font-size: .8em; line-height: 1.6; }
#meters .m small { white-space: nowrap; font-size: 1em; }
#meters .bar { flex: 1; height: .55em; background: rgba(255,255,255,.18); border-radius: 4px; overflow: hidden; }
#meters .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e8c34a, #ff4d3a); transition: width .5s; }
#meters b { margin-left: auto; }
#goal { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(0,0,0,.45); border-radius: 30px; padding: .2em 1em; font-size: .82em; white-space: nowrap; pointer-events: none; }
#goal b { color: #ffd84a; }
#whisper { position: absolute; left: 50%; top: 3.2em; transform: translateX(-50%); background: rgba(255,250,235,.95); color: #2a2214; border-radius: 12px; padding: .35em 1em .45em; max-width: 70%; pointer-events: none; transition: opacity .3s; }
#whisper small { font-size: .72em; color: #7a5a30; font-weight: 700; }
#whisper p { font-size: .95em; line-height: 1.45; }
#whisper.off { opacity: 0; }
#caption { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(80%, 60em); display: flex; align-items: stretch;
  background: linear-gradient(180deg, rgba(8,26,16,.94), rgba(4,14,8,.94)); border-bottom: 3px solid #e8c34a; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.45); cursor: pointer; }
#caption.off { display: none; }
#caption .who { background: #e8c34a; color: #12200f; font-weight: 800; padding: .5em .7em; display: flex; align-items: center; white-space: nowrap; font-size: .9em; min-width: 4.6em; justify-content: center; }
#caption .who.boss { background: #c8463a; color: #fff; } #caption .who.me { background: #3a86ff; color: #fff; } #caption .who.joushi { background: #8a7a5a; color: #fff; } #caption .who.caddie { background: #5a8a5a; color: #fff; }
#caption p { padding: .5em .9em; line-height: 1.5; flex: 1; }
#caption .next { position: absolute; right: .5em; bottom: .2em; font-size: .7em; font-style: normal; opacity: .6; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .1; } }

/* 自分の番の操作 */
#ctrl { position: absolute; left: 34%; right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: .35em; pointer-events: none; }
#ctrl.off { display: none; }
#ctrl > * { pointer-events: auto; }
.c-info { display: flex; gap: .8em; background: rgba(6,20,12,.85); padding: .25em .9em; border-radius: 30px; font-size: .9em; align-items: baseline; }
.c-info b { color: #ffd84a; }
.c-types { display: flex; gap: .4em; }
.c-types button { background: rgba(6,20,12,.8); border: 2px solid rgba(255,255,255,.35); border-radius: 30px; padding: .25em .9em; font-size: .9em; }
.c-types button.on { background: #ffd84a; color: #1a1a0a; border-color: #ffd84a; font-weight: 800; }
.c-types button small { font-size: .75em; opacity: .8; margin-left: .2em; }
.c-row { display: flex; align-items: flex-end; gap: 1.2em; }
.aim { width: 3.2em; height: 3.2em; border-radius: 50%; background: rgba(6,20,12,.8); border: 2px solid rgba(255,255,255,.5); font-size: 1em; }
.aim:active { background: #ffd84a; color: #000; }
.c-mid { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.c-clubs { display: flex; align-items: center; gap: .5em; background: rgba(6,20,12,.8); border-radius: 30px; padding: .1em .4em; font-size: .85em; }
.c-clubs button { width: 2.2em; height: 2.2em; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); font-size: 1em; font-weight: 800; }
#swing { position: relative; width: 12em; height: 3.6em; border-radius: 12px; border: 3px solid #ffd84a; background: rgba(6,20,12,.85); overflow: hidden; font-size: .95em; font-weight: 800; line-height: 1.2; touch-action: none; }
#swing small { font-size: .75em; font-weight: 400; opacity: .85; }
#swing #powBar { position: absolute; left: 0; bottom: 0; top: 0; width: 0; background: linear-gradient(90deg, rgba(255,216,74,.35), rgba(255,120,60,.7)); z-index: 0; }
#swing span { position: relative; z-index: 1; }
#swing em { position: absolute; right: .4em; top: .2em; font-style: normal; font-size: .8em; z-index: 1; }
#swing.hold span { opacity: .3; }

#choice { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(80%, 44em); background: rgba(255,250,235,.97); color: #2a2214; border-radius: 12px; padding: .7em 1em; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
#choice.off { display: none; }
#choice p { line-height: 1.5; margin-bottom: .5em; }
#choice .btns { display: flex; gap: .6em; flex-wrap: wrap; justify-content: center; }
#choice button { padding: .45em 1.1em; border-radius: 10px; border: 2px solid #2a2214; background: #fff; font-weight: 700; font-size: 1em; color: #2a2214; }
#choice button:first-child { background: #2a2214; color: #fff; }
#choice button small { display: block; font-weight: 400; font-size: .75em; opacity: .8; }

#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 5; }
#fade.on { opacity: 1; }

/* ---------- タイトル・結果 ---------- */
.card { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 6; padding: 4vh 6vw; overflow-y: auto;
  background: radial-gradient(ellipse at center, rgba(8,30,16,.78), rgba(2,8,4,.95)); font-size: calc(clamp(16px, 2.4vmin, 22px) * var(--fz, 1)); }
.card.on { display: flex; justify-content: flex-start; }
.card > :first-child { margin-top: auto; } .card > :last-child { margin-bottom: auto; }
.card .pre { color: #e8c34a; letter-spacing: .2em; font-size: .85em; }
.card h1 { font-size: clamp(36px, 9vmin, 84px); letter-spacing: .08em; margin: .1em 0 .2em; text-shadow: 0 4px 20px rgba(0,0,0,.6); }
.card h2 { font-size: clamp(28px, 6vmin, 56px); margin: .15em 0 .3em; }
.card .tag { line-height: 1.7; margin-bottom: .6em; }
.card .tag b { color: #ffd84a; }
.card .how { list-style: none; line-height: 1.7; font-size: .9em; background: rgba(255,255,255,.08); border-radius: 10px; padding: .4em 1em; margin-bottom: .6em; text-align: left; }
.card .how li::before { content: "・"; }
.load { font-size: .85em; opacity: .8; margin-bottom: .4em; min-height: 1.4em; }
.btn { padding: .55em 2.2em; font-size: 1.15em; font-weight: 800; border-radius: 40px; border: 0; background: #e8c34a; color: #12200f; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.btn:disabled { opacity: .4; }
.fz { font-size: .85em; margin-top: .8em; opacity: .9; }
.fz button { margin-left: .4em; padding: .2em .9em; border: 2px solid rgba(255,255,255,.6); border-radius: 10px; background: transparent; font-size: 1em; }
.fz button.on { background: #fff; color: #12200f; }
.note { font-size: 13px; opacity: .6; margin-top: .8em; }
#endScore { font-size: 1.1em; margin-bottom: .5em; font-variant-numeric: tabular-nums; }
#endScore b { color: #ffd84a; font-size: 1.3em; }
#endBody { line-height: 1.75; max-width: 40em; margin-bottom: 1em; }
#endBody .q { display: block; background: rgba(255,255,255,.08); border-left: 3px solid #e8c34a; padding: .2em .8em; margin: .3em 0; text-align: left; }
#endBody .q small { color: #e8c34a; font-weight: 700; margin-right: .5em; }

.hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: min(92%, 700px); background: #fff8d8; color: #2a1d14; border-radius: 12px; padding: 10px 48px 10px 16px; font-size: 16px; line-height: 1.5; display: none; z-index: 9; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.hint.on { display: block; }
.hint .x { position: absolute; right: 6px; top: 4px; width: 40px; height: 40px; font-size: 26px; background: none; border: 0; color: #2a1d14; }

/* 小さい画面（スマホの横向き） */
body.small #tv { font-size: calc(16px * var(--fz, 1)); }
body.small #bug { min-width: 10.5em; padding: .2em .5em .3em; left: calc(8px + env(safe-area-inset-left)); top: 8px; }
body.small #logo, body.small #meters { right: calc(8px + env(safe-area-inset-right)); }
body.small #logo { top: 8px; } body.small #logo small { display: none; }
body.small #meters { top: 4.2em; width: 8.6em; }
body.small #goal { top: 8px; font-size: 14px; }
body.small #whisper { top: 2.6em; }
body.small #caption { bottom: 6px; width: 86%; }
body.small #ctrl { bottom: 4px; gap: .2em; }
body.small .c-info { font-size: 14px; } body.small .c-types button { font-size: 14px; padding: .15em .7em; }
body.small .aim { width: 2.8em; height: 2.8em; }
body.small #swing { height: 3em; width: 10.5em; }
body.small .card { padding: 10px 4vw; }
body.small .card h1 { font-size: 34px; margin: 0; } body.small .card h2 { font-size: 28px; margin: 0 0 .1em; }
body.small .card .tag { line-height: 1.45; margin-bottom: .3em; } body.small .card .how { line-height: 1.45; padding: .2em .8em; margin-bottom: .3em; }
body.small .btn { padding: .35em 2em; } body.small .fz { margin-top: .4em; } body.small .note { margin-top: .3em; }
body.small #endBody { line-height: 1.5; margin-bottom: .5em; }
body.small .card .how { font-size: 14px; }

/* 文字の大きさ */
body.fz1 { --fz: 1.15; } body.fz2 { --fz: 1.3; }