/* Display worlds share the live code components, never the authentication state. */
:root[data-display-style] {
  color-scheme: light;
  --scene-bg: #f1eadf;
  --scene-ink: #493a34;
  --scene-line: #c8b9a9;
  --scene-accent: #b9323d;
  --card-bg: #fff9ee;
  --card-ink: #493a34;
  --card-border: #493a34;
  --screen-bg: #f1eadf;
  --screen-ink: #493a34;
  --scene-radius: 12px;
  --scene-shadow: 6px 7px 0 #493a3425;
  --focus: var(--scene-accent);
  background: var(--scene-bg);
}
:root[data-display-style] .display-page {
  background: var(--scene-bg);
  color: var(--scene-ink);
}
:root[data-display-style] .display-shell { min-height: calc(100dvh - 130px); }
:root[data-display-style] .code-stage,
:root[data-display-style] .center-state,
:root[data-display-style] .auth-panel { min-height: calc(100dvh - 130px); }
:root[data-display-style] .center-state p { color: var(--scene-ink); }
:root[data-display-style] .code-grid { gap: clamp(22px, 3vw, 42px); }
:root[data-display-style] .code-card { container-type: inline-size; }
:root[data-display-style] .card-code-value {
  font-size: clamp(1.25rem, 12cqi, 4.5rem);
  gap: .18em;
}
:root[data-display-style] .code-grid[data-count="1"] { max-width: 850px; }
:root[data-display-style] .code-identity { grid-template-columns: auto minmax(0, 1fr); }
:root[data-display-style] .code-issuer { grid-column: 2; text-align: start; }
:root[data-display-style] .code-name { font-size: clamp(.85rem, 3cqi, 1.05rem); }
:root[data-display-style] .code-card.is-copied { outline: 3px solid var(--scene-accent); outline-offset: 5px; }
:root[data-display-style] .progress-track { min-width: 0; flex: 1; }
:root[data-display-style] .code-countdown { min-width: 5ch; }
.style-toolbar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  margin: 0 clamp(18px, 4vw, 54px);
  border-bottom: 1px solid var(--scene-line);
  padding-block: 12px;
  color: var(--scene-ink);
}
.style-brand { display: flex; align-items: center; gap: 10px; font-size: .8rem; text-decoration: none; font-weight: 700; color: inherit; }
.style-brand img { flex: none; }
.style-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.style-control,
.style-controls select {
  min-height: 40px;
  width: auto;
  padding: 8px 12px;
  border: 1px solid var(--scene-line);
  border-radius: 5px;
  background: var(--scene-bg);
  color: var(--scene-ink);
  font-family: var(--font-mono);
  font-size: .75rem;
  box-shadow: none;
}
.style-controls select { max-width: 180px; padding-right: 30px; }
.style-control:hover { border-color: var(--scene-accent); }
.style-control:disabled { opacity: .65; }
.style-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 clamp(18px, 4vw, 54px);
  min-height: 54px;
  padding-block: 16px;
  border-top: 1px solid var(--scene-line);
  color: var(--scene-ink);
  font-size: .7rem;
}
.scene-art { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.scene-art i { position: absolute; display: block; }
.scene-art i:nth-child(1) { left: 8%; top: 18%; }
.scene-art i:nth-child(2) { right: 7%; top: 23%; animation-delay: -3s; }
.scene-art i:nth-child(3) { left: 19%; bottom: 12%; animation-delay: -6s; }
.scene-art i:nth-child(4) { right: 22%; bottom: 15%; animation-delay: -9s; }
/* Each world owns material, type, borders and illustration as well as color. */
:root[data-display-style]:not([data-display-style="pocket"]) .code-card {
  color: var(--card-ink);
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--scene-radius);
  box-shadow: var(--scene-shadow);
  padding: clamp(20px, 3vw, 38px);
  gap: clamp(18px, 2.4vw, 28px);
}
:root[data-display-style]:not([data-display-style="pocket"]) .code-card::before { display: none; }
:root[data-display-style]:not([data-display-style="pocket"]) .code-card:hover { transform: translateY(-3px); }
:root[data-display-style]:not([data-display-style="pocket"]) .code-card:active { transform: translateY(2px); }
:root[data-display-style]:not([data-display-style="pocket"]) .card-code-value {
  background: var(--screen-bg);
  color: var(--screen-ink);
  border: 0;
  border-radius: max(0px, calc(var(--scene-radius) - 6px));
  box-shadow: none;
  text-shadow: none;
  padding: .4em .12em;
}
:root[data-display-style]:not([data-display-style="pocket"]) .code-index { background: var(--scene-accent); color: #fff; border: 0; border-radius: 2px; }
:root[data-display-style]:not([data-display-style="pocket"]) .code-issuer { color: var(--card-ink); }
:root[data-display-style]:not([data-display-style="pocket"]) .progress-track { background: color-mix(in srgb, var(--scene-accent) 18%, var(--card-bg)); height: 5px; border-radius: 0; }
:root[data-display-style]:not([data-display-style="pocket"]) .progress-value { background: var(--scene-accent); }
:root[data-display-style]:not([data-display-style="pocket"]) .code-card.is-expiring .progress-value { background: var(--card-ink); }
:root[data-display-style="pocket"] { --shell-light: #db6267; --shell: #bc3945; --shell-edge: #822632; }

/* 01 · Pixel Arcade — stepped edges, pixel field, hard offset shadows. */
:root[data-display-style="pixel"] {
  --scene-bg: #f3ddb0; --scene-ink: #552c39; --scene-line: #c3a080; --scene-accent: #a82c49;
  --card-bg: #fff3d7; --card-ink: #552c39; --card-border: #552c39;
  --screen-bg: #f4b64e; --screen-ink: #552c39; --scene-radius: 0px; --scene-shadow: 8px 8px 0 #552c39;
}
:root[data-display-style="pixel"] .scene-art { background-image: radial-gradient(#9b624424 2px, transparent 2px); background-size: 18px 18px; }
:root[data-display-style="pixel"] .scene-art i { width: 18px; height: 18px; background: #a82c4930; box-shadow: 18px 0 #a82c4930, 0 18px #a82c4930, -18px 0 #a82c4930, 0 -18px #a82c4930; animation: pixel-hop 4s steps(4) infinite; }
:root[data-display-style="pixel"] .code-card { border-width: 4px !important; }
:root[data-display-style="pixel"] .card-code-value { text-shadow: 3px 3px #fff5d680 !important; border: 4px solid #552c39 !important; font-family: "Courier New", monospace; font-weight: 900; }

/* 02 · Blockcraft — grass, dirt tiles, inventory slots and square clouds. */
:root[data-display-style="blockcraft"] {
  --scene-bg: #d8edec; --scene-ink: #294c3b; --scene-line: #90b7a4; --scene-accent: #41612c;
  --card-bg: #ad8059; --card-ink: #302719; --card-border: #503d2b;
  --screen-bg: #e4dfbc; --screen-ink: #343f2a; --scene-radius: 0px; --scene-shadow: 7px 8px 0 #503d2b;
}
:root[data-display-style="blockcraft"] .scene-art { background: linear-gradient(0deg, #8cba69 0 7%, #b3d693 7% 10%, transparent 10%); }
:root[data-display-style="blockcraft"] .scene-art i { width: 90px; height: 22px; background: #ffffffaa; box-shadow: 22px -18px #ffffffaa, 48px 0 #ffffffaa; animation: cloud-drift 18s ease-in-out infinite alternate; }
:root[data-display-style="blockcraft"] .code-card { border-width: 5px !important; border-top: 18px solid #668944 !important; background-image: repeating-conic-gradient(#ffffff08 0 25%, #503d2b15 0 50%) !important; background-size: 32px 32px !important; }
:root[data-display-style="blockcraft"] .card-code-value { border: 5px solid #6d6244 !important; box-shadow: inset 4px 4px #a5a084, inset -4px -4px #fffbe0 !important; font-family: "Courier New", monospace; }

/* 03 · Manga — inked panels, halftone paper and red speed lines. */
:root[data-display-style="manga"] {
  --scene-bg: #f8eee3; --scene-ink: #312630; --scene-line: #c1a6a2; --scene-accent: #c33245;
  --card-bg: #fffaf2; --card-ink: #312630; --card-border: #312630;
  --screen-bg: #fffaf2; --screen-ink: #c33245; --scene-radius: 0px; --scene-shadow: 9px 9px 0 #312630;
}
:root[data-display-style="manga"] .scene-art { background: repeating-conic-gradient(from 18deg at 50% 50%, transparent 0 13deg, #c3324510 13deg 14deg); }
:root[data-display-style="manga"] .code-card { border-width: 3px !important; background-image: radial-gradient(#31263012 1px, transparent 1px) !important; background-size: 6px 6px !important; }
:root[data-display-style="manga"] .code-name { font-style: italic; text-transform: uppercase; font-size: 1.25rem; }
:root[data-display-style="manga"] .card-code-value { font-family: Impact, "Arial Narrow", sans-serif; font-style: italic; letter-spacing: .04em; border-block: 3px solid #312630 !important; text-shadow: 2px 2px #31263022 !important; }
:root[data-display-style="manga"] .scene-art i { height: 3px; width: 120px; background: #c3324530; transform: rotate(-28deg); animation: ink-dash 3s ease-in-out infinite alternate; }

/* 04 · Candy — molded lozenges and soft confectionery colors. */
:root[data-display-style="candy"] {
  --scene-bg: #f8e3e8; --scene-ink: #71374f; --scene-line: #dab0c0; --scene-accent: #b63768;
  --card-bg: #fff7fa; --card-ink: #71374f; --card-border: #fff;
  --screen-bg: #f2c9db; --screen-ink: #75314e; --scene-radius: 42px; --scene-shadow: inset 0 3px 0 #fff, 0 9px 0 #dca2b7, 0 22px 34px #71374f15;
}
:root[data-display-style="candy"] .card-code-value { font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; border-radius: 60px !important; box-shadow: inset 0 4px 7px #71374f18 !important; }
:root[data-display-style="candy"] .scene-art i { width: 44px; height: 44px; border: 10px solid #cf789c35; border-radius: 50%; animation: soft-float 7s ease-in-out infinite alternate; }
:root[data-display-style="candy"] .progress-track { border-radius: 20px !important; height: 8px !important; }

/* 05 · Blueprint — measured technical drawing on pale drafting paper. */
:root[data-display-style="blueprint"] {
  --scene-bg: #dfeaf4; --scene-ink: #214d73; --scene-line: #9bb6ce; --scene-accent: #285e8e;
  --card-bg: #edf5fa; --card-ink: #214d73; --card-border: #527b9d;
  --screen-bg: transparent; --screen-ink: #214d73; --scene-radius: 0px; --scene-shadow: 5px 5px 0 #527b9d22;
}
:root[data-display-style="blueprint"] .scene-art { background-image: linear-gradient(#527b9d14 1px, transparent 1px), linear-gradient(90deg, #527b9d14 1px, transparent 1px); background-size: 24px 24px; }
:root[data-display-style="blueprint"] .code-card { outline: 1px solid #527b9d; outline-offset: 6px; border-width: 1px !important; }
:root[data-display-style="blueprint"] .card-code-value { border-block: 1px dashed #527b9d !important; font-weight: 400; }
:root[data-display-style="blueprint"] .scene-art i { width: 100px; height: 100px; border: 1px solid #527b9d40; border-radius: 50%; }

/* 06 · Paper — cream stationery, ruled fields and scarlet editorial type. */
:root[data-display-style="paper"] {
  --scene-bg: #e8dfcc; --scene-ink: #574235; --scene-line: #bca58d; --scene-accent: #9d4334;
  --card-bg: #fff9e9; --card-ink: #574235; --card-border: #c7b89a;
  --screen-bg: transparent; --screen-ink: #9d4334; --scene-radius: 2px; --scene-shadow: 2px 3px 0 #d1c3a8, 5px 7px 0 #faf1dd, 7px 8px 0 #bbaa8f;
}
:root[data-display-style="paper"] .code-card { border-width: 1px !important; background-image: repeating-linear-gradient(0deg, transparent 0 29px, #9d876916 29px 30px) !important; }
:root[data-display-style="paper"] .card-code-value { font-family: Georgia, serif; font-weight: 400; border-bottom: 1px solid #bca58d !important; }
:root[data-display-style="paper"] .code-name { font-family: Georgia, serif; font-style: italic; font-size: 1.2rem; }
:root[data-display-style="paper"] .code-index { background: transparent !important; color: #9d4334 !important; border: 1px solid #9d4334 !important; border-radius: 50% !important; }

/* 07 · Ocean — portholes, tidal rings and seafoam. */
:root[data-display-style="ocean"] {
  --scene-bg: #dceee8; --scene-ink: #225951; --scene-line: #9ebeb2; --scene-accent: #267368;
  --card-bg: #f4fbef; --card-ink: #225951; --card-border: #7aa89b;
  --screen-bg: #cce5db; --screen-ink: #225951; --scene-radius: 34px; --scene-shadow: 0 7px 0 #9abdaf, 0 20px 36px #22595115;
}
:root[data-display-style="ocean"] .card-code-value { border-radius: 80px !important; border: 2px solid #7aa89b !important; }
:root[data-display-style="ocean"] .scene-art i { width: 220px; height: 100px; border: 1px solid #26736820; border-radius: 50%; box-shadow: 0 12px 0 #2673680b, 0 24px 0 #2673680b; animation: soft-float 9s ease-in-out infinite alternate; }

/* 08 · Sunset — a striped sun and warm seventies print. */
:root[data-display-style="sunset"] {
  --scene-bg: #f6dfbd; --scene-ink: #793b37; --scene-line: #cf9c7f; --scene-accent: #ac4349;
  --card-bg: #ffedd2; --card-ink: #793b37; --card-border: #ac4349;
  --screen-bg: #f1bb89; --screen-ink: #793b37; --scene-radius: 34px; --scene-shadow: 0 8px 0 #d68368;
}
:root[data-display-style="sunset"] .code-card { border-radius: 65px 65px 12px 12px !important; }
:root[data-display-style="sunset"] .card-code-value { font-family: Georgia, serif; font-weight: 700; border-radius: 50px 50px 3px 3px !important; }
:root[data-display-style="sunset"] .scene-art i:first-child { width: 220px; height: 220px; left: calc(50% - 110px); top: 10%; border-radius: 50%; background: repeating-linear-gradient(0deg, #dc856f35 0 12px, transparent 12px 17px); animation: soft-float 10s ease-in-out infinite alternate; }

/* 09 · Terminal — a daylight phosphor terminal with a command-line rhythm. */
:root[data-display-style="terminal"] {
  --scene-bg: #e8eadc; --scene-ink: #3c5140; --scene-line: #a4b19b; --scene-accent: #39684b;
  --card-bg: #f5f5e7; --card-ink: #3c5140; --card-border: #63785b;
  --screen-bg: #e0e7ce; --screen-ink: #365334; --scene-radius: 5px; --scene-shadow: 5px 6px 0 #8c9d80;
}
:root[data-display-style="terminal"] .code-identity { padding-bottom: 13px; border-bottom: 1px solid #a4b19b; }
:root[data-display-style="terminal"] .card-code-value { background-image: repeating-linear-gradient(0deg, transparent 0 3px, #3653340b 3px 4px) !important; font-family: "Courier New", monospace; }
:root[data-display-style="terminal"] .code-index { border-radius: 0 !important; }
:root[data-display-style="terminal"] .scene-art { background-image: linear-gradient(90deg, #39684b0a 1px, transparent 1px); background-size: 90px 100%; }

/* 10 · Orbit — lilac instrument pods with quiet orbital paths. */
:root[data-display-style="orbit"] {
  --scene-bg: #e9e3f5; --scene-ink: #504270; --scene-line: #b7a8d2; --scene-accent: #74549e;
  --card-bg: #faf7ff; --card-ink: #504270; --card-border: #b7a8d2;
  --screen-bg: #e8e0f4; --screen-ink: #504270; --scene-radius: 28px; --scene-shadow: inset 0 2px 0 #fff, 0 8px 0 #c5b7da, 0 18px 40px #50427015;
}
:root[data-display-style="orbit"] .code-card { border-radius: 60px 18px 60px 18px !important; }
:root[data-display-style="orbit"] .card-code-value { font-weight: 400; border-radius: 50px !important; }
:root[data-display-style="orbit"] .scene-art i { width: 240px; height: 90px; border: 1px solid #74549e35; border-radius: 50%; transform: rotate(-25deg); animation: orbit-turn 35s linear infinite; }
:root[data-display-style="orbit"] .scene-art i::after { content: ""; position: absolute; width: 9px; height: 9px; background: #74549e65; border-radius: 50%; left: 30px; top: 8px; }

/* 11 · Racing — scarlet timing boards, checker flags and cut corners. */
:root[data-display-style="racing"] {
  --scene-bg: #eee9de; --scene-ink: #493b37; --scene-line: #c0b2a4; --scene-accent: #be303a;
  --card-bg: #be303a; --card-ink: #fff4dc; --card-border: #842932;
  --screen-bg: #fff4dc; --screen-ink: #842932; --scene-radius: 4px; --scene-shadow: 8px 8px 0 #842932;
}
:root[data-display-style="racing"] .code-card { border-radius: 4px 36px 4px 4px !important; border-width: 0 !important; border-left: 9px solid #842932 !important; }
:root[data-display-style="racing"] .card-code-value { font-family: Impact, "Arial Narrow", sans-serif; font-style: italic; letter-spacing: .06em; }
:root[data-display-style="racing"] .code-name { font-style: italic; text-transform: uppercase; }
:root[data-display-style="racing"] .progress-value { background: #fff4dc !important; }
:root[data-display-style="racing"] .scene-art { background: repeating-conic-gradient(#493b3712 0 25%, transparent 0 50%) 0 100% / 32px 32px; mask-image: linear-gradient(transparent 70%, #000); }

@keyframes soft-float { to { transform: translateY(-18px) rotate(8deg); } }
@keyframes pixel-hop { 50% { transform: translate(18px, -18px); } 100% { transform: translate(36px, 0); } }
@keyframes cloud-drift { to { transform: translateX(70px); } }
@keyframes ink-dash { to { transform: translateX(30px) rotate(-28deg); opacity: .3; } }
@keyframes orbit-turn { to { transform: rotate(335deg); } }
:root[data-display-style] .code-grid:is(.is-dense, .is-packed, .is-ultra, .is-extreme) .code-card { padding: 14px; gap: 14px; }
:root[data-display-style] .code-grid.is-extreme { gap: 14px; }
:root[data-motion="off"] .scene-art i,
:root[data-page-hidden="true"] .scene-art i { animation-play-state: paused !important; }
:root[data-motion="off"] .code-card,
:root[data-motion="off"] .card-code-value { animation: none !important; transition: none !important; }
@media (max-width: 700px) {
  .style-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .style-controls { width: 100%; }
  .style-controls select { flex: 1; max-width: none; min-width: 0; }
  .style-control { padding-inline: 9px; }
  .style-footer { font-size: .65rem; flex-wrap: wrap; }
  :root[data-display-style] .code-stage,
  :root[data-display-style] .center-state,
  :root[data-display-style] .auth-panel { min-height: calc(100dvh - 180px); }
  :root[data-display-style] .display-shell { min-height: calc(100dvh - 180px); }
  :root[data-display-style] .code-stage { padding-inline: 18px; }
  :root[data-display-style] .code-grid { gap: 24px; }
  :root[data-display-style] .scene-art i { opacity: .5; }
}
@media (max-width: 380px) {
  .style-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .style-controls select { width: 100%; grid-column: 1 / -1; }
  :root[data-display-style] .code-stage,
  :root[data-display-style] .center-state,
  :root[data-display-style] .auth-panel,
  :root[data-display-style] .display-shell { min-height: calc(100dvh - 220px); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-art i { animation: none !important; }
  :root[data-display-style] .code-card,
  :root[data-display-style] .card-code-value { animation: none !important; transition: none !important; }
}