/* 画面表示。3D の上に重ねる HTML。緑の計器調で、邪魔にならない細さに */
:root {
  --hud: #9dffbe;
  --hud-dim: rgba(157, 255, 190, .55);
  --panel: rgba(8, 16, 14, .55);
  --warn: #ffcf4a;
  --bad: #ff4a4a;
  --beam: #ff7ac0;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0d10; color: #e8f2ec; font-family: var(--font); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.hide { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; user-select: none; }
#hud > * { position: absolute; }

/* 速度線・被弾の赤・被弾方向 */
#speed {
  inset: 0; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .22) 0deg .5deg, transparent .5deg 6deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 32%, #000 78%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 32%, #000 78%);
  animation: speedjit .09s steps(2) infinite;
}
@keyframes speedjit { 50% { transform: rotate(1.6deg) scale(1.02); } }
#vign { inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(220, 20, 20, .75) 100%); }
#dmgdir {
  left: 50%; top: 50%; width: 340px; height: 340px; opacity: 0;
  border-radius: 50%; border-top: 7px solid rgba(255, 60, 60, .9);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 45%, #000 55%, transparent 70%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 45%, #000 55%, transparent 70%);
}

/* 照準 */
#xh {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1.5px solid var(--hud); border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, .6); transition: border-color .08s;
}
#xh::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; background: var(--hud); border-radius: 50%; }
#xh.enemy { border-color: var(--bad); }
#xh.enemy::after { background: var(--bad); }
#xh.melee { width: 64px !important; height: 64px !important; border-style: dashed; border-color: var(--beam); }

/* 命中の × 印 */
#hitmark { left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0; }
#hitmark::before, #hitmark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 2.5px; margin: -1.25px 0 0 -15px;
  background: linear-gradient(90deg, #fff 0 34%, transparent 34% 66%, #fff 66%);
}
#hitmark::before { transform: rotate(45deg); }
#hitmark::after { transform: rotate(-45deg); }
#hitmark.on { animation: hm .22s ease-out; }
#hitmark.melee { animation: hm .35s ease-out; }
#hitmark.kill { animation: hmk .5s ease-out; }
#hitmark.kill::before, #hitmark.kill::after { background: linear-gradient(90deg, var(--bad) 0 34%, transparent 34% 66%, var(--bad) 66%); }
@keyframes hm { 0% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1); } }
@keyframes hmk { 0% { opacity: 1; transform: scale(2.4) rotate(0deg); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3) rotate(0deg); } }

/* ダメージの数字 */
#nums .num {
  position: absolute; left: 0; top: 0; opacity: 0;
  font: 800 20px/1 var(--font); color: #fff; letter-spacing: .02em;
  text-shadow: 0 0 3px #000, 0 2px 4px #000; white-space: nowrap; will-change: transform;
}
#nums .num.beam { color: #ffd0ea; }
#nums .num.bullet { color: #ffe9a8; font-size: 15px; }
#nums .num.melee { color: #ff9ad2; font-size: 30px; }
#nums .num.state { color: var(--warn); font-size: 17px; }

/* 敵の印 */
#marks .mark { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; }
#marks .mark b {
  position: absolute; left: -7px; top: -12px; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid rgba(255, 70, 70, .9);
  filter: drop-shadow(0 0 2px #000);
}
#marks .mark i { position: absolute; left: -22px; top: -20px; width: 44px; height: 4px; background: rgba(0, 0, 0, .55); display: none; }
#marks .mark i s { display: block; height: 100%; background: #ff5050; transform-origin: 0 50%; }
#marks .mark.aim i { display: block; }
#marks .mark.aim b { border-top-color: #fff; }
#marks .mark.far b { transform: scale(.7); opacity: .8; }

/* 大きな文字（撃破など） */
#banner {
  left: 50%; top: 27%; transform: translate(-50%, -50%) scale(.9); opacity: 0;
  font: 900 34px/1.2 var(--font); letter-spacing: .12em; white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 0, 0, .8), 0 2px 3px #000; transition: opacity .15s, transform .15s;
}
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner.kill { color: #fff; }
#banner.streak { color: var(--warn); font-size: 42px; }
#banner.bad { color: var(--bad); }
#banner.warn { color: var(--warn); font-size: 26px; }
#banner.good { color: var(--hud); }

/* 左上: レーダーと戦績 */
#tl { left: 16px; top: 14px; }
#radar { display: block; background: radial-gradient(circle, rgba(8, 24, 18, .7), rgba(8, 16, 14, .45) 70%, transparent 71%); border-radius: 50%; }
#score { margin-top: 6px; font-size: 13px; color: var(--hud-dim); text-shadow: 0 1px 2px #000; }
#score b { color: var(--hud); font-size: 15px; margin-right: 4px; }

/* 右上: 戦闘記録 */
#log { right: 18px; top: 14px; width: 280px; text-align: right; font-size: 13px; text-shadow: 0 1px 2px #000; }
#log div { margin-bottom: 4px; padding: 3px 8px; background: var(--panel); display: inline-block; clear: both; float: right; transition: opacity 1s; }
#log div.good { color: var(--hud); }
#log div.bad { color: var(--bad); }
#log div.foe { color: #ffb0a0; }
#log div.old { opacity: .35; }

/* 左下: 機体と耐久 */
#status { left: 18px; bottom: 18px; width: 300px; padding: 10px 12px; background: var(--panel); border-left: 3px solid var(--hud); }
#ms-name { font-size: 13px; color: var(--hud-dim); margin-bottom: 6px; }
#status .bar { height: 12px; background: rgba(255, 255, 255, .08); }
#hp-bar { height: 100%; background: linear-gradient(90deg, #5fe29a, #b8ffd4); transform-origin: 0 50%; transition: transform .12s; }
#hp-bar.low { background: linear-gradient(90deg, #ff3a3a, #ff9a7a); }
#hp-num { font: 800 28px/1.1 var(--font); color: #fff; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* 下中央: ブースト */
#boost { left: 50%; bottom: 26px; width: 380px; transform: translateX(-50%); }
#boost .label { font-size: 11px; letter-spacing: .2em; color: var(--hud-dim); margin-bottom: 3px; }
#boost .label span { display: none; margin-left: 10px; color: var(--bad); font-weight: 800; animation: blink .3s steps(2) infinite; }
#boost .bar { height: 8px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(157, 255, 190, .35); }
#boost-bar { height: 100%; background: linear-gradient(90deg, #58b8ff, #bfe8ff); transform-origin: 0 50%; }
#boost.low #boost-bar { background: linear-gradient(90deg, #ff9a3a, #ffd08a); }
#boost.over #boost-bar { background: repeating-linear-gradient(90deg, #ff3a3a 0 8px, #9a1c1c 8px 12px); }
#boost.over .label span { display: inline; }
@keyframes blink { 50% { opacity: .2; } }

/* 右下: 武装 */
#weapons { right: 18px; bottom: 18px; width: 330px; }
#weapons div {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; margin-top: 3px;
  background: var(--panel); color: rgba(232, 242, 236, .55); font-size: 13px;
}
#weapons div span { color: var(--hud-dim); font-size: 11px; width: 12px; }
#weapons div b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
#weapons div.sel { color: #fff; border-left: 3px solid var(--hud); font-size: 15px; }
#weapons div.sel b { color: var(--hud); font-size: 18px; }
#weapons em { font-style: normal; color: var(--warn); font-size: 13px; }

#stats { left: 50%; top: 96px; transform: translateX(-50%); font: 12px/1.4 ui-monospace, monospace; background: rgba(0, 0, 0, .6); padding: 3px 8px; color: #cfe; }

/* タイトル・一時停止 */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(10, 20, 30, .55), rgba(4, 6, 10, .88));
}
.overlay .box {
  width: min(720px, calc(100% - 32px)); padding: 28px 34px; background: rgba(10, 16, 20, .82);
  border: 1px solid rgba(157, 255, 190, .35); box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.overlay .box.small { width: auto; text-align: center; padding: 22px 40px; cursor: pointer; }
.era { margin: 0; color: var(--hud-dim); letter-spacing: .3em; font-size: 12px; }
h1 { margin: 6px 0 4px; font-size: 34px; letter-spacing: .12em; }
h2 { margin: 0 0 6px; }
.sub { margin: 0 0 18px; color: #b9c6c0; font-size: 14px; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 13px; color: #d6e2dc; }
kbd {
  display: inline-block; min-width: 22px; margin-right: 8px; padding: 1px 6px; text-align: center;
  font: 12px/1.5 var(--font); color: var(--hud); border: 1px solid rgba(157, 255, 190, .4); background: rgba(157, 255, 190, .06);
}
.btns { display: flex; gap: 12px; margin-top: 22px; }
button {
  font: 700 16px var(--font); padding: 12px 26px; cursor: pointer; letter-spacing: .08em;
  color: #0b1510; background: var(--hud); border: 0;
}
button:hover { filter: brightness(1.1); }
button.sub { color: var(--hud); background: transparent; border: 1px solid rgba(157, 255, 190, .5); font-weight: 400; font-size: 14px; margin: 0; }
.note { margin: 14px 0 0; font-size: 12px; color: #8a9a92; }
#help {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%); padding: 10px 16px;
  background: rgba(8, 16, 14, .78); border: 1px solid rgba(157, 255, 190, .3); font-size: 13px; line-height: 1.8; pointer-events: none;
}
#help b { display: block; color: var(--hud); }
@media (max-width: 760px) { .keys { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 第2段: 対戦の表示 */
:root { --ally: #3d8bff; --enemy: #ff4d3d; --none: #e6e6e6; }

/* 上中央: 戦力ゲージ・残り時間・拠点 */
#top { left: 50%; top: 10px; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px 12px; align-items: center; width: min(640px, 70vw); }
#top .pw { display: flex; align-items: center; gap: 8px; font-size: 12px; text-shadow: 0 1px 2px #000; }
#top .pw .bar { flex: 1; height: 10px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .2); position: relative; overflow: hidden; }
#top .pw i { position: absolute; top: 0; bottom: 0; transition: width .3s; }
#top .pw.ally i { right: 0; background: linear-gradient(90deg, #1f5fd0, var(--ally)); }
#top .pw.enemy i { left: 0; background: linear-gradient(90deg, var(--enemy), #c02a20); }
#top .pw b { font: 800 15px var(--font); font-variant-numeric: tabular-nums; min-width: 42px; }
#top .pw.ally b { color: #9cc4ff; text-align: right; }
#top .pw.enemy b { color: #ffab9e; }
#top .pw.ally span { color: #9cc4ff; }
#top .pw.enemy span { color: #ffab9e; }
#clock { font: 800 22px/1 var(--font); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 3px #000; padding: 3px 10px; background: rgba(0, 0, 0, .45); }
#clock.low { color: var(--warn); }
#pts { grid-column: 1 / 4; display: flex; justify-content: center; gap: 10px; }
#pts span {
  position: relative; width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden;
  font: 800 15px var(--font); color: #111; background: var(--none); border: 2px solid rgba(0, 0, 0, .5);
  transform: rotate(45deg);
}
#pts span b { transform: rotate(-45deg); position: relative; z-index: 1; }
#pts span i { position: absolute; left: 0; right: 0; bottom: 0; opacity: .85; }
#pts span.ally { background: var(--ally); color: #fff; }
#pts span.enemy { background: var(--enemy); color: #fff; }
#pts span.busy { animation: blink .5s steps(2) infinite; }

/* 制圧の進み具合（拠点の中にいるとき） */
#capture { left: 50%; top: 62%; transform: translateX(-50%); width: 260px; text-align: center; display: none; font-size: 14px; text-shadow: 0 1px 2px #000; }
#capture.on { display: block; }
#capture .bar { height: 6px; margin-top: 4px; background: rgba(0, 0, 0, .5); position: relative; }
#capture .bar i { position: absolute; top: 0; bottom: 0; left: 50%; }

/* 味方の印 */
#marks .mark.ally b { border-top-color: rgba(80, 150, 255, .95); transform: scale(.75); }
#marks .mark.ally i { display: none !important; }
#marks .mark.ally em { display: block; }
#marks .mark em { display: none; position: absolute; left: 0; top: -30px; transform: translateX(-50%); font: 11px var(--font); font-style: normal; color: #bcd6ff; white-space: nowrap; text-shadow: 0 1px 2px #000; }

#log div.ally { color: #9cc4ff; }
#log div.enemy { color: #ffab9e; }
#log div.me { color: #fff; border-left: 3px solid var(--hud); }

/* タイトル */
.rules { display: grid; gap: 6px; margin: 0 0 16px; font-size: 13px; color: #cdd8d2; }
.rules b { color: var(--hud); margin-right: 8px; }
.pick { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.pick .lbl { width: 96px; font-size: 13px; color: var(--hud-dim); }
button.opt { font: 14px var(--font); padding: 8px 16px; color: #d6e2dc; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); letter-spacing: .04em; }
button.opt.sel { color: #0b1510; background: var(--hud); border-color: var(--hud); font-weight: 700; }
button.opt.fed.sel { background: #7fb2ff; border-color: #7fb2ff; }
button.opt.zeon.sel { background: #ff9a86; border-color: #ff9a86; }
.keys { margin-top: 14px; }

/* 出撃準備 */
.overlay .box.wide { width: min(900px, calc(100% - 32px)); }
.shead { display: flex; align-items: baseline; gap: 16px; }
.shead h2 { margin: 0 0 12px; }
#s-status { font-size: 13px; color: #b9c6c0; }
.scols { display: grid; grid-template-columns: 1fr 360px; gap: 22px; }
.lbl { margin: 0 0 6px; font-size: 12px; color: var(--hud-dim); letter-spacing: .1em; }
.card { padding: 10px 12px; margin-bottom: 8px; cursor: pointer; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); }
.card:hover { border-color: rgba(157, 255, 190, .5); }
.card.sel { border-color: var(--hud); background: rgba(157, 255, 190, .08); }
.card h3 { margin: 0; font-size: 17px; display: flex; gap: 10px; align-items: baseline; }
.card h3 small { font-size: 11px; color: #8fa198; font-weight: 400; }
.card h3 .role { margin-left: auto; font-size: 12px; padding: 1px 8px; border: 1px solid rgba(255, 255, 255, .3); color: #d6e2dc; font-weight: 400; }
.card p { margin: 4px 0 0; font-size: 12px; color: #b9c6c0; }
.card p b { color: #fff; font-weight: 600; margin-right: 10px; }
#s-map { display: block; width: 360px; height: 360px; background: #1a2420; border: 1px solid rgba(157, 255, 190, .25); cursor: pointer; }
#s-spawns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#s-spawns button { font: 13px var(--font); padding: 5px 12px; color: #d6e2dc; background: rgba(61, 139, 255, .12); border: 1px solid rgba(61, 139, 255, .45); }
#s-spawns button.sel { background: var(--ally); color: #fff; border-color: var(--ally); }
#s-wait { margin-left: 12px; font-size: 13px; color: var(--warn); align-self: center; }
button:disabled { opacity: .4; cursor: default; }

/* 結果 */
#r-head { font-size: 44px; letter-spacing: .3em; }
#r-head.win { color: #9cc4ff; }
#r-head.lose { color: #ffab9e; }
.rstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.rstats div { padding: 10px; background: rgba(255, 255, 255, .05); text-align: center; font-size: 12px; color: #b9c6c0; }
.rstats b { display: block; font-size: 24px; color: #fff; }
@media (max-width: 760px) { .scols { grid-template-columns: 1fr; } .rstats { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- 第3段: 爆弾・司令塔・補給・兵科 */
/* 司令塔の耐久（上中央、拠点の下） */
#towers { grid-column: 1 / 4; display: flex; justify-content: center; gap: 28px; font-size: 12px; text-shadow: 0 1px 2px #000; }
#towers span { display: flex; align-items: center; gap: 6px; }
#towers .ally { color: #9cc4ff; }
#towers .enemy { color: #ffab9e; }
#towers b { display: flex; gap: 3px; align-items: center; }
#towers b i { width: 14px; height: 8px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .3); }
#towers .ally b i.on { background: var(--ally); }
#towers .enemy b i.on { background: var(--enemy); }
#towers b em { font-style: normal; font-weight: 800; color: var(--warn); margin: 0 4px; }

/* 爆弾の警報（上中央の下に帯で） */
#alert {
  left: 50%; top: 118px; transform: translateX(-50%); padding: 5px 18px; display: none;
  font: 800 15px var(--font); letter-spacing: .06em; white-space: nowrap; text-shadow: 0 1px 2px #000;
}
#alert.on { display: block; }
#alert.bad { color: #fff; background: rgba(200, 30, 30, .75); animation: blink .6s steps(2) infinite; }
#alert.good { color: #0b1510; background: rgba(255, 210, 58, .85); text-shadow: none; }

/* 目標の印（爆弾・設置場所）。画面の端に寄せて見せる */
#objs .obj { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; }
#objs .obj b {
  position: absolute; left: 0; top: -34px; transform: translateX(-50%); padding: 2px 8px; white-space: nowrap;
  font: 800 12px var(--font); color: #111; background: #ffd23a; border: 1px solid rgba(0, 0, 0, .5);
}
#objs .obj b::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: inherit; }
#objs .obj span { position: absolute; left: 0; top: -54px; transform: translateX(-50%); font: 800 15px var(--font); color: #fff; text-shadow: 0 1px 3px #000; }
#objs .obj.bad b { background: #ff4040; color: #fff; animation: blink .5s steps(2) infinite; }
#objs .obj.good b { background: #ffd23a; }
#objs .obj.drop b { background: #ffd23a; opacity: .85; }
#objs .obj.plant b { background: rgba(255, 77, 61, .9); color: #fff; }

/* 操作の案内と、設置・解除の進み具合 */
#prompt {
  left: 50%; top: 56%; transform: translateX(-50%); display: none; padding: 4px 14px;
  font: 700 15px var(--font); color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 210, 58, .6); white-space: nowrap;
}
#prompt.on { display: block; }
#act { left: 50%; top: 66%; transform: translateX(-50%); width: 280px; text-align: center; display: none; font: 700 15px var(--font); color: #ffd23a; text-shadow: 0 1px 2px #000; }
#act.on { display: block; }
#act .bar { height: 8px; margin-top: 5px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 210, 58, .5); }
#act .bar i { display: block; height: 100%; background: #ffd23a; transform-origin: 0 50%; }

/* 状態の札（爆弾運搬中・補給中・修理中） */
#chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#chips:empty { display: none; }
#chips span { font-size: 12px; padding: 1px 8px; color: #0b1510; background: #5dff9a; }

/* 爆弾の運び手の印 */
#marks .mark.carrier b { border-top-color: #ffd23a; transform: scale(1.25); }

/* 出撃準備: 機体が多いので一覧をスクロールさせ、兵科の特性を書く */
#s-machines { max-height: min(58vh, 480px); overflow-y: auto; padding-right: 6px; }
#s-machines::-webkit-scrollbar { width: 6px; }
#s-machines::-webkit-scrollbar-thumb { background: rgba(157, 255, 190, .35); }
.card { padding: 8px 12px; margin-bottom: 6px; }
.card h3 { font-size: 16px; }
.card h3 .role.general { border-color: rgba(157, 255, 190, .6); color: #b8ffd4; }
.card h3 .role.raid { border-color: rgba(255, 140, 110, .7); color: #ffb8a4; }
.card h3 .role.support { border-color: rgba(255, 210, 58, .7); color: #ffe38a; }
.card h3 .uniq { font-size: 11px; padding: 0 6px; color: #fff; background: #c8283a; font-weight: 700; }
.card.taken { opacity: .45; cursor: not-allowed; }
.mapnote { margin: -2px 0 8px 104px; font-size: 12px; color: #b9c6c0; min-height: 1.4em; }
#s-role { margin: 8px 0 0; font-size: 12px; color: #b9c6c0; min-height: 1.4em; }
#s-role b { color: #fff; }
#nums .num.heal { color: #7dffae; font-size: 16px; }
#xh.repair { border-color: #5dff9a; border-style: dotted; width: 40px !important; height: 40px !important; }
#xh.repair.on { border-style: solid; box-shadow: 0 0 8px #5dff9a; }
#marks .mark.ally.hp i { display: block !important; left: -18px; top: -16px; width: 36px; }
#marks .mark.ally.hp i s { background: #5dff9a; }

/* 第4段: 宇宙の高度計（ブーストの上） */
#alt { left: 50%; bottom: 62px; transform: translateX(-50%); display: none; font: 700 14px var(--font); color: var(--hud); text-shadow: 0 1px 2px #000; letter-spacing: .08em; }
#alt.on { display: block; }

/* 第4段: タイトルの項目が増えたので、操作一覧を3列にして縦を詰める */
#title .box { width: min(820px, calc(100% - 32px)); padding: 22px 30px; }
#title h1 { font-size: 30px; }
#title .rules { gap: 4px; margin-bottom: 12px; font-size: 12.5px; }
#title .keys { grid-template-columns: repeat(3, 1fr); gap: 4px 14px; font-size: 12.5px; }
#title .btns { margin-top: 16px; }
@media (max-width: 760px) { #title .keys { grid-template-columns: 1fr; } }