/* =====================================================================
   デザインの仕上げ（公式キャラクター「キャスカ」と、全体の見た目）
   style.css の後に読み込み、見た目だけを上書きする。
   色はこれまでの配色（紺・青・赤）を基本に、グラデーションと影で
   立体感を足している。キャラクターの画像は img/mascot/*.webp
   （作り方は tools/mascot/README.md）。
   ===================================================================== */
:root{
  --blue-grad:linear-gradient(135deg,#3b8cf0 0%,#2a78d6 55%,#1f5fb3 100%);
  --navy-grad:linear-gradient(135deg,#1c2430 0%,#24324a 60%,#2a3f63 100%);
  --shadow-sm:0 1px 2px rgba(28,36,48,.06), 0 2px 8px rgba(28,36,48,.05);
  --shadow-md:0 4px 14px rgba(28,36,48,.10);
  --shadow-lg:0 12px 32px rgba(28,36,48,.16);
  --c-pokemon:#f2b705; --c-yugioh:#7b4bd6; --c-mtg:#e07b22; --c-onepiece:#e34948;
}
body{
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  background:
    radial-gradient(circle at 1px 1px, rgba(42,120,214,.07) 1px, transparent 0) 0 0/22px 22px,
    var(--page);
}
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 画面の切り替えを少しなめらかに */
.screen.active{ animation:screen-in .28s ease both; }
@keyframes screen-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---- サイドバー ---- */
.sidebar{ background:linear-gradient(180deg,#1c2430 0%,#1a2230 60%,#18202c 100%); }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; padding:2px 6px 6px; }
.brand-logo{ width:36px; height:36px; flex-shrink:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); transition:transform .2s ease; }
.brand:hover .brand-logo{ transform:rotate(-8deg) scale(1.06); }
.brand-text{ display:flex; flex-direction:column; min-width:0; }
.brand-name{ font-size:16px; font-weight:800; color:#fff; letter-spacing:.01em; }
.brand-name span{ color:#5aa2f5; }
.sidebar.collapsed .brand-text{ display:none; }
.sidebar.collapsed .brand{ justify-content:center; }
.nav-btn{ position:relative; transition:background .15s ease, color .15s ease; }
.nav-btn.active{ background:linear-gradient(90deg,rgba(42,120,214,.28),rgba(42,120,214,.08)); }
.nav-btn.active::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:#5aa2f5; }

/* ---- 見出し・カード・ボタン ---- */
.screen-title{ font-size:22px; font-weight:800; display:flex; align-items:center; gap:10px; }
.screen-title::before{ content:""; width:6px; height:22px; border-radius:4px; background:var(--blue-grad); flex-shrink:0; }
.card{ box-shadow:var(--shadow-sm); border-color:rgba(28,36,48,.08); border-radius:14px; }
.card h3{ font-size:15px; }
.stat-tile{ position:relative; overflow:hidden; box-shadow:var(--shadow-sm); border-radius:14px; border-color:rgba(28,36,48,.08); transition:transform .15s ease, box-shadow .15s ease; }
.stat-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-tile::before{ content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--blue-grad); }
.stat-tile[data-icon]::after{ content:none; }
.stat-ico{ position:absolute; right:12px; top:10px; opacity:.22; color:var(--text-primary, #1f2a3a); pointer-events:none; }
.stat-ico .ico{ width:28px; height:28px; margin:0; }
.stat-tile .value{ font-size:26px; font-weight:800; }

.btn{ background:var(--blue-grad); box-shadow:0 2px 6px rgba(42,120,214,.28); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 6px 16px rgba(42,120,214,.35); filter:brightness(1.05); }
.btn:active:not(:disabled){ transform:translateY(0); }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn.secondary{ background:#fff; box-shadow:var(--shadow-sm); }
.btn.secondary:hover:not(:disabled){ background:#f5f8fd; box-shadow:var(--shadow-md); }
.btn.danger{ background:linear-gradient(135deg,#f06463,#e34948); box-shadow:0 2px 6px rgba(227,73,72,.3); }
.btn.attention{ background:linear-gradient(135deg,#f0a21a,#d98c00); }

.field input, .field select, .field textarea{ transition:border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--series-1); box-shadow:0 0 0 3px rgba(42,120,214,.15); }

.tabs{ border-bottom:none; gap:6px; background:rgba(28,36,48,.05); padding:4px; border-radius:12px; width:fit-content; max-width:100%; }
.tab{ border-bottom:none; border-radius:9px; padding:7px 14px; transition:background .15s ease, color .15s ease; }
.tab:hover{ background:rgba(255,255,255,.7); }
.tab.active{ background:#fff; color:var(--series-1); box-shadow:var(--shadow-sm); }

/* 一覧：タイトルごとの色の帯 */
.list-item{ border-radius:12px; transition:transform .15s ease, box-shadow .15s ease; border-color:rgba(28,36,48,.08); }
.list-item:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.room-item{ border-left:4px solid var(--series-1); }
.room-item.t-pokemon{ border-left-color:var(--c-pokemon); }
.room-item.t-yugioh{ border-left-color:var(--c-yugioh); }
.room-item.t-mtg{ border-left-color:var(--c-mtg); }
.room-item.t-onepiece{ border-left-color:var(--c-onepiece); }
.title-tag.t-pokemon{ background:#fff6d6; color:#8a6400; }
.title-tag.t-yugioh{ background:#f1ebfc; color:#5a2fb0; }
.title-tag.t-mtg{ background:#fdeede; color:#a4520f; }
.title-tag.t-onepiece{ background:#fdeceb; color:#b3302f; }

/* ---- 空の一覧：キャスカが寝ている／考えている ---- */
.empty-hint{ padding:18px 8px 10px; line-height:1.7; }
.empty-hint::before{ content:""; display:block; width:92px; height:96px; margin:0 auto 6px; background:url("../img/mascot/sleep.webp") center/contain no-repeat; }
#roomEmptyHint::before, #friendRoomEmpty::before, #resultPendingEmpty::before{ background-image:url("../img/mascot/wait.webp"); }
#deckEmptyHint::before{ background-image:url("../img/mascot/card.webp"); }

/* ---- ホームの大きな見出し ---- */
.hero{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--navy-grad); color:#fff; border-radius:20px; padding:28px 30px; margin-bottom:18px; box-shadow:var(--shadow-lg);
}
.hero::before{ content:""; position:absolute; right:-80px; top:-120px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(90,162,245,.45), transparent 65%); }
.hero::after{ content:""; position:absolute; left:-60px; bottom:-140px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(227,73,72,.22), transparent 65%); }
.hero-text{ position:relative; z-index:1; max-width:520px; }
.hero-kicker{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:#bcd8fb; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:3px 10px; border-radius:20px; margin-bottom:12px; }
.hero-title{ font-size:28px; font-weight:900; line-height:1.3; margin-bottom:10px; letter-spacing:.01em; }
.hero-sub{ font-size:13.5px; line-height:1.8; color:#d3dceb; margin:0 0 18px; }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn.btn-hero{ background:linear-gradient(135deg,#ffffff,#e8f1fd); color:#1c2430; font-size:14px; padding:11px 20px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.btn.btn-hero-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.35); box-shadow:none; font-size:14px; padding:11px 20px; }
.btn.btn-hero-ghost:hover:not(:disabled){ background:rgba(255,255,255,.16); box-shadow:none; }
.hero-mascot-wrap{ position:relative; z-index:1; flex-shrink:0; width:220px; display:flex; flex-direction:column; align-items:center; }
.hero-mascot{ width:196px; height:auto; cursor:pointer; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation:mascot-float 3.2s ease-in-out infinite; }
@keyframes mascot-float{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-8px) rotate(2deg); } }
.hero-bubble{
  position:relative; background:#fff; color:#1c2430; font-size:12px; font-weight:700; line-height:1.5;
  padding:8px 12px; border-radius:14px; margin-bottom:10px; box-shadow:0 6px 16px rgba(0,0,0,.2); text-align:center; max-width:200px;
}
.hero-bubble::after{ content:""; position:absolute; left:50%; bottom:-7px; margin-left:-7px; border:7px solid transparent; border-bottom:0; border-top-color:#fff; }
.hero-bubble.pop{ animation:bubble-pop .35s ease; }
@keyframes bubble-pop{ 0%{ transform:scale(.85); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@media (max-width: 720px){
  .hero{ flex-direction:column-reverse; align-items:stretch; padding:20px 18px; }
  .hero-mascot-wrap{ width:auto; flex-direction:row-reverse; justify-content:center; gap:6px; }
  .hero-mascot{ width:104px; }
  .hero-bubble{ margin:0; align-self:center; max-width:170px; }
  .hero-bubble::after{ left:-7px; bottom:50%; margin:0 0 -7px; border:7px solid transparent; border-left:0; border-right-color:#fff; }
  .hero-title{ font-size:23px; }
}

/* ---- キャスカが出てくる場面 ---- */
.auth-mascot{ display:block; width:92px; margin:-8px auto 2px; filter:drop-shadow(0 6px 10px rgba(28,36,48,.2)); }
.auth-card h1{ text-align:center; }
.brand-accent{ color:var(--series-1); }
.placeholder-mascot{ width:70px; opacity:.9; }
.prep-blocked-notice{ position:relative; padding-left:122px; min-height:130px; }
.notice-mascot{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:92px; }
@media (max-width: 560px){
  .prep-blocked-notice{ padding-left:20px; padding-top:112px; }
  .notice-mascot{ left:50%; top:12px; transform:translateX(-50%); }
}
.result-done{ text-align:center; }
.result-done .welcome-actions{ justify-content:center; }
.result-mascot{ width:130px; margin:-4px auto 4px; display:block; animation:mascot-float 3.2s ease-in-out infinite; }
.disconnect-mascot{ width:84px; margin:0 auto; }
.coming-soon-mascot{ width:150px; margin:0 auto 4px; display:block; animation:mascot-float 3.2s ease-in-out infinite; }
.upsell-mascot{ width:110px; display:block; margin:0 auto 6px; }
.plan-card{ position:relative; overflow:visible; }
.plan-mascot{ position:absolute; right:18px; top:-66px; width:72px; filter:drop-shadow(0 6px 10px rgba(28,36,48,.2)); }
.plan-grid{ margin-top:64px; }
.guide-intro{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.guide-intro img{ width:96px; flex-shrink:0; }
.guide-intro-bubble{ position:relative; background:#fff; border-radius:14px; padding:12px 16px; font-size:13.5px; font-weight:600; line-height:1.7; box-shadow:var(--shadow-sm); }
.guide-intro-bubble::before{ content:""; position:absolute; left:-7px; top:50%; margin-top:-7px; border:7px solid transparent; border-left:0; border-right-color:#fff; }
.my-room-widget{ padding-left:62px; border-radius:14px; }
.widget-face{ position:absolute; left:12px; top:14px; width:40px; }
.toast-notify::before{ content:""; display:inline-block; width:20px; height:20px; margin:-4px 8px -5px 0; vertical-align:middle; background:url("../img/mascot/face.webp") center/contain no-repeat; }

@media (prefers-reduced-motion: reduce){
  .screen.active, .hero-mascot, .result-mascot, .coming-soon-mascot, .hero-bubble.pop{ animation:none; }
}
@media (max-width: 720px){ .plan-grid{ row-gap:78px; } }
.mascot-profile{ display:flex; gap:16px; align-items:center; margin-top:24px; padding:16px; border-radius:14px; background:linear-gradient(135deg,#eef5ff,#fff); border:1px solid #d6e5fa; }
.mascot-profile img{ width:110px; flex-shrink:0; }
.mascot-profile h3{ margin-top:0 !important; }
@media (max-width: 560px){ .mascot-profile{ flex-direction:column; text-align:center; } }

/* ---- イラスト版キャスカに合わせた調整（画像は背景透過のWebP） ---- */
.hero{ min-height:300px; }
.hero-text{ max-width:560px; }
.hero-mascot-wrap{ position:absolute; right:10px; top:0; bottom:0; width:330px; display:block; z-index:1; }
.hero-mascot{ position:absolute; right:30px; top:14px; width:280px; height:auto; filter:drop-shadow(0 12px 22px rgba(0,0,0,.45)); animation:mascot-float 4s ease-in-out infinite; }
@keyframes mascot-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.hero-bubble{ position:absolute; right:250px; top:40px; margin:0; z-index:2; white-space:normal; width:170px; }
.hero-bubble::after{ left:auto; right:-7px; bottom:auto; top:50%; margin:-7px 0 0; border:7px solid transparent; border-right:0; border-left-color:#fff; }
.hero-text{ padding-right:300px; max-width:none; }
@media (max-width: 900px){
  .hero-text{ padding-right:230px; }
  .hero-mascot{ width:220px; right:10px; }
  .hero-bubble{ right:190px; top:24px; width:150px; }
}
@media (max-width: 720px){
  .hero{ flex-direction:column-reverse; padding:0; min-height:0; }
  .hero-mascot-wrap{ position:relative; width:100%; height:250px; right:auto; overflow:hidden; }
  .hero-mascot{ width:210px; right:50%; margin-right:-150px; top:10px; }
  .hero-bubble{ right:auto; left:14px; top:40px; width:140px; }
  .hero-text{ padding:18px 18px 22px; }
}

/* 丸いアイコン（顔） */
.brand-logo, .widget-face, .auth-mascot, .guide-intro img{ border-radius:50%; object-fit:cover; background:#e8f3ff; }
.brand-logo{ border:2px solid #5aa2f5; }
.widget-face{ width:40px; height:40px; border:2px solid #cfe2fa; }
.auth-mascot{ width:84px; height:84px; margin:-4px auto 6px; border:3px solid #cfe2fa; box-shadow:0 6px 14px rgba(28,36,48,.18); filter:none; }
.guide-intro img{ width:86px; height:86px; border:3px solid #cfe2fa; }
.toast-notify::before{ border-radius:50%; }

/* 空の一覧・お知らせのキャスカ（バストアップ） */
.empty-hint::before{ width:120px; height:120px; }
.notice-mascot{ width:100px; }
.result-mascot{ width:170px; }
.coming-soon-mascot{ width:190px; }
.upsell-mascot{ width:140px; }
.placeholder-mascot{ width:96px; }
.disconnect-mascot{ width:110px; }
.plan-mascot{ width:100px; top:-92px; right:10px; }
.plan-grid{ margin-top:90px; }
.mascot-profile img{ width:150px; }

/* バストアップの絵の、枠で切れていた辺のぼかしは画像そのものに入れてある
   （tools/mascot/cutout.py）。ここでは何もしない。 */

/* フレンドID */
.friend-code-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.friend-code{ font-family:ui-monospace, "SFMono-Regular", Consolas, monospace; font-size:15px; font-weight:800; letter-spacing:.08em; padding:4px 10px; border-radius:8px; background:#eef5ff; color:#1f4f9a; border:1px dashed #9cc3f2; }
.friend-code.big{ font-size:20px; padding:6px 14px; }

/* 画質の選択 */
.quality-field{ margin-bottom:12px; }
.quality-field select{ max-width:320px; }

/* カード拡大 */
.zoom-overlay{ padding:12px; }
.zoom-box{ background:#111722; color:#fff; border-radius:14px; width:min(1100px, 100%); height:min(88vh, 900px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.zoom-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:#1c2430; flex-wrap:wrap; }
.zoom-head strong{ font-size:14px; }
.zoom-status{ flex:1; font-size:12px; color:#b9c4d4; min-width:120px; }
.zoom-stage{ flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; background:#0b0f16; cursor:zoom-in; }
.zoom-stage.actual{ display:block; cursor:zoom-out; }
.zoom-stage img{ max-width:100%; max-height:100%; object-fit:contain; }
.zoom-stage.actual img{ max-width:none; max-height:none; }
.zoom-loading{ display:flex; flex-direction:column; align-items:center; gap:8px; color:#b9c4d4; font-size:13px; }
.zoom-loading img{ width:120px; }
.zoom-hint{ color:#8c98aa; padding:6px 12px 10px; margin:0; }
.mini-menu-btn.locked{ opacity:.6; }
.mini-menu-btn.locked .mini-menu-label::after{ content:""; display:inline-block; width:12px; height:12px; margin-left:4px; vertical-align:-1px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 特定商取引法に基づく表記 */
.law-table{ width:100%; min-width:0; border-collapse:collapse; font-size:13.5px; }
.law-table th{ width:30%; text-align:left; vertical-align:top; color:var(--text-primary); font-weight:700; font-size:13px; background:#f4f7fb; padding:10px 12px; border:1px solid var(--grid); }
.law-table td{ padding:10px 12px; border:1px solid var(--grid); line-height:1.8; }
/* サイト全体の「表の最後の行は下線なし」を打ち消して、いちばん下にも線を引く */
.law-table tr:last-child td{ border-bottom:1px solid var(--grid); }
@media (max-width: 560px){
  .law-table, .law-table tbody, .law-table tr, .law-table th, .law-table td{ display:block; width:100%; }
  .law-table th{ border-bottom:none; }
}
.plan-legal{ font-size:12.5px; text-align:right; margin:-4px 0 14px; }

/* 別のタブで使っているときの待機画面 */
.tab-blocked{ position:fixed; inset:0; z-index:2000; background:rgba(18,24,34,.92); display:flex; align-items:center; justify-content:center; padding:20px; }
.tab-blocked-card{ background:#fff; border-radius:18px; max-width:420px; width:100%; padding:26px 24px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.4); }
.tab-blocked-card img{ width:150px; display:block; margin:-6px auto 6px; }
.tab-blocked-card h2{ font-size:17px; margin:0 0 10px; }
.tab-blocked-card p{ font-size:13px; line-height:1.8; color:var(--text-secondary); margin:0 0 18px; }
.tab-blocked-card .btn{ width:100%; font-size:14px; padding:12px; }

/* ---- 「あなたの部屋」のお知らせ：一覧を隠さない・たためる ---- */
body.has-room-widget .main{ padding-bottom:calc(90px + var(--room-widget-space, 0px)); }
.my-room-widget-min{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border); background:#fff; color:var(--text-secondary); font-size:12px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.my-room-widget-min:hover{ background:#f2f6fc; }
.my-room-widget{ padding-right:40px; }
/* たたんだ状態：顔アイコンだけの丸いボタン */
.my-room-widget.minimized{ left:auto !important; right:14px; width:auto; max-width:none; padding:6px; border-radius:40px; cursor:pointer; }
.my-room-widget.minimized > *:not(.widget-face):not(.my-room-widget-min){ display:none !important; }
.my-room-widget.minimized .widget-face{ position:static; width:46px; height:46px; display:block; }
.my-room-widget.minimized .my-room-widget-min{ top:-6px; right:-6px; width:22px; height:22px; font-size:10px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.my-room-widget.minimized::after{ content:""; position:absolute; left:6px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--series-8); box-shadow:0 0 0 2px #fff; }

/* スマホ：コンパクトな1段表示 */
@media (max-width: 880px){
  .my-room-widget:not(.minimized){ padding:10px 40px 10px 58px; }
  .my-room-widget:not(.minimized) .widget-face{ top:10px; left:10px; width:38px; height:38px; }
  .my-room-widget-label{ font-size:11px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .my-room-widget-name{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .my-room-widget-sub{ display:none; }
  .my-room-widget-ready-badge{ margin:4px 0 6px; }
  .my-room-widget-actions{ margin-top:6px; flex-wrap:nowrap; }
  .my-room-widget-actions .btn{ padding:6px 12px; font-size:12px; }
  body.has-room-widget .main{ padding-bottom:calc(84px + var(--room-widget-space, 0px)); }
}

/* =====================================================================
   キャラクターの出し方の整理：画面のあちこちに画像を置くのをやめ、
   背景に1人だけうっすら固定表示する（スクロールしても動かない）。
   残すのは、ロゴ・ホームの見出し・使い方のプロフィール・右下の丸いお知らせ。
   ===================================================================== */
.empty-hint::before{ content:none; display:none; }
.toast-notify::before{ content:none; display:none; }

.bg-mascot{
  position:fixed; right:-2vw; bottom:0; z-index:0; pointer-events:none;
  width:min(42vw, 560px); height:94vh;
  background:url("../img/mascot/stand.webp") right bottom / contain no-repeat;
  opacity:.16;
}
.app-shell{ position:relative; z-index:1; }
/* 奥のキャラがうっすら透けて見える程度に、カードを少しだけ透かす */
.card, .stat-tile{ background:rgba(252,252,251,.9); }
.list-item{ background:rgba(255,255,255,.92); }
/* ホーム（見出しに大きく出ている）と対戦画面では出さない */
body[data-route="/home"] .bg-mascot, body.match-active .bg-mascot{ display:none; }
@media (max-width: 880px){
  .bg-mascot{ width:86vw; height:80vh; right:-14vw; bottom:56px; opacity:.13; }
}

.coming-soon-icon{ font-size:44px; margin-bottom:6px; }
.zoom-spinner{ width:36px; height:36px; border-radius:50%; border:4px solid rgba(255,255,255,.2); border-top-color:#5aa2f5; animation:zoom-spin 1s linear infinite; }
@keyframes zoom-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .zoom-spinner{ animation:none; } }

/* スマホのアドレスバーが出入りしても背景のキャラが動かないように：
   高さは「バーが引っ込んだときの画面の高さ」（lvh）で固定し、画面の上端を基準に置く
   （以前は下端基準・vh だったため、バーの出入りで大きさと位置が変わって見えていた） */
.bg-mascot{
  top:0; bottom:auto;
  height:94vh; height:94lvh;
}
@media (max-width: 880px){
  .bg-mascot{
    top:0; bottom:auto;
    height:100vh; height:100lvh;
    padding-bottom:64px; box-sizing:border-box;  /* 下のメニューバーの分だけ上に置く */
    background-origin:content-box;
  }
}

/* ---- メニュー（サイドバー）：画面に収まらないときは中をスクロールできる ---- */
.sidebar{
  height:100vh; height:100dvh; min-height:0;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:#3a4658 transparent;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:#3a4658; border-radius:6px; }
.sidebar-footer{ flex-shrink:0; }
.nav-btn, .nav-sep, .nav-label, .brand{ flex-shrink:0; }
/* 折りたたみボタンはメニューの外側にはみ出して置いているので、メニューを
   スクロールできるようにすると切れてしまう。画面に固定して同じ位置に出す */
@media (min-width: 881px){
  .sidebar-collapse-btn{ position:fixed; top:18px; left:188px; right:auto; z-index:45; transition:left .18s ease, transform .18s ease; }
  .sidebar.collapsed .sidebar-collapse-btn{ left:52px; }
}

/* 背景のキャラは一番奥（z-index:-1）に置く。以前はアプリ本体の側を重なり順の
   グループ（z-index:1）にしていたため、スマホで開いたメニューが下のメニューバーより
   奥になり、メニューの一番下が隠れていた */
.bg-mascot{ z-index:-1; }
.app-shell{ position:static; z-index:auto; }

/* アプリ内の確認・お知らせダイアログ */
.app-dialog{ position:fixed; inset:0; z-index:3000; background:rgba(12,16,24,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.app-dialog-box{ background:#fff; border-radius:16px; width:100%; max-width:380px; padding:22px 20px 16px; box-shadow:0 20px 50px rgba(0,0,0,.35); animation:dialog-in .16s ease; }
@keyframes dialog-in{ from{ transform:scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
.app-dialog-message{ margin:0 0 18px; font-size:14px; line-height:1.8; white-space:pre-line; color:var(--text-primary); }
.app-dialog-actions{ display:flex; gap:8px; justify-content:flex-end; }
.app-dialog-actions .btn{ min-width:96px; padding:10px 16px; font-size:13.5px; }
@media (max-width: 480px){ .app-dialog-actions .btn{ flex:1; } }

/* カード拡大を頼まれた側の確認 */
.zoom-send-box{ max-width:440px; }
.zoom-send-text{ font-size:13px; line-height:1.7; color:var(--text-secondary); margin:0 0 12px; }
.zoom-send-preview{ position:relative; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; margin-bottom:14px; }
.zoom-send-preview video{ width:100%; height:100%; object-fit:contain; }
.zoom-send-actions{ display:flex; gap:8px; justify-content:flex-end; }
.zoom-send-actions .btn{ min-width:110px; }
/* 対戦準備画面：相手の映像は対戦が始まるまで出さない */
.rtc-locked-note{ display:none; font-size:11.5px; color:var(--muted); margin-top:6px; }
body.remote-media-locked .rtc-locked-note{ display:block; }

/* 対戦相手の評価 */
.rating-group .choice.rate-good.selected{ background:#2a78d6; border-color:#2a78d6; color:#fff; }
.rating-group .choice.rate-bad.selected{ background:#8a93a3; border-color:#8a93a3; color:#fff; }
.rating-group .choice.rate-none.selected{ background:#eef0f2; border-color:#c3c2b7; color:var(--text-primary); }
.rating-summary{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; }
.rating-summary-label{ font-size:12.5px; color:var(--text-secondary); margin-right:auto; }
.rating-pill{ font-size:13px; padding:4px 12px; border-radius:20px; background:#eef5ff; color:#1f4f9a; }
.rating-pill.bad{ background:#f1f2f4; color:#585f68; }
.host-rating{ color:#1f4f9a; font-weight:600; }

/* 結果の選択（勝ち・負け・引き分け）と評価：選んだものがはっきり分かるように */
.choice{ transition:background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease; }
.choice.selected{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(28,36,48,.15); }
.choice.selected::before{ content:"✓ "; font-weight:800; }
.choice.lose.selected{ background:var(--series-8); border-color:var(--series-8); color:#fff; }
.choice.draw{ border-color:#8a93a3; color:#585f68; background:#f4f5f7; }
.choice.draw.selected{ background:#6b7482; border-color:#6b7482; color:#fff; }
/* 選ばれていないものは少し控えめに */
.choice-group:has(.choice.selected) .choice:not(.selected){ opacity:.7; }
.choice-group:has(.choice.selected) .choice:not(.selected):hover{ opacity:1; }

/* 評価のアイコン（絵文字の代わり） */
.ico{ width:1.05em; height:1.05em; vertical-align:-0.15em; margin-right:4px; flex-shrink:0; }
.rate-good .ico, .rating-pill.good .ico, .host-rating .ico{ color:#f2b705; }
.rate-good.selected .ico{ color:#ffe58a; }
.rate-bad .ico, .rating-pill.bad .ico{ color:#8a93a3; }
.rate-bad.selected .ico{ color:#fff; }
.host-rating{ display:inline-flex; align-items:center; }
/* 入力欄の横に「＋ 追加」「登録」ボタン */
.inline-add{ display:flex; gap:8px; align-items:center; }
.inline-add select, .inline-add input{ flex:1; min-width:0; }
.inline-add .btn{ flex-shrink:0; white-space:nowrap; }
.new-deck-field{ background:#f4f8fe; border:1px dashed #b9d3f3; border-radius:10px; padding:10px 12px; }

/* アプリのアイコン（絵文字の代わり）。.ico は文字の大きさに合わせ、文の頭に置く */
svg.ico{ display:inline-block; width:1.1em; height:1.1em; vertical-align:-0.18em; margin-right:5px; flex-shrink:0; }
.nav-btn .ic, .bottom-tabs a .ic, .mini-menu-ic{ display:inline-flex; align-items:center; justify-content:center; }
.nav-btn .ic svg.ico{ width:19px; height:19px; margin:0; }
.bottom-tabs a .ic svg.ico{ width:21px; height:21px; margin:0; }
.mini-menu-ic svg.ico{ width:20px; height:20px; margin:0; }
.hamburger svg.ico, .mini-menu-toggle svg.ico, .auth-modal-close svg.ico{ width:20px; height:20px; margin:0; vertical-align:middle; }

.prep-blocked-title svg.ico{ color:#d9822b; }
.log-entry svg.ico{ width:14px; height:14px; margin-right:4px; vertical-align:-2px; }
.log-ready svg.ico{ color:#2e9e5b; }

/* キャスカの上下の動き：なめらかに動くよう transform で動かす。
   ぼやけの主な原因は大きな画像を縮めて表示していたことなので、画像は表示サイズ
   ぴったりのもの（srcset）を使う。backface-visibility で動いている間の描画を安定させる */
/* 上下にふわふわ動かす。will-change で「一度描いた絵をそのまま滑らせる」ように
   させ、動いている間に毎コマ描き直してチラつく（ザザザとなる）のを防ぐ */
.hero-mascot{ height:auto; will-change:transform; animation:mascot-hover 4s ease-in-out infinite; }
@keyframes mascot-hover{
  0%, 100%{ transform:translate3d(0, 0, 0); }
  50%{ transform:translate3d(0, -6px, 0); }
}

/* デッキ画面：自分のデッキ／相手のデッキ の切り替え */
.deck-kind-tabs{ margin-bottom:14px; }
.deck-kind-tabs .tab{ font-weight:700; }

/* スマホ：キャスカの下がまっすぐ切れて見えないよう、下のほうを背景に溶け込ませる */
@media (max-width: 720px){
  .hero-mascot-wrap{
    -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 98%);
    mask-image:linear-gradient(to bottom, #000 62%, transparent 98%);
  }
}
@media (prefers-reduced-motion: reduce){ .hero-mascot{ animation:none; } }

/* 人のアイコン（有料プランは自分の画像、無料プランは初期アイコン） */
.avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:#e8f1fd; vertical-align:middle; }
.avatar.xs{ width:20px; height:20px; margin-right:6px; }
.avatar.sm{ width:30px; height:30px; }
.avatar.lg{ width:72px; height:72px; }
.avatar-default{ color:#8fb3de; overflow:hidden; }
.avatar-default svg{ width:74%; height:74%; margin-top:18%; }
.account-head{ display:flex; align-items:center; gap:8px; }
.account-head .account-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar-edit{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.avatar-edit-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.avatar-edit-actions label.btn{ cursor:pointer; margin:0; }
.check-row{ display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; }
.check-row input{ width:18px; height:18px; }
.friend-stats-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.friend-stats-title{ flex:1; min-width:200px; }
.friend-stats-title .screen-title{ margin-bottom:4px; }
.result-tag{ font-weight:700; }
.result-tag.win{ color:#2a78d6; }
.result-tag.lose{ color:#c0392b; }
.result-tag.draw{ color:#7a818c; }

/* ログイン・登録まわり */
.auth-links{ text-align:center; margin-top:10px; }
.link-btn{ background:none; border:0; padding:0; color:#2a78d6; font-size:13px; cursor:pointer; text-decoration:underline; }
.auth-sent{ margin-top:12px; padding:10px 12px; border-radius:10px; background:#eaf6ee; color:#1e6b3a; font-size:13px; line-height:1.7; }
.narrow-card{ max-width:520px; }
.check-row.small{ font-weight:400; font-size:13px; margin:6px 0; }
.email-change{ margin-top:8px; }
.email-change summary{ cursor:pointer; color:#2a78d6; font-size:13px; }
.email-change form{ margin-top:10px; }

.qr-warning{ font-size:12.5px; line-height:1.6; color:#8a4b00; background:#fff4e0; border:1px solid #f3cf93; border-radius:8px; padding:8px 10px; margin:6px 0 10px; }

/* ブロック・通報 */
.safety-link-row{ margin-top:14px; text-align:center; }
.safety-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.small-link{ font-size:12px; text-decoration:none; padding:0 4px; color:#8a93a3; }
.admin-entry{ margin-top:12px; }
.admin-report.closed{ opacity:.65; }
.admin-report-head{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.admin-report-body{ display:flex; flex-direction:column; gap:4px; font-size:13.5px; margin-bottom:10px; }
.admin-report-detail{ white-space:pre-wrap; background:#f4f6f9; border-radius:8px; padding:8px 10px; margin-top:4px; }
.btn.danger{ background:#c0392b; }

/* 対戦の録画中の表示（両者の画面に出す） */
.rec-indicator{ display:inline-flex; align-items:center; gap:8px; background:rgba(192,57,43,.92); color:#fff; font-weight:700; font-size:13px; padding:5px 8px 5px 12px; border-radius:20px; }
.rec-indicator.waiting{ background:rgba(60,70,85,.92); }
.rec-dot{ width:10px; height:10px; border-radius:50%; background:#fff; animation:rec-blink 1s steps(2) infinite; }
.rec-indicator.waiting .rec-dot{ animation:none; opacity:.6; }
@keyframes rec-blink{ 50%{ opacity:.2; } }
.rec-stop-btn{ padding:3px 10px; font-size:12px; background:#fff; color:#c0392b; }
@media (prefers-reduced-motion: reduce){ .rec-dot{ animation:none; } }

/* TCGタイトルのタブ：数が多いので、横にスクロールできる1行にする */
.tabs.title-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; max-width:100%; }
.tabs.title-tabs .tab{ flex-shrink:0; white-space:nowrap; }

/* ---- 運営の管理画面（サイトのメニューを隠した、別のレイアウト） ---- */
body.admin-mode .sidebar, body.admin-mode .topbar, body.admin-mode .bottom-tabs,
body.admin-mode .bg-mascot, body.admin-mode #myRoomWidget{ display:none !important; }
body.admin-mode .main{ padding:0 !important; max-width:none !important; margin:0 !important; }
body.admin-mode .app-shell{ display:block !important; }
.admin-shell{ display:flex; min-height:100vh; background:#f3f5f8; }
.admin-nav{ width:210px; flex-shrink:0; background:#1b2432; color:#dfe6f0; padding:18px 12px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; }
.admin-brand{ font-weight:900; font-size:18px; color:#fff; margin:0 6px 14px; }
.admin-brand small{ display:block; font-size:11px; font-weight:600; color:#9fb0c6; margin-top:2px; }
.admin-nav-btn{ text-align:left; background:none; border:0; color:#dfe6f0; font-size:14px; padding:9px 12px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.admin-nav-btn:hover{ background:rgba(255,255,255,.08); }
.admin-nav-btn.active{ background:#2a78d6; color:#fff; font-weight:700; }
.admin-badge{ background:#e34948; color:#fff; font-size:11px; border-radius:10px; padding:1px 7px; }
.admin-nav-back{ margin-top:auto; color:#9fb0c6; font-size:13px; padding:8px 12px; text-decoration:none; }
.admin-main{ flex:1; min-width:0; padding:22px 26px 60px; }
.admin-title{ font-size:20px; margin:0 0 14px; }
.admin-stats{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; margin-bottom:16px; }
.admin-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; font-size:13px; }
.admin-table th, .admin-table td{ padding:8px 10px; border-bottom:1px solid #edf0f3; text-align:left; vertical-align:middle; }
.admin-table th{ background:#f7f9fb; font-size:12px; color:#5a6270; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.admin-table th{ white-space:nowrap; }
.admin-table .tag{ white-space:nowrap; display:inline-block; }
/* 決済の表：IDやメールアドレスが折り返されて縦に伸びないよう、1行で表示（はみ出す分は横にスクロール） */
#billingPaymentTable td, #billingClaimTable td, #billingUserTable td{ white-space:nowrap; }
.admin-table tr.suspended td{ background:#fff4f2; }
.admin-table input[type=text], .admin-table input[type=number]{ width:100%; min-width:70px; padding:5px 7px; font-size:13px; }
.admin-table input[type=number]{ max-width:90px; }
.admin-search{ display:flex; gap:8px; margin-bottom:12px; }
.admin-search input{ flex:1; }
.admin-detail{ margin-top:14px; }
.admin-kv{ display:grid; grid-template-columns:130px 1fr; gap:6px 12px; font-size:13.5px; margin-bottom:14px; }
.admin-kv > div:nth-child(odd){ color:#5a6270; }
.admin-actions{ display:flex; flex-direction:column; gap:10px; }
.admin-action-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.admin-action-row input, .admin-action-row select{ width:auto; min-width:160px; }
.admin-filter{ margin-bottom:10px; font-size:13.5px; }
.admin-title-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.admin-title-form input[type=text]{ flex:1; min-width:150px; }
.admin-pv-chart{ display:flex; flex-direction:column; gap:5px; }
.pv-row{ display:grid; grid-template-columns:48px 1fr 130px; gap:8px; align-items:center; font-size:12.5px; }
.pv-bar{ background:#edf0f3; border-radius:6px; height:14px; overflow:hidden; }
.pv-bar span{ display:block; height:100%; background:#2a78d6; border-radius:6px; }
.pv-num{ color:#5a6270; text-align:right; }
@media (max-width: 760px){
  .admin-shell{ flex-direction:column; }
  .admin-nav{ width:auto; height:auto; position:static; flex-direction:row; flex-wrap:wrap; }
  .admin-brand{ width:100%; margin-bottom:6px; }
  .admin-nav-back{ margin-top:0; }
  .admin-main{ padding:14px 12px 40px; }
  .admin-kv{ grid-template-columns:100px 1fr; }
}

/* ホームのお知らせ（管理画面で書き換える） */
.site-notice{ border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13.5px; line-height:1.7; white-space:pre-wrap; }
.site-notice.info{ background:#eaf2fd; color:#1f4f9a; border:1px solid #c7dbf6; }
.site-notice.warn{ background:#fff4e0; color:#8a4b00; border:1px solid #f3cf93; }

/* 有料プランの料金（キャンペーン） */
.price-old{ display:block; font-size:12px; color:#8a93a3; text-decoration:line-through; font-weight:600; }
.price-campaign{ display:block; color:#e34948; }
.price-until{ display:block; font-size:11px; color:#8a93a3; font-weight:600; }
.plan-cancel-note{ font-size:12px; color:#5a6270; margin-top:6px; }
.subscribe-notes{ font-size:13px; line-height:1.8; padding-left:18px; margin:8px 0 12px; }
/* 管理画面：お知らせメールの見本 */
.mail-preview{ border:1px solid #e3e7ec; border-radius:10px; padding:12px 14px; margin-top:10px; background:#fbfcfd; }
.mail-preview-label{ font-size:12px; font-weight:700; color:#5a6270; margin-bottom:4px; }
.mail-preview-subject{ font-weight:700; margin-bottom:8px; }
.mail-preview-body{ white-space:pre-wrap; word-break:break-word; font-family:inherit; font-size:13px; line-height:1.7; margin:0; }
/* 管理画面：メールの文面 */
.admin-mail-group{ font-size:15px; margin:18px 0 8px; color:#5a6270; }
.admin-mail{ margin-bottom:10px; }
.admin-mail > summary{ cursor:pointer; list-style:none; }
.admin-mail > summary::-webkit-details-marker{ display:none; }
.admin-mail-title{ font-weight:700; margin-right:6px; }
.admin-mail-when{ font-size:12px; color:#6b7380; margin-top:4px; }
.admin-mail[open] > summary{ margin-bottom:12px; }
.admin-mail textarea{ width:100%; font-family:inherit; line-height:1.6; }
.admin-mail-vars{ margin:4px 0 0; padding-left:18px; }
.admin-mail-vars .tag{ margin-left:6px; }
.admin-mail-actions{ display:flex; gap:8px; margin-top:12px; }
/* 管理画面：システムログ */
.admin-log-filter{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; }
.admin-log-filter .tab{ border:1px solid #dde3ea; background:#fff; border-radius:16px; padding:5px 12px; font-size:13px; cursor:pointer; }
.admin-log-filter .tab.active{ background:#1f2a37; color:#fff; border-color:#1f2a37; }
.admin-log-filter .tab .tag{ margin-left:6px; }
.admin-log-table td.nowrap{ white-space:nowrap; }
.admin-log-table .meta{ font-size:12px; color:#6b7380; margin-top:2px; word-break:break-all; }
/* 管理画面：スマホで画面全体が横にはみ出さないように */
.admin-main code, .admin-main .meta{ overflow-wrap:anywhere; word-break:break-all; }
.admin-log-table td{ overflow-wrap:anywhere; }
@media (max-width: 760px){
  /* システムログは、スマホでは1件ずつ縦に並べる（表の横スクロールを出さない） */
  .admin-log-table, .admin-log-table tbody, .admin-log-table tr, .admin-log-table td{ display:block; width:auto; max-width:100%; min-width:0; box-sizing:border-box; }
  .admin-log-table tr:first-child{ display:none; }
  .admin-log-table tr{ border-bottom:1px solid #edf0f3; padding:8px 10px; }
  .admin-log-table td{ border:0; padding:2px 0; }
  .admin-log-table td.nowrap{ display:inline-block; margin-right:8px; font-size:12px; color:#6b7380; }
  .admin-log-table td:nth-child(2){ display:inline-block; }
}
/* 使い方のページ：画面の画像 */
.guide .guide-note{ font-size:12px; color:var(--text-secondary); margin:0 0 10px; }
.guide-toc{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
.guide-toc a{ font-size:13px; padding:5px 11px; border-radius:16px; background:var(--panel-accent, #eef3fb); text-decoration:none; }
.guide h3{ scroll-margin-top:70px; }
.guide h4{ margin:16px 0 6px; font-size:15px; }
.guide-fig{ margin:12px 0 18px; text-align:center; }
.guide-fig img{ max-width:100%; height:auto; border-radius:12px; border:1px solid #dfe5ec; box-shadow:0 4px 14px rgba(20,30,50,.08); }
.guide-fig.pc img{ width:640px; }
.guide-fig.phone img{ width:300px; }
.guide-fig figcaption{ font-size:12px; color:var(--text-secondary); margin-top:6px; }
.guide-figs2{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.guide-figs2 .guide-fig{ margin:6px 0; }
.guide-figs2 .guide-fig.phone img{ width:260px; }