/* ============================================================
   コトバ探し2 Vtuber杯 — オンラインモードの見た目
   透明な画面に、ピンクと金色のボタンやカード。角丸・ぷよんと弾む動き。
============================================================ */
:root{
  /* カードや見出しの色。主役の色はピンク、決定ボタンは金色 */
  --ol-navy:#633d7a; --ol-navy2:#402a52; --ol-teal:#ff8fb1; --ol-teal2:#d9587f; --ol-gold:#ffd257; --ol-gold2:#e0a100;
  --ol-ink:#563f5c; --ol-sub:#8a7391; --ol-line:#f1e0e5; --ol-bg:#fffaf4; --ol-pink:#3fc2a2;
  --puyo: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- ぷよん系アニメーション ---------- */
@keyframes olPuyon{ 0%{transform:scale(1)} 30%{transform:scale(1.12,.88)} 55%{transform:scale(.92,1.08)} 75%{transform:scale(1.04,.97)} 100%{transform:scale(1)} }
@keyframes olPop{ 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.12);opacity:1} 80%{transform:scale(.96)} 100%{transform:scale(1)} }
@keyframes olCardIn{ 0%{transform:translateY(40px) scale(.8);opacity:0} 60%{transform:translateY(-8px) scale(1.05);opacity:1} 80%{transform:translateY(3px) scale(.98)} 100%{transform:none} }
@keyframes olSlideL{ 0%{transform:translateX(-360px) rotate(-6deg);opacity:0} 65%{transform:translateX(14px) rotate(1deg);opacity:1} 100%{transform:none} }
@keyframes olSlideR{ 0%{transform:translateX(360px) rotate(6deg);opacity:0} 65%{transform:translateX(-14px) rotate(-1deg);opacity:1} 100%{transform:none} }
@keyframes olFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes olWobble{ 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes olCrownDrop{ 0%{transform:translateY(-60px) scale(.3) rotate(-30deg);opacity:0} 60%{transform:translateY(6px) scale(1.2) rotate(6deg);opacity:1} 80%{transform:translateY(-3px) scale(.95)} 100%{transform:none} }
@keyframes olPulse{ 0%{transform:scale(.3);opacity:.45} 70%,100%{transform:scale(1);opacity:0} }
@keyframes olShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes olSpin{ to{transform:rotate(360deg)} }
@keyframes olDots{ 0%,60%,100%{transform:none;opacity:.35} 30%{transform:translateY(-7px);opacity:1} }
@keyframes olConfetti{ 0%{transform:translateY(-20px) rotate(0);opacity:0} 10%{opacity:1} 100%{transform:translateY(520px) rotate(720deg);opacity:0} }
@keyframes olBannerIn{ 0%{transform:translate(-50%,-50%) scale(.3);opacity:0} 55%{transform:translate(-50%,-50%) scale(1.1);opacity:1} 100%{transform:translate(-50%,-50%) scale(1)} }
@keyframes olFadeOut{ to{opacity:0} }
@keyframes olLotteryFlip{ 0%{transform:rotateX(0)} 100%{transform:rotateX(360deg)} }
.olPuyon{ animation:olPuyon .55s var(--puyo) both; }
body.lightMode .olPuyon, body.lightMode .olPop, body.lightMode .olCardIn{ animation:none !important; }

/* ---------- 画面の土台 ---------- */
#mainArea.online:not(.olPlay){ background:transparent; }
#mainArea.online{ --tile:#f9c440; --tile-lite:#fce4a9; --tile-stroke:#a8641e; --c-str:#f7728b; --c-lis:#47a9cc; --sel:#2c6e75; }
#mainArea.online #onlineOv{ display:flex; align-items:stretch; justify-content:flex-start; padding:26px; background:transparent; }
#mainArea.online.olPlay #onlineOv{ display:none; }
#mainArea.online.olPlay #playRow{ display:flex; }
#mainArea.online.olPlay #scoreArea{ display:block; }
#mainArea.online.olPlay #popRow{ display:grid; }   /* 意味の枠は内容に合わせず4等分（index.html の grid-template-columns を使う） */
#mainArea.online #startOv{ display:none !important; }
.olWrap{ position:relative; width:100%; max-width:1500px; height:100%; }
.olScreen{ position:absolute; inset:0; display:none; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding-top:64px; gap:22px; color:var(--ol-ink); }
.olScreen.act{ display:flex; }
.olScreen > *{ transform-origin:left center; animation:olCardIn .6s var(--puyo) both; }
.olScreen > *:nth-child(2){ animation-delay:.06s; }
.olScreen > *:nth-child(3){ animation-delay:.12s; }
.olScreen > *:nth-child(4){ animation-delay:.18s; }
.olScreen > *:nth-child(5){ animation-delay:.24s; }
.olTitle{ font-family:'Mochiy Pop One',sans-serif; font-size:54px; line-height:1.15; text-align:left; color:var(--ol-ink); letter-spacing:.02em; }
.olTitle small{ display:block; margin-top:8px; font-family:'M PLUS Rounded 1c',sans-serif; font-size:20px; font-weight:800; color:#b862e0; letter-spacing:.12em; }
.olSub{ font-size:22px; font-weight:800; color:var(--ol-sub); text-align:left; }
.olBubbles{ display:none; }
.olBubbles i{ position:absolute; display:block; border-radius:50%; background:rgba(255,255,255,.06); animation:olFloat 4s ease-in-out infinite; }

/* ---------- ボタン ---------- */
.olBtn{
  position:relative; border:0; border-radius:999px; cursor:pointer;
  font-family:'M PLUS Rounded 1c',sans-serif; font-weight:900; color:#fff;
  background:var(--ol-teal); box-shadow:0 6px 0 var(--ol-teal2), 0 12px 22px rgba(0,0,0,.22);
  padding:16px 40px; font-size:26px; line-height:1.2; transition:transform .12s var(--puyo), box-shadow .12s;
}
.olBtn:hover{ transform:translateY(-2px) scale(1.03); }
.olBtn:active{ transform:translateY(4px) scale(.98); box-shadow:0 2px 0 var(--ol-teal2), 0 6px 12px rgba(0,0,0,.2); }
.olBtn:disabled{ opacity:.45; cursor:default; transform:none; }
.olBtn.gold{ background:var(--ol-gold); color:#6b4a00; box-shadow:0 6px 0 #c99a12, 0 12px 22px rgba(0,0,0,.22); }
.olBtn.gold:active{ box-shadow:0 2px 0 #c99a12; }
.olBtn.pink{ background:var(--ol-pink); box-shadow:0 6px 0 #2a9a7f, 0 12px 22px rgba(0,0,0,.22); }
.olBtn.pink:active{ box-shadow:0 2px 0 #2a9a7f; }
.olBtn.ghost{ background:#fff; color:var(--ol-ink); box-shadow:0 4px 0 #dfc6de; border:2px solid #edd5ec; }
.olBtn.ghost:active{ box-shadow:0 1px 0 rgba(0,0,0,.25); }
.olBtn.small{padding:10px 22px;font-size: 27px;}
.olBtn.big{ padding:22px 52px; font-size:32px; }
.olBtn .ico{ margin-right:8px; }

/* ---------- 入口（ホーム） ---------- */
.olEntries{ display:flex; flex-wrap:wrap; gap:26px; max-width:100%; }
.olEntry{
  width:380px; padding:34px 22px 28px; border-radius:30px; border:0; cursor:pointer; text-align:center;
  background:#fff; color:var(--ol-ink); box-shadow:0 12px 0 #cfe0e6, 0 24px 40px rgba(0,0,0,.28);
  font-family:'M PLUS Rounded 1c',sans-serif; transition:transform .16s var(--puyo), box-shadow .16s;
}
.olEntry:hover{ transform:translateY(-8px) rotate(-1deg) scale(1.03); }
.olEntry:active{ transform:translateY(4px) scale(.97); box-shadow:0 4px 0 #cfe0e6, 0 10px 20px rgba(0,0,0,.25); }
.olEntry .em{ display:block; font-size:74px; line-height:1; margin-bottom:12px; animation:olFloat 3.2s ease-in-out infinite; }
.olEntry:nth-child(2) .em{ animation-delay:.5s; } .olEntry:nth-child(3) .em{ animation-delay:1s; }
.olEntry .nm{ display:block; font-family:'Mochiy Pop One',sans-serif; font-size:34px; color:var(--ol-ink); }
.olEntry .ds{ display:block; margin-top:8px; font-size:18px; font-weight:800; color:var(--ol-sub); }
.olEntry.gold{ background:linear-gradient(160deg,#fff7d6,#ffe59a); box-shadow:0 12px 0 #d9b34a, 0 24px 40px rgba(0,0,0,.28); }
.olEntry.gold:active{ box-shadow:0 4px 0 #d9b34a; }
.olEntry:disabled{ opacity:.5; cursor:default; transform:none; }

.olProfile{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:12px 0; max-width:100%; }
.olProfile label{ font-size:18px; font-weight:800; color:var(--ol-ink); }
.olInput{
  border:3px solid #edd5ec; border-radius:16px; padding:10px 16px; min-width:260px;
  font-family:'M PLUS Rounded 1c',sans-serif; font-size:24px; font-weight:800; color:var(--ol-ink); background:#fff; outline:none;
  transition:transform .15s var(--puyo), box-shadow .15s;
}
.olInput:focus{ transform:scale(1.03); box-shadow:0 0 0 6px rgba(255,210,87,.45); }
.olInput.err{ animation:olShake .4s; border-color:var(--ol-pink); }
.olSeg{ display:inline-flex; padding:4px; border-radius:999px; background:#f5e5f5; gap:4px; }
.olSeg button{ border:0; border-radius:999px; padding:8px 18px; font-family:'M PLUS Rounded 1c',sans-serif; font-size:18px; font-weight:900; color:var(--ol-sub); background:transparent; cursor:pointer; transition:transform .15s var(--puyo); }
.olSeg button.act{ background:#fff; color:var(--ol-teal2); animation:olPuyon .45s var(--puyo); }
.olSeg button:active{ transform:scale(.94); }
.olToggle{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; font-size:19px; font-weight:800; color:var(--ol-ink); }
.olToggle i{ position:relative; width:64px; height:34px; border-radius:999px; background:#cdb6ce; border:2px solid #c0a3c1; transition:background .2s; }
.olToggle i::after{ content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .25s var(--puyo); }
.olToggle.on i{ background:var(--ol-teal); }
.olToggle.on i::after{ transform:translateX(30px); }
.olStatus{ position:absolute; left:0; top:8px; display:flex; align-items:center; gap:8px; font-size:18px; font-weight:800; color:var(--ol-sub); }
.olStatus b{ width:12px; height:12px; border-radius:50%; background:#8a97a8; box-shadow:0 0 0 3px rgba(255,255,255,.15); }
.olStatus.on b{ position:relative; background:#5ee08c; }
.olStatus.on b::after{ content:""; position:absolute; inset:-14px; border-radius:50%; background:#24a5a5; pointer-events:none; animation:olPulse 1.8s infinite; }
.olStatus.ng b{ background:#ff7b7b; }

/* ---------- フォーム画面（部屋をつくる／参加） ---------- */
.olPanel{ width:760px; padding:34px 40px 30px; border-radius:32px; background:#fff; color:var(--ol-ink); box-shadow:0 14px 0 #cfe0e6, 0 20px 32px rgba(0,0,0,.3); }
.olPanel h3{ font-family:'Mochiy Pop One',sans-serif; font-size:36px; text-align:center; margin-bottom:18px; }
.olField{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:2px dashed var(--ol-line); }
.olField:first-of-type{ border-top:0; }
.olField[hidden]{ display:none; }
.olField label{ font-size:21px; font-weight:900; color:var(--ol-ink); }
.olField .olInput{ min-width:300px; }
.olField .olSeg{ background:#e8f1f4; }
.olField .olSeg button{ color:var(--ol-sub); }
.olField .olSeg button.act{ background:var(--ol-teal); color:#fff; }
.olField .olToggle{ color:var(--ol-ink); }
.olField .olToggle i{ background:#d9e4ea; border-color:#c7d6de; }
.olCap{ display:inline-flex; align-items:center; gap:8px; }
.olCap button{ width:42px; height:42px; border:0; border-radius:50%; background:var(--ol-teal); color:#fff; font-size:26px; font-weight:900; cursor:pointer; }
.olCap button:active{ transform:scale(.9); }
.olCap b{ min-width:70px; text-align:center; font-family:'Mochiy Pop One',sans-serif; font-size:32px; color:var(--ol-ink); }
.olActions{ display:flex; justify-content:center; gap:16px; margin-top:22px; }
.olHint{ margin-top:10px; text-align:center; font-size:18px; font-weight:800; color:var(--ol-sub); }
.olErr{ min-height:26px; margin-top:6px; text-align:center; font-size:18px; font-weight:900; color:#e0432f; }

/* ---------- プレイヤーカード ---------- */
.olCards{ display:grid; grid-template-columns:repeat(4, 300px); gap:20px; justify-content:center; }
.olCards.two{ grid-template-columns:repeat(2, 360px); }
.olCard{
  position:relative;
  padding:20px 18px 16px;
  border-radius:26px;
  background:#fff;
  color:var(--ol-ink);
  border:5px solid var(--pc, #ccc);
  box-shadow: 0 8px 2px rgba(0,0,0,.18);
  text-align:center;
  min-height:190px;
  animation:olCardIn .7s var(--puyo) both;
  transition:transform .18s var(--puyo), box-shadow .18s;
}
.olCard.empty{ background:rgba(255,255,255,.8); border:4px dashed #e6c8e6; color:var(--ol-sub); box-shadow:none; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; animation:none; }
.olCard.ready{box-shadow: 0 0 0 7px rgba(94,224,140,.7), 0 10px 0 rgba(0,0,0,.2), 0 9px 15px rgba(100,250,150,1);animation:olPuyon .5s var(--puyo) both;}
.olCard.me{ transform:translateY(-6px); }
.olCard.off{ opacity:.45; filter:grayscale(.7); }
.olCard .num{ position:absolute; left:-14px; top:-14px; width:46px; height:46px; border-radius:50%; background:var(--pc); color:#fff; font-family:'Mochiy Pop One',sans-serif; font-size:24px; display:grid; place-items:center; box-shadow:0 4px 0 rgba(0,0,0,.2); }
.olCard .face{width:74px;height:74px;margin: 0 auto 8px auto;border-radius:50%;background:var(--pc);display:grid;place-items:center;font-size:40px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.15);animation:olFloat 3s ease-in-out infinite;}
.olCard .name{ font-family:'Mochiy Pop One',sans-serif; font-size:26px; line-height:1.2; word-break:break-all; }
.olCard .tags{ display:flex; justify-content:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.olCard .tag{ padding:4px 9px; line-height:1.3; border-radius:999px; font-size:18px; font-weight:900; background:#eef4f7; color:var(--ol-sub); }
.olCard .tag.type{ background:#e9f7f5; color:#116b72; }
.olCard .tag.coop{ background:#fff3ce; color:#866021; }
.olCard .tag.host{ background:#ffe1e8; color:#c4485f; }
.olCard .tag.me{ background:var(--ol-teal); color:#fff; }
.olCard .state{ margin-top:10px; font-size:18px; font-weight:900; color:#8a97a8; }
.olCard.ready .state{ color:#1d9d55; }
.olCard .crowns{ position:absolute; right:10px; top:-18px; display:flex; gap:2px; }
.olCard .crowns span{ font-size:30px; filter:drop-shadow(0 3px 0 rgba(0,0,0,.2)); animation:olCrownDrop .7s var(--puyo) both; }
.olCard .crowns span.dim{ opacity:.22; filter:grayscale(1); animation:none; }
/* プライベート（1本勝負）の「〇勝」: 王冠の位置に部屋内の通算勝利数を出す */
.olMatchWins{display:inline-block;padding: 3px 10px 4px;border-radius:999px;background:var(--ol-gold);color:#6b4a00;font-family:'Mochiy Pop One',sans-serif;font-size:17px;line-height:1.2;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.18);}
.olMatchWins b{ font-size:26px; font-weight:400; margin-right:1px; }
.olMatchWins.zero{ background:#eef1f4; color:#8a97a8; box-shadow:0 3px 0 rgba(0,0,0,.08); }
.olCard .matchWins{position:absolute;right: 5px;top: 5px;animation:olCrownDrop .7s var(--puyo) both;}
.olCard .matchWins.zero{ animation:none; }
.olResRow .cr .olMatchWins.zero{ animation:none; }

/* ---------- ロビー ---------- */
.olLobbyHead{ display:flex; align-items:center; gap:18px; padding:12px 22px; border-radius:22px; background:#fff; border:2px solid #edd5ec; font-size:20px; font-weight:800; }
.olLobbyHead .mode{ font-family:'Mochiy Pop One',sans-serif; font-size:26px; color:#966800; }
.olPass{ display:inline-flex; align-items:center; gap:8px; padding:4px 6px 4px 14px; border-radius:999px; background:#f5e5f5; font-family:'Mochiy Pop One',sans-serif; font-size:24px; letter-spacing:.12em; }
.olPass button{ border:0; border-radius:999px; padding:6px 12px; font-family:'M PLUS Rounded 1c',sans-serif; font-size:18px; font-weight:900; background:#fff; color:var(--ol-teal2); cursor:pointer; }
.olPass button:active{ transform:scale(.92); }
.olLobbyBtns{ display:flex; gap:16px; align-items:center; }
.olLobbyNote{font-size: 22px;font-weight:800;color:var(--ol-sub);text-align:left;min-height:24px;margin-bottom: -10px;}

/* ---------- マッチング中 ---------- */
.olMatching{ display:flex; align-items:center; gap:36px; }
#olMatchCards.two{grid-template-columns:360px;grid-template-rows:auto 0 auto;gap: 10px;}
#olMatchCards.two > .olCard{ min-height:220px; }
#olMatchCards.two > .olVsMark{z-index:2;align-self:center;justify-self:center;line-height: 1;pointer-events:none;margin-bottom: 10px;}
.olVsMark{ font-family:'Mochiy Pop One',sans-serif; font-size:64px; color:var(--ol-gold); text-shadow:0 6px 0 rgba(0,0,0,.25); animation:olWobble 1.2s ease-in-out infinite; }
.olDots span{ display:inline-block; animation:olDots 1.2s infinite; }
.olDots span:nth-child(2){ animation-delay:.2s; } .olDots span:nth-child(3){ animation-delay:.4s; }
.olSearchRing{ width:26px; height:26px; border-radius:50%; border:4px solid #edd5ec; border-top-color:var(--ol-teal2); animation:olSpin 1s linear infinite; display:inline-block; vertical-align:middle; margin-right:10px; }

/* ---------- 対戦中のオーバーレイ ---------- */
.olOv{ position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; background:rgba(36,59,83,.86); border-radius:16px; }
.olOv.show{ display:flex; }
.olOvCard{ padding:30px 40px; border-radius:30px; background:#fff; color:var(--ol-ink); text-align:center; border:6px solid var(--ol-gold); box-shadow:0 11px 24px rgba(0,0,0,.4); animation:olPop .55s var(--puyo) both; max-width:94%; }
.olOvCard h2{ font-family:'Mochiy Pop One',sans-serif; font-size:44px; margin-bottom:10px; }
.olOvCard .sub{ font-size:22px; font-weight:800; color:var(--ol-sub); }
.olVs{ display:flex; align-items:center; gap:30px; }
.olVs .olCard:first-child{ animation:olSlideL .7s var(--puyo) both; }
.olVs .olCard:last-child{ animation:olSlideR .7s var(--puyo) both; }
.olVs .olVsMark{ animation:olPop .6s .35s var(--puyo) both, olWobble 1.2s .95s ease-in-out infinite; }
.olVsGrid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.olVsGrid .olCard{ min-height:150px; padding:16px 12px 12px; }
.olVsGrid .olCard .face{ width:56px; height:56px; font-size:30px; }
.olVsGrid .olCard .name{ font-size:20px; }
.olRule{ display:flex; align-items:baseline; justify-content:center; gap:8px; font-family:'Mochiy Pop One',sans-serif; font-size:70px; line-height:1.1; color:var(--ol-teal2); margin:6px 0; }
.olRuleSuffix{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:28px; font-weight:900; color:#9a8fa0; }
.olRule.flip{ animation:olLotteryFlip .5s linear 3, olPop .5s 1.5s var(--puyo) both; }
@keyframes olRuleRolling{ from{ transform:translateY(5px); opacity:.55; } to{ transform:translateY(-3px); opacity:1; } }
.olRule.rolling{ animation:olRuleRolling .075s linear infinite; }
@media (prefers-reduced-motion:reduce){ .olRule.rolling{ animation:none; } }
body.lightMode .olRule.rolling{ animation:none; }
.olWinCrowns{ display:inline-block; font-size:34px; line-height:1.15; vertical-align:middle; letter-spacing:2px; }
.olHpProjectile{ position:fixed; z-index:160; display:grid; place-items:center; border:2px solid #ffffff90; border-radius:25%; box-shadow:inset 0 -4px 0 #0002,0 3px 7px #0003; color:#fff; font-family:var(--tile-font); font-weight:900; font-style:normal; text-shadow:0 2px 2px #0008; pointer-events:none; }
#mainArea.online #board .cell.olHpSpent:not(.sel){ --panel-base:#b8b8b8; }
#mainArea.online #board:not([data-panel-design]) .cell.olHpSpent:not(.sel),
#mainArea.online #board[data-panel-design="current"] .cell.olHpSpent:not(.sel){ background:#b8b8b8; }
.olLeader.off .olPlace{ font-size:20px; }
.olTeamHpMembers{ display:block; max-width:100%; color:#806c83; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.olRuleSelect,.olRoomRules select{ min-width:190px; max-width:100%; padding:9px 14px; border:2px solid #e3c5df; border-radius:12px; background:#fff; color:var(--ol-ink); font:800 21px 'M PLUS Rounded 1c',sans-serif; }
.olRoomRules{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; max-width:950px; padding:13px 18px; border:2px solid #e5cfdf; border-radius:18px; background:#fffaf7; color:var(--ol-ink); }
.olRoomRules[hidden]{ display:none; }
.olRoomRules label{ display:flex; align-items:center; gap:10px; font-size:21px; font-weight:900; }
.olRoomRules > span{ color:var(--ol-sub); font-size:17px; }
.olRoomRules select:disabled{ opacity:1; background:#f5eef5; color:#786480; }
.olRoomRules .olRoomRuleDesc{ flex:1 1 100%; margin-top:-4px; color:#7d6383; font-size:18px; font-weight:800; line-height:1.4; }
.olScreen[data-screen="create"]{ overflow-y:auto; padding-bottom:24px; }
.olScreen[data-screen="create"] .olPanel{ flex-shrink:0; }
.olRuleTime{ font-family:'Mochiy Pop One',sans-serif; font-size:40px; color:var(--ol-ink); }
.olRuleTime b{ color:var(--ol-gold2); }
.olRoundTag{display:inline-block;padding:6px 18px;border-radius:999px;background:var(--ol-navy);color:#fff;font-size: 26px;font-weight:900;margin-bottom:8px;}
.olRes{ display:flex; flex-direction:column; gap:8px; margin:12px 0; min-width:520px; }
.olResRow{ display:flex; align-items:center; gap:12px; padding:8px 16px; border-radius:16px; background:#f3f7f9; animation:olCardIn .5s var(--puyo) both; }
.olResRow.win{ background:#fff3ce; box-shadow:0 0 0 3px var(--ol-gold); }
.olResRow .num{ width:34px; height:34px; border-radius:50%; background:var(--pc); color:#fff; font-family:'Mochiy Pop One',sans-serif; display:grid; place-items:center; font-size:18px; }
.olResRow .nm{ flex:1; text-align:left; font-size:24px; font-weight:900; }
.olResRow .sc{ font-family:'Mochiy Pop One',sans-serif; font-size:30px; color:var(--ol-ink); }
.olResRow .sc small{ font-size:18px; color:var(--ol-sub); font-family:'M PLUS Rounded 1c',sans-serif; }
.olResRow .cr{ font-size:26px; min-width:70px; text-align:right; }
.olResRow .cr span{ display:inline-block; animation:olCrownDrop .6s var(--puyo) both; }
.olResRow .cr span.dim{ opacity:.2; filter:grayscale(1); animation:none; }
.olNext{ margin-top:6px; font-size:22px; font-weight:900; color:var(--ol-teal2); }
.olChamp{ font-family:'Mochiy Pop One',sans-serif; font-size:52px; color:var(--ol-gold2); text-shadow:0 4px 0 #fff, 0 6px 0 rgba(0,0,0,.12); animation:olPuyon .8s var(--puyo) infinite; }
.olRank{ display:flex; flex-direction:column; gap:8px; margin:12px 0; min-width:560px; }
.olRankRow{ display:flex; align-items:center; gap:14px; padding:10px 18px; border-radius:18px; background:#f3f7f9; animation:olCardIn .5s var(--puyo) both; }
.olRankRow.champ{ background:linear-gradient(120deg,#fff7d6,#ffe59a); box-shadow:0 0 0 3px var(--ol-gold); }
.olRankRow .rk{ font-family:'Mochiy Pop One',sans-serif; font-size:30px; min-width:64px; color:var(--ol-ink); }
.olRankRow .num{ width:34px; height:34px; border-radius:50%; background:var(--pc); color:#fff; font-family:'Mochiy Pop One',sans-serif; display:grid; place-items:center; font-size:18px; }
.olRankRow .nm{ flex:1; text-align:left; font-size:24px; font-weight:900; }
.olRankRow .wn{ font-size:24px; }
.olConfetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.olConfetti i{ position:absolute; top:0; width:12px; height:18px; border-radius:3px; animation:olConfetti 2.6s ease-in infinite; }
.olBanner{ position:absolute; left:50%; top:50%; z-index:13; padding:16px 40px; border-radius:999px; background:var(--ol-gold); color:#6b4a00; font-family:'Mochiy Pop One',sans-serif; font-size:40px; box-shadow:0 8px 0 #c99a12, 0 11px 22px rgba(0,0,0,.3); animation:olBannerIn .5s var(--puyo) both, olFadeOut .4s 1.5s both; pointer-events:none; white-space:nowrap; }

/* 開始演出・結果はメイン画面内に収め、長い一覧だけをスクロールする。 */
@keyframes olResultIn{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:none; } }
.olMatchOv{inset:24px 26px;z-index:95;padding: 15px;border-radius:28px;overflow:hidden;justify-content:flex-start;}
.olIntro{ width:1120px; max-width:100%; max-height:100%; text-align:center; }
.olVs{ justify-content:center; }
.olVs > .olCard{ width:360px; min-width:0; }
.olMatchOv .olOvCard{ display:flex; flex-direction:column; width:1040px; max-width:100%; max-height:100%; min-height:0; animation:olResultIn .3s ease-out both; }
.olMatchOv .olOvCard > *{ flex-shrink:0; }
.olMatchOv .olRoundTag{ align-self:center; }
.olMatchOv .olOvCard h2{ font-size:36px; line-height:1.35; overflow-wrap:anywhere; }
.olMatchOv .olChamp{font-size: 45px;line-height:1.35;overflow-wrap:anywhere;animation:none;}
.olMatchOv .olRank, .olMatchOv .olRes{ flex:0 1 auto; min-width:0; min-height:0; padding:4px; overflow-y:auto; overflow-x:hidden; }
.olMatchOv .olRankRow, .olMatchOv .olResRow{ flex:none; }
.olMatchOv .nm{ min-width:0; overflow-wrap:anywhere; }
.olMatchOv .olRankRow .nm, .olMatchOv .olResRow .nm{ font-size:22px; }
.olMatchOv .rk, .olMatchOv .num, .olMatchOv .wn, .olMatchOv .sc, .olMatchOv .cr{ flex:none; white-space:nowrap; }
.olMatchOv .olActions{ flex-wrap:wrap; align-items:center; }
.olMatchOv .olActions .olBtn{ white-space:nowrap; }
.olMatchOv .olActions .olBtn.big{ font-size:26px; padding:18px 32px; }

/* ---------- 対戦中の順位表 ---------- */
#olRank{ display:none; flex:none; margin:0 0 8px; padding:8px 10px; border-radius:14px; background:#f3f7f9; }
#mainArea.olLargeBattle #olRank{ display:flex; }
.olRankItem{ display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:10px; font-weight:900; font-size:19px; color:var(--ol-ink); transition:transform .3s var(--puyo); }
.olRankItem .num{ width:26px; height:26px; border-radius:50%; background:var(--pc); color:#fff; font-family:'Mochiy Pop One',sans-serif; font-size:18px; display:grid; place-items:center; flex:none; }
.olRankItem .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.olRankItem .sc{ font-family:'Mochiy Pop One',sans-serif; font-size:22px; }
.olRankItem.me{ background:#fff; box-shadow:0 0 0 2px var(--ol-teal); }
.olRankItem.bump .sc{ animation:olPuyon .5s var(--puyo); }
#foundList li.olBy{ animation:flIn .35s var(--puyo) both; }
#foundList li .olBadge{ width:26px; height:26px; border-radius:50%; background:var(--pc); color:#fff; font-family:'Mochiy Pop One',sans-serif; font-size:18px; display:grid; place-items:center; flex:none; margin-right:6px; }

/* ---------- 得点カード（オンライン） ---------- */
#mainArea.online .scCard{ border-color:var(--pc, #ccc); }
#mainArea.online .scCard .sc-label{ color:var(--pc, #333); }
#mainArea.online .scCard .sc-num{ color:var(--pc, #333); }
#mainArea.online .scCard .sc-num.bump{ animation:olPuyon .5s var(--puyo); }
#mainArea.online #vsText{ animation:olWobble 2s ease-in-out infinite; }
.olCell{ transition:background .18s; }
.cell.olFlash{ animation:olPuyon .6s var(--puyo); }

/* ---------- 操作パネル（配信者だけが見る） ---------- */
.olPanelStatus{display:flex;align-items:center;gap:8px;font-size:18px;font-weight: 500;color:#526878;}
.olPanelStatus b{ width:10px; height:10px; border-radius:50%; background:#8a97a8; }
.olPanelStatus.on b{ background:#2fbf71; }
.olPanelStatus.ng b{ background:#e0432f; }
.olPanelPass{ margin-top:8px; padding:8px 10px; border-radius:10px; background:#f1f5f8; font-family:'Mochiy Pop One',sans-serif; font-size:22px; letter-spacing:.1em; color:#243b53; text-align:center; }
.olPanelSmall{ font-size:18px; color:#657b8b; line-height:1.6; }
.olPanelHelp > summary{ display:flex; align-items:center; gap:9px; margin:0; padding:0; color:#9964a4; font-size:22px; font-weight:900; line-height:1.45; list-style:none; cursor:pointer; }
.olPanelHelp > summary::-webkit-details-marker{ display:none; }
.olPanelHelp > summary::before{ content:''; flex:none; width:5px; height:17px; border-radius:3px; background:#b68abd; }
.olPanelHelp > summary::after{ content:'▼'; flex:none; margin-left:auto; color:#b68abd; font-size:18px; transition:transform .18s; }
.olPanelHelp[open] > summary::after{ transform:rotate(180deg); }
.olPanelHelp[open] > summary{ margin-bottom:12px; }
.olPanelHelp > summary:focus-visible{ outline:3px solid #b165aa; outline-offset:5px; border-radius:4px; }
.olMatchActions{ display:flex; align-items:stretch; gap:24px; max-width:100%; }
.olMatchActions .olBtn{ white-space:nowrap; }

/* ---------- Eve Tools 連携（アカウント） ---------- */
.olAccCard{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; padding:12px 20px; border-radius:22px; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.18); max-width:1100px; }
.olAccCard.linked{ background:rgba(255,255,255,.14); border-color:rgba(255,210,87,.55); }
.olAccMain{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.olAccMain b{ font-family:'Mochiy Pop One',sans-serif; font-size:24px; }
.olAccTag{ padding:4px 12px; border-radius:999px; background:var(--ol-gold); color:#6b4a00; font-size:18px; font-weight:900; }
.olAccTag.guest{ background:rgba(255,255,255,.2); color:#e6f4f5; }
.olAccType{ padding:3px 10px; border-radius:999px; background:rgba(36,165,165,.35); color:#e6f4f5; font-size:18px; font-weight:900; }
.olAccNote{ font-size:18px; color:#cfe6e9; font-weight:800; }
.olAccStats{ display:flex; gap:18px; align-items:center; font-size:18px; font-weight:800; color:#e6f4f5; }
.olAccStats b{ font-family:'Mochiy Pop One',sans-serif; font-size:22px; color:#fff; margin:0 4px; }
.olAccStats i{ font-style:normal; padding:2px 8px; border-radius:999px; background:rgba(255,210,87,.25); color:var(--ol-gold); font-size:18px; }
.olExpBar{ display:inline-block; width:90px; height:10px; border-radius:999px; background:rgba(0,0,0,.3); vertical-align:middle; overflow:hidden; margin-left:6px; }
.olExpBar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--ol-teal),#7ee0e0); transition:width .6s var(--puyo); }
.olAccNext{ width:100%; text-align:center; font-size:18px; font-weight:800; color:#cfe6e9; }
.olAccNext b{ color:var(--ol-gold); font-family:'Mochiy Pop One',sans-serif; font-size:18px; }
.olSeg.locked button{ opacity:.7; cursor:default; }
.olLinkUrl{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:14px; background:#f3f7f9; font-size:18px; font-weight:800; color:var(--ol-teal2); word-break:break-all; margin-bottom:6px; }
.olInput.olCode{ font-family:'Mochiy Pop One',sans-serif; font-size:40px; letter-spacing:.3em; text-align:center; min-width:320px; }
.olRewards{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; margin:6px 0 4px; padding:12px 16px; border-radius:18px; background:#f3f7f9; animation:olCardIn .6s .4s var(--puyo) both; }
.olRewards.guest{ font-size:18px; color:var(--ol-sub); font-weight:800; }
.olRw{ display:inline-flex; flex-direction:column; align-items:center; font-size:18px; font-weight:900; color:var(--ol-sub); }
.olRw b{ font-family:'Mochiy Pop One',sans-serif; font-size:30px; color:var(--ol-teal2); animation:olPuyon .7s .6s var(--puyo) both; }
.olRw small{ font-size:18px; color:var(--ol-sub); }
.olRw small.up{ color:#c4485f; font-weight:900; animation:olPuyon .6s .9s var(--puyo) both; }
.olGoal{ width:100%; text-align:center; font-size:18px; font-weight:900; color:var(--ol-ink); }
.olGoal b{ color:var(--ol-gold2); font-family:'Mochiy Pop One',sans-serif; font-size:22px; }

/* ホーム: パーツ画像の見出しと、淡い4色のゲームモードカード */
#mainArea.online #onlineOv{ padding:25px 0 0 25px; }
.olScreen[data-screen="home"]{ width:1100px; max-width:100%; padding-top:24px; gap:14px; }
.olHomeView .olStatus{ left:auto; right:max(0px,calc(100% - 1100px)); top:-18px; font-size:18px; padding:3px 9px; }
.olHomeFrame{ width:100%; max-width:100%; flex-shrink:0; border:2px solid #f0bddf; border-radius:28px; background:linear-gradient(125deg,#fffefdfc,#fffcfffa); box-shadow:inset 0 0 0 6px #fff9fc,0 4px 0 #ead4e3,0 6px 13px #68456612; }
.olHomeIcon{ display:inline-block; width:24px; height:24px; flex:none; vertical-align:middle; }
.olHomeHeading{ margin:0; line-height:0; }
.olHomeHeading img{ display:block; width:300px; height:auto; max-width:100%; user-select:none; }
.olHomeProfile{position:relative;display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:138px 1fr;align-items:start;gap:0 32px;height: 347px;padding: 42px 30px 18px;}
.olPlayerHeading{ position:absolute; top:-20px; left:-12px; z-index:1; }
.olPlayerHeading img{width: 300px;}
.olNicknameRow{ grid-column:2; grid-row:1; min-width:0; width:100%; }
.olHomeProfile .olNicknameRow label{ display:flex; align-items:center; gap:9px; margin-bottom:12px; line-height:1.3; color:#705080; font-size:24px; font-weight:900; }
.olNicknameRow label .olHomeIcon{ width:23px; height:27px; color:#ed66ae; }
.olNicknameFields{ display:flex; align-items:center; gap:20px; }
.olNicknameRow #olNameSave{ display:flex; align-items:center; justify-content:center; gap:12px; flex:0 0 178px; height:70px; padding:12px 24px; border:2px solid #ff88bc; border-radius:21px; color:#fff; background:linear-gradient(#ff79b1,#ed3e8e); box-shadow:inset 0 0 0 3px #ffd7e8,0 4px 0 #eaa5c3,0 8px 15px #c9619830; font-size:29px; }
.olNicknameRow #olNameSave .olHomeIcon{ width:29px; height:29px; }
.olNicknameRow #olNameSave:active{ transform:translateY(3px); box-shadow:inset 0 0 0 3px #ffd7e8,0 1px 0 #eaa5c3; }
/* 名前を書きかえたあと「決定」を押すまで、ボタンを弾ませて光らせる（online.js の updateNicknameCount が olSaveAsk を付ける） */
.olNicknameRow #olNameSave.olSaveAsk{ animation:olSaveAsk 1.2s ease-in-out infinite; }
.olNicknameRow #olNameSave.olSaveAsk::after{ content:''; position:absolute; inset:-7px; border:3px solid #ffd257; border-radius:inherit; opacity:0; pointer-events:none; animation:olSaveAskRing 1.2s ease-out infinite; }
@keyframes olSaveAsk{ 0%,52%,100%{ transform:translateY(0) rotate(0); } 10%{ transform:translateY(-8px) rotate(-3deg); } 22%{ transform:translateY(0) rotate(2deg); } 34%{ transform:translateY(-4px) rotate(-1deg); } 44%{ transform:translateY(0) rotate(0); } }
@keyframes olSaveAskRing{ 0%{ opacity:.9; transform:scale(.94); } 60%,100%{ opacity:0; transform:scale(1.12); } }
/* 軽量モード・動きを減らす設定では動かさず、枠だけで知らせる */
body.lightMode .olNicknameRow #olNameSave.olSaveAsk{ animation:none; }
body.lightMode .olNicknameRow #olNameSave.olSaveAsk::after{ animation:none; opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .olNicknameRow #olNameSave.olSaveAsk{ animation:none; }
  .olNicknameRow #olNameSave.olSaveAsk::after{ animation:none; opacity:1; transform:none; }
}
.olNicknameMeta{display:flex;justify-content:space-between;align-items:center;min-height:25px;padding:5px 198px 0 4px;font-size: 20px;font-weight:800;color:#a188b0;}
.olNameStatus{ min-width:0; color:#9f6187; }
#olNameCount{ flex:none; margin-left:10px; font-variant-numeric:tabular-nums; }
#olName[aria-invalid="true"]{ border-color:#d9587f; }
.olHomeProfile .olInput{ flex:1; width:0; min-width:0; height:64px; padding:10px 18px; border:2px solid #e6ddee; border-radius:12px; font-size:30px; color:#66507d; background:#ffffff; box-shadow:inset 0 2px 4px #68456604; }
.olHomeProfile .olInput::placeholder{ color:#b7a8c0; font-size:24px; }
.olHomeProfile .olInput:focus{ transform:none; border-color:#dd9aca; box-shadow:0 0 0 4px #fbe0f1; }
.olAvatarEditor{ grid-column:1; grid-row:1 / 3; display:flex; flex-direction:column; align-items:center; margin:0; min-width:0; }
.olAvatarActions{ position:relative; display:flex; flex-direction:column; gap:9px; margin-top:-19px; }
.olAvatarActions .olBtn{display:flex;align-items:center;justify-content:center;gap: 6px;width:252px;height:48px;padding:9px 12px;border:2px solid #e1c2ed;border-radius:999px;color:#8958a0;background:linear-gradient(#fff,#f4e9fb);box-shadow:inset 0 0 0 2px #fff,0 3px 0 #d9badd,0 6px 10px #7642731c;font-size: 19px;}
.olAvatarActions #olChooseAvatar{ border-color:#f2b0d5; background:linear-gradient(#fff,#fde6f1); box-shadow:inset 0 0 0 2px #fff,0 3px 0 #e4b9d2,0 6px 10px #7642731c; }
.olAvatarActions .olHomeIcon{ width:25px; height:25px; }
.olAvatar{ --avatar-hue:30; display:inline-grid; position:relative; place-items:center; width:50px; height:50px; border:3px solid #fff; border-radius:50%; overflow:hidden; vertical-align:middle; background:hsl(var(--avatar-hue) 65% 86%); box-shadow:0 2px 5px #48234825; flex:none; font-size:30px; line-height:1; }
.olAvatar > span{ display:grid; place-items:center; position:absolute; inset:0; }
.olAvatar img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.olAvatar img[hidden]{ display:none; }
.olAvatar.hasImage > span{ visibility:hidden; }
#olMyAvatar .olAvatar{ width:196px; height:196px; border:7px solid #fff; box-shadow:0 0 0 3px #f8d1e4,0 6px 16px #bf6c9924; font-size:110px; }
.olMatchHelpGrid{grid-column:2;grid-row:2;align-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;width:100%;min-width:0;margin-top: 25px;}
.olMatchHelpButton{ --help-ink:#946725; --help-line:#ecd391; --help-bg:#fff7df; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:52px; padding:10px 14px; border:2px solid var(--help-line); border-radius:15px; background:var(--help-bg); color:var(--help-ink); box-shadow:0 2px 0 var(--help-line); font-family:inherit; font-size:22px; font-weight:900; line-height:1.3; text-align:left; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease; }
.olMatchHelpButton[data-match-help="mixed"]{ --help-ink:#377a74; --help-line:#adddce; --help-bg:#ecfaf5; }
.olMatchHelpButton[data-match-help="streamer"]{ --help-ink:#94618d; --help-line:#e5c2dc; --help-bg:#fff0f8; }
.olMatchHelpButton[data-match-help="listener"]{ --help-ink:#4b75a0; --help-line:#bad7ef; --help-bg:#eff8ff; }
.olMatchHelpButton:hover{ transform:translateY(-2px); box-shadow:0 4px 0 var(--help-line); }
.olMatchHelpButton:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--help-line); }
.olMatchHelpMark{ display:grid; place-items:center; flex:none; width:28px; height:28px; border:2px solid var(--help-line); border-radius:50%; background:#fff; font-size:20px; line-height:1; }
.olUserSelect{ display:flex; align-items:center; gap:14px; height:82px; padding:12px 27px; color:#705080; font-size:24px; font-weight:900; }
.olUserSelect > span:first-child{ white-space:nowrap; }
.olUserSelect .olSeg{ flex:1; margin-left:17px; padding:0; gap:0; border:2px solid #e6e1ef; background:#efedf6; }
.olUserSelect .olSeg button{ display:flex; flex:1; align-items:center; justify-content:center; gap:11px; padding:12px 19px; font-size:23px; line-height:1.2; color:#777393; }
.olUserSelect .olSeg button.act{ color:#fff; background:linear-gradient(100deg,#d652bd,#ee4f9e); box-shadow:inset 0 1px 2px #ffffff42,0 2px 5px #be68982b; }
.olUserSelect .olSeg .olHomeIcon{ width:29px; height:29px; }
.olHelpBtn{ display:grid; place-items:center; flex:none; width:30px; height:30px; padding:0; border:2px solid #ddcfe8; border-radius:50%; background:#fff; color:#8a749f; font-family:inherit; font-weight:900; font-size:21px; line-height:1; cursor:pointer; }
#olCoopHome{ display:flex; align-items:center; justify-content:center; flex:none; gap:10px; min-height:48px; padding:9px 17px; border:2px solid #e8e2ef; border-radius:999px; color:#817297; background:#fff; font-size:19px; white-space:nowrap; }
#olCoopHome .olHomeIcon{ width:27px; height:27px; }
.olModeSection{ padding:18px 16px 20px; }
.olModeHeader{ display:flex; align-items:center; gap:20px; height:42px; margin-bottom:16px; }
.olModeHeader .olHomeHeading{ position:relative; flex:0 0 300px; margin-left:-27px; align-self:flex-start; margin-top:-18px; }
.olModePrompt{ display:flex; align-items:center; gap:9px; min-width:0; padding-right:7px; color:#c077a9; }
.olModePrompt > .olHomeIcon{width: 30px;height: 30px;color:#ae7aaa;}
.olModeDescription{font-size: 21px;font-weight:800;line-height:1.45;}
.olHomeEntries{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding:0; }
.olHomeEntries .olEntry{ --entry-ink:#785330; --entry-icon:#a96e3a; --entry-line:#f3cc60; --entry-badge:#ffdf6f; --entry-bg:#ffe9a3; display:flex; flex-direction:column; align-items:center; width:100%; min-width:0; height:260px; padding:18px 12px 15px; border:2px solid var(--entry-line); border-radius:21px; color:var(--entry-ink); text-align:center; background:linear-gradient(140deg,#fffdf1,var(--entry-bg)); box-shadow:inset 0 0 0 2px #ffffff7d,0 3px 0 var(--entry-line); }
.olHomeEntries .olEntry .em{ display:flex; align-items:center; justify-content:center; height:78px; margin:0 0 14px; animation:none; color:var(--entry-icon); }
.olHomeEntries .olEntry .em .olHomeIcon{ width:71px; height:71px; filter:drop-shadow(0 3px 0 #ffffff70); }
.olHomeEntries .olEntry .nm{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:29px; font-weight:900; line-height:1.3; color:var(--entry-ink); white-space:nowrap; letter-spacing:-.04em; }
.olHomeEntries .olEntry .ds{ width:100%; margin-top:8px; padding:4px 3px; border-radius:999px; background:var(--entry-badge); color:var(--entry-ink); font-size:18px; font-weight:900; line-height:1.25; white-space:nowrap; }
.olEntryNote{ margin-top:11px; color:var(--entry-ink); font-size:18px; font-weight:700; line-height:1.4; }
.olHomeEntries .olEntry.mint{ --entry-ink:#226e75; --entry-icon:#22a693; --entry-line:#73d9c4; --entry-badge:#aaf0db; --entry-bg:#cef9eb; background:linear-gradient(140deg,#f1fffb,var(--entry-bg)); }
.olHomeEntries .olEntry.lilac{ --entry-ink:#74429a; --entry-icon:#a166c2; --entry-line:#d8a9ef; --entry-badge:#e6c4fa; --entry-bg:#f2e3ff; background:linear-gradient(140deg,#fdf8ff,var(--entry-bg)); }
.olHomeEntries .olEntry.sky{ --entry-ink:#32649a; --entry-icon:#2e89d2; --entry-line:#95d4f5; --entry-badge:#c2eaff; --entry-bg:#def4ff; background:linear-gradient(140deg,#f4fcff,var(--entry-bg)); }
.olHomeEntries .olEntry:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 2px #ffffffa0,0 4px 0 var(--entry-line),0 10px 14px #7f538b1a; }
.olHomeEntries .olEntry:active{ transform:translateY(2px); box-shadow:inset 0 0 0 2px #ffffff7d,0 1px 0 var(--entry-line); }
.olHomeEntries .olEntry:disabled{ transform:none; box-shadow:inset 0 0 0 2px #ffffff7d,0 3px 0 var(--entry-line); }
.olScreen[data-screen="home"] button:focus-visible{ outline:3px solid #b165aa; outline-offset:4px; }
.olProgress{ display:grid; grid-template-columns:minmax(0,1fr) 266px; align-items:center; gap:22px; min-height:138px; padding:10px 24px 12px; color:#855493; }
.olProgressMain{ min-width:0; }
.olStatRow{ display:grid; grid-template-columns:1fr 1fr; gap:27px; }
.olStat{ display:flex; align-items:baseline; gap:5px; min-width:0; min-height:50px; }
.olStat > span{ display:flex; align-items:center; gap:8px; align-self:flex-start; margin-top:6px; font-size:23px; font-weight:900; white-space:nowrap; }
.olStat > span .olHomeIcon{ width:29px; height:29px; }
.olStat b{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:42px; font-weight:900; margin-left:auto; color:#9961ab; line-height:1.2; font-variant-numeric:tabular-nums; }
.olStat small{ color:#9e7aac; font-size:18px; font-weight:900; }
.olXpTop{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; justify-content:space-between; min-height:23px; font-size:18px; font-weight:900; color:#9c7fab; }
.olXpTrack{ height:22px; overflow:hidden; border:2px solid #e8d5ef; border-radius:999px; background:linear-gradient(#eedff5,#e6d8f0); box-shadow:inset 0 2px 4px #7b42880c; }
.olXpTrack i{ display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b687ce,#d29fdf,#ebb4d7); }
.olNextLevel{ display:none; text-align:right; margin-top:3px; font-size:18px; font-weight:900; color:#b298bf; letter-spacing:.05em; }
.olProgressNote{position:relative;padding:16px 12px;border-radius:35% 15% 32% 18% / 25% 35% 20% 30%;color:#ae709e;background:linear-gradient(120deg,#fbebeb66,#fbe6f0c7,#fff4f150);font-size:19px;font-weight:700;line-height:1.7;text-align:center;transform: rotate(-3deg);}
.olProgressNote .olHomeIcon{ position:absolute; top:1px; right:9px; width:18px; height:18px; color:#d999c0; }
/* 語彙力ランク（レベル5ごとに Z→…→A→AA→AAA） */
.olRankNote{ display:flex; align-items:baseline; justify-content:center; gap:12px; padding:10px 12px; line-height:1.1; white-space:nowrap; }
.olRankLabel{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:26px; font-weight:900; letter-spacing:.06em; }
.olRankValue{ display:inline-block; font-family:'M PLUS Rounded 1c',sans-serif; font-size:58px; font-weight:900; letter-spacing:.02em; color:#9961ab; text-shadow:0 2px 0 #fff, 0 4px 10px #b687ce55; }
.olRankNote[data-rank="AA"] .olRankValue{ font-size:50px; }
.olRankNote[data-rank="AAA"] .olRankValue{ font-size:44px; }
.olRankNote[data-rank="A"] .olRankValue,.olRankNote[data-rank="AA"] .olRankValue,.olRankNote[data-rank="AAA"] .olRankValue{ color:#d9962b; text-shadow:0 2px 0 #fff, 0 4px 12px #e6b34488; }
.olRankUp{ position:absolute; left:0; right:0; bottom:2px; font-size:14px; font-weight:900; color:#e67b35; letter-spacing:.12em; }
#olLevelUp{ color:#e67b35; letter-spacing:.08em; }
.olProgress.celebrating{ border-color:#e6b344; }
/* 実際の入力欄を操作できるよう、案内対象の周囲だけを4枚の幕で暗くする。 */
#olOnboarding[hidden]{ display:none !important; }
#olOnboarding{ position:absolute; inset:0; z-index:105; pointer-events:none; }
.olGuideShade{ position:absolute; background:rgba(39,24,43,.68); pointer-events:auto; }
.olGuideSpotlight{ position:absolute; border:3px solid #ffe08b; border-radius:18px; box-shadow:0 0 0 3px #fff8dc,0 0 24px #ffe08b90; }
.olGuideCard{ position:absolute; width:660px; max-width:calc(100% - 32px); padding:19px 25px; border:3px solid #e8b9cf; border-radius:22px; background:#fffaf6; color:var(--ol-ink); box-shadow:0 9px 28px #24132655; pointer-events:auto; }
.olGuideCard::after{ content:''; position:absolute; left:var(--guide-pointer,50%); width:16px; height:16px; background:#fffaf6; transform:translateX(-50%) rotate(45deg); }
.olGuideCard[data-placement="above"]::after{ bottom:-11px; border-right:3px solid #e8b9cf; border-bottom:3px solid #e8b9cf; }
.olGuideCard[data-placement="below"]::after{ top:-11px; border-left:3px solid #e8b9cf; border-top:3px solid #e8b9cf; }
.olGuideCard[data-placement="center"]{ text-align:center; }
.olGuideCard[data-placement="center"]::after{ display:none; }
.olGuideStep{ display:block; margin-bottom:7px; color:#b56582; font-size:18px; font-weight:900; letter-spacing:.05em; }
.olGuideCard h2{ margin:0; font-family:'M PLUS Rounded 1c',sans-serif; font-size:27px; line-height:1.4; font-weight:900; }
.olGuideCard p{ margin:9px 0 0; font-size:18px; line-height:1.65; font-weight:700; white-space:pre-line; }
.olGuideActions{ text-align:right; }
.olGuideActions .olBtn{ margin-top:16px; padding:11px 31px; font-size:21px; }
.olGuideActions .olBtn[hidden]{ display:none; }
.olGuideCard[data-placement="center"] .olGuideActions{ text-align:center; }
#mainArea.olOnboardingActive .olScreen[data-screen="home"] > *{ animation:none; transform:none; }
.olModal[hidden]{ display:none !important; }
.olModal{ position:absolute; inset:0; z-index:110; display:flex; align-items:center; justify-content:flex-start; padding:45px 26px; background:#51285399; }
.olModalCard{position:relative;width: 942px;max-width:100%;max-height:100%;overflow:auto;padding:36px 40px;border:5px solid #d2a2cd;border-radius:30px;background:#fffaf6;color:var(--ol-ink);box-shadow:0 14px 42px #37153845;animation:olResultIn .2s ease-out;}
.olModalCard h2{ font-family:'Mochiy Pop One',sans-serif; font-size:32px; padding-right:25px; margin:0 0 25px; }
.olModalCard p{font-size: 25px;line-height:1.7;font-weight:700;margin:12px 0;}
.olMatchHelp{font-size: 21px;font-weight:700;line-height:1.65;}
.olMatchHelp h3{ margin:20px 0 8px; font-size:23px; color:#95618e; }
.olMatchHelp ul,.olMatchHelp ol{ margin:12px 0; padding-left:1.5em; }
.olMatchHelp li + li{ margin-top:10px; }
.olMatchHelpRoles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.olMatchHelpRoles p{ margin:0; padding:14px 16px; border-radius:16px; background:#f7edf6; font-size:20px; }
.olMatchHelpRoles p > b:first-child{ display:block; margin-bottom:6px; color:#95618e; font-size:23px; }
.olMatchHelpUrl{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:16px 0; padding:14px 16px; border:2px solid #beddd8; border-radius:16px; background:#f0fbf7; }
.olMatchHelpUrl > span{ flex-basis:100%; color:#467d76; font-size:18px; }
.olMatchHelpUrl a{ flex:1; min-width:0; color:#246f94; overflow-wrap:anywhere; text-underline-offset:3px; }
.olMatchHelpUrl .olBtn{ flex:none; font-size:18px; }
.olModalCard .olMatchHelpNote{padding:12px 15px;border-radius:14px;background:#f3eff5;color:#816d8e;font-size: 20px;line-height:1.6;}
.olModalClose{ position:absolute; top:12px; right:15px; width:37px; height:37px; border:0; border-radius:50%; background:#f0e4ed; color:#82567c; font-size:26px; cursor:pointer; }
.olAvatarGrid{ display:grid; grid-template-columns:repeat(10,1fr); gap:13px 7px; }
.olAvatarGrid button{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:5px 2px; border:3px solid transparent; background:transparent; border-radius:16px; cursor:pointer; color:#a0779d; }
.olAvatarGrid button.selected{ border-color:#edbb44; background:#fff2cc; }
.olAvatarGrid button:hover{ background:#f7e5f5; }
.olAvatarGrid .olAvatar{ width:57px; height:57px; }
.olRoleExplain p{ padding:18px 22px; background:#f8edf4; border-radius:18px; }
.olRoleExplain b,.olRoleExplain span{ display:block; }
.olRoleExplain b{ color:#ab609f; font-size:26px; }
.olDownload{ display:flex; align-items:center; gap:14px; padding:20px; margin-top:20px; background:#f6ebf4; border-radius:16px; }
.olDownload a{ min-width:0; font-size:20px; word-break:break-all; color:#ab60b1; }
.olScopeChoices{ display:flex; flex-direction:column; gap:24px; margin:28px 0 12px; }
.olScopeChoices .olBtn{ font-size:25px; padding:20px; }
.olGain p{ display:flex; justify-content:space-between; align-items:center; padding:13px 18px; border-radius:16px; background:#fff1d9; }
.olGain b{ font-family:'Mochiy Pop One',sans-serif; font-size:36px; color:#db8d25; }
.olGain small{ font-size:18px; margin-left:8px; }
.olRewardStars{ color:#eaaa37; font-size:40px; text-align:center; margin-top:22px; animation:olFloat 1s ease-in-out infinite; }
.olCard .face .olAvatar{ width:88px; height:88px; font-size:50px; }
.olVsGrid .olCard .face .olAvatar,.olWaiwaiCards .olCard .face .olAvatar{ width:64px; height:64px; font-size:38px; }
.olMatching{ max-width:100%; }
.olCards.olWaiwaiCards{ display:grid; grid-template-columns:repeat(4,230px); gap:20px; }
.olWaiwaiCards .olCard{ width:230px; min-height:185px; padding:15px 12px; }
.olWaiwaiCards .olCard .name{ font-size:20px; }
.olWaiwaiCards .olCard .face{ height:64px; margin-bottom:10px; }
.olWaiwaiCards .olCard.empty{ font-size:20px; }
#olMatchInfo small{ display:block; margin-top:10px; font-size:18px; }
.olQueueCountdown{ color:#cd8630; font-family:'Mochiy Pop One',sans-serif; font-size:34px; }
#mainArea.online .sc-label > .olAvatar{ width:31px; height:31px; font-size:20px; border-width:2px; }
/* 1対1の名前は1行のまま、入りきらないぶんを「…」にする（アイコン・王冠・接続中は残す。名前の区切りは online.js の renderScoreLabels） */
#mainArea.online .sc-label > .olAvatar, #mainArea.online .sc-label > .olWinCrowns, #mainArea.online .sc-label > .olOffTag{ flex:none; }
.olScName{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.olRankRow > .olAvatar{ width:44px; height:44px; }
#foundList .olAvatar,#foundList .olFinderIcon{ width:29px; height:29px; font-size:19px; border-width:2px; object-fit:cover; border-radius:50%; flex:none; }

/* 多人数戦: 8×8の表示窓、下位を含めた全体図、画面下の上位5人 */
#olTimerSlot,#olMinimap{ display:none; }
#mainArea.olLargeBattle #playRow{ gap:28px; }
#mainArea.olLargeBattle #boardWrap{ flex:none; }
#mainArea.olLargeBattle #olBoardViewport{ --ol-peek:24px; --ol-cut-top:var(--ol-peek); --ol-cut-right:var(--ol-peek); --ol-cut-bottom:var(--ol-peek); --ol-cut-left:var(--ol-peek); position:relative; overflow:visible; border:4px solid #ba78be; border-radius:16px; background:#efdfce; box-shadow:0 4px 10px #4f315133; touch-action:none; }
#mainArea.olLargeBattle #olBoardViewport.can-pan-up{ --ol-cut-top:0px; }
#mainArea.olLargeBattle #olBoardViewport.can-pan-right{ --ol-cut-right:0px; }
#mainArea.olLargeBattle #olBoardViewport.can-pan-down{ --ol-cut-bottom:0px; }
#mainArea.olLargeBattle #olBoardViewport.can-pan-left{ --ol-cut-left:0px; }
/* 同じ盤面の外周だけを透過表示する。複製やぼかし処理は使わない。 */
#mainArea.olLargeBattle #olBoardSurface{ position:absolute; inset:calc(0px - var(--ol-peek)); overflow:hidden; clip-path:inset(var(--ol-cut-top) var(--ol-cut-right) var(--ol-cut-bottom) var(--ol-cut-left)); -webkit-mask-image:linear-gradient(to right,transparent,#0008 var(--ol-peek),#000 var(--ol-peek),#000 calc(100% - var(--ol-peek)),#0008 calc(100% - var(--ol-peek)),transparent),linear-gradient(to bottom,transparent,#0008 var(--ol-peek),#000 var(--ol-peek),#000 calc(100% - var(--ol-peek)),#0008 calc(100% - var(--ol-peek)),transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
#mainArea.olLargeBattle #olBoardViewport::after{ content:''; position:absolute; inset:-4px; z-index:2; border:4px solid #ba78be; border-radius:inherit; pointer-events:none; }
#mainArea.olLargeBattle #olBoardViewport.panning,#mainArea.olLargeBattle #olBoardViewport.panning #board{ cursor:grabbing; }
#mainArea.olLargeBattle #board{ left:var(--ol-peek); top:var(--ol-peek); transform-origin:top left; }
/* まだ動かせる方向の枠の真ん中に矢印を出す（枠外に少し透けて見える表示はそのまま）。
   押すとその方向へ4マスぶん動く（online.js の glideViewport）。押せる範囲は ::after で外側へ広げ、盤面のマスにはあまりかぶせない */
.olPanArrow{ display:none; position:absolute; z-index:3; width:34px; height:34px; margin:0; padding:0; border:0; border-radius:50%; background:#ba78be; box-shadow:0 0 0 3px #fff, 0 3px 6px #4f315140; cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent; }
.olPanArrow::before{ content:''; position:absolute; inset:9px 8px 10px; background:#fff; clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.olPanArrow::after{ content:''; position:absolute; border-radius:50%; }
.olPanArrow.up::after{ inset:-16px -12px -3px; }
.olPanArrow.down::after{ inset:-3px -12px -16px; }
.olPanArrow.left::after{ inset:-12px -3px -12px -16px; }
.olPanArrow.right::after{ inset:-12px -16px -12px -3px; }
.olPanArrow:hover{ background:#cb8ccf; }
.olPanArrow:active{ background:#a262a7; }
.olPanArrow:focus-visible{ outline:3px solid #ffd257; outline-offset:3px; }
.olPanArrow.up{ top:-19px; left:calc(50% - 17px); --olPanNudge:translateY(-4px); }
.olPanArrow.down{ bottom:-19px; left:calc(50% - 17px); --olPanNudge:translateY(4px); }
.olPanArrow.left{ left:-19px; top:calc(50% - 17px); --olPanNudge:translateX(-4px); }
.olPanArrow.right{ right:-19px; top:calc(50% - 17px); --olPanNudge:translateX(4px); }
.olPanArrow.down::before{ transform:rotate(180deg); }
.olPanArrow.left::before{ transform:rotate(-90deg); }
.olPanArrow.right::before{ transform:rotate(90deg); }
#mainArea.olLargeBattle #olBoardViewport.can-pan-up .olPanArrow.up,
#mainArea.olLargeBattle #olBoardViewport.can-pan-right .olPanArrow.right,
#mainArea.olLargeBattle #olBoardViewport.can-pan-down .olPanArrow.down,
#mainArea.olLargeBattle #olBoardViewport.can-pan-left .olPanArrow.left{ display:block; animation:olPanNudge 1.4s ease-in-out infinite; }
@keyframes olPanNudge{ 0%,55%,100%{ transform:none; } 25%{ transform:var(--olPanNudge); } }
body.lightMode .olPanArrow{ animation:none !important; }
@media (prefers-reduced-motion: reduce){ .olPanArrow{ animation:none !important; } }
#mainArea.olLargeBattle #foundPanel{ display:flex !important; width:var(--ol-found-width,270px) !important; min-width:270px; flex:none; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; overflow:visible; }
#mainArea.olLargeBattle #olTimerSlot{ display:flex; flex:none; justify-content:center; margin-bottom:10px; }
#mainArea.olLargeBattle #timerDisp{ font-size:40px; width:180px; border-width:4px; }
#mainArea.olLargeBattle #foundTitle{ padding:10px 5px; margin:0; border:3px solid #efc769; border-bottom:2px dotted #efc769; border-radius:18px 18px 0 0; background:#fffdf7; font-size:22px; }
#mainArea.olLargeBattle #foundList{ flex:1 1 auto; min-height:70px; padding:0 7px 4px; border:3px solid #efc769; border-top:0; border-radius:0 0 18px 18px; background:#fffdf7; }
#mainArea.olLargeBattle #foundList li{ padding:7px 0; border-bottom:1px dashed #e8dce2; }
#mainArea.olLargeBattle #foundList li.olBy{ display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto; column-gap:6px; }
#mainArea.olLargeBattle #foundList li.olBy > .olAvatar,#mainArea.olLargeBattle #foundList li.olBy > img{ grid-row:1 / 3; }
#mainArea.olLargeBattle #foundList .fl-word{ font-size:20px; color:#6c466c; }
#mainArea.olLargeBattle #foundList .fl-name{ max-width:100%; margin:0; color:#aa8ca5; font-size:18px; }
#mainArea.olLargeBattle #foundList li.rank-row{ display:grid; grid-template-columns:24px 26px minmax(0,1fr) auto; gap:6px; align-items:center; }
#mainArea.olLargeBattle #foundList .rank-row .rank-no{ width:auto; }
#mainArea.olLargeBattle #foundList .rank-row .fl-word{ min-width:0; font-size:18px; overflow-wrap:anywhere; }
#mainArea.olLargeBattle #foundList .rank-row.rank-empty{ display:block; }
#mainArea.olLargeBattle #olMinimap{ display:flex; flex-direction:column; flex:none; align-items:center; margin-top:12px; padding:8px 9px 9px; border:3px solid #eac6e8; border-radius:17px; background:#fffafd; }
.olMapLabel{ display:flex; flex-wrap:wrap; gap:4px 8px; justify-content:space-between; width:100%; margin-bottom:7px; color:#946690; font-size:18px; font-weight:900; }
.olMapLabel span{ font-size:18px; }
#olMapSvg{ display:block; width:100%; max-width:232px; aspect-ratio:1; overflow:visible; border-radius:5px; }
#mainArea.olLargeBattle #scoreArea{ left:25px; width:1190px; }
#mainArea.olLargeBattle #scoreRow{ gap:16px; }
#mainArea.olLargeBattle #cardS{ width:286px; flex:none; padding:33px 12px 0px; }
#mainArea.olLargeBattle #cardS .sc-label{ font-size:23px; white-space:nowrap; }
/* 大人数戦の自分の欄は、アイコンと自分の名前（9文字まで。online.js の shortName で「…」） */
#mainArea.olLargeBattle #cardS .sc-label > .olAvatar{ width:35px; height:35px; }
#mainArea.olLargeBattle #cardS .olMyName{ font-size:26px; min-width:0; overflow:hidden; text-overflow:ellipsis; }   /* 全角で枠に入りきらないときは枠の中で「…」 */
#mainArea.olLargeBattle #vsBox,#mainArea.olLargeBattle #cardL{ display:none; }
#mainArea.olLargeBattle #olRank{ display:flex; flex:1; align-items:center; justify-content:flex-start; gap:12px; margin:0; padding:10px 15px; border-radius:23px; background:#fffaf7f2; border:3px solid #e8d7e3; }
/* 順位は「1位」を左上に置き、アイコンは名前枠と重ならないように上へ寄せる */
.olLeader{ flex:1; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:4px; color:#8c598c; }
/* 順位の文字は、アイコンや名前の上に重なっても読めるように白いフチを付ける */
.olPlace{ position:absolute; left:2px; top:42px; z-index:2; font-family:'Mochiy Pop One',sans-serif; font-size:25px; line-height:1;
  text-shadow:3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff,3px 1px 0 #fff,-3px 1px 0 #fff,3px -1px 0 #fff,-3px -1px 0 #fff,1px 3px 0 #fff,-1px 3px 0 #fff,1px -3px 0 #fff,-1px -3px 0 #fff; }
.olLeaderPortrait{ position:relative; width:100%; display:flex; justify-content:center; padding-bottom:34px; }
.olLeaderPortrait .olAvatar{ width:66px; height:66px; font-size:40px; border:4px solid var(--pc); }
.olLeaderName{ position:absolute; bottom:0; left:0; width:100%; padding:3px 5px; border:2px solid var(--pc); background:#fff; border-radius:7px; color:#5f455c; font-weight:900; font-size:18px; line-height:1.3; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:center; }
.olLeader.me .olLeaderName{ background:#fff5d6; }
.olLeaderScore{ font-family:'Mochiy Pop One',sans-serif; font-size:25px; color:var(--pc); line-height:1.3; }
.olLeaderScore small{ font-size:18px; color:#947c93; }
.olLeader.bump .olLeaderScore{ animation:olPuyon .45s var(--puyo); }
.olLeader.off{ opacity:.45; }
#mainArea.olLargeBattle #ribbon{ font-size:23px; padding:6px 25px; }
#mainArea.olLargeBattle #popRow{ bottom:224px; }

/* 待機操作・チーム戦 */
.olEye{ flex:none; width:50px; height:48px; border:2px solid #c69ab4; border-radius:12px; background:#fff7fb; color:#865c77; font-size:27px; cursor:pointer; }
.olEye[aria-pressed="false"]{ background:#e9dce5; }
.olOperatorPass{ width:100%; padding:10px; border:2px solid #c9aac2; border-radius:10px; background:#fff; color:#563f5c; font-size:22px; }
.olBtn.olReadyAsk{ background:#a8797f; color:#fff; box-shadow:0 6px 0 #78545a; animation:olReadyInvite 1.8s ease-in-out infinite; }
.olBtn.olReadyOn{ background:#419d6b; color:#fff; box-shadow:0 6px 0 #2f744e; }
@keyframes olReadyInvite{ 0%,100%{ transform:translateY(0); box-shadow:0 6px 0 #78545a,0 0 4px #d995a1; } 50%{ transform:translateY(-4px); box-shadow:0 9px 0 #78545a,0 0 23px #eda5b4; } }
body.lightMode .olReadyAsk{ animation:none; }
/* 全員が準備OK: 開始ボタンをゆらして光らせ、ポップアップで開始を促す */
.olBtn.olStartAsk{ animation:olStartInvite 1.4s ease-in-out infinite; }
@keyframes olStartInvite{ 0%,100%{ transform:translateY(0) scale(1); box-shadow:0 6px 0 #c99a12, 0 12px 22px rgba(0,0,0,.22), 0 0 0 rgba(255,210,87,0); } 50%{ transform:translateY(-5px) scale(1.04); box-shadow:0 10px 0 #c99a12, 0 14px 24px rgba(0,0,0,.25), 0 0 30px #ffd257; } }
body.lightMode .olStartAsk{ animation:none; }
@media(prefers-reduced-motion:reduce){ .olBtn.olStartAsk{ animation:none; } }
.olScreen > .olReadyPop{ position:absolute; left:50%; z-index:20; padding:14px 34px; border-radius:999px; background:var(--ol-gold); color:#6b4a00; font-family:'Mochiy Pop One',sans-serif; font-size:30px; white-space:nowrap; box-shadow:0 8px 0 #c99a12, 0 12px 22px rgba(0,0,0,.25); transform-origin:center; animation:olReadyPopIn .6s var(--puyo) both; pointer-events:none; }
.olScreen > .olReadyPop.out{ animation:olReadyPopOut .4s ease-in both; }
@keyframes olReadyPopIn{ 0%{ transform:translate(-50%,10px) scale(.3); opacity:0 } 60%{ transform:translate(-50%,-6px) scale(1.12,.9); opacity:1 } 80%{ transform:translate(-50%,2px) scale(.96,1.05) } 100%{ transform:translate(-50%,0) scale(1) } }
@keyframes olReadyPopOut{ from{ transform:translate(-50%,0) scale(1); opacity:1 } to{ transform:translate(-50%,-14px) scale(.8); opacity:0 } }
body.lightMode .olScreen > .olReadyPop{ animation:none; transform:translate(-50%,0); }
@media(prefers-reduced-motion:reduce){ .olBtn.olReadyAsk{ animation:none; } }
#olLobbyCards .state{ display:block; margin-top:12px; padding:7px 12px; border:2px solid #ba989e; border-radius:10px; background:#f0e2e5; color:#81545e; font-size:22px; line-height:1.25; font-weight:900; }
#olLobbyCards .ready .state{ background:#def7e6; border-color:#59a878; color:#237644; }
#olLobbyCards:not(.two){grid-template-columns: repeat(4,240px);gap:18px;}
#olLobbyCards:not(.two) .olCard{min-height: 220px;padding:14px 12px;}
#olLobbyCards:not(.two) .face{height:64px;margin-bottom:12px;}
#olLobbyCards:not(.two) .face .olAvatar{ width:64px; height:64px; }
#olLobbyCards:not(.two) .name{ font-size:22px; }
.olQueueHost{ display:flex; align-items:center; gap:24px; padding:14px 20px; border:2px solid #cab0c7; border-radius:16px; background:#fff8fc; font-size:22px; font-weight:800; }
.olQueueHost[hidden]{ display:none; }
.olQueueHost input,.olTeamToggle input{ width:23px; height:23px; accent-color:#a86d91; vertical-align:middle; margin-right:8px; }
.olTeamControls{ max-width:1180px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding-bottom:12px; color:#684d64; }
.olTeamToggle{ font-size:22px; font-weight:900; }
.olTeamRule{ font-size:18px; font-weight:700; }
.olTeamAssignments{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:10px 18px; }
.olTeamAssignments label{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; font-size:18px; font-weight:800; }
.olTeamAssignments select{ min-width:103px; margin-left:auto; padding:6px; border:2px solid #cbb4c7; border-radius:8px; background:#fff; color:#62455c; font:inherit; }
.olSpectatorNote,.olTeamScoreNote{ font-size:19px; font-weight:900; color:#705b76; }
.olTeamScoreNote{ flex:none; }   /* チーム戦の注記は、カードに押されて細くならないようにする */
.olTeamResult{ display:flex; gap:24px; margin:14px 0; justify-content:center; font-size:25px; }
.olTeamResult b:first-child{ color:#b94869; }.olTeamResult b:last-child{ color:#5865c9; }
.olAvatarPages{ display:flex; gap:12px; margin-bottom:18px; }.olAvatarPages .selected{ background:#f2d4e7; border-color:#a66591; }
.olModalCard .olAvatarNote{ margin:15px 0 0; font-size:18px; }
.olKickMenu{ position:fixed; width:140px; z-index:5000; padding:5px; background:#fff; border:2px solid #d4b5c8; border-radius:10px; box-shadow:0 4px 16px #5c334944; }
.olKickMenu button{ width:100%; padding:9px 16px; border:0; border-radius:6px; background:#f9e9ef; color:#a13256; font-size:18px; font-weight:800; cursor:pointer; }
.olKickMenu button:hover,.olKickMenu button:focus{ background:#f1ccd9; }
.olKickMenu button + button{ margin-top:4px; }
/* 6文字以上のコトバのカットイン（取った人以外の画面） */
#olFindCutin{ position:absolute; inset:0; z-index:14; display:none; overflow:hidden; pointer-events:none; }
#olFindCutin.show{ display:block; }
.olFindCutinBand{ position:absolute; left:-12%; right:-12%; top:50%; height:230px; transform:translateY(-50%) skewX(-12deg); background:linear-gradient(90deg,#fff0 0%,#fff9 18%,#fffd 50%,#fff9 82%,#fff0 100%); animation:olFindCutinBand 1.6s ease-out both; }
.olFindCutinCard{ position:absolute; left:50%; top:50%; display:flex; flex-direction:column; align-items:center; gap:4px; animation:olFindCutinSlide 1.6s cubic-bezier(.2,.8,.2,1) both; }
.olFindCutinCard .olAvatar{ width:150px; height:150px; font-size:80px; border:6px solid var(--pc); box-shadow:0 8px 20px #0004; }
.olFindCutinName{ font-family:'Mochiy Pop One',sans-serif; font-size:26px; color:#5f455c; text-shadow:0 2px 0 #fff, 0 0 8px #fff; }
.olFindCutinWord{ padding:2px 16px; border-radius:999px; background:var(--pc); color:#fff; font-size:22px; font-weight:900; box-shadow:0 3px 0 #0002; }
@keyframes olFindCutinSlide{ 0%{ transform:translate(-50%,-50%) translateX(900px); opacity:0 } 18%{ transform:translate(-50%,-50%) translateX(0); opacity:1 } 78%{ transform:translate(-50%,-50%) translateX(-30px); opacity:1 } 100%{ transform:translate(-50%,-50%) translateX(-900px); opacity:0 } }
@keyframes olFindCutinBand{ 0%{ opacity:0; transform:translateY(-50%) skewX(-12deg) translateX(40%) } 18%{ opacity:1; transform:translateY(-50%) skewX(-12deg) translateX(0) } 78%{ opacity:1; transform:translateY(-50%) skewX(-12deg) translateX(0) } 100%{ opacity:0; transform:translateY(-50%) skewX(-12deg) translateX(-40%) } }
@media(prefers-reduced-motion:reduce){ #olFindCutin{ display:none !important; } }
/* 操作パネルの自分の情報 */
.olPanelMe{display:flex;align-items:center;gap: 7px;margin-top:8px;padding:8px 10px;border:2px solid #e5cfdf;border-radius:14px;background:#fffaf7;}
.olPanelMe[hidden]{ display:none; }
.olPanelMe .olAvatar{width: 60px;height: 60px;font-size:30px;flex:none;}
.olPanelMeText{display:flex;flex-direction:column;gap: 6px;min-width:0;font-size: 18px;font-weight: 500;color:#7d6383;line-height: 1;}
.olPanelMeText b{font-size: 24px;color:var(--ol-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.olPanelMeText em{ font-style:normal; font-family:'Mochiy Pop One',sans-serif; font-size:16px; color:#b3567d; }

#mainArea.olTeamBattle #cardS{ display:none; }
.olTeamScorePanel{ display:flex; align-items:center; gap:18px; width:100%; }
.olTeamScoreCard{ display:flex; flex-direction:column; gap:10px; min-width:245px; padding:15px 24px; border:3px solid var(--pc); border-radius:20px; background:#fffafc; color:var(--pc); text-align:center; font-size:21px; font-weight:900; }
.olTeamScoreCard b{ font-family:'Mochiy Pop One',sans-serif; font-size:38px; }.olTeamScoreCard small{ font-size:18px; }
/* チーム戦のHP勝負（PC表示）: 意味のポップアップが得点の枠の上のほうに重なるので、中身をできるだけ下へ寄せる。
   HPの数字を大きく、チームのHPと各人のHPの間を詰め、枠の下の余白をなくす。online.js の renderTeamScores が olTeamHp を付ける */
html:not([data-device="mobile"]) #mainArea.olTeamHp #scoreArea{ bottom:6px; }
/* 枠の高さは今までと同じにする（低くすると盤面が大きくなり、意味のポップアップが盤面に重なるため）。中身だけを下へ寄せる */
html:not([data-device="mobile"]) #mainArea.olTeamHp #olRank{ align-items:stretch; min-height:190px; padding:8px 12px 4px; }
html:not([data-device="mobile"]) #mainArea.olTeamHp .olTeamScorePanel{ align-items:stretch; gap:14px; }
html:not([data-device="mobile"]) #mainArea.olTeamHp .olTeamScoreCard{ justify-content:flex-end; gap:0; padding:6px 18px 2px; }
html:not([data-device="mobile"]) #mainArea.olTeamHp .olTeamScoreCard > span{ line-height:1.2; }
html:not([data-device="mobile"]) #mainArea.olTeamHp .olTeamScoreCard b{ font-size:50px; line-height:1.08; }
html:not([data-device="mobile"]) #mainArea.olTeamHp .olTeamScoreCard b small{ font-size:24px; }
html:not([data-device="mobile"]) #mainArea.olTeamHp .olTeamHpMembers{ font-size:23px; font-weight:900; line-height:1.22; }
html:not([data-device="mobile"]) #mainArea.olTeamHp .olTeamScoreCard[data-members="3"] .olTeamHpMembers{ font-size:20px; }
html:not([data-device="mobile"]) #mainArea.olTeamHp .olTeamScoreCard[data-members="4"] .olTeamHpMembers{ font-size:18px; }
html:not([data-device="mobile"]) #mainArea.olTeamHp .olTeamScoreNote{ align-self:flex-end; padding-bottom:3px; font-size:24px; }

/* 標準ボタンの小さい文字サイズをアイコン番号に継承させない。 */
.olAvatarGrid button{ font:inherit; font-weight:800; line-height:1.35; }
.olNicknameMeta{ flex-wrap:wrap; gap:4px 10px; }
.olStat{ flex-wrap:wrap; column-gap:7px; }
.olMapLabel span{ line-height:1.35; }

/* 人数や長い名前で行が増えた場合も、チーム設定まで操作できる。 */
.olScreen[data-screen="lobby"]{width:1240px;max-width:100%;padding: 50px 18px 24px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d2a2cd transparent;}
.olScreen[data-screen="lobby"] > *{ flex-shrink:0; }

/* コメント参加は配信者だけに表示し、対戦中も操作できる。 */
#olPanelCoopRow{margin-top: 4px;margin-bottom: -6px;font-size: 25px;}
#olPanelCoopRow[hidden]{ display:none; }
#olPanelCoop{ font-size:18px; }

/* ============================================================
   トーナメントマッチ
============================================================ */
.olRuleFixed{ display:inline-block; padding:6px 14px; border-radius:999px; background:#f5eef5; color:#786480; font-size:19px; font-weight:900; }
.olScreen[data-screen="tour"], .olScreen[data-screen="tourDraw"], .olScreen[data-screen="tourFinal"]{ width:1240px; max-width:100%; padding:64px 18px 20px 16px; gap:12px; }
.olTourHead{ display:flex; align-items:center; gap:14px; width:100%; padding:10px 20px; border-radius:20px; background:#fff; border:2px solid #edd5ec; font-size:18px; font-weight:800; color:var(--ol-ink); }
.olTourHead .mode{ font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:22px; color:var(--ol-navy); }
.olTourHead .right{ margin-left:auto; color:var(--ol-sub); }
.olTourHub{ display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:14px; width:100%; flex:1; min-height:0; }
.olTourTreeBox{ position:relative; min-height:0; border-radius:22px; background:#fff; border:2px solid #edd5ec; box-shadow:0 8px 0 #e6d8ec; overflow:hidden; }
.olTourTreeBox .ttl{ position:absolute; left:16px; top:10px; z-index:2; font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:20px; color:var(--ol-navy); }
.olTourTreeBox .ttl small{ font-family:'M PLUS Rounded 1c',sans-serif; font-weight:800; font-size:16px; color:var(--ol-sub); margin-left:10px; }
.olTourCanvas{ position:absolute; left:50%; top:50%; transform-origin:center; }
.olTourCanvas svg{ position:absolute; inset:0; width:100%; height:100%; }
.olTourCanvas svg path{ fill:none; stroke:#dccbe0; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.olTourCanvas svg path.win{ stroke:var(--ol-gold); stroke-width:5; }
.olTSlot{ position:absolute; width:88px; height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:4px 2px; border-radius:14px; background:#faf6fb; border:2px solid #e9d7ea; font-size:16px; font-weight:800; line-height:1.2; color:var(--ol-ink); text-align:center; }
.olTSlot .olAvatar{ width:34px; height:34px; font-size:18px; border-width:2px; border-color:var(--pc,#fff); }
.olTSlot .nm{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.olTSlot .sc{ font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:16px; color:var(--ol-sub); line-height:1.1; }
.olTSlot.tbd{ color:#b9a9bd; border-style:dashed; }
.olTSlot.won{ background:#fff5d6; border-color:var(--ol-gold); box-shadow:0 0 0 3px #ffd25755; }
.olTSlot.lost{ opacity:.5; }
.olTSlot.me{ border-color:var(--ol-teal); box-shadow:0 0 0 3px #ff8fb144; }
.olTSlot.off .olAvatar{ filter:grayscale(1) brightness(.6); }
.olTSlot.hide{ visibility:hidden; }
.olTSlot.landing{ animation:olCardIn .5s var(--puyo) both; }
.olTSlot.crown{ width:112px; height:96px; background:linear-gradient(120deg,#fff7d6,#ffe59a); border-color:var(--ol-gold); box-shadow:0 5px 0 #c99a12; font-size:17px; }
.olTSlot.crown .em{ font-size:30px; line-height:1; }
.olTSlot.crown .em.drop{ animation:olCrownDrop .8s var(--puyo) both; }
.olTPill{ position:absolute; transform:translateX(-50%); padding:3px 10px; border-radius:999px; background:#f1e7fb; color:#5b3f72; font-size:16px; font-weight:800; white-space:nowrap; }
.olTPill.live{ background:#ffe1e8; color:#c4485f; animation:olBlink 1.2s ease-in-out infinite; }
.olTPill.done{ background:#e9f7f5; color:#116b72; }
.olTPill.mine{ background:var(--ol-teal); color:#fff; }
@keyframes olBlink{ 50%{ opacity:.35 } }
.olTourSide{ display:flex; flex-direction:column; gap:12px; min-height:0; overflow:hidden; }
.olTourCard{ position:relative; display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:22px; background:#fff; border:3px solid var(--ol-gold); box-shadow:0 8px 0 #c99a12aa; color:var(--ol-ink); }
.olTourCard .lbl{ align-self:center; padding:4px 16px; border-radius:999px; background:var(--ol-navy); color:#fff; font-size:16px; font-weight:800; }
.olTourVs{ display:flex; align-items:flex-start; justify-content:center; gap:14px; flex-wrap:wrap; padding-top:8px; }
.olTourVs.many{ gap:6px; flex-wrap:nowrap; }
.olTourWho{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; width:110px; }
.olTourVs.many .olTourWho{ width:80px; }
.olTourWho .olAvatar{ width:96px; height:96px; font-size:52px; border:4px solid var(--pc,#ccc); }
.olTourVs.many .olTourWho .olAvatar{ width:64px; height:64px; font-size:34px; }
.olTourWho b{ font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:20px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.olTourWho small{ font-size:16px; font-weight:800; color:var(--ol-sub); }
.olTourWho.tbd .olAvatar{ opacity:.35; }
.olTourWho.off .olAvatar{ filter:grayscale(1) brightness(.6); }
.olTourVs .mark{ align-self:center; font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:40px; color:var(--ol-gold); text-shadow:0 4px 0 #0002; }
.olTourCard .st{ text-align:center; font-size:17px; font-weight:800; color:var(--ol-sub); min-height:24px; }
.olTourCard .st.wait{ color:#a86d91; animation:olBlink 1.4s ease-in-out infinite; }
.olTourCard .under{ text-align:center; font-size:16px; font-weight:800; color:#c4485f; min-height:22px; }
.olTourCard .btns{ display:flex; justify-content:center; }
.olTourCard .btns .olBtn.big{ padding:16px 44px; font-size:28px; }
.olTourMsgs{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.olTourMsgs button{ border:2px solid #edd5ec; background:#fff; color:var(--ol-ink); border-radius:999px; padding:6px 12px; font-family:'M PLUS Rounded 1c',sans-serif; font-size:16px; font-weight:900; cursor:pointer; box-shadow:0 3px 0 #dfc6de; }
.olTourMsgs button:hover{ background:#fff3ce; }
.olTourMsgs button:active{ transform:translateY(2px); box-shadow:0 1px 0 #dfc6de; }
.olTourBubble{ position:absolute; left:50%; top:-8px; transform:translate(-50%,-100%); padding:8px 14px; border-radius:16px; background:#fff; border:3px solid var(--pc,#ccc); color:var(--ol-ink); font-size:17px; font-weight:900; white-space:nowrap; z-index:3; box-shadow:0 4px 0 #0002; animation:olBubble 3s ease both; }
.olTourBubble::after{ content:''; position:absolute; left:50%; bottom:-9px; width:14px; height:14px; background:#fff; border-right:3px solid var(--pc,#ccc); border-bottom:3px solid var(--pc,#ccc); transform:translateX(-50%) rotate(45deg); }
@keyframes olBubble{ 0%{ opacity:0; transform:translate(-50%,-90%) scale(.6) } 10%{ opacity:1; transform:translate(-50%,-100%) scale(1.06) } 15%{ transform:translate(-50%,-100%) scale(1) } 85%{ opacity:1; transform:translate(-50%,-100%) } 100%{ opacity:0; transform:translate(-50%,-112%) } }
.olTourNag{ align-self:center; padding:8px 20px; border-radius:999px; background:var(--ol-gold); color:#6b4a00; font-size:18px; font-weight:900; box-shadow:0 4px 0 #c99a12; animation:olPuyon .7s var(--puyo) infinite; }
.olTourList{ flex:1 1 auto; min-height:64px; padding:12px 14px; border-radius:18px; background:#fff; border:2px solid #edd5ec; font-size:16px; font-weight:800; color:var(--ol-ink); overflow:auto; }
.olTourList h4{ margin:0 0 6px; font-size:18px; color:var(--ol-navy); }
.olTourList .pm{ display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px dashed #edd5ec; }
.olTourList .pm .lb{ width:128px; color:var(--ol-sub); }
.olTourList .pm .who{ flex:1; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.olTourList .pm .who .olAvatar{ width:28px; height:28px; font-size:16px; border-width:2px; border-color:var(--pc,#fff); }
.olTourList .pm .who .olAvatar.dim{ opacity:.35; }
.olTourList .pm .who small{ flex-basis:100%; color:var(--ol-sub); font-size:16px; }
.olTourList .pm .stt{ color:var(--ol-sub); white-space:nowrap; }
.olTourList .pm .stt.live{ color:#c4485f; }
.olTourNote{ flex:none; padding:10px 14px; border-radius:16px; background:#fffaf0; border:2px dashed #ecd7a6; font-size:16px; font-weight:800; color:#7a5a20; }
.olTourSide > .olBtn.small{ align-self:flex-end; }
/* 対戦中：接続が切れている相手 */
.olOffTag{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:#6f6675; color:#fff; font-size:16px; font-weight:800; vertical-align:middle; animation:olBlink 1.4s ease-in-out infinite; }
#cardL.olOffline .sc-label .olAvatar, .olLeader.offline .olAvatar{ filter:grayscale(1) brightness(.55); }
/* 順位欄の「接続中」は、枠が狭くても縦書きにならないようアイコンの上に重ねる */
.olLeaderPortrait .olOffTag{ position:absolute; left:50%; top:20px; z-index:3; margin:0; transform:translateX(-50%); white-space:nowrap; }
#olTourNagFloat{ position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:120; display:flex; align-items:center; gap:12px; padding:8px 12px 8px 16px; border-radius:999px; background:#fff; border:3px solid var(--ol-gold); box-shadow:0 8px 20px rgba(0,0,0,.25); animation:olCardIn .5s var(--puyo) both; }
/* 組み合わせ抽選 */
.olScreen[data-screen="tourDraw"]{ align-items:center; }
.olTourDraw{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; flex:1; min-height:0; }
.olTourDrawTitle{ font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:40px; color:var(--ol-teal2); text-align:center; }
.olTourDrawTitle.small{ font-size:30px; }
.olTourDrawTitle small{ display:block; font-family:'M PLUS Rounded 1c',sans-serif; font-weight:800; font-size:18px; color:var(--ol-sub); margin-top:4px; }
.olTourDrawPool{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:900px; margin-top:24px; }
.olTourChip{ display:flex; align-items:center; gap:8px; padding:8px 18px 8px 8px; border-radius:999px; background:#fff; border:3px solid var(--pc); font-size:22px; font-weight:900; color:var(--ol-ink); box-shadow:0 5px 0 #dfc6de; }
.olTourChip .olAvatar{ width:44px; height:44px; font-size:24px; }
.olTourChip.spin{ animation:olSpinChip .6s ease-in-out infinite; }
@keyframes olSpinChip{ 0%,100%{ transform:translateY(0) rotate(-3deg) } 50%{ transform:translateY(-10px) rotate(3deg) } }
.olTourDrawNote{ font-size:20px; font-weight:800; color:var(--ol-sub); }
.olTourDrawTree{ width:100%; flex:1; min-height:320px; }
/* 表彰式・大会の記録・コメント参加の記録 */
.olScreen[data-screen="tourFinal"]{ align-items:center; overflow-y:auto; }
.olTourFinal{ position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.olTourFinalTitle{ font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:40px; color:var(--ol-navy); text-align:center; }
.olTourFinalTitle small{ display:block; font-family:'M PLUS Rounded 1c',sans-serif; font-weight:800; font-size:18px; color:var(--ol-sub); margin-top:4px; }
.olTourChampName{ font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:44px; color:var(--ol-gold2); text-shadow:0 4px 0 #fff, 0 6px 0 rgba(0,0,0,.12); animation:olPuyon .8s var(--puyo) infinite; }
.olPodium{ display:flex; align-items:flex-end; justify-content:center; gap:18px; margin-top:8px; }
.olPodiumSpot{ display:flex; flex-direction:column; align-items:center; gap:6px; width:190px; animation:olCardIn .6s var(--puyo) both; }
.olPodiumSpot.p2{ animation-delay:.15s; } .olPodiumSpot.p3{ animation-delay:.3s; } .olPodiumSpot.p1{ animation-delay:.5s; }
.olPodiumSpot .olAvatar{ width:96px; height:96px; font-size:52px; border:4px solid var(--pc); }
.olPodiumSpot.p1 .olAvatar{ width:120px; height:120px; font-size:64px; }
.olPodiumSpot b{ font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:24px; color:var(--ol-ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.olPodiumSpot small{ font-size:16px; font-weight:800; color:var(--ol-sub); }
.olPodiumCrown{ font-size:36px; line-height:1; animation:olCrownDrop .8s .6s var(--puyo) both; }
.olPodiumBase{ width:100%; border-radius:14px 14px 0 0; background:linear-gradient(180deg,#ffe59a,#f2c94c); color:#6b4a00; font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:24px; text-align:center; padding:10px 0; box-shadow:0 6px 0 #c99a12; }
.olPodiumSpot.p1 .olPodiumBase{ padding:26px 0; }
.olPodiumSpot.p2 .olPodiumBase{ background:linear-gradient(180deg,#eef1f5,#c9d3dc); color:#3f4c58; box-shadow:0 6px 0 #9aa8b4; padding:16px 0; }
.olPodiumSpot.p3 .olPodiumBase{ background:linear-gradient(180deg,#f3d9c2,#d9a679); color:#5c3a1c; box-shadow:0 6px 0 #a87748; }
.olTourRest{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:1000px; }
.olTourRest .r{ display:flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; background:#fff; border:2px solid #edd5ec; font-size:18px; font-weight:800; color:var(--ol-ink); animation:olCardIn .5s var(--puyo) both; }
.olTourRest .r .pl{ font-family:'Mochiy Pop One',sans-serif; font-weight:400; color:var(--ol-navy); }
.olTourRest .r .olAvatar{ width:36px; height:36px; font-size:20px; border-width:2px; border-color:var(--pc,#fff); }
.olTourRest .r small{ font-size:16px; color:var(--ol-sub); }
.olRecGrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; width:100%; max-width:1100px; }   /* 中身の幅で箱が広がらないようにする */
.olRecBox{ padding:16px 18px; border-radius:22px; background:#fff; border:2px solid #edd5ec; box-shadow:0 8px 0 #e6d8ec; }
.olRecBox h3{ margin:0 0 10px; font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:24px; color:var(--ol-navy); text-align:center; }
.olRecRow{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:8px 14px; border-radius:16px; background:#f7f2f8; margin-top:8px; font-size:20px; font-weight:800; color:var(--ol-ink); animation:olCardIn .6s var(--puyo) both; }
.olRecRow.r1{ background:linear-gradient(120deg,#fff7d6,#ffe59a); box-shadow:0 0 0 3px var(--ol-gold); }
.olRecRow .pl{ font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:22px; min-width:52px; color:var(--ol-navy); }
.olRecRow .olAvatar{ width:40px; height:40px; font-size:22px; border-width:2px; border-color:var(--pc,#fff); }
.olRecRow .nm{ flex:1 1 9em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }   /* 名前に9文字ぶん取れないときは、値を次の行へ送る */
.olRecRow .val{ max-width:100%; margin-left:auto; overflow:hidden; text-overflow:ellipsis; font-family:'Mochiy Pop One',sans-serif; font-weight:400; font-size:24px; color:var(--ol-teal2); white-space:nowrap; }
.olRecRow .val small{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:16px; color:var(--ol-sub); margin-left:4px; }
.olTourFinal .olActions{ margin-top:6px; }
.olCoopLobby{
font-size:20px;
}
/* 表彰式の花火（紙吹雪がランダムな場所で弾ける） */
.olFireworks{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.olFireworks i{ position:absolute; display:block; border-radius:3px; will-change:transform, opacity; }
.olFireworks b{ position:absolute; display:block; width:46px; height:46px; border-radius:50%; filter:blur(3px); will-change:transform, opacity; }
/* 操作パネル「ゲームの配布」: 記入無効のURL欄＋コピー */
.olPanelShare{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.olPanelShare .olOperatorPass{ flex:1 1 auto; min-width:0; width:auto; padding:8px 10px; font-size:16px; background:#fffaf7; }
.olPanelShare .cpBtn{ flex:none; width:auto; padding:8px 14px; white-space:nowrap; }

/* ---- 対戦前のVS画面: 語彙力ランク ---- */
.olCardRank{ display:inline-flex; align-items:baseline; gap:8px; margin-top:10px; padding:4px 18px 6px; border-radius:999px; background:linear-gradient(120deg,#f3e6fa,#fbe6f0); border:3px solid #e2c8ee; color:#9961ab; line-height:1; animation:olPop .5s .45s var(--puyo) both; }
.olCardRank small{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:17px; font-weight:900; letter-spacing:.06em; }
.olCardRank b{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:34px; font-weight:900; }
.olCardRank.gold{ background:linear-gradient(120deg,#fff7d6,#ffe59a); border-color:#f0c95a; color:#c07f12; }
.olVsGrid .olCardRank{ margin-top:6px; padding:2px 12px 4px; border-width:2px; gap:5px; }
.olVsGrid .olCardRank small{ font-size:13px; }
.olVsGrid .olCardRank b{ font-size:22px; }

/* ---- ランクアップの専用演出 ---- */
.olRankUpOv{ position:absolute; inset:0; z-index:125; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%,#5a2a6ecc,#1d0f2bee); opacity:0; transition:opacity .3s ease; overflow:hidden; }
.olRankUpOv.show{ opacity:1; }
.olRankUpOv.hide{ opacity:0; pointer-events:none; }
.olRankUpCard{ position:relative; width:min(760px,92%); padding:34px 30px 30px; border-radius:36px; border:6px solid #e2c8ee; background:linear-gradient(160deg,#fffafd,#f6e9fb 60%,#fde9f2); box-shadow:0 18px 50px #0008, inset 0 0 0 4px #fff; text-align:center; color:#855493; transform:scale(.6); animation:olRankUpIn .6s var(--puyo) forwards; overflow:hidden; }
.olRankUpCard.gold{ border-color:#f0c95a; background:linear-gradient(160deg,#fffdf3,#fff1c4 60%,#ffe7d2); color:#a86a0c; }
@keyframes olRankUpIn{ to{ transform:scale(1); } }
.olRankUpRays{ position:absolute; left:50%; top:54%; width:1400px; height:1400px; margin:-700px 0 0 -700px; background:repeating-conic-gradient(from 0deg,#ffffff00 0 12deg,#ffffffb0 12deg 24deg); opacity:0; animation:olRankUpSpin 14s linear infinite; pointer-events:none; }
.olRankUpCard.boom .olRankUpRays{ opacity:.55; transition:opacity .25s ease; }
@keyframes olRankUpSpin{ to{ transform:rotate(360deg); } }
.olRankUpTitle{ position:relative; font-family:'Mochiy Pop One',sans-serif; font-size:58px; letter-spacing:.08em; color:#e67b35; text-shadow:0 4px 0 #fff, 0 8px 0 #0000001f; animation:olRankUpTitle 1.1s ease-in-out infinite; }
@keyframes olRankUpTitle{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-5px) scale(1.04); } }
.olRankUpStage{ position:relative; display:grid; place-items:center; height:300px; margin:6px 0 4px; }
.olRankUpLetter{ position:absolute; font-family:'M PLUS Rounded 1c','Mochiy Pop One',sans-serif; font-weight:900; font-size:240px; line-height:1; color:#9961ab; text-shadow:0 6px 0 #fff, 0 12px 0 #0000001a, 0 0 40px #d29fdf; }
.olRankUpLetter[data-len="2"]{ font-size:200px; letter-spacing:-.04em; }
.olRankUpLetter[data-len="3"]{ font-size:160px; letter-spacing:-.04em; }
.olRankUpLetter.gold, .olRankUpCard.gold .olRankUpLetter.new{ color:#e0a020; text-shadow:0 6px 0 #fff, 0 12px 0 #0000001a, 0 0 50px #ffd257; }
/* 切り替え前: だんだん強く震えて光る（3.6秒でためる） */
.olRankUpLetter.old{ animation:olRankUpCharge 3.6s cubic-bezier(.5,0,.9,.6) forwards; }
@keyframes olRankUpCharge{
  0%{ transform:scale(1); filter:brightness(1); }
  40%{ transform:scale(1.02) translate(1px,-1px); filter:brightness(1.05); }
  55%{ transform:scale(1.04) translate(-2px,1px); } 62%{ transform:scale(1.05) translate(2px,-2px); }
  70%{ transform:scale(1.07) translate(-3px,2px); filter:brightness(1.25); } 78%{ transform:scale(1.08) translate(3px,-2px); }
  85%{ transform:scale(1.1) translate(-4px,3px); filter:brightness(1.5); } 90%{ transform:scale(1.11) translate(4px,-3px); }
  95%{ transform:scale(1.13) translate(-5px,3px); filter:brightness(1.9); } 100%{ transform:scale(1.15) translate(0,0); filter:brightness(2.4); }
}
.olRankUpLetter.old.out{ animation:olRankUpOut .4s ease-in forwards; }
@keyframes olRankUpOut{ 0%{ transform:scale(1.15); opacity:1; filter:brightness(2.4); } 100%{ transform:scale(.2) rotate(-25deg) translateY(120px); opacity:0; filter:brightness(3) blur(6px); } }
/* 切り替え: 大きく落ちてきて「ドンッ」 */
.olRankUpLetter.new{ animation:olRankUpSlam .7s cubic-bezier(.2,1.5,.35,1) both; }
@keyframes olRankUpSlam{ 0%{ transform:scale(4.2) translateY(-40px); opacity:0; filter:blur(8px) brightness(3); } 38%{ transform:scale(.86); opacity:1; filter:blur(0) brightness(1.6); } 60%{ transform:scale(1.12); filter:brightness(1.1); } 80%{ transform:scale(.97); } 100%{ transform:scale(1); filter:brightness(1); } }
.olRankUpCard.boom{ transform:scale(1); animation:olRankUpShake .5s ease-out; }
@keyframes olRankUpShake{ 0%{ transform:translate(0,14px) scale(1.03); } 20%{ transform:translate(-9px,-6px) scale(1.01); } 40%{ transform:translate(8px,5px); } 60%{ transform:translate(-5px,-3px); } 80%{ transform:translate(3px,2px); } 100%{ transform:translate(0,0); } }
.olRankUpCard.boom::after{ content:''; position:absolute; inset:0; background:#fff; pointer-events:none; animation:olRankUpFlash .55s ease-out forwards; }
@keyframes olRankUpFlash{ 0%{ opacity:.95; } 100%{ opacity:0; } }
.olRankUpRing{ position:absolute; width:250px; height:250px; border-radius:50%; border:6px solid #d29fdf88; animation:olRankUpGather 1.2s ease-in infinite; }
.olRankUpRing.two{ animation-delay:.6s; }
@keyframes olRankUpGather{ 0%{ transform:scale(1.7); opacity:0; } 40%{ opacity:.8; } 100%{ transform:scale(.55); opacity:0; } }
.olRankUpCard.boom .olRankUpRing{ border-color:#ffd257; animation:olRankUpWave .8s ease-out forwards; }
.olRankUpCard.boom .olRankUpRing.two{ animation-delay:.12s; }
@keyframes olRankUpWave{ 0%{ transform:scale(.5); opacity:.95; border-width:16px; } 100%{ transform:scale(3.4); opacity:0; border-width:2px; } }
.olRankUpBurst{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
.olRankUpBurst i{ position:absolute; left:0; top:0; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:30%; background:var(--c); animation:olRankUpBit 1.1s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes olRankUpBit{ 0%{ transform:translate(0,0) scale(1.3) rotate(0); opacity:1; } 100%{ transform:translate(var(--dx),calc(var(--dy) + 70px)) scale(.3) rotate(260deg); opacity:0; } }
.olRankUpSub{ position:relative; font-size:30px; font-weight:900; min-height:44px; }
.olRankUpSub b{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:40px; margin-left:6px; }
.olRankUpSub s{ opacity:.55; margin-left:6px; font-size:30px; }
.olRankUpSub .arrow{ margin:0 12px; color:#e67b35; }
.olRankUpCard.boom .olRankUpSub{ animation:olPop .5s .15s var(--puyo) both; }
.olRankUpOv.light *{ animation-duration:.01s !important; animation-iteration-count:1 !important; }
.olRankUpOv.light .olRankUpRays, .olRankUpOv.light .olRankUpRing{ display:none; }

/* ---- 試合後の表彰（MVP） ---- */
.olMvp{ margin:10px 0 4px; min-height:0; }
.olMvpHead{font-family:'Mochiy Pop One',sans-serif;font-size: 30px;color:#b165aa;margin-bottom:8px;letter-spacing:.04em;}
.olMvpGrid{display:grid;grid-template-columns: repeat(auto-fit,minmax(280px,1fr));gap:10px;}
.olMvpItem{ position:relative; min-width:0; padding:10px 12px; border-radius:18px; background:linear-gradient(160deg,#fff,#f8eefb); border:3px solid #ead9f1; box-shadow:0 4px 0 #e6d3ee; text-align:left; animation:olCardIn .55s var(--puyo) both; }
.olMvpItem.me{ border-color:var(--ol-gold); box-shadow:0 4px 0 #e6c25a, 0 0 0 3px #fff3c4; background:linear-gradient(160deg,#fffdf3,#fff4cf); }
.olMvpItem .lb{display:flex;align-items:center;gap:6px;font-size: 25px;font-weight: 700;color:#a0609e;white-space:nowrap;}
.olMvpItem .wd{ margin:3px 0 6px; font-family:'Mochiy Pop One',sans-serif; font-size:26px; line-height:1.2; color:var(--ol-ink); overflow-wrap:anywhere; }
.olMvpItem .wd.long{ font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.olMvpItem .who{ display:flex; align-items:center; gap:8px; min-width:0; }
.olMvpItem .who > .olAvatar{ flex:none; width:34px; height:34px; font-size:20px; box-shadow:0 0 0 3px var(--pc); border-radius:50%; }
.olMvpItem .who .nm{flex:1;min-width:0;display:flex;flex-direction:column;font-size: 19px;font-weight:900;line-height:1.25;}
.olMvpItem .who .nm > *{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.olMvpItem .who .nm small{ font-size:12px; font-weight:800; color:#2b8f7b; }
.olMvpItem .lb .vl{ margin-left:auto; padding:2px 8px; border-radius:999px; background:#f1e4f6; color:#8a5a9c; font-size:12px; font-weight:900; white-space:nowrap; }

/* ---- 今回の成長（次の相手を探す前に挟む） ---- */
.olGrowthOv{ z-index:96; background:rgba(36,59,83,.98); }
.olMatchOv .olOvCard.olGrowthCard{ width:900px; gap:14px; border-color:#d29fdf; color:#855493; }
.olGrowthGains{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.olGrowthGains .g{ padding:10px 8px; border-radius:18px; background:#f8eefb; border:3px solid #ead9f1; animation:olCardIn .5s var(--puyo) both; }
.olGrowthGains .g:nth-child(2){ animation-delay:.12s; } .olGrowthGains .g:nth-child(3){ animation-delay:.24s; }
.olGrowthGains .g span{ display:block; font-size:18px; font-weight:900; color:#a0609e; }
.olGrowthGains .g b{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:40px; font-weight:900; color:#9961ab; line-height:1.15; }
.olGrowthGains .g b small{ font-size:18px; margin-left:3px; }
.olGrowthGains .g.win{ background:#fff7d6; border-color:#f0c95a; } .olGrowthGains .g.win span, .olGrowthGains .g.win b{ color:#c07f12; }
.olGrowthGains .g.none{ opacity:.5; }
.olGrowthMain{ display:flex; align-items:center; justify-content:center; gap:34px; }
.olGrowthLevel{ display:flex; align-items:baseline; gap:8px; position:relative; }
.olGrowthLevel span{ font-size:24px; font-weight:900; }
.olGrowthLevel b{ display:inline-block; font-family:'M PLUS Rounded 1c',sans-serif; font-size:76px; font-weight:900; color:#9961ab; line-height:1; font-variant-numeric:tabular-nums; }
.olGrowthLevel small{ font-size:22px; font-weight:900; color:#9e7aac; }
.olGrowthLevel em{ position:absolute; left:0; right:0; top:-22px; font-style:normal; font-size:20px; font-weight:900; letter-spacing:.1em; color:#e67b35; text-align:center; }
.olGrowthRank{ display:flex; align-items:baseline; gap:10px; padding:6px 26px 10px; border-radius:999px; background:linear-gradient(120deg,#f3e6fa,#fbe6f0); border:4px solid #e2c8ee; color:#9961ab; line-height:1; }
.olGrowthRank small{ font-family:'M PLUS Rounded 1c',sans-serif; font-size:24px; font-weight:900; letter-spacing:.06em; }
.olGrowthRank b{ display:inline-block; font-family:'M PLUS Rounded 1c',sans-serif; font-size:60px; font-weight:900; }
.olGrowthRank.gold{ background:linear-gradient(120deg,#fff7d6,#ffe59a); border-color:#f0c95a; color:#c07f12; }
.olGrowthXpTop{ display:flex; justify-content:space-between; gap:10px; font-size:19px; font-weight:900; color:#9c7fab; }
.olGrowthTrack{ height:28px; }

/* ---- 最終結果のカード: ドラッグで移動（動かすと暗幕を外して盤面・発見したコトバを確認できる） ---- */
#olFinalOv{ transition:background-color .25s ease; }
#olFinalOv .olOvCard{ position:relative; cursor:grab; }
#olFinalOv .olOvCard.dragging{ cursor:grabbing; user-select:none; transition:none; }
#olFinalOv .olOvCard button{ cursor:pointer; }
#olFinalOv .olRoundTag, #olFinalOv .olChamp{ touch-action:none; }
.olDragGrip{ display:flex; align-items:center; justify-content:center; gap:10px; margin:-16px -22px 10px; padding:8px 14px; border-radius:18px; background:#f3f7f9; color:#6b8192; font-size:21px; font-weight:900; line-height:1.2; touch-action:none; user-select:none; -webkit-user-select:none; }
.olDragGrip .ic{ font-size:26px; color:#9bb0bf; }
.olDragGrip .tx small{ margin-left:10px; font-size:17px; font-weight:800; color:#93a6b3; }
.olDragReset{ margin-left:6px; padding:5px 16px; border:2px solid #d5e1e8; border-radius:999px; background:#fff; color:#5b7181; font:inherit; font-size:18px; }
.olDragReset:hover{ background:#eef4f7; }
#olFinalOv.olFree{ background-color:transparent; pointer-events:none; overflow:visible; }
#olFinalOv.olFree .olOvCard{ pointer-events:auto; box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 0 4px #ffffffaa; }
#olFinalOv.olFree .olConfetti{ display:none; }

/* 相手の選択ボタンの補足（改行して小さめに） */
.olScopeChoices .olBtn small{ display:block; margin-top:6px; font-size:17px; font-weight:800; opacity:.85; }

/* 軽量モードでは常時動く装飾を静止。色・文言による状態表示は残す。 */
body.lightMode .olEntry .em, body.lightMode .olCard .face,
body.lightMode .olVsMark, body.lightMode #mainArea.online #vsText,
body.lightMode .olDots span, body.lightMode .olSearchRing, body.lightMode .olChamp,
body.lightMode .olRewardStars, body.lightMode .olTPill.live, body.lightMode .olTourCard .st.wait,
body.lightMode .olTourNag, body.lightMode .olOffTag, body.lightMode .olTourChip.spin,
body.lightMode .olTourChampName{ animation:none !important; }
body.lightMode .olStatus.on b::after, body.lightMode .olConfetti, body.lightMode .olFireworks{ display:none; }
#olFinalOv.olCovered *, #olFinalOv.olCovered *::before, #olFinalOv.olCovered *::after{ animation-play-state:paused !important; }
/* 表示窓を動かす間だけ盤面全体を合成。各マスを常時レイヤー化しない。 */
#mainArea.olLargeBattle #olBoardViewport.panning #board{ will-change:transform; }

/* ---------- 1試合ごとの結果発表の演出（online.js の rfx。仕様は preview/preview_round_result.html） ---------- */
/* 盤面の上の層。大きさは盤面（#boardWrap）に合わせ、中身は cqw/cqh で拡大縮小する */
#olFxLayer{ position:absolute; inset:0; z-index:10; pointer-events:none; container-type:size; }
.olFxVeil{ position:absolute; inset:-8px; border-radius:20px; background:rgba(250,245,255,.84); opacity:0; transition:opacity .35s; }
.olFxVeil.show{ opacity:1; }
.olFxVeil.light{ background:rgba(250,245,255,.45); }
.olFxBanner{ position:absolute; left:50%; top:50%; z-index:20; display:none; padding:1.6cqw 5cqw 2.3cqw; border:.85cqw solid #9042b8; border-radius:3.2cqw; background:rgba(255,252,246,.98); box-shadow:0 0 0 .75cqw #fff,0 1.5cqw 3.2cqw rgba(60,30,80,.35); color:#7d35a8; font:400 10.5cqw/1.1 'Mochiy Pop One',sans-serif; letter-spacing:.5cqw; white-space:nowrap; transform:translate(-50%,-50%) rotate(-2deg); }
.olFxBanner.show{ display:block; animation:olFxBannerIn .55s cubic-bezier(.34,1.56,.64,1) both; }
.olFxBanner.out{ animation:olFxBannerOut .26s ease-in both; }
.olFxBanner.ko{ padding:.7cqw 6cqw 1.7cqw; border-color:#e84b3c; color:#e13333; font-size:15cqw; }
.olFxCh{ display:inline-block; animation:olFxHop .7s ease-in-out infinite; animation-delay:calc(var(--i) * .07s); }
@keyframes olFxBannerIn{ 0%{ transform:translate(-50%,-50%) rotate(-2deg) scale(2.2); opacity:0; } 100%{ transform:translate(-50%,-50%) rotate(-2deg) scale(1); opacity:1; } }
@keyframes olFxBannerOut{ to{ transform:translate(-50%,-50%) rotate(-2deg) scale(.6); opacity:0; } }
@keyframes olFxHop{ 0%,55%,100%{ transform:none; } 22%{ transform:translateY(-1.5cqw) rotate(-3deg); } 38%{ transform:translateY(-.75cqw) rotate(3deg); } }
.olFxCallout{ position:absolute; left:50%; top:6%; z-index:21; padding:.8cqw 3.4cqw 1.2cqw; border:.65cqw solid var(--cc,#9042b8); border-radius:999px; background:#fff; color:var(--cc,#9042b8); font:400 5.6cqw/1.1 'Mochiy Pop One',sans-serif; white-space:nowrap; transform:translateX(-50%); box-shadow:0 .8cqw 1.8cqw rgba(60,30,80,.25); animation:olFxCallIn 1.3s ease both; }
@keyframes olFxCallIn{ 0%{ transform:translateX(-50%) scale(.3); opacity:0; } 14%{ transform:translateX(-50%) scale(1.15); opacity:1; } 24%{ transform:translateX(-50%) scale(1); } 80%{ opacity:1; } 100%{ transform:translateX(-50%) translateY(-1.8cqw); opacity:0; } }

/* パネル数：1マスずつ集計 */
/* 待ち・数えていないマスは、フィルターを使わず半透明の淡い色と薄い文字に差し替える（色は各デザインの面にも渡る） */
#mainArea #board .cell.olFxPending{ --olFxFrom:var(--owner-color,var(--tile)); }
#mainArea #board .cell.lite.olFxPending{ --olFxFrom:var(--owner-color,var(--tile-lite)); }
#mainArea #board .cell.f-s.olFxPending{ --olFxFrom:var(--c-str); }
#mainArea #board .cell.f-l.olFxPending{ --olFxFrom:var(--c-lis); }
#mainArea #board .cell.olFxPending{ --panel-base:color-mix(in srgb,color-mix(in srgb,var(--olFxFrom) 40%,#ddd6df) 55%,transparent); }
#mainArea #board .cell.olFxMiss{ --panel-base:rgba(222,216,224,.3); }
#mainArea #board .cell.olFxPending, #mainArea #board .cell.olFxMiss, #mainArea #board .cell.olFxHit{ transition:none; }
#mainArea #board[data-panel-design="current"] .cell.olFxPending, #mainArea #board:not([data-panel-design]) .cell.olFxPending{ background:var(--panel-base); box-shadow:inset 0 -5px 0 rgba(120,60,0,.07),0 4px 8px rgba(140,90,139,.07); }
#mainArea #board[data-panel-design="current"] .cell.olFxMiss, #mainArea #board:not([data-panel-design]) .cell.olFxMiss{ background:var(--panel-base); box-shadow:inset 0 -5px 0 rgba(120,60,0,.04),0 4px 8px rgba(140,90,139,.04); }
#mainArea #board .cell.olFxPending > span{ color:rgba(255,255,255,.6); -webkit-text-stroke-color:color-mix(in srgb,color-mix(in srgb,var(--tile-stroke) 45%,#a9a0ab) 55%,transparent); text-shadow:none; }
#mainArea #board .cell.olFxMiss > span{ color:rgba(255,255,255,.35); -webkit-text-stroke-color:rgba(168,160,170,.3); text-shadow:none; }
/* 数えたマス：跳ねるのは拡大だけ。光る輪は拡大と透明度だけで広げ、終わったら消す（ぼかしを描き直さない） */
#mainArea #board .cell.olFxHit{ z-index:3; animation:olFxCellHit .34s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes olFxCellHit{ 0%{ transform:none; } 38%{ transform:scale(1.26) rotate(-3deg); } 100%{ transform:none; } }
#mainArea #board .cell.olFxHit::after{ content:""; position:absolute; inset:-4px; z-index:3; border:4px solid #fff; border-radius:inherit; box-shadow:0 0 0 4px rgba(255,255,255,.45); pointer-events:none; animation:olFxRing .5s ease-out forwards; }
@keyframes olFxRing{ 0%{ opacity:0; transform:scale(.9); } 30%{ opacity:1; transform:none; } 100%{ opacity:0; transform:scale(1.25); visibility:hidden; } }
.olFxScan{ position:absolute; left:0; top:0; z-index:8; display:none; border-radius:24%; box-shadow:0 0 0 4px #fff,0 0 0 8px #9042b8,0 0 22px 6px rgba(144,66,184,.45); transition:transform .05s linear; pointer-events:none; }
.olFxScan.show{ display:block; }
#board.olFxZoom{ transition:transform .9s cubic-bezier(.4,0,.2,1); }
#board.olFxZoom .olFxScan{ box-shadow:0 0 0 8px #fff,0 0 0 16px #9042b8,0 0 40px 12px rgba(144,66,184,.5); }
#olBoardViewport.olFxZoomed .olPanArrow{ display:none !important; }

/* 得点の「？？」、勝敗のスタンプ */
.olFxQ .scoreCurrent{ display:inline-block; color:#b9a4c0; animation:olFxQ 1s ease-in-out infinite; }
.olFxQ small{ visibility:hidden; }
@keyframes olFxQ{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg) translateY(-3px); } }
.battleHpCard.olFxHpQ .battleHpFill{ transform:none; background:repeating-linear-gradient(45deg,var(--hp-color) 0 10px,transparent 10px 20px); }
#timerDisp.olFxZero{ background:linear-gradient(180deg,#8a7a93,#6b5a75) !important; box-shadow:0 4px 0 #4d3f56,0 5px 9px rgba(0,0,0,.25) !important; }
#mainArea.olFxOn .scCard, #mainArea.olFxOn .olTeamScoreCard{ position:relative; }
.olFxStamp{ position:absolute; z-index:6; top:-24px; right:14px; padding:2px 18px 5px; border:4px solid #fff; border-radius:14px; color:#fff; font:400 34px/1.2 'Mochiy Pop One',sans-serif; white-space:nowrap; transform:rotate(8deg); box-shadow:0 5px 12px rgba(60,30,80,.28); pointer-events:none; animation:olFxStampIn .45s cubic-bezier(.34,1.56,.64,1) both; }
#cardS > .olFxStamp{ right:auto; left:14px; }   /* 中央のリボンと重ならないよう外側に出す */
.olFxStamp.win{ background:linear-gradient(180deg,#ffd257,#f0a500); }
.olFxStamp.draw{ background:linear-gradient(180deg,#d59af0,#9042b8); }
.olFxStamp.rank{ background:linear-gradient(180deg,#c9b3d0,#8a7391); }
.olFxStamp.ko{ background:linear-gradient(180deg,#ff8a7a,#d8332a); }
.olFxStamp.stop{ background:var(--pc,#9042b8); font-size:24px; }
@keyframes olFxStampIn{ 0%{ transform:rotate(8deg) scale(2.2); opacity:0; } 100%{ transform:rotate(8deg) scale(1); opacity:1; } }
.scCard.olFxWin, .olTeamScoreCard.olFxWin{ box-shadow:0 0 0 6px #ffd257,0 0 34px 8px rgba(255,210,87,.65),0 6px 14px rgba(140,90,139,.18); animation:olFxCardWin .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes olFxCardWin{ 35%{ transform:scale(1.07) translateY(-8px); } }
.scCard.olFxLose, .olTeamScoreCard.olFxLose{ opacity:.8; }
.olFxCrownDrop{ display:inline-block; font-style:normal; animation:olFxCrownDrop .7s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes olFxCrownDrop{ 0%{ transform:translateY(-60px) scale(2.4) rotate(-20deg); opacity:0; } 100%{ transform:none; opacity:1; } }

/* 3人以上：順位表を全員ぶん（自分が先頭・席順）に並べ、自分の枠をピンクと「あなた」で目立たせる */
#olRank.olFxRank .olLeader{ border:3px solid transparent; border-radius:14px; }
#olRank.olFxRank .olLeader.me{ flex-grow:1.35; border-color:#f7728b; background:#fff0f4; box-shadow:0 3px 8px rgba(247,114,139,.25); }
#olRank.olFxRank .olLeader.me::after{ content:""; position:absolute; inset:-3px; border-radius:17px; box-shadow:0 0 0 6px rgba(247,114,139,.35); opacity:0; pointer-events:none; animation:olFxMePulse 1.6s ease-in-out infinite; }
#olRank.olFxRank .olLeader.me.olFxWin::after, #mainArea.olFxRest #olRank.olFxRank .olLeader.me::after{ animation:none; opacity:0; }
@keyframes olFxMePulse{ 50%{ opacity:1; } }
#olRank.olFxRank .olLeader.me .olLeaderName{ border-color:#f7728b; background:#f7728b; color:#fff; }
#olRank.olFxRank .olLeader.me .olLeaderPortrait .olAvatar{ box-shadow:0 0 0 3px #fff,0 0 0 6px #f7728b; }
.olFxYou{ position:absolute; top:-27px; left:50%; z-index:3; padding:1px 16px 3px; border:3px solid #fff; border-radius:999px; background:linear-gradient(180deg,#ff8fb1,#e2537e); color:#fff; font-size:19px; font-weight:900; line-height:1.4; white-space:nowrap; transform:translateX(-50%); box-shadow:0 3px 6px rgba(226,83,126,.4); }
.olFxYou::after{ content:""; position:absolute; left:50%; bottom:-10px; border:6px solid transparent; border-top-color:#e2537e; transform:translateX(-50%); }
.olFxYouName{ display:none; }
#olRank.olFxRank .olLeader.olFxWin{ background:#fff5d6; box-shadow:0 0 0 4px #ffd257,0 0 20px 4px rgba(255,210,87,.6); animation:olFxCardWin .7s cubic-bezier(.34,1.56,.64,1); }
.olFxCrown{ position:absolute; top:-18px; right:4px; z-index:3; font-size:30px; font-style:normal; animation:olFxCrownDrop .7s cubic-bezier(.34,1.56,.64,1) both; }
#olRank.olFxRank.olFxMany{ gap:6px; padding:8px 10px; }
#olRank.olFxMany .olLeaderPortrait .olAvatar{ width:46px; height:46px; font-size:28px; border-width:3px; }
#olRank.olFxMany .olLeaderName{ font-size:14px; }
#olRank.olFxMany .olLeaderScore{ font-size:21px; }
#olRank.olFxMany .olLeaderScore small{ font-size:13px; }
#olRank.olFxMany .olPlace{ top:28px; font-size:18px; }
#olRank.olFxMany .olFxYou{ top:-23px; padding:0 10px 2px; font-size:15px; }

/* 集計の表示（文字タワー・玉入れ・ダメージ・人数ぶんのチューブ） */
.olFxTally{ position:absolute; inset:0; z-index:10; display:none; }
.olFxTally.show{ display:block; }
.olFxTlCol, .olFxCtSide, .olFxHpSide, .olFxMtCol{ --pcd:color-mix(in srgb,var(--pc) 72%,#2d1838); --pcl:color-mix(in srgb,var(--pc) 35%,#fff); }
.olFxTName{ display:flex; align-items:center; justify-content:center; gap:1.2cqw; min-width:0; color:var(--pcd); font-size:3.6cqw; font-weight:900; white-space:nowrap; }
.olFxTName .olFxNm{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.olFxTName .olAvatar, .olFxTeamBadge{ flex:none; width:5.4cqw; height:5.4cqw; border:.4cqw solid var(--pc); font-size:3cqw; }
.olFxTeamBadge{ display:grid; place-items:center; border-radius:50%; background:var(--pc); color:#fff; font-family:'Mochiy Pop One',sans-serif; }
.olFxGlow{ position:absolute; z-index:-1; box-shadow:0 0 2.4cqw 1.1cqw rgba(255,210,87,.85); opacity:.2; pointer-events:none; animation:olFxGlowPulse 1.2s ease-in-out infinite alternate; }
@keyframes olFxGlowPulse{ to{ opacity:1; } }
#mainArea.olFxRest .olFxGlow{ animation:none; opacity:.85; }
.olFxTally .olFxLoseCol{ opacity:.5; transition:opacity .4s; }
@keyframes olFxStampCenter{ 0%{ transform:translateX(-50%) scale(1.8); opacity:0; } 100%{ transform:translateX(-50%) scale(1); opacity:1; } }
@keyframes olFxStampPlain{ 0%{ transform:scale(1.8); opacity:0; } 100%{ transform:none; opacity:1; } }
/* 合計文字数：文字タワー */
.olFxTlGrid{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; padding:3cqh 3cqw 2cqh; }
.olFxTlCol{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:1.4cqh; min-width:0; }
.olFxState{ position:absolute; top:0; left:50%; z-index:3; padding:.4cqh 2.4cqw .7cqh; border:.6cqw solid var(--pc); border-radius:999px; background:#fff; color:var(--pcd); font:400 3.4cqw/1.3 'Mochiy Pop One',sans-serif; white-space:nowrap; transform:translateX(-50%); animation:olFxStampCenter .4s cubic-bezier(.34,1.56,.64,1) both; }
.olFxTlWord{ position:relative; display:flex; align-items:center; justify-content:center; gap:.8cqw; height:9cqh; }
.olFxTile{ display:grid; place-items:center; width:6.2cqw; height:6.2cqw; border-radius:24%; background:var(--pc); color:#fff; font-family:var(--tile-font,'Kotoba Mochiy'),'Mochiy Pop One',sans-serif; font-size:4.3cqw; font-style:normal; line-height:1; -webkit-text-stroke:.55cqw var(--pcd); paint-order:stroke fill; box-shadow:inset 0 -.6cqw 0 rgba(0,0,0,.14),0 .5cqw 1cqw rgba(60,30,80,.18); animation:olFxTileIn .2s cubic-bezier(.34,1.56,.64,1) both; }
.olFxTlWord.long .olFxTile{ width:6.8cqw; height:6.8cqw; font-size:4.8cqw; box-shadow:0 0 0 .5cqw #ffd257,0 .6cqw 1.4cqw rgba(60,30,80,.22); }
/* 7文字以上のコトバは、列の幅に収まる大きさまで文字パネルを小さくする（大きさは online.js が --tlTile で渡す） */
.olFxTlWord.fit .olFxTile, .olFxTlWord.fit.long .olFxTile{ width:var(--tlTile,6.2cqw); height:var(--tlTile,6.2cqw); font-size:calc(var(--tlTile,6.2cqw) * .7); -webkit-text-stroke-width:calc(var(--tlTile,6.2cqw) * .088); }
@keyframes olFxTileIn{ from{ transform:translateY(-3cqh) scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.olFxGhost{ position:absolute; z-index:2; }
.olFxTube{ position:relative; width:24cqw; height:58cqh; border:.8cqw solid #fff; border-radius:6cqw 6cqw 4cqw 4cqw; background:rgba(255,255,255,.85); box-shadow:0 0 0 .5cqw var(--pcl),0 1cqw 2.4cqw rgba(60,30,80,.15),inset 0 0 2cqw rgba(160,120,180,.15); overflow:hidden; }
.olFxFill{ position:absolute; left:0; right:0; bottom:0; height:100%; background:linear-gradient(180deg,var(--pcl),var(--pc) 22%,var(--pcd)); transform:scaleY(var(--lv,0)); transform-origin:50% 100%; transition:transform .14s ease-out; }
.olFxSurf{ position:absolute; left:0; right:0; bottom:-1.4cqh; height:2.8cqh; border-radius:50%; background:var(--pcl); opacity:.9; transform:translateY(calc(var(--lv,0) * (1.6cqw - 58cqh))); transition:transform .14s ease-out; }
.olFxTick{ position:absolute; left:0; z-index:1; width:100%; border-top:.3cqw dashed rgba(120,80,140,.28); }
.olFxTick span{ position:absolute; top:-2.8cqw; right:1.2cqw; color:rgba(120,80,140,.55); font-size:2.3cqw; font-weight:900; }
.olFxNum{ position:absolute; left:0; right:0; bottom:2.2cqh; z-index:2; color:#fff; font:400 8.5cqw/1 'Mochiy Pop One',sans-serif; text-align:center; white-space:nowrap; -webkit-text-stroke:1.1cqw var(--pcd); paint-order:stroke fill; }
.olFxTally .olFxNum small{ font-size:3.4cqw; }   /* .olFxTally を付けて、スマホの共通指定（small は .85em）より優先する */
/* 3桁（100文字以上）は数字を少し小さくして、「文字」が次の行へ割れないようにする */
.olFxNum.d3{ font-size:6.6cqw; -webkit-text-stroke-width:.95cqw; }
.olFxTally .olFxNum.d3 small{ font-size:3cqw; }
/* コトバ数：玉入れカウント */
.olFxCtGrid{ position:absolute; inset:0; display:grid; grid-template-columns:38fr 24fr 38fr; grid-template-rows:minmax(0,1fr); gap:1.5cqw; padding:3cqh 2.5cqw; }
.olFxCtSide{ position:relative; display:flex; flex-direction:column; gap:1.6cqh; min-width:0; min-height:0; margin-bottom:-2.4cqh; }   /* 下の余白のぶんまで使う（24語までは今までどおりスクロールなしで並ぶ） */
.olFxCtChips{ position:relative; flex:0 1 auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:max-content; align-content:start; gap:1.1cqh 1cqw; }
.olFxChip{ display:block; padding:.7cqh .6cqw .9cqh; overflow:hidden; border-radius:999px; background:var(--pc); color:#fff; font-size:3.1cqw; font-weight:900; line-height:1.3; text-align:center; white-space:nowrap; box-shadow:0 .5cqw 0 var(--pcd); animation:olFxChipIn .36s cubic-bezier(.34,1.56,.64,1) both; }
.olFxChip.lg{ padding-top:1cqh; padding-bottom:1.2cqh; font-size:2.5cqw; letter-spacing:-.03em; }
/* 6文字以上のコトバは、チップの幅に収まる大きさまで文字を小さくする（文字数は online.js が --n で渡す。高さは .lg と同じ） */
.olFxChip.xl{ font-size:calc(var(--chipFit,14.3cqw) / var(--n,6)); line-height:3.25cqw; }
/* コトバが多くて枠に入りきらない列は、枠の中でスクロールする（切り替えと、新しいチップへの移動は online.js の rfxDuelCount） */
.olFxCtChips.olFxScroll{ padding:0 .7cqw .7cqw 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; pointer-events:auto; touch-action:pan-y; }
.olFxCtChips.olFxScroll::-webkit-scrollbar{ width:12px; }
.olFxCtChips.olFxScroll::-webkit-scrollbar-track{ border-radius:999px; background:rgba(255,255,255,.8); box-shadow:inset 0 0 0 1px var(--pcl); }
.olFxCtChips.olFxScroll::-webkit-scrollbar-thumb{ border:2px solid rgba(255,255,255,.9); border-radius:999px; background:var(--pc); }
@supports not selector(::-webkit-scrollbar){ .olFxCtChips.olFxScroll{ scrollbar-width:thin; scrollbar-color:var(--pc) rgba(255,255,255,.8); } }
@keyframes olFxChipIn{ 0%{ transform:translateY(12cqh) scale(.5); opacity:0; } 100%{ transform:none; opacity:1; } }
.olFxEnd{ align-self:center; margin-top:1cqh; padding:.5cqh 2.4cqw .8cqh; border:.6cqw solid var(--pc); border-radius:999px; background:#fff; color:var(--pcd); font:400 3.4cqw/1.3 'Mochiy Pop One',sans-serif; white-space:nowrap; animation:olFxStampPlain .4s cubic-bezier(.34,1.56,.64,1) both; }
.olFxCtMid{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1cqh; }
.olFxCall{ color:#9042b8; font:400 13cqw/1 'Mochiy Pop One',sans-serif; white-space:nowrap; -webkit-text-stroke:1.4cqw #fff; paint-order:stroke fill; text-shadow:0 1cqw 1.6cqw rgba(90,40,120,.25); }
.olFxCall b{ font-weight:400; }
.olFxTally .olFxCall small{ font-size:5cqw; }
.olFxSub{ min-height:5.2cqw; margin-top:1.5cqh; color:#a27a9a; font:400 4cqw/1.3 'Mochiy Pop One',sans-serif; white-space:nowrap; }
/* HP：ダメージ集計 */
.olFxHpGrid{ position:absolute; inset:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2cqw; padding:6cqh 4cqw; }
.olFxHpSide{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.6cqh; min-width:0; padding:4cqh 1cqw; border:.6cqw solid var(--pcl); border-radius:5cqw; background:rgba(255,255,255,.75); }
.olFxHpLab{ color:#8a7391; font-size:3.2cqw; font-weight:900; }
.olFxHpDmg{ color:var(--pcd); font:400 13cqw/1 'Mochiy Pop One',sans-serif; font-variant-numeric:tabular-nums; -webkit-text-stroke:1cqw #fff; paint-order:stroke fill; }
.olFxHpLeft{ color:var(--pcd); font-size:3.4cqw; font-weight:900; }
.olFxHpLeft b{ font:400 5cqw/1.2 'Mochiy Pop One',sans-serif; }
.olFxHpStop{ position:absolute; top:-3.2cqh; left:50%; padding:.4cqh 2.6cqw .7cqh; border-radius:999px; background:var(--pc); color:#fff; font:400 3.8cqw/1.3 'Mochiy Pop One',sans-serif; white-space:nowrap; transform:translateX(-50%) rotate(-4deg); box-shadow:0 .5cqw 0 var(--pcd); animation:olFxStampHp .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes olFxStampHp{ 0%{ transform:translateX(-50%) rotate(-4deg) scale(1.8); opacity:0; } 100%{ transform:translateX(-50%) rotate(-4deg) scale(1); opacity:1; } }
.olFxHpVs{ color:#b862e0; font:400 7cqw/1 'Mochiy Pop One',sans-serif; }
/* 3人以上：人数ぶんのチューブ */
.olFxMtHead{ position:absolute; left:0; right:0; top:1.5cqh; height:11cqh; display:flex; align-items:center; justify-content:center; gap:.6cqw; color:#9042b8; font:400 5.4cqw/1 'Mochiy Pop One',sans-serif; white-space:nowrap; -webkit-text-stroke:.9cqw #fff; paint-order:stroke fill; }
.olFxMtHead b{ display:inline-block; font-size:9cqw; font-weight:400; }
.olFxTally .olFxMtHead small{ font-size:4cqw; }
.olFxMtGrid{ position:absolute; left:2cqw; right:2cqw; top:14cqh; bottom:2cqh; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:1.6cqw; }
.olFxMtCol{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:1cqh; min-width:0; }
.olFxMtState{ position:absolute; top:0; left:50%; z-index:3; padding:.3cqh 1.2cqw .5cqh; border:.45cqw solid var(--pc); border-radius:999px; background:#fff; color:var(--pcd); font:400 2.6cqw/1.3 'Mochiy Pop One',sans-serif; white-space:nowrap; transform:translateX(-50%); animation:olFxStampCenter .4s cubic-bezier(.34,1.56,.64,1) both; }
.olFxTally.many .olFxMtState{ width:96%; padding:.3cqh .3cqw .4cqh; font-size:2cqw; line-height:1.15; text-align:center; white-space:normal; }
.olFxMtChip{ display:flex; align-items:center; justify-content:center; height:6.5cqh; max-width:100%; }
.olFxMtChip span{ padding:.5cqh 1.2cqw .7cqh; border-radius:999px; background:var(--pc); color:#fff; font-size:2.6cqw; font-weight:900; line-height:1.3; white-space:nowrap; box-shadow:0 .4cqw 0 var(--pcd); animation:olFxChipIn .32s cubic-bezier(.34,1.56,.64,1) both; }
.olFxMtChip span.long{ background:linear-gradient(180deg,#ffd257,#f0a500); color:#7c4a12; box-shadow:0 .4cqw 0 #c78a00; }
.olFxMtTube{ position:relative; flex:1 1 auto; width:78%; max-height:60cqh; border:.6cqw solid #fff; border-radius:4cqw 4cqw 3cqw 3cqw; background:rgba(255,255,255,.85); box-shadow:0 0 0 .4cqw var(--pcl),0 .8cqw 1.8cqw rgba(60,30,80,.15); overflow:hidden; }
.olFxMtFill{ position:absolute; left:0; right:0; bottom:0; height:100%; background:linear-gradient(180deg,var(--pcl),var(--pc) 22%,var(--pcd)); transform:scaleY(var(--lv,0)); transform-origin:50% 100%; transition:transform .14s ease-out; }
.olFxMtTube.low .olFxMtFill{ background:linear-gradient(180deg,#ffb0a8,#e84b3c); }
.olFxMtTick{ position:absolute; left:0; width:100%; border-top:.25cqw dashed rgba(120,80,140,.25); }
.olFxMtNum{ position:absolute; left:0; right:0; bottom:1.4cqh; z-index:2; color:#fff; font:400 4.6cqw/1 'Mochiy Pop One',sans-serif; text-align:center; -webkit-text-stroke:.8cqw var(--pcd); paint-order:stroke fill; }
.olFxTally.many .olFxMtNum{ font-size:3.4cqw; -webkit-text-stroke-width:.6cqw; }
.olFxMtName{ display:flex; flex-direction:column; align-items:center; gap:.4cqh; width:100%; color:var(--pcd); font-size:2.4cqw; font-weight:900; }
.olFxMtName .olAvatar{ width:5.5cqw; height:5.5cqw; border:.4cqw solid var(--pc); font-size:3cqw; }
.olFxMtName .olFxNm{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.olFxTally.many .olFxMtName{ font-size:1.8cqw; }
.olFxTally.many .olFxMtName .olAvatar{ width:4.4cqw; height:4.4cqw; }
.olFxMtCol.me .olFxMtName .olAvatar{ box-shadow:0 0 0 .5cqw #fff,0 0 0 1cqw #f7728b; }
.olFxMtCol.me .olFxMtName .olFxNm{ padding:0 1cqw .2cqh; border-radius:999px; background:linear-gradient(180deg,#ff8fb1,#e2537e); color:#fff; }
/* 飛んでいく玉・＋1・紙吹雪（画面に固定） */
.olFxDot{ position:fixed; left:0; top:0; z-index:170; border:2px solid #fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.25); pointer-events:none; }
.olFxPlus{ position:fixed; left:0; top:0; z-index:170; font-family:'Mochiy Pop One',sans-serif; font-weight:400; line-height:1; -webkit-text-stroke:4px #fff; paint-order:stroke fill; white-space:nowrap; pointer-events:none; }
.olFxConf{ position:fixed; left:0; top:0; z-index:170; border-radius:3px; pointer-events:none; }
body.lightMode .olFxCh, body.lightMode .olFxQ .scoreCurrent, body.lightMode #olRank.olFxRank .olLeader.me::after, body.lightMode .olFxGlow, body.lightMode #mainArea #board .cell.olFxHit, body.lightMode #mainArea #board .cell.olFxHit::after{ animation:none; }
body.lightMode .olFxGlow{ opacity:.85; }
body.lightMode #mainArea #board .cell.olFxHit::after{ display:none; }
@media (prefers-reduced-motion:reduce){
  .olFxCh, .olFxQ .scoreCurrent, #olRank.olFxRank .olLeader.me::after, .olFxGlow, #mainArea #board .cell.olFxHit, #mainArea #board .cell.olFxHit::after{ animation:none; }
  .olFxGlow{ opacity:.85; }
  #mainArea #board .cell.olFxHit::after{ display:none; }
}

/* ---------- ステージモードの結果発表の演出（online.js の rfxStage〜） ---------- */
/* 名前の横の画像：配信者アイコンは丸、敵は小さな全身の絵 */
.olFxTName > img{ flex:none; width:5.4cqw; height:5.4cqw; border:.4cqw solid var(--pc); border-radius:50%; background:#fff; object-fit:cover; }
.olFxTName > img.stageEnemyMini{ width:4.6cqw; height:5.8cqw; border:0; border-radius:.8cqw; background:transparent; object-fit:contain; }
/* 雪の子（最長コトバ対決）：両方の一番長いコトバを1文字ずつ並べて長さを比べる */
.olFxLgGrid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4cqh; padding:3cqh 3cqw; }
.olFxLgHead{ color:#9042b8; font:400 5.6cqw/1.1 'Mochiy Pop One',sans-serif; white-space:nowrap; -webkit-text-stroke:.9cqw #fff; paint-order:stroke fill; }
.olFxLgLane{ --pcd:color-mix(in srgb,var(--pc) 72%,#2d1838); --pcl:color-mix(in srgb,var(--pc) 35%,#fff); position:relative; display:flex; flex-direction:column; align-items:center; gap:1.6cqh; width:100%; padding:2.2cqh 2cqw 2.4cqh; border:.6cqw solid var(--pcl); border-radius:4cqw; background:rgba(255,255,255,.8); }
.olFxLgTiles{ display:flex; align-items:center; justify-content:center; gap:1cqw; min-height:var(--lgTile,9cqw); }
.olFxLgTiles .olFxTile{ width:var(--lgTile,9cqw); height:var(--lgTile,9cqw); font-size:calc(var(--lgTile,9cqw) * .7); -webkit-text-stroke:calc(var(--lgTile,9cqw) * .08) var(--pcd); }
.olFxLgNone{ color:#a99cab; font-size:3.6cqw; font-weight:900; }
.olFxLgMeta{ display:flex; align-items:center; justify-content:center; gap:2cqw; min-height:5.6cqw; }
.olFxLgLen{ color:var(--pcd); font:400 4.6cqw/1.1 'Mochiy Pop One',sans-serif; white-space:nowrap; }
.olFxTally .olFxLgLen small{ font-size:2.8cqw; }
.olFxLgBadge{ padding:.3cqh 2cqw .5cqh; border:.5cqw solid var(--pc); border-radius:999px; background:#fff; color:var(--pcd); font:400 3cqw/1.3 'Mochiy Pop One',sans-serif; white-space:nowrap; animation:olFxStampPlain .4s cubic-bezier(.34,1.56,.64,1) both; }
.olFxLgVs{ color:#b862e0; font:400 4.4cqw/1 'Mochiy Pop One',sans-serif; }