:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  background: #071727;
  color: #f8fbff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: linear-gradient(145deg, rgba(0, 193, 167, 0.14), transparent 42%), #071727;
}

button { font: inherit; }

.game-page {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(16px, 3vh, 30px) clamp(16px, 2vw, 30px);
}

.game-shell {
  container-type: inline-size;
  width: min(1440px, 100%);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.5vh, 14px);
  overflow: hidden;
}

.game-header,
.game-footer,
.game-actions,
.match-hud,
.player-hud,
.charge-meter {
  display: flex;
  align-items: center;
}

.game-header {
  grid-row: 1;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 24px;
  padding: 0 clamp(4px, 1vw, 12px);
}

.game-kicker,
.game-header h1,
.game-footer p,
.selection-heading p,
.selection-heading h2,
.selection-player p,
.selection-player strong,
.player-hud span,
.player-hud small,
.timer-card span,
.return-hint,
.result-score {
  margin: 0;
}

.game-kicker {
  color: #84f5e1;
  font-size: 12px;
  font-weight: 800;
}

.game-header h1 {
  color: #fff;
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.1;
}

.game-header h1 span { color: #ffd34f; }

.game-actions { gap: 10px; justify-content: flex-end; }
.game-actions button { white-space: nowrap; }
body[data-game-view="selection"] #restart-button { display: none; }
.controls-hint { display: grid; gap: 2px; width: min(460px, 100%); margin: 0; color: #b9c8d8; font-size: 11px; font-weight: 700; line-height: 1.25; text-align: right; }
.controls-hint span { min-width: 0; }

button {
  min-height: 40px;
  border: 1px solid #ffd34f;
  border-radius: 6px;
  padding: 0 17px;
  background: #ffd34f;
  color: #102239;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  transition: transform 150ms ease, background-color 150ms ease;
}

button:hover { background: #ffe17c; transform: translateY(-1px); }
button:focus-visible, .game-stage:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.game-stage {
  grid-row: 3;
  position: relative;
  width: auto;
  height: min(100%, 56.25cqw);
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  justify-self: center;
  align-self: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid rgba(244, 255, 255, 0.72);
  border-radius: 7px;
  background: #159d69;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
}

.mode-switch { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.mode-switch button { min-height: 32px; padding: 0 13px; border-color: rgba(255,255,255,.35); background: #173c59; color: #fff; font-size: 12px; }
.mode-switch button.active { border-color: #ffd34f; background: #ffd34f; color: #102239; }
.local-game-layer { position: absolute; inset: 0; }
.online-room-entry, .online-room-session { display: flex; align-items: center; gap: 6px; min-width: 0; }
.online-room-entry[hidden], .online-room-session[hidden] { display: none; }
.online-code-field input { width: 118px; min-height: 32px; border: 1px solid #7892a7; border-radius: 5px; padding: 0 8px; background: #0d2d48; color: #fff; font: inherit; text-transform: uppercase; }
.online-room-session strong { color: #ffd34f; white-space: nowrap; }
#online-room-status { max-width: 330px; overflow: hidden; color: #eef8ff; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
body[data-play-mode="online"] .match-hud, body[data-play-mode="online"] #help-button, body[data-play-mode="online"] #restart-button,
body[data-play-mode="online"] .controller-status, body[data-play-mode="online"] .controller-button,
body[data-play-mode="online"] .difficulty-control, body[data-play-mode="online"] .key-diagnostic { display: none !important; }
body[data-play-mode="online"] .selection-player.online-opponent .element-dot,
body[data-play-mode="online"] .selection-player.online-opponent .selection-confirm { pointer-events: none; }
body[data-play-mode="online"] .selection-player.online-opponent { opacity: .82; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game-stage[data-layout-mode="standard"],
.game-stage[data-layout-mode="compact"],
.game-stage[data-layout-mode="single"] {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

#game-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.selection-screen {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(10px, 1.4vw, 20px);
  background: rgba(5, 25, 42, 0.94);
}

.selection-heading { text-align: center; }
.selection-heading p { color: #84f5e1; font-size: clamp(12px, 1.4vw, 16px); font-weight: 700; }
.selection-heading h2 { margin-top: 3px; font-size: clamp(26px, 3.5vw, 46px); }

.selection-tabs { display: none; }
.selection-tab { min-width: 96px; min-height: 32px; padding: 0 18px; border-color: rgba(255,255,255,.4); background: #173c59; color: #fff; }
.selection-tab.active { border-color: #ffd34f; background: #ffd34f; color: #102239; }

.selection-players {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(18px, 3vw, 42px);
}

.selection-player {
  --team-color: #87e7ff;
  position: relative;
  min-width: 0;
  display: grid;
  height: 100%;
  align-content: center;
  gap: 5px;
  padding: clamp(9px, 1.2vw, 16px);
  border: 2px solid color-mix(in srgb, var(--team-color) 75%, white 25%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--team-color) 15%, #0d2942 85%);
  text-align: center;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

@media (min-width: 960px) {
  .selection-player { padding: 9px 11px; gap: 3px; }
  .character-preview { height: clamp(48px, 7vh, 72px); }
  .selection-player > strong { font-size: clamp(26px, 2.5vw, 34px); }
  .selection-player > p:nth-of-type(2) { min-height: 1.25em; font-size: clamp(12px, 1.2vw, 15px); }
  .selection-skill-preview { min-height: 44px; padding: 4px 7px; }
  .key-diagnostic { min-height: 14px; }
}

.character-preview {
  width: min(100%, 190px);
  height: clamp(58px, 8vw, 96px);
  justify-self: center;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .28));
}

.selection-player.locked { transform: translateY(-4px); box-shadow: 0 0 28px color-mix(in srgb, var(--team-color) 42%, transparent); }
.player-label { color: #c4d1de; font-size: clamp(12px, 1.3vw, 16px); font-weight: 800; }
.selection-player > strong { color: var(--team-color); font-size: clamp(26px, 3vw, 40px); line-height: 1; }
.selection-player > p:nth-of-type(2) { min-height: 1.5em; color: #f2f7fb; font-size: clamp(13px, 1.5vw, 18px); }
.controller-status { margin: 2px 0 0; color: #e9f6ff; font-size: clamp(12px, 1.35vw, 16px); font-weight: 800; }
.controller-button { min-height: 32px; justify-self: center; border-color: color-mix(in srgb, var(--team-color) 72%, white 28%); background: color-mix(in srgb, var(--team-color) 65%, #102239 35%); color: #06172a; font-size: 12px; }
.controller-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.difficulty-control { min-height: 34px; display: flex; justify-content: center; align-items: center; gap: 5px; }
.difficulty-control[hidden] { display: none; }
.difficulty-control > span { color: #dce9f4; font-size: 12px; font-weight: 800; }
.difficulty-control button { min-width: 38px; min-height: 30px; padding: 0 8px; border-color: rgba(255,255,255,.4); background: #173c59; color: #fff; font-size: 12px; }
.difficulty-control button.active { border-color: #ffd34f; background: #ffd34f; color: #102239; }

.versus-mark { align-self: center; color: #ffd34f; font-size: clamp(28px, 4vw, 54px); font-weight: 900; }
.selection-keys { min-height: 32px; display: flex; justify-content: center; align-items: center; gap: 9px; color: #b9c8d8; font-size: clamp(11px, 1.2vw, 14px); font-weight: 700; }
.selection-confirm { min-height: 32px; padding: 3px 11px; border-color: color-mix(in srgb, var(--team-color) 72%, white 28%); background: color-mix(in srgb, var(--team-color) 65%, #102239 35%); color: #06172a; font-size: 12px; }
.selection-confirm kbd { min-width: 23px; min-height: 21px; border-color: rgba(6,23,42,.35); background: rgba(255,255,255,.35); color: inherit; }
.selection-player.locked .selection-confirm { border-color: #ffd34f; background: #ffd34f; }
kbd { display: inline-grid; min-width: 25px; min-height: 24px; place-items: center; border: 1px solid rgba(255,255,255,.42); border-bottom-width: 3px; border-radius: 4px; padding: 1px 6px; background: #102f4b; color: #fff; font: inherit; }
.lock-status { color: #ffd34f; font-size: clamp(12px, 1.4vw, 16px); font-weight: 900; }

.element-dots { width: 100%; min-height: 94px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); justify-self: center; gap: 4px; }
.element-dot { min-width: 0; min-height: 32px; padding: 0 2px; border-color: color-mix(in srgb, var(--dot-color) 70%, white 30%); background: color-mix(in srgb, var(--dot-color) 28%, #102239 72%); color: #fff; font-size: clamp(9px, .85vw, 12px); opacity: .72; }
.element-dot.active { border-color: var(--dot-color); background: var(--dot-color); color: #071c2d; opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--dot-color) 70%, transparent); }
.element-dot.unavailable { border-style: dashed; opacity: .5; cursor: help; }
.element-dot.unavailable:hover,
.element-dot.unavailable:focus-visible,
.element-dot.preview { border-color: var(--dot-color); background: color-mix(in srgb, var(--dot-color) 45%, #102239 55%); opacity: 1; }
.selection-player.previewing { border-style: dashed; }
.selection-skill-preview { min-height: 50px; display: grid; align-content: center; gap: 2px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(3,20,34,.38); text-align: left; }
.selection-skill-preview strong { color: var(--team-color); font-size: clamp(10px, 1vw, 13px); }
.selection-skill-preview span { color: #dce9f4; font-size: clamp(9px, .85vw, 11px); line-height: 1.25; }
.selection-skill-preview small { color: #ffd978; font-size: 9px; font-weight: 800; }
.key-diagnostic { min-height: 18px; color: #9fb7c9; font-size: 10px; font-variant-numeric: tabular-nums; }
.selection-skill-preview,
.key-diagnostic { display: none; }
.element-dot:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.element-dot.active:disabled { opacity: 1; }

.match-hud {
  grid-row: 2;
  width: 100%;
  justify-content: center;
  gap: 10px;
  padding: 0;
  pointer-events: none;
}

.player-hud,
.timer-card {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(8, 31, 51, .9);
}

.player-hud { flex: 1; justify-content: space-between; gap: 9px; padding: 8px 12px; }
.p1-hud { border-left: 4px solid var(--p1-color, #87e7ff); }
.p2-hud { border-right: 4px solid var(--p2-color, #49a9ff); }
.player-hud span { color: #fff; font-size: clamp(11px, 1.2vw, 15px); font-weight: 900; }
.player-hud strong { font-size: clamp(24px, 3vw, 36px); }
.player-hud small { color: #aebdca; font-size: clamp(9px, 1vw, 12px); font-weight: 700; }

.timer-card { min-width: 110px; display: grid; place-items: center; padding: 6px 14px; }
.timer-card span { color: #aabaca; font-size: 11px; font-weight: 700; }
.timer-card strong { color: #ffd34f; font-size: clamp(23px, 3vw, 34px); line-height: 1; font-variant-numeric: tabular-nums; }

.charge-hud { position: absolute; z-index: 3; top: clamp(10px, 2.5%, 22px); right: clamp(10px, 2.5%, 22px); left: clamp(10px, 2.5%, 22px); min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.charge-meter { width: min(300px, 38%); gap: 8px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.26); border-radius: 6px; background: rgba(8,31,51,.88); font-size: 11px; font-weight: 900; }
.charge-track { flex: 1; height: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.charge-fill { display: block; width: 0%; height: 100%; border-radius: inherit; background: #84f5e1; box-shadow: 0 0 10px rgba(132,245,225,.7); }
.charge-meter.full .charge-fill { background: #ffd34f; box-shadow: 0 0 12px rgba(255,211,79,.8); }

.goal-flash,
.end-screen {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.kickoff-banner { position: absolute; z-index: 3; top: clamp(10px, 2.5%, 22px); left: 50%; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 7px 14px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.48); border-radius: 6px; background: rgba(4,31,43,.86); color: #fff; font-size: clamp(12px, 1.5vw, 18px); font-weight: 900; text-align: center; pointer-events: none; }
.skill-failure-layer { position: absolute; z-index: 5; inset: auto 7% 8%; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; }
.skill-failure { max-width: 44%; margin: 0; padding: 7px 11px; border: 1px solid rgba(255,218,120,.66); border-radius: 6px; background: rgba(48,23,18,.9); color: #fff3c4; font-size: clamp(11px, 1.3vw, 15px); font-weight: 900; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.p2-skill-failure { margin-left: auto; text-align: right; }

.goal-flash { inset: 0; contain: layout paint; padding: clamp(10px, 2.5%, 24px); color: #fff; opacity: 0; overflow: hidden; text-align: center; }
.goal-flash[hidden] { display: none; }
.goal-content { width: min(78%, 720px); height: min(68%, 440px); min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); place-items: center; gap: clamp(5px, 1vw, 12px); transform: translateY(8%); }
.goal-word { position: absolute; z-index: 1; top: clamp(10px, 2.5%, 22px); left: 50%; transform: translateX(-50%); color: #fff7c2; font-size: clamp(42px, 8vw, 94px); line-height: .9; white-space: nowrap; text-shadow: 0 5px 0 #e4573d, 0 12px 30px rgba(0,0,0,.3); }
.goal-scorer-text { font-size: clamp(22px, 3.5vw, 42px); font-weight: 900; line-height: 1.05; text-shadow: 0 4px 18px rgba(0,0,0,.8); }
.goal-celebration-card { width: min(100%, 640px); height: 100%; min-height: 0; display: grid; place-items: center; overflow: hidden; border-radius: 7px; padding: clamp(6px, 1%, 12px); background: rgba(5, 24, 39,.76); box-shadow: 0 18px 48px rgba(0,0,0,.36); }
.goal-celebration-card[hidden] { display: none; }
.goal-celebration-image { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.3)); }
.goal-flash.show { animation: goal-fade 1.08s ease-out both; }
.goal-flash.show .goal-content,
.goal-flash.show .goal-word { animation: goal-content-pop 1.08s ease-out both; }

.end-screen { background: rgba(3,19,32,.74); backdrop-filter: blur(4px); pointer-events: auto; }
.end-content { width: min(76%, 530px); padding: clamp(24px, 4vw, 44px); border: 2px solid rgba(255,255,255,.66); border-radius: 7px; background: #102f4b; text-align: center; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.end-content > p:first-child { margin: 0 0 4px; color: #84f5e1; font-weight: 800; }
.end-content h2 { margin: 0; font-size: clamp(32px, 5vw, 60px); }
.result-score { margin-top: 8px; color: #ffd34f; font-size: clamp(24px, 3vw, 38px); font-weight: 900; }
.return-hint { margin: 18px 0; color: #c5d0dc; font-size: 13px; }

.help-button {
  position: static;
  min-height: 32px;
  padding: 3px 11px;
  border-color: rgba(255,255,255,.42);
  background: rgba(6,31,49,.68);
  color: rgba(244,252,255,.82);
  font-size: 11px;
  font-weight: 800;
  opacity: .78;
}

.help-button:hover,
.help-button:focus-visible { background: rgba(13,57,80,.94); color: #fff; opacity: 1; }

.help-panel {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3%, 28px);
  overflow: hidden;
  background: rgba(2,16,29,.78);
  backdrop-filter: blur(5px);
}

.help-card {
  width: min(94%, 900px);
  max-height: 100%;
  display: grid;
  gap: clamp(8px, 1.2vw, 14px);
  overflow: hidden;
  padding: clamp(16px, 3vw, 30px);
  border: 1px solid rgba(180,239,255,.6);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(19,67,93,.98), rgba(8,30,50,.98));
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.help-pages { min-height: 0; display: grid; }
.help-page { min-height: 0; align-content: center; }
.help-page:not([hidden]) { display: grid; gap: clamp(8px, 1.2vw, 14px); }
.help-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; }
.help-pagination button { min-width: 76px; min-height: 32px; padding: 0 10px; }
.help-page-status { min-width: 54px; color: #ffd34f; font-size: 12px; font-weight: 900; text-align: center; }

.help-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.help-header p,
.help-header h2,
.help-card p,
.help-card h3 { margin: 0; }
.help-header p { color: #84f5e1; font-size: 12px; font-weight: 900; }
.help-header h2 { margin-top: 2px; font-size: clamp(24px, 4vw, 38px); }
.help-close-button { min-height: 32px; padding: 3px 11px; flex: 0 0 auto; font-size: 12px; }
.help-summary { color: #eef8ff; font-size: clamp(13px, 1.6vw, 17px); font-weight: 700; line-height: 1.5; }
.help-controls-summary { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgba(255,211,79,.4); border-radius: 7px; background: rgba(61,45,8,.25); }
.help-controls-summary strong { color: #ffd34f; }
.help-controls-summary span { color: #edf6fc; font-size: 12px; line-height: 1.45; }
.help-skill-atlas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.help-skill-card { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 7px; align-items: center; padding: 7px; border: 1px solid color-mix(in srgb, var(--team-color) 52%, transparent); border-radius: 7px; background: rgba(3,20,34,.46); }
.help-skill-card img { width: 44px; height: 44px; object-fit: contain; }
.help-skill-card strong { color: var(--team-color); font-size: 11px; }
.help-skill-card p { color: #dce9f4; font-size: 9px; line-height: 1.3; }
.help-skill-card small { color: #ffd978; font-size: 9px; font-weight: 800; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.help-grid section,
.help-rules { padding: 11px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: rgba(3,20,34,.42); }
.help-grid h3 { margin-bottom: 6px; color: #ffd34f; font-size: 16px; }
.help-grid p,
.help-rules p { color: #dce9f4; font-size: clamp(12px, 1.45vw, 15px); line-height: 1.55; }
.help-grid p + p,
.help-rules p + p { margin-top: 5px; }
.help-rules { display: grid; gap: 5px; }
.help-rules strong { color: #84f5e1; }
.help-tip { color: #b8cad8; font-size: 12px; text-align: center; }
.help-card kbd { min-width: 0; min-height: 20px; margin: 0 1px; padding: 0 4px; font-size: 11px; }

.game-footer { grid-row: 4; gap: 8px; padding: 0 clamp(4px, 1vw, 12px); color: #b9c8d8; font-size: 12px; font-weight: 700; }
.game-footer p:last-child { margin-left: auto; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #84f5e1; box-shadow: 0 0 12px #84f5e1; }

@keyframes goal-fade {
  0%, 100% { opacity: 0; }
  12%, 82% { opacity: 1; }
}
@keyframes goal-content-pop {
  0% { scale: .88; }
  18% { scale: 1.02; }
  82% { scale: 1; }
  100% { scale: .98; }
}

@media (max-width: 959px) {
  .game-page { padding: 10px 12px; }
  .game-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 0 2px; }
  .mode-switch { grid-column: 1 / -1; grid-row: 2; }
  .game-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .controls-hint { justify-self: end; }
  .selection-screen { align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr); padding: 8px; gap: 6px; }
  .selection-heading p { display: none; }
  .selection-heading h2 { margin: 0; font-size: 24px; line-height: 1.05; }
  .selection-tabs { display: flex; justify-content: center; gap: 8px; }
  .selection-players { display: block; min-height: 0; }
  .selection-player { height: 100%; padding: 9px 8px; gap: 4px; }
  .versus-mark { display: none; }
  .character-preview { height: clamp(42px, 8vh, 72px); }
  .selection-player > p:nth-of-type(2):not(.mystery-description),
  .selection-skill-preview,
  .key-diagnostic { display: none; }
  .selection-player > strong { font-size: 26px; }
  .element-dots { min-height: 96px; }
  .match-hud { gap: 5px; }
  .player-hud { padding: 5px 7px; }
  .player-hud small { display: none; }
  .timer-card { min-width: 78px; padding: 4px 8px; }
  .charge-hud { right: 10px; left: 10px; }
  .help-panel { padding: 8px; }
  .help-card { width: 100%; padding: 10px; gap: 7px; }
  .help-header h2 { font-size: 22px; }
  .help-header p { display: none; }
  .help-summary { font-size: 12px; line-height: 1.35; }
  .help-skill-atlas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .help-skill-card { grid-template-columns: 1fr; place-items: center; padding: 3px; }
  .help-skill-card img { width: 32px; height: 32px; }
  .help-skill-card div { min-width: 0; text-align: center; }
  .help-skill-card strong { display: block; overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
  .help-skill-card p,
  .help-skill-card small { display: none; }
  .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .help-grid section,
  .help-rules { padding: 7px; }
  .help-grid h3 { font-size: 13px; }
  .help-grid p,
  .help-rules p { font-size: 11px; line-height: 1.35; }
  .help-controls-summary { padding: 7px; }
  .help-tip { font-size: 10px; }
  .mode-switch { flex-wrap: wrap; row-gap: 4px; }
  .online-room-session { width: 100%; justify-content: center; }
  #online-room-status { max-width: min(45vw, 280px); }
}

@media (min-width: 960px) and (max-width: 1120px) {
  .game-header { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; }
  .mode-switch { grid-column: 1 / -1; grid-row: 2; }
  .game-actions { grid-column: 2; grid-row: 1; min-width: 0; }
  .controls-hint { width: min(460px, 100%); }
}

@media (max-height: 640px) {
  .game-page { padding: 8px 12px; }
  .game-shell { gap: 5px; }
  .game-header { gap: 14px; }
  .game-kicker { font-size: 10px; }
  .game-header h1 { font-size: clamp(22px, 2.5vw, 30px); }
  .player-hud { padding: 6px 10px; }
  .timer-card { padding: 4px 10px; }
  .game-footer { font-size: 11px; }
  .selection-screen { padding: 7px 10px; gap: 5px; }
  .selection-heading p { display: none; }
  .selection-heading h2 { margin: 0; font-size: 22px; }
  .selection-player { padding: 7px 9px; gap: 3px; }
  .character-preview { height: 48px; }
  .selection-player > p:nth-of-type(2):not(.mystery-description),
  .selection-skill-preview,
  .key-diagnostic { display: none; }
  .selection-player > strong { font-size: 25px; }
  .element-dots { min-height: 96px; }
  .help-panel { padding: 7px; }
  .help-card { width: 100%; padding: 9px; gap: 6px; }
  .help-header h2 { font-size: 20px; }
  .help-header p,
  .help-tip { display: none; }
}

@media (max-width: 420px) {
  .game-page { padding: 5px 6px; }
  .game-shell { gap: 4px; }
  .game-header { gap: 6px; }
  .game-kicker { display: none; }
  .game-header h1 { font-size: 20px; }
  .game-actions { gap: 5px; }
  .controls-hint { gap: 1px; font-size: 9px; line-height: 1.2; }
  .game-actions button { min-height: 32px; padding: 0 8px; font-size: 11px; }
  .selection-screen { padding: 5px; gap: 4px; }
  .selection-heading h2 { font-size: 19px; }
  .selection-tabs { gap: 6px; }
  .selection-tab { min-width: 82px; }
  .selection-player { padding: 5px 6px; gap: 2px; }
  .character-preview { height: 38px; }
  .player-label { font-size: 11px; }
  .selection-player > strong { font-size: 22px; }
  .controller-status,
  .lock-status { font-size: 11px; }
  .selection-keys > span { display: none; }
  .selection-confirm,
  .controller-button,
  .difficulty-control,
  .difficulty-control button { min-height: 32px; }
  .game-footer { min-height: 22px; padding: 0 2px; font-size: 10px; }
  .game-footer p:last-child { display: none; }
  .help-card { padding: 6px; gap: 4px; }
  .help-header h2 { font-size: 17px; }
  .help-close-button { padding: 0 8px; }
  .help-controls-summary span { font-size: 10px; line-height: 1.25; }
  .help-grid p,
  .help-rules p { font-size: 10px; line-height: 1.25; }
  .help-skill-card img { width: 28px; height: 28px; }
  .help-pagination { gap: 7px; }
  .help-pagination button { min-width: 68px; }
  .mode-switch { gap: 4px; }
  .mode-switch button { padding: 0 8px; font-size: 10px; }
  .online-room-entry, .online-room-session { gap: 3px; }
  .online-code-field input { width: 96px; }
  #online-room-status { max-width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}