/* ============================================================
   コトバ探し2 Vtuber杯 — スマホ縦レイアウト（ブラウザ版専用）
   online/index.html だけが読み込む。html[data-device="mobile"] のときだけ効き、
   PC表示（縮小表示）やわんコメ版には影響しない。
   DOMの並べ替えは mobile-layout.js が行う。
============================================================ */

/* ---------- タイトルのデバイス切替（PC表示でも表示する） ---------- */
.ld-device{ display:flex; justify-content:center; gap:10px; width:100%; margin-top:11px; }
.ld-device-btn{
  min-width:150px; padding:8px 18px; border:3px solid #e6c9d6; border-radius:999px;
  background:#fff; color:#9c7891; font:900 20px/1.2 'M PLUS Rounded 1c',sans-serif;
  box-shadow:0 3px 0 #e6c9d6; cursor:pointer; transition:transform .12s;
}
.ld-device-btn:hover{ transform:translateY(-2px); }
.ld-device-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #e6c9d6; }
.ld-device-btn.act{ background:linear-gradient(180deg,#ffb1c8,#e2537e); border-color:#fff; color:#fff; box-shadow:0 0 0 2px #e2537e,0 3px 0 #b33a5e; }
.ld-device-btn:focus-visible{ outline:3px solid #ab689b; outline-offset:4px; }
#mainArea:not(.startup) .ld-device{ display:none; }

/* ============================================================
   以下はスマホ表示のときだけ
============================================================ */
html[data-web-player][data-device="mobile"],
html[data-web-player][data-device="mobile"] body{
  width:100%; height:100%; min-width:0; overflow:hidden; overscroll-behavior:none; background:#f3effb;
}
html[data-device="mobile"] body{ touch-action:manipulation; font-size:14px; }
html[data-device="mobile"] small{ font-size:.85em; }
html[data-web-player][data-device="mobile"] #stage{
  position:fixed; inset:0; left:0; top:0; width:100% !important; height:100% !important; transform:none !important;
  display:flex; flex-direction:column; overflow:hidden;
}
html[data-device="mobile"] #mainArea{
  position:relative; flex:1 1 0; min-height:0; width:100%; height:auto; padding:0;
  transform:none !important; display:flex; flex-direction:column; overflow:hidden;
}
html[data-device="mobile"] #mainArea.bgPaint{ border-radius:0; }
html[data-device="mobile"] #gameHeader{ display:none !important; }
/* タッチ操作では偽カーソルを使わない */
html[data-device="mobile"] #fakeCursor{ display:none !important; }
html[data-device="mobile"] body.hasFakeCursor,
html[data-device="mobile"] body.hasFakeCursor *{ cursor:auto !important; }

/* ---------- 上部バー：タブ＋状態＋設定 ---------- */
html[data-device="mobile"] .mobileHeader{
  flex:none; display:flex; align-items:center; gap:6px;
  padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px;
  background:#fff; border-bottom:2px solid #f1dbe6; box-shadow:0 2px 8px rgba(140,90,139,.12);
  position:relative; z-index:50;
}
html[data-device="mobile"] .mobileHeader[hidden]{ display:none; }
html[data-device="mobile"] .mobileHeaderTabs{ flex:1 1 auto; min-width:0; }
html[data-device="mobile"] #cpTabs{ display:flex; gap:4px; padding:0; background:transparent; }
html[data-device="mobile"] #cpTabs button{ flex:1 1 0; min-width:0; padding:7px 4px; font-size:13px; border-radius:10px; white-space:nowrap; box-shadow:none; }
html[data-device="mobile"] #cpTabs button.act{ background:#f6e6f6; color:#b164ae; box-shadow:inset 0 0 0 2px #e6c9e6; }
html[data-device="mobile"] #cpTabs button::after{ display:none; }
html[data-device="mobile"] #cpTabs button[hidden]{ display:none; }
html[data-device="mobile"] .mobileStatus{
  flex:none; display:inline-flex; align-items:center; gap:5px; max-width:36%;
  padding:5px 9px; border:1px solid #ead9e7; border-radius:999px; background:#fbf6fb; color:#8a7391;
  font:800 11px/1.3 'M PLUS Rounded 1c',sans-serif; white-space:nowrap; cursor:pointer;
}
html[data-device="mobile"] .mobileStatus b{ flex:none; width:8px; height:8px; border-radius:50%; background:#c2b4c9; }
html[data-device="mobile"] .mobileStatus[data-kind="on"] b{ background:#5ee08c; }
html[data-device="mobile"] .mobileStatus[data-kind="ng"] b{ background:#ff7b7b; }
html[data-device="mobile"] .mobileStatus span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
html[data-device="mobile"] .mobileGear{
  flex:none; width:38px; height:38px; padding:0; border:2px solid #e3cfe6; border-radius:50%;
  background:#fff; color:#9964a4; font-size:21px; line-height:1; cursor:pointer;
}
html[data-device="mobile"] .mobileGear[aria-expanded="true"]{ background:#f6e6f6; }

/* ---------- 設定ドロワー（#ctrlPanel を全画面パネルとして使う） ---------- */
html[data-web-player][data-device="mobile"] #ctrlPanel{
  position:fixed; inset:0; left:0; top:0; right:0; bottom:0; width:auto; max-height:none;
  display:none; flex-direction:column; margin:0; border:0; border-radius:0; box-shadow:none;
  padding-top:env(safe-area-inset-top,0px); z-index:9000; opacity:1 !important;
}
html[data-web-player][data-device="mobile"] body.mobileSettingsOpen #ctrlPanel{ display:flex !important; }
html[data-device="mobile"] .mobileDrawerHead{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:2px solid #ead9e7; background:#fff;
  font:900 18px/1.3 'M PLUS Rounded 1c',sans-serif; color:#9964a4;
}
html[data-device="mobile"] .mobileDrawerClose{
  width:36px; height:36px; padding:0; border:2px solid #e3cfe6; border-radius:50%;
  background:#fff; color:#9964a4; font-size:18px; line-height:1; cursor:pointer;
}
html[data-device="mobile"] #dictStatus{ margin:8px 12px 0; font-size:12px; padding:6px 8px; }
html[data-device="mobile"] #dictStatus .cpBtn{ font-size:13px; }
html[data-device="mobile"] #toolNotice{ max-height:120px; margin:0 12px; font-size:12px; }
html[data-device="mobile"] #mobileSettingsBody{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:8px 12px 12px; scrollbar-width:thin;
}
html[data-device="mobile"] #tabStage,
html[data-device="mobile"] #tabOnline,
html[data-device="mobile"] #tabDes{ display:none !important; }
html[data-device="mobile"] #settingsFooter{
  flex:none; margin:0; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
  border:0; border-top:1px solid #ead9e7; border-radius:0; background:#fff;
}
html[data-device="mobile"] #settingsFooter .cpBtn{ min-height:36px; font-size:13px; }
html[data-device="mobile"] #settingsFooter #designMsg{ font-size:13px; min-height:20px; }
html[data-device="mobile"] .cpSec{ padding:10px 12px; margin-bottom:8px; }
html[data-device="mobile"] .cpSec h4,
html[data-device="mobile"] .cpFoldHead{ font-size:16px; }
html[data-device="mobile"] .cpFoldHead::before{ height:14px; }
html[data-device="mobile"] .cpChk,
html[data-device="mobile"] .cpRow,
html[data-device="mobile"] .cpNote,
html[data-device="mobile"] .dataManagement .cpBtn{ font-size:14px; }
html[data-device="mobile"] .cpBtn{ min-height:38px; font-size:14px; }
html[data-device="mobile"] .cpRow{ padding:4px 0; }
html[data-device="mobile"] .cpRow input[type=range]{ flex:1 1 auto; min-width:60px; }
html[data-device="mobile"] .cpToggle{ flex:0 0 96px; min-height:34px; font-size:14px; }
html[data-device="mobile"] .volVal{ font-size:14px; }
html[data-device="mobile"] .cpFontRow select{ font-size:14px; padding:6px 8px; }
html[data-device="mobile"] .panelDesignChoices{ gap:8px; }
html[data-device="mobile"] .panelDesignChoice{ padding:10px 4px 8px; gap:8px; }
html[data-device="mobile"] .panelDesignName{ font-size:12px; }
html[data-device="mobile"] .panelSampleTile{ --panel-size:30px; width:30px; height:30px; }
html[data-device="mobile"] .panelSampleTile > span{ font-size:20px; -webkit-text-stroke-width:2px; }
html[data-device="mobile"] .swBtn{ width:44px; height:26px; }
html[data-device="mobile"] .mobileHiddenRow{ display:none !important; }

/* ---------- スコア枠（画面上部） ---------- */
html[data-device="mobile"] #scoreArea{
  order:1; flex:none; position:static; width:auto; margin:0; padding:4px 8px 2px;
  display:flex; flex-direction:column; gap:3px;
}
html[data-device="mobile"] .mobileScoreTop{ display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
html[data-device="mobile"] #ribbon{
  position:static; transform:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-width:0; max-width:100%;
  margin:0; padding:3px 12px; border-width:2px; font-size:14px; line-height:1.3; letter-spacing:0; text-align:center;
  white-space:normal; overflow:hidden; text-overflow:ellipsis;
}
/* SP版では左右の星を出さない */
html[data-device="mobile"] #ribbon .st{ display:none; }
html[data-device="mobile"] #scoreRow{ gap:6px; padding-top:0; align-items:stretch; }
html[data-device="mobile"] .scCard{
  flex:1 1 0; min-width:0; width:auto; padding:6px 6px 4px; border-width:3px; border-radius:14px;
  box-shadow:0 3px 8px rgba(140,90,139,.16);
}
html[data-device="mobile"] .scCard .sc-label{
  display:block; padding-bottom:1px; font-size:12px; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-device="mobile"] .sc-label .hostIcon{ width:18px; height:18px; vertical-align:-4px; }
html[data-device="mobile"] #mainArea.online .sc-label > .olAvatar{ width:20px; height:20px; font-size:13px; border-width:1px; }
/* オンラインの名前の行：名前だけを「…」にして、王冠・接続中は小さくして残す（王冠が大きいままだと得点カードが1行ぶん高くなる） */
html[data-device="mobile"] #mainArea.online .scCard .sc-label{ display:flex; align-items:center; justify-content:center; gap:3px; }
html[data-device="mobile"] .sc-label .olWinCrowns{ font-size:12px; line-height:1.2; letter-spacing:0; }
html[data-device="mobile"] .sc-label .olOffTag{ margin-left:0; padding:0 4px; font-size:9px; }
/* 数字と単位は折り返さない。幅の狭い画面（390px未満）では、3桁でも1行に収まるよう数字を少し小さくする */
html[data-device="mobile"] .scCard .sc-num{ font-size:30px; line-height:1.05; margin-top:0; white-space:nowrap; }
html[data-device="mobile"] .scCard .sc-num small{ font-size:12px; }
@media (max-width:389px){
  html[data-device="mobile"] .scCard .sc-num{ font-size:7.3vw; }
  html[data-device="mobile"] .scCard .sc-num small{ font-size:3vw; }
}
html[data-device="mobile"] .stageScoreDetail{ font-size:10px; line-height:1.2; }
html[data-device="mobile"] #cardL.stageEnemyCard{ padding-left:48px; }
html[data-device="mobile"] .stageEnemyImg{ left:2px; bottom:-2px; width:48px; height:64px; }
html[data-device="mobile"] .stageStunSpinner{ width:26px; height:26px; margin:-13px; border-width:3px; }
html[data-device="mobile"] #vsBox{ flex:0 0 auto; min-width:0; gap:2px; padding:0 2px; }
html[data-device="mobile"] #vsText{ font-size:20px; text-shadow:1px 1px 3px #f7c7d6; }
html[data-device="mobile"] #timerDisp{
  width:auto; min-width:78px; padding:2px 10px; border-width:3px; font-size:19px; line-height:1.3; letter-spacing:1px;
}
html[data-device="mobile"] #timerDisp.raceTarget{ width:auto; font-size:13px; letter-spacing:0; }
html[data-device="mobile"] #mainArea.olLargeBattle #timerDisp{ font-size:16px; width:auto; min-width:70px; border-width:3px; }
html[data-device="mobile"] #mainArea.olLargeBattle #olTimerSlot{ margin:0; }
html[data-device="mobile"] .liveLeaderCrown{ width:28px; height:28px; font-size:22px; line-height:28px; }
html[data-device="mobile"] #timerDisp.motionTimerNudge::after{ inset:-3px; }
html[data-device="mobile"] #mainArea.olLargeBattle #scoreArea{ width:auto; }
html[data-device="mobile"] #mainArea.olLargeBattle #scoreRow{ gap:6px; }
html[data-device="mobile"] #mainArea.olLargeBattle #cardS{ flex:0 0 96px; width:auto; padding:6px 4px 4px; }
html[data-device="mobile"] #mainArea.olLargeBattle #cardS .sc-label{ font-size:11px; }
/* PC の大人数戦で大きくした自分のアイコン・名前は、スマホでは元の大きさ */
html[data-device="mobile"] #mainArea.olLargeBattle #cardS .sc-label > .olAvatar{ width:20px; height:20px; }
html[data-device="mobile"] #mainArea.olLargeBattle #cardS .olMyName{ font-size:11px; }
html[data-device="mobile"] #mainArea.olLargeBattle #olRank{
  flex:1 1 0; min-width:0; gap:4px; margin:0; padding:4px 5px; border-width:2px; border-radius:14px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
html[data-device="mobile"] .olLeader{ flex:1 0 52px; min-width:52px; gap:1px; }
html[data-device="mobile"] .olPlace{ top:0; font-size:12px; text-shadow:1.5px 0 0 #fff,-1.5px 0 0 #fff,0 1.5px 0 #fff,0 -1.5px 0 #fff,1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff; }
html[data-device="mobile"] .olLeader.off .olPlace{ font-size:10px; }
html[data-device="mobile"] .olLeaderPortrait{ padding-bottom:6px; }
html[data-device="mobile"] .olLeaderPortrait .olAvatar{ width:34px; height:34px; font-size:20px; border-width:2px; }
html[data-device="mobile"] .olLeaderName{ padding:1px 3px; border-width:1px; border-radius:5px; font-size:9px; }
html[data-device="mobile"] .olLeaderPortrait .olOffTag{ top:10px; padding:0 4px; font-size:9px; }
html[data-device="mobile"] .olLeaderScore{ font-size:13px; }
html[data-device="mobile"] .olLeaderScore small{ font-size:9px; }
/* チーム戦：2枚のカードを横に並べ、注記は次の行へ折り返す（折り返しが無いとカードが幅0につぶれる） */
html[data-device="mobile"] .olTeamScorePanel{ flex-wrap:wrap; gap:4px 6px; }
html[data-device="mobile"] .olTeamScoreCard{ flex:1 1 0; min-width:0; gap:3px; padding:5px 6px; border-width:2px; border-radius:12px; font-size:11px; }
html[data-device="mobile"] .olTeamScoreCard b{ font-size:18px; }
html[data-device="mobile"] .olTeamScoreCard small{ font-size:9px; }
html[data-device="mobile"] .olTeamHpMembers{ font-size:9px; line-height:1.3; }
/* チーム戦のHP勝負: チームのHPを少し大きく、チームのHPと各人のHPの間・枠の下の余白を詰める
   （各人のHPは、これ以上大きくすると2人ぶんが1行に入らず枠が高くなるので、大きさはそのまま） */
html[data-device="mobile"] #mainArea.olTeamHp .olTeamScoreCard{ gap:0; padding:4px 6px 2px; }
html[data-device="mobile"] #mainArea.olTeamHp .olTeamScoreCard b{ font-size:22px; line-height:1.1; }
html[data-device="mobile"] #mainArea.olTeamHp .olTeamScoreNote{ font-size:12px; }
html[data-device="mobile"] .olTeamScoreNote{ font-size:10px; flex:1 1 100%; text-align:center; }

/* ---------- 盤面 ---------- */
html[data-device="mobile"] #playRow{
  order:2; flex:1 1 0; min-height:0; display:flex; align-items:flex-start; justify-content:center;
  /* 画面端からの「戻る」スワイプを避けてパネルを選べる余白。 */
  gap:0; padding:4px max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px)); overflow:visible;
}
/* 多人数戦の表示窓は上下24pxだけ外周が透けるので、その分だけ下げる */
html[data-device="mobile"] #mainArea.olLargeBattle #playRow{ padding-top:26px; }
html[data-device="mobile"] #mainArea.online.olPlay #playRow{ display:flex; }
html[data-device="mobile"] #boardWrap{ flex:none; }
html[data-device="mobile"] .cell{ box-shadow:inset 0 -3px 0 rgba(120,60,0,.16), 0 2px 4px rgba(140,90,139,.16); }
html[data-device="mobile"] body.lightMode .cell{ box-shadow:inset 0 -2px 0 rgba(120,60,0,.16), 0 1px 0 rgba(140,90,139,.16); }
html[data-device="mobile"] .cell span,
html[data-device="mobile"] body.lightMode .cell span{
  -webkit-text-stroke-width:calc(var(--cellFont) * .115);
  text-shadow:0 calc(var(--cellFont) * .1) calc(var(--cellFont) * .04) rgba(0,0,0,.2);
  transform:translateY(-1px);
}
html[data-device="mobile"] .cell.sel span{
  text-shadow:1px 0 0 #14444a, -1px 0 0 #14444a, 0 1px 0 #14444a, 0 -1px 0 #14444a;
}
html[data-device="mobile"] .cell.dup::after{ text-shadow:1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff; }
html[data-device="mobile"] #selRect{ border-width:2px; border-radius:6px; }
html[data-device="mobile"] #board .foundWordMark{ inset:-2px; border-width:2px; box-shadow:0 0 0 2px #835382, inset 0 0 0 1px #835382; }
html[data-device="mobile"] #lastSpurtBanner{
  padding:6px 14px 8px; border-width:3px; border-radius:12px; font-size:22px; letter-spacing:2px;
  box-shadow:0 0 0 2px #fff, 0 4px 10px rgba(0,0,0,.28);
}
html[data-device="mobile"] #mainArea.olLargeBattle #olBoardViewport{ border-width:3px; border-radius:12px; }
html[data-device="mobile"] #mainArea.olLargeBattle #olBoardViewport::after{ inset:-3px; border-width:3px; }
html[data-device="mobile"] .olPanArrow{ width:22px; height:22px; box-shadow:0 0 0 2px #fff, 0 2px 4px #4f315140; }
html[data-device="mobile"] .olPanArrow::before{ inset:6px 5px 7px; }
html[data-device="mobile"] .olPanArrow.up::after{ inset:-18px -14px -4px; }
html[data-device="mobile"] .olPanArrow.down::after{ inset:-4px -14px -18px; }
html[data-device="mobile"] .olPanArrow.left::after{ inset:-14px -4px -14px -18px; }
html[data-device="mobile"] .olPanArrow.right::after{ inset:-14px -18px -14px -4px; }
html[data-device="mobile"] .olPanArrow.up{ top:-12px; left:calc(50% - 11px); --olPanNudge:translateY(-3px); }
html[data-device="mobile"] .olPanArrow.down{ bottom:-12px; left:calc(50% - 11px); --olPanNudge:translateY(3px); }
html[data-device="mobile"] .olPanArrow.left{ left:-12px; top:calc(50% - 11px); --olPanNudge:translateX(-3px); }
html[data-device="mobile"] .olPanArrow.right{ right:-12px; top:calc(50% - 11px); --olPanNudge:translateX(3px); }
html[data-device="mobile"] #mainArea.olLargeBattle #playRow{ gap:0; }

/* カウントダウン・スタート・演出 */
html[data-device="mobile"] #cdNum,
html[data-device="mobile"] body #cdNum{ font-size:96px; -webkit-text-stroke-width:4px; text-shadow:0 4px 0 #c33f1f; }
html[data-device="mobile"] #cdNum.tick::before{ width:120px; height:120px; margin:-60px 0 0 -60px; border-width:4px; }
html[data-device="mobile"] #cdStart,
html[data-device="mobile"] body #cdStart{ top:44%; font-size:44px; -webkit-text-stroke-width:4px; text-shadow:0 4px 0 #c33f1f; }
html[data-device="mobile"] .stageArrival{ top:0; bottom:auto; gap:10px; max-width:96%; }
html[data-device="mobile"] .arrivalPortrait{ width:76px; height:76px; }
html[data-device="mobile"] .arrivalPortrait::before{ inset:-4px; border-width:2px; }
html[data-device="mobile"] .arrivalPortrait img{ top:-8px; }
html[data-device="mobile"] .arrivalName{ min-width:0; max-width:220px; gap:2px; padding:6px 14px; border-width:2px; border-radius:12px; }
html[data-device="mobile"] .arrivalName small{ font-size:10px; letter-spacing:.1em; }
html[data-device="mobile"] .arrivalName strong{ font-size:20px; }
html[data-device="mobile"] .stageAbilityCutin{ top:34%; height:100px; gap:10px; border-block-width:2px; }
html[data-device="mobile"] .stageAbilityCutin img{ width:110px; height:118px; }
html[data-device="mobile"] .stageAbilityCutin strong{ font-size:22px; letter-spacing:.03em; }
html[data-device="mobile"] .coopCountdownNote{ top:calc(50% + 70px); padding:8px 12px 10px; border-width:2px; border-radius:14px; font-size:13px; }
html[data-device="mobile"] .coopNoticeLabel{ font-size:11px; }
html[data-device="mobile"] .comboDisplay{
  position:absolute; left:50%; top:50% !important; width:calc(100% - 24px);
  transform:translate(-50%,-50%) rotate(-7deg); z-index:9;
}
html[data-device="mobile"] .comboNumber{ font-size:56px !important; padding:0 6px 2px 0; -webkit-text-stroke-width:2px; text-shadow:0 2px 0 #ff8b27,0 4px 0 #a72919,1px 5px 4px rgba(55,19,20,.65); }
html[data-device="mobile"] .comboLabel{ margin-top:2px; font-size:16px; -webkit-text-stroke-width:2px; }
html[data-device="mobile"] .olBanner{
  width:max-content; max-width:92%; padding:8px 16px; font-size:15px; line-height:1.35; white-space:normal; text-align:center;
  box-shadow:0 4px 0 #c99a12, 0 7px 14px rgba(0,0,0,.3);
}
html[data-device="mobile"] #olRuleOv .olOvCard{ padding:12px 16px; border-width:3px; border-radius:18px; }
html[data-device="mobile"] .olRuleTime{ font-size:20px; }
html[data-device="mobile"] .olRule{ font-size:28px; margin:2px 0; }
html[data-device="mobile"] .olOvCard .sub{ font-size:12px; }
html[data-device="mobile"] .olRoundTag{ padding:4px 12px; font-size:12px; margin-bottom:6px; }

/* ---------- 発見したコトバ：チップ＋一覧ボタン ---------- */
html[data-device="mobile"] .mobileFound{
  order:3; flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:6px;
  margin:0 8px 4px; padding:5px 8px 6px; border:2px solid #ffd6e4; border-radius:14px;
  background:rgba(255,250,244,.96); box-shadow:0 3px 8px rgba(140,90,139,.12);
}
html[data-device="mobile"] .mobileFound[hidden]{ display:none; }
html[data-device="mobile"] .mobileFoundMain{ min-width:0; display:flex; flex-direction:column; gap:4px; }
html[data-device="mobile"] .mobileFoundHead{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
html[data-device="mobile"] .mobileFoundTitle{ min-width:0; font:900 12px/1.3 'M PLUS Rounded 1c',sans-serif; color:#9964a4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[data-device="mobile"] .mobileFoundTitle b{ margin-left:3px; font-size:15px; color:#e2537e; }
html[data-device="mobile"] .mobileFoundTitle small{ margin-left:1px; font-size:11px; color:#8a7391; }
html[data-device="mobile"] .mobileFoundOpen{
  flex:none; padding:3px 10px; border:2px solid #e3cfe6; border-radius:999px; background:#fff; color:#9964a4;
  font:900 11px/1.3 'M PLUS Rounded 1c',sans-serif; white-space:nowrap; cursor:pointer;
}
html[data-device="mobile"] .mobileFoundChips{ display:flex; flex-wrap:wrap; gap:4px; align-content:flex-start; height:54px; overflow:hidden; }
html[data-device="mobile"] .mobileFoundEmpty{ color:#b39fb8; font:700 12px/1.6 'M PLUS Rounded 1c',sans-serif; padding:2px 4px; }
html[data-device="mobile"] .mobileChip{
  max-width:100%; padding:2px 9px; border:1px solid #f0d9e2; border-radius:999px; background:#fff;
  color:#563f5c; font:800 12px/1.6 'M PLUS Rounded 1c',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
html[data-device="mobile"] .mobileChip.by-s{ background:#ffeef3; border-color:#ffb3c9; color:#e2537e; }
html[data-device="mobile"] .mobileChip.by-l{ background:#eaf3ff; border-color:#a9d4ff; color:#3b8ce0; }
html[data-device="mobile"] .mobileChip.rank{ font-size:11px; }
html[data-device="mobile"] .mobileChip:disabled{ opacity:.75; cursor:default; }
html[data-device="mobile"] #mobileFound #olMinimap{ display:none; margin:0; padding:3px; border-width:2px; border-radius:8px; }
html[data-device="mobile"] #mainArea.olLargeBattle #mobileFound #olMinimap{ display:flex; }
html[data-device="mobile"] #mobileFound .olMapLabel{ display:none; }
html[data-device="mobile"] #mobileFound #olMapSvg{ width:60px; max-width:60px; }
html[data-device="mobile"] #mainArea.loading #mobileFound,
html[data-device="mobile"] #mainArea.loading #mobileActions,
html[data-device="mobile"] #mainArea.loading #mobileRulePop,
html[data-device="mobile"] #mainArea.online:not(.olPlay) #mobileFound,
html[data-device="mobile"] #mainArea.online:not(.olPlay) #mobileActions,
html[data-device="mobile"] #mainArea.online:not(.olPlay) #mobileRulePop{ display:none; }

/* 一覧シート（#foundPanel を中に入れる） */
html[data-device="mobile"] .mobileSheet{ position:fixed; inset:0; z-index:8000; display:flex; flex-direction:column; justify-content:flex-end; }
html[data-device="mobile"] .mobileSheet[hidden]{ display:none; }
html[data-device="mobile"] .mobileSheetBackdrop{ position:absolute; inset:0; background:rgba(47,27,45,.45); }
html[data-device="mobile"] .mobileSheetCard{
  position:relative; display:flex; flex-direction:column; max-height:72%; min-height:40%;
  border-radius:20px 20px 0 0; background:#fffaf4; box-shadow:0 -6px 24px rgba(50,30,50,.25);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html[data-device="mobile"] .mobileSheetHead{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px 8px; border-bottom:2px dotted #ffb3c9;
  font:900 16px/1.3 'M PLUS Rounded 1c',sans-serif; color:#a962ba;
}
html[data-device="mobile"] .mobileSheetClose{
  width:34px; height:34px; padding:0; border:2px solid #e3cfe6; border-radius:50%; background:#fff; color:#9964a4; font-size:17px; line-height:1; cursor:pointer;
}
html[data-device="mobile"] #mobileSheetBody{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:4px 10px 10px; }
html[data-device="mobile"] #foundPanel{
  display:flex !important; flex:1 1 auto; width:100% !important; min-width:0; max-width:none; min-height:0; max-height:none !important;
  padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:hidden;
}
html[data-device="mobile"] #foundPanel h3{ margin-bottom:4px; padding:4px 0; font-size:14px; }
html[data-device="mobile"] .foundMode{ font-size:14px; }
html[data-device="mobile"] .foundMode.act{ font-size:16px; }
html[data-device="mobile"] #foundList{ flex:1 1 auto; min-height:120px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
html[data-device="mobile"] #foundList li{ padding:7px 2px; font-size:15px; animation:none; clip-path:none; }
html[data-device="mobile"] #foundList .fl-word{ font-size:15px; }
html[data-device="mobile"] #foundList .fl-name{ max-width:42%; font-size:12px; }
html[data-device="mobile"] #foundList img.fl-icon,
html[data-device="mobile"] #foundList .fl-icon-e{ width:22px; height:22px; font-size:14px; }
html[data-device="mobile"] #foundList .olAvatar,
html[data-device="mobile"] #foundList .olFinderIcon{ width:22px; height:22px; font-size:14px; }
html[data-device="mobile"] #foundList li .olBadge{ width:20px; height:20px; font-size:13px; }
html[data-device="mobile"] #foundList .rank-no{ width:24px; }
html[data-device="mobile"] #foundList .rank-count{ font-size:15px; }
html[data-device="mobile"] #foundPanel #olTimerSlot{ display:none; }

/* ---------- 下部のアクションバー ---------- */
html[data-device="mobile"] .mobileActions{
  order:4; flex:none; display:flex; flex-wrap:wrap; gap:6px;
  padding:2px 8px calc(6px + env(safe-area-inset-bottom,0px));
}
html[data-device="mobile"] .mobileActions .onlineWaitingBanner{ flex:1 1 100%; margin:0; padding:5px 8px; border-width:1px; border-radius:8px; font-size:12px; }
html[data-device="mobile"] .mobileActionRow{ display:none; flex:1 1 100%; gap:6px; }
html[data-device="mobile"] #mainArea:not(.online) .mobileActionRow[data-for="stage"]{ display:flex; }
html[data-device="mobile"] #mainArea.online .mobileActionRow[data-for="online"]{ display:flex; }
html[data-device="mobile"] .mobileActionRow .cpBtn,
html[data-device="mobile"] .mobileActionBtn{
  flex:1 1 0; min-width:0; min-height:40px; margin:0; padding:4px 6px; border:2px solid #ddbfd8; border-radius:12px;
  background:#fff; color:#7b4d77; font:900 13px/1.25 'M PLUS Rounded 1c',sans-serif; white-space:nowrap; cursor:pointer;
  box-shadow:0 2px 0 #e6d3e3;
}
html[data-device="mobile"] .mobileActionRow .cpBtn:active,
html[data-device="mobile"] .mobileActionBtn:active{ transform:translateY(1px); box-shadow:none; }
html[data-device="mobile"] .mobileActionRow .cpBtn:disabled{ opacity:.45; }
html[data-device="mobile"] .mobileActionBtn[aria-pressed="true"]{ background:#b173ac; border-color:#ac177c; color:#fff; }
html[data-device="mobile"] .mobileActionBtn[hidden]{ display:none; }
html[data-device="mobile"] .mobileRulePop{
  position:absolute; left:8px; right:8px; bottom:calc(60px + env(safe-area-inset-bottom,0px)); z-index:45;
  padding:10px 12px; border:2px solid #e8c38d; border-radius:14px; background:#fff9ec; box-shadow:0 8px 20px rgba(60,40,20,.2);
}
html[data-device="mobile"] .mobileRulePop[hidden]{ display:none; }
html[data-device="mobile"] .mobileRulePop .stageRuleDetail{ padding:0; border:0; background:transparent; font-size:13px; line-height:1.5; }
html[data-device="mobile"] .mobileRulePop .stageRuleDetail strong{ font-size:14px; }

/* ---------- 意味ポップアップ・トースト ---------- */
html[data-device="mobile"] #popRow,
html[data-device="mobile"] #mainArea.online.olPlay #popRow{
  position:absolute; left:0; right:0; top:calc(100% + 6px); bottom:auto; width:auto !important; z-index:40;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; align-items:start; pointer-events:none;
}
html[data-device="mobile"] #mainArea.olLargeBattle #popRow{ top:calc(100% + 30px); }
html[data-device="mobile"] .meanPop{ padding:4px 7px 6px; border-width:2px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.25); }
html[data-device="mobile"] .meanPop .mp-top{ gap:4px; padding-left:1px; }
html[data-device="mobile"] .meanPop .mp-ic{ width:18px; height:18px; font-size:11px; }
html[data-device="mobile"] .meanPop .mp-ic img{ width:18px; height:18px; }
html[data-device="mobile"] .meanPop .mp-nm{ font-size:11px; }
html[data-device="mobile"] .meanPop.mine::after{ top:-8px; right:-6px; width:22px; height:22px; border-width:2px; font-size:12px; }
html[data-device="mobile"] .meanPop .mp-head{ gap:3px; }
html[data-device="mobile"] .meanPop .mp-reading{ font-size:15px; }
html[data-device="mobile"] .meanPop .mp-word{ font-size:11px; }
html[data-device="mobile"] .meanPop .mp-meaning{
  font-size:12px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
html[data-device="mobile"] #toastBox{
  position:fixed; left:50% !important; right:auto; bottom:calc(66px + env(safe-area-inset-bottom,0px)); z-index:9700;
  max-width:calc(100% - 24px); padding:6px 14px; font-size:13px; line-height:1.4; white-space:normal; text-align:center; border-radius:16px;
}

/* ---------- 盤面の上のカード（結果・遊び方など） ---------- */
html[data-device="mobile"] #resultOv{ position:fixed; inset:0; z-index:60; padding:10px; pointer-events:none; }
html[data-device="mobile"] #resultOv .ovl-card{ pointer-events:auto; }
html[data-device="mobile"] .ovl-card{ max-width:100%; padding:16px 12px; border-width:3px; border-radius:18px; box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 8px 18px rgba(140,90,139,.28); }
html[data-device="mobile"] .ovl-card h2{ margin-bottom:8px; font-size:24px; letter-spacing:2px; }
html[data-device="mobile"] #resultCard::after{ display:none; }
html[data-device="mobile"] #resTitle{ margin-bottom:6px; font-size:26px; }
html[data-device="mobile"] #resScore{ font-size:20px; }
html[data-device="mobile"] .resultScoreRows{ min-width:0; gap:4px; font-size:19px; }
html[data-device="mobile"] .resultScoreRow{ gap:10px; }
html[data-device="mobile"] .resultPlayerName img.stageEnemyMini{ width:24px; height:30px; }
html[data-device="mobile"] #resSub{ margin-top:6px; font-size:14px; }
html[data-device="mobile"] .ovl-hint{ margin-top:10px; font-size:12px; }
html[data-device="mobile"] #resHint{ gap:8px; }
html[data-device="mobile"] #resHint .resBtn{ min-width:0; padding:8px 6px; font-size:clamp(10px,3.2vw,13px); white-space:normal; }
html[data-device="mobile"] #replayBar{ top:4px; gap:7px; max-width:calc(100% - 8px); padding:4px 5px 4px 10px; border-width:2px; font-size:13px; }
html[data-device="mobile"] #replayBar button{ padding:5px 10px; font-size:12px; }
html[data-device="mobile"] #missedPanel{ padding:4px 0; }
html[data-device="mobile"] #missedPanel .missedHead{ display:none; }
html[data-device="mobile"] #missedList{ flex:1 1 auto; }
html[data-device="mobile"] #missedList li{ padding:8px 4px; font-size:16px; }
html[data-device="mobile"] #missedList li.mlNote{ font-size:12px; }
html[data-device="mobile"] .resBtn{ min-width:0; padding:8px 14px; font-size:14px; }
html[data-device="mobile"] .resBtn.resAdvanceBtn{ min-width:0; padding:8px 18px; }
html[data-device="mobile"] .resBtn.brainRankingButton{ padding:8px 12px; font-size:13px; }
html[data-device="mobile"] .stageUnlockMotion{ gap:8px; margin:10px 0 6px; }
html[data-device="mobile"] .unlockStage{ width:96px; padding:4px 6px; border-width:2px; border-radius:12px; font-size:12px; }
html[data-device="mobile"] .unlockStage img{ height:40px; width:50px; }
html[data-device="mobile"] .unlockPath{ width:36px; height:5px; }
html[data-device="mobile"] .unlockNew,
html[data-device="mobile"] .unlockClear{ right:-6px; top:-8px; padding:2px 6px; font-size:10px; }
html[data-device="mobile"] #helpOv,
html[data-device="mobile"] #stageDeleteConfirmOv{ justify-content:center; padding:12px; }
html[data-device="mobile"] .helpList{ font-size:14px; line-height:1.5; }
html[data-device="mobile"] .helpList li{ padding:3px 0; }
html[data-device="mobile"] .helpClose{ margin-top:10px; padding:6px 20px; border-width:2px; font-size:14px; }
/* リクエスト（コトバ追加・ゲーム仕様）：キーボードが出ても入力欄が隠れにくいよう上寄せにする */
html[data-device="mobile"] #requestOv{ align-items:flex-start; justify-content:center; padding:8px; }
html[data-device="mobile"] .requestCard{ width:100%; max-height:100%; padding:12px 12px 10px; }
html[data-device="mobile"] .requestCard h2{ margin-bottom:2px; font-size:22px; }
html[data-device="mobile"] .requestLead{ margin-bottom:8px; font-size:12px; }
html[data-device="mobile"] .requestTabs{ gap:4px; margin-bottom:8px; padding:4px; border-radius:12px; }
html[data-device="mobile"] .requestTab{ min-height:36px; border-radius:9px; font-size:15px; }
html[data-device="mobile"] .requestGrid{ grid-template-columns:1fr; gap:0; }
html[data-device="mobile"] .requestField{ margin-bottom:8px; font-size:13px; }
html[data-device="mobile"] .requestField > span{ margin-bottom:3px; }
html[data-device="mobile"] .requestField em{ padding:0 6px; font-size:10px; }
html[data-device="mobile"] .requestField small{ font-size:10px; }
/* 入力欄は16px以上にして、iOSでフォーカス時に画面が拡大されないようにする */
html[data-device="mobile"] .requestField input,
html[data-device="mobile"] .requestField textarea,
html[data-device="mobile"] .requestField select{ padding:7px 10px; border-width:2px; border-radius:10px; font-size:16px; }
html[data-device="mobile"] .requestField textarea{ min-height:64px; }
html[data-device="mobile"] .requestHelp{ margin:-2px 0 8px; font-size:11px; }
html[data-device="mobile"] .requestMsg{ min-height:18px; margin-bottom:6px; font-size:13px; }
html[data-device="mobile"] .requestActions{ gap:10px; }
html[data-device="mobile"] .requestSubmit{ min-width:140px; }
/* 辞書検索：画面いっぱいに出し、入力欄は上、結果は残りの高さでスクロール */
html[data-device="mobile"] #dictOv{ align-items:flex-start; justify-content:center; padding:8px; }
html[data-device="mobile"] .dictCard{ width:100%; height:100%; max-height:100%; padding:12px 12px 10px; }
html[data-device="mobile"] .dictCard h2{ margin-bottom:2px; font-size:22px; }
html[data-device="mobile"] .dictLead{ margin-bottom:8px; font-size:12px; }
html[data-device="mobile"] .dictForm{ flex-wrap:wrap; gap:6px; }
html[data-device="mobile"] .dictForm input{ flex:1 1 100%; padding:7px 10px; border-width:2px; border-radius:10px; font-size:16px; }
html[data-device="mobile"] .dictModes{ flex:1 1 auto; padding:4px; border-radius:12px; }
html[data-device="mobile"] .dictMode{ flex:1; min-width:0; min-height:36px; border-radius:9px; font-size:14px; }
html[data-device="mobile"] .dictSearchBtn{ min-width:96px; }
html[data-device="mobile"] .dictMsg{ min-height:18px; margin:8px 2px 4px; font-size:12px; }
html[data-device="mobile"] .dictItem{ margin:6px 0; padding:7px 10px 8px; border-radius:12px; }
html[data-device="mobile"] .dictReading{ font-size:18px; }
html[data-device="mobile"] .dictWord{ font-size:14px; }
html[data-device="mobile"] .dictMeaning{ font-size:13px; }
html[data-device="mobile"] .dictEmpty{ margin:14px 4px; padding:14px; font-size:13px; }
html[data-device="mobile"] .dictActions{ gap:10px; margin-top:10px; }
html[data-device="mobile"] .resBtn.dictRequestBtn{ min-width:150px; }
html[data-device="mobile"] #stageDeleteConfirmOv{ z-index:9600; }
html[data-device="mobile"] .stageDeleteConfirmCard{ width:100%; }
html[data-device="mobile"] .stageDeleteConfirmCard h2{ font-size:20px; margin-bottom:8px; }
html[data-device="mobile"] .stageDeleteConfirmText{ font-size:14px; }
html[data-device="mobile"] .stageDeleteConfirmNote{ margin-top:8px; padding:6px 10px; font-size:12px; }
html[data-device="mobile"] .stageDeleteConfirmActions{ gap:10px; margin-top:14px; }
html[data-device="mobile"] #dataDeleteOv{ z-index:9600; padding:12px; }
html[data-device="mobile"] .dataDeleteCard{ width:100%; padding:16px 12px; border-radius:18px; }
html[data-device="mobile"] .dataDeleteCard h2{ font-size:20px; }
html[data-device="mobile"] .dataDeleteLead{ margin-bottom:12px; font-size:13px; }
html[data-device="mobile"] .dataDeleteChoices{ gap:8px; }
html[data-device="mobile"] .dataDeleteChoice{ padding:10px 12px; }
html[data-device="mobile"] .dataDeleteChoice strong{ font-size:16px; }
html[data-device="mobile"] .dataDeleteChoice span{ font-size:12px; }
html[data-device="mobile"] .dataDeleteCancel{ min-width:0; margin-top:14px; padding:8px 20px; font-size:15px; }
html[data-web-player][data-device="mobile"] #cpk{ z-index:9500; }

/* ---------- 読み込み・タイトル ---------- */
html[data-device="mobile"] #loadOv{ margin:0; padding:10px; justify-content:center; }
html[data-device="mobile"] #loadOv .ld-card{ width:100%; max-width:100%; padding:34px 12px 22px; border-width:4px; border-radius:24px; }
html[data-device="mobile"] #loadOv .ld-card::after{ inset:6px; border-radius:16px; }
html[data-device="mobile"] .ld-tiles{ gap:8px; top:-12px; }
html[data-device="mobile"] .ld-tile-group{ gap:8px; padding-right:8px; }
html[data-device="mobile"] .ld-tile{ flex-basis:60px; width:60px; height:60px; border-radius:12px; font-size:28px; }
html[data-device="mobile"] #titleLogo{ width:92%; }
html[data-device="mobile"] #titleLogoFallback b{ font-size:32px; }
html[data-device="mobile"] #titleLogoFallback span{ padding:4px 14px; font-size:15px; }
html[data-device="mobile"] .ld-info{ width:82%; min-height:40px; }
html[data-device="mobile"] #titleInfoFallback{ font-size:14px; letter-spacing:1px; }
html[data-device="mobile"] .ld-actions{ min-height:150px; margin-top:10px; }
html[data-device="mobile"] .ld-start{
  width:100%; min-height:62px; margin:6px auto 10px; padding:10px 16px; gap:10px; border-width:3px; border-radius:40px; font-size:24px; letter-spacing:1px;
  box-shadow:0 0 0 2px #c68145,0 0 0 5px #ffe7a0,0 0 0 7px #e9a866,inset 0 2px 0 #fff5b8,inset 0 -3px 0 #e79622,0 8px 12px #b575453b;
}
html[data-device="mobile"] .ld-start-label{ -webkit-text-stroke-width:3px; text-shadow:0 2px 0 #b66b29; }
html[data-device="mobile"] .ld-start-play{ flex-basis:22px; width:22px; height:26px; }
html[data-device="mobile"] .ld-start-rays{ width:40px; height:40px; right:-28px; top:-24px; }
html[data-device="mobile"] #loadOv #loadTxt{ font-size:18px; letter-spacing:1px; }
html[data-device="mobile"] #loadOv #loadTxt.err{ font-size:16px; }
html[data-device="mobile"] #loadOv #loadSub{ margin-top:6px; font-size:12px; }
html[data-device="mobile"] .ld-retry{ margin-top:12px; padding:8px 24px; font-size:16px; }
html[data-device="mobile"] .ld-device{ gap:8px; }
html[data-device="mobile"] .ld-device-btn{ flex:1 1 0; min-width:0; padding:8px 10px; border-width:2px; font-size:15px; }

/* ---------- ステージセレクト ---------- */
html[data-device="mobile"] #stageSelectOv{ padding:6px; }
html[data-device="mobile"] .stageSelectCard{
  width:100%; max-width:100%; max-height:100%; padding:10px 10px 14px; border-width:3px; border-radius:18px;
  box-shadow:0 0 0 3px #fff, 0 4px 10px 6px #9a407b22;
}
html[data-device="mobile"] .stageSelectHeader{ flex-direction:column; align-items:stretch; gap:6px; padding:0 2px 8px; }
html[data-device="mobile"] .stageSelectTitle{ font-size:22px; letter-spacing:1px; text-shadow:1px 2px 0 #fff; }
html[data-device="mobile"] .stageSelectLead{ margin:2px 0 0; font-size:12px; }
html[data-device="mobile"] .stageProgress{ display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; padding:5px 10px; border-radius:12px; }
html[data-device="mobile"] .stageProgressLabel{ font-size:12px; }
html[data-device="mobile"] .stageProgressValue{ margin:0; font-size:12px; gap:4px; }
html[data-device="mobile"] .stageProgressValue b{ font-size:18px; }
html[data-device="mobile"] .stageClearPips span{ width:12px; height:4px; }
html[data-device="mobile"] .stageTrack{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin:10px 0; }
html[data-device="mobile"] .stageTrack::before{ left:8%; right:8%; top:38px; height:3px; }
html[data-device="mobile"] .stageStepBtn{
  height:auto; min-height:120px; gap:2px; padding:5px 3px; border-width:2px; border-radius:12px;
  box-shadow:0 3px 0 #d6c1cf, 0 5px 10px #80617c12;
}
html[data-device="mobile"] .stageNode.unlocked .stageStepBtn{ box-shadow:0 3px 0 #88b4d7, 0 5px 10px #507da317; }
html[data-device="mobile"] .stageNode.cleared .stageStepBtn{ box-shadow:0 3px 0 #99c2b2, 0 5px 10px #60847517; }
html[data-device="mobile"] .stageNode.selected .stageStepBtn{ transform:translateY(-2px); box-shadow:0 0 0 2px #fff, 0 0 0 4px #e8bdcf, 0 4px 0 #bc7e9e, 0 8px 14px #9e58792b; }
html[data-device="mobile"] .stageNode.locked .stageStepBtn{ box-shadow:0 3px 0 #c5b7ca; }
html[data-device="mobile"] .stageStepBtn:hover:not(:disabled){ transform:none; }
html[data-device="mobile"] .stageNodeTop{ min-height:14px; }
html[data-device="mobile"] .stageNodeNumber{ gap:2px; font-size:8px; letter-spacing:.02em; }
html[data-device="mobile"] .stageNodeNumber b{ font-size:10px; }
html[data-device="mobile"] .stageNodeSeal,
html[data-device="mobile"] .stageNode.locked .stageNodeSeal{ font-size:11px; }
html[data-device="mobile"] .stageNodeArt{ height:46px; }
html[data-device="mobile"] .stageNodeEnemy{ width:50px; height:44px; }
html[data-device="mobile"] .stageNodeName{ min-height:26px; margin:2px 0 0; font-size:10px; line-height:1.2; }
html[data-device="mobile"] .stageNodeStatus{ min-width:0; width:100%; padding:2px 2px; font-size:9px; line-height:1.2; }
html[data-device="mobile"] .stageNode.selected .stageNodeStatus::before{ width:4px; height:4px; margin-right:2px; vertical-align:1px; }
html[data-device="mobile"] #stageSelectOv .stageHintBtn{ margin-top:5px; padding:3px 6px; font-size:10px; box-shadow:0 2px 0 #dfc997; }
html[data-device="mobile"] #stageSelectOv .stageHintPanel{ left:10px; right:10px; margin:0; max-height:40vh; overflow:auto; padding:8px 10px; border-radius:12px; }
html[data-device="mobile"] .stageHintHeading h3{ font-size:14px; }
html[data-device="mobile"] .stageHintClose{ padding:3px 8px; font-size:12px; }
html[data-device="mobile"] #stageHintList{ margin-top:6px; font-size:12px; line-height:1.5; }
html[data-device="mobile"] .stageDifficultySwitch,
html[data-device="mobile"] .stageDifficultySwitch.hasExtreme{ width:100%; margin:4px auto 10px; padding:3px; }
html[data-device="mobile"] .stageDifficultyBtn{ min-height:32px; padding:3px 4px; font-size:12px; }
html[data-device="mobile"] .stageBrief{ grid-template-columns:56px minmax(0,1fr); grid-template-rows:auto auto; gap:6px 10px; padding:8px; border-radius:14px; }
html[data-device="mobile"] .stagePreviewPortrait{ width:56px; height:56px; border-radius:12px; }
html[data-device="mobile"] .stagePreviewPortrait img{ width:56px; height:56px; }
html[data-device="mobile"] .stageSelectedLabel{ margin-bottom:2px; padding:2px 5px; font-size:10px; }
html[data-device="mobile"] .stageBriefTitle h3{ font-size:15px; line-height:1.3; }
html[data-device="mobile"] .stageBriefTitle p{ margin-top:2px; font-size:11px; }
html[data-device="mobile"] #stageSelectOv .stageClearBox{
  grid-column:1 / -1; flex-direction:row; align-items:center; gap:6px; padding:5px 0 0;
  border-left:0; border-top:1px dashed #dfc3d4; font-size:13px; line-height:1.4;
}
html[data-device="mobile"] #stageSelectOv .stageClearLabel{ padding:2px 5px; font-size:10px; }
html[data-device="mobile"] #stageSelectOv .stageRuleBox{ margin-top:8px; padding:8px 10px; border-radius:12px; }
html[data-device="mobile"] #stageSelectOv .stageRuleBox h3{ font-size:12px; }
html[data-device="mobile"] #stageSelectOv .stageRuleList{ padding-left:1.1em; font-size:13px; line-height:1.45; letter-spacing:0; }
html[data-device="mobile"] #stageSelectOv .stageRuleList li{ padding:1px 0; }
html[data-device="mobile"] #stageSelectOv .stageChallengeBtn{
  margin-top:10px; padding:11px 10px; border-width:2px; border-radius:12px; font-size:18px; letter-spacing:1px;
  box-shadow:0 0 0 1px #c48aa6, 0 4px 0 #91526f, 0 8px 14px #9a5c792b; text-shadow:2px 2px 0 #935472a0;
}
html[data-device="mobile"] #stageSelectOv .stageChallengeBtn:disabled{ box-shadow:0 3px 0 #aa98a4; }
html[data-device="mobile"] #stageSelectOv .stageGarden span{ font-size:16px; }

/* ---------- オンラインの画面 ---------- */
html[data-device="mobile"] #mainArea.online #onlineOv{ padding:0 !important; }
html[data-device="mobile"] .olWrap{ max-width:100%; }
html[data-device="mobile"] .olScreen{
  padding:10px 8px 16px; gap:10px; align-items:stretch; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
html[data-device="mobile"] .olScreen > *{ flex-shrink:0; transform-origin:center top; }
html[data-device="mobile"] .olScreen[data-screen="home"],
html[data-device="mobile"] .olScreen[data-screen="lobby"]{ width:100%; padding:10px 8px 16px; gap:8px; }
html[data-device="mobile"] .olStatus{ position:static; font-size:12px; }
html[data-device="mobile"] .olHomeView .olStatus{ display:none; }
html[data-device="mobile"] .olTitle{ font-size:24px; }
html[data-device="mobile"] .olTitle small{ margin-top:4px; font-size:12px; letter-spacing:.08em; }
html[data-device="mobile"] .olSub{ font-size:14px; }
html[data-device="mobile"] .olBtn{ padding:10px 16px; font-size:15px; box-shadow:0 4px 0 var(--ol-teal2), 0 8px 14px rgba(0,0,0,.18); }
html[data-device="mobile"] .olBtn.gold{ box-shadow:0 4px 0 #c99a12, 0 8px 14px rgba(0,0,0,.18); }
html[data-device="mobile"] .olBtn.pink{ box-shadow:0 4px 0 #2a9a7f, 0 8px 14px rgba(0,0,0,.18); }
html[data-device="mobile"] .olBtn.ghost{ box-shadow:0 3px 0 #dfc6de; }
html[data-device="mobile"] .olBtn.small{ padding:6px 12px; font-size:13px; }
html[data-device="mobile"] .olBtn.big{ padding:12px 20px; font-size:17px; }
html[data-device="mobile"] .olInput{ min-width:0; padding:8px 10px; border-width:2px; border-radius:12px; font-size:16px; }
html[data-device="mobile"] .olSeg button{ padding:6px 10px; font-size:13px; }
html[data-device="mobile"] .olToggle{ gap:6px; font-size:14px; }
html[data-device="mobile"] .olToggle i{ width:44px; height:26px; }
html[data-device="mobile"] .olToggle i::after{ width:18px; height:18px; }
html[data-device="mobile"] .olToggle.on i::after{ transform:translateX(18px); }
html[data-device="mobile"] .olSearchRing{ width:18px; height:18px; border-width:3px; margin-right:6px; }
/* ホーム */
html[data-device="mobile"] .olHomeFrame{ border-radius:18px; box-shadow:inset 0 0 0 4px #fff9fc,0 3px 0 #ead4e3,0 5px 10px #68456612; }
html[data-device="mobile"] .olHomeProfile{ display:flex; flex-direction:column; align-items:stretch; gap:10px; height:auto; padding:30px 10px 10px; }
html[data-device="mobile"] .olPlayerHeading{ top:-12px; left:-4px; }
html[data-device="mobile"] .olPlayerHeading img{ width:170px; }
html[data-device="mobile"] .olAvatarEditor{ flex-direction:row; align-items:center; gap:10px; }
html[data-device="mobile"] #olMyAvatar .olAvatar{ width:84px; height:84px; border-width:4px; font-size:44px; }
html[data-device="mobile"] .olAvatarActions{ flex:1 1 auto; min-width:0; margin-top:0; gap:6px; }
html[data-device="mobile"] .olAvatarActions .olBtn{ width:100%; height:38px; padding:4px 8px; font-size:13px; }
html[data-device="mobile"] .olAvatarActions .olHomeIcon{ width:18px; height:18px; }
html[data-device="mobile"] .olNicknameRow{ grid-column:auto; grid-row:auto; }
html[data-device="mobile"] .olHomeProfile .olNicknameRow label{ margin-bottom:6px; font-size:15px; }
html[data-device="mobile"] .olNicknameRow label .olHomeIcon{ width:18px; height:20px; }
html[data-device="mobile"] .olNicknameFields{ gap:8px; }
html[data-device="mobile"] .olHomeProfile .olInput{ height:44px; padding:6px 10px; font-size:17px; }
html[data-device="mobile"] .olHomeProfile .olInput::placeholder{ font-size:14px; }
html[data-device="mobile"] .olNicknameRow #olNameSave{ flex:0 0 92px; height:44px; padding:6px 10px; gap:5px; border-radius:12px; font-size:15px; box-shadow:inset 0 0 0 2px #ffd7e8,0 3px 0 #eaa5c3,0 6px 10px #c9619830; }
html[data-device="mobile"] .olNicknameRow #olNameSave .olHomeIcon{ width:18px; height:18px; }
html[data-device="mobile"] .olNicknameMeta{ min-height:0; padding:4px 2px 0; font-size:12px; }
html[data-device="mobile"] .olMatchHelpGrid{ grid-column:auto; grid-row:auto; gap:6px; }
html[data-device="mobile"] .olMatchHelpButton{ min-height:38px; padding:6px 8px; border-radius:10px; font-size:12px; }
html[data-device="mobile"] .olMatchHelpMark{ width:20px; height:20px; font-size:13px; }
html[data-device="mobile"] .olUserSelect{ height:auto; flex-wrap:wrap; gap:8px; padding:10px; font-size:14px; }
html[data-device="mobile"] .olUserSelect .olSeg{ flex:1 1 100%; margin-left:0; }
html[data-device="mobile"] .olUserSelect .olSeg button{ padding:8px 6px; gap:6px; font-size:14px; }
html[data-device="mobile"] .olUserSelect .olSeg .olHomeIcon{ width:18px; height:18px; }
html[data-device="mobile"] .olHelpBtn{ width:24px; height:24px; font-size:15px; }
html[data-device="mobile"] #olCoopHome{ flex:1 1 100%; justify-content:center; min-height:0; padding:5px 10px; font-size:12px; }
html[data-device="mobile"] #olCoopHome .olHomeIcon{ width:18px; height:18px; }
html[data-device="mobile"] .olModeSection{ padding:12px 10px; }
html[data-device="mobile"] .olModeHeader{ height:auto; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
html[data-device="mobile"] .olModeHeader .olHomeHeading{ flex:0 0 auto; margin:-14px 0 0 -10px; }
html[data-device="mobile"] .olModeHeader .olHomeHeading img{ width:170px; }
html[data-device="mobile"] .olModePrompt{ flex:1 1 100%; padding:0; }
html[data-device="mobile"] .olModePrompt > .olHomeIcon{ width:18px; height:18px; }
html[data-device="mobile"] .olModeDescription{ font-size:12px; line-height:1.4; }
html[data-device="mobile"] .olHomeEntries{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
html[data-device="mobile"] .olHomeEntries .olEntry{ height:auto; min-height:0; padding:10px 6px 8px; border-radius:14px; }
html[data-device="mobile"] .olHomeEntries .olEntry .em{ height:40px; margin-bottom:6px; }
html[data-device="mobile"] .olHomeEntries .olEntry .em .olHomeIcon{ width:36px; height:36px; }
html[data-device="mobile"] .olHomeEntries .olEntry .nm{ font-size:15px; }
html[data-device="mobile"] .olHomeEntries .olEntry .ds{ margin-top:4px; padding:2px; font-size:10px; }
html[data-device="mobile"] .olEntryNote{ margin-top:5px; font-size:10px; line-height:1.35; }
html[data-device="mobile"] .olHomeEntries .olEntry:hover{ transform:none; }
html[data-device="mobile"] .olProgress{ grid-template-columns:minmax(0,1fr); gap:8px; min-height:0; padding:10px; }
html[data-device="mobile"] .olStatRow{ gap:10px; }
html[data-device="mobile"] .olStat{ min-height:0; }
html[data-device="mobile"] .olStat > span{ margin-top:2px; font-size:12px; }
html[data-device="mobile"] .olStat > span .olHomeIcon{ width:16px; height:16px; }
html[data-device="mobile"] .olStat b{ font-size:22px; }
html[data-device="mobile"] .olStat small{ font-size:11px; }
html[data-device="mobile"] .olXpTop{ min-height:0; font-size:11px; }
html[data-device="mobile"] .olXpTrack{ height:14px; }
html[data-device="mobile"] .olProgressNote{ padding:8px; border-radius:14px; font-size:11px; line-height:1.5; transform:none; }
html[data-device="mobile"] .olProgressNote .olHomeIcon{ width:14px; height:14px; }
html[data-device="mobile"] .olRankNote{ gap:8px; padding:6px 8px 12px; line-height:1.1; }
html[data-device="mobile"] .olRankLabel{ font-size:14px; }
html[data-device="mobile"] .olRankNote .olRankValue{ font-size:28px; }
html[data-device="mobile"] .olRankUp{ bottom:0; font-size:10px; }
/* 部屋をつくる／参加 */
html[data-device="mobile"] .olPanel{ width:100%; padding:14px 12px 12px; border-radius:18px; box-shadow:0 8px 0 #cfe0e6, 0 12px 20px rgba(0,0,0,.2); }
html[data-device="mobile"] .olPanel h3{ margin-bottom:8px; font-size:20px; }
html[data-device="mobile"] .olField{ flex-wrap:wrap; gap:6px; padding:8px 0; }
html[data-device="mobile"] .olField label{ font-size:14px; }
html[data-device="mobile"] .olField .olInput{ flex:1 1 100%; min-width:0; width:100%; }
html[data-device="mobile"] .olField > div{ flex:1 1 100%; min-width:0; }
html[data-device="mobile"] .olField .olSeg{ display:flex; }
html[data-device="mobile"] .olField .olSeg button{ flex:1; }
html[data-device="mobile"] .olRuleSelect,
html[data-device="mobile"] .olRoomRules select{ min-width:0; width:100%; padding:7px 10px; font-size:15px; }
html[data-device="mobile"] .olField .olRuleSelect{ flex:1 1 100%; }
html[data-device="mobile"] .olCap{ justify-content:center; width:100%; }
html[data-device="mobile"] .olCap button{ width:34px; height:34px; font-size:20px; }
html[data-device="mobile"] .olCap b{ min-width:56px; font-size:22px; }
html[data-device="mobile"] .olEye{ width:40px; height:40px; font-size:20px; }
html[data-device="mobile"] .olActions{ flex-wrap:wrap; gap:8px; margin-top:12px; }
html[data-device="mobile"] .olHint{ font-size:12px; }
html[data-device="mobile"] .olErr{ min-height:20px; font-size:13px; }
/* ロビー */
html[data-device="mobile"] .olLobbyHead{ flex-wrap:wrap; gap:6px 10px; padding:8px 10px; border-radius:14px; font-size:13px; }
html[data-device="mobile"] .olLobbyHead .mode{ font-size:16px; }
html[data-device="mobile"] .olPass{ padding:3px 4px 3px 10px; font-size:14px; letter-spacing:.08em; }
html[data-device="mobile"] .olPass button{ padding:4px 8px; font-size:12px; }
html[data-device="mobile"] .olRoomRules{ gap:8px 12px; padding:8px 10px; border-radius:12px; }
html[data-device="mobile"] .olRoomRules label{ flex:1 1 40%; gap:6px; font-size:13px; }
html[data-device="mobile"] .olRoomRules > span{ flex:1 1 100%; font-size:11px; }
html[data-device="mobile"] .olCards,
html[data-device="mobile"] .olCards.two,
html[data-device="mobile"] #olLobbyCards:not(.two),
html[data-device="mobile"] .olCards.olWaiwaiCards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
html[data-device="mobile"] .olCard,
html[data-device="mobile"] #olLobbyCards:not(.two) .olCard,
html[data-device="mobile"] .olWaiwaiCards .olCard,
html[data-device="mobile"] .olVsGrid .olCard{ width:auto; min-height:0; padding:12px 6px 8px; border-width:3px; border-radius:16px; box-shadow:0 5px 0 rgba(0,0,0,.14), 0 8px 12px rgba(0,0,0,.2); }
html[data-device="mobile"] .olCard.ready{ box-shadow:0 0 0 3px rgba(94,224,140,.55), 0 5px 0 rgba(0,0,0,.14), 0 8px 12px rgba(0,0,0,.2); }
html[data-device="mobile"] .olCard.me{ transform:none; }
html[data-device="mobile"] .olCard.empty{ font-size:13px; border-width:3px; }
html[data-device="mobile"] .olCard .num{ left:-8px; top:-8px; width:24px; height:24px; font-size:13px; }
html[data-device="mobile"] .olCard .face,
html[data-device="mobile"] #olLobbyCards:not(.two) .face,
html[data-device="mobile"] .olWaiwaiCards .olCard .face,
html[data-device="mobile"] .olVsGrid .olCard .face{ width:44px; height:44px; margin-bottom:4px; font-size:24px; }
html[data-device="mobile"] .olCard .face .olAvatar,
html[data-device="mobile"] #olLobbyCards:not(.two) .face .olAvatar,
html[data-device="mobile"] .olVsGrid .olCard .face .olAvatar,
html[data-device="mobile"] .olWaiwaiCards .olCard .face .olAvatar{ width:44px; height:44px; font-size:24px; }
html[data-device="mobile"] .olCard .name,
html[data-device="mobile"] #olLobbyCards:not(.two) .name,
html[data-device="mobile"] .olWaiwaiCards .olCard .name,
html[data-device="mobile"] .olVsGrid .olCard .name{ font-size:14px; }
html[data-device="mobile"] .olCard .tags{ gap:4px; margin-top:5px; }
html[data-device="mobile"] .olCard .tag{ padding:2px 5px; font-size:10px; }
html[data-device="mobile"] .olCard .state{ margin-top:5px; font-size:11px; }
html[data-device="mobile"] #olLobbyCards .state{ margin-top:6px; padding:4px 6px; font-size:12px; }
html[data-device="mobile"] .olCard .crowns{ right:4px; top:-10px; }
html[data-device="mobile"] .olCard .crowns span{ font-size:16px; }
html[data-device="mobile"] .olCard .matchWins{ right:4px; top:-9px; }
html[data-device="mobile"] .olScreen > .olReadyPop{ padding:8px 16px; font-size:15px; box-shadow:0 4px 0 #c99a12, 0 8px 14px rgba(0,0,0,.2); }
html[data-device="mobile"] .olRoomRules .olRoomRuleDesc{ font-size:12px; margin-top:-2px; }
html[data-device="mobile"] .olRuleSuffix{ font-size:14px; }
html[data-device="mobile"] .olFindCutinBand{ height:120px; }
html[data-device="mobile"] .olFindCutinCard .olAvatar{ width:84px; height:84px; font-size:44px; border-width:4px; }
html[data-device="mobile"] .olFindCutinName{ font-size:15px; }
html[data-device="mobile"] .olFindCutinWord{ padding:1px 10px; font-size:13px; }
html[data-device="mobile"] .olPanelMe{ gap:8px; padding:6px 8px; }
html[data-device="mobile"] .olPanelMe .olAvatar{ width:40px; height:40px; font-size:24px; }
html[data-device="mobile"] .olPanelMeText{ font-size:12px; }
html[data-device="mobile"] .olPanelMeText b{ font-size:14px; }
html[data-device="mobile"] .olPanelMeText em{ font-size:13px; }
html[data-device="mobile"] .olMatchWins{ padding:1px 7px 2px; font-size:10px; box-shadow:0 2px 0 rgba(0,0,0,.15); }
html[data-device="mobile"] .olMatchWins b{ font-size:14px; }
html[data-device="mobile"] .olReadyTick{ width:20px; height:20px; font-size:14px; border-width:2px; }
html[data-device="mobile"] .olLobbyBtns{ flex-wrap:wrap; gap:8px; }
/* 「レディ！」（キャンセル）は押しやすいよう、横いっぱいの大きなボタンにして1段目に置く。開始・退出は2段目 */
html[data-device="mobile"] .olLobbyBtns #olReadyBtn{ flex:1 1 100%; min-height:62px; margin:6px 0 4px; padding:14px 20px; font-size:24px; }
html[data-device="mobile"] .olLobbyNote{ min-height:0; margin-bottom:0; font-size:12px; }
html[data-device="mobile"] .olSpectatorNote{ font-size:13px; }
html[data-device="mobile"] .olTeamControls{ gap:8px 12px; padding-bottom:4px; }
html[data-device="mobile"] .olTeamToggle{ font-size:14px; }
html[data-device="mobile"] .olTeamRule{ font-size:12px; }
html[data-device="mobile"] .olTeamAssignments{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; }
html[data-device="mobile"] .olTeamAssignments label{ font-size:12px; }
html[data-device="mobile"] .olTeamAssignments select{ min-width:0; padding:4px; font-size:12px; }
html[data-device="mobile"] .olQueueHost input,
html[data-device="mobile"] .olTeamToggle input{ width:18px; height:18px; }
/* マッチング */
html[data-device="mobile"] .olMatching{ gap:12px; }
html[data-device="mobile"] #olMatchCards.two{ grid-template-columns:minmax(0,1fr); gap:6px; }
html[data-device="mobile"] #olMatchCards.two > .olCard{ min-height:0; }
html[data-device="mobile"] #olMatchCards.two > .olVsMark{ margin-bottom:4px; }
html[data-device="mobile"] .olVsMark{ font-size:28px; text-shadow:0 3px 0 rgba(0,0,0,.25); }
html[data-device="mobile"] .olQueueHost{ flex-wrap:wrap; gap:10px; padding:8px 10px; border-radius:12px; font-size:13px; }
html[data-device="mobile"] #olMatchInfo{ font-size:13px; }
html[data-device="mobile"] #olMatchInfo small{ margin-top:6px; font-size:11px; }
html[data-device="mobile"] .olQueueCountdown{ font-size:22px; }
html[data-device="mobile"] .olMatchActions{ flex-wrap:wrap; gap:8px; }
html[data-device="mobile"] .olMatchActions .olBtn{ flex:1 1 auto; white-space:normal; }
/* 対戦開始・結果 */
html[data-device="mobile"] .olMatchOv{ inset:0; padding:8px; border-radius:0; }
html[data-device="mobile"] .olIntro{ width:100%; }
html[data-device="mobile"] .olIntro .olRoundTag{ font-size:13px !important; padding:5px 12px !important; }
html[data-device="mobile"] .olVs{ flex-direction:column; gap:6px; }
html[data-device="mobile"] .olVs > .olCard{ width:100%; max-width:240px; }
html[data-device="mobile"] .olVsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
/* 7人以上は、カードを横長（左にアイコン、右に名前・種類・ランク）にして、全員が画面に入るようにする */
html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(7)) .olCard{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:7px; align-items:center; justify-items:start; padding:7px 6px 6px 12px; text-align:left; }
html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(7)) .olCard .face{ grid-column:1; grid-row:1 / span 3; width:40px; height:40px; margin:0; font-size:22px; }
html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(7)) .olCard .face .olAvatar{ width:40px; height:40px; font-size:22px; }
html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(7)) .olCard .name{ grid-column:2; max-width:100%; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(7)) .olCard .tags{ grid-column:2; justify-content:flex-start; margin-top:2px; gap:3px; }
html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(7)) .olCard .olCardRank{ grid-column:2; margin-top:3px; }
@media (max-height:620px){
  html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(5)) .olCard{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:7px; align-items:center; justify-items:start; padding:7px 6px 6px 12px; text-align:left; }
  html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(5)) .olCard .face{ grid-column:1; grid-row:1 / span 3; width:40px; height:40px; margin:0; font-size:22px; }
  html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(5)) .olCard .face .olAvatar{ width:40px; height:40px; font-size:22px; }
  html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(5)) .olCard .name{ grid-column:2; max-width:100%; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
  html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(5)) .olCard .tags{ grid-column:2; justify-content:flex-start; margin-top:2px; gap:3px; }
  html[data-device="mobile"] .olVsGrid:has(> .olCard:nth-child(5)) .olCard .olCardRank{ grid-column:2; margin-top:3px; }
}
html[data-device="mobile"] .olMatchOv .olOvCard{ width:100%; padding:12px 10px; border-width:3px; border-radius:18px; }
html[data-device="mobile"] .olMatchOv .olOvCard h2{ font-size:20px; margin-bottom:6px; }
html[data-device="mobile"] .olMatchOv .olChamp{ font-size:22px; }
html[data-device="mobile"] .olMatchOv .olRank,
html[data-device="mobile"] .olMatchOv .olRes{ min-width:0; margin:8px 0; gap:5px; padding:2px; }
html[data-device="mobile"] .olResRow,
html[data-device="mobile"] .olRankRow{ gap:6px; padding:5px 8px; border-radius:12px; }
html[data-device="mobile"] .olResRow .num,
html[data-device="mobile"] .olRankRow .num{ width:24px; height:24px; font-size:13px; }
html[data-device="mobile"] .olMatchOv .olRankRow .nm,
html[data-device="mobile"] .olMatchOv .olResRow .nm{ font-size:14px; }
html[data-device="mobile"] .olResRow .sc{ font-size:18px; }
html[data-device="mobile"] .olResRow .sc small{ font-size:11px; }
html[data-device="mobile"] .olResRow .cr{ min-width:44px; font-size:16px; }
html[data-device="mobile"] .olRankRow .rk{ min-width:36px; font-size:16px; }
html[data-device="mobile"] .olRankRow > .olAvatar{ width:28px; height:28px; font-size:16px; }
html[data-device="mobile"] .olRankRow .wn{ font-size:14px; }
html[data-device="mobile"] .olNext{ font-size:13px; }
html[data-device="mobile"] .olMatchOv .olActions{ gap:6px; margin-top:8px; }
html[data-device="mobile"] .olMatchOv .olActions .olBtn{ padding:9px 12px; font-size:13px; white-space:normal; }
html[data-device="mobile"] .olMatchOv .olActions .olBtn.big{ padding:10px 16px; font-size:15px; }
html[data-device="mobile"] .olTeamResult{ gap:10px; margin:8px 0; font-size:14px; }
html[data-device="mobile"] .olRewards{ gap:6px 12px; padding:8px 10px; }
html[data-device="mobile"] .olRw b{ font-size:20px; }
html[data-device="mobile"] .olGoal{ font-size:12px; }
/* モーダル・初回ガイド */
html[data-device="mobile"] .olModal{ padding:10px; align-items:flex-start; justify-content:center; overflow:auto; }
html[data-device="mobile"] .olModalCard{ width:100%; padding:16px 12px; border-width:3px; border-radius:18px; }
html[data-device="mobile"] .olModalCard h2{ margin-bottom:12px; padding-right:30px; font-size:19px; }
html[data-device="mobile"] .olModalCard p{ margin:8px 0; font-size:14px; line-height:1.55; }
html[data-device="mobile"] .olModalClose{ top:8px; right:8px; width:32px; height:32px; font-size:20px; }
html[data-device="mobile"] .olMatchHelp{ font-size:13px; line-height:1.5; }
html[data-device="mobile"] .olMatchHelp h3{ margin:12px 0 6px; font-size:15px; }
html[data-device="mobile"] .olMatchHelp li + li{ margin-top:6px; }
html[data-device="mobile"] .olMatchHelpRoles{ grid-template-columns:minmax(0,1fr); gap:8px; }
html[data-device="mobile"] .olMatchHelpRoles p{ padding:8px 10px; font-size:12px; }
html[data-device="mobile"] .olMatchHelpRoles p > b:first-child{ font-size:14px; }
html[data-device="mobile"] .olMatchHelpUrl{ margin:10px 0; padding:8px 10px; font-size:12px; }
html[data-device="mobile"] .olMatchHelpUrl > span{ font-size:11px; }
html[data-device="mobile"] .olModalCard .olMatchHelpNote{ padding:8px 10px; font-size:12px; }
html[data-device="mobile"] .olAvatarPages{ flex-wrap:wrap; gap:6px; margin-bottom:10px; }
html[data-device="mobile"] .olAvatarGrid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px 4px; }
html[data-device="mobile"] .olAvatarGrid button{ padding:3px 1px; font-size:11px; }
html[data-device="mobile"] .olAvatarGrid .olAvatar{ width:44px; height:44px; font-size:24px; }
html[data-device="mobile"] .olModalCard .olAvatarNote{ margin-top:8px; font-size:12px; }
html[data-device="mobile"] .olRoleExplain p{ padding:10px 12px; }
html[data-device="mobile"] .olRoleExplain b{ font-size:16px; }
html[data-device="mobile"] .olDownload{ flex-wrap:wrap; gap:8px; padding:10px; margin-top:10px; }
html[data-device="mobile"] .olDownload a{ font-size:12px; }
html[data-device="mobile"] .olScopeChoices{ gap:10px; margin:14px 0 6px; }
html[data-device="mobile"] .olScopeChoices .olBtn{ padding:12px; font-size:14px; }
html[data-device="mobile"] .olGain p{ padding:8px 12px; }
html[data-device="mobile"] .olGain b{ font-size:22px; }
html[data-device="mobile"] .olGain small{ font-size:11px; }
html[data-device="mobile"] .olRewardStars{ margin-top:12px; font-size:26px; }
html[data-device="mobile"] .olGuideCard{ width:calc(100% - 16px); padding:12px 14px; border-width:2px; border-radius:14px; }
html[data-device="mobile"] .olGuideStep{ margin-bottom:4px; font-size:11px; }
html[data-device="mobile"] .olGuideCard h2{ font-size:17px; }
html[data-device="mobile"] .olGuideCard p{ margin-top:6px; font-size:12px; line-height:1.5; }
html[data-device="mobile"] .olGuideActions .olBtn{ margin-top:10px; padding:8px 20px; font-size:14px; }
html[data-device="mobile"] .olKickMenu button{ font-size:14px; }

/* ---------- 頭のイイ人ランキング ---------- */
html[data-device="mobile"] .brainDialog{
  left:8px !important; top:8px !important; width:calc(100% - 16px); max-height:calc(100% - 16px); min-height:0;
  border-width:3px; border-radius:18px; font-size:13px;
}
html[data-device="mobile"] .brainHeader{ padding:12px 14px 10px; }
html[data-device="mobile"] .brainStageLabel{ padding-right:80px; font-size:11px; }
html[data-device="mobile"] .brainHeader h2{ margin:4px 80px 0 0; font-size:19px; }
html[data-device="mobile"] .brainClose{ top:12px; right:12px; }
html[data-device="mobile"] .brainClose,
html[data-device="mobile"] .brainReplay,
html[data-device="mobile"] .brainTab{ padding:5px 10px; border-radius:10px; font-size:12px; }
html[data-device="mobile"] .brainTabs{ gap:6px; padding:10px 12px 0; }
html[data-device="mobile"] .brainTab{ font-size:13px; }
html[data-device="mobile"] .brainSectionTitle{ margin:10px 12px 0; font-size:17px; }
html[data-device="mobile"] .brainList{ gap:8px; padding:8px 12px 12px; }
html[data-device="mobile"] .brainRankEntry{ padding:10px 10px; border-radius:14px; }
html[data-device="mobile"] .brainPerson{ grid-template-columns:38px 36px minmax(0,1fr) auto; gap:8px; }
html[data-device="mobile"] .brainRankNumber b{ font-size:22px; }
html[data-device="mobile"] .brainRankNumber span{ font-size:11px; }
html[data-device="mobile"] .brainAvatar{ width:36px; height:36px; font-size:20px; border-width:2px; }
html[data-device="mobile"] .brainPersonName{ font-size:15px; }
html[data-device="mobile"] .brainPersonCount b{ font-size:22px; }
html[data-device="mobile"] .brainPersonCount span{ font-size:11px; }
html[data-device="mobile"] .brainWords{ margin:8px 0 0; gap:5px; max-height:96px; }
html[data-device="mobile"] .brainWord{ padding:3px 8px; font-size:12px; }
html[data-device="mobile"] .brainWordsVertical .brainWord{ min-width:110px; }
html[data-device="mobile"] .brainWordLength{ font-size:11px; }
html[data-device="mobile"] .brainEmpty{ margin:20px 8px; padding:14px; font-size:14px; }
html[data-device="mobile"] .brainFooter{ gap:8px; padding:10px 12px; }
html[data-device="mobile"] .brainFooter p{ font-size:11px; }
html[data-device="mobile"] .brainMeaning{ max-width:calc(100vw - 16px); padding:10px 12px; font-size:13px; }
html[data-device="mobile"] .brainMeaningWord{ font-size:16px; }
html[data-device="mobile"] .brainMeaningText{ font-size:13px; }

/* アクションバーの「中断する」は赤系のまま */
html[data-device="mobile"] .mobileActionRow .cpBtn.b-red{ border-color:#f0a5bd; color:#e2537e; background:#fff3f7; box-shadow:0 2px 0 #f3cbd8; }
html[data-device="mobile"] .mobileActionRow .cpBtn.b-blue{ border-color:#a9d4ff; color:#3b8ce0; background:#f3f9ff; box-shadow:0 2px 0 #cfe3f7; }

/* ステージセレクト・遊び方を開いている間は、下のチップ枠と操作ボタンを見せない */
html[data-device="mobile"] #stageSelectOv{ background:rgba(243,239,251,.82); }
html[data-device="mobile"] #mainArea.mobileMenuOpen #mobileFound,
html[data-device="mobile"] #mainArea.mobileMenuOpen #mobileActions,
html[data-device="mobile"] #mainArea.mobileMenuOpen #mobileRulePop{ visibility:hidden; }

/* 接続状態は上部バーに出すので、画面内の小さな表示は使わない。ロビーのルール設定は1行ずつ並べる。 */
html[data-device="mobile"] .olStatus{ display:none; }
html[data-device="mobile"] .olRoomRules label{ flex:1 1 100%; gap:8px; white-space:nowrap; }
html[data-device="mobile"] .olRoomRules label select{ flex:1 1 auto; width:auto; min-width:0; }
html[data-device="mobile"] #mainArea.olLargeBattle #ribbon{ padding:2px 10px; font-size:13px; }

/* 「スタート！」の横流れは画面幅に合わせて短くする */
html[data-device="mobile"] #cdStart.run{ animation-name:mobileStartSweep; }
@keyframes mobileStartSweep{
  0%{ transform:translateX(-520px); opacity:0 }
  12%{ opacity:1 }
  42%{ transform:translateX(-14px) }
  62%{ transform:translateX(-14px); opacity:1 }
  100%{ transform:translateX(520px); opacity:0 }
}

/* 待機中のラストスパート表示は盤面の左外に置き、右側に隠れたスクロール領域を作らない */
html[data-device="mobile"] #lastSpurtBanner:not(.run){ left:auto; right:100%; }

/* SP版ではタップ操作が前提なので、プログラムからフォーカスしたボタンに紫や水色の輪郭を出さない */
html[data-device="mobile"] button:focus-visible{ outline:none !important; }

/* ---------- トーナメント ---------- */
html[data-device="mobile"] .olScreen[data-screen="tour"],
html[data-device="mobile"] .olScreen[data-screen="tourDraw"],
html[data-device="mobile"] .olScreen[data-screen="tourFinal"]{ width:100%; padding:10px 8px 16px; gap:8px; }
html[data-device="mobile"] .olTourHub{ grid-template-columns:1fr; flex:none; }
html[data-device="mobile"] .olTourTreeBox{ height:min(62vh, 520px); }
html[data-device="mobile"] .olTourHead{ padding:8px 12px; font-size:16px; flex-wrap:wrap; }
html[data-device="mobile"] .olTourHead .mode{ font-size:18px; }
html[data-device="mobile"] .olTourSide{ overflow:visible; }
html[data-device="mobile"] .olTourCard .btns .olBtn.big{ padding:12px 28px; font-size:22px; }
html[data-device="mobile"] .olTourWho .olAvatar{ width:72px; height:72px; font-size:40px; }
html[data-device="mobile"] .olRecGrid{ grid-template-columns:minmax(0,1fr); gap:10px; }
html[data-device="mobile"] .olRecBox{ padding:10px 10px 12px; border-radius:16px; box-shadow:0 5px 0 #e6d8ec; }
html[data-device="mobile"] .olRecBox h3{ margin-bottom:6px; font-size:16px; }
html[data-device="mobile"] .olRecRow{ gap:2px 7px; padding:6px 9px; margin-top:6px; border-radius:12px; font-size:14px; }
html[data-device="mobile"] .olRecRow .pl{ min-width:34px; font-size:15px; }
html[data-device="mobile"] .olRecRow .olAvatar{ width:28px; height:28px; font-size:16px; }
html[data-device="mobile"] .olRecRow .nm{ flex-basis:7em; }
html[data-device="mobile"] .olRecRow .val{ font-size:17px; }
html[data-device="mobile"] .olRecRow .val small{ font-size:11px; margin-left:3px; }
html[data-device="mobile"] .olPodium{ gap:8px; }
html[data-device="mobile"] .olPodiumSpot{ width:104px; }
html[data-device="mobile"] .olPodiumSpot .olAvatar{ width:64px; height:64px; font-size:34px; }
html[data-device="mobile"] .olPodiumSpot.p1 .olAvatar{ width:80px; height:80px; font-size:44px; }
html[data-device="mobile"] .olPodiumSpot b{ font-size:18px; }
html[data-device="mobile"] .olTourFinalTitle, html[data-device="mobile"] .olTourDrawTitle{ font-size:26px; }
html[data-device="mobile"] .olTourChampName{ font-size:28px; }
html[data-device="mobile"] .olTourChip{ font-size:18px; }
html[data-device="mobile"] #olTourNagFloat{ top:8px; width:calc(100% - 16px); justify-content:center; flex-wrap:wrap; border-radius:20px; }

/* VS画面のランク・ランクアップ演出・MVP（スマホ縦） */
html[data-device="mobile"] .olCardRank{ margin-top:5px; padding:2px 10px 3px; border-width:2px; gap:4px; }
html[data-device="mobile"] .olCardRank small{ font-size:10px; }
html[data-device="mobile"] .olCardRank b{ font-size:17px; }
html[data-device="mobile"] .olRankUpOv{ position:fixed; }
html[data-device="mobile"] .olRankUpCard{ padding:18px 12px 16px; border-width:4px; border-radius:24px; }
html[data-device="mobile"] .olRankUpTitle{ font-size:30px; }
html[data-device="mobile"] .olRankUpStage{ height:170px; }
html[data-device="mobile"] .olRankUpLetter{ font-size:130px; }
html[data-device="mobile"] .olRankUpLetter[data-len="2"]{ font-size:110px; }
html[data-device="mobile"] .olRankUpLetter[data-len="3"]{ font-size:88px; }
html[data-device="mobile"] .olRankUpRing{ width:140px; height:140px; border-width:4px; }
html[data-device="mobile"] .olRankUpSub{ font-size:16px; min-height:26px; }
html[data-device="mobile"] .olRankUpSub b{ font-size:22px; }
html[data-device="mobile"] .olRankUpSub s{ font-size:16px; }
/* 背の低い画面：順位の一覧は2行ぶんを必ず見せ、それでも足りないぶんは MVP の欄を縮めてスクロールにする */
html[data-device="mobile"] .olMatchOv .olRank{ flex-shrink:1000; min-height:84px; }
html[data-device="mobile"] .olMatchOv .olMvp{ flex:0 1 auto; min-height:70px; overflow-x:hidden; overflow-y:auto; }
html[data-device="mobile"] .olMvpHead{ font-size:13px; margin-bottom:4px; }
html[data-device="mobile"] .olMvpGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
html[data-device="mobile"] .olMvpItem{ padding:5px 6px; border-width:2px; border-radius:12px; box-shadow:0 2px 0 #e6d3ee; }
html[data-device="mobile"] .olMvpItem .lb{ font-size:10px; gap:3px; }
html[data-device="mobile"] .olMvpItem .wd{ font-size:14px; margin:1px 0 3px; }
html[data-device="mobile"] .olMvpItem .wd.long{ font-size:12px; }
html[data-device="mobile"] .olMvpItem .who > .olAvatar{ width:20px; height:20px; font-size:12px; box-shadow:0 0 0 2px var(--pc); }
html[data-device="mobile"] .olMvpItem .who .nm{ font-size:10px; }
html[data-device="mobile"] .olMvpItem .who .nm small{ font-size:9px; }
html[data-device="mobile"] .olMvpItem .lb .vl{ padding:1px 5px; font-size:9px; }

/* 今回の成長（スマホ縦） */
html[data-device="mobile"] .olMatchOv .olOvCard.olGrowthCard{ width:100%; box-sizing:border-box; gap:8px; }
html[data-device="mobile"] .olGrowthGains{ gap:5px; }
html[data-device="mobile"] .olGrowthGains .g{ padding:5px 3px; border-width:2px; border-radius:12px; }
html[data-device="mobile"] .olGrowthGains .g span{ font-size:10px; }
html[data-device="mobile"] .olGrowthGains .g b{ font-size:20px; }
html[data-device="mobile"] .olGrowthGains .g b small{ font-size:10px; }
html[data-device="mobile"] .olGrowthMain{ gap:14px; margin-top:8px; }
html[data-device="mobile"] .olGrowthLevel span{ font-size:12px; }
html[data-device="mobile"] .olGrowthLevel b{ font-size:40px; }
html[data-device="mobile"] .olGrowthLevel small{ font-size:12px; }
html[data-device="mobile"] .olGrowthLevel em{ top:-14px; font-size:11px; }
html[data-device="mobile"] .olGrowthRank{ gap:5px; padding:3px 14px 5px; border-width:2px; }
html[data-device="mobile"] .olGrowthRank small{ font-size:12px; }
html[data-device="mobile"] .olGrowthRank b{ font-size:30px; }
html[data-device="mobile"] .olGrowthXpTop{ font-size:11px; }
html[data-device="mobile"] .olGrowthTrack{ height:16px; }

/* 最終結果のカードの持ち手（スマホ縦） */
html[data-device="mobile"] .olDragGrip{ margin:-6px -4px 6px; padding:5px 8px; gap:6px; border-radius:12px; font-size:11px; }
html[data-device="mobile"] .olDragGrip .ic{ font-size:15px; }
html[data-device="mobile"] .olDragGrip .tx small{ display:none; }
html[data-device="mobile"] .olDragReset{ padding:3px 8px; font-size:10px; border-width:1px; }

html[data-device="mobile"] .olScopeChoices .olBtn small{ margin-top:3px; font-size:10px; }

/* ---------- 1試合ごとの結果発表の演出（online.js の rfx） ---------- */
html[data-device="mobile"] #mainArea #board .cell.olFxHit::after{ inset:-2px; border-width:2px; box-shadow:0 0 0 2px rgba(255,255,255,.45); }
html[data-device="mobile"] #mainArea #board[data-panel-design="current"] .cell.olFxPending{ box-shadow:inset 0 -3px 0 rgba(120,60,0,.07),0 2px 4px rgba(140,90,139,.07); }
html[data-device="mobile"] #mainArea #board[data-panel-design="current"] .cell.olFxMiss{ box-shadow:inset 0 -3px 0 rgba(120,60,0,.04),0 2px 4px rgba(140,90,139,.04); }
html[data-device="mobile"] #board .olFxScan{ box-shadow:0 0 0 2px #fff,0 0 0 4px #9042b8,0 0 10px 3px rgba(144,66,184,.45); }
html[data-device="mobile"] #board.olFxZoom .olFxScan{ box-shadow:0 0 0 5px #fff,0 0 0 10px #9042b8,0 0 22px 7px rgba(144,66,184,.5); }
html[data-device="mobile"] .olFxVeil{ inset:-5px; border-radius:12px; }
html[data-device="mobile"] .olFxStamp{ top:-13px; right:2px; padding:0 8px 2px; border-width:2px; border-radius:8px; font-size:15px; }
html[data-device="mobile"] #cardS > .olFxStamp{ left:2px; }
html[data-device="mobile"] .olFxStamp.stop{ font-size:11px; }
html[data-device="mobile"] .scCard.olFxWin, html[data-device="mobile"] .olTeamScoreCard.olFxWin{ box-shadow:0 0 0 3px #ffd257,0 0 16px 4px rgba(255,210,87,.65); }
html[data-device="mobile"] .olFxQ .scoreCurrent{ animation-name:olFxQm; }
@keyframes olFxQm{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg) translateY(-1px); } }
/* 順位表は全員が見えるよう、横スクロールをやめて4列に並べる。自分の枠は名前札を「あなた」に */
html[data-device="mobile"] #mainArea.olLargeBattle #olRank.olFxRank{ display:grid; grid-template-columns:repeat(var(--olFxCols,4),minmax(0,1fr)); gap:4px 3px; overflow:visible; }
html[data-device="mobile"] #olRank.olFxRank .olLeader{ min-width:0; border-width:2px; border-radius:8px; }
html[data-device="mobile"] .olFxYou{ display:none; }
html[data-device="mobile"] #olRank.olFxRank .olLeader.me .olFxName{ display:none; }
html[data-device="mobile"] #olRank.olFxRank .olLeader.me .olFxYouName{ display:inline; }
html[data-device="mobile"] #olRank.olFxRank .olLeader.me .olLeaderName{ font-size:10px; }
html[data-device="mobile"] #olRank.olFxRank .olLeader.me .olLeaderPortrait .olAvatar{ box-shadow:0 0 0 1.5px #fff,0 0 0 3px #f7728b; }
html[data-device="mobile"] #olRank.olFxRank .olLeader.me::after{ inset:-2px; border-radius:10px; box-shadow:0 0 0 3px rgba(247,114,139,.4); }
html[data-device="mobile"] #olRank.olFxRank .olLeader.olFxWin{ box-shadow:0 0 0 2px #ffd257,0 0 8px 2px rgba(255,210,87,.6); }
html[data-device="mobile"] .olFxCrown{ top:-7px; right:0; font-size:14px; }
html[data-device="mobile"] #olRank.olFxMany .olLeaderPortrait .olAvatar{ width:26px; height:26px; font-size:15px; border-width:2px; }
html[data-device="mobile"] #olRank.olFxMany .olPlace{ top:0; font-size:10px; }
html[data-device="mobile"] .olFxMtState{ font-size:3cqw; }
html[data-device="mobile"] .olFxTally.many .olFxMtState{ padding:.2cqh .2cqw .3cqh; font-size:2.3cqw; white-space:nowrap; }
html[data-device="mobile"] .olFxMtChip span{ font-size:3cqw; }
html[data-device="mobile"] .olFxTally.many .olFxMtName .olFxNm{ display:none; }
html[data-device="mobile"] .olFxTally.many .olFxMtCol.me .olFxMtName .olFxNm{ display:block; font-size:2.6cqw; }
html[data-device="mobile"] .olFxDot{ border-width:1.5px; }
html[data-device="mobile"] .olFxPlus{ -webkit-text-stroke-width:3px; }
/* コトバ数の集計：スクロールバーを細くする */
html[data-device="mobile"] .olFxCtChips.olFxScroll{ padding-right:.5cqw; }
html[data-device="mobile"] .olFxCtChips.olFxScroll::-webkit-scrollbar{ width:5px; }
html[data-device="mobile"] .olFxCtChips.olFxScroll::-webkit-scrollbar-thumb{ border-width:1px; }