/* Stare Down — versus-screen look.
   Palette is taken from the eye: sclera white, iris teal, lid coral, over deep indigo. */
:root {
  --night: #1d1553;
  --night-2: #150f42;
  --panel: #2b2184;
  --panel-2: #372ba3;
  --ink: #0b0730;
  --sclera: #f2f5ff;
  --lav: #b4aef0;
  --sun: #ffc531;
  --sun-d: #b97f00;
  --iris: #22d3c5;
  --lid: #ff5470;
  --bronze: #ff8a3d;

  --display: 'Bowlby One', 'Arial Black', Impact, sans-serif;
  --body: 'Chakra Petch', system-ui, sans-serif;
  --radius: 12px;
  --edge: 3px solid var(--ink);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
html { -webkit-tap-highlight-color: transparent; }
html.native body { user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
html.native input { user-select: text; -webkit-user-select: text; }
body {
  background: var(--night);
  color: var(--sclera);
  font: 500 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The sunburst sits on its own fixed layer, painted once and moved by the compositor. (background-attachment:
   fixed made phones repaint the whole screen on every scroll.) lvh covers the screen when the address bar hides. */
body::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(112, 96, 255, 0.28), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 30%, rgba(255, 255, 255, 0.04) 0 6deg, transparent 6deg 12deg);
  transform: translateZ(0);
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.05; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; }
b { font-weight: 700; color: var(--sclera); }
.muted { color: var(--lav); }
.small { font-size: 0.85rem; }
.eyebrow { margin: 0 0 6px; font-weight: 700; font-size: 0.9rem; color: var(--sun); }
.error { color: var(--lid); font-weight: 700; margin: 12px 0 0; }
a { color: var(--sun); }

/* screens */
.screen { display: none; min-height: 100vh; min-height: 100dvh; }   /* dvh: the height left under a phone's address bar */
.screen.active { display: block; }
.offscreen { position: fixed; left: -9999px; top: 0; width: 2px; height: 2px; opacity: 0; }

/* ------------------------------------------------ wordmark */
.wordmark {
  font-family: var(--display); font-weight: 400; line-height: 0.88; color: var(--sclera);
  text-transform: uppercase; paint-order: stroke fill;
  -webkit-text-stroke: 0.14em var(--ink);
  text-shadow: 0 0.07em 0 var(--ink);
}
.wordmark span { margin-left: 0.28em; }
.wordmark.small { font-size: 1.35rem; white-space: nowrap; -webkit-text-stroke-width: 6px; }

.wordmark:not(.small) {
  font-size: clamp(3rem, 15vw, 7rem); display: grid; justify-items: center;
  transform: rotate(-3deg); margin: 0 0 8px;
}
.wordmark:not(.small) .wm-line { margin: 0; display: block; white-space: nowrap; }
.wm-eye {
  display: inline-block; width: 1.05em; height: 0.74em; margin: 0 0.04em; vertical-align: -0.02em; overflow: visible;
  -webkit-text-stroke: 0; filter: drop-shadow(0 0.07em 0 var(--ink));
}
.eye-look { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform 0.09s ease-out; }
.eye-lid { transform-box: fill-box; transform-origin: top; transform: scaleY(0); transition: transform 0.06s ease-in; }
.wm-eye.blink .eye-lid { transform: scaleY(1); }

/* ------------------------------------------------ buttons & fields */
.btn {
  appearance: none; border: var(--edge); background: var(--panel-2); color: var(--sclera);
  font: 700 0.95rem/1 var(--body); padding: 13px 20px; border-radius: 14px; cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), 0 4px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn:hover { background: #4638c4; }
.btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 1px 0 var(--ink); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--sun); color: var(--ink); box-shadow: inset 0 -4px 0 var(--sun-d), 0 5px 0 var(--ink); }
.btn.primary:hover { background: #ffd35e; }
.btn.primary:active { box-shadow: inset 0 -2px 0 var(--sun-d), 0 1px 0 var(--ink); }
.btn.ghost { background: rgba(11, 7, 48, 0.4); box-shadow: 0 4px 0 var(--ink); }
.btn.ghost:hover { background: rgba(11, 7, 48, 0.65); }
.btn.danger { background: var(--lid); color: var(--ink); box-shadow: inset 0 -4px 0 #b22848, 0 4px 0 var(--ink); }
.btn.danger:hover { background: #ff7088; }
.btn.wide { width: 100%; }
.btn.big { padding: 22px 24px; font: 400 clamp(1.3rem, 4vw, 1.7rem)/1 var(--display); border-radius: 18px; }
.btn:focus-visible, .tab:focus-visible, .auth-tab:focus-visible, a:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; }

.field { display: grid; gap: 6px; margin: 0 0 16px; }
.field > span { font-size: 0.9rem; font-weight: 600; color: var(--lav); }
textarea, input:not([type=checkbox]):not([type=range]):not([type=radio]), select {
  width: 100%; background: var(--night-2); border: var(--edge); color: var(--sclera);
  border-radius: 10px; padding: 11px 14px; font: 500 1rem var(--body);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3);
}
textarea { resize: vertical; min-height: 4.5em; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--iris); outline-offset: 1px; }
input:disabled { opacity: 0.6; }
.inline { display: flex; gap: 8px; }
.toggle { display: flex; gap: 10px; align-items: center; cursor: pointer; margin-top: 6px; }
.toggle input { accent-color: var(--iris); width: 20px; height: 20px; flex: none; }
.report { text-align: left; }
.report p { margin: 0 0 12px; }
.report .result-actions { justify-content: flex-start; margin-top: 20px; }
.reasons { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.reasons legend { font-weight: 600; font-size: 0.9rem; padding: 0; margin-bottom: 10px; }
.reasons .toggle { margin: 0; }
.foot-actions { display: flex; gap: 10px; }
.block-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.block-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.block-list .btn { margin: 0; padding: 8px 14px; }
.result.practice #btn-report-result { display: none; }
.result-body .link-btn { display: block; margin: 12px auto 0; }
.detection-text { width: 100%; margin-top: 10px; font: 500 0.72rem/1.3 var(--body); min-height: 6em; }
.field i { font-style: normal; font-size: 0.8rem; }

/* ------------------------------------------------ gate (title screen) */
.gate { max-width: 560px; margin: 0 auto; padding: calc(7vh + env(safe-area-inset-top)) 16px calc(60px + env(safe-area-inset-bottom)); text-align: center; }
.lede { font-weight: 600; font-size: 1.2rem; color: var(--lav); margin: 26px auto 22px; max-width: 24ch; }
.gate-practice { display: grid; justify-items: center; gap: 8px; margin: 0 0 30px; }
.gate-practice .btn { padding: 14px 34px; font-size: 1.05rem; }
.gate-practice p { margin: 0; }
.gate-practice .link-btn { margin: 2px 0 0; }
.gate-card { text-align: left; background: var(--panel); border: var(--edge); border-radius: var(--radius); padding: 24px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12), 0 7px 0 var(--ink); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.auth-tab {
  appearance: none; background: var(--night-2); border: var(--edge); color: var(--lav); font: 700 0.95rem var(--body);
  padding: 11px; border-radius: 12px; cursor: pointer;
}
.auth-tab.active { background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 var(--ink); transform: translateY(-2px); }
.rules { list-style: none; padding: 0; margin: 4px 0 24px; display: grid; gap: 12px; color: var(--lav); font-size: 0.95rem; }
.rules li { padding-left: 26px; position: relative; }
.rules li::before { content: ''; position: absolute; left: 0; top: 0.25em; width: 16px; height: 11px; background: var(--iris); border: 2px solid var(--ink); border-radius: 50% / 100%; }
.signup-only .toggle { margin: 0 0 18px; }
.signup-only .rules { margin-top: 0; }
.legal { display: flex; justify-content: center; gap: 22px; margin: 18px 0 0; font-size: 0.85rem; }
.legal-links { display: flex; gap: 14px; }
.account-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
#delete-form { text-align: left; }
#delete-form .result-actions { justify-content: flex-start; }

/* ------------------------------------------------ lobby */
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px;
  padding: calc(12px + env(safe-area-inset-top)) 28px 12px; background: rgba(11, 7, 48, 0.92); border-bottom: var(--edge);
}
.tabs { display: flex; gap: 8px; flex: 1; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 6px; }
.tab {
  appearance: none; background: transparent; border: 3px solid transparent; color: var(--lav);
  font: 700 0.95rem var(--body); padding: 8px 16px; border-radius: 12px; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--sclera); }
.tab-icon { display: none; }
.topbar-tools { display: contents; }
.play-presence { display: none; }   /* phones: who's online, shown by Find an opponent (the top bar has it elsewhere) */
.tab.active { background: var(--sun); color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 #000; }
.presence { font-size: 0.9rem; font-weight: 600; color: var(--lav); white-space: nowrap; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--iris); border: 2px solid var(--ink); margin-right: 8px; }

.lobby { max-width: 1180px; margin: 0 auto; padding: 32px 28px calc(80px + env(safe-area-inset-bottom)); }
.panel { display: none; }
.panel.active { display: block; }

.card {
  background: var(--panel); border: var(--edge); border-radius: var(--radius); padding: 22px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12), 0 6px 0 var(--ink);
}
.card.danger { background: #4a1f5e; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head { margin-bottom: 22px; }

.play-grid { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-areas: 'profile mirror' 'profile cta' 'profile friend'; gap: 26px 24px; }
.profile { grid-area: profile; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-content: start; }
.mirror { grid-area: mirror; }
.cta { grid-area: cta; display: grid; gap: 14px; align-content: start; background: var(--panel-2); }
.cta p { margin: 0; }
.friend { grid-area: friend; display: grid; gap: 14px; align-content: start; }
.friend p { margin: 0; }
.friend-actions { display: grid; gap: 12px; }
.friend-actions[hidden] { display: none; }
#join-form input { text-transform: uppercase; letter-spacing: 0.1em; }
.invite-code {
  font: 400 clamp(2.2rem, 8vw, 3rem)/1 var(--display); letter-spacing: 0.22em; text-align: center; color: var(--sun);
  background: var(--ink); border: var(--edge); border-radius: 12px; padding: 14px 8px 14px 20px; user-select: all;
}

.crest svg { width: 128px; height: 128px; display: block; filter: drop-shadow(0 5px 0 var(--ink)); }
.tier-pill {
  display: inline-block; padding: 3px 14px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--tier, var(--lav)); color: var(--ink); font-weight: 700; font-size: 0.9rem; margin-bottom: 8px;
}
.profile-main h2 { font-size: 2.3rem; word-break: break-word; }
.rating-line { display: flex; align-items: baseline; gap: 14px; margin: 10px 0 12px; flex-wrap: wrap; }
.rating { font: 700 2.4rem/1 var(--body); color: var(--sun); font-variant-numeric: tabular-nums; }
.tier-progress {
  height: 18px; background: var(--night-2); border: var(--edge); border-radius: 999px; overflow: hidden;
}
.tier-progress div {
  height: 100%; width: 0; transition: width 0.6s; background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.28) 0 6px, transparent 6px 12px), var(--iris);
}
.profile-main .small { margin: 8px 0 0; }

.stat-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 4px 0 0; background: var(--ink); border: var(--edge); border-radius: 10px; overflow: hidden; }
.stat-row div { background: var(--night-2); padding: 12px 10px; }
.stat-row dt { font-size: 0.85rem; font-weight: 600; color: var(--lav); }
.stat-row dd { margin: 2px 0 0; font: 700 1.5rem var(--body); font-variant-numeric: tabular-nums; }
.recent { grid-column: 1 / -1; }
.recent h4 { font-size: 1rem; color: var(--lav); margin: 6px 0 8px; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: grid; grid-template-columns: 70px 1fr auto 52px; gap: 12px; align-items: center; padding: 10px 0; border-top: 2px solid var(--ink); }
.recent li.muted { display: block; }
.recent .chip { text-align: center; }
.recent .recent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.recent .delta { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* eye strips: a camera frame with corner brackets */
.strip { position: relative; aspect-ratio: 16 / 5; background: #05031a; border-radius: 10px; overflow: hidden; border: 4px solid var(--ink); }
.strip canvas, .strip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.strip.self canvas { transform: scaleX(-1); }
.strip::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 50px rgba(5, 3, 26, 0.8); }
.strip::before {
  content: ''; position: absolute; inset: 8px; z-index: 3; pointer-events: none; opacity: 0.9;
  background:
    linear-gradient(var(--iris), var(--iris)) 0 0 / 20px 3px,   linear-gradient(var(--iris), var(--iris)) 0 0 / 3px 20px,
    linear-gradient(var(--iris), var(--iris)) 100% 0 / 20px 3px, linear-gradient(var(--iris), var(--iris)) 100% 0 / 3px 20px,
    linear-gradient(var(--iris), var(--iris)) 0 100% / 20px 3px, linear-gradient(var(--iris), var(--iris)) 0 100% / 3px 20px,
    linear-gradient(var(--iris), var(--iris)) 100% 100% / 20px 3px, linear-gradient(var(--iris), var(--iris)) 100% 100% / 3px 20px;
  background-repeat: no-repeat;
}

.cam-off { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--lav); font-weight: 600; font-size: 0.9rem; z-index: 1; }
.cam-off svg { width: 38px; height: 38px; }
.mirror .btn { margin-top: 16px; }
.meter-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.meter-row > .small:last-child { min-width: 86px; text-align: right; }
.lid-meter { position: relative; flex: 1; height: 14px; background: var(--night-2); border: var(--edge); border-radius: 999px; }
.lid-fill { height: 100%; width: 0; background: var(--iris); border-radius: 999px; transition: width 0.06s linear, background 0.1s; }
.lid-fill.hot { background: var(--lid); }
.lid-mark { position: absolute; top: -7px; bottom: -7px; width: 4px; margin-left: -2px; background: var(--sun); border: 1px solid var(--ink); border-radius: 2px; left: 50%; }

/* tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table th { text-align: left; font-weight: 700; font-size: 0.9rem; color: var(--lav); padding: 10px 12px; border-bottom: 3px solid var(--ink); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 2px solid rgba(11, 7, 48, 0.55); }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.table tr.me td { background: rgba(34, 211, 197, 0.16); }
.table .pos { font-weight: 700; color: var(--lav); width: 52px; }
.table tbody tr:nth-child(-n+3) .pos {
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 8px 12px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; color: var(--ink);
}
.table tbody tr:nth-child(1) .pos { background: var(--sun); }
.table tbody tr:nth-child(2) .pos { background: var(--sclera); }
.table tbody tr:nth-child(3) .pos { background: var(--bronze); }
.chip { display: inline-block; font-weight: 700; font-size: 0.85rem; padding: 2px 12px; border-radius: 999px; border: 2px solid var(--ink); background: var(--night-2); color: var(--lav); }
.chip.win { background: var(--sun); color: var(--ink); }
.chip.loss { background: var(--lid); color: var(--ink); }
.delta.up { color: var(--sun); }
.delta.down { color: var(--lid); }
.empty { text-align: center; padding: 30px 0 10px; }

.tier-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 22px; }
.tier-strip div { padding: 10px 10px 8px; border: var(--edge); border-top-width: 8px; border-radius: 10px; background: var(--night-2); }
.tier-strip div:nth-child(1) { border-top-color: #b4aef0; }
.tier-strip div:nth-child(2) { border-top-color: #5db4f5; }
.tier-strip div:nth-child(3) { border-top-color: #22d3c5; }
.tier-strip div:nth-child(4) { border-top-color: #6fe27f; }
.tier-strip div:nth-child(5) { border-top-color: #ffc531; }
.tier-strip div:nth-child(6) { border-top-color: #ff8a3d; }
.tier-strip div:nth-child(7) { border-top-color: #ff5470; }
.tier-strip div.current { background: var(--panel-2); outline: 3px solid var(--sun); outline-offset: 2px; }
.tier-strip b { display: block; font: 400 1rem var(--display); }
.tier-strip span { font-weight: 600; font-size: 0.85rem; color: var(--lav); font-variant-numeric: tabular-nums; }

/* achievements */
.ach-group { margin-bottom: 32px; }
.ach-group h4 { font-size: 1.15rem; color: var(--sun); margin: 0 0 14px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ach { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--radius); border: var(--edge); background: var(--panel); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.1), 0 4px 0 var(--ink); }
.ach.locked { background: var(--night-2); box-shadow: 0 4px 0 var(--ink); }
.ach.locked > div:last-child { opacity: 0.85; }
.ach-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: var(--edge); background: var(--lav); }
.ach-icon svg { width: 26px; height: 26px; }
.ach.rare .ach-icon { background: var(--iris); }
.ach.legendary .ach-icon { background: var(--sun); }
.ach.locked .ach-icon { background: #4b4390; }
.ach.locked .ach-icon svg { opacity: 0.6; }
.ach b { display: block; font: 400 1.05rem/1.15 var(--display); margin-top: 2px; }
.ach p { margin: 4px 0 0; font-size: 0.9rem; color: var(--lav); }
.ach .when { font-weight: 700; font-size: 0.85rem; color: var(--iris); margin-top: 6px; }
.rarity { font-size: 0.8rem; font-weight: 700; color: var(--lav); text-transform: capitalize; }
.ach.rare .rarity { color: var(--iris); }
.ach.legendary .rarity { color: var(--sun); }

.record-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 22px; }
.record-stats div { padding: 12px 14px; background: var(--night-2); border: var(--edge); border-radius: 10px; }
.record-stats dt { font-size: 0.85rem; font-weight: 600; color: var(--lav); }
.record-stats dd { margin: 2px 0 0; font: 700 1.4rem var(--body); font-variant-numeric: tabular-nums; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px 24px; }
.settings-grid h3 { margin-bottom: 16px; }
.settings-grid .btn { margin-top: 14px; }
.settings-grid .inline .btn { margin-top: 0; }

/* ------------------------------------------------ match: versus screen */
.match { max-width: 1240px; margin: 0 auto; padding: calc(24px + env(safe-area-inset-top)) 28px calc(36px + env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.match-head {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: 'you clock opp'; align-items: center; gap: 12px; margin-bottom: 28px;
}
.plate { min-width: 0; border: var(--edge); box-shadow: 0 5px 0 var(--ink); border-radius: 8px; color: var(--ink); }
.plate.you { grid-area: you; background: var(--iris); transform: skewX(-9deg); margin-right: -4px; }
.plate.opp { grid-area: opp; background: var(--lid); transform: skewX(9deg); margin-left: -4px; text-align: right; }
.plate-in { padding: 10px 22px 12px; min-width: 0; }
.plate.you .plate-in { transform: skewX(9deg); }
.plate.opp .plate-in { transform: skewX(-9deg); }
.plate h2 { font-size: clamp(1.2rem, 3.6vw, 2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate-meta { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.plate.opp .plate-meta { justify-content: flex-end; }
.plate-tier { background: var(--ink); color: var(--sclera); font-weight: 700; font-size: 0.85rem; padding: 1px 12px; border-radius: 999px; }
.plate .rating { font-size: 1.4rem; color: var(--ink); }
.plate-record { display: block; font-weight: 600; font-size: 0.85rem; margin-top: 2px; }
.plate.you .plate-record { display: none; }

.clock {
  grid-area: clock; font: 700 clamp(2.4rem, 7vw, 4.4rem)/1 var(--body); text-align: center; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  background: var(--ink); border: 3px solid var(--sclera); border-radius: 16px; padding: 8px 20px 10px; min-width: 5.6em;
}
.clock.live { color: var(--sun); border-color: var(--sun); }
.clock.small { font-size: 1.6rem; min-width: 0; display: block; width: fit-content; margin: 10px auto 20px; padding: 4px 16px 6px; }

.stage { position: relative; }
.strip.opponent { border-radius: 8px; box-shadow: 0 10px 0 var(--ink); }
.strip.opponent.lost { border-color: var(--lid); box-shadow: 0 10px 0 var(--ink), 0 0 0 4px var(--lid); }
.strip.opponent.practice video { transform: scaleX(-1); }   /* your own eyes, as in a mirror */
.result.practice #btn-next, .result.practice .result-rating, .result.unranked .result-rating { display: none; }
.strip.opponent.won { border-color: var(--sun); box-shadow: 0 10px 0 var(--ink), 0 0 0 4px var(--sun); }
.strip-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(21, 15, 66, 0.62); transition: opacity 0.3s; z-index: 2; }
.strip-overlay.hidden { opacity: 0; pointer-events: none; }
.overlay-text { font: 400 clamp(1.4rem, 4.4vw, 2.6rem)/1.1 var(--display); margin: 0; text-align: center; padding: 0 16px; paint-order: stroke fill; -webkit-text-stroke: 8px var(--ink); }
.overlay-text.prompt { color: var(--sun); }
.overlay-text.count { font-size: clamp(5rem, 18vw, 10rem); color: var(--sun); -webkit-text-stroke-width: 14px; animation: count 1s ease-out; }
@keyframes count { from { transform: scale(1.5); opacity: 0; } 30% { opacity: 1; } }

.status {
  text-align: center; margin: 30px auto 0; padding: 6px 22px 8px; font-weight: 700; font-size: 1.15rem; color: var(--lav);
  background: rgba(11, 7, 48, 0.55); border-radius: 999px; min-height: 2.2em; width: fit-content; max-width: 100%;
}
.status.warn { background: var(--lid); color: var(--ink); }

.match-foot { margin-top: auto; padding-top: 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.self-wrap { width: min(340px, 60vw); }
.strip.self.small { border-radius: 8px; box-shadow: 0 5px 0 var(--ink); }

/* ------------------------------------------------ modals */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(11, 7, 48, 0.82); padding: 16px; overflow-y: auto; }
.modal-card {
  width: min(460px, 100%); background: var(--panel); border: var(--edge); border-radius: 16px; padding: 28px; text-align: center;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12), 0 8px 0 var(--ink);
}
.modal-card h3 { margin-bottom: 8px; }

.scanner { width: 160px; height: 54px; margin: 0 auto 22px; position: relative; border: var(--edge); border-radius: 50%; overflow: hidden; background: var(--sclera); }
.scanner::before { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: var(--iris); border: 6px solid var(--ink); animation: look 3s ease-in-out infinite; }
.scanner span { position: absolute; inset: 0; background: var(--lid); transform-origin: top; animation: lid 3s infinite; transform: scaleY(0); }
@keyframes look { 0%, 100% { transform: translateX(-34px); } 50% { transform: translateX(34px); } }
@keyframes lid { 0%, 46%, 54%, 100% { transform: scaleY(0); } 50% { transform: scaleY(1); } }

/* result: a banner slammed on top of the card */
.result { padding: 0; overflow: hidden; width: min(500px, 100%); }
.result-banner {
  padding: 26px 24px 22px; color: var(--ink); border-bottom: var(--edge); background:
    repeating-conic-gradient(from 0deg at 50% 120%, rgba(255, 255, 255, 0.22) 0 8deg, transparent 8deg 16deg), var(--lav);
}
.result.win .result-banner { background-color: var(--sun); }
.result.loss .result-banner { background-color: var(--lid); }
.result-reason { margin: 0 0 6px; font-weight: 700; font-size: 1rem; }
.result .result-title { font-size: clamp(2.4rem, 9vw, 3.6rem); animation: slam 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes slam { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
.result-time { font: 700 1.1rem var(--body); margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.result-body { padding: 24px 24px 28px; }
.result-rating { display: flex; justify-content: center; align-items: baseline; gap: 12px; font: 700 1.8rem var(--body); font-variant-numeric: tabular-nums; }
.result-rating .arrow { color: var(--lav); font-size: 1.2rem; }
.result-rating .delta { font-size: 1.1rem; padding: 2px 12px; border-radius: 999px; background: var(--night-2); border: 2px solid var(--ink); }
.result-unlocks { display: grid; gap: 10px; margin: 20px 0 0; }
.result-unlocks .ach { text-align: left; animation: pop 0.4s both; }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
#rematch-note { margin: 14px 0 0; min-height: 1.2em; }
#update-modal { z-index: 70; }
#update-modal .btn { margin-top: 18px; }

/* how to play */
.guide-open { padding: 8px 16px; white-space: nowrap; }
.sound-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; white-space: nowrap; }
.sound-btn svg { width: 20px; height: 20px; flex: none; color: var(--lav); transition: color 0.1s; }
.sound-btn .slash { display: none; }
.sound-btn[aria-pressed=false] .waves { display: none; }
.sound-btn[aria-pressed=false] .slash { display: inline; }
.sound-btn.sounding svg { color: var(--sun); }   /* lit while a sound is playing */
.guide { padding: 24px 28px 22px; }
.guide-art { display: grid; place-items: center; height: 150px; margin: 0 0 14px; background: var(--night-2); border: var(--edge); border-radius: 12px; }
.guide-art svg { width: 190px; height: 118px; }
.guide h3 { font-size: 1.5rem; margin-bottom: 8px; }
.guide p { margin: 0 auto; max-width: 36ch; color: var(--lav); }
.guide-dots { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
.guide-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--night-2); border: 2px solid var(--ink); }
.guide-dots i.on { background: var(--sun); }
.guide .result-actions { margin-top: 18px; }
.guide-skip, .link-btn { appearance: none; background: none; border: 0; margin: 14px 0 0; color: var(--lav); font: 600 0.9rem var(--body); text-decoration: underline; cursor: pointer; }
.guide-skip:hover, .link-btn:hover { color: var(--sclera); }
.guide-skip:focus-visible, .link-btn:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; }

/* toasts */
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: grid; gap: 10px; width: min(340px, calc(100vw - 32px)); }
.toast { background: var(--panel-2); border: var(--edge); border-left: 10px solid var(--iris); border-radius: 10px; padding: 10px 16px; box-shadow: 0 4px 0 var(--ink); animation: slide 0.25s ease-out; }
.toast.error { border-left-color: var(--lid); }
.toast b { display: block; font: 400 1.05rem var(--display); }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }

/* ------------------------------------------------ responsive */
@media (max-width: 900px) {
  .play-grid { grid-template-columns: 1fr; grid-template-areas: 'profile' 'mirror' 'cta' 'friend'; }
  .tier-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; padding: calc(10px + env(safe-area-inset-top)) 16px 4px; gap: 4px 12px; }
  .tabs { order: 3; flex-basis: 100%; }
  .btn { min-height: 44px; }
  .lobby, .match { padding-left: 16px; padding-right: 16px; }
  .profile { grid-template-columns: 1fr; }
  .crest svg { width: 96px; height: 96px; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .recent li { grid-template-columns: 64px 1fr 52px; }
  .recent li > .muted.small { display: none; }
  .match-head { grid-template-columns: 1fr 1fr; grid-template-areas: 'clock clock' 'you opp'; gap: 16px 12px; margin-bottom: 20px; }
  .plate-in { padding: 8px 14px 10px; }
  .plate-meta { gap: 8px; }
  .plate-record { display: none; }
  .stage { margin: 0 -16px; }
  .strip.opponent { border-radius: 0; border-left: 0; border-right: 0; aspect-ratio: 16 / 7; }
  .self-wrap { width: 55%; }
  .tier-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .scanner::before, .scanner span, .result .result-title, .overlay-text.count, .result-unlocks .ach, .toast { animation: none; }
  .eye-look, .tier-progress div { transition: none; }
}

/* Narrow phones: the match footer's buttons wrap beside your strip, and Sound shows just its icon, so
   nothing is wider than the screen (a too-wide row makes phone browsers zoom the whole page out). */
@media (max-width: 420px) {
  .self-wrap { width: 46%; }
  .foot-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 52%; }
  .sound-btn .sound-label { display: none; }
  .foot-actions .btn { padding: 10px 12px; }
  .plate-tier { font-size: 0.7rem; padding: 1px 8px; }
  .plate .rating { font-size: 1.05rem; }
}

/* Short portrait phones (iPhone SE and similar): tighten the vertical spacing so the stare fits without scrolling. */
@media (orientation: portrait) and (max-height: 640px) {
  .match { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .match-head { margin-bottom: 12px; gap: 10px; }
  .clock { font-size: 2rem; padding: 4px 14px 6px; }
  .plate h2 { font-size: 1.05rem; }
  .status { margin-top: 12px; }
  .match-foot { padding-top: 12px; }
}

/* Phones held sideways: the main way to play. Their eyes take every pixel of height that's left; the plates and
   clock sit over the strip's top edge like a fighting game's status bars; your strip, the status and the buttons
   share one bottom row. */
@media (orientation: landscape) and (max-height: 500px) {
  .match {
    display: grid; height: 100vh; height: 100dvh; min-height: 0;
    grid-template-columns: auto 1fr auto; grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: 'head head head' 'stage stage stage' 'self . actions';
    column-gap: 14px; row-gap: 10px;
    padding: calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  }
  .match-head {
    grid-area: head; position: relative; z-index: 3; align-items: start;
    grid-template-columns: 1fr auto 1fr; grid-template-areas: 'you clock opp'; gap: 10px;
    margin: 0 10px -30px;   /* overlaps the strip */
  }
  .plate { box-shadow: 0 4px 0 var(--ink); }
  .plate-in { padding: 4px 14px 6px; }
  .plate h2 { font-size: 1.05rem; }
  .plate-meta { margin-top: 2px; gap: 8px; }
  .plate .rating { font-size: 1rem; }
  .plate-tier { font-size: 0.75rem; }
  .plate-record { display: none; }
  .clock { font-size: 1.9rem; min-width: 0; padding: 3px 14px 5px; border-width: 3px; }
  .stage { grid-area: stage; margin: 0; min-height: 0; }
  .strip.opponent { aspect-ratio: auto; height: 100%; border: 4px solid var(--ink); border-radius: 10px; box-shadow: 0 6px 0 var(--ink); }
  .strip.opponent::before { inset: 38px 10px 10px; }   /* corner brackets clear of the status bars */
  /* The status reads as a caption on the strip's bottom edge, with the whole width to itself. */
  .status {
    grid-area: stage; align-self: end; justify-self: center; z-index: 3; margin: 0 0 -14px; max-width: 80%;
    min-height: 0; font-size: 0.95rem; padding: 4px 16px 5px; text-align: center; border-radius: 14px; background: var(--ink);
  }
  .status:empty { visibility: hidden; }
  .match-foot { display: contents; }
  .self-wrap { grid-area: self; width: min(190px, 25vw); align-self: end; }
  .self-wrap .meter-row { margin-top: 6px; }
  .strip.self.small { box-shadow: 0 4px 0 var(--ink); }
  .foot-actions { grid-area: actions; align-self: end; flex-wrap: nowrap; max-width: none; gap: 8px; }
  .foot-actions .btn { padding: 10px 14px; }
  .sound-btn .sound-label { display: none; }
}

/* ---------------------------------------------------------------- phones: upright → "turn sideways" */
.turn-phone { display: none; }
html.phone-upright body { overflow: hidden; }
html.phone-upright .turn-phone {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 24px; text-align: center; background: var(--night);
}
.turn-art { width: 150px; height: 150px; }
.turn-device { transform-box: fill-box; transform-origin: center; animation: turn-device 2.4s ease-in-out infinite; }
@keyframes turn-device { 0%, 20% { transform: none; } 55%, 100% { transform: rotate(-90deg); } }
.turn-title { font: 400 1.6rem/1.1 var(--display); margin: 6px 0 0; }
.turn-phone .muted { margin: 0; max-width: 30ch; }
.turn-phone .turn-go { margin-top: 10px; }
.turn-phone .turn-help:empty { display: none; }
.turn-phone .turn-help { color: var(--sun); }
@media (prefers-reduced-motion: reduce) { .turn-device { animation: none; transform: rotate(-90deg); } }

/* ---------------------------------------------------------------- phones held sideways: every screen
   Short screens: the main action of each screen stays in view without scrolling; longer lists scroll; pop-ups use
   two columns or scroll inside so their buttons are always reachable. (The match screen's rules are above.) */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --rail: calc(94px + env(safe-area-inset-left)); }
  /* title screen: the wordmark and Try practice on the left, signing in on the right */
  .gate {
    max-width: 920px; display: grid; grid-template-columns: 1fr minmax(280px, 1fr); grid-template-areas: 'intro card';
    align-items: center; column-gap: 32px;
    padding: calc(14px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
    min-height: 100dvh;
  }
  /* the left side stays in view while a long sign-up form scrolls beside it */
  .gate-intro { grid-area: intro; position: sticky; top: 0; align-self: start; min-height: calc(100dvh - 28px); display: grid; align-content: center; }
  .gate .wordmark { font-size: clamp(2.2rem, 14dvh, 4.6rem); margin: 0; }
  .lede { font-size: clamp(0.85rem, 4.6dvh, 1rem); margin: 10px auto; }
  .gate-practice .small { font-size: 0.78rem; }
  .gate-practice { margin: 0; }
  .gate-card { grid-area: card; align-self: center; padding: 12px 16px; }
  .gate-card .auth-tab { padding: 7px 6px; font-size: 0.85rem; white-space: nowrap; }
  .gate-card .auth-tabs { margin-bottom: 10px; }
  .gate-card .field { margin-bottom: 8px; gap: 3px; font-size: 0.82rem; }
  .gate-card input:not([type=checkbox]) { padding: 7px 11px; font-size: 0.95rem; }
  #auth-submit { padding: 11px 16px; }
  .gate-card .legal { margin-top: 8px; font-size: 0.8rem; }
  .signup-only .rules { font-size: 0.85rem; gap: 6px; margin-bottom: 12px; }

  /* lobby: a game home screen. The tabs become a rail down the left side (held sideways, width is plentiful and
     height isn't), leaving the whole height for playing. */
  .topbar {
    position: fixed; inset: 0 auto 0 0; z-index: 10; width: var(--rail); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 6px calc(8px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
    border-bottom: 0; border-right: var(--edge);
  }
  .topbar .wordmark.small { display: none; }
  .tabs { order: 0; flex-direction: column; flex: 1; min-height: 0; gap: 4px; padding: 0; overflow: visible; }
  .tab {
    flex: 1 1 0; min-height: 0; max-height: 60px; display: grid; place-items: center; align-content: center; gap: 3px;
    padding: 2px; border-width: 2px; border-radius: 12px; font: 700 0.64rem/1 var(--body); white-space: nowrap;
  }
  .tab-icon { display: block; width: 22px; height: 22px; }
  .topbar-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .guide-open, .topbar .sound-btn { min-height: 0; padding: 7px 0; border-radius: 10px; box-shadow: 0 3px 0 var(--ink); justify-content: center; }
  /* "How to play" shrinks to "?" (the words stay as its accessible name) */
  .guide-open { font-size: 0; }
  .guide-open::before { content: '?'; font: 700 1rem/1 var(--body); }
  .topbar .sound-btn svg { width: 18px; height: 18px; }
  .topbar .sound-btn .sound-label { display: none; }
  /* the online count moves out of the rail to sit by Find an opponent, where it matters and can be read */
  .topbar .presence { display: none; }
  .play-presence { display: flex; align-items: center; justify-content: center; margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--sclera); }
  .play-presence .dot { width: 9px; height: 9px; margin-right: 7px; }
  .lobby {
    max-width: none; margin: 0 0 0 var(--rail);
    padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) 14px;
  }

  .card { padding: 12px 14px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 4px 0 var(--ink); }
  .card h3, .card-head h3 { font-size: 1rem; }
  .card-head { margin-bottom: 8px; }
  .page-head { margin-bottom: 10px; }

  /* Play: who you are in one strip along the top; under it your eyes on the left and the ways to play on the
     right, "Find an opponent" the biggest thing on screen. Your full record is on the Record tab. */
  .panel[data-panel="play"].active { display: grid; min-height: calc(100dvh - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .play-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr auto auto 1fr;
    grid-template-areas: 'profile profile' '. .' 'mirror cta' 'mirror friend' '. .'; gap: 0 16px;
  }
  .profile { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; margin-bottom: 8px; }
  .crest svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 0 var(--ink)); }
  .profile-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
  .tier-pill { flex: none; font-size: 0.72rem; padding: 1px 9px; margin: 0; }
  .profile-main h2 { flex: 0 1 auto; min-width: 0; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rating-line { flex: none; margin: 0; }
  .rating { font-size: 1.15rem; }
  .rating-line .muted, .stat-row, .recent { display: none; }
  .tier-progress { flex: 0 0 72px; height: 10px; border-width: 2px; margin: 0; }
  .profile-main .small { flex: 1; min-width: 0; margin: 0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .mirror { align-self: center; padding: 10px 12px; }
  .mirror .card-head { margin-bottom: 6px; }
  .mirror .card-head .muted { display: none; }   /* "Your eyes" says it; the room goes to the strip and meter */
  .cam-off { gap: 2px; font-size: 0.75rem; }
  .cam-off svg { width: 22px; height: 22px; }
  .mirror .btn { margin-top: 8px; width: 100%; padding: 9px 12px; }
  .meter-row { margin-top: 6px; }

  /* the ways to play stand on the background, not in boxes: one big button, then the quieter ones */
  .play-grid .cta, .play-grid .friend { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  .play-grid .cta { gap: 6px; margin-bottom: 8px; }
  .play-grid .cta > h3, .play-grid .cta > p.muted:not(.small), #practice-hint, .play-grid .friend > h3, .play-grid .friend > p.muted { display: none; }
  .btn.big { padding: 16px 14px; font-size: clamp(1.25rem, 7dvh, 1.7rem); border-radius: 16px; }
  #queue-hint { text-align: center; font-size: 0.75rem; line-height: 1.3; margin: 0 0 4px; }
  .play-grid .cta .btn:not(.big), .play-grid .friend .btn { min-height: 0; padding: 10px 12px; font-size: 0.88rem; }
  #invite-idle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  #join-form { min-width: 0; }
  #join-form input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 0.88rem; }
  #invite-live { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; }
  #invite-live .small { grid-column: 1 / -1; margin: 0; font-size: 0.72rem; line-height: 1.3; }
  #invite-live .small:first-child { display: none; }   /* the long how-it-works line: Share invite says it all */
  .invite-code { font-size: 1.5rem; padding: 4px 6px 4px 12px; }

  /* the other tabs: compact, and they scroll */
  .tier-strip { grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 10px; }
  .tier-strip div { padding: 6px 6px 5px; border-top-width: 6px; }
  .tier-strip b { font-size: 0.8rem; }
  .tier-strip span { font-size: 0.72rem; }
  .table { font-size: 0.85rem; }
  .table td { padding: 7px 8px; }
  .table th { padding: 6px 8px; }
  .ach-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .ach { padding: 10px; gap: 10px; }
  .ach-icon { width: 38px; height: 38px; }
  .ach-group { margin-bottom: 16px; }
  .record-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
  .record-stats div { padding: 7px 10px; }
  .record-stats dd { font-size: 1.05rem; }
  .settings-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
  .settings-grid h3 { margin-bottom: 8px; }
  .settings-grid .field { margin-bottom: 8px; }
  .settings-grid .btn { margin-top: 8px; }

  /* pop-ups: never taller than the screen; wide ones in two columns */
  .modal { padding: 8px; }
  .modal-card { max-height: calc(100dvh - 16px); overflow-y: auto; padding: 16px 18px; }
  .modal-card h3 { font-size: 1.15rem; }
  .result-actions { margin-top: 12px; }

  .result { display: grid; grid-template-columns: 1fr 1fr; width: min(720px, 100%); padding: 0; }
  .result-banner { border-bottom: 0; border-right: var(--edge); display: grid; align-content: center; padding: 16px; }
  .result .result-title { font-size: clamp(1.8rem, 9dvh, 2.6rem); }
  .result-body { padding: 14px 16px; align-self: center; }
  .result-rating { font-size: 1.4rem; }
  .result-unlocks { margin-top: 10px; }

  .guide {
    width: min(680px, 100%); display: grid; grid-template-columns: 200px 1fr; text-align: left; column-gap: 20px;
    grid-template-areas: 'art title' 'art text' 'art dots' 'art actions' 'art skip'; align-items: center;
  }
  .guide-art { grid-area: art; height: 100%; min-height: 150px; margin: 0; }
  .guide h3 { grid-area: title; margin: 0 0 4px; }
  .guide p { grid-area: text; margin: 0; max-width: none; }
  .guide-dots { grid-area: dots; justify-content: flex-start; margin-top: 10px; }
  .guide .result-actions { grid-area: actions; justify-content: flex-start; margin-top: 10px; }
  .guide-skip { grid-area: skip; justify-self: start; margin-top: 6px; }

  .report {
    width: min(720px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start;
    grid-template-areas: 'title title' 'who who' 'reasons details' 'reasons block' 'reasons actions';
  }
  .report h3 { grid-area: title; }
  #report-who { grid-area: who; margin-bottom: 8px; }
  .reasons { grid-area: reasons; margin: 0; gap: 6px; }
  .report .field { grid-area: details; margin-bottom: 8px; }
  .report textarea { min-height: 3.5em; }
  .report > .toggle { grid-area: block; margin: 0; }
  .report .result-actions { grid-area: actions; margin-top: 10px; }

  .scanner { width: 120px; height: 40px; margin-bottom: 10px; }
  .scanner::before { width: 24px; height: 24px; margin: -12px; border-width: 5px; }
  .clock.small { margin: 6px auto 10px; }
}

/* The narrowest phones held sideways: the profile strip drops its tier line so the name and rating keep their room. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  .profile-main .small { display: none; }
  .tier-progress { flex: 1 1 60px; }
}