/* Kuickr Play - trusted publishing harness for agent-made games. */
.kk-play {
  margin: 0;
  background: #050604;
  color: #f4f1ea;
  font-family: var(--kk-font-ui, "Space Grotesk", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

.kk-play * { box-sizing: border-box; }

.pl-wrap {
  min-height: 100vh;
}

.pl-harness {
  --pl-ink: var(--kk-on-primary, #f4f1ea);
  --pl-muted: var(--kk-muted, #9a958c);
  --pl-faint: rgba(244, 241, 234, .58);
  --pl-panel: rgba(14, 15, 13, .9);
  --pl-panel-strong: rgba(8, 9, 8, .96);
  --pl-line: rgba(202, 160, 71, .18);
  --pl-line-strong: rgba(202, 160, 71, .34);
  --pl-accent: var(--kk-secondary, #caa047);
  --pl-accent-ink: var(--kk-on-secondary, #15140f);
  --pl-danger: #c76b55;
  --pl-teal: #1d8b77;
  --pl-radius: 14px;
}

.pl-lobby,
.pl-room,
.pl-stage {
  min-height: 100vh;
}

.pl-lobby {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(22px, 5vw, 58px);
  overflow: hidden;
  background:
    radial-gradient(36rem 24rem at 68% 16%, rgba(202, 160, 71, .16), transparent 72%),
    radial-gradient(42rem 34rem at 46% 30%, rgba(29, 139, 119, .16), transparent 74%),
    linear-gradient(155deg, #050604 0%, #030402 48%, #0b0d0b 100%);
}

.pl-lobby-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(30deg, rgba(202, 160, 71, .055) 1px, transparent 1px),
    linear-gradient(150deg, rgba(151, 198, 198, .036) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
}

.pl-lobby-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .62fr);
  gap: clamp(22px, 5vw, 58px);
  align-items: center;
}

.pl-lobby-copy {
  display: grid;
  gap: 18px;
}

.pl-kicker,
.pl-field-label,
.pl-help-text {
  color: var(--pl-muted);
  font-family: var(--kk-font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pl-kicker {
  margin: 0;
  color: #d8b25e;
}

.pl-lobby-copy h1 {
  max-width: 720px;
  margin: 0;
  color: var(--pl-ink);
  font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif);
  font-size: clamp(42px, 7vw, 76px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: 0;
}

.pl-lobby-copy p:not(.pl-kicker) {
  max-width: 620px;
  margin: 0;
  color: rgba(244, 241, 234, .72);
  font-size: 17px;
  line-height: 1.58;
}

.pl-lobby-link {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--pl-line);
  border-radius: 999px;
  padding: 0 15px;
  color: var(--pl-ink);
  background: rgba(244, 241, 234, .045);
  text-decoration: none;
}

.pl-lobby-link:hover {
  border-color: var(--pl-line-strong);
  background: rgba(244, 241, 234, .075);
}

.pl-lobby-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(18, 18, 16, .92), rgba(6, 7, 6, .92));
  border: 1px solid var(--pl-line);
  border-radius: 16px;
  box-shadow: 0 28px 86px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(202, 160, 71, .08);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.pl-lobby-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}

.pl-help-text {
  margin: 0;
  letter-spacing: .06em;
  line-height: 1.55;
  text-transform: none;
}

.pl-code-form {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--pl-line);
}

.pl-code-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.pl-code-input {
  color: #f4d675;
  font-family: var(--kk-font-mono, "JetBrains Mono", monospace);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.pl-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(40rem 32rem at 18% 28%, rgba(29, 139, 119, .22), transparent 70%),
    radial-gradient(36rem 28rem at 82% 18%, rgba(202, 160, 71, .16), transparent 72%),
    linear-gradient(155deg, #050604 0%, #030402 52%, #0b0d0b 100%);
}

.pl-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  display: block;
}

.pl-stage-shade {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: min(42vh, 360px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 4, 0), rgba(5, 6, 4, .82));
}

.pl-shell-mark {
  position: absolute;
  bottom: calc(84px + env(safe-area-inset-bottom)); /* above the cinema bar, not floating over the game */
  left: max(14px, env(safe-area-inset-left));
  right: auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: rgba(244, 241, 234, .68);
  font-family: var(--kk-font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .42);
}

.pl-control-card {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 4;
  width: min(640px, calc(100vw - 28px));
  max-height: calc(100vh - 44px);
  transform: translateX(-50%);
  color: var(--pl-ink);
  background: linear-gradient(180deg, rgba(18, 18, 16, .92), rgba(6, 7, 6, .92));
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  box-shadow: 0 24px 72px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(202, 160, 71, .08);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  padding: 14px;
  transition: width .2s ease, padding .2s ease, transform .2s ease, background .2s ease;
}

.pl-control-card.is-collapsed {
  width: min(430px, calc(100vw - 28px));
  padding: 10px 12px;
}

.pl-dock-toggle {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--pl-faint);
  background: transparent;
  cursor: pointer;
}

.pl-dock-toggle:hover {
  color: var(--pl-ink);
  border-color: var(--pl-line);
  background: rgba(244, 241, 234, .05);
}

.pl-control-card.is-collapsed .pl-dock-toggle svg {
  transform: rotate(180deg);
}

.pl-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-right: 34px;
}

.pl-game-badge {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #f4d675;
  background: linear-gradient(180deg, rgba(202, 160, 71, .24), rgba(29, 139, 119, .12));
  border: 1px solid rgba(202, 160, 71, .22);
}

.pl-game-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pl-game-title strong {
  overflow: hidden;
  color: var(--pl-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-game-title span,
.pl-level-row,
.pl-share-row span,
.pl-gate-kicker,
.pl-gate-card label {
  color: var(--pl-muted);
  font-family: var(--kk-font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pl-code-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(202, 160, 71, .22);
  border-radius: 10px;
  padding: 0 10px;
  color: #f4d675;
  background: rgba(202, 160, 71, .1);
  font-family: var(--kk-font-mono, "JetBrains Mono", monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
}

.pl-dock-body {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.pl-control-card.is-collapsed .pl-dock-body {
  display: none;
}

.pl-level-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.pl-level-track {
  display: grid;
  grid-template-columns: repeat(var(--pl-level-count, 5), minmax(20px, 1fr));
  gap: 6px;
}

.pl-level-track i {
  height: 5px;
  border-radius: 99px;
  background: rgba(244, 241, 234, .11);
}

.pl-level-track i.is-active {
  background: linear-gradient(90deg, var(--pl-teal), #f4d675);
  box-shadow: 0 0 16px rgba(202, 160, 71, .24);
}

.pl-story-panel {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(29, 139, 119, .26);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(29, 139, 119, .12), rgba(202, 160, 71, .08)),
    rgba(244, 241, 234, .025);
}

.pl-story-panel span {
  color: var(--pl-muted);
  font-family: var(--kk-font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pl-story-panel strong {
  color: var(--pl-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.pl-primary-action,
.pl-secondary-action,
.pl-copy-btn,
.pl-tool-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.pl-primary-action {
  width: 100%;
  border: 0;
  color: var(--pl-accent-ink);
  background: linear-gradient(180deg, #e1b84d, var(--pl-accent));
  box-shadow: inset 0 1px 0 rgba(244, 241, 234, .24), 0 12px 26px rgba(0, 0, 0, .28);
}

.pl-primary-action:hover {
  filter: brightness(1.06);
}

.pl-secondary-action {
  border: 1px solid var(--pl-line);
  color: var(--pl-ink);
  background: rgba(244, 241, 234, .045);
  padding: 0 14px;
}

.pl-secondary-action:hover {
  border-color: var(--pl-line-strong);
  background: rgba(244, 241, 234, .075);
}

.pl-share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--pl-line);
  border-radius: 14px;
  background: rgba(244, 241, 234, .035);
}

.pl-share-row div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pl-share-row strong {
  color: #f4d675;
  font-family: var(--kk-font-mono, "JetBrains Mono", monospace);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .22em;
}

.pl-copy-btn,
.pl-tool-btn {
  border: 1px solid var(--pl-line);
  color: var(--pl-ink);
  background: rgba(244, 241, 234, .045);
}

.pl-copy-btn {
  padding: 0 14px;
  white-space: nowrap;
}

.pl-copy-btn:hover,
.pl-tool-btn:hover {
  border-color: var(--pl-line-strong);
  background: rgba(244, 241, 234, .075);
}

.pl-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pl-who {
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--pl-line);
  border-radius: 999px;
  color: var(--pl-ink);
  background: rgba(244, 241, 234, .045);
  font-family: var(--kk-font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  line-height: 1.2;
}

.pl-who[data-host=true] [data-role=name]::after {
  content: " HOST";
  color: #f4d675;
  font-size: 10px;
}

.pl-who[data-self=true] {
  border-color: rgba(202, 160, 71, .48);
}

.pl-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pl-tool-btn {
  min-width: 0;
  padding: 0 10px;
  color: var(--pl-ink);
}

.pl-tool-btn.is-muted {
  color: var(--pl-muted);
  border-color: rgba(244, 241, 234, .1);
}

.pl-report {
  color: #ffd3c9;
}

.pl-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.pl-gate {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(32rem 32rem at 48% 42%, rgba(29, 139, 119, .22), transparent 68%),
    rgba(5, 6, 4, .74);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.pl-gate-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 20px;
  color: var(--pl-ink);
  background: var(--pl-panel-strong);
  border: 1px solid var(--pl-line);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}

.pl-gate-card h1 {
  margin: 0;
  color: var(--pl-ink);
  font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.08;
}

.pl-gate-card p {
  margin: 0;
  color: var(--pl-muted);
  font-size: 14px;
  line-height: 1.45;
}

.pl-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--pl-line);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--pl-ink);
  background: rgba(244, 241, 234, .045);
  font: inherit;
}

.pl-input:focus {
  outline: 2px solid rgba(202, 160, 71, .46);
  outline-offset: 2px;
}

.pl-full {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.pl-full .pl-control-card {
  bottom: max(12px, env(safe-area-inset-bottom));
}

.pl-full .pl-shell-mark {
  opacity: .72;
}

[hidden] { display: none !important; }

@media (max-width: 720px) {
  .pl-lobby {
    padding: 20px 10px;
    place-items: stretch;
  }

  .pl-lobby-shell {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 24px;
    min-height: calc(100vh - 40px);
  }

  .pl-lobby-copy h1 {
    font-size: 42px;
  }

  .pl-lobby-copy p:not(.pl-kicker) {
    font-size: 15px;
  }

  .pl-lobby-actions,
  .pl-code-form-row {
    grid-template-columns: 1fr;
  }

  .pl-control-card {
    width: calc(100vw - 20px);
    bottom: max(10px, env(safe-area-inset-bottom));
    border-radius: 16px;
    padding: 12px;
  }

  .pl-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pl-card-head .pl-code-chip {
    display: none;
  }

  .pl-share-row,
  .pl-level-row,
  .pl-actions {
    grid-template-columns: 1fr;
  }

  .pl-tool-btn,
  .pl-copy-btn {
    min-height: 42px;
  }

  .pl-shell-mark {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-control-card,
  .pl-dock-toggle svg {
    transition: none;
  }
}

/* ============================================================================
   Chrome C — NOCTURNE game realm (spec 47 Q-47-11 + the `game` design system).
   Local --gm-* tokens until the design-system-agent adds the `game` system to
   the registry (threads/design-system.thread.md). Midnight ink · living
   ember→gold light · ice-teal "alive" pulse · beveled instrument panels.
   ============================================================================ */
.kk-play {
  --gm-ink: #0c0b12; --gm-panel: rgba(20,18,28,.72); --gm-cream: #f3ecdc; --gm-muted: #8f8899;
  --gm-ember: #ff9a4a; --gm-gold: #e9c266; --gm-ice: #5fd6c4;
  --gm-glow: linear-gradient(135deg, #ff9a4a, #e9c266); --gm-line: rgba(233,194,102,.18); --gm-cut: 7px;
  --gm-bevel: polygon(var(--gm-cut) 0, 100% 0, 100% calc(100% - var(--gm-cut)), calc(100% - var(--gm-cut)) 100%, 0 100%, 0 var(--gm-cut));
}

/* NOCTURNE re-skin of the Play lobby — the front door wears the same midnight
   realm as the room (was the older olive/deck `--pl-*` tones). */
.kk-play .pl-lobby { display: block; place-items: initial; padding: 0; min-height: 100vh;
  overflow-x: hidden; overflow-y: visible; background: var(--gm-ink); }
.kk-play .pl-landing { position: relative; z-index: 2; width: min(1060px, 100%); margin: 0 auto;
  padding: clamp(18px, 4vw, 30px) 22px 90px; }

/* Living sky — aurora + fireflies (parallax via the `parallax` controller). */
.kk-play .pl-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1a1726, var(--gm-ink) 70%); }
.kk-play .pl-aurora { position: absolute; inset: -20%; filter: blur(60px); opacity: .5;
  background:
    radial-gradient(34vw 26vw at 24% 24%, #2e5a52, transparent 60%),
    radial-gradient(30vw 24vw at 78% 30%, #423a68, transparent 60%),
    radial-gradient(40vw 30vw at 55% 92%, #7a4d34, transparent 60%);
  animation: pl-drift 30s ease-in-out infinite alternate; }
@keyframes pl-drift { to { transform: translate3d(2%, -3%, 0) scale(1.08); } }
.kk-play .pl-ff { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gm-gold);
  box-shadow: 0 0 8px 2px var(--gm-gold); animation: pl-twk 4s ease-in-out infinite alternate; }
@keyframes pl-twk { 0% { opacity: .2; transform: scale(.6); } 100% { opacity: 1; transform: scale(1.3); } }
.kk-play .pl-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.kk-play .pl-lobby-shell { z-index: 2; }

/* Brand + hero */
.kk-play .pl-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.kk-play .pl-brand-sigil { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; clip-path: var(--gm-bevel);
  background: var(--gm-glow); color: #1a1206; box-shadow: 0 0 18px -2px var(--gm-ember); }
.kk-play .pl-brand-sigil svg { width: 18px; height: 18px; }
.kk-play .pl-brand b { font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif); font-weight: 400; font-size: 20px; }
.kk-play .pl-brand b em { color: var(--gm-gold); font-style: normal; }
.kk-play .pl-realm-tag { margin-left: 2px; font: 600 10px/1 var(--kk-font-mono, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--gm-ice); }
.kk-play .pl-lobby-copy h1 { color: var(--gm-cream); }
.kk-play .pl-lobby-copy h1 em { font-style: italic; background: var(--gm-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kk-play .pl-lede { color: rgba(243,236,220,.74); max-width: 54ch; line-height: 1.62; font-size: 16px; margin: 0; }
.kk-play .pl-lede b { color: var(--gm-gold); font-weight: 600; }
.kk-play .pl-field-label,
.kk-play .pl-help-text { color: var(--gm-muted); }

/* How-it-works — the "explain the harness" strip */
.kk-play .pl-how { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; max-width: 56ch; }
.kk-play .pl-how li { display: flex; align-items: flex-start; gap: 11px; color: rgba(243,236,220,.78); font-size: 14px; line-height: 1.45; }
.kk-play .pl-how-n { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; clip-path: var(--gm-bevel);
  font: 700 11px/1 var(--kk-font-mono, monospace); color: var(--gm-gold); border: 1px solid var(--gm-line); background: rgba(233,194,102,.06); }

.kk-play .pl-lobby-link { clip-path: var(--gm-bevel); border-color: var(--gm-line); color: var(--gm-cream); background: rgba(95,214,196,.06); }
.kk-play .pl-lobby-link:hover { border-color: var(--gm-ice); color: var(--gm-ice); background: rgba(95,214,196,.1); }

.kk-play .pl-lobby-panel {
  position: relative; border: 1px solid var(--gm-line); box-shadow: none; overflow: hidden;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  background: linear-gradient(180deg, rgba(24,21,34,.92), rgba(12,11,18,.94));
}
.kk-play .pl-panel-seam { position: absolute; left: 16px; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gm-ember) 25%, var(--gm-gold) 50%, var(--gm-ember) 75%, transparent);
  background-size: 220% 100%; filter: drop-shadow(0 0 4px var(--gm-ember)); animation: gm-flow 6s linear infinite; }
.kk-play .pl-panel-heading { margin: 4px 0 -4px; text-transform: none; letter-spacing: .04em; color: var(--gm-muted); }

/* ── Landing structure: topbar, hero, explanatory sections ── */
.kk-play .pl-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(30px, 6vw, 64px); }
.kk-play .pl-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .62fr); gap: clamp(26px, 5vw, 56px); align-items: center; }
.kk-play .pl-hero-copy { display: grid; gap: 18px; }
.kk-play .pl-hero-copy h1 { margin: 0; font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif); font-weight: 400;
  font-size: clamp(38px, 6vw, 62px); line-height: 1.02; color: var(--gm-cream); }
.kk-play .pl-hero-meta { margin: 0; font: 500 11px/1 var(--kk-font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--gm-ice); }

/* Sections */
.kk-play .pl-sec { margin-top: clamp(56px, 9vw, 104px); }
.kk-play .pl-eyebrow { margin: 0 0 8px; font: 600 11px/1 var(--kk-font-mono, monospace); letter-spacing: .2em; text-transform: uppercase;
  color: transparent; background: var(--gm-glow); -webkit-background-clip: text; background-clip: text; width: fit-content; }
.kk-play .pl-sec h2 { margin: 0; font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.14; color: var(--gm-cream); max-width: 22ch; }
.kk-play .pl-sec-lede { margin: 14px 0 0; max-width: 62ch; color: rgba(243,236,220,.72); font-size: 15.5px; line-height: 1.6; }
.kk-play .pl-sec code, .kk-play .pl-how code { font-family: var(--kk-font-mono, monospace); font-size: .88em; color: var(--gm-gold);
  background: rgba(233,194,102,.08); padding: 1px 5px; border-radius: 4px; }

/* Feature grid */
.kk-play .pl-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.kk-play .pl-feat { padding: 18px; border: 1px solid var(--gm-line); background: var(--gm-panel);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); transition: .16s; }
.kk-play .pl-feat:hover { border-color: var(--gm-ember); box-shadow: 0 0 26px -12px var(--gm-ember); transform: translateY(-2px); }
.kk-play .pl-feat-ico { width: 34px; height: 34px; display: grid; place-items: center; clip-path: var(--gm-bevel);
  background: rgba(233,194,102,.08); color: var(--gm-gold); }
.kk-play .pl-feat-ico svg { width: 17px; height: 17px; }
.kk-play .pl-feat b { display: block; margin: 12px 0 5px; font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif); font-weight: 400; font-size: 16px; color: var(--gm-cream); }
.kk-play .pl-feat p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(243,236,220,.66); }

/* How-it-works (expanded rows) */
.kk-play .pl-how { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; max-width: 72ch; }
.kk-play .pl-how li { display: flex; align-items: flex-start; gap: 13px; color: rgba(243,236,220,.72); font-size: 14.5px; line-height: 1.55; }
.kk-play .pl-how li b { color: var(--gm-cream); }
.kk-play .pl-how-n { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; clip-path: var(--gm-bevel);
  font: 700 12px/1 var(--kk-font-mono, monospace); color: var(--gm-gold); border: 1px solid var(--gm-line); background: rgba(233,194,102,.06); }

/* "What you can build" cards */
.kk-play .pl-gcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.kk-play .pl-gcard { display: block; text-decoration: none; color: inherit; border: 1px solid var(--gm-line); background: var(--gm-ink); transition: .16s;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); }
.kk-play .pl-gcard:hover { border-color: var(--gm-ember); box-shadow: 0 0 26px -12px var(--gm-ember); transform: translateY(-3px); }
.kk-play .pl-gcard.is-static { cursor: default; }
.kk-play .pl-gcard.is-static:hover { transform: none; }
.kk-play .pl-gcard-art { position: relative; height: 96px; }
.kk-play .pl-gcard-play { position: absolute; right: 9px; bottom: 9px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gm-glow); color: #1a1206; box-shadow: 0 0 14px -3px var(--gm-ember); }
.kk-play .pl-gcard-play svg { width: 15px; height: 15px; }
.kk-play .pl-gcard-art.art-a { background: radial-gradient(60% 60% at 40% 40%, #2f5d55, #12141d); }
.kk-play .pl-gcard-art.art-b { background: radial-gradient(60% 60% at 60% 50%, #433a68, #14121d); }
.kk-play .pl-gcard-art.art-c { background: radial-gradient(60% 60% at 50% 40%, #7a4d34, #16121a); }
.kk-play .pl-gcard-art.art-d { background: radial-gradient(60% 60% at 45% 55%, #245b6b, #10131b); }
.kk-play .pl-gcard-m { padding: 12px 13px; }
.kk-play .pl-gcard-m b { display: block; font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif); font-weight: 400; font-size: 15px; color: var(--gm-cream); }
.kk-play .pl-gcard-m span { display: block; margin-top: 5px; font: 500 10.5px/1.3 var(--kk-font-mono, monospace); color: var(--gm-muted); }

/* SDK code block */
.kk-play .pl-code-block { margin: 24px 0 0; padding: 20px 22px; overflow-x: auto; border: 1px solid var(--gm-line);
  background: rgba(8,7,13,.72); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  font-family: var(--kk-font-mono, monospace); font-size: 13px; line-height: 1.75; color: var(--gm-cream); }
.kk-play .pl-code-block .c { color: var(--gm-muted); }
.kk-play .pl-code-block .f { color: var(--gm-gold); }
.kk-play .pl-code-block .s { color: var(--gm-ice); }
.kk-play .pl-code-block .n { color: var(--gm-ember); }

/* Final CTA band */
.kk-play .pl-cta-band { margin-top: clamp(56px, 9vw, 104px); padding: clamp(30px, 5vw, 48px); text-align: center; border: 1px solid var(--gm-line);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  background: radial-gradient(60% 120% at 50% 0%, rgba(255,154,74,.14), transparent 70%), var(--gm-panel); }
.kk-play .pl-cta-band h2 { margin: 0 0 20px; font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif); font-weight: 400;
  font-size: clamp(24px, 4vw, 36px); color: var(--gm-cream); }
.kk-play .pl-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.kk-play .pl-cta-row a { text-decoration: none; }
.kk-play .pl-cta-row .pl-primary-action { width: auto; padding: 0 22px; }

@media (max-width: 860px) {
  .kk-play .pl-hero { grid-template-columns: 1fr; }
  .kk-play .pl-feat-grid { grid-template-columns: 1fr 1fr; }
  .kk-play .pl-gcards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .kk-play .pl-feat-grid, .kk-play .pl-gcards { grid-template-columns: 1fr; }
  .kk-play .pl-topbar .pl-lobby-link { display: none; }
}

/* ── Game page: a published game at its own URL, in NOCTURNE chrome ── */
.kk-play .pl-brand[href] { text-decoration: none; color: inherit; }
.kk-play .pl-gp-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(26px, 5vw, 54px);
  align-items: center; margin-top: clamp(20px, 5vw, 48px); }
.kk-play .pl-gp-head { display: grid; gap: 16px; }
.kk-play .pl-gp-head h1 { margin: 0; font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif); font-weight: 400;
  font-size: clamp(38px, 6vw, 62px); line-height: 1.02; color: var(--gm-cream); }
.kk-play .pl-gp-meta { margin: 0; font: 500 12px/1 var(--kk-font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--gm-ice); }
.kk-play .pl-gp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.kk-play .pl-gp-actions .pl-primary-action { width: auto; padding: 0 22px; }
.kk-play .pl-gp-preview { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--gm-line); background: var(--gm-ink);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.kk-play .pl-gp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; pointer-events: none; }
.kk-play .pl-gp-badge { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; font: 600 10px/1 var(--kk-font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--gm-cream);
  background: rgba(8,7,13,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--gm-line); clip-path: var(--gm-bevel); }
@media (max-width: 860px) { .kk-play .pl-gp-hero { grid-template-columns: 1fr; } }

.kk-play .pl-input { background: rgba(255,255,255,.03); border: 1px solid var(--gm-line); color: var(--gm-cream); }
.kk-play .pl-input:focus { border-color: var(--gm-ember); box-shadow: 0 0 0 3px rgba(255,154,74,.16); }
.kk-play .pl-code-input { color: var(--gm-gold); text-shadow: 0 0 8px rgba(233,194,102,.4); }

.kk-play .pl-primary-action { clip-path: var(--gm-bevel); border: 0; background: var(--gm-glow); color: #1a1206; box-shadow: 0 8px 22px -8px var(--gm-ember); }
.kk-play .pl-primary-action:hover { filter: brightness(1.05); }
.kk-play .pl-secondary-action { clip-path: var(--gm-bevel); border: 1px solid var(--gm-line); background: rgba(255,255,255,.03); color: var(--gm-cream); }
.kk-play .pl-secondary-action:hover { border-color: var(--gm-ember); color: var(--gm-gold); }

/* Reference-game buttons: single line, even height, a clearer NOCTURNE bevel. */
.kk-play .pl-lobby-actions .pl-primary-action,
.kk-play .pl-lobby-actions .pl-secondary-action {
  --gm-cut: 10px; min-height: 50px; padding: 0 12px; gap: 8px; font-size: 14px; white-space: nowrap;
}
.kk-play .pl-lobby-actions .pl-ico { width: 16px; height: 16px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce){ .kk-play .pl-panel-seam, .kk-play .pl-aurora, .kk-play .pl-ff { animation: none; } }

.pl-stage { position: relative; background:
    radial-gradient(40rem 30rem at 22% 24%, rgba(46,90,82,.28), transparent 64%),
    radial-gradient(34rem 26rem at 80% 26%, rgba(66,58,104,.26), transparent 66%),
    radial-gradient(46rem 32rem at 55% 100%, rgba(122,77,52,.24), transparent 62%),
    var(--gm-ink); }
.pl-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pl-cinema { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--gm-panel); backdrop-filter: blur(18px) saturate(1.1);
  border-top: 1px solid var(--gm-line); transition: opacity .25s; }
/* living ember seam — flows, not a flat line */
.pl-seam { height: 2px; background: linear-gradient(90deg, transparent, var(--gm-ember) 25%, var(--gm-gold) 50%, var(--gm-ember) 75%, transparent);
  background-size: 220% 100%; filter: drop-shadow(0 0 4px var(--gm-ember)); animation: gm-flow 6s linear infinite; }
@keyframes gm-flow { to { background-position: 220% 0; } }
.pl-cinema-row { max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: 15px; padding: 11px 18px; color: var(--gm-cream); }
@media (max-width: 1040px){ .pl-story { display: none; } }
@media (max-width: 860px){ .pl-level { display: none; } }
@media (max-width: 720px){ .pl-cinema-row { gap: 10px; padding: 10px 12px; } .pl-level, .pl-story { display: none; } .pl-id { max-width: 130px; } }

.pl-sigil { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; clip-path: var(--gm-bevel);
  background: var(--gm-glow); color: #1a1206; box-shadow: 0 0 16px -3px var(--gm-ember); }
.pl-sigil svg { width: 16px; height: 16px; }
.pl-id { min-width: 0; flex: 0 1 auto; max-width: 190px; }
.pl-id strong { display: block; font-family: var(--kk-font-display, "Libre Baskerville", Georgia, serif); font-weight: 400;
  font-size: 15px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-id-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0;
  white-space: nowrap; overflow: hidden;
  font-family: var(--kk-font-mono, monospace); font-size: 10.5px; color: var(--gm-muted); }
.pl-id-sub > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pl-live { flex: 0 0 auto; }
.pl-live { width: 6px; height: 6px; border-radius: 50%; background: var(--gm-ice); box-shadow: 0 0 0 0 rgba(95,214,196,.6); animation: pl-pulse 1.8s infinite; }
@keyframes pl-pulse { 70% { box-shadow: 0 0 0 7px rgba(95,214,196,0); } 100% { box-shadow: 0 0 0 0 rgba(95,214,196,0); } }

.pl-level { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; min-width: 96px; max-width: 150px; }
.pl-level-text { font-family: var(--kk-font-mono, monospace); font-size: 10px; letter-spacing: .04em; color: var(--gm-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-level .pl-level-track { display: flex; gap: 5px; }
.pl-level .pl-level-track i { flex: 1; height: 4px; background: rgba(255,255,255,.12); }
.pl-level .pl-level-track i.is-active { background: var(--gm-glow); box-shadow: 0 0 6px -1px var(--gm-ember); }
.pl-story { min-width: 0; flex: 1 1 auto; max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 12px; color: var(--gm-muted); }
.pl-story span { color: var(--gm-muted); }
.pl-story strong { color: var(--gm-cream); font-weight: 600; margin-left: 6px; }

/* the glowing, flickering room code — the signature */
.pl-cinema .pl-code-chip { font-family: var(--kk-font-mono, monospace); font-size: 15px; letter-spacing: .26em; color: var(--gm-gold);
  text-shadow: 0 0 12px rgba(233,194,102,.5); background: none; border: 0; padding: 0; animation: gm-flick 3.5s infinite; }
@keyframes gm-flick { 0%, 97%, 100% { opacity: 1; } 98% { opacity: .6; } }
.pl-cinema .pl-roster { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.pl-cinema .pl-who { width: 26px; height: 26px; margin-left: -7px; padding: 0; max-width: none; border-radius: 50%;
  border: 2px solid #12111a; overflow: hidden;
  display: grid; place-items: center; font: 700 10px/1 var(--kk-font-ui, sans-serif); letter-spacing: 0;
  color: var(--gm-cream); background: var(--gm-panel); }
.pl-cinema .pl-who:first-child { margin-left: 0; }
/* Cinema avatars show an initial, not the full name — suppress the pill's " HOST" suffix; mark the host with a gold ring. */
.pl-cinema .pl-who [data-role=name]::after { content: none; }
.pl-cinema .pl-who[data-host=true] { color: #1a1206; background: var(--gm-glow); border-color: var(--gm-ember);
  box-shadow: 0 0 10px -2px var(--gm-ember); }

.pl-cinema-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pl-cta { display: flex; align-items: center; gap: 7px; border: 0; padding: 9px 14px; cursor: pointer; clip-path: var(--gm-bevel);
  font: 700 13px/1 var(--kk-font-ui, sans-serif); background: var(--gm-glow); color: #1a1206; box-shadow: 0 6px 18px -6px var(--gm-ember); }
.pl-cta svg { width: 15px; height: 15px; }
.pl-t { width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; text-decoration: none; clip-path: var(--gm-bevel);
  color: var(--gm-cream); border: 1px solid var(--gm-line); background: rgba(255,255,255,.03); }
.pl-t:hover { border-color: var(--gm-ember); color: var(--gm-gold); }
.pl-t svg { width: 16px; height: 16px; }
.pl-t.is-muted { color: var(--gm-muted); }
.pl-collapse { width: 30px; height: 30px; border: 0; background: transparent; color: var(--gm-muted); cursor: pointer; }
.pl-collapse:hover { color: var(--gm-cream); }

/* collapsed → the breathing ember orb */
.pl-cinema.is-expanded .pl-fab { display: none; }
.pl-cinema.is-collapsed { background: none; backdrop-filter: none; border-top: 0; pointer-events: none; }
.pl-cinema.is-collapsed .pl-seam,
.pl-cinema.is-collapsed .pl-cinema-row { display: none; }
.pl-fab { pointer-events: auto; position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; }
.pl-fab-pill { display: flex; align-items: center; gap: 7px; padding: 8px 12px; clip-path: var(--gm-bevel);
  font-family: var(--kk-font-mono, monospace); font-size: 12px; color: var(--gm-cream);
  background: var(--gm-panel); backdrop-filter: blur(10px); border: 1px solid var(--gm-line); }
.pl-fab-pill .pl-code-chip { background: none; border: 0; padding: 0; color: var(--gm-cream); text-shadow: none; animation: none; }
.pl-fab-orb { position: relative; width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gm-gold), var(--gm-ember) 70%); color: #1a1206;
  box-shadow: 0 0 30px -4px var(--gm-ember), inset 0 2px 6px rgba(255,255,255,.4); animation: gm-breathe 3.2s ease-in-out infinite; }
.pl-fab-orb svg { width: 22px; height: 22px; }
.pl-fab-orb::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--gm-ember); opacity: .4; animation: pl-ring 2.6s infinite; }
@keyframes pl-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes gm-breathe { 50% { box-shadow: 0 0 44px -2px var(--gm-ember), inset 0 2px 6px rgba(255,255,255,.4); } }

@media (prefers-reduced-motion: reduce){ .pl-seam, .pl-fab-orb, .pl-cinema .pl-code-chip { animation: none; } }

/* full screen: midnight fills the viewport */
.pl-full { position: fixed; inset: 0; z-index: 200; background: var(--gm-ink); }
.pl-full .pl-room, .pl-full .pl-stage { position: fixed; inset: 0; }