:root {
  --bg: #10131c;
  --ink: #ece9df;
  --dim: #5a6580;
  --sub: #9aa3b8;
  --led-off: #1e2534;
  --green: #56f096;
  --pink: #fb5479;
  --yellow: #ffc12e;
  --red: #e8404b;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  /* LPトップのダークモードと同じブレッドボード: 上端に赤/青レール、
     ティールグリーンの穴が 24px ピッチで並ぶ(styles.css body.dark .stage と同一) */
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2796%27%3E%3Crect%20x=%270%27%20y=%270%27%20width=%2724%27%20height=%2796%27%20fill=%27%2310131c%27/%3E%3Crect%20x=%270%27%20y=%2712%27%20width=%2724%27%20height=%274%27%20fill=%27%23e8404b%27/%3E%3Crect%20x=%279.5%27%20y=%2731.5%27%20width=%275%27%20height=%275%27%20fill=%27%232e5247%27/%3E%3Crect%20x=%2711%27%20y=%2733%27%20width=%274%27%20height=%274%27%20fill=%27%2316302a%27/%3E%3Crect%20x=%279.5%27%20y=%2755.5%27%20width=%275%27%20height=%275%27%20fill=%27%232e5247%27/%3E%3Crect%20x=%2711%27%20y=%2757%27%20width=%274%27%20height=%274%27%20fill=%27%2316302a%27/%3E%3Crect%20x=%270%27%20y=%2776%27%20width=%2724%27%20height=%274%27%20fill=%27%234a7bd6%27/%3E%3C/svg%3E") left top/24px 96px repeat-x,
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2724%27%3E%3Crect%20x=%279.5%27%20y=%279.5%27%20width=%275%27%20height=%275%27%20fill=%27%232e5247%27/%3E%3Crect%20x=%2711%27%20y=%2711%27%20width=%274%27%20height=%274%27%20fill=%27%2316302a%27/%3E%3C/svg%3E") 0 0/24px 24px,
    var(--bg);
  color: var(--ink);
  font-family: 'DotGothic16', monospace;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

a {
  text-decoration: none;
  color: inherit;
}

.frame {
  min-height: calc(100svh - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px calc(12px + env(safe-area-inset-bottom));
}

/* Blogの .panel と同じ発想: 中央の無背景ブロックに盤面を置いて、
   ブレッドボードがLEDの下を走らないようにする */
main#app {
  position: relative;
  width: min(100%, 520px);
  background: #131828;
  border: 2px solid #242e45;
  border-radius: 14px;
  padding: 14px 12px 12px;
}

/* ===== ヘッダ ===== */
/* Blogの .site-header と同じ: レール帯(96px)の中に左寄せでロゴだけ置く */
.head {
  height: 96px;
  padding: 0 clamp(20px, 4vw, 44px);
  display: flex;
  align-items: center;
}

/* Blogと同じロゴ(content.css .logo 系と同一マークアップ、ゲーム向けサイズ) */
.logo {
  display: inline-flex;
  align-items: center;
}

.logo-name {
  font-family: 'Bitcount Single', 'Jersey 10', sans-serif;
  font-size: clamp(26px, 5.5vw, 38px);
  line-height: .9;
  letter-spacing: .06em;
  font-variation-settings: 'wght' 330, 'ELSH' 50;
}

/* Blogのダークモードと同じリン光カラー(content.css html.dark .logo 系) */
.logo .pico {
  color: #fb5479;
  -webkit-text-stroke: 2px #97233a;
  paint-order: stroke fill;
  text-shadow: 0 0 7px rgba(251, 84, 121, .55), 0 0 20px rgba(251, 84, 121, .35);
}

.logo .kaigi {
  color: #6ef0a0;
  -webkit-text-stroke: 3px #2c6b4a;
  paint-order: stroke fill;
  text-shadow: 0 0 6px rgba(110, 240, 160, .40), 0 0 16px rgba(110, 240, 160, .22);
}

.logo .pico .kern-pi { margin-left: -.03em; }
.logo .pico .kern-ic { margin-left: -.055em; }
.logo .kaigi .kern-yk { margin-left: .04em; }
.logo .kaigi .kern-ig { margin-left: -.08em; }

.logo-meta {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-left: 6px;
  transform: translateY(-3px);
  text-align: left;
}

.logo-meta .year {
  font-family: 'Micro 5', monospace;
  font-size: clamp(15px, 3vw, 22px);
  color: var(--ink);
}

.logo-meta .assemble {
  font-family: 'Jersey 10', monospace;
  font-size: clamp(13px, 2.6vw, 19px);
  color: var(--ink);
  letter-spacing: .06em;
  margin-top: -4px;
}

/* ロゴは控えめに: 静かな白文字と、電源ランプのような小さなピンクLED
   (ほうきと同じ色)がひと粒だけ */
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Jersey 10', monospace;
  font-size: clamp(23px, 6vw, 28px);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--ink);
  margin: -2px 0 4px;
}

.title .t-lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 5px rgba(251, 84, 121, .6);
}

/* ===== アプリ ===== */
#app {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 26px 0;
}

.boot-loading {
  font-family: 'Jersey 10', monospace;
  font-size: 24px;
  color: var(--dim);
  animation: blink 1.1s linear infinite;
}

/* 起動待ちの時間が そのまま操作説明タイムになる */
.boot-help {
  display: none;
  flex-direction: column;
  gap: 5px;
}

@media (pointer: coarse) {
  .boot-touch { display: flex; }
}

/* マウスがあるならPC扱い: タッチ説明は出さない(タッチ付きPC対策で後勝ち) */
@media (pointer: fine) {
  .boot-pc { display: flex; }
  .boot-touch { display: none; }
}

.game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vh, 16px);
  width: 100%;
  cursor: pointer;
  /* プレイ中だけスワイプ操舵を優先してスクロールを止める。
     タイトル/リザルトではページスクロールできる */
  touch-action: pan-y;
}

.game.phase-play { touch-action: none; }

/* プレイ中はページ全体でスクロール禁止(盤面の外から始まるスワイプも) */
body.playing {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

/* プレイ中、フッタのリンクとロゴは反応しない: 下ゾーンのタップが
   リンクに食われたり、誤タップでページを離れたりしないように */
body.playing .foot a,
body.playing .logo {
  pointer-events: none;
}

/* ===== スコア ===== */
.hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3.5vw, 26px);
  width: 100%;
  font-family: 'Micro 5', monospace;
}

.hud-label {
  font-size: 22px;
  color: var(--dim);
  margin-right: 8px;
}

.hud-value {
  font-size: 27px;
  color: var(--yellow);
}

/* ===== ヒープ(LEDマトリクス基盤) ===== */
.board {
  position: relative; /* フローティングスコアの基準 */
  background: #141926;
  border: 2px solid #232b3e;
  border-radius: 10px;
  padding: clamp(10px, 2.4vw, 16px);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .5);
}

.matrix {
  width: min(84vw, calc(42svh * var(--cols, 16) / var(--rows, 16)), 460px);
  aspect-ratio: calc(var(--cols, 16) / var(--rows, 16));
  display: grid;
  grid-template-columns: repeat(var(--cols, 16), 1fr);
  column-gap: calc(20% / var(--cols, 16));
  row-gap: calc(20% / var(--rows, 16));
}

.cell {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--led-off);
}

/* ゴミ(参照が切れたオブジェクト): 青みのない ぬくもりグレーに沈む
   (青の生存オブジェクトと見分けやすいよう、色相を離す) */
.cell.c1 {
  background: #66625a;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
}

/* ほうき(GC) */
.cell.c2 {
  background: var(--pink);
  box-shadow: 0 0 6px rgba(251, 84, 121, .6), 0 0 14px rgba(251, 84, 121, .3);
}

/* 回収のごほうび: スコアの数字がクッと弾む */
.hud-value.pop, .hud-value.pop2 {
  animation: hud-pop .22s ease-out 1;
}

@keyframes hud-pop {
  0% { transform: scale(1.45); color: #fff3c8; }
  100% { transform: none; }
}

/* 回収の瞬間、とったバイト数が その場から ふわっと のぼる */
.float-score {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  font-family: 'Micro 5', monospace;
  font-size: 19px;
  color: #ffe08a;
  text-shadow: 0 0 6px rgba(255, 193, 46, .6);
  animation: float-up .65s ease-out forwards;
}

@keyframes float-up {
  0% { transform: translate(-50%, -100%); opacity: 1; }
  100% { transform: translate(-50%, -100%) translateY(-15px); opacity: 0; }
}

/* れんさ中は「+52」のとなりに キャンディみたいな ×N ピルが ぽよんと出る */
.float-score {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fs-pill {
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  line-height: 1;
  color: var(--pink);
  background: transparent;
  border: 2px solid var(--pink);
  border-radius: 999px;
  padding: 2px 6px 3px;
  transform: rotate(-6deg);
  text-shadow: 0 0 6px rgba(251, 84, 121, .5);
  animation: pill-pop .3s cubic-bezier(.34, 1.56, .64, 1) 1;
}

.fs-pill.hot {
  color: var(--yellow);
  border-color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 193, 46, .6);
}

@keyframes pill-pop {
  0% { transform: rotate(-6deg) scale(0); }
  100% { transform: rotate(-6deg) scale(1); }
}

/* がったいの節目: 箒からLED色の紙吹雪 */
.confetti-bit {
  position: absolute;
  z-index: 4;
  width: 6px;
  height: 6px;
  pointer-events: none;
  animation: confetti-fly .6s ease-out forwards;
}

/* 毎sweepの常時層: ちいさな金の火花が2粒 */
.spark-bit {
  position: absolute;
  z-index: 4;
  width: 3px;
  height: 3px;
  pointer-events: none;
  animation: spark-fly .4s ease-out forwards;
}

@keyframes spark-fly {
  0% { transform: translate(-50%, -50%); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy)));
    opacity: 0;
  }
}

@keyframes confetti-fly {
  0% { transform: translate(-50%, -50%) scale(1); }
  100% {
    transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) scale(.35) rotate(200deg);
  }
}

/* 操舵が効いた瞬間: ほうきがクイッと縮んで戻る */
.cell.c2.turn {
  animation: turn-squish .13s ease-out 1;
}

@keyframes turn-squish {
  0% { transform: scale(.65); }
  60% { transform: scale(1.18); }
  100% { transform: none; }
}

/* がったいの節目: ヒープ全体がドクンと脈打つ */
.board.pulse {
  animation: board-pulse .28s ease-out 1;
}

@keyframes board-pulse {
  0% { transform: scale(1.015); filter: brightness(1.35); }
  100% { transform: none; filter: none; }
}

/* ライトバリア チャージ切れ: ほうきが中抜きのリングになる。
   盤面のほかの要素はぜんぶ塗りつぶしドットなので、輪郭だけ=シールド切れが
   点滅に頼らず一目でわかる */
.cell.c2.nobarrier {
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--pink);
}

/* 回収期限が近いゴミ: 灰色のまま はやく またたく(もうすぐ消える) */
.cell.c3 {
  background: #66625a;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
  animation: dying-flicker .25s steps(1) infinite;
}

/* 生きてるオブジェクトを解放してしまった直後: プログラムがまだ走っている
   つかのま、画面がグリッチする(このあと use-after-free で SEGV) */
.board.glitch {
  animation: glitch .14s steps(2) infinite;
}

@keyframes glitch {
  0%, 100% { filter: none; transform: translateX(0); }
  50% { filter: hue-rotate(80deg) brightness(1.5) saturate(2); transform: translateX(3px); }
}

/* FULL GC = Stop The World: 白くまたたいたあと、凍結のあいだ
   世界から色が抜ける */
.board.stw {
  animation: stw-flash .78s linear 1;
}

@keyframes stw-flash {
  0% { filter: brightness(3.2) saturate(.2); }
  12% { filter: brightness(1.3) saturate(.1); }
  85% { filter: brightness(1.05) saturate(.1); }
  100% { filter: none; }
}

/* はじめて押しどきが来たとき、ボタンが さそう */
.gcstart-btn.hint {
  animation: beckon .7s ease-in-out infinite;
}

@keyframes beckon {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(86, 240, 150, .35); }
  50% { transform: scale(1.09); box-shadow: 0 0 18px rgba(86, 240, 150, .75); }
}

/* 参照が切れかけ: 黄色くまたたく */
.cell.c4 {
  background: var(--yellow);
  box-shadow: 0 0 5px rgba(255, 193, 46, .5);
  animation: dying-flicker .3s steps(1) infinite;
}

/* 生きているオブジェクト: 色つきで呼吸(ピンクはほうき専用なので使わない) */
.cell.c5 { background: #56f096; }
.cell.c6 { background: #b784f5; }
.cell.c7 { background: #ff8a3d; }
.cell.c8 { background: #58aef5; }

.cell.c5, .cell.c6, .cell.c7, .cell.c8 {
  box-shadow: 0 0 5px rgba(255, 255, 255, .18);
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@keyframes dying-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* トーラスごし: 反対側の着地マスに ほうきと同じピンクの小さな点で「ここに出るよ」 */
.cell.ghost {
  background-image: radial-gradient(circle, rgba(251, 84, 121, .6) 26%, transparent 30%);
}

/* 次のオブジェクトが生まれるマス: 青いタネが呼吸しながら実体化を待つ
   (生まれたてのLEDは青なので、青い点→青いLEDと色がつながる) */
.cell.incoming {
  background-image: radial-gradient(circle, rgba(88, 174, 245, .6) 24%, transparent 28%);
  animation: incoming-grow 1.3s ease-in forwards;
}

@keyframes incoming-grow {
  0% { opacity: .12; }
  100% { opacity: 1; }
}


/* こえた瞬間、ポンっと着地 */
.cell.c2.warp {
  animation: warp-in .28s ease-out 1;
}

@keyframes warp-in {
  0% { transform: scale(.25); box-shadow: 0 0 16px rgba(251, 84, 121, .9); }
  100% { transform: scale(1); }
}

/* ゲームオーバー後の凍った盤面: チカチカはやめて、燃えさしのように
   ゆっくり ゆらめく */
.phase-over .cell.c3,
.phase-over .cell.c4 {
  animation: ember 2.6s ease-in-out infinite;
}

.phase-over .msg-record {
  animation: ember 2.2s ease-in-out infinite;
}

@keyframes ember {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* タイトル画面: 盤面が呼吸する */
.phase-ready .board {
  animation: breathe 2.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}

/* ゲームオーバー: 盤面が大きく揺れる */
.board.shake-big {
  animation: shake-big .4s linear 1;
}

@keyframes shake-big {
  0%, 100% { transform: none; }
  15% { transform: translate(-8px, 2px); }
  30% { transform: translate(7px, -2px); }
  45% { transform: translate(-5px, 1px); }
  60% { transform: translate(4px, -1px); }
  80% { transform: translate(-2px, 0); }
}

/* ===== メッセージ ===== */
.msg {
  text-align: center;
  min-height: 2.6em;
}

.msg-en {
  font-family: 'Jersey 10', monospace;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--green);
}

.phase-ready .msg-en { animation: blink 1.3s linear infinite; }
.phase-over .msg-en { color: #ff6b74; }

/* PERFECT/GC.start/NEW RECORD などのフラッシュ */
.msg-en.msg-flash {
  color: var(--yellow);
  animation: flash-pop .25s steps(2) 1;
}

@keyframes flash-pop {
  0% { transform: scale(.7); }
  100% { transform: scale(1); }
}

.msg-ja {
  margin-top: 4px;
  font-size: 13px;
  color: var(--sub);
}

/* チェーン継続中の常時表示: リンクが増えるたび キュッと はずむ */
.msg-ja.msg-chain {
  color: var(--yellow);
  letter-spacing: 1px;
  font-size: 17px;
  font-weight: bold;
}

.msg-ja.msg-chain.cp0,
.msg-ja.msg-chain.cp1 { animation: chain-pop .18s ease-out 1; }

/* 5連鎖からは熱色 */
.msg-ja.msg-chain.hot {
  color: #ff8a3d;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(255, 138, 61, .55);
}

@keyframes chain-pop {
  0% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.msg-record {
  font-family: 'Jersey 10', monospace;
  font-size: 19px;
  letter-spacing: 1px;
  color: var(--yellow);
  animation: blink .9s linear infinite;
}

.msg-title {
  margin-top: 3px;
  font-size: 13px;
  color: var(--yellow);
}

/* 全称号コンプリートの栄光 */
.msg-comp {
  margin-top: 3px;
  font-family: 'DotGothic16', monospace;
  font-size: 14px;
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255, 193, 46, .7);
  animation: ember 2.2s ease-in-out infinite;
}

@keyframes blink {
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: .25; }
}

/* ===== シェア ===== */
.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
}



/* HUD行(BESTの右)に常設。画面下の操舵ゾーンと動線が交差しない */
.gcstart-btn {
  display: none;
  font-family: 'Jersey 10', monospace;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--bg);
  background: var(--green);
  border: none;
  border-radius: 6px;
  padding: 5px 12px 6px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(86, 240, 150, .35);
}

.phase-play .gcstart-btn { display: inline-block; }

.gcstart-btn.busy {
  background: #2c3a4e;
  color: var(--dim);
  box-shadow: none;
}

.gcstart-btn:active { transform: translateY(1px); }


.share-btn {
  display: none;
  font-family: 'DotGothic16', monospace;
  font-size: 14px;
  color: var(--bg);
  background: var(--yellow);
  border: none;
  border-radius: 6px;
  padding: 7px 16px 8px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 193, 46, .45);
}

.phase-over .share-btn { display: inline-block; }

.share-btn:hover { filter: brightness(1.12); }
.share-btn:active { transform: translateY(1px); }

/* ===== フッタ ===== */
.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--dim);
}

.powered {
  font-family: 'Jersey 10', monospace;
  font-size: 14px;
  letter-spacing: 1px;
}

.powered a {
  color: var(--sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.powered a:hover {
  color: var(--green);
}

/* 称号コレクション */
.zukan-btn {
  display: none;
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  color: var(--sub);
  background: transparent;
  border: 1px solid #2c3a4e;
  border-radius: 6px;
  padding: 7px 12px 8px;
  cursor: pointer;
}

.phase-ready .zukan-btn,
.phase-over .zukan-btn { display: inline-block; }

/* ゆっくりモード切替: 押すとカメが点灯 */
.slow-btn {
  display: none;
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  color: var(--sub);
  background: transparent;
  border: 1px solid #2c3a4e;
  border-radius: 6px;
  padding: 7px 12px 8px;
  cursor: pointer;
}

.phase-ready .slow-btn { display: inline-block; }

/* モバイル専用の操作説明: タップゾーンの図解 */
.info-btn {
  display: none;
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: 'DotGothic16', monospace;
  font-size: 19px;
  line-height: 1;
  color: var(--dim);
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
}

.info-btn:active { color: var(--ink); }

.phase-ready .info-btn { display: inline-block; }
.game.pc .info-btn { display: none; }

.zmap {
  display: flex;
  gap: 4px;
  width: 210px;
  height: 110px;
  margin: 4px auto 10px;
}

.zm-side {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a2133;
  border: 1px dashed #3a4a66;
  border-radius: 8px;
  color: var(--ink);
  font-size: 17px;
}

.zm-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zm-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a2133;
  border: 1px dashed #3a4a66;
  border-radius: 8px;
  color: var(--ink);
  font-size: 17px;
}

.info-line {
  font-size: 12px;
  color: var(--sub);
  text-align: center;
}

.slow-btn.on {
  color: var(--bg);
  background: #56f096;
  border-color: transparent;
  box-shadow: 0 0 8px rgba(86, 240, 150, .4);
}

.zukan {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(6, 8, 14, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: pointer;
}

/* モーダル本体は不透明のカード。うしろにゲーム画面が見える */
.zukan-inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 100%;
  overflow-y: auto;
  background: #131828;
  border: 2px solid #242e45;
  border-radius: 14px;
  padding: 18px 24px 16px;
}

.zukan-title {
  font-family: 'DotGothic16', monospace;
  font-size: 16px;
  color: var(--yellow);
  margin-bottom: 6px;
  text-align: center;
}

.zk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
}

.zk-locked .zk-name { color: var(--dim); }

.zukan-close {
  margin-top: 10px;
  font-size: 12px;
  color: var(--dim);
  text-align: center;
}

/* スマホでは全体を1画面に収める。高さ基準にするとURLバーの出入りで
   境界をまたいでLEDサイズが変わってしまうので、幅で判定する */
@media (max-width: 480px) {
  .frame { gap: 6px; padding-top: 8px; }
  .hud-label { font-size: 18px; margin-right: 5px; }
  .hud-value { font-size: 22px; }
  .gcstart-btn { font-size: 13px; padding: 4px 9px 5px; }
  main#app { padding: 10px 10px 12px; }
  .matrix { width: min(80vw, calc(36svh * var(--cols, 16) / var(--rows, 16)), 460px); }
  .msg-en { font-size: 22px; }
  .powered { font-size: 12px; }
}