:root {
  --brand: #ff7a00;
  --brand-2: #ffb703;
  --navy: #0f1b3d;
  --ink: #101426;
  --good: #22e07a;
  --bad: #ff4d5e;
  --paper: #fff8ef;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  background: radial-gradient(1200px 700px at 50% 0%, #26305e 0%, #101426 60%, #090b16 100%);
  color: var(--paper);
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.stage {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.playfield {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.mobile-arrow {
  display: none;
}

.cta-sub--touch,
.hint--touch { display: none; }

.game-wrap {
  position: relative;
  width: min(100vw - 20px, calc((100vh - 70px) * 1.5));
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 3px rgba(255, 255, 255, .06);
  container-type: inline-size;
  background: var(--navy);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 30, .72);
  backdrop-filter: blur(3px);
  animation: fadeIn .25s ease-out;
}
.overlay.hidden { display: none; }
.hidden { display: none !important; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.panel {
  text-align: center;
  padding: 3cqw 4cqw;
  animation: pop .35s cubic-bezier(.2, 1.4, .4, 1);
}

.brand-logo {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  object-fit: contain;
}
.brand-logo--start { height: 3.2cqw; opacity: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.brand-logo--footer { height: 2.2cqw; }
.brand-logo--page { height: 18px; }
.brand-logo--light { filter: brightness(0) invert(1); opacity: .95; }

.brand-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  font-size: 1.5cqw;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 700;
}
.brand-tag span { opacity: .7; }

.title {
  margin: .4cqw 0 0;
  font-size: 8cqw;
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 .6cqw 0 rgba(0, 0, 0, .35);
}
.title .accent {
  color: var(--brand-2);
  background: linear-gradient(90deg, #ffb703, #ff7a00, #ffd166, #ff7a00);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 4s linear infinite;
  text-shadow: none;
  filter: drop-shadow(0 .6cqw 0 rgba(0, 0, 0, .35));
}

.slogan {
  margin: 1cqw 0 2cqw;
  font-size: 1.8cqw;
  font-weight: 700;
  letter-spacing: .25em;
  opacity: .85;
}

.cta {
  display: inline-block;
  padding: 1.4cqw 3cqw;
  border-radius: 1.4cqw;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 .8cqw 0 #c9b8a2, 0 1.6cqw 3cqw rgba(0, 0, 0, .4);
  transform: rotate(-1.5deg);
}
.cta-main {
  font-size: 4.2cqw;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--brand);
  animation: pulse 1.6s ease-in-out infinite;
}
.cta-sub {
  font-size: 1.9cqw;
  font-weight: 700;
  margin-top: .3cqw;
}
kbd {
  display: inline-block;
  min-width: 2.6cqw;
  padding: .1cqw .5cqw;
  border-radius: .5cqw;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 1.9cqw;
  box-shadow: inset 0 -.3cqw 0 rgba(0, 0, 0, .5);
}

.legend {
  display: flex;
  justify-content: center;
  gap: 2cqw;
  margin: 2cqw 0 1.6cqw;
  font-size: 1.5cqw;
  font-weight: 700;
}
.legend-item { display: flex; align-items: center; gap: .6cqw; opacity: .95; }
.legend .dot { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; display: inline-block; }
.legend .good .dot, .legend-item.good .dot { background: var(--good); box-shadow: 0 0 1cqw var(--good); }
.legend-item.bad .dot { background: var(--bad); box-shadow: 0 0 1cqw var(--bad); }
.legend-item.pu .dot { background: #4cc9f0; box-shadow: 0 0 1cqw #4cc9f0; }
.legend .legend-item.pu { opacity: .9; }

.btn {
  font-family: inherit;
  font-weight: 900;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #ff9a2e, var(--brand));
  padding: 1.3cqw 3.4cqw;
  font-size: 2.2cqw;
  border-radius: 1.2cqw;
  letter-spacing: .06em;
  box-shadow: 0 .6cqw 0 #b85500, 0 1.4cqw 2.6cqw rgba(255, 122, 0, .35);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(.5cqw); box-shadow: 0 .1cqw 0 #b85500, 0 .6cqw 1.6cqw rgba(255, 122, 0, .3); }
.btn-primary { margin-top: .4cqw; }
.btn-small { padding: .9cqw 1.8cqw; font-size: 1.6cqw; }

.hint { margin-top: .8cqw; font-size: 1.3cqw; opacity: .6; font-weight: 500; }

.challenge { margin-top: .8cqw; font-weight: 700; color: #fff; opacity: .9; font-size: 1.5cqw; }
.challenge strong { color: var(--brand-2); }

/* ---------- Start screen layout ---------- */
.panel-start {
  width: 96%;
  padding: 2cqw 2.4cqw 2.2cqw;
}

.start-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 2cqw 3cqw;
  align-items: start;
  text-align: left;
}

.start-main { text-align: center; }

.title--start { font-size: 6.8cqw; }
.slogan--start { margin: .6cqw 0 1.4cqw; font-size: 1.55cqw; }
.cta--start { padding: 1.1cqw 2.4cqw; }
.cta--start .cta-main { font-size: 3.6cqw; }

.legend--start {
  flex-direction: column;
  align-items: center;
  gap: .35cqw;
  margin: 1.2cqw 0 1.1cqw;
  font-size: 1.28cqw;
}

.start-leaderboard {
  padding: 1.5cqw 1.7cqw 1.3cqw;
  border-radius: 1.4cqw;
  background:
    linear-gradient(160deg, rgba(255, 183, 3, .16) 0%, rgba(255, 122, 0, .06) 45%, rgba(15, 27, 61, .85) 100%);
  border: 2px solid rgba(255, 183, 3, .45);
  box-shadow:
    0 0 2.8cqw rgba(255, 183, 3, .22),
    0 1.2cqw 2.4cqw rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

.board-title--start {
  font-size: 2.1cqw;
  margin-bottom: .9cqw;
  text-align: center;
  text-shadow: 0 0 1.2cqw rgba(255, 183, 3, .35);
}

.board--start {
  font-size: 1.42cqw;
  background: rgba(0, 0, 0, .22);
  border-radius: .9cqw;
  overflow: hidden;
}
.board--start th {
  font-size: 1.1cqw;
  padding: .5cqw .8cqw .35cqw;
  background: rgba(0, 0, 0, .25);
}
.board--start td { padding: .28cqw .6cqw; }
.board--start tr:not(.top-1):not(.top-2):not(.top-3) td { opacity: .9; }
.board--start tr.top-1 td { font-size: 1.62cqw; }
.board--start tr.top-2 td { font-size: 1.48cqw; }
.board--start tr.top-3 td { font-size: 1.4cqw; }
.board--start td.board-when { font-size: 1.05cqw; }
.board--start tr.top-1 td.board-when { font-size: 1.12cqw; }

.challenge--start {
  margin-top: 1cqw;
  padding: .75cqw 1cqw;
  border-radius: .8cqw;
  text-align: center;
  font-size: 1.35cqw;
  line-height: 1.35;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ---------- Game over ---------- */
.panel-over {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-areas: "left right" "foot foot";
  gap: 1cqw 3.5cqw;
  width: 92%;
  text-align: left;
  align-items: start;
}
.over-left { grid-area: left; text-align: center; }
.over-right { grid-area: right; }
.brand-footer {
  grid-area: foot;
  text-align: center;
  font-size: 1.4cqw;
  opacity: .75;
  display: flex;
  gap: 1.2cqw;
  justify-content: center;
  align-items: baseline;
  padding-top: .6cqw;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.brand-footer .brand-logo { height: 2.4cqw; }

.over-title {
  margin: 0;
  font-size: 6cqw;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--bad);
  text-shadow: 0 .5cqw 0 rgba(0, 0, 0, .35);
}
.final-score {
  font-size: 5.6cqw;
  font-weight: 900;
  line-height: 1;
  margin: .4cqw 0 .8cqw;
  color: #fff;
  text-shadow: 0 0 2cqw rgba(255, 183, 3, .4);
}
.final-score small { font-size: 2cqw; color: var(--brand-2); }
.stats {
  display: flex;
  gap: 2cqw;
  justify-content: center;
  font-size: 1.5cqw;
  font-weight: 700;
  opacity: .85;
}
.stats b { color: var(--brand-2); }

.name-entry {
  margin: 0 auto 1.2cqw;
  padding: 1cqw 1.4cqw;
  border-radius: 1cqw;
  background: rgba(34, 224, 122, .12);
  border: 1px solid rgba(34, 224, 122, .35);
  display: inline-block;
}
.name-entry.hidden { display: none; }
.name-entry-title { font-size: 1.5cqw; font-weight: 700; color: var(--good); margin-bottom: .6cqw; }
#name-form { display: flex; gap: .8cqw; justify-content: center; }
#name-input {
  font-family: inherit;
  font-weight: 900;
  font-size: 1.9cqw;
  text-transform: uppercase;
  letter-spacing: .08em;
  width: 16cqw;
  padding: .6cqw 1cqw;
  border-radius: .8cqw;
  border: 2px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  outline: none;
}
#name-input:focus { border-color: var(--brand-2); }

.board-title { font-weight: 900; letter-spacing: .1em; color: var(--brand-2); font-size: 1.9cqw; margin-bottom: .8cqw; }
.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.55cqw;
  font-weight: 700;
}
.board th { text-align: left; font-size: 1.2cqw; opacity: .55; letter-spacing: .1em; padding: 0 .8cqw .4cqw; }
.board th.r, .board td.r { text-align: right; }
.board th.board-when-h { white-space: nowrap; }
.board td { padding: .32cqw .8cqw; border-top: 1px solid rgba(255, 255, 255, .07); }
.board td.rank { width: 3.2cqw; text-align: center; opacity: .85; font-variant-numeric: tabular-nums; }
.board td.rank--medal { font-size: 1.65cqw; line-height: 1; opacity: 1; filter: drop-shadow(0 .15cqw .4cqw rgba(0, 0, 0, .45)); }
.board td.player { max-width: 11cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board td.score { color: inherit; font-variant-numeric: tabular-nums; }
.board td.board-when {
  font-size: 1.15cqw;
  font-weight: 600;
  opacity: .72;
  white-space: nowrap;
  color: rgba(255, 255, 255, .88);
  font-variant-numeric: tabular-nums;
}

.board tr.top-1 td {
  background: linear-gradient(90deg, rgba(255, 209, 102, .32) 0%, rgba(255, 183, 3, .1) 55%, transparent 100%);
  color: #ffe566;
  font-size: 1.82cqw;
  padding-top: .55cqw;
  padding-bottom: .55cqw;
  border-top-color: rgba(255, 209, 102, .35);
  text-shadow: 0 0 1.2cqw rgba(255, 209, 102, .35);
}
.board tr.top-1 td.rank--medal { font-size: 2.1cqw; }
.board tr.top-1 td.board-when { opacity: .88; color: #ffe9a8; font-size: 1.25cqw; }

.board tr.top-2 td {
  background: linear-gradient(90deg, rgba(192, 210, 235, .22) 0%, rgba(192, 210, 235, .06) 55%, transparent 100%);
  color: #eef3ff;
  font-size: 1.68cqw;
  padding-top: .45cqw;
  padding-bottom: .45cqw;
  border-top-color: rgba(192, 210, 235, .28);
}
.board tr.top-2 td.rank--medal { font-size: 1.9cqw; }
.board tr.top-2 td.board-when { font-size: 1.2cqw; color: #d8e4f5; }

.board tr.top-3 td {
  background: linear-gradient(90deg, rgba(232, 164, 90, .24) 0%, rgba(232, 164, 90, .07) 55%, transparent 100%);
  color: #ffc98a;
  font-size: 1.58cqw;
  padding-top: .4cqw;
  padding-bottom: .4cqw;
  border-top-color: rgba(232, 164, 90, .3);
}
.board tr.top-3 td.rank--medal { font-size: 1.75cqw; }
.board tr.top-3 td.board-when { font-size: 1.18cqw; color: #f0c9a0; }

.board tr.me td {
  background: rgba(34, 224, 122, .18);
  color: var(--good);
  box-shadow: inset 0 0 0 1px rgba(34, 224, 122, .35);
}
.board tr.me.top-1 td,
.board tr.me.top-2 td,
.board tr.me.top-3 td {
  background: linear-gradient(90deg, rgba(34, 224, 122, .28), rgba(34, 224, 122, .1));
  color: #b8ffd9;
}

/* ---------- Start tabs & settings ---------- */
.start-tabs {
  display: inline-flex;
  gap: .4cqw;
  margin-bottom: 1.6cqw;
  padding: .35cqw;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .1);
}
.start-tab {
  font-family: inherit;
  font-weight: 900;
  font-size: 1.5cqw;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  padding: .7cqw 1.8cqw;
  border-radius: 999px;
  color: rgba(255, 255, 255, .65);
  background: transparent;
  transition: background .15s, color .15s;
}
.start-tab:hover { color: #fff; }
.start-tab.active {
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .25);
}
.start-tab-panel { width: 100%; }
.start-tab-panel.hidden { display: none; }

.settings-title {
  margin: 0 0 .4cqw;
  font-size: 3.2cqw;
  font-weight: 900;
  letter-spacing: .04em;
}
.settings-sub {
  margin: 0 0 1.4cqw;
  font-size: 1.35cqw;
  opacity: .72;
  font-weight: 500;
}
.preset-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8cqw;
  margin-bottom: 1.6cqw;
}
.preset-btn {
  font-family: inherit;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 1cqw;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  padding: .9cqw .6cqw;
  transition: border-color .15s, background .15s, transform .08s;
}
.preset-btn:hover { border-color: rgba(255, 183, 3, .45); }
.preset-btn.active {
  border-color: var(--brand);
  background: rgba(255, 122, 0, .18);
  box-shadow: 0 0 1.2cqw rgba(255, 122, 0, .35);
}
.preset-btn .ico { display: block; font-size: 2.2cqw; line-height: 1; margin-bottom: .3cqw; }
.preset-btn .lbl { display: block; font-size: 1.25cqw; font-weight: 900; letter-spacing: .06em; }

.sliders {
  display: grid;
  gap: .9cqw;
  max-width: 52cqw;
  margin: 0 auto 1.4cqw;
  text-align: left;
}
.slider-row label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1cqw;
  font-size: 1.25cqw;
  font-weight: 700;
  margin-bottom: .25cqw;
}
.slider-row label span.val {
  color: var(--brand-2);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 4cqw;
  text-align: right;
}
.slider-row input[type=range] {
  width: 100%;
  accent-color: var(--brand);
  height: .5cqw;
  cursor: pointer;
}
.slider-row .hint {
  margin: .15cqw 0 0;
  font-size: 1.05cqw;
  opacity: .55;
  font-weight: 500;
}
.settings-actions {
  display: flex;
  justify-content: center;
  gap: 1cqw;
  flex-wrap: wrap;
}
.btn-ghost {
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.btn-ghost:hover { filter: brightness(1.15); }
.foot-btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.diff-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 122, 0, .35);
  color: var(--brand-2);
}
.debug-badge {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(94, 234, 212, .45);
  color: #5eead4;
}

/* ---------- Footer ---------- */
.page-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  opacity: .8;
  font-weight: 500;
}
.foot-sep { opacity: .5; }
.foot-link {
  color: var(--brand-2);
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .04em;
}
.foot-link:hover { text-decoration: underline; }
body:not(.debug-mode) .admin-only { display: none !important; }
.mute {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  border-radius: 8px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 14px;
}

@media (max-width: 720px) {
  .panel-over { grid-template-columns: 1fr; grid-template-areas: "left" "right" "foot"; }
  .over-right { display: none; }
  .legend { flex-direction: column; gap: .4cqw; }
  .preset-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Mobile landscape ---------- */
.rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(900px 500px at 50% 20%, #26305e 0%, #101426 62%, #090b16 100%);
  color: var(--paper);
  text-align: center;
}
body.portrait-phone .rotate-hint {
  display: flex;
}
body.portrait-phone .stage {
  visibility: hidden;
  pointer-events: none;
}

.rotate-card {
  max-width: 320px;
}
.rotate-card p {
  margin: 22px 0 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
}
.rotate-card strong { color: var(--brand-2); }
.rotate-card span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  opacity: .72;
  line-height: 1.4;
}

.rotate-phone {
  width: 52px;
  height: 90px;
  margin: 0 auto;
  border: 3px solid #fff;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 0 24px rgba(255, 183, 3, .25);
  animation: tiltPhone 1.8s ease-in-out infinite;
}
.rotate-phone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 18px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .55);
  transform: translateX(-50%);
}
.rotate-phone::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateX(-50%);
}
@keyframes tiltPhone {
  0%, 18% { transform: rotate(0deg); }
  42%, 72% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

body.mobile-layout {
  --pad-w: clamp(64px, 12vw, 92px);
}
body.mobile-layout .stage {
  gap: 0;
  padding: 6px;
  padding-left: max(6px, env(safe-area-inset-left));
  padding-right: max(6px, env(safe-area-inset-right));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
body.mobile-layout .playfield {
  flex: 1;
  width: 100%;
  gap: 8px;
}
body.mobile-layout .mobile-arrow {
  display: flex;
  flex: 0 0 var(--pad-w);
  width: var(--pad-w);
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 154, 46, .28), rgba(255, 122, 0, .18));
  box-shadow:
    inset 0 0 0 2px rgba(255, 183, 3, .35),
    0 10px 28px rgba(0, 0, 0, .35);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease, filter .12s ease;
}
body.mobile-layout .mobile-arrow:focus { outline: none; }
body.mobile-layout .mobile-arrow svg {
  width: min(54px, 62%);
  height: min(54px, 62%);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35));
}
body.mobile-layout .mobile-arrow:active,
body.mobile-layout .mobile-arrow.is-held {
  transform: scale(.96);
  background: linear-gradient(180deg, #ff9a2e, var(--brand));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .28),
    0 0 22px rgba(255, 122, 0, .55);
  filter: brightness(1.08);
}
body.mobile-layout .game-wrap {
  flex: 0 1 auto;
  width: auto;
  height: min(
    calc(100dvh - 14px),
    calc((100vw - 20px - 2 * var(--pad-w) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) * 2 / 3)
  );
  max-width: calc(100vw - 20px - 2 * var(--pad-w) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  max-height: calc(100dvh - 14px);
  aspect-ratio: 3 / 2;
  border-radius: 14px;
}
body.mobile-layout .page-footer {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: auto;
  bottom: auto;
  z-index: 6;
  gap: 0;
}
body.mobile-layout .page-footer > :not(.mute) { display: none; }
body.mobile-layout .cta-sub--desk,
body.mobile-layout .hint--desk { display: none; }
body.mobile-layout .cta-sub--touch,
body.mobile-layout .hint--touch { display: block; }
body.mobile-layout .legend--start,
body.mobile-layout .slogan--start { display: none; }
body.mobile-layout .title--start { font-size: 4.2cqw; }
body.mobile-layout .brand-tag { font-size: 1.15cqw; gap: .7cqw; }
body.mobile-layout .brand-logo--start { height: 2.2cqw; }
body.mobile-layout .cta--start { padding: .55cqw 1.5cqw; }
body.mobile-layout .cta--start .cta-main { font-size: 2.5cqw; }
body.mobile-layout .cta-sub { font-size: 1.25cqw; }
body.mobile-layout .btn { padding: .85cqw 2.2cqw; font-size: 1.7cqw; }
body.mobile-layout .hint { font-size: 1.1cqw; margin-top: .4cqw; }
body.mobile-layout .board-title--start { font-size: 1.55cqw; margin-bottom: .5cqw; }
body.mobile-layout .board--start { font-size: 1.15cqw; }
body.mobile-layout .panel-start { padding: 1cqw 1.3cqw 1.1cqw; }
body.mobile-layout .start-layout { gap: .8cqw 1.6cqw; align-items: center; }
body.mobile-layout .overlay { overflow: hidden; }
body.mobile-layout #name-input { font-size: max(16px, 1.9cqw); }
body.mobile-layout .mute {
  background: rgba(10, 12, 30, .62);
  backdrop-filter: blur(8px);
}
body.mobile-layout .over-title { font-size: 4.4cqw; }
body.mobile-layout .final-score { font-size: 4cqw; }