/* ============================================================
   ゲーム区 = レトロ携帯ゲーム機シェル
   デザイン: Claude Design「Asopiko Console Shell」より実装
   PC = キーボード操作（ボタンは装飾）/ モバイル = ジェスチャー操作
   筐体は「シャーシ」。盤面はカートリッジ差込口で、
   今後のナンプレ・マインスイーパーも同じ枠に入れる。
   ============================================================ */

:root {
  --shell-1: #f3e8cd;
  --shell-2: #e9dbb8;
  --shell-3: #ddcba1;
  --bezel-1: #464035;
  --bezel-2: #332e26;
  --lcd-frame: #1e1b16;
  --lcd-bg: #c9d2b4;
  --lcd-field: #bec8a6;
  --lcd-ink: #39412f;
  --lcd-label: #46503a;
  --btn-1: #544c40;
  --btn-2: #3b352c;
  --btn-label: #7a6845;
  /* 操作部の寸法。視口が低い端末では下の @media でまとめて縮める */
  --dpad: 96px;
  --dpad-arm: 32px;
  --ab-btn: 56px;
  --sys-w: 44px;
  /* 筐体の寸法はここが唯一の出どころ。切替の右端合わせもこれを使う */
  --console-h: min(820px, calc(100svh - 115px));
}

/* iOS の長押しメニュー（Copy / Look Up / Translate / Create Link）を止める。
   長押し＝ホールド操作のため、これが漏れるとジェスチャーが潰れる。
   ゲーム区だけに限定 —— 下の解説・FAQ は選択できる必要がある。 */
.game-section, .game-section * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- ゲーム区の土台 ---------- */
.game-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px 16px;
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
}
#game-title {
  margin: 10px 0 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  color: #4a4133;
  text-align: center;
}
.game-stage { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }

/* ---------- 筐体 ---------- */
.console {
  /* 高さは視口に追従。1366×768 のノートでスクロールさせない。
     幅は高さから逆算（盤面 1:2 ＋ 情報列ぶん） */
  height: var(--console-h);
  width: auto;
  aspect-ratio: 540 / 800;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--shell-1) 0%, var(--shell-2) 52%, var(--shell-3) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.7),
    inset 0 -5px 10px rgba(120,88,40,.18),
    inset 3px 0 6px rgba(255,255,255,.25),
    inset -3px 0 6px rgba(120,88,40,.1),
    0 20px 44px rgba(90,60,20,.28);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  flex: none;
  margin: 4px 0 8px;
}

/* ---------- 画面まわり ---------- */
.bezel {
  flex: none;
  background: linear-gradient(180deg, var(--bezel-1), var(--bezel-2));
  border-radius: 16px; padding: 12px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.1), 0 2px 0 rgba(255,255,255,.5);
}
.lcd-frame { background: var(--lcd-frame); border-radius: 9px; padding: 3px; box-shadow: inset 0 2px 5px rgba(0,0,0,.7); }
/* 同じ DOM を皮膚ごとに組み替える。
   レトロ機 = 盤面 ＋ 右に 1 列（携帯機の画面レイアウト）
   シンプル = 盤面を挟んで左右にパネル（横幅を使い切る据え置きレイアウト） */
.lcd {
  position: relative; background: var(--lcd-bg); border-radius: 6px;
  padding: 10px; gap: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "board stats" "board pieces";
  align-items: start;
  box-shadow: inset 0 2px 8px rgba(30,40,20,.28);
}
.screen { grid-area: board; }
.info-stats { grid-area: stats; }
.info-pieces { grid-area: pieces; }
.lcd::after {
  content: ''; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 26%);
}

/* 盤面スロット（カートリッジ差込口。他ゲームもここに入る） */
#board {
  display: block;
  height: min(calc(100svh - 339px), 560px);
  width: auto;
  aspect-ratio: 1 / 2;
  background: var(--lcd-field);
  border: 1.5px solid rgba(57,65,47,.35);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* モバイル専用ブロック（PC では非表示） */
.status-panel, .guide-touch { display: none; }

/* 情報パネル */
.info { display: flex; flex-direction: column; gap: 14px; }
.info-stats { padding-top: 4px; }
.info-pieces { justify-content: flex-end; }
.info-label { font-weight: 700; font-size: 11px; color: var(--lcd-label); letter-spacing: 2px; }
.seg {
  font-family: 'Share Tech Mono', ui-monospace, Menlo, monospace; font-size: 18px;
  line-height: 1.1; color: var(--lcd-ink); text-align: right; transform: skewX(-5deg);
}
.info-hold { border: 0; background: transparent; padding: 0; text-align: left; font: inherit; }
.info-hold:active .mini-box { filter: brightness(.94); }
.mini-box {
  margin-top: 3px; border: 2px solid rgba(57,65,47,.4);
  background: #c2cbaa; display: block;
}
#next-desktop { width: 48px; height: 120px; }
#hold-desktop { width: 48px; height: 40px; }

/* ---------- 操作部 ---------- */
.controls {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; margin-top: 4px;
}

/* 十字キー */
.dpad { position: relative; width: var(--dpad); height: var(--dpad); filter: drop-shadow(0 3px 4px rgba(70,45,15,.4)); }
.dpad .bar-v, .dpad .bar-h { position: absolute; border-radius: 8px; }
.dpad .bar-v { left: var(--dpad-arm); top: 0; width: var(--dpad-arm); height: var(--dpad); background: linear-gradient(180deg, #544c40, #3d372e); box-shadow: inset 0 2px 2px rgba(255,255,255,.18), inset 0 -3px 4px rgba(0,0,0,.45); }
.dpad .bar-h { left: 0; top: var(--dpad-arm); width: var(--dpad); height: var(--dpad-arm); background: linear-gradient(180deg, #504840, #403a30); box-shadow: inset 0 2px 2px rgba(255,255,255,.15), inset 0 -3px 4px rgba(0,0,0,.45); }
.dpad .hub { position: absolute; left: calc(var(--dpad-arm) + 5px); top: calc(var(--dpad-arm) + 5px); width: calc(var(--dpad-arm) - 10px); height: calc(var(--dpad-arm) - 10px); border-radius: 50%; background: radial-gradient(circle at 50% 38%, #332e26, #4a443a); box-shadow: inset 0 2px 3px rgba(0,0,0,.5); }
.dpad button {
  position: absolute; border: 0; background: transparent; padding: 0;
  width: var(--dpad-arm); height: var(--dpad-arm); cursor: pointer;
}
.dpad .k-up    { left: var(--dpad-arm); top: 0; }
.dpad .k-down  { left: var(--dpad-arm); top: calc(var(--dpad-arm) * 2); }
.dpad .k-left  { left: 0; top: var(--dpad-arm); }
.dpad .k-right { left: calc(var(--dpad-arm) * 2); top: var(--dpad-arm); }
.dpad button::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  border-style: solid; border-color: transparent;
}
.dpad .k-up::before    { border-width: 0 6px 8px; border-bottom-color: rgba(255,255,255,.12); margin-top: -8px; }
.dpad .k-down::before  { border-width: 8px 6px 0; border-top-color: rgba(255,255,255,.12); margin-top: 8px; }
.dpad .k-left::before  { border-width: 6px 8px 6px 0; border-right-color: rgba(255,255,255,.12); margin-left: -8px; }
.dpad .k-right::before { border-width: 6px 0 6px 8px; border-left-color: rgba(255,255,255,.12); margin-left: 8px; }
.dpad button:active ~ .bar-v, .dpad button:active ~ .bar-h { filter: brightness(.9); }

/* 中央の小ボタン列 */
.sys { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sys-row { display: flex; gap: 14px; }
.sys-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.sys-btn i {
  width: var(--sys-w); height: 15px; border-radius: 8px;
  background: linear-gradient(180deg, var(--btn-1), var(--btn-2));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.2), inset 0 -2px 3px rgba(0,0,0,.4), 0 2px 3px rgba(70,45,15,.35);
}
.sys-btn:active i { box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.sys-btn.is-off i { opacity: .42; }
.sys-btn span { font-weight: 700; font-size: 9px; color: var(--btn-label); letter-spacing: 1px; }
.grille { display: flex; gap: 6px; }
.grille i { width: 4px; height: 14px; border-radius: 2px; background: #cdbb92; box-shadow: inset 1px 0 2px rgba(80,55,20,.45), inset 0 -1px 0 rgba(255,255,255,.5); }

/* A / B ボタン */
.ab { position: relative; width: calc(var(--ab-btn) * 2 + 20px); height: calc(var(--ab-btn) + 48px); }
.ab button { position: absolute; border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ab .b-btn { left: 0; top: 26px; }
.ab .a-btn { left: calc(var(--ab-btn) + 20px); top: 0; }
.ab i {
  width: var(--ab-btn); height: var(--ab-btn); border-radius: 50%;
  box-shadow: 0 4px 6px rgba(70,45,15,.4), inset 0 2px 3px rgba(255,255,255,.22), inset 0 -4px 6px rgba(0,0,0,.45);
}
.ab .b-btn i { background: radial-gradient(circle at 36% 30%, #5c5344, #3d372c); }
.ab .a-btn i { background: radial-gradient(circle at 36% 30%, #ef7a67, #cf4536); box-shadow: 0 4px 6px rgba(70,45,15,.4), inset 0 2px 3px rgba(255,255,255,.35), inset 0 -4px 6px rgba(140,30,20,.5); }
.ab button:active i { transform: translateY(2px); box-shadow: 0 1px 2px rgba(70,45,15,.4), inset 0 2px 4px rgba(0,0,0,.4); }
.ab em { font-family: Anton, Impact, 'Arial Narrow', sans-serif; font-style: normal; font-size: 10px; color: var(--btn-label); letter-spacing: 2px; }

/* ---------- オーバーレイ ---------- */
/* 盤面だけを覆う。.lcd を基準にすると情報列まで隠れてしまう */
/* 情報列のほうが高いときに残る余白を上下へ分ける。
   上に貼り付いたままだと「画面が余っている」に見えるが、
   中央に置けば額縁として読める */
.screen { position: relative; line-height: 0; align-self: center; }

.game-overlay {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(190,200,166,.95); text-align: center; padding: 14px;
  line-height: 1.7;
}
.game-overlay strong { font-size: 12.5px; color: var(--lcd-ink); letter-spacing: 0; }
.game-overlay p { margin: 0; font-size: 9.5px; color: #5a6349; letter-spacing: 0; }
.primary-button {
  border: 0; border-radius: 6px; background: #39412f; color: var(--lcd-bg);
  padding: 8px 20px; font-size: 12px; font-weight: 700; font-family: inherit; letter-spacing: .04em;
}
.primary-button:hover { background: #454f38; }
.primary-button:active, .secondary-dark-button:active { transform: translateY(1px); }
.secondary-dark-button {
  border: 1.5px solid rgba(57,65,47,.45); border-radius: 6px; background: transparent;
  color: var(--lcd-ink); padding: 7px 18px; font-size: 12px; font-weight: 700; font-family: inherit;
}
/* キーボードのある端末だけに出す（モバイルは下の @media で消す） */
.key-hint { font-size: 9.5px; color: #6b7358; letter-spacing: .02em; }
/* 主導線ではないがそこにあってほしい導線。ボタンの重さを持たせず文字で置く */
.link-button {
  border: 0; background: transparent; padding: 2px 4px; font-family: inherit;
  font-size: 10px; font-weight: 700; color: #5a6349; letter-spacing: .02em;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-button:hover { color: var(--lcd-ink); }
.new-best { font-size: 11px; color: #cf4536; letter-spacing: .08em; }
.final-score { font-family: 'Share Tech Mono', ui-monospace, Menlo, monospace; font-size: 30px; color: var(--lcd-ink); line-height: 1; }
.score-form { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 220px; }
.score-form input {
  border: 1.5px solid rgba(57,65,47,.4); border-radius: 6px; background: rgba(255,255,255,.45);
  padding: 7px 10px; font-size: 12px; color: var(--lcd-ink); text-align: center;
  -webkit-user-select: text; user-select: text;
}
.score-form input::placeholder { color: rgba(90,99,73,.62); }
.score-form .primary-button { padding: 8px 12px; font-size: 12px; }
.score-form small, .submitted-message { font-size: 10px; color: #5a6349; margin: 0; }

/* ---------- デイリーバナー ---------- */
.daily-banner {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  margin-bottom: 8px; padding: 7px 16px; border-radius: 10px;
  background: rgba(233,219,184,.85); border: 1px solid rgba(160,130,80,.28);
  font-size: 11.5px; color: #6b5b3c;
}
.daily-banner strong { color: #4a4133; }
.daily-banner button {
  border: 1.5px solid rgba(90,70,35,.35); border-radius: 6px; background: transparent;
  padding: 4px 12px; font-size: 11px; font-weight: 700; font-family: inherit; color: #6b5b3c;
}

/* ---------- 操作ガイド ---------- */
.guide {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 6px 14px;
  margin-top: 8px; flex: none;
  font-size: 10.5px; color: #8a7550; letter-spacing: .5px;
}
.guide b { font-family: 'Share Tech Mono', ui-monospace, Menlo, monospace; font-weight: 400; color: #5f5236; }

/* ---------- 表示モード切替 ----------
   console = レトロ携帯機（筐体・装飾ボタンあり、雰囲気優先）
   plain   = シンプル（筐体を外した平面レイアウト、盤面優先）
   配色と液晶の質感は両モード共通 —— 同じデザイン言語の 2 レイアウト  */
/* 筐体の下に置く切替スイッチ。文字だけだと「見出し」に見えて
   押せると気づかれないので、へこんだ台座＋液晶色のキーで
   物理スイッチとして読ませる（材質は筐体・画面から借りる） */
/* 情報列の下（画面内の余白）に置く。margin-top:auto で既存の余りを使い、
   列の高さを増やさない —— 増やすと情報列が盤面より高くなって筐体がはみ出す */
.skin-switch { padding-top: 4px; }
.skin-switch .track {
  display: flex; gap: 2px; padding: 2px; width: 100%;
  border: 1.5px solid rgba(57,65,47,.35); border-radius: 6px;
}
.skin-switch button {
  flex: 1; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
  padding: 3px 4px; font-family: inherit; font-weight: 700; font-size: 9px;
  color: var(--lcd-label); letter-spacing: .5px; white-space: nowrap;
}
.skin-switch button:hover { background: rgba(57,65,47,.12); }
.skin-switch button.is-on { background: var(--lcd-ink); color: var(--lcd-bg); }

/* ---------- plain: 筐体を外す ---------- */
[data-skin="plain"] .console {
  width: min(100%, 1100px); height: auto; aspect-ratio: auto;
  background: none; box-shadow: none; border-radius: 0;
  padding: 0 16px 4px; margin: 0;
}
[data-skin="plain"] .controls,
[data-skin="plain"] .status-panel { display: none; }

/* 画面まわりの樹脂と黒枠を外し、液晶だけ残す */
[data-skin="plain"] .bezel {
  background: none; box-shadow: none; border-radius: 0; padding: 0;
  width: auto; max-width: 100%;
}
[data-skin="plain"] .lcd-frame { background: none; box-shadow: none; padding: 0; border-radius: 0; }
[data-skin="plain"] .lcd {
  width: auto; background: none; box-shadow: none; padding: 0;
  gap: 22px; justify-content: center; align-items: flex-start;
}
[data-skin="plain"] .lcd::after { content: none; }

/* 盤面は液晶の質感を保ったまま最大化 */
/* 盤面は 10×20 の 1:2 固定 —— 横幅は「視口の高さ − 上下の余白」でしか稼げない。
   なのでシンプル側は上下の余白を極限まで削り、上限も設けない */
[data-skin="plain"] #board {
  height: calc(100svh - 114px);
  border: 2px solid rgba(57,65,47,.4);
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(30,40,20,.22);
}

/* 情報列はカード化（樹脂ではなくフラットな面） */
/* シンプルでは情報カードの「下」に、樹脂の物理スイッチとして置く */
/* 盤面を中央に、左右のパネルは同じ幅・同じ高さで揃える。
   盤面は 1:2 固定なので単体では横に広がれない —— 左右のパネルを
   盤面と同じ高さの柱にすることで、区画全体として横幅を使い切る */
[data-skin="plain"] .lcd {
  grid-template-columns: 142px auto 142px;
  grid-template-areas: "stats board pieces";
  width: fit-content; margin-inline: auto;
  align-items: stretch; gap: 22px;
}
[data-skin="plain"] .info-stats { padding-top: 0; }
[data-skin="plain"] .skin-switch { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(160,130,80,.28); }
[data-skin="plain"] .skin-switch .track {
  padding: 2px; border: 1px solid rgba(150,120,70,.3); border-radius: 9px;
  background: rgba(160,130,80,.16); box-shadow: inset 0 1px 2px rgba(120,88,40,.2);
}
[data-skin="plain"] .skin-switch button { padding: 4px 5px; font-size: 9.5px; border-radius: 6px; color: #8a7550; }
[data-skin="plain"] .skin-switch button:hover { background: rgba(255,255,255,.55); color: #5f5236; }
[data-skin="plain"] .skin-switch button.is-on {
  background: linear-gradient(180deg, #d3dbc0, var(--lcd-bg)); color: var(--lcd-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(90,60,20,.28);
}
[data-skin="plain"] .info {
  gap: 18px; width: 100%; justify-content: center;
  background: rgba(243,232,205,.72); border: 1px solid rgba(160,130,80,.25);
  border-radius: 12px; padding: 18px 14px 14px;
}
/* 柱の高さは盤面に合わせるが、中身は塊のまま中央に置く。
   space-between で端まで散らすと項目同士の関係が読めなくなる */
[data-skin="plain"] .info-pieces { justify-content: center; gap: 22px; }
/* 切替は情報ではないので、パネル下端に寄せて本編と分ける */
[data-skin="plain"] .skin-switch { margin-top: auto; }
[data-skin="plain"] .info-pieces > div,
[data-skin="plain"] .info-hold { display: flex; flex-direction: column; align-items: center; gap: 4px; }
[data-skin="plain"] .mini-box { margin: 0 auto; }
[data-skin="plain"] .info-label { color: #8a7550; }
[data-skin="plain"] .seg { color: #5f5236; font-size: 20px; }
[data-skin="plain"] .info-stats { gap: 20px; }
[data-skin="plain"] .info-stats .info-label { font-size: 12px; }
[data-skin="plain"] .info-stats .seg { font-size: 26px; }
[data-skin="plain"] .mini-box { border: 2px solid rgba(57,65,47,.32); background: var(--lcd-field); }
[data-skin="plain"] #next-desktop { width: 84px; height: 210px; }
[data-skin="plain"] #hold-desktop { width: 84px; height: 70px; }
[data-skin="plain"] .game-overlay strong { font-size: 16px; }
[data-skin="plain"] .game-overlay p { font-size: 12px; }
[data-skin="plain"] .primary-button { padding: 10px 28px; font-size: 14px; }
[data-skin="plain"] .guide-pc {
  flex-direction: column; align-items: stretch; gap: 5px;
  margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(160,130,80,.28);
  font-size: 9.5px; letter-spacing: 0;
}
[data-skin="plain"] .guide-pc span { display: flex; justify-content: space-between; gap: 8px; }
[data-skin="plain"] .guide-touch { margin-top: 14px; }

/* ---------- モバイル ---------- */
@media (max-width: 560px) {
  .game-section { padding: 0 0 12px; }
  #game-title { margin: 10px 0 6px; font-size: 20px; }
  .skin-switch { display: none; }        /* モバイルは筐体レイアウト固定 */

  .console {
    width: 100%; height: auto; aspect-ratio: auto;
    border-radius: 0; margin: 0; padding: 6px 8px 8px;
  }

  /* 情報はすべて筐体上のパネルへ。画面はゲーム盤だけに使う */
  .status-panel { display: flex; justify-content: center; flex: none; }
  .panel-plate {
    background: linear-gradient(180deg, #453e33, #332e26);
    border-radius: 8px; padding: 2px 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.5);
  }
  .panel-lcd {
    display: flex; flex-direction: column; gap: 5px;
    background: var(--lcd-bg); border-radius: 6px; padding: 6px 14px 7px;
    box-shadow: inset 0 2px 5px rgba(30,40,20,.3);
  }
  .panel-stats { display: flex; align-items: center; justify-content: center; gap: 12px; }
  .strip-item { display: flex; align-items: baseline; gap: 5px; }
  .strip-item b { font-weight: 700; font-size: 9px; color: var(--lcd-label); letter-spacing: .5px; }
  .strip-item .seg { display: inline-block; font-size: 13px; }
  .strip-div { width: 1px; height: 12px; background: rgba(57,65,47,.3); }
  .panel-previews {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    border-top: 1px solid rgba(57,65,47,.22); padding-top: 5px;
  }
  .preview { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; font: inherit; }
  .preview b { font-weight: 700; font-size: 9px; color: var(--lcd-label); letter-spacing: .5px; }
  .preview .mini-box { margin: 0; width: 42px; height: 35px; }
  .panel-pause {
    border: 0; border-radius: 6px; background: rgba(57,65,47,.14); color: var(--lcd-ink);
    width: 30px; height: 26px; font-size: 12px; font-weight: 700;
  }

  /* 画面は内容幅に収縮（余った幅は筐体の樹脂になる） */
  .bezel { width: fit-content; margin: 6px auto 0; border-radius: 14px; padding: 8px; }
  .lcd-frame { border-radius: 8px; padding: 2px; }
  .lcd { width: fit-content; border-radius: 5px; gap: 0; padding: 6px; }

  /* 画面内は盤面のみ。情報列は出さない */
  .info { display: none; }

  /* 盤面: 縦の余りと横の余りの小さい方（1:2 固定） */
  #board, [data-skin="plain"] #board {
    height: min(
      calc(100svh - 250px),
      calc((100vw - 44px) * 2)
    );
    min-height: 300px;
    width: auto;
    aspect-ratio: 1 / 2;
  }

  /* プレイ開始後: 筐体を 1 画面ぶんに広げ、ヘッダーと H1 は視口の上へ送る。
     消さずにスクロールで戻せる状態にしておく（H1 は主要キーワード） */
  body.is-playing .console {
    height: 100svh;
    justify-content: center;
    padding: 6px 8px 10px;
  }
  body.is-playing #board {
    height: min(
      calc(100svh - 144px),
      calc((100vw - 44px) * 2)
    );
  }

  /* ボタンは廃止。モバイルはジェスチャー操作 */
  .controls { display: none; }
  .guide-pc { display: none; }
  .guide-touch {
    display: flex; gap: 4px 12px; margin-top: 7px;
    font-size: 9.5px; letter-spacing: 0;
  }

  .daily-banner { margin: 0 8px 6px; padding: 6px 12px; gap: 4px 10px; font-size: 10.5px; }
  .game-overlay { padding: 12px; gap: 8px; }
  .key-hint { display: none; }
  .final-score { font-size: 26px; }
}

@media (min-width: 561px) { .guide-touch { display: none; } }

/* 低い視口（13 インチノート等）では装飾の操作部を縮め、盤面に高さを回す */
@media (min-width: 561px) and (max-height: 900px) {
  :root { --dpad: 76px; --dpad-arm: 25.33px; --ab-btn: 46px; --sys-w: 38px; }
  .sys-btn i { height: 12px; }
  .guide { font-size: 9.5px; gap: 4px 10px; margin-top: 6px; }
  #game-title { margin: 12px 0 6px; font-size: 23px; }
}
@media (min-width: 561px) and (max-height: 800px) {
  :root { --dpad: 60px; --dpad-arm: 20px; --ab-btn: 38px; --sys-w: 32px; }
  /* 装飾の操作部を縮めて、その分を盤面に回す */
  .sys { gap: 6px; }
  .ab { height: calc(var(--ab-btn) + 36px); }
  .ab .b-btn { top: 18px; }
  /* 情報列が盤面より高いと、そちらがレイアウトを支配して筐体からはみ出す。
     切替の分も含めて盤面の高さに収まるよう詰める */
  .info { gap: 6px; }
  .info-pieces { gap: 10px; }
  .seg { font-size: 15px; }
  .info-stats { padding-top: 2px; }
  .skin-switch { padding-top: 5px; }
  .skin-switch button { font-size: 8px; padding: 2px 2px; }
  #next-desktop { width: 38px; height: 80px; }
  #hold-desktop { width: 38px; height: 32px; }
  [data-skin="plain"] #next-desktop { width: 88px; height: 220px; }
  [data-skin="plain"] #hold-desktop { width: 88px; height: 73px; }
}