:root {
  color-scheme: dark;
  --ink: #f4efe6;
  --muted: #b7c7d6;
  --paper: #102033;
  --card: #173049;
  --line: #2c4a68;
  --accent: #f2c14e;
  --accent-ink: #1c1403;
  --ok: #8dcea4;
  --bad: #f0a8a0;
  --danger-bg: #241418;
  --danger-line: #8a4a4a;
  --space: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font: 16px/1.45 "Segoe UI", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 420px at 50% -12%, #1d4e89 0%, transparent 58%),
    var(--paper);
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

header.top, main {
  width: min(960px, calc(100% - 2rem));
  margin: 0 auto;
}

header.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--space) * 2);
  flex-wrap: wrap;
  padding: calc(var(--space) * 2) 0;
  padding-top: calc(var(--space) * 2 + env(safe-area-inset-top));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

main {
  padding-bottom: calc(var(--space) * 4 + env(safe-area-inset-bottom));
}

.brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

nav {
  display: flex;
  gap: calc(var(--space) * 0.5);
  align-items: center;
  flex-wrap: wrap;
}

nav a, nav button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 calc(var(--space) * 1.25);
  text-decoration: none;
  border-radius: 10px;
}

nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

nav form { margin: 0; }

h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 calc(var(--space) * 2); }
h2 { font-size: 1.15rem; line-height: 1.3; margin: calc(var(--space) * 3) 0 calc(var(--space)); }

.lede { margin-top: 0; }

.card, .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: calc(var(--space) * 2.5) calc(var(--space) * 2.5) calc(var(--space) * 3);
  margin: calc(var(--space)) 0 calc(var(--space) * 2);
}

.card.narrow { max-width: 28rem; }

.stack { display: flex; flex-direction: column; gap: calc(var(--space) * 2); }

form {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space)) calc(var(--space) * 1.5);
  align-items: end;
  margin: calc(var(--space)) 0;
}

form.stack { flex-direction: column; align-items: stretch; }
form.stack button { align-self: flex-start; }

label { display: flex; flex-direction: column; gap: calc(var(--space) * 0.5); font-size: 0.92rem; }

input, textarea, select, button {
  font: inherit;
  color: var(--ink);
  background: #0d1b2c;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  min-height: 44px;
}

button { cursor: pointer; }

button.primary, .penguin-card .primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  font-weight: 700;
}

button.danger {
  background: transparent;
  color: var(--bad);
  border-color: var(--danger-line);
}

.meta, .notice { color: var(--muted); }
.notice.ok { color: var(--ok); }
.notice.error { color: var(--bad); }

.secret-panel {
  background: #0d1b2c;
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: calc(var(--space) * 2);
  margin-bottom: calc(var(--space) * 2);
}

.secret-panel p { margin-top: 0; }

.copyline { display: flex; gap: calc(var(--space)); margin: calc(var(--space) * 0.5) 0; }
.copyline input { flex: 1; min-width: 0; font-family: ui-monospace, "Cascadia Mono", monospace; }

.code {
  font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  margin: 0;
}

.state { text-transform: capitalize; font-weight: 700; }

ul.plain, ul.cards, ul.directory { list-style: none; padding: 0; margin: 0; }

ul.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: calc(var(--space) * 1.5);
}

.penguin-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--space) * 1.5);
  min-height: 8.5rem;
  padding: calc(var(--space) * 2);
  border-radius: 14px;
  background: #0f2740;
  border: 1px solid var(--line);
}

.penguin-card form { margin: 0; width: 100%; }
.penguin-card strong { display: block; font-size: 1.25rem; }
[hidden] { display: none !important; }

.portrait { background: none; }
.portrait .doll { display: block; width: 100%; height: auto; background: none; }
.split { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: calc(var(--space) * 3); align-items: start; }
.detail-split { grid-template-columns: minmax(180px, 280px) 1fr; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--space) * 2); }
.section-head h1 { margin-bottom: 0; }
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: calc(var(--space) * 2);
  list-style: none;
  padding: 0;
  margin: calc(var(--space) * 2) 0 0;
}
.card-copy { display: flex; flex-direction: column; gap: 2px; }
.card-copy span { color: var(--muted); }
.facts { list-style: none; padding: 0; margin: 0; }
.facts li { display: flex; justify-content: space-between; gap: calc(var(--space) * 2); padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.facts li span:last-child { color: var(--muted); text-align: right; }
.balance { font-size: 2.4rem; font-weight: 700; line-height: 1.1; margin: 0 0 calc(var(--space)); }
.row-actions { flex-direction: row; flex-wrap: wrap; }
.row-actions form, .row-actions button { width: auto; }
.subnav { display: flex; flex-wrap: wrap; gap: calc(var(--space)); margin: 0 0 calc(var(--space) * 2); }
.subnav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 calc(var(--space) * 1.5); border-radius: 999px; text-decoration: none; background: var(--card); border: 1px solid var(--line); }
.subnav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
#color-preview { min-height: 140px; }
.swatches {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.swatches legend {
  font-weight: 700;
  width: 100%;
  margin-bottom: 2px;
  padding: 0;
}
.swatch {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding: 2px 8px 2px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #0d1b2c;
}
.swatch input {
  width: 1rem;
  height: 1rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
}
.swatch i {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid #f4efe6;
  display: block;
  flex: 0 0 auto;
}
.color-1 { background: #003366; }
.color-2 { background: #009900; }
.color-3 { background: #ff3399; }
.color-4 { background: #222222; }
.color-5 { background: #cc0000; }
.color-6 { background: #ff6600; }
.color-7 { background: #ffcc00; }
.color-8 { background: #660099; }
.color-9 { background: #996633; }
.color-10 { background: #ff9966; }
.color-11 { background: #006600; }
.color-12 { background: #0099cc; }
.color-13 { background: #8fd400; }
.color-14 { background: #8d8d8d; }
.color-15 { background: #00cccc; }
.color-16 { background: #f4f7fb; }
.color-17 { background: #c9a0dc; }
.swatch:has(input:checked) { outline: 3px solid var(--accent); outline-offset: 2px; }
.card-actions { display: flex; flex-direction: column; gap: calc(var(--space)); }
.card-actions button, .card-actions a.button { width: 100%; }
.card-actions a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  background: #0d1b2c;
}
textarea { min-height: 8rem; resize: vertical; }
select { width: 100%; }
.plain li span { color: var(--muted); }
.penguin-card button.danger { margin-top: 0; padding: 0.55rem 0.8rem; }

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--space) * 2);
  min-height: 44px;
  padding: calc(var(--space) * 1.5) calc(var(--space) * 2);
  margin-bottom: calc(var(--space));
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0f2740;
}

.row span { color: var(--muted); }

.invite {
  padding: calc(var(--space) * 2) 0;
  border-bottom: 1px solid var(--line);
}

.danger {
  border: 1px solid var(--danger-line);
  background: var(--danger-bg);
  border-radius: 16px;
  padding: calc(var(--space) * 2);
  margin-top: calc(var(--space) * 3);
}

.danger h2 { margin-top: 0; }

.counts { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 2); margin: 0 0 calc(var(--space) * 2); }
.counts span { color: var(--muted); }

.note {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: calc(var(--space) * 2);
  margin-bottom: calc(var(--space) * 2);
  background: #0f2740;
}

.note[hidden] { display: none; }

dialog {
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: calc(var(--space) * 3);
  max-width: min(28rem, calc(100% - 2rem));
}

dialog::backdrop { background: rgba(4, 10, 18, 0.72); }

.dialog-actions { display: flex; gap: calc(var(--space)); justify-content: flex-end; }

table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: calc(var(--space)) calc(var(--space) * 0.5); vertical-align: top; }

@media (max-width: 720px) {
  header.top { align-items: flex-start; flex-wrap: wrap; }
  nav { width: 100%; }
  h1 { font-size: 1.45rem; }
  table { display: block; overflow-x: auto; }
  .playbar { flex-wrap: wrap; }
  .split, .detail-split { grid-template-columns: 1fr; }
  .row-actions { flex-direction: column; }
  .row-actions form, .row-actions button { width: 100%; }
}

html:has(body.world),
body.world {
  height: 100%;
  height: 100dvh;
  background: #071018;
  overflow: hidden;
}

.playbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space));
  flex-wrap: nowrap;
  padding: 0.35rem 0.8rem;
  padding-top: calc(0.35rem + env(safe-area-inset-top));
  padding-left: calc(0.8rem + env(safe-area-inset-left));
  padding-right: calc(0.8rem + env(safe-area-inset-right));
  background: #0c1c2e;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}

.playbar strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playbar a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.play-actions { display: flex; gap: calc(var(--space)); flex-wrap: wrap; }

#play-peek {
  position: absolute;
  z-index: 4;
  top: calc(0.4rem + env(safe-area-inset-top));
  right: calc(0.4rem + env(safe-area-inset-right));
  min-width: 44px;
  background: rgba(12, 28, 46, 0.82);
}

#play-peek[hidden] { display: none; }

body.world.is-fullscreen .playbar {
  position: absolute;
  z-index: 3;
  top: calc(3.6rem + env(safe-area-inset-top));
  right: calc(0.4rem + env(safe-area-inset-right));
  left: auto;
  width: max-content;
  max-width: calc(100% - 1rem);
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.4rem);
}

body.world.is-fullscreen .play-actions { flex-direction: column; }

body.world.is-fullscreen.bar-open .playbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.play-note {
  margin: 0;
  padding: calc(var(--space)) calc(var(--space) * 2);
  background: #241418;
  color: var(--bad);
}

.play-note[hidden] { display: none; }

#stage {
  width: 760px;
  height: 480px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  overflow: hidden;
}

#stage ruffle-player { width: 760px; height: 480px; display: block; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  body { background: var(--paper); }
}