/* ---------------------------------------------------------------- palette
   Day = bright tropical shallows; night = deep, bioluminescent sea. Not a
   naive inversion of one accent - the whole mood shifts with the water. */
:root {
  --bg: #dff3f6;
  --bg-deep: #bfe8ef;
  --foam: #f4fdff;
  --panel: #ffffff;
  --panel-line: #bfe3ea;
  --ink: #08313d;
  --muted: #4d7d89;
  --muted-soft: #7fa4ad;

  --wave: #0f9bb0;        /* teal: "you", primary water color */
  --wave-deep: #0b7686;
  --wave-soft: #d3f1f5;
  --coral: #ff6f5e;       /* warm accent: primary actions */
  --coral-deep: #e2543f;
  --coral-soft: #ffe1da;
  --sand: #ffc857;        /* room code, highlights */
  --sand-deep: #e0a83a;
  --seaweed: #2ea587;     /* opponent progress */

  --shadow: 0 2px 6px rgb(8 49 61 / .08), 0 10px 26px rgb(8 49 61 / .07);
  --radius: 20px;
  --maxw: 640px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #041824;
    --bg-deep: #020f18;
    --foam: #0c2836;
    --panel: #0a2531;
    --panel-line: #144252;
    --ink: #d9f3f8;
    --muted: #7fb0bd;
    --muted-soft: #4f7885;

    --wave: #35d1e8;
    --wave-deep: #1fa8bd;
    --wave-soft: #0f3742;
    --coral: #ff8a72;
    --coral-deep: #ff6a52;
    --coral-soft: #3a1f1c;
    --sand: #ffd76a;
    --sand-deep: #d9a83e;
    --seaweed: #4fd3ab;

    --shadow: 0 2px 8px rgb(0 0 0 / .35), 0 12px 30px rgb(0 0 0 / .4);
  }
}
:root[data-theme="dark"] {
  --bg: #041824; --bg-deep: #020f18; --foam: #0c2836;
  --panel: #0a2531; --panel-line: #144252; --ink: #d9f3f8;
  --muted: #7fb0bd; --muted-soft: #4f7885;
  --wave: #35d1e8; --wave-deep: #1fa8bd; --wave-soft: #0f3742;
  --coral: #ff8a72; --coral-deep: #ff6a52; --coral-soft: #3a1f1c;
  --sand: #ffd76a; --sand-deep: #d9a83e; --seaweed: #4fd3ab;
  --shadow: 0 2px 8px rgb(0 0 0 / .35), 0 12px 30px rgb(0 0 0 / .4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.7;
  min-height: 100vh;
}

.sea { max-width: var(--maxw); margin: 0 auto; padding: 0 16px 40px; }

h1, h2 { font-family: "M PLUS Rounded 1c", sans-serif; margin: 0 0 .3em; }
h2 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 .7em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---------------------------------------------------------------- pill button (utility) */
.pill-btn {
  font: inherit; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700;
  font-size: .78rem; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px; border: 2px solid var(--sand);
  background: var(--panel); color: var(--sand-deep); cursor: pointer;
}
.pill-btn:hover { background: var(--sand); color: #fff; }
.pill-icon { width: 14px; height: 14px; }
.ranking-corner { position: absolute; top: 8px; right: 4px; }

/* ---------------------------------------------------------------- header */
.site-header { text-align: center; padding: 30px 4px 0; position: relative; }
.site-header h1 {
  font-weight: 900;
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--wave-deep);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.title-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.tagline { color: var(--muted); font-size: .92rem; }
.wave-divider { display: block; width: 100%; height: 20px; margin-top: 14px; }

/* ---------------------------------------------------------------- panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin: 18px 0;
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- fields */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
input[type="text"], input[type="number"] {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 13px 16px;
  border-radius: 999px;
  border: 2px solid var(--panel-line);
  background: var(--foam);
  color: var(--ink);
}
input:focus { outline: none; border-color: var(--wave); box-shadow: 0 0 0 4px var(--wave-soft); }
.code-input {
  text-transform: uppercase; letter-spacing: .35em; text-align: center;
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .split { grid-template-columns: 1fr; } }
.top-hint { margin-top: 14px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  font: inherit; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700;
  padding: 13px 20px; width: 100%;
  border-radius: 999px; border: none;
  background: var(--foam); color: var(--wave-deep);
  cursor: pointer; margin-top: 10px;
  box-shadow: 0 3px 0 var(--panel-line);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--panel-line); }
.btn:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 3px 0 var(--coral-deep); }
.btn-coral:active { box-shadow: 0 1px 0 var(--coral-deep); }
.btn-wave { background: var(--wave); color: #fff; box-shadow: 0 3px 0 var(--wave-deep); }
.btn-wave:active { box-shadow: 0 1px 0 var(--wave-deep); }
.btn-small { width: auto; padding: 8px 18px; font-size: .85rem; }
.btn-hero {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.15rem; padding: 16px 12px 16px 24px;
}
.btn-arrow-circle {
  width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / .28);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.btn-arrow { width: 16px; height: 16px; }
.btn-answer { margin-top: 10px; font-size: 1.15rem; }
.btn-tall { padding: 22px 12px; line-height: 1.4; }
.btn-ghost { background: transparent; color: var(--muted); box-shadow: none; border: 2px solid var(--panel-line); }
.btn-ghost:active { transform: translateY(1px); box-shadow: none; }
.center-text { text-align: center; }

/* ---------------------------------------------------------------- callouts (above button pairs) */
.callout {
  display: inline-block; font-size: .82rem; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; margin: 0 2px 8px;
}
.callout-wave { background: var(--wave-soft); color: var(--wave-deep); }
.callout-coral { background: var(--coral-soft); color: var(--coral-deep); }

/* ---------------------------------------------------------------- choice pills (difficulty / count) */
.choice-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.choice-pill {
  flex: 1; min-width: 90px;
  font: inherit; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700;
  padding: 12px 10px; border-radius: 16px; border: 2.5px solid var(--panel-line);
  background: var(--foam); color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.choice-pill.selected { background: var(--wave); border-color: var(--wave-deep); color: #fff; }
.choice-sub { font-size: .68rem; font-weight: 500; opacity: .85; }

/* ---------------------------------------------------------------- avatars */
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 420px) { .avatar-grid { grid-template-columns: repeat(3, 1fr); } }
.avatar-choice {
  aspect-ratio: 1; border-radius: 16px; border: 3px solid var(--panel-line);
  background: var(--foam); cursor: pointer; padding: 6px;
  display: flex; align-items: center; justify-content: center;
}
.avatar-choice svg, .avatar-choice img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.avatar-choice.selected { border-color: var(--coral); background: var(--coral-soft); }
.upload-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.upload-btn { display: inline-block; width: auto; }

.avatar-badge {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--foam); overflow: hidden; flex: none;
}
.avatar-badge svg, .avatar-badge img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- notices */
.notice { border-radius: 14px; padding: 12px 16px; font-size: .9rem; margin-top: 12px; }
.notice-error { background: var(--coral-soft); border: 2px solid var(--coral); color: var(--coral-deep); }

/* ---------------------------------------------------------------- waiting */
#panel-waiting { text-align: center; }
.room-code-display { margin: 16px 0; }
.room-code {
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900;
  font-size: 2.6rem; letter-spacing: .35em; padding-left: .35em;
  margin: 8px 0; color: var(--sand-deep);
  background: var(--panel); display: inline-block; padding: 10px 26px;
  border-radius: 999px; border: 3px dashed var(--sand);
}

/* ---------------------------------------------------------------- waiting-room slots */
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
@media (max-width: 420px) { .slot-grid { grid-template-columns: repeat(2, 1fr); } }
.slot {
  border-radius: 16px; border: 2.5px dashed var(--panel-line);
  padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 96px; justify-content: center;
}
.slot.filled { border-style: solid; border-color: var(--wave); background: var(--wave-soft); }
.slot .avatar-badge { width: 44px; height: 44px; border: 2px solid var(--panel); }
.slot-name { font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; text-align: center; }
.slot-empty-label { font-size: .72rem; color: var(--muted-soft); }
.host-tag { font-size: .62rem; color: var(--sand-deep); font-weight: 700; }

/* ---------------------------------------------------------------- roster row (during a match) */
.roster-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 20px; }
.roster-chip {
  flex: none; width: 84px; text-align: center; padding: 8px 4px;
  border-radius: 14px; background: var(--foam); border: 2px solid var(--panel-line);
}
.roster-chip.is-you { border-color: var(--coral); background: var(--coral-soft); }
.roster-chip .avatar-badge { width: 34px; height: 34px; margin: 0 auto 4px; }
.roster-chip .roster-name { font-size: .68rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-chip .progress-bar { height: 7px; margin-top: 4px; }
.roster-chip .roster-count { font-size: .62rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-bar { background: var(--panel); border-radius: 999px; overflow: hidden; border: 1px solid var(--panel-line); }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--wave), var(--wave-deep)); transition: width .3s ease; }

/* ---------------------------------------------------------------- problem */
.problem-area { text-align: center; }
.problem-text {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 900;
  margin-bottom: 18px; color: var(--wave-deep); font-variant-numeric: tabular-nums;
}
.answer-input {
  text-align: center; font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.6rem; font-weight: 700; max-width: 220px; margin: 0 auto; display: block;
}
.answer-feedback { min-height: 1.6em; font-weight: 700; margin-top: 8px; }
.answer-feedback.ok { color: var(--wave-deep); }
.answer-feedback.ng { color: var(--coral-deep); }

/* ---------------------------------------------------------------- result / ranking list */
#panel-result, #panel-ranking { text-align: center; }
.result-list { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.result-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 14px; background: var(--foam); border: 2px solid var(--panel-line);
  text-align: left;
}
.result-row.place-1 { border-color: var(--sand); background: var(--sand); background: color-mix(in srgb, var(--sand) 30%, var(--foam)); }
.result-row.place-2 { border-color: var(--muted-soft); }
.result-row.place-3 { border-color: var(--coral); }
.result-row.is-you { outline: 3px solid var(--wave); outline-offset: 1px; }
.result-place {
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900; font-size: 1.1rem;
  width: 1.6em; text-align: center; color: var(--wave-deep); flex: none;
}
.result-row .avatar-badge { width: 36px; height: 36px; flex: none; }
.result-info { flex: 1; min-width: 0; }
.result-name { font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-meta { font-size: .74rem; color: var(--muted); }
.result-time {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.1rem; font-weight: 900; color: var(--wave-deep);
  font-variant-numeric: tabular-nums; flex: none;
}

/* ---------------------------------------------------------------- footer */
.site-footer { text-align: center; padding: 10px 8px 0; }
.disclaimer { color: var(--muted-soft); font-size: .76rem; margin: 0; }

/* ---------------------------------------------------------------- desktop
   Below phone/tablet widths this is a single scrolling column - the same
   layout the mobile bug reports were fixed against, so it stays untouched.
   From here up the page should feel like it's floating in an illustrated
   sea, the way the reference site's page floats in an illustrated town -
   NOT a phone card in a colored box. So: no banner box behind the title,
   just bigger type; and the empty gutters get an actual reef scene instead
   of staying blank. */
@media (min-width: 900px) {
  body {
    padding: 34px 0 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M0 30 Q25 10 50 30 T100 30 V60 H0 Z' fill='%23ffffff' opacity='.16'/%3E%3Cpath d='M0 40 Q25 24 50 40 T100 40 V60 H0 Z' fill='%23ffffff' opacity='.22'/%3E%3C/svg%3E") left bottom / 100px 60px repeat-x fixed,
      linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%) fixed;
  }
  .sea { max-width: 760px; }
  .site-header { padding-top: 10px; }
  .site-header h1 { font-size: 2.6rem; gap: 12px; }
  .tagline { font-size: 1rem; }
  .ranking-corner { top: 14px; right: 10px; }
}

@media (min-width: 1300px) {
  body {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 900'%3E%3Cellipse cx='40' cy='70' rx='55' ry='26' fill='%23ffffff' opacity='.55'/%3E%3Cellipse cx='75' cy='55' rx='38' ry='22' fill='%23ffffff' opacity='.55'/%3E%3Ccircle cx='30' cy='230' r='7' fill='%230f9bb0' opacity='.25'/%3E%3Ccircle cx='60' cy='280' r='4' fill='%230f9bb0' opacity='.3'/%3E%3Ccircle cx='20' cy='320' r='5' fill='%230f9bb0' opacity='.22'/%3E%3Cg transform='translate(10 560) scale(.9)' opacity='.9'%3E%3Cpath d='M60 6 L70 34 L100 34 L76 52 L86 80 L60 62 L34 80 L44 52 L20 34 L50 34 Z' fill='%23ffc857'/%3E%3Ccircle cx='60' cy='42' r='4' fill='%23e0a83a'/%3E%3C/g%3E%3Ccircle cx='34' cy='700' r='6' fill='%230f9bb0' opacity='.4'/%3E%3Ccircle cx='16' cy='724' r='4' fill='%230f9bb0' opacity='.3'/%3E%3C/svg%3E") left top / 160px auto no-repeat fixed,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 900'%3E%3Cellipse cx='110' cy='60' rx='50' ry='24' fill='%23ffffff' opacity='.5'/%3E%3Cellipse cx='75' cy='45' rx='34' ry='20' fill='%23ffffff' opacity='.5'/%3E%3Ccircle cx='130' cy='250' r='6' fill='%23ff6f5e' opacity='.25'/%3E%3Ccircle cx='100' cy='300' r='4' fill='%23ff6f5e' opacity='.3'/%3E%3Ccircle cx='140' cy='340' r='5' fill='%23ff6f5e' opacity='.22'/%3E%3Cg transform='translate(10 560)' opacity='.85'%3E%3Cpath d='M4 60 Q20 20 70 26 Q106 29 116 6 Q112 40 90 52 Q106 56 112 76 Q84 68 62 74 Q26 84 4 60 Z' fill='%230f9bb0'/%3E%3Ccircle cx='40' cy='42' r='4' fill='%2308313d'/%3E%3C/g%3E%3Cg transform='translate(30 760)' opacity='.8'%3E%3Cpath d='M0 20 Q0 2 24 2 Q48 2 48 20 Q48 28 24 28 Q0 28 0 20 Z' fill='%23ff8fb3'/%3E%3Cpath d='M6 28 Q4 40 6 50 M17 28 Q16 40 17 52 M28 28 Q27 40 28 50 M38 28 Q40 39 38 48' stroke='%23ff8fb3' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") right top / 160px auto no-repeat fixed,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 200'%3E%3Cpath d='M18 200 Q12 150 30 130 Q48 150 26 200' fill='%232ea587' opacity='.85'/%3E%3Cpath d='M48 200 Q40 140 62 112 Q84 140 60 200' fill='%231c7a63' opacity='.8'/%3E%3Cpath d='M8 200 Q34 152 60 170 Q86 152 112 200 Z' fill='%23ff6f5e'/%3E%3Cpath d='M26 200 Q48 170 70 184 Q92 170 112 200 Z' fill='%23ffc857' opacity='.9'/%3E%3Cg transform='translate(118 128) scale(1.6)'%3E%3Cellipse cx='20' cy='22' rx='13' ry='9' fill='%23ff6f5e'/%3E%3Ccircle cx='7' cy='14' r='5' fill='%23ff6f5e'/%3E%3Ccircle cx='33' cy='14' r='5' fill='%23ff6f5e'/%3E%3Ccircle cx='7' cy='14' r='2' fill='%23fff'/%3E%3Ccircle cx='33' cy='14' r='2' fill='%23fff'/%3E%3Ccircle cx='15' cy='20' r='2' fill='%232a1410'/%3E%3Ccircle cx='25' cy='20' r='2' fill='%232a1410'/%3E%3Cpath d='M10 30 L6 34 M30 30 L34 34 M14 32 L12 37 M26 32 L28 37' stroke='%23e2543f' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") left bottom / 220px auto no-repeat fixed,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 200'%3E%3Cpath d='M202 200 Q208 148 190 126 Q172 148 194 200' fill='%232ea587' opacity='.85'/%3E%3Cpath d='M164 200 Q156 144 136 120 Q116 144 140 200' fill='%231c7a63' opacity='.8'/%3E%3Cpath d='M108 200 Q136 156 164 174 Q192 156 214 200 Z' fill='%23ff8fb3' opacity='.9'/%3E%3Cg transform='translate(30 118) scale(1.7)'%3E%3Ccircle cx='20' cy='16' r='12' fill='%23a06bd6'/%3E%3Ccircle cx='15' cy='14' r='2.4' fill='%23fff'/%3E%3Ccircle cx='25' cy='14' r='2.4' fill='%23fff'/%3E%3Ccircle cx='15' cy='14' r='1.1' fill='%232a1440'/%3E%3Ccircle cx='25' cy='14' r='1.1' fill='%232a1440'/%3E%3Cpath d='M9 24 Q6 32 10 36 M14 26 Q13 34 16 37 M20 27 Q20 35 20 38 M26 26 Q27 34 24 37 M31 24 Q34 32 30 36' stroke='%23a06bd6' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") right bottom / 220px auto no-repeat fixed,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M0 30 Q25 10 50 30 T100 30 V60 H0 Z' fill='%23ffffff' opacity='.16'/%3E%3Cpath d='M0 40 Q25 24 50 40 T100 40 V60 H0 Z' fill='%23ffffff' opacity='.22'/%3E%3C/svg%3E") left bottom / 100px 60px repeat-x fixed,
      linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%) fixed;
  }
}