/* =====================================================================
   GROOVIA スタイル（白ベースのクリーンなデザイン）
   ===================================================================== */
:root {
  --bg: #ffffff;
  --soft: #f5f6f8;
  --soft-2: #eef0f4;
  --line: #e6e8ed;
  --text: #1d2129;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-2: #06b6d4;
  --accent-soft: #eff6ff;
  --grad: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: .4em 0; letter-spacing: .01em; }
h2 { font-size: 1.1rem; margin: .9em 0 .5em; }
h1 small, h2 small { font-weight: normal; font-size: .8rem; color: var(--muted); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.big { font-size: 1.8rem; font-weight: 800; margin: .2em 0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
pre { background: var(--soft); padding: 10px; border-radius: 10px; overflow: auto; max-height: 300px; }
code { background: var(--soft); padding: 1px 5px; border-radius: 5px; }
.inline { display: inline; }

/* ---- ヘッダー ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; flex-wrap: wrap; }
.logo { font-weight: 900; font-size: 1.2rem; letter-spacing: .02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo:hover { text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: .92rem; }
.topbar nav a { color: var(--text); }
.topbar nav a:hover { color: var(--accent); text-decoration: none; }
.coins { background: var(--soft); padding: 3px 12px; border-radius: 999px; font-weight: 600; }
.user { color: var(--muted); }
.role { padding: 1px 7px; border-radius: 6px; background: var(--soft); color: var(--muted); font-size: .72rem; }
.role-streamer { background: var(--accent-soft); color: var(--accent); }
.role-admin { background: #eef2ff; color: #4f46e5; }

.container { max-width: 1120px; margin: 0 auto; padding: 20px 24px 64px; }
.narrow { max-width: 460px; margin: 28px auto; }
.narrow.wide { max-width: 720px; }

/* ---- ボタン ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .92rem; cursor: pointer; text-decoration: none; font-family: inherit;
  transition: background .15s, box-shadow .15s, transform .1s; white-space: nowrap; }
.btn:hover { background: #1d4ed8; text-decoration: none; box-shadow: 0 4px 14px rgba(37, 99, 235, .28); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.secondary { background: #fff; border-color: var(--line); color: var(--text); }
.btn.secondary:hover { background: var(--soft); box-shadow: none; }
.btn.danger { background: var(--danger); }
.btn.danger-outline { background: #fff; border-color: #fbcaca; color: var(--danger); }
.btn.danger-outline:hover { background: #fef2f2; box-shadow: none; }
.btn.glow { background: var(--grad); box-shadow: 0 6px 18px rgba(37, 99, 235, .32); }
.btn.small { padding: 5px 12px; font-size: .82rem; }
.btn.tiny { padding: 3px 9px; font-size: .72rem; }
.btn.big { padding: 12px 26px; font-size: 1rem; }
.btn.full { width: 100%; }
.btn.off { background: #9ca3af; }
button.link, .link-btn { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0 4px; font: inherit; font-weight: 600; }
button.link { color: var(--muted); font-weight: normal; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; min-width: 0; }
.row > .btn { flex: none; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--soft); font-size: .8rem; color: var(--text); }
.pill.ok { background: #ecfdf5; color: #047857; }
.pill.warn { background: #fffbeb; color: #b45309; }

/* ---- フォーム ---- */
.form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
input, textarea, select { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--text); width: 100%;
  transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
input[type=range] { padding: 0; border: none; accent-color: var(--accent); }
input[type=range]:focus { box-shadow: none; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
legend { color: var(--muted); padding: 0 6px; font-size: .86rem; }
.role-select { display: flex; flex-direction: column; gap: 8px; }
.role-option { flex-direction: row; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.role-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.alert { padding: 10px 14px; border-radius: 12px; margin: 10px 0; font-size: .92rem; }
.alert ul { margin: 0; padding-left: 1.2em; }
.alert.success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.alert.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert.info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

/* ---- カード・一覧 ---- */
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid.small-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text); display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
a.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 24, 40, .1); }
.card.selectable { cursor: pointer; position: relative; }
.card.selectable input { position: absolute; top: 8px; left: 8px; z-index: 1; }
.card.selectable:has(input:checked) { outline: 2px solid var(--accent); }
.thumb { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #eff6ff, #ecfeff 60%, #f3f5ff); display: flex; align-items: center; justify-content: center;
  position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-emoji { font-size: 3.4rem; }
.room-card .thumb { aspect-ratio: 3 / 4; }
.live-badge { position: absolute; top: 10px; left: 10px; background: var(--grad); color: #fff; font-weight: 800; font-size: .72rem; padding: 2px 9px;
  border-radius: 6px; letter-spacing: .05em; }
.card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.card-title { font-weight: 700; }
.price { color: var(--accent); font-weight: 700; }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.panel h2 { margin-top: .1em; }
.hero { text-align: center; padding: 56px 12px 36px; }
.hero h1 { font-size: 2.1rem; }
.hero p { color: var(--muted); }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.pack-coins { font-size: 1.35rem; font-weight: 800; }
.pack-price { color: var(--muted); margin-bottom: 8px; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { color: var(--muted); font-weight: 600; font-size: .82rem; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.num { text-align: right; }
.plus { color: var(--ok); }
.minus { color: var(--danger); }
.pagination { display: flex; gap: 12px; list-style: none; padding: 0; align-items: center; justify-content: center; margin: 20px 0; }

/* ---- 3D の舞台（共通） ---- */
.stage-block { position: relative; }
.stage-wrap { position: relative; border-radius: var(--radius); overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f1f3f8 70%, #e9ecf3 100%);
  border: 1px solid var(--line); }
.stage { width: 100%; aspect-ratio: 16 / 10; max-height: 72vh; }
.stage canvas { display: block; width: 100%; height: 100%; }
.preview-stage .stage { aspect-ratio: 4 / 3; }
.stage-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .78);
  font-size: 1.05rem; text-align: center; padding: 20px; z-index: 5; color: var(--muted); }
.view-buttons { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 6; }
.cam-box { position: absolute; left: 10px; bottom: 10px; width: 200px; border-radius: 12px; overflow: hidden; background: #111; border: 2px solid #fff;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .18); z-index: 6; cursor: zoom-in; transition: width .2s; }
.cam-box.large { width: min(480px, 70%); cursor: zoom-out; }
.cam-box video { width: 100%; display: block; transform: scaleX(-1); }
.cam-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); pointer-events: none; }
/* アウトカメラは左右反転しない（見たままの向き） */
.cam-box.rear video, .cam-box.rear canvas { transform: none; }
.cam-switch { position: absolute; bottom: 4px; right: 4px; z-index: 3; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17, 24, 39, .55); color: #fff; font-size: 15px; line-height: 30px; cursor: pointer; }
.cam-switch:disabled { opacity: .5; }
.cam-note ~ .cam-switch { bottom: 22px; }
.cam-note { position: absolute; left: 0; right: 0; bottom: 0; font-size: .62rem; color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 6px; }
.cam-status { position: absolute; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, .55); color: #fff; padding: 3px 6px; font-size: .64rem; line-height: 1.45; }
.cam-box.large .cam-status { font-size: .8rem; }
.cam-parts { display: flex; gap: 6px; flex-wrap: wrap; }
.cam-parts .ok { color: #6ee7b7; }
.cam-parts .ng { color: #fca5a5; }
.cam-hint { color: #fde68a; }
.cam-hint.ok { color: #6ee7b7; }
.cam-engine { color: #d1d5db; }

/* ---- グルーヴタイムの表示・演出 ---- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 7; }
.hud { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .92); border: 1px solid #bfdbfe;
  border-radius: 14px; padding: 6px 18px; text-align: center; z-index: 8; min-width: 200px; box-shadow: var(--shadow); }
.hud-title { font-weight: 900; letter-spacing: .12em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hud-timer { font-size: .88rem; color: var(--text); }
.hud-bar { height: 4px; background: var(--soft-2); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.hud-bar div { height: 100%; width: 0; background: var(--grad); }
.board { position: absolute; top: 56px; left: 10px; width: 200px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 10px; font-size: .8rem; z-index: 8; box-shadow: var(--shadow); }
.board-title { font-weight: 800; margin-bottom: 4px; }
.board-title small { color: var(--muted); font-weight: normal; }
.board ol { list-style: none; margin: 0; padding: 0; }
.board li { display: flex; gap: 6px; padding: 1px 0; }
.board li.me { color: var(--accent); font-weight: 800; }
.board .rank { width: 1.4em; text-align: right; color: var(--muted); }
.board .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .combo { color: var(--accent-2); font-size: .74rem; }
.board-me { margin-top: 4px; color: var(--accent); }

.judge { position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%); text-align: center; animation: judge .9s ease-out forwards;
  text-shadow: 0 2px 10px rgba(255, 255, 255, .9); }
.judge-text { font-size: 3rem; font-weight: 900; font-style: italic; letter-spacing: .02em; }
.judge-perfect .judge-text { background: linear-gradient(90deg, #2563eb, #06b6d4, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(37, 99, 235, .35)); }
.judge-great .judge-text { color: var(--ok); }
.judge-good .judge-text { color: #3b82f6; }
.judge-miss .judge-text { color: #9ca3af; font-size: 2rem; }
.judge-combo { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.judge-add { color: var(--accent); font-weight: 800; }
@keyframes judge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  30% { transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.countdown { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; font-weight: 900; animation: judge .8s ease-out forwards;
  color: var(--accent); text-shadow: 0 4px 18px rgba(255, 255, 255, .9); }

.fx { position: absolute; bottom: -60px; animation: floatUp 3s ease-out forwards; }
.fx-hearts { animation-name: floatSway; }
.fx-bounce { animation-name: bounceUp; }
.fx-fireworks { animation-name: burst; bottom: 40%; }
.fx-crown { animation-name: crown; bottom: 50%; }
@keyframes floatUp { to { transform: translateY(-110vh); opacity: 0; } }
@keyframes floatSway { 25% { transform: translate(20px, -25vh); } 50% { transform: translate(-20px, -50vh); } 100% { transform: translate(10px, -100vh); opacity: 0; } }
@keyframes bounceUp { 30% { transform: translateY(-40vh); } 50% { transform: translateY(-30vh); } 100% { transform: translateY(-90vh); opacity: 0; } }
@keyframes burst { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(2.5) translateY(-60px); opacity: 0; } }
@keyframes crown { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 30% { transform: scale(1.4) rotate(10deg); opacity: 1; } 100% { transform: scale(1) translateY(-40vh); opacity: 0; } }
.tip-banner { position: absolute; top: 60px; right: 10px; background: var(--grad); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: .85rem;
  animation: slideIn 4.5s ease-out forwards; max-width: 70%; box-shadow: 0 6px 18px rgba(37, 99, 235, .3); }
.tip-msg { font-size: .85rem; }
@keyframes slideIn { 0% { transform: translateX(120%); } 10% { transform: translateX(0); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* ---- ポップアップ ---- */
.modal { position: fixed; inset: 0; background: rgba(17, 24, 39, .35); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-box { background: #fff; border-radius: 20px; padding: 20px 22px; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(16, 24, 40, .2); }
.result-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.result-table th { color: var(--muted); font-weight: 600; font-size: .8rem; }
.result-table th, .result-table td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
.result-table tr.me { color: var(--accent); font-weight: 800; }
.winner { font-size: 1.05rem; }
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: rgba(17, 24, 39, .3); }
.sheet-box { width: min(520px, 100%); max-height: 82vh; overflow: auto; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(16, 24, 40, .15);
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; animation: sheetUp .22s ease-out; }
@media (min-width: 701px) { .sheet { align-items: center; } .sheet-box { border-radius: 22px; } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; }
.sheet-close { background: var(--soft); border: none; color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet label { color: var(--text); }
#request-modal { z-index: 120; }
.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gift-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 2px; border-radius: 14px; border: 2px solid transparent;
  background: var(--soft); color: var(--text); font: inherit; cursor: pointer; }
.gift-cell.on { border-color: var(--accent); background: var(--accent-soft); }
.gift-cell .gift-icon { font-size: 1.8rem; }
.gift-cell .gift-name { font-size: .72rem; }
.gift-cell .gift-price { font-size: .72rem; color: var(--accent); font-weight: 700; }
.gift-qty { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.qty-btn { border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; background: #fff; color: var(--text); font: inherit; cursor: pointer; }
.qty-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pack-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px; border-radius: 14px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font: inherit; cursor: pointer; }
.pack-cell:hover { border-color: var(--accent); background: var(--accent-soft); }
.pack-cell .pack-coins { font-size: 1.1rem; font-weight: 800; }
.pack-cell .pack-price { color: var(--muted); font-size: .85rem; margin: 0; }

#toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; width: max-content; max-width: 90vw; }
.toast { background: #1f2937; color: #fff; padding: 9px 16px; border-radius: 12px; transition: opacity .5s; font-size: .9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.toast-error { background: #b91c1c; }
.toast-success { background: #047857; }
.toast.hide { opacity: 0; }

.preview { margin-top: 12px; }
.preview-controls { margin-top: 8px; }

/* ---- 共通の小物 ---- */
.feed { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.feed li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.chat-log { list-style: none; margin: 0; padding: 0; overflow: auto; font-size: .88rem; }
.chat-log li { padding: 3px 0; word-break: break-word; }
.chat-log li b { margin-right: 6px; }
.chat-log li.host b { color: var(--accent); }
.chat-log li.gift-line { color: #1d4ed8; }
.request-banner { background: var(--grad); color: #fff; padding: 8px 14px; border-radius: 12px; margin: 6px 0; }
.request-card { background: var(--accent-soft); border: 1px solid #bfdbfe; padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; }
.request-from { font-size: .8rem; color: var(--accent); font-weight: 700; }
.request-body { margin: 4px 0 8px; font-size: 1rem; }
.vcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; position: relative; transition: opacity .3s; }
.vcard canvas { width: 100%; display: block; }
.vcard.idle { opacity: .45; }
.vname { font-size: .76rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vjudge { position: absolute; top: 6px; left: 8px; font-size: .68rem; font-weight: 800; }
.j-perfect { color: var(--accent); } .j-great { color: var(--ok); } .j-good { color: #3b82f6; } .j-miss { color: #9ca3af; }
.viewer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

/* =====================================================================
   配信者の画面（PCでは1画面に収める）
   ===================================================================== */
.studio-body .topbar { display: none; }
main.studio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px;
  height: 100dvh; padding: 12px; background: var(--soft); }
main.studio > .alert { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 150; margin: 0; box-shadow: var(--shadow); }
.studio-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 14px; box-shadow: var(--shadow); }
.studio-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.studio-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-actions { display: flex; align-items: center; gap: 8px; }
.studio-actions form { margin: 0; }
.studio-stage { grid-column: 1; grid-row: 2; min-height: 0; }
.studio-stage .stage-wrap { height: 100%; }
.studio-stage .stage { height: 100%; aspect-ratio: auto; max-height: none; }
.studio-viewers { grid-column: 1; grid-row: 3; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; box-shadow: var(--shadow); }
.studio-label { font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.studio-label small { font-weight: normal; color: var(--muted); margin-left: 6px; }
.viewer-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.viewer-strip .vcard { flex: none; width: 120px; }
.studio-viewers p { margin: 0; }
.studio-side { grid-column: 2; grid-row: 2 / 4; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.card-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px; }
.card-box p { margin: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fit-params { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.fit-params label { font-size: .74rem; }
.fit-params input { padding: 6px 8px; }
.fit-params input[type=range] { margin-top: 10px; }
#fit-form.running { border-color: #bfdbfe; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.mini-settings { position: relative; }
.mini-settings summary { list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); display: flex;
  align-items: center; justify-content: center; color: var(--muted); }
.mini-settings summary::-webkit-details-marker { display: none; }
.mini-settings form { position: absolute; right: 0; top: 34px; width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .14); z-index: 20; display: flex; flex-direction: column; gap: 6px; }
.requests-box { max-height: 26vh; overflow: auto; flex: none; }
.pro-box { flex: none; }
.fit-difficulty { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: .74rem; white-space: nowrap; }
.fit-difficulty select { flex: 1; padding: 5px 8px; }
.fit-limits { margin-top: 4px !important; }
.feed-box { flex: none; height: max(280px, 40vh); padding-top: 6px; }
.feed-box .tab-pane { flex: 1; min-height: 0; overflow: auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 4px; font: inherit; font-size: .86rem; color: var(--muted);
  cursor: pointer; font-weight: 600; }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.chat-form { display: flex; gap: 6px; }
.chat-form input { border-radius: 999px; padding: 8px 14px; }

@media (max-width: 900px) {
  .studio-body { overflow: auto; }
  main.studio { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
  .studio-top { flex-wrap: wrap; }
  .studio-stage .stage-wrap { height: 56vh; }
  .studio-stage .stage { height: 100%; }
  .studio-stage > .cam-box { width: 120px; }
  .feed-box { height: 50vh; flex: none; }
  .requests-box { max-height: none; }
}

/* =====================================================================
   視聴者の画面（全画面。白い舞台に操作を重ねる）
   ===================================================================== */
.live-body { overflow: hidden; height: 100dvh; }
.live-body .topbar { display: none; }
main.live { position: fixed; inset: 0; padding: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 32%, #ffffff 0%, #f4f5f9 55%, #e8ebf2 100%); }
.live .alert { position: absolute; top: 60px; left: 12px; right: 12px; z-index: 50; }
.live-stage { position: absolute; inset: 0; }
.live-stage canvas { display: block; width: 100%; height: 100%; }
.live .request-banner { position: absolute; top: calc(92px + env(safe-area-inset-top)); left: 12px; right: 120px; z-index: 20; margin: 0; font-size: .85rem;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .3); }

.live-top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 16px; }
.live-streamer { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 14px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow); }
.live-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 900; flex: none; }
.live-streamer-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.live-streamer-text b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-streamer-text small { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.live-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9);
  font-size: .78rem; white-space: nowrap; box-shadow: var(--shadow); }
.live-chip.warn { color: #b45309; }
.live-chip.voice-failed, .live-chip.voice-blocked { color: var(--danger); cursor: pointer; }
.live-close { margin-left: auto; width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--text);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.live-close:hover { text-decoration: none; }
.live-sub { position: absolute; top: calc(60px + env(safe-area-inset-top)); left: 12px; z-index: 20; display: flex; gap: 6px; }

.cam-box.live-selfcam { position: absolute; left: auto; bottom: auto; top: calc(60px + env(safe-area-inset-top)); right: 10px; width: 96px; margin: 0; z-index: 21; }
.cam-box.live-selfcam.large { width: min(300px, 72vw); }
.live-selfcam .cam-status { padding: 2px 4px; font-size: .55rem; }
.live-selfcam .cam-parts { gap: 3px; }
.live-selfcam .cam-hint, .live-selfcam .cam-engine { display: none; }
.live-selfcam.large .cam-status { font-size: .72rem; padding: 4px 6px; }
.live-selfcam.large .cam-hint, .live-selfcam.large .cam-engine { display: block; }

.live-gifts { position: absolute; right: 8px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 20; display: flex; flex-direction: column; gap: 6px; }
.gift-btn { width: 52px; padding: 5px 0 3px; border-radius: 14px; border: 1px solid rgba(230, 232, 237, .9); background: rgba(255, 255, 255, .88); color: var(--text);
  display: flex; flex-direction: column; align-items: center; cursor: pointer; font: inherit; box-shadow: var(--shadow); }
.gift-btn:active { transform: scale(.94); }
.gift-btn .gift-icon { font-size: 1.4rem; line-height: 1.2; }
.gift-btn .gift-price { font-size: .6rem; color: var(--accent); font-weight: 700; }

.live-comments { position: absolute; left: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); width: min(62vw, 400px); max-height: 30vh; margin: 0; padding: 0;
  list-style: none; z-index: 15; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column;
  -webkit-mask-image: linear-gradient(to top, #000 72%, transparent); mask-image: linear-gradient(to top, #000 72%, transparent); }
/* コメント欄は指でスクロールできる。少ない時は下に寄せる */
.live-comments::-webkit-scrollbar { display: none; }
.live-comments > li:first-child { margin-top: auto; }
.live-comments li { margin: 2px 0; font-size: .82rem; line-height: 1.45; color: var(--text); animation: commentIn .25s ease-out; word-break: break-word;
  text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 10px rgba(255, 255, 255, .9); }
.live-comments li b { color: #6b7280; margin-right: 6px; font-weight: 700; }
.live-comments li.host b { color: var(--accent); }
.live-comments li.host b::after { content: " 配信者"; font-size: .58rem; background: var(--grad); color: #fff; border-radius: 4px; padding: 0 4px; margin-left: 4px; text-shadow: none; }
.live-comments li.gift-line { color: #1d4ed8; }
@keyframes commentIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.live .hud { top: calc(60px + env(safe-area-inset-top)); }
.live .board { top: calc(170px + env(safe-area-inset-top)); left: 8px; width: 150px; font-size: .72rem; }
.live-fit { position: absolute; top: calc(140px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.live-fit .btn { padding: 8px 16px; font-size: .86rem; }
.live-score { display: flex; gap: 14px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .76rem; letter-spacing: .04em;
  box-shadow: var(--shadow); }
.live-score b { color: var(--accent); font-size: 1rem; margin-left: 4px; }
.live .tip-banner { top: auto; bottom: calc(84px + 22vh); left: 12px; right: auto; font-size: .8rem; max-width: 70%; padding: 5px 12px; }

.live-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
  padding: 16px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
.live-input { flex: 1; min-width: 0; }
.live-input input { width: 100%; border-radius: 999px; padding: 10px 16px; background: rgba(255, 255, 255, .95); font-size: .9rem; box-shadow: var(--shadow); }
.live-icon-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 1.05rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.live-icon-btn.gift { background: var(--grad); border-color: transparent; box-shadow: 0 6px 16px rgba(37, 99, 235, .35); }
.live-icon-btn.on { border-color: var(--ok); box-shadow: 0 0 0 2px rgba(16, 185, 129, .25); }
.live-icon-btn.busy { opacity: .5; }
.live-coin { flex: none; height: 40px; border-radius: 999px; border: 1px solid var(--line); padding: 0 6px 0 12px; background: #fff; color: var(--text);
  font: inherit; font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 4px; cursor: pointer; box-shadow: var(--shadow); }
.live-coin .plus { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-size: .8rem; margin-left: 2px; }

.live-start { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(2px); cursor: pointer; }
.live-start-box { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-weight: 800; color: var(--text); }
.live-start-box small { color: var(--muted); font-weight: normal; }
.live-start-icon { width: 76px; height: 76px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; padding-left: 6px; box-shadow: 0 10px 30px rgba(37, 99, 235, .4); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }
.live-overlay { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .82); font-size: 1.05rem; text-align: center; padding: 20px; color: var(--muted); }
.live-full { z-index: 45; }
.live-resume { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 35; }

/* ---- スマホ（一般ページ） ---- */
@media (max-width: 700px) {
  .container { padding: 14px 14px 48px; }
  .topbar { position: static; padding: 8px 12px; gap: 4px; }
  .logo { font-size: 1.05rem; }
  .topbar nav { flex-wrap: nowrap; overflow-x: auto; gap: 12px; font-size: .82rem; width: 100%; white-space: nowrap; }
  .topbar .user { display: none; }
  .hero { padding: 32px 4px 20px; }
  .hero h1 { font-size: 1.5rem; }
  .stage { aspect-ratio: 3 / 4; max-height: 62vh; }
  .stage-block > .cam-box, .stage-block > .cam-box.large { position: relative; left: auto; bottom: auto; width: 100%; max-width: 320px; margin: 8px auto 0; cursor: default; }
  .board { width: 140px; top: 46px; padding: 6px 8px; font-size: .7rem; }
  .hud { min-width: 0; padding: 4px 10px; top: 6px; }
  .judge-text { font-size: 2.2rem; }
  .countdown { font-size: 3.5rem; }
}
button.link.danger-link { color: var(--danger); }

/* ---- キャラクター管理 ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-chars { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.admin-char .thumb { aspect-ratio: 3 / 4; }
.admin-char .thumb img { object-fit: contain; }
.admin-char-meta { display: flex; align-items: center; justify-content: space-between; }
.admin-char .actions { justify-content: space-between; }
.status-badge { position: absolute; top: 10px; left: 10px; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.status-badge.on { background: #ecfdf5; color: #047857; }
.status-badge.off { background: var(--soft-2); color: var(--muted); }
.thumb-loading { color: var(--muted); font-size: .8rem; }
[data-autothumb].working .thumb-loading { animation: blink 1s infinite; }
[data-autothumb].failed .thumb-loading::after { content: "（作成できませんでした）"; display: block; font-size: .7rem; }
@keyframes blink { 50% { opacity: .35; } }
.thumb-edit { display: flex; align-items: center; gap: 12px; }
.thumb-edit img { width: 72px; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(160deg, #eff6ff, #ecfeff 60%, #f3f5ff); }
.thumb img { object-fit: contain; }

/* ---- 骨格認識の準備状況 ---- */
.track-status { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9; padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); box-shadow: var(--shadow); font-size: .86rem; font-weight: 700; white-space: nowrap; max-width: 92%;
  overflow: hidden; text-overflow: ellipsis; }
.track-status.busy::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%;
  border: 2px solid var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; vertical-align: -1px; }
.track-status.wait { color: #b45309; animation: blink 1.4s infinite; }
.track-status.ok { color: #047857; }
.track-status.error { color: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }
.cam-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff;
  font-size: .62rem; font-weight: 700; text-align: center; padding: 4px; pointer-events: none; }

/* ---- 配信者画面の、スマホだけで使う部品（PCでは隠す） ---- */
.studio-fab, .sheet-x, .studio-backdrop { display: none; }

@media (max-width: 900px) {
  /* 3Dを画面いっぱいに、操作は重ねて表示 */
  .studio-body { overflow: hidden; height: 100dvh; }
  main.studio { display: block; position: fixed; inset: 0; height: 100dvh; min-height: 0; padding: 0;
    background: radial-gradient(ellipse at 50% 32%, #ffffff 0%, #f4f5f9 55%, #e8ebf2 100%); }
  .studio-stage { position: absolute; inset: 0; }
  .studio-stage .stage-wrap { height: 100%; border: none; border-radius: 0; background: transparent; }
  .studio-stage .stage { height: 100%; aspect-ratio: auto; max-height: none; }
  .studio .view-buttons { display: none; }
  .studio-stage > .cam-box, .studio-stage > .cam-box.large { position: absolute; top: calc(56px + env(safe-area-inset-top)); right: 10px; left: auto; bottom: auto;
    width: 104px; max-width: none; margin: 0; z-index: 21; cursor: zoom-in; }
  .studio-stage > .cam-box.large { width: min(300px, 72vw); }
  .studio .cam-note { display: none; }
  .studio .cam-box:not(.large) .cam-hint, .studio .cam-box:not(.large) .cam-engine { display: none; }
  .studio .cam-box:not(.large) .cam-status { font-size: .55rem; padding: 2px 4px; }
  .studio .track-status { bottom: auto; top: 46%; }

  .studio-top { position: absolute; top: 0; left: 0; right: 0; z-index: 22; flex-wrap: nowrap; gap: 6px; background: transparent; border: none;
    box-shadow: none; border-radius: 0; padding: calc(8px + env(safe-area-inset-top)) 10px 0; }
  .studio-top .logo { display: none; }
  .studio-title { gap: 4px; }
  .studio-title b { max-width: 30vw; background: rgba(255, 255, 255, .9); padding: 3px 10px; border-radius: 999px; font-size: .82rem; box-shadow: var(--shadow); }
  .studio-title .pill { background: rgba(255, 255, 255, .9); box-shadow: var(--shadow); font-size: .72rem; padding: 2px 8px; }
  .studio-actions .btn { padding: 6px 12px; font-size: .78rem; }
  .studio .hud { top: calc(48px + env(safe-area-inset-top)); }
  .studio .board { top: calc(150px + env(safe-area-inset-top)); left: 8px; width: 140px; font-size: .7rem; }

  /* 右側の丸ボタン */
  .studio-fab { display: flex; flex-direction: column; gap: 8px; position: absolute; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 22; }
  .studio-fab button { position: relative; width: 56px; padding: 6px 0 4px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow); font-size: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; font-family: inherit; }
  .studio-fab button span { font-size: .58rem; color: var(--muted); font-weight: 700; }
  .studio-fab button.running { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); animation: blink 1.4s infinite; }
  .fab-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: #fff;
    font-size: .65rem; font-style: normal; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

  /* コメントは下に文字で流し、入力欄は一番下 */
  .studio-side { display: contents; }
  .studio-side .feed-box { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: auto; flex: none; min-height: 0; padding: 0 10px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); border: none; border-radius: 0; box-shadow: none; gap: 6px; }
  .feed-box .tabs, .feed-box #tips { display: none !important; }
  .feed-box #chat-log { flex: none; width: min(64vw, 400px); max-height: 28vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: flex !important; flex-direction: column;
    -webkit-mask-image: linear-gradient(to top, #000 72%, transparent); mask-image: linear-gradient(to top, #000 72%, transparent); }
  .feed-box #chat-log li { font-size: .82rem; text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 10px rgba(255, 255, 255, .9); }
  .feed-box .chat-form input { background: rgba(255, 255, 255, .95); box-shadow: var(--shadow); margin-right: 64px; }
  .feed-box .chat-form .btn { display: none; }

  /* グルーヴタイム・リクエスト・視聴者はポップアップ（下から出る） */
  #fit-form, .requests-box, .studio-viewers, .pro-box { display: none; }
  #fit-form.open, .requests-box.open, .studio-viewers.open, .pro-box.open { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 80;
    max-height: 78vh; overflow: auto; border-radius: 22px 22px 0 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); background: #fff;
    border: none; box-shadow: 0 -10px 40px rgba(16, 24, 40, .15); animation: sheetUp .22s ease-out; }
  .studio-viewers.open .viewer-strip { flex-wrap: wrap; overflow: visible; }
  .studio-viewers.open .viewer-strip .vcard { width: calc(33.3% - 6px); }
  .studio-viewers .card-head { display: flex; }
  .sheet-x { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: var(--soft); color: var(--muted); cursor: pointer; flex: none; }
  .studio-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(17, 24, 39, .3); }
  .requests-box { max-height: none; }
}
.studio .pill, .studio-title .pill { white-space: nowrap; }
@media (max-width: 900px) {
  .studio #conn.ok { display: none; }
  .studio .lbl-long { display: none; }
  .studio-title b { max-width: 42vw; }
}
/* 選択中の表示モード（全身・上半身） */
.btn.secondary.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* 背景の選択（360°写真はサムネイル） */
.bg-cell { padding: 6px 4px 8px; }
.bg-cell-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block; }
#bg-sheet.loading .bg-cell.on { animation: pulse 1s infinite; }
.bg-thumb .bg-icon { font-size: 3rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.admin-char .bg-thumb { aspect-ratio: 16 / 10; }
.admin-char .bg-thumb img { object-fit: cover; }
.projection-choice { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: grid; gap: 8px; }
.projection-choice legend { font-weight: 700; padding: 0 4px; }
.projection-choice .check { align-items: flex-start; }

/* キャラクターの種類（無料・販売・持ち込み） */
.status-badge.kind-free { background: #e7f8ee; color: #137a3c; }
.status-badge.kind-premium { background: #fff1d6; color: #9a5a00; }
.status-badge.kind-upload { background: #eef0ff; color: #3d4bd1; }
.char-cell-img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--soft); }
.bg-cell.busy { opacity: .5; pointer-events: none; }
.check.rights { align-items: flex-start; background: var(--soft); padding: 10px 12px; border-radius: 12px; }

/* ---- グルーヴタイム: 参加のしかた（カメラ／タッチ）・タッチモードのレーン ---- */
.fit-join { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.btn.glow.secondary-glow { background: #fff; color: var(--accent); border: 2px solid var(--accent); box-shadow: 0 6px 18px rgba(37, 99, 235, .25); }
.touch-lane { position: absolute; left: 10px; right: 70px; bottom: calc(76px + env(safe-area-inset-bottom)); height: 64px; z-index: 21;
  border-radius: 18px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
  /* 蛍光色（ネオン）のパネル */
  background: linear-gradient(90deg, rgba(14, 6, 40, .86), rgba(36, 6, 64, .82) 55%, rgba(6, 30, 52, .84)); backdrop-filter: blur(3px);
  border: 2px solid rgba(0, 240, 255, .85);
  box-shadow: 0 0 10px rgba(0, 240, 255, .75), 0 0 26px rgba(255, 43, 214, .45), inset 0 0 16px rgba(0, 240, 255, .28);
  animation: neonPanel 2.4s ease-in-out infinite; }
@keyframes neonPanel {
  0%, 100% { border-color: rgba(0, 240, 255, .9); box-shadow: 0 0 10px rgba(0, 240, 255, .75), 0 0 26px rgba(255, 43, 214, .45), inset 0 0 16px rgba(0, 240, 255, .28); }
  50% { border-color: rgba(255, 43, 214, .9); box-shadow: 0 0 12px rgba(255, 43, 214, .8), 0 0 30px rgba(0, 240, 255, .45), inset 0 0 18px rgba(255, 43, 214, .3); } }
.touch-lane canvas { display: block; width: 100%; height: 100%; }
.touch-hint { position: absolute; left: 8px; top: -24px; font-size: .68rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; pointer-events: none;
  background: rgba(14, 6, 40, .88); color: #7dfcff; border: 1px solid rgba(0, 240, 255, .8); box-shadow: 0 0 8px rgba(0, 240, 255, .6); text-shadow: 0 0 6px rgba(0, 240, 255, .9); }
@media (prefers-reduced-motion: reduce) { .touch-lane { animation: none; } }
body.touch-playing .live-comments { bottom: calc(160px + env(safe-area-inset-bottom)); max-height: 20vh; }
@media (pointer: coarse) { .pc-only { display: none; } }
.board .mode { width: 1.3em; text-align: center; font-size: .8em; }
.result-tabs { margin-bottom: 8px; }
.energy-meter { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); margin-top: 6px; }
.energy-meter div { flex: 1; height: 8px; border-radius: 6px; background: var(--soft-2); overflow: hidden; }
.energy-meter i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .3s; }
.energy-meter b { min-width: 7.5em; text-align: right; color: var(--text); font-weight: 700; }

/* 売上・報酬の画面 */
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.stat-label { font-size: .75rem; color: var(--muted); }
.stat-value { font-size: 1.35rem; font-weight: 800; }
.stat-value small { font-size: .75rem; font-weight: normal; margin-left: 2px; }
.bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; }
.bar-chart .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar-chart .bar i { display: block; width: 100%; min-height: 1px; background: var(--grad); border-radius: 3px 3px 0 0; }
.bar-chart .bar span { font-size: .55rem; color: var(--muted); }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.small-input { width: 90px; }
.plan-table th, .plan-table td { text-align: center; }
.plan-table td:first-child { text-align: left; }
.plan-table th.pro, .plan-table td:last-child { background: #eff6ff; }

/* PRO: 分析・配信画面のカスタマイズ・限定演出 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.analytics-table td { vertical-align: top; }
.pro-teaser { border: 2px dashed var(--accent); background: var(--accent-soft); }
.pro-tag { display: inline-block; font-size: .62rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: #fff1d6; color: #9a5a00; vertical-align: middle; }
.pro-tools { display: grid; gap: 8px; margin-top: 8px; }
.pro-tools .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--text); }
.room-banner { position: absolute; left: 50%; transform: translateX(-50%); top: 64px; z-index: 6; max-width: min(92vw, 560px);
  padding: 6px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; }
.studio-stage .room-banner { top: 10px; }
.pro-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pro-fx-confetti i, .pro-fx-winner i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: confettiFall 3.2s linear forwards; }
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); } }
.pro-fx-spotlight { background: radial-gradient(circle at 50% 45%, transparent 0 18%, rgba(0, 0, 0, .72) 34%); animation: spotIn var(--fx-dur, 3.6s) ease forwards; }
@keyframes spotIn { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.pro-fx-rainbow { background: linear-gradient(120deg, rgba(255,0,0,.28), rgba(255,165,0,.28), rgba(255,255,0,.28), rgba(0,200,0,.28), rgba(0,120,255,.28), rgba(140,0,255,.28));
  background-size: 300% 300%; mix-blend-mode: screen; animation: rainbowFlow var(--fx-dur, 3.6s) ease forwards; }
@keyframes rainbowFlow { 0% { opacity: 0; background-position: 0% 50%; } 20%, 80% { opacity: 1; } 100% { opacity: 0; background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .pro-fx-confetti i { animation-duration: 6s; } }
.room-banner.guest-banner { top: calc(14px + env(safe-area-inset-top)); }

/* チャットの安全: 操作メニュー・通報・リアクション */
.live-comments li.actionable, .chat-log li.actionable { pointer-events: auto; cursor: pointer; }
.chat-log li.actionable:hover { background: var(--soft); }
.chat-menu { position: fixed; z-index: 120; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
  padding: 6px; display: flex; flex-direction: column; min-width: 180px; max-width: 280px; }
.chat-menu-head { font-size: .72rem; color: var(--muted); padding: 4px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-menu button { background: none; border: none; text-align: left; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--text); }
.chat-menu button:hover { background: var(--soft); }
.report-sheet:not([hidden]) { display: flex; z-index: 130; }
.report-sheet label { display: block; margin: 8px 0; font-size: .85rem; }
.report-sheet select, .report-sheet textarea { width: 100%; }
.reaction-bar { position: absolute; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 21; display: flex; gap: 4px; padding: 6px;
  background: rgba(255, 255, 255, .95); border-radius: 999px; box-shadow: var(--shadow); }
.reaction-bar button { width: 40px; height: 40px; border: none; background: none; font-size: 1.4rem; cursor: pointer; border-radius: 50%; }
.reaction-bar button:active { transform: scale(1.25); background: var(--soft); }
.fx-reaction { font-size: 2rem; animation: floatUp 2.4s ease-out forwards; }
.nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 9px; background: #e11d48; color: #fff; font-size: .68rem; font-weight: 800; text-align: center; line-height: 18px; }
.moderation-table td { vertical-align: top; }
.mod-actions { display: grid; gap: 4px; min-width: 200px; }
.mod-actions input, .mod-actions select { padding: 4px 8px; font-size: .8rem; }
a.on { font-weight: 800; text-decoration: underline; }
details.pro-box > summary { list-style: none; cursor: pointer; }
details.pro-box > summary::-webkit-details-marker { display: none; }
details.pro-box > summary b::after { content: " ▾"; color: var(--muted); font-size: .8rem; }
details.pro-box[open] > summary b::after { content: " ▴"; }
/* スマホの狭い画面: コメント欄を広く残すため、ボタンを小さくし、コインの数はチャージ画面で見る */
@media (max-width: 460px) {
  .live-bottom { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .live-icon-btn { width: 36px; height: 36px; font-size: .95rem; }
  .live-coin { height: 36px; padding: 0 4px 0 8px; }
  .live-coin #coins { display: none; }
  .reaction-bar { left: 8px; right: 8px; justify-content: space-around; }
}
.effect-admin input, .effect-admin select { padding: 5px 8px; font-size: .85rem; }
.icon-input { width: 3.6em; text-align: center; }
.num-input { width: 6.5em; text-align: right; }
.effect-admin tr.muted td { opacity: .55; }
.effect-new .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

/* 演出アイテム */
.fw-burst { position: absolute; width: 0; height: 0; }
.fw-burst i { position: absolute; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: fwSpark 1.3s ease-out forwards; }
@keyframes fwSpark { 0% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 30px)) scale(.4); opacity: 0; } }
.pro-fx-fireworks { background: linear-gradient(to bottom, rgba(12, 14, 48, .62), rgba(12, 14, 48, .25) 60%, transparent); animation: spotIn var(--fx-dur) ease forwards; }
.pro-fx-stagelight { animation: spotIn var(--fx-dur) ease forwards; mix-blend-mode: screen; }
.pro-fx-stagelight i { position: absolute; top: -10%; width: 18%; height: 120%; transform-origin: 50% 0; filter: blur(6px);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); animation: beamSwing 2.4s ease-in-out infinite alternate; }
@keyframes beamSwing { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.pro-fx-cheer { animation: spotIn var(--fx-dur) ease forwards; }
.cheer-text { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); font-size: clamp(1.8rem, 7vw, 3.4rem); font-weight: 900; color: #fff;
  -webkit-text-stroke: 2px var(--accent); text-shadow: 0 4px 0 var(--accent-2); white-space: nowrap; animation: cheerPop .6s ease-in-out infinite alternate; }
@keyframes cheerPop { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); } }
.cheer-emoji { position: absolute; bottom: -40px; font-size: 2rem; animation: floatUp 2.2s ease-out forwards; }
.pro-fx-winner { background: radial-gradient(circle at 50% 40%, rgba(255, 215, 0, .25), transparent 60%); animation: spotIn var(--fx-dur) ease forwards; }
.winner-box { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); text-align: center; animation: winnerIn .8s cubic-bezier(.2, 1.6, .4, 1) both; }
.winner-cup { font-size: clamp(3rem, 14vw, 6rem); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25)); }
.winner-text { font-size: clamp(1.6rem, 7vw, 3rem); font-weight: 900; letter-spacing: .08em; color: #f4a100; -webkit-text-stroke: 1px #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
@keyframes winnerIn { from { transform: translateX(-50%) scale(.2); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.effect-banner { top: auto; bottom: 10%; }
.gift-tabs { margin-bottom: 8px; }
.effect-cell .gift-price small { color: var(--muted); font-weight: normal; }
@media (prefers-reduced-motion: reduce) { .pro-fx-stagelight i, .cheer-text { animation: none; } }

/* 管理画面 */
.settings-form .panel { margin-bottom: 14px; }
.setting-row { padding: 10px 0; border-top: 1px solid var(--line); }
.setting-row:first-of-type { border-top: none; }
.setting-row input[type=number] { max-width: 180px; }
.settings-save { position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(to top, var(--bg, #f6f7fb) 70%, transparent); z-index: 5; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.admin-nav a { padding: 6px 10px; border-radius: 8px; font-size: .86rem; color: var(--text); text-decoration: none; }
.admin-nav a:hover { background: var(--soft); }
.admin-nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.admin-checks { display: grid; gap: 6px; margin-bottom: 14px; }
.admin-checks .alert { margin: 0; }
.alert.warn { background: #fff8e6; border: 1px solid #f5d48a; color: #8a5a00; }
.stat.todo { border-color: #fda4af; background: #fff1f2; text-decoration: none; color: inherit; }
.grid.admin-menu { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.admin-menu .panel { display: flex; flex-direction: column; gap: 2px; }
.admin-menu .panel h3 { margin: 0 0 6px; }
.admin-menu .panel a { font-weight: 700; margin-top: 6px; }

/* 画像から3Dアバター制作 */
.order-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 0; list-style: none; counter-reset: s; }
.order-steps li { counter-increment: s; background: var(--soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.order-steps li b::before { content: counter(s) ". "; color: var(--accent); }
.order-steps li span { font-size: .8rem; color: var(--muted); }
.order-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.order-card { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; color: inherit; text-decoration: none; box-shadow: var(--shadow); }
.order-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--soft); flex: none; }
.order-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-status { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--soft-2); color: var(--muted); vertical-align: middle; }
.order-status.status-ordered { background: #e0f2fe; color: #0369a1; }
.order-status.status-in_progress { background: #ede9fe; color: #6d28d9; }
.order-status.status-completed { background: #dcfce7; color: #15803d; }
.order-status.status-delivered { background: var(--accent); color: #fff; }
.order-status.status-canceled { background: #fee2e2; color: #b91c1c; }
.order-preview, .order-image { max-width: 100%; max-height: 420px; border-radius: 12px; background: var(--soft); display: block; margin: 0 auto; }
.order-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.rights-check { align-items: flex-start; font-size: .85rem; line-height: 1.5; }
.rights-check input { margin-top: 4px; }
.order-total { background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; }
.order-progress { display: flex; gap: 6px; list-style: none; padding: 0; margin: 10px 0 16px; }
.order-progress li { flex: 1; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: .85rem; font-weight: 700; }
.order-progress li.done { background: var(--accent-soft); color: var(--accent); }
.order-progress li.now { background: var(--accent); color: #fff; }
.order-info { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px 10px; margin: 0 0 12px; }
.order-info dt { color: var(--muted); font-size: .85rem; }
.order-info dd { margin: 0; }
.pre { white-space: pre-wrap; }
.order-delivered { background: var(--accent-soft); border-radius: 12px; padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.order-delivered p { flex-basis: 100%; margin: 0; }
.order-actions { display: grid; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.order-cancel summary { cursor: pointer; color: #b91c1c; font-size: .9rem; }
.order-note { border-top: 1px solid var(--line); padding-top: 10px; }
tr.overdue td { background: #fff7ed; }
.danger-text { color: #b91c1c; }
/* スマホ: 幅の広い表は表の中だけ横にスクロール（ページ全体がはみ出さないように） */
@media (max-width: 700px) {
  main.container .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* テスト環境の帯 */
.test-banner { background: #0f172a; color: #e0f2fe; text-align: center; font-size: .78rem; font-weight: 700; padding: 4px 10px; letter-spacing: .02em; }
.coin-grant { flex-wrap: wrap; align-items: center; gap: 8px; }
.live-body .test-banner, .studio-body .test-banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 200; border-radius: 0 0 8px 8px;
  font-size: .62rem; padding: 2px 10px; opacity: .85; pointer-events: none; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.fit-need-live { color: var(--accent); font-weight: 700; margin-top: 4px !important; }

/* 演出・ギフトの文字は画面の下の方に（キャラクターの顔・体にかぶらないように） */
.studio-stage .tip-banner { top: auto; bottom: 10%; }
.live .effect-banner { bottom: calc(84px + 22vh); }
.feed-box #chat-log > li:first-child { margin-top: auto; }
/* ミュート・ブロック中の人（解除） */
.safety-list { list-style: none; margin: 4px 0 0; padding: 0; }
.safety-list li { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: .85rem; border-bottom: 1px solid var(--line); }
.safety-list li:last-child { border-bottom: none; }
.safety-list li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.safety-box { margin-top: 8px; }
.safety-mobile { display: none; margin-top: 10px; }
@media (max-width: 900px) { .studio-viewers.open .safety-mobile { display: block; } }
.effect-cell { position: relative; } .effect-tag { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: .55rem; font-weight: 800; color: var(--accent); white-space: nowrap; }

/* マイクの音量メーター（配信者） */
.mic-meter { display: inline-flex; align-items: center; gap: 6px; position: relative; width: 120px; height: 28px; border-radius: 999px; background: var(--soft-2);
  overflow: hidden; vertical-align: middle; border: 1px solid var(--line); }
.mic-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #22c55e, #84cc16 60%, #f59e0b 85%, #ef4444); transition: width .06s linear; }
.mic-meter b { position: relative; margin-left: 8px; font-size: .7rem; color: var(--text); white-space: nowrap; }
.mic-meter.off { opacity: .5; }
.mic-meter.quiet b { color: #b91c1c; }
#live-controls { display: inline-flex; align-items: center; gap: 8px; }
#live-controls[hidden] { display: none; }
@media (max-width: 900px) { .mic-meter { width: 72px; } .mic-meter.quiet b { font-size: .58rem; } }

/* 視聴画面: 全身・上半身の切り替え */
.view-switch { position: absolute; top: calc(60px + env(safe-area-inset-top)); right: 12px; z-index: 20; display: flex; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); border: 1px solid var(--line); }
.view-switch button { border: none; background: none; padding: 5px 11px; font: inherit; font-size: .75rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.view-switch button.on { background: var(--accent); color: #fff; }
.view-switch.guest-view { top: calc(14px + env(safe-area-inset-top)); left: 12px; right: auto; }
/* メニューの中のボタン（新規登録など）は白い文字（メニューのリンクの色にしない） */
.topbar nav a.btn:not(.secondary), .topbar nav a.btn:not(.secondary):hover { color: #fff; }
a.btn:not(.secondary):not(.danger-outline):hover { color: #fff; }

/* 規約・案内のページ */
.doc { max-width: 820px; margin: 0 auto; line-height: 1.85; }
.doc h2 { font-size: 1.1rem; margin: 1.6em 0 .5em; padding-left: 10px; border-left: 4px solid var(--accent); }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc-table th { width: 30%; text-align: left; vertical-align: top; background: var(--soft); white-space: normal; }
.doc-table td { vertical-align: top; }
.doc-table ul { margin: 4px 0; }
.doc-links { margin-top: 2em; border-top: 1px solid var(--line); padding-top: 1em; }
.todo { color: #b91c1c; font-weight: 700; }
.faq dt { font-weight: 700; margin-top: 1em; }
.faq dd { margin: .2em 0 0; color: var(--text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form { max-width: 640px; }
.contact-item .contact-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.agree { align-items: flex-start; font-size: .85rem; }
.agree input { margin-top: 4px; }
.legal-links { margin-top: 1.5em; }
/* フッター */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 18px 16px 28px; text-align: center; color: var(--muted); font-size: .78rem; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-bottom: 8px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
.live-body .site-footer, .studio-body .site-footer { display: none; }
@media (max-width: 600px) { .doc-table th { width: 36%; } }
/* 配信者のプロフィール（アイコン・ひとこと） */
.user-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .85rem; flex: none; overflow: hidden; }
.user-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-icon.live-avatar { width: 36px; height: 36px; font-size: 1rem; }
.user-icon.mid { width: 52px; height: 52px; font-size: 1.3rem; }
.user-icon.big { width: 96px; height: 96px; font-size: 2.4rem; margin: 0 auto; display: flex; }
button.live-streamer { border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.room-card .room-link { color: inherit; display: flex; flex-direction: column; flex: 1; }
.room-card .room-link:hover { text-decoration: none; }
.room-card:hover { box-shadow: 0 8px 24px rgba(16, 24, 40, .1); }
.room-card .room-streamer { padding-top: 0; }
.streamer-chip, .streamer-head { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; color: var(--muted);
  cursor: pointer; text-align: left; min-width: 0; }
.streamer-chip:hover span, .streamer-head:hover .streamer-name { color: var(--accent); text-decoration: underline; }
.streamer-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.streamer-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.streamer-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.streamer-card { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.streamer-head { gap: 10px; color: var(--text); }
.streamer-name { font-weight: 700; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streamer-card .streamer-bio { -webkit-line-clamp: 3; margin: 0; }
.live-badge.inline { position: static; flex: none; }
.profile-dialog { border: 0; border-radius: 20px; padding: 26px 22px 20px; width: min(380px, calc(100vw - 32px)); text-align: center; box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
  color: var(--text); background: #fff; }
.profile-dialog::backdrop { background: rgba(17, 24, 39, .45); }
.profile-dialog h3 { margin: 12px 0 6px; overflow-wrap: anywhere; }
.profile-bio { color: var(--muted); font-size: .9rem; margin: 0 0 14px; overflow-wrap: anywhere; }
.profile-dialog .btn-row { justify-content: center; }
.dialog-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.profile-form .icon-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 全身・上半身の切り替え（視聴画面は左の列に並べる。右はギフトのボタン） */
.live-sub .view-switch { position: static; }
.live-sub { align-items: center; }
/* 右のギフトのボタンが上の帯まで伸びないように（はみ出す時はスクロール） */
.live-gifts { max-height: calc(100dvh - 78px - 120px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; }
.live-gifts::-webkit-scrollbar { display: none; }
/* 配信者の画面: 1位からのリクエストを舞台の上に（答えるまで出しておく） */
.stage-request { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 8; width: min(520px, calc(100% - 24px));
  background: rgba(255, 255, 255, .96); border: 2px solid var(--accent); border-radius: 16px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(37, 99, 235, .25);
  animation: req-in .35s ease-out; }
.stage-request .request-from small { color: var(--muted); font-weight: normal; margin-left: 4px; }
.stage-request .request-body { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; max-height: 6.5em; overflow: auto; }
@keyframes req-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 900px) {
  .studio .stage-request { top: calc(50px + env(safe-area-inset-top)); width: calc(100% - 84px); left: 8px; transform: none; animation: none; padding: 8px 10px; }
  .studio .stage-request .request-body { font-size: .95rem; max-height: 4.5em; }
  /* 上の帯: タイトルを縮めて、「配信終了」はいつも画面の中に */
  .studio-top .studio-title { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .studio-top .studio-actions { flex: none; margin-left: auto; }
}
/* ファイルを選ぶ欄（ブラウザの英語の表示の代わり） */
.file-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; margin-top: 4px; font-weight: normal; }
.file-pick .file-native { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.file-pick .file-name { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
.file-pick .file-name.chosen { color: var(--text); }
.profile-form .icon-row .user-icon.big { margin: 0; } .profile-form .icon-row > label { flex: 1 1 260px; }
/* TOPページ: 画像（重ねて切り替え） */
.top-hero { display: grid; margin: 4px 0 18px; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 40px rgba(29, 78, 216, .22); background: #0b1640; position: relative; }
.hero-slide { grid-area: 1 / 1; opacity: 0; transition: opacity .8s ease; }
.hero-slide.on { opacity: 1; }
.hero-slide img { display: block; width: 100%; height: auto; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 8px; }
.hero-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .5); cursor: pointer; }
.hero-dots button.on { background: #fff; box-shadow: 0 0 8px rgba(125, 211, 252, .9); }
.top-cta { margin: 0 0 26px; }
/* TOPページ: サービスの説明 */
.about { margin: 36px 0 12px; }
.about-title { text-align: center; font-size: 1.5rem; margin-bottom: 10px; }
.about-lead { max-width: 760px; margin: 0 auto 22px; line-height: 1.9; text-align: center; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.about-item { background: #fff; border: 1px solid #bfdbfe; border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); }
.about-item h3 { margin: 6px 0 4px; font-size: 1.02rem; color: var(--accent); }
.about-item p { margin: 0; font-size: .88rem; line-height: 1.75; color: var(--text); }
.about-icon { font-size: 1.6rem; }
.about-sub { text-align: center; margin: 28px 0 10px; }
.about-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 auto; max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.about-steps li { counter-increment: step; background: var(--accent-soft); border-radius: 14px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.about-steps li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 900;
  display: flex; align-items: center; justify-content: center; }
.about-steps span { font-size: .84rem; color: var(--muted); }
.about-links { text-align: center; margin-top: 16px; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .top-hero { margin: -6px -4px 14px; border-radius: 14px; }
  .about-grid, .about-steps { grid-template-columns: 1fr; }
  .about-lead { text-align: left; }
}
/* 管理画面: TOPの画像 */
.hero-admin-preview { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; }
.hero-admin-preview.tall { width: auto; max-width: 100%; max-height: 360px; }
/* レベル・ポイント */
.lv-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--grad); color: #fff !important; font-weight: 800; font-size: .74rem;
  letter-spacing: .02em; text-decoration: none !important; white-space: nowrap; }
.lv-badge.big { font-size: 1.3rem; padding: 6px 16px; }
.level-card { display: flex; flex-direction: column; gap: 10px; }
.level-head { display: flex; align-items: center; gap: 16px; }
.level-points { font-size: 1.6rem; font-weight: 800; }
.level-bar { height: 10px; border-radius: 6px; background: var(--soft-2); overflow: hidden; }
.level-bar i { display: block; height: 100%; background: var(--grad); }
.level-table tr.me td { background: var(--accent-soft); font-weight: 700; }
.level-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--accent-soft); border-radius: 14px; padding: 10px 14px; margin: 8px 0 16px; }
.level-strip > div { display: flex; flex-direction: column; gap: 2px; }
.level-discount { color: var(--accent); font-weight: 700; margin: 0 0 6px; }
.alert.levelup a { color: inherit; font-weight: 700; }
.ways { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ways li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.ways-icon { font-size: 1.5rem; line-height: 1; }
.ways li > div { flex: 1; min-width: 0; }
.ways-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.ways-pt { color: var(--accent); font-weight: 800; }
/* 名前の横のレベル */
i.lv { display: inline-block; font-style: normal; font-size: .66em; font-weight: 800; color: #fff; background: var(--grad); border-radius: 999px; padding: 1px 6px;
  margin-left: 4px; vertical-align: .12em; line-height: 1.4; white-space: nowrap; }
.chat-log i.lv, #chat-log i.lv { font-size: .62rem; margin: 0 4px 0 3px; }
/* ロゴ（画像＋文字） */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-mark { width: 30px; height: 30px; flex: none; display: block; }
@media (max-width: 700px) { .logo-mark { width: 26px; height: 26px; } }
.profile-id { margin: 0 0 6px; }
.profile-name { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.profile-name label { flex: 1 1 240px; }
/* 読み込み中（キャラクター・背景を変える時） */
.bg-cell.busy { opacity: 1; position: relative; }
.bg-cell.busy img { opacity: .35; }
.bg-cell.busy::after { content: "Loading…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800;
  color: var(--accent); letter-spacing: .04em; animation: blink 1.2s infinite; }
.thumb-loading-box { width: 72px; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--soft); display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: var(--accent); animation: blink 1.2s infinite; flex: none; }
/* 配信者一覧・視聴者一覧・ランキング */
.community-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.seg { display: inline-flex; align-self: flex-start; background: var(--soft); border-radius: 999px; padding: 3px; gap: 2px; }
.seg a { padding: 6px 16px; border-radius: 999px; color: var(--muted); font-weight: 700; font-size: .9rem; text-decoration: none; }
.seg a.on { background: #fff; color: var(--accent); box-shadow: var(--shadow); }
.tabs-line { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs-line a { padding: 8px 12px; color: var(--muted); font-weight: 700; font-size: .88rem; white-space: nowrap; border-bottom: 3px solid transparent; text-decoration: none; }
.tabs-line a.on { color: var(--accent); border-bottom-color: var(--accent); }
.rank-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rank-mark { font-weight: 800; color: var(--muted); min-width: 2.6em; font-size: .9rem; }
.rank-mark.top { font-size: 1.5rem; line-height: 1; }
.rank-pt { font-weight: 800; color: var(--accent); white-space: nowrap; }
.rank-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rank-list li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.rank-list li.me { border-color: var(--accent); background: var(--accent-soft); }
.rank-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rank-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* 管理画面: キャラクター一覧の上部固定 */
.pin-badge { position: absolute; top: 8px; right: 8px; background: #fff; border: 1px solid #bfdbfe; color: var(--accent); border-radius: 999px; font-size: .72rem;
  font-weight: 800; padding: 1px 8px; }
.pin-moves { display: inline-flex; gap: 4px; }
.pin-setting { align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-char .actions { flex-wrap: wrap; row-gap: 6px; }