:root {
  color-scheme: dark;
  --gold: #e4bd65;
  --brass: #a66d1f;
  --ink: #070604;
  --marble: #eee9dd;
  --line: rgba(228, 189, 101, 0.52);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-height: 100%; background: #030302; }

html,
body,
a,
button,
input,
select,
textarea {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23e4bd65' stroke-width='1.6'%3E%3Cpath d='M16 2 29 24H3Z'/%3E%3Cpath d='M16 30 3 8h26Z'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23e4bd65' stroke='%23310'/%3E%3C/g%3E%3C/svg%3E") 16 16,
    auto;
}

body:active,
button:active,
a:active {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23fff6b8' stroke-width='2'%3E%3Cpath d='M16 2 29 24H3Z'/%3E%3Cpath d='M16 30 3 8h26Z'/%3E%3Ccircle cx='16' cy='16' r='6' fill='%23fff2a0' stroke='%23f5bd28'/%3E%3C/g%3E%3C/svg%3E") 16 16,
    auto;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  background:
    linear-gradient(rgba(3, 3, 2, 0.24), rgba(3, 3, 2, 0.72)),
    url("./homepage-background.png") center / cover fixed,
    #030302;
}

body[data-page="decker"] {
  overflow: hidden;
  background: #050403;
}

body[data-page="tome"] {
  background-image: linear-gradient(rgba(3,3,2,0.18), rgba(3,3,2,0.42)), url("./tome-background.png");
}

body[data-page="portal"] {
  background-image: url("./portal-background.png");
}

body[data-page="council"] {
  background-image: linear-gradient(rgba(3,3,2,0.12), rgba(3,3,2,0.34)), url("./council-background.png");
}

body[data-page="store"] {
  background-image:
    linear-gradient(rgba(3,3,2,0.08), rgba(3,3,2,0.78)),
    url("./exchange-background.png");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  overflow-x: hidden;
}

body[data-page="decker"],
body[data-page="tome"],
body[data-page="portal"],
body[data-page="council"],
body[data-page="store"],
body[data-page="sound"] {
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

body[data-page="sound"] {
  min-height: 100vh;
  color: #f3dda5;
  background-image:
    linear-gradient(rgba(3,3,2,0.18), rgba(3,3,2,0.72)),
    url("./decker-background.png");
  overflow-x: hidden;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }

.site-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.page-panel {
  width: min(1120px, 100%);
  min-height: min(760px, calc(100vh - 56px));
  padding: clamp(24px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(226,219,204,0.91)),
    repeating-linear-gradient(118deg, transparent 0 60px, rgba(174,125,40,0.15) 61px, transparent 64px);
  color: #171008;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.34),
    0 30px 90px rgba(0,0,0,0.7);
}

.exchange-shell {
  width: min(1180px, calc(100% - 28px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 0 420px;
  display: grid;
  gap: 18px;
}

.exchange-notice {
  position: sticky;
  z-index: 12;
  top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255,229,155,0.72);
  border-radius: 8px;
  color: #f8e4a6;
  background: rgba(5,4,3,0.9);
  box-shadow: 0 14px 36px rgba(0,0,0,0.42);
  font: 13px/1.4 "Segoe UI", sans-serif;
}

.exchange-notice strong {
  display: block;
  color: #fff2b7;
  margin-bottom: 2px;
}

.exchange-notice button {
  width: 34px;
  min-height: 34px;
  border: 1px solid rgba(240,217,140,0.78);
  border-radius: 50%;
  color: #f8dc87;
  background: #111;
}

.exchange-hero {
  min-height: min(68vh, 720px);
  display: grid;
  align-items: end;
  padding: clamp(26px, 6vw, 76px);
}

.exchange-hero-copy {
  width: min(640px, 100%);
  padding: 18px 0;
  color: #fff0bd;
  text-shadow: 0 2px 12px rgba(0,0,0,0.74);
}

.exchange-hero-copy h1 {
  margin: 7px 0 10px;
  color: #ffe7a2;
  font-size: clamp(48px, 9vw, 112px);
  line-height: 0.9;
}

.exchange-hero-copy p {
  color: #f4deaa;
  font: 18px/1.45 "Segoe UI", sans-serif;
}

.exchange-account-gate {
  margin: 0 0 12px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr minmax(180px, 230px);
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(240,217,140,0.55);
  background: rgba(5,5,4,0.86);
  box-shadow: 0 18px 48px rgba(0,0,0,0.34);
}

.exchange-account-gate h2 {
  margin: 4px 0 6px;
  color: #ffe7a2;
  font-size: 22px;
}

.exchange-account-gate p {
  margin: 0;
  color: #d9c18a;
  font: 14px/1.45 "Segoe UI", sans-serif;
}

.exchange-account-actions,
.auth-escape-links {
  display: grid;
  gap: 8px;
}

.auth-escape-links {
  grid-template-columns: 1fr 1fr;
}

.auth-escape-links .action,
.exchange-account-actions .action {
  width: 100%;
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240,217,140,0.68);
  color: #ffe7a2;
  background: rgba(0,0,0,0.58);
  text-decoration: none;
  font: 900 13px/1 "Segoe UI", sans-serif;
}

.auth-escape-links .action:hover,
.exchange-account-actions .action:hover {
  color: #111;
  background: #f0d98c;
}

.exchange-trade-floor {
  margin-bottom: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  border: 1px solid rgba(255,222,132,0.7);
  background: linear-gradient(135deg, rgba(11,8,3,0.92), rgba(34,21,4,0.84));
  box-shadow: 0 18px 54px rgba(0,0,0,0.42), inset 0 0 30px rgba(204,145,42,0.08);
}

.exchange-trade-copy h2 {
  margin: 6px 0 8px;
  color: #ffe7a2;
  font-size: 32px;
}

.exchange-trade-copy p {
  max-width: 620px;
  color: #ead49d;
  font: 15px/1.48 "Segoe UI", sans-serif;
}

.exchange-rule-strip {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exchange-rule-strip span {
  padding: 7px 10px;
  border: 1px solid rgba(240,217,140,0.46);
  color: #ffe9a8;
  background: rgba(0,0,0,0.42);
  font: 700 12px/1 "Segoe UI", sans-serif;
}

.exchange-trade-draft {
  display: grid;
  gap: 10px;
}

.exchange-trade-draft label {
  display: grid;
  gap: 5px;
  color: #ffe7a2;
  font: 700 12px/1.2 "Segoe UI", sans-serif;
}

.exchange-trade-draft input,
.exchange-trade-draft select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(240,217,140,0.5);
  background: rgba(0,0,0,0.74);
  color: #fff1bf;
  padding: 8px 10px;
}

.exchange-trade-draft button {
  min-height: 40px;
  border: 1px solid rgba(255,230,157,0.86);
  color: #110a02;
  background: linear-gradient(180deg, #ffe58f, #b97818);
  font-weight: 900;
}

.exchange-status {
  min-height: 18px;
  color: #d9c18a;
  font: 12px/1.35 "Segoe UI", sans-serif;
}

.exchange-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.exchange-panel {
  min-height: 230px;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid rgba(228,189,101,0.58);
  border-radius: 8px;
  color: #f3dda5;
  background: rgba(5,4,3,0.84);
  box-shadow: 0 14px 38px rgba(0,0,0,0.42);
}

.exchange-panel.featured {
  border-color: rgba(255,230,157,0.86);
  background: rgba(21,13,4,0.9);
}

.exchange-panel h2 {
  color: #ffe7a2;
  font-size: 25px;
}

.exchange-panel p {
  color: #d9c18a;
  font: 14px/1.45 "Segoe UI", sans-serif;
}

.exchange-panel button,
.exchange-panel .action {
  width: 100%;
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #f0d98c;
  border-radius: 6px;
  color: #120d04;
  background: linear-gradient(#fff0a4, #b97a1a);
  font: 900 12px/1 "Segoe UI", sans-serif;
  text-decoration: none;
}

.exchange-panel button:disabled {
  opacity: 0.62;
  color: #dcc274;
  background: #111;
}

@media (max-width: 1180px) {
  .exchange-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exchange-trade-floor { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .exchange-shell {
    width: min(100% - 20px, 680px);
    padding-top: 14px;
  }

  .exchange-grid { grid-template-columns: 1fr; }

  .exchange-account-gate {
    grid-template-columns: 1fr;
  }

  .auth-escape-links {
    grid-template-columns: 1fr;
  }

  .exchange-hero {
    min-height: 58vh;
    padding: 22px 8px;
  }

  .exchange-notice { grid-template-columns: 1fr; }
}

.page-panel.dark {
  color: #ead49b;
  background:
    linear-gradient(145deg, rgba(20,16,12,0.92), rgba(2,2,2,0.96)),
    #050403;
}

body[data-page="home"] .site-shell {
  place-items: start;
}

body[data-page="home"] .page-panel {
  width: min(760px, calc(100% - 390px));
  min-height: auto;
  margin-top: 8vh;
  padding: clamp(22px, 4vw, 52px);
  border: 0;
  background: linear-gradient(90deg, rgba(3, 3, 2, 0.82), rgba(3, 3, 2, 0.3), transparent);
  box-shadow: none;
}

body[data-page="tome"] .page-panel {
  width: min(520px, 92vw);
  min-height: auto;
  margin: 0 auto auto 3vw;
  color: #ead49b;
  background: rgba(4,3,2,0.82);
}

body[data-page="tome"] {
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

.tome-shell {
  width: min(1500px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.tome-index {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(228,189,101,0.54);
  border-radius: 14px;
  color: #e7c879;
  background: rgba(4,3,2,0.91);
  box-shadow: 0 20px 48px rgba(0,0,0,0.62);
}

.tome-index h1 {
  margin: 8px 0 18px;
  font-size: 38px;
}

.tome-search-label {
  display: grid;
  gap: 6px;
  color: #d4a846;
  font: 800 11px/1.2 "Segoe UI", sans-serif;
  text-transform: uppercase;
}

.tome-search-label input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #8c6327;
  border-radius: 7px;
  color: #f1dfb5;
  background: #10100f;
}

.tome-index nav {
  display: grid;
  gap: 3px;
  margin-top: 16px;
}

.tome-index nav a {
  padding: 8px 9px;
  border-radius: 6px;
  color: #d9bd78;
  text-decoration: none;
  font: 700 12px/1.2 "Segoe UI", sans-serif;
}

.tome-index nav a:hover,
.tome-index nav a:focus-visible {
  color: #160e03;
  background: #e4bd65;
}

.tome-search-status {
  margin-top: 14px;
  color: #9b875b;
  font: 11px/1.3 "Segoe UI", sans-serif;
}

.tome-content {
  display: grid;
  gap: 18px;
}

.tome-cover,
.tome-section {
  padding: clamp(22px, 4vw, 52px);
  border: 1px solid rgba(174,121,38,0.62);
  border-radius: 15px;
  color: #20170c;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.95), rgba(225,216,197,0.93)),
    repeating-linear-gradient(118deg, transparent 0 54px, rgba(174,125,40,0.13) 55px, transparent 58px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.38), 0 18px 50px rgba(0,0,0,0.55);
  scroll-margin-top: 20px;
}

.tome-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 28px;
  align-items: center;
}

.tome-cover img {
  width: 100%;
  max-height: 330px;
  object-fit: cover;
  object-position: center;
  border: 1px solid #a97525;
  border-radius: 10px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.tome-cover h2,
.tome-section > h2 {
  margin: 0 0 16px;
  color: #8f5b15;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
}

.tome-section h3 {
  margin: 24px 0 9px;
  color: #9b671a;
  font-size: 21px;
}

.tome-section p,
.tome-section li,
.tome-cover p {
  font: 16px/1.62 "Segoe UI", sans-serif;
}

.tome-section li + li { margin-top: 6px; }

.tome-callout {
  margin-top: 18px;
  padding: 15px 17px;
  border-left: 5px solid #b77c20;
  background: rgba(183,124,32,0.12);
  font: 15px/1.55 "Segoe UI", sans-serif;
}

.tome-callout strong {
  display: block;
  color: #8f5b15;
  margin-bottom: 3px;
}

.tome-card-backs {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  justify-content: center;
  gap: 20px;
}

.tome-card-backs figure,
.tome-wide-figure {
  margin: 0;
}

.tome-card-backs img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.36);
}

.tome-card-backs figcaption,
.tome-wide-figure figcaption {
  margin-top: 7px;
  color: #6f5d3c;
  font: 12px/1.4 "Segoe UI", sans-serif;
  text-align: center;
}

.tome-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.tome-rules-grid > div {
  padding: 16px;
  border: 1px solid rgba(154,104,27,0.34);
  border-radius: 10px;
  background: rgba(255,255,255,0.34);
}

.tome-rules-grid h3 { margin-top: 0; }

.tome-definition-list {
  display: grid;
  gap: 7px;
}

.tome-definition-list > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.3fr) 1fr;
  gap: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(143,91,21,0.22);
  font: 14px/1.45 "Segoe UI", sans-serif;
}

.tome-definition-list strong { color: #8f5b15; }

.tome-wide-figure {
  margin-top: 22px;
}

.tome-wide-figure img {
  width: 100%;
  max-height: 980px;
  object-fit: contain;
  border: 1px solid #8f5b15;
  border-radius: 10px;
  background: #0a0805;
}

.archetype-grid {
  display: grid;
  gap: 16px;
}

.archetype-entry {
  min-height: 230px;
  display: grid;
  grid-template-columns: minmax(180px, 34%) 1fr;
  gap: 20px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(143,91,21,0.38);
  border-radius: 12px;
  background: rgba(255,255,255,0.32);
}

.archetype-entry img {
  width: 100%;
  height: 100%;
  max-height: 330px;
  object-fit: cover;
}

.archetype-entry > div {
  padding: 18px 20px 18px 0;
}

.archetype-entry h3 { margin-top: 0; }
.search-hidden { display: none !important; }

@media (max-width: 900px) {
  .tome-shell { grid-template-columns: 1fr; padding: 10px; }
  .tome-index {
    position: relative;
    top: auto;
    max-height: none;
  }
  .tome-index nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tome-cover { grid-template-columns: 1fr; }
  .tome-cover img { max-width: 260px; }
}

@media (max-width: 620px) {
  .archetype-entry { grid-template-columns: 1fr; }
  .archetype-entry img { max-height: 280px; }
  .archetype-entry > div { padding: 0 18px 18px; }
  .tome-definition-list > div { grid-template-columns: 1fr; gap: 3px; }
}

body[data-page="portal"] .page-panel {
  width: min(650px, 68vw);
  min-height: min(650px, 68vw);
  padding: clamp(34px, 7vw, 90px);
  display: grid;
  align-content: center;
  color: #ead49b;
  border-color: rgba(228,189,101,0.5);
  border-radius: 50%;
  background: rgba(1,1,1,0.82);
  text-align: center;
}

body[data-page="portal"] .page-panel p { margin-inline: auto; }

body[data-page="council"] .page-panel {
  width: min(470px, 42vw);
  min-height: auto;
  margin-top: -38vh;
  padding: clamp(20px, 3vw, 38px);
  background: rgba(244,238,224,0.86);
}

.eyebrow {
  color: #9b671a;
  font: 800 12px/1.2 "Segoe UI", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1 {
  max-width: 820px;
  margin: 10px 0 14px;
  color: #c58b27;
  font-size: clamp(42px, 8vw, 92px);
  line-height: 0.94;
  text-shadow: -1px -1px #080603, 1px 1px rgba(255,255,255,0.42);
}

h2 { color: #a66d1f; }

p {
  max-width: 760px;
  font: 17px/1.65 "Segoe UI", sans-serif;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.cookie-consent {
  position: fixed;
  z-index: 80;
  left: 18px;
  right: 18px;
  bottom: 18px;
  max-width: 820px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(228,189,101,0.62);
  border-radius: 14px;
  color: #ead49b;
  background: rgba(5,4,3,0.94);
  box-shadow: 0 12px 36px rgba(0,0,0,0.62);
  font: 13px/1.45 "Segoe UI", sans-serif;
}

.cookie-consent strong {
  display: block;
  margin-bottom: 4px;
  color: #f3cf73;
  font-family: Georgia, "Times New Roman", serif;
}

.cookie-consent button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #d7a747;
  border-radius: 9px;
  color: #130d04;
  background: linear-gradient(#ffe79c, #b97818);
  font-weight: 800;
}

.cookie-consent.is-hidden { display: none; }

.action {
  min-height: 48px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bc842a;
  border-radius: 999px;
  color: #f4d98d;
  background: linear-gradient(180deg, #23190d, #050403);
  text-decoration: none;
  font: 800 13px/1 "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.action.primary {
  min-height: 58px;
  padding-inline: 25px;
  color: #160e03;
  background: linear-gradient(180deg, #ffeaa5, #c88c28);
  border-color: #fff0ae;
  font-size: 15px;
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.route-card {
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(147, 97, 23, 0.42);
  border-radius: 14px;
  background: rgba(255,255,255,0.34);
}

.route-card strong {
  display: block;
  color: #9b671a;
  font-size: 20px;
}

.route-card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.cypher-nav {
  position: fixed;
  z-index: 50;
  right: 22px;
  bottom: 22px;
  width: min(272px, calc(100vw - 36px));
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent url("./cypher.png") center / contain no-repeat;
  box-shadow: 0 18px 55px rgba(0,0,0,0.72), 0 0 25px rgba(228,189,101,0.2);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.65));
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.cypher-nav.dragging { cursor: grabbing; }
.cypher-nav a { cursor: pointer; }

.cypher-nav.collapsed {
  width: 72px;
  border-radius: 16px;
  background-image: url("./cypherdex-cypher-button.png");
  box-shadow: 0 0 24px rgba(228,189,101,0.34), 0 12px 28px rgba(0,0,0,0.7);
}

.cypher-nav.collapsed .cypher-link,
.cypher-nav.collapsed .cypher-display {
  display: none;
}

body[data-page="home"] .cypherdex-ai-toggle,
body[data-page="home"] .cypherdex-ai-panel {
  display: none;
}

.cypher-toggle-center {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 14%;
  height: 14%;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.cypher-nav.collapsed .cypher-toggle-center {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  transform: none;
}

.cypher-link {
  position: absolute;
  width: 21px;
  height: 21px;
  border: 1px solid #fff0a4;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff8c9 0 10%, #f5ca58 28%, #a76312 68%, #251305 100%);
  text-decoration: none;
  box-shadow:
    0 0 8px rgba(255, 215, 104, 0.92),
    0 0 18px rgba(218, 143, 31, 0.55);
  transform: translate(-50%, -50%);
  transition: transform 120ms ease, filter 120ms ease;
}

.cypher-link:hover,
.cypher-link:focus-visible,
.cypher-link.active {
  outline: 2px solid #fff;
  outline-offset: 3px;
  filter: brightness(1.25);
  transform: translate(-50%, -50%) scale(1.18);
}

.cypher-home { left: 50%; top: 2.2%; }
.cypher-tome { left: 82%; top: 18%; }
.cypher-decker { left: 98%; top: 50%; }
.cypher-portal { left: 82%; top: 82%; }
.cypher-records { left: 50%; top: 97.8%; }
.cypher-council { left: 18%; top: 82%; }
.cypher-store { left: 2%; top: 50%; }
.cypher-game { left: 18%; top: 18%; }
.cypher-sound { left: 50%; top: 18%; }
.cypher-continuum { left: 50%; top: 82%; }

.cypher-display {
  position: absolute;
  z-index: 2;
  left: 25%;
  right: 25%;
  top: 64%;
  min-height: 42px;
  padding: 9px 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 189, 101, 0.68);
  border-radius: 8px;
  color: #f4d88b;
  background: rgba(4, 3, 2, 0.86);
  box-shadow: inset 0 0 16px rgba(228, 189, 101, 0.12);
  font: 800 13px/1.1 "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.page-status {
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 4px solid #b77c20;
  background: rgba(183,124,32,0.11);
  font: 14px/1.5 "Segoe UI", sans-serif;
}

.decker-shell {
  width: min(100vw, 66.6667vh);
  height: min(100vh, 150vw);
  min-height: 0;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  position: relative;
  overflow: visible;
  background: url("./decker-background.png") center / 100% 100% no-repeat;
  box-shadow: 0 0 70px rgba(0,0,0,0.78);
}

.decker-counter {
  position: absolute;
  z-index: 4;
  top: 7.2%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 74px;
  padding: 7px 12px;
  border: 1px solid #b77c20;
  border-radius: 999px;
  color: #f2ca64;
  background: rgba(4,3,2,0.88);
  font: 800 12px/1 "Segoe UI", sans-serif;
  text-align: center;
}

.decker-card-stage {
  position: absolute;
  z-index: 3;
  left: 29.4%;
  top: 10.5%;
  width: 41.2%;
  height: 54.5%;
  display: grid;
  place-items: center;
}

.decker-card {
  position: relative;
  width: min(310px, 73%);
  aspect-ratio: 0.66;
  overflow: hidden;
  border: 2px solid var(--card-color, #d7a94b);
  border-radius: 14px;
  color: #f4d789;
  background: #090807;
  box-shadow: 0 0 32px rgba(0,0,0,0.5), 0 0 20px color-mix(in srgb, var(--card-color) 40%, transparent);
}

.decker-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.decker-card-copy {
  position: absolute;
  inset: auto 0 0;
  padding: 34px 14px 13px;
  background: linear-gradient(transparent, rgba(3,3,2,0.94) 42%);
}

.decker-card-copy strong {
  display: block;
  color: #ffe6a0;
  font-size: 20px;
}

.decker-card-copy small {
  display: block;
  margin-top: 5px;
  color: #e6bd58;
  font: 700 10px/1.3 "Segoe UI", sans-serif;
}

.decker-card-copy p {
  margin: 8px 0 0;
  color: #f1d77f;
  font-size: 11px;
  line-height: 1.35;
  max-height: 74px;
  overflow: hidden;
}

.decker-arrow {
  position: absolute;
  z-index: 5;
  top: 44%;
  width: 40px;
  height: 46px;
  border: 1px solid #b77c20;
  border-radius: 7px;
  color: #f5c74d;
  background: rgba(3,3,2,0.92);
  cursor: pointer;
  font-size: 24px;
}

.decker-arrow.previous { left: 17.8%; }
.decker-arrow.next { right: 18.8%; }

.decker-controls {
  position: absolute;
  z-index: 5;
  left: 17.8%;
  right: 18.5%;
  bottom: 8.3%;
  max-height: 25%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  color: #f1c55f;
  font: 700 12px/1.25 "Segoe UI", sans-serif;
}

.decker-control-panel {
  min-width: 0;
  padding: 9px;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid rgba(183,124,32,0.72);
  border-radius: 8px;
  background: rgba(4,4,5,0.91);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}

.decker-control-panel input,
.decker-control-panel select,
.decker-control-panel button {
  width: 100%;
  min-height: 34px;
  border: 1px solid #61512f;
  border-radius: 6px;
  color: #eee2bd;
  background: #111215;
  padding: 6px 9px;
}

.decker-control-panel button {
  color: #120d04;
  background: linear-gradient(#f0cf76, #b97a1a);
  border-color: #f0d98c;
  cursor: pointer;
  font-weight: 900;
}

.decker-control-panel button.secondary {
  color: #efca69;
  background: #111215;
}

.decker-control-panel button.danger {
  color: #ffd1c6;
  background: #4b1712;
  border-color: #b85445;
}

.deck-counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 9px;
}

.deck-status {
  padding: 7px;
  border-radius: 5px;
  color: #ffc1ad;
  background: rgba(99,25,19,0.64);
}

.deck-status.ready { color: #b9f3c8; background: rgba(19,83,45,0.65); }

.deck-list {
  max-height: 154px;
  overflow: auto;
  display: grid;
  gap: 4px;
  scrollbar-color: #a66d1f #111;
}

.deck-list button {
  min-height: 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  color: #e7c36b;
  background: #0d0d0d;
  text-align: left;
  font-size: 10px;
}

.deck-list button.selected { outline: 1px solid #fff0a4; }

.decker-message {
  min-height: 30px;
  color: #ddc483;
  font-size: 10px;
}

/* Canonical RecordDecker card composition: 300 × 465. */
.decker-card {
  width: min(300px, 94%);
  aspect-ratio: 300 / 465;
  padding: 0;
  border: 2px solid #000;
  border-radius: 15px;
  background: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.92), 0 0 32px rgba(0,0,0,0.62);
  container-type: inline-size;
}

.decker-card.landscape {
  width: min(430px, 98%);
  aspect-ratio: 465 / 300;
}

.codex-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #050505;
}

.codex-card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

.codex-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.1) 30%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0.58) 100%
  );
  pointer-events: none;
}

.codex-record-name {
  position: absolute;
  z-index: 2;
  top: 5.4%;
  left: 5.4%;
  width: 70%;
  overflow: hidden;
  color: #edbd45;
  font: italic 700 8.33cqw/0.92 "Times New Roman", Georgia, serif;
  letter-spacing: -0.35px;
  text-overflow: ellipsis;
  text-shadow: -1px -1px #050505, 1px -1px #050505, -1px 1px #050505, 1px 1px #050505, 0 2px 8px rgba(0,0,0,0.82);
}

.codex-merkaba {
  position: absolute;
  z-index: 3;
  top: 1.4%;
  right: 2.1%;
  width: 21.33cqw;
  height: 21.33cqw;
}

.codex-merkaba-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.82));
}

.codex-icon-slot {
  position: absolute;
  width: 5cqw;
  height: 5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-90%, -45%);
}

.codex-icon-slot.slot-center { top: 47.5%; left: 61%; width: 6cqw; height: 6cqw; }
.codex-icon-slot.slot-top-center { top: 10%; left: 61%; }
.codex-icon-slot.slot-top-left { top: 32%; left: 24%; }
.codex-icon-slot.slot-top-right { top: 31%; left: 95%; }
.codex-icon-slot.slot-bottom-left { top: 67.5%; left: 23%; width: 3.67cqw; height: 3.67cqw; }
.codex-icon-slot.slot-bottom-center { top: 67.5%; left: 90.8%; width: 3.67cqw; height: 3.67cqw; }
.codex-icon-slot.slot-bottom-right { top: 89%; left: 57%; width: 3.67cqw; height: 3.67cqw; }

.codex-slot-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.9));
}

.codex-meta-band {
  position: absolute;
  z-index: 2;
  left: 6.2%;
  right: 6.2%;
  bottom: 30.2%;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: end;
  color: #edbd45;
  font: italic 600 3.67cqw/0.9 "Times New Roman", Georgia, serif;
  text-shadow: -0.65px -0.65px #050505, 0.65px -0.65px #050505, -0.65px 0.65px #050505, 0.65px 0.65px #050505, 0 2px 6px rgba(0,0,0,0.76);
}

.decker-card.landscape .codex-meta-band {
  bottom: 33.5%;
}

.codex-meta-band span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.codex-meta-band span:nth-child(2) { text-align: center; }
.codex-meta-band span:nth-child(3) { text-align: right; }

.codex-ornament {
  grid-column: 1 / -1;
  width: 100%;
  height: 2.67cqw;
  margin-top: 1px;
  object-fit: scale-down;
  filter: drop-shadow(0 0 4px rgba(255,226,148,0.32));
}

.codex-effects {
  position: absolute;
  z-index: 2;
  left: 5.2%;
  right: 5.2%;
  bottom: 8.2%;
  height: 21.8%;
  padding: 1.3% 3% 1.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.codex-effect-text {
  max-width: 100%;
  max-height: 68%;
  overflow: hidden;
  color: #edbd45;
  font: italic 600 5.17cqw/0.92 "Times New Roman", Georgia, serif;
  overflow-wrap: break-word;
  text-shadow: -0.65px -0.65px #050505, 0.65px -0.65px #050505, -0.65px 0.65px #050505, 0.65px 0.65px #050505, 0 2px 8px rgba(0,0,0,0.78);
}

.decker-card.no-flavour .codex-effects {
  bottom: 6.2%;
  height: 26.8%;
  justify-content: center;
}

.decker-card.no-flavour .codex-effect-text {
  max-height: 100%;
}

.decker-card.landscape .codex-effects {
  bottom: 11.4%;
  height: 20%;
  padding-bottom: 0;
}

.decker-card.landscape.no-flavour .codex-effects {
  height: 26%;
}

.codex-flavour {
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #332487;
  font: italic 600 3.67cqw/0.95 "Times New Roman", Georgia, serif;
  text-shadow: -0.75px -0.75px rgba(193,164,78,0.85), 0.75px -0.75px rgba(193,164,78,0.85), -0.75px 0.75px rgba(193,164,78,0.85), 0.75px 0.75px rgba(193,164,78,0.85), 0 2px 6px rgba(0,0,0,0.7);
}

.codex-bottom-strip {
  position: absolute;
  z-index: 3;
  left: 4%;
  right: 4%;
  bottom: 2.1%;
  height: 5.4%;
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  align-items: end;
}

.codex-bottom-strip > span {
  min-height: 8cqw;
  display: flex;
  align-items: flex-end;
}

.codex-bottom-strip > span:nth-child(2) { justify-content: center; }
.codex-bottom-strip > span:nth-child(3) { justify-content: flex-end; }
.decker-card.landscape .codex-bottom-strip {
  bottom: 5.4%;
}
.decker-card.landscape .codex-flavour {
  margin-top: auto;
}
.decker-card .codex-rarity { width: 6.67cqw; height: 6.67cqw; object-fit: contain; }
.decker-card .codex-id-bar { width: 100%; max-width: 37.33cqw; height: 4cqw; object-fit: contain; }
.decker-card .codex-set-icon { width: 8cqw; height: 8cqw; object-fit: contain; }
.decker-card .codex-slot-icon { width: 100%; height: 100%; object-fit: contain; }
.decker-card .codex-merkaba-frame { width: 100%; height: 100%; object-fit: contain; }
.decker-card .codex-ornament { width: 100%; height: 2.67cqw; object-fit: scale-down; }
.asset-failed { display: none !important; }

/* Manifestation Portal */
body[data-page="portal"] {
  min-height: 100vh;
  background: #e8e2d4 url("./portal-background.png") center top / min(100vw, 1254px) auto no-repeat;
  color: #24170a;
}

.portal-shell {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 22px 22px 90px;
}

.portal-title {
  width: min(1050px, 100%);
  margin: 0 auto 12px;
}

.portal-title h1 {
  margin: 5px 0;
  font-size: clamp(38px, 6vw, 70px);
}

.portal-auth {
  width: min(850px, calc(100% - 30px));
  margin: 9vh auto 28vh;
  padding: clamp(22px, 4vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1fr);
  gap: 30px;
  align-items: center;
  border: 1px solid rgba(228,189,101,0.68);
  border-radius: 18px;
  color: #ead49b;
  background: rgba(3,3,3,0.92);
  box-shadow: 0 22px 60px rgba(0,0,0,0.62);
}

.portal-auth h2,
.player-records h2,
.player-records h3 {
  color: #b77c20;
}

.portal-auth p { color: #c9b888; }

.portal-auth-form,
.manifestation-form {
  display: grid;
  gap: 10px;
}

.portal-auth-form label,
.manifestation-form label,
.player-records label {
  display: grid;
  gap: 5px;
  color: #c59235;
  font: 800 11px/1.2 "Segoe UI", sans-serif;
}

.portal-auth-form input,
.manifestation-form input,
.manifestation-form select,
.manifestation-form textarea,
.player-records input,
.player-records textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #74501d;
  border-radius: 7px;
  color: #f0dfb6;
  background: #11100e;
}

.manifestation-form textarea,
.player-records textarea { resize: vertical; }

.portal-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.portal-auth button,
.manifestation-form button,
.player-records button {
  min-height: 38px;
  border: 1px solid #b77c20;
  border-radius: 7px;
  color: #160e03;
  background: linear-gradient(#f2d680, #b97818);
  cursor: pointer;
  font: 900 12px/1 "Segoe UI", sans-serif;
}

.portal-auth button.secondary,
.manifestation-form button.secondary {
  color: #e4bd65;
  background: #11100e;
}

.portal-auth .google-auth-button {
  color: #202124;
  background: #fff;
  border-color: #dadce0;
}

.portal-auth .google-auth-button::before {
  content: "G";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 9px;
  border-radius: 50%;
  color: #4285f4;
  background: #fff;
  font: 900 16px/1 Arial, sans-serif;
}

.portal-auth-tabs button.active,
.manifestation-form button.primary {
  color: #07150b;
  background: linear-gradient(#7be5a5, #239353);
  border-color: #83efad;
}

.manifestation-form button.danger,
.player-records button.danger {
  color: #ffd4ca;
  background: #511b14;
  border-color: #a84a3a;
}

.portal-status {
  min-height: 32px;
  padding: 8px 10px;
  border-left: 3px solid #a66d1f;
  color: #cdbb8c;
  background: rgba(166,109,31,0.1);
  font: 11px/1.4 "Segoe UI", sans-serif;
}

.portal-workspace {
  display: grid;
  gap: 30px;
}

.portal-workspace.security-preview {
  margin-top: 18px;
}

.portal-workspace.security-preview .portal-builder-panel,
.portal-workspace.security-preview .player-records {
  display: none !important;
}

.portal-workspace.security-preview .portal-generator-panel {
  pointer-events: auto;
}

.portal-ring-stage {
  position: relative;
  width: min(1180px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  background: url("./portal-background.png") center / 100% 100% no-repeat;
}

.portal-core {
  width: 66%;
  height: 66%;
  padding: clamp(18px, 3.2vw, 42px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(228,189,101,0.42);
  border-radius: 50%;
  color: #ead49b;
  background: rgba(2,2,2,0.96);
  scrollbar-color: #a66d1f #090807;
}

.portal-card-column {
  display: grid;
  align-content: center;
  gap: 10px;
  width: 100%;
}

.portal-card-preview {
  width: min(270px, 100%);
  aspect-ratio: 300 / 465;
  margin: auto;
  position: relative;
  overflow: hidden;
  border: 2px solid #000;
  border-radius: 15px;
  color: #e4bd65;
  background: #090807;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.92), 0 0 25px rgba(228,189,101,0.2);
}

.portal-card-preview.landscape {
  width: min(430px, 100%);
  aspect-ratio: 465 / 300;
}

.portal-preview-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.portal-preview-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(0,0,0,0.84));
}

.portal-preview-name,
.portal-preview-meta,
.portal-preview-effect,
.portal-preview-flavour {
  position: absolute;
  z-index: 2;
  left: 6%;
  right: 6%;
  color: #edbd45;
  font-family: "Times New Roman", Georgia, serif;
  font-style: italic;
  text-align: center;
  text-shadow: -1px -1px #050505, 1px -1px #050505, -1px 1px #050505, 1px 1px #050505;
}

.portal-preview-name {
  top: 5%;
  right: 25%;
  font-size: clamp(15px, 2vw, 24px);
  font-weight: 700;
  text-align: left;
}

.portal-preview-meta { bottom: 31%; font-size: 11px; }
.portal-preview-effect { bottom: 12%; max-height: 17%; overflow: hidden; font-size: 15px; line-height: 0.95; }
.portal-preview-flavour { bottom: 5%; color: #7767cf; font-size: 10px; }
.portal-card-preview.no-flavour .portal-preview-effect { bottom: 6%; max-height: 27%; }
.portal-card-preview.no-flavour .portal-preview-flavour { display: none; }
.portal-card-preview.landscape .portal-preview-meta { bottom: 34%; }
.portal-card-preview.landscape .portal-preview-effect { bottom: 9%; max-height: 23%; }
.portal-card-preview.landscape.no-flavour .portal-preview-effect { max-height: 28%; }

.portal-card-empty {
  height: 100%;
  padding: 20px;
  display: grid;
  place-items: center;
  color: #998761;
  font: 12px/1.5 "Segoe UI", sans-serif;
  text-align: center;
}

.portal-image-drop {
  min-height: 52px;
  padding: 9px;
  display: grid;
  place-items: center;
  border: 1px dashed #a66d1f;
  border-radius: 7px;
  color: #d8b85f;
  background: rgba(166,109,31,0.08);
  text-align: center;
  cursor: pointer;
}

.portal-image-drop.drag-over { background: rgba(166,109,31,0.25); }

.portal-generator-panel {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: auto;
  bottom: 1.2%;
  width: min(760px, 78%);
  margin: 0;
  padding: 12px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(228,189,101,0.58);
  border-radius: 8px;
  color: #f3dda5;
  background: rgba(5,4,3,0.86);
  box-shadow: 0 14px 38px rgba(0,0,0,0.42), inset 0 0 22px rgba(228,189,101,0.08);
  backdrop-filter: blur(4px);
}

.portal-generate-artwork {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 10px;
  align-items: end;
}

.portal-generate-artwork label {
  display: grid;
  gap: 5px;
  color: #ffe7a2;
  font: 800 11px/1.2 "Segoe UI", sans-serif;
}

.portal-generate-artwork textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  padding: 8px;
  border: 1px solid rgba(240,217,140,0.5);
  border-radius: 7px;
  color: #fff1bf;
  background: rgba(0,0,0,0.74);
  font: 12px/1.35 "Segoe UI", sans-serif;
}

.portal-generate-artwork button {
  min-height: 42px;
  border: 1px solid #f0d98c;
  border-radius: 7px;
  color: #120d04;
  background: linear-gradient(#fff0a4, #b97a1a);
  font: 900 12px/1 "Segoe UI", sans-serif;
}

.portal-generate-artwork button:disabled {
  opacity: 0.62;
}

.portal-image-pipeline {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(166,109,31,0.42);
  color: #bda876;
  background: #080706;
  font: 10px/1.35 "Segoe UI", sans-serif;
  text-align: center;
}

.portal-image-pipeline strong { color: #e1b84f; }

.manifestation-form {
  align-content: center;
  min-width: 0;
}

.portal-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-form-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.portal-checkbox {
  align-content: center;
  grid-template-columns: auto 1fr !important;
  align-items: center;
}

.portal-checkbox input {
  width: 18px;
  min-height: 18px;
}

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

.portal-builder-panel {
  width: min(1180px, 100%);
  margin: -10px auto 0;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid #b88937;
  border-radius: 18px;
  color: #ead49b;
  background: rgba(3,3,3,0.94);
  box-shadow: 0 22px 65px rgba(0,0,0,0.48);
}

.portal-builder-heading,
.records-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.portal-builder-heading h2,
.records-panel-heading h3 { margin: 4px 0; color: #c9922e; }
.records-panel-heading p { margin: 4px 0 0; color: #786441; font-size: 12px; }

.portal-builder-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.portal-artwork-controls { display: grid; gap: 10px; }
.portal-records-legacy { display: none !important; }

/* Personal Records */
body[data-page="records"] {
  min-height: 100vh;
  color: #251708;
  background: #160e07 url("./decker-background.png") center top / cover fixed no-repeat;
}

.records-shell {
  width: min(1380px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 24px 120px;
}

.records-title {
  width: min(1180px, 100%);
  margin: 0 auto 18px;
  color: #e2b14e;
  text-shadow: 0 2px 8px #000;
}

.records-title h1 {
  margin: 5px 0;
  font-size: clamp(40px, 6vw, 72px);
}

.records-workspace { background: rgba(244,237,219,0.96); }
.records-primary-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(250px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
}

.records-panel {
  padding: 16px;
  border: 1px solid rgba(143,91,21,0.3);
  border-radius: 10px;
  background: rgba(255,255,255,0.38);
}

.records-panel > label,
.deck-save-controls label,
.sound-upload-controls label {
  display: grid;
  gap: 5px;
  color: #8f5b15;
  font: 800 11px/1.2 "Segoe UI", sans-serif;
}

.records-panel input,
.records-panel select,
.records-panel textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(143,91,21,0.55);
  border-radius: 7px;
  color: #2a1a08;
  background: rgba(255,255,255,0.78);
}

.records-panel button,
.deck-vault-actions button,
.sound-library-item button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #a56a17;
  border-radius: 7px;
  color: #160e03;
  background: linear-gradient(#f2d680, #b97818);
  cursor: pointer;
  font-weight: 800;
}

.records-panel button.danger,
.deck-vault-actions button.danger,
.sound-library-item button.danger {
  color: #ffd4ca;
  background: #511b14;
  border-color: #a84a3a;
}

.deck-save-controls {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.8fr) 90px auto;
  gap: 9px;
  align-items: end;
}

.alignment-color-label input[type="color"] {
  padding: 3px;
  cursor: pointer;
}

.deck-vault-list,
.sound-library-list {
  margin-top: 14px;
  display: grid;
  gap: 9px;
}

.deck-vault-item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(143,91,21,0.3);
  border-radius: 9px;
  background: rgba(255,255,255,0.52);
}

.deck-book-icon {
  width: 42px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid #e3bb57;
  border-radius: 4px 8px 8px 4px;
  color: #f8dc87;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.38), transparent 24%),
    var(--deck-color, #c9922e);
  box-shadow: inset 4px 0 rgba(0,0,0,0.24), 0 4px 10px rgba(0,0,0,0.24);
  font: 900 20px/1 Georgia, serif;
}

.deck-vault-copy { display: grid; gap: 4px; }
.deck-vault-copy strong { color: #65400e; }
.deck-vault-copy small { color: #796746; }
.deck-vault-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.records-sound-library { margin-top: 14px; }
.sound-upload-controls {
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.6fr 1.1fr auto;
  gap: 9px;
  align-items: end;
}

.sound-library-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(143,91,21,0.28);
  border-radius: 9px;
  background: rgba(255,255,255,0.48);
}

.sound-library-item > div { display: grid; gap: 3px; }
.sound-library-item small { color: #796746; }
.sound-play-button { width: 40px; border-radius: 50% !important; }

.records-ai-opt-out {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #65400e;
  font: 800 13px/1.3 "Segoe UI", sans-serif;
}

.records-ai-opt-out input {
  width: 18px;
  height: 18px;
  accent-color: #8f5b15;
}

/* Cypherdex Decker pass: keep the card altar clear and move controls into the black side spaces. */
.decker-card-stage .decker-card {
  cursor: zoom-in;
}

.decker-controls-toggle {
  position: fixed;
  z-index: 42;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  min-width: 142px;
  min-height: 36px;
  border: 1px solid #f0d98c;
  border-radius: 12px 12px 0 0;
  color: #120d04;
  background: linear-gradient(#fff0a4, #b97a1a);
  box-shadow: 0 0 22px rgba(228,189,101,0.26);
  font: 900 12px/1 "Segoe UI", sans-serif;
}

.cypherdex-decker-controls.decker-controls {
  position: fixed;
  z-index: 41;
  left: 50%;
  right: auto;
  bottom: 46px;
  width: min(940px, calc(100vw - 24px));
  max-height: min(45vh, 390px);
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 10px;
  border: 1px solid rgba(228,189,101,0.72);
  border-radius: 10px;
  background: rgba(3,3,4,0.94);
  box-shadow: 0 18px 46px rgba(0,0,0,0.72), 0 0 24px rgba(228,189,101,0.12);
  transform: translateX(-50%);
  pointer-events: auto;
  transition: transform 160ms ease, opacity 160ms ease;
}

.cypherdex-decker-controls.decker-controls.collapsed {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 18px));
}

.cypherdex-decker-controls .decker-control-panel {
  position: relative;
  width: auto;
  max-height: calc(min(45vh, 390px) - 22px);
  overflow: auto;
  pointer-events: auto;
  backdrop-filter: blur(6px);
}

.decker-save-link {
  min-height: 34px;
  padding: 7px 9px;
  display: grid;
  place-items: center;
  border: 1px solid #f0d98c;
  border-radius: 6px;
  color: #120d04;
  background: linear-gradient(#fff0a4, #b97a1a);
  font: 900 12px/1 "Segoe UI", sans-serif;
  text-align: center;
  text-decoration: none;
}

.card-zoom-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(48px, 0.18fr) minmax(280px, 560px) minmax(48px, 0.18fr);
  grid-template-rows: 1fr auto;
  gap: 18px;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(12,8,2,0.97), rgba(0,0,0,0.995));
}

.zoom-card-stage {
  grid-column: 2;
  display: grid;
  place-items: center;
  max-height: calc(100vh - 125px);
}

.zoom-card-stage .decker-card {
  width: min(58vh, 92vw);
  max-width: 560px;
  cursor: default;
}

.zoom-arrow,
.zoom-close,
.zoom-add-button {
  border: 1px solid #e0b550;
  color: #150d03;
  background: linear-gradient(#fff2a8, #b97818);
  box-shadow: 0 0 18px rgba(228,189,101,0.24);
  font-weight: 900;
}

.zoom-arrow {
  width: 54px;
  height: 74px;
  border-radius: 10px;
  font-size: 28px;
}

.zoom-arrow.previous { grid-column: 1; justify-self: end; }
.zoom-arrow.next { grid-column: 3; justify-self: start; }

.zoom-close {
  position: absolute;
  right: 24px;
  top: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 24px;
}

.zoom-add-button {
  grid-column: 2;
  grid-row: 2;
  min-height: 46px;
  border-radius: 12px;
  font-size: 16px;
}

.cypherdex-ai-toggle {
  position: fixed;
  z-index: 92;
  right: 18px;
  bottom: 18px;
  min-width: 54px;
  min-height: 54px;
  border: 1px solid #e4bd65;
  border-radius: 50%;
  color: #120d04;
  background: radial-gradient(circle at 35% 25%, #fff3ad, #d69c28 52%, #5d3108 100%);
  box-shadow: 0 0 22px rgba(228,189,101,0.34), inset 0 0 12px rgba(255,255,255,0.38);
  font: 900 13px/1 "Segoe UI", sans-serif;
}

.cypherdex-ai-panel {
  position: fixed;
  z-index: 91;
  top: 18px;
  right: 18px;
  bottom: 84px;
  width: min(360px, calc(100vw - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(228,189,101,0.68);
  border-radius: 10px;
  color: #f4d98a;
  background: rgba(5,4,3,0.94);
  box-shadow: 0 18px 48px rgba(0,0,0,0.62), 0 0 28px rgba(228,189,101,0.13);
  transform: translateX(calc(100% + 28px));
  transition: transform 180ms ease;
}

.cypherdex-ai-panel.open {
  transform: translateX(0);
}

.cypherdex-ai-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(228,189,101,0.32);
}

.cypherdex-ai-header strong {
  flex: 1;
  color: #ffe7a2;
  font: 900 14px/1.1 "Segoe UI", sans-serif;
}

.cypherdex-ai-close {
  width: 30px;
  min-height: 30px;
  border: 1px solid rgba(228,189,101,0.5);
  border-radius: 50%;
  color: #f6d980;
  background: #111;
}

.cypherdex-ai-log {
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.cypherdex-ai-message {
  padding: 9px 10px;
  border: 1px solid rgba(228,189,101,0.22);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  font: 12px/1.4 "Segoe UI", sans-serif;
}

.cypherdex-ai-message.user {
  color: #160f05;
  background: linear-gradient(#f4da8a, #b97818);
}

.cypherdex-ai-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(228,189,101,0.32);
}

.cypherdex-ai-form input {
  min-height: 38px;
  border: 1px solid rgba(228,189,101,0.42);
  border-radius: 6px;
  color: #f8e6a7;
  background: #0c0c0d;
  padding: 7px 9px;
}

.cypherdex-ai-form button {
  min-height: 38px;
  border: 1px solid #f0d98c;
  border-radius: 6px;
  color: #120d04;
  background: linear-gradient(#fff0a4, #b97a1a);
  font-weight: 900;
}

.player-records {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid #b88937;
  border-radius: 18px;
  color: #24170a;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.95), rgba(224,216,198,0.94)),
    repeating-linear-gradient(118deg, transparent 0 50px, rgba(174,125,40,0.14) 51px, transparent 54px);
  box-shadow: 0 22px 65px rgba(0,0,0,0.48);
}

.player-records-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.player-records-header h2 { margin: 5px 0; font-size: 34px; }
.player-records-header > div:first-child { flex: 1; }
.portal-account-actions { display: flex; gap: 8px; }

.player-stat-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.player-stat-grid > div {
  padding: 14px;
  border: 1px solid rgba(143,91,21,0.34);
  border-radius: 9px;
  background: rgba(255,255,255,0.38);
}

.player-stat-grid strong {
  display: block;
  color: #8f5b15;
  font-size: 28px;
}

.player-stat-grid span {
  color: #6d5e42;
  font: 11px/1.3 "Segoe UI", sans-serif;
}

.player-record-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.player-record-grid > section {
  padding: 16px;
  border: 1px solid rgba(143,91,21,0.3);
  border-radius: 10px;
  background: rgba(255,255,255,0.3);
}

.player-record-grid h3 { margin-top: 0; }

.account-record-list {
  max-height: 240px;
  overflow: auto;
  display: grid;
  gap: 6px;
}

.account-record-item {
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  border: 1px solid rgba(143,91,21,0.24);
  border-radius: 7px;
  background: rgba(255,255,255,0.42);
  font: 12px/1.35 "Segoe UI", sans-serif;
}

.account-record-item small { color: #756443; }

/* Exchange-format pass for Tome, Records, and Council. */
body[data-page="tome"] .tome-index,
body[data-page="records"] .portal-auth,
body[data-page="records"] .records-workspace,
body[data-page="records"] .records-panel,
body[data-page="records"] .player-record-grid > section,
body[data-page="council"] .page-panel {
  border: 1px solid rgba(228,189,101,0.58);
  border-radius: 8px;
  color: #f3dda5;
  background: rgba(5,4,3,0.86);
  box-shadow: 0 14px 38px rgba(0,0,0,0.42);
}

body[data-page="tome"] .tome-cover,
body[data-page="tome"] .tome-section {
  border: 1px solid rgba(228,189,101,0.58);
  border-radius: 8px;
  color: #f3dda5;
  background: rgba(5,4,3,0.84);
  box-shadow: 0 14px 38px rgba(0,0,0,0.42);
}

body[data-page="tome"] .tome-rules-grid > div,
body[data-page="records"] .player-stat-grid > div,
body[data-page="records"] .deck-vault-item,
body[data-page="records"] .sound-library-item,
body[data-page="records"] .account-record-item {
  border: 1px solid rgba(240,217,140,0.34);
  border-radius: 8px;
  color: #ead49d;
  background: rgba(0,0,0,0.42);
}

body[data-page="tome"] .tome-cover h2,
body[data-page="tome"] .tome-section > h2,
body[data-page="tome"] .tome-section h3,
body[data-page="records"] .records-title h1,
body[data-page="records"] .player-records-header h2,
body[data-page="records"] .records-panel h3,
body[data-page="council"] .page-panel h1 {
  color: #ffe7a2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.74);
}

body[data-page="tome"] .tome-section p,
body[data-page="tome"] .tome-section li,
body[data-page="tome"] .tome-cover p,
body[data-page="records"] .records-panel-heading p,
body[data-page="records"] .player-stat-grid span,
body[data-page="records"] .deck-vault-copy small,
body[data-page="records"] .sound-library-item small,
body[data-page="records"] .account-record-item small,
body[data-page="council"] .page-panel p {
  color: #d9c18a;
}

body[data-page="records"] .records-panel input,
body[data-page="records"] .records-panel select,
body[data-page="records"] .records-panel textarea,
body[data-page="records"] .portal-auth input {
  border: 1px solid rgba(240,217,140,0.5);
  color: #fff1bf;
  background: rgba(0,0,0,0.74);
}

body[data-page="records"] .records-panel > label,
body[data-page="records"] .deck-save-controls label,
body[data-page="records"] .sound-upload-controls label,
body[data-page="records"] .records-ai-opt-out {
  color: #ffe7a2;
}

body[data-page="records"] .records-panel button,
body[data-page="records"] .deck-vault-actions button,
body[data-page="records"] .sound-library-item button {
  border-color: #f0d98c;
  border-radius: 6px;
  background: linear-gradient(#fff0a4, #b97a1a);
}

body[data-page="council"] .page-panel {
  width: min(620px, calc(100vw - 28px));
  margin-top: 0;
  min-height: auto;
}

@media (max-width: 980px) {
  .portal-core {
    width: 72%;
    height: 72%;
    grid-template-columns: 1fr;
    border-radius: 34px;
  }
  .portal-ring-stage {
    aspect-ratio: auto;
    min-height: 1000px;
    background-size: cover;
  }
  .portal-form-actions { grid-template-columns: repeat(2, 1fr); }
  .portal-generator-panel {
    bottom: 1%;
    width: min(700px, 84%);
  }
  .portal-builder-grid,
  .records-primary-grid { grid-template-columns: 1fr; }
  .deck-save-controls,
  .sound-upload-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-shell { padding: 12px 10px 390px; }
  .portal-auth { grid-template-columns: 1fr; margin: 20px auto 180px; }
  .portal-ring-stage { min-height: 1250px; }
  .portal-core { width: 72%; height: 72%; padding: 18px; }
  .portal-generator-panel {
    bottom: 6px;
    width: calc(100% - 24px);
    padding: 10px;
  }
  .portal-generate-artwork { grid-template-columns: 1fr; }
  .portal-form-row,
  .portal-form-row.three { grid-template-columns: 1fr; }
  .player-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .player-record-grid { grid-template-columns: 1fr; }
  .player-records-header { align-items: flex-start; flex-direction: column; }
  .portal-builder-heading,
  .records-panel-heading { align-items: flex-start; flex-direction: column; }
  .deck-save-controls,
  .sound-upload-controls { grid-template-columns: 1fr; }
  .deck-vault-item { grid-template-columns: 44px minmax(0, 1fr); }
  .deck-vault-actions { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .site-shell { padding: 12px; align-items: start; }
  .page-panel { min-height: calc(100vh - 24px); padding: 30px 22px 390px; }
  body[data-page="home"] .page-panel {
    width: 100%;
    margin-top: 0;
    padding: 28px 20px 390px;
    background: linear-gradient(180deg, rgba(3,3,2,0.8), rgba(3,3,2,0.18) 42%, transparent 65%);
  }
  body[data-page="tome"] .page-panel,
  body[data-page="council"] .page-panel {
    width: 100%;
    margin: 0;
  }
  body[data-page="portal"] .page-panel {
    width: min(92vw, 620px);
    min-height: min(92vw, 620px);
  }
  .cypher-nav {
    right: 50%;
    bottom: 12px;
    width: min(340px, calc(100vw - 24px));
    transform: translateX(50%);
  }
  .cypher-link { width: 23px; height: 23px; }
  .decker-shell {
    width: min(100vw, 66.6667vh);
    height: min(100vh, 150vw);
  }
  .decker-card-stage { left: 29.4%; top: 10.5%; width: 41.2%; height: 54.5%; }
  .decker-controls {
    left: 17.8%;
    right: 18.5%;
    bottom: 8.3%;
    top: auto;
    max-height: 25%;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: 0;
  }
  .decker-arrow.previous { left: 17.8%; }
  .decker-arrow.next { right: 18.8%; }
}

@media (max-width: 979px), (max-aspect-ratio: 1 / 1) {
  body[data-page="decker"] {
    overflow: auto;
  }

  .cypherdex-decker-controls.decker-controls {
    left: 50%;
    right: auto;
    bottom: 46px;
    top: auto;
    width: min(720px, calc(100vw - 24px));
    max-height: min(44vh, 380px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    pointer-events: auto;
  }

  .cypherdex-decker-controls .decker-control-panel {
    position: relative;
    width: auto;
    max-height: calc(min(44vh, 380px) - 22px);
  }
}

/* Admin Sound Lattice */
.sound-admin-shell {
  width: min(1480px, calc(100% - 28px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 0 150px;
}

.sound-admin-title {
  margin-bottom: 16px;
  color: #ffe7a2;
  text-shadow: 0 2px 14px rgba(0,0,0,0.82);
}

.sound-admin-title h1 {
  margin: 5px 0;
  font-size: clamp(42px, 6vw, 82px);
}

.sound-auth-gate {
  margin-top: 24px;
}

.sound-admin-workspace {
  display: grid;
  gap: 14px;
}

.sound-admin-toolbar,
.sound-table-panel,
.sound-display-panel,
.sound-library-panel {
  border: 1px solid rgba(228,189,101,0.58);
  border-radius: 8px;
  color: #f3dda5;
  background: rgba(5,4,3,0.88);
  box-shadow: 0 14px 38px rgba(0,0,0,0.42);
}

.sound-admin-toolbar {
  min-height: 82px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sound-admin-toolbar h2 {
  margin: 4px 0 0;
  color: #ffe7a2;
  font-size: 30px;
}

.sound-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.sound-admin-actions button,
.sound-file-action,
.sound-library-heading button {
  min-height: 38px;
  padding: 9px 12px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #f0d98c;
  border-radius: 6px;
  color: #120d04;
  background: linear-gradient(#fff0a4, #b97a1a);
  font: 900 12px/1 "Segoe UI", sans-serif;
}

.sound-admin-actions button.danger,
.sound-library-heading button.danger {
  color: #ffd4ca;
  background: #511b14;
  border-color: #a84a3a;
}

.sound-admin-actions button.active {
  color: #fff2b8;
  background: #111;
}

.sound-lattice-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) minmax(320px, 0.85fr) minmax(280px, 0.55fr);
  gap: 14px;
  align-items: stretch;
}

.sound-engine-frame {
  width: 100%;
  min-height: calc(100vh - 160px);
  height: min(900px, calc(100vh - 160px));
  border: 1px solid rgba(228,189,101,0.58);
  border-radius: 8px;
  background: rgba(5,4,3,0.88);
  box-shadow: 0 14px 38px rgba(0,0,0,0.42);
}

body[data-page="sound"] .sound-lattice-layout {
  display: none;
}

body[data-page="sound"] .sound-file-action,
body[data-page="sound"] #soundPlayButton,
body[data-page="sound"] #soundStopButton,
body[data-page="sound"] #soundReverseButton {
  display: none;
}

.sound-table-panel {
  position: relative;
  height: min(72vh, 760px);
  min-height: 520px;
  display: grid;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(228,189,101,0.13), transparent 40%),
    rgba(5,4,3,0.9);
}

.sound-table-panel.drag-over {
  border-color: #fff0a4;
  box-shadow: inset 0 0 0 2px rgba(255,240,164,0.74), 0 14px 38px rgba(0,0,0,0.42);
}

.sound-table-panel.drag-over::after {
  content: "Drop sounds onto the cypher table";
  position: absolute;
  inset: 14px;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(255,240,164,0.76);
  color: #fff2b8;
  background: rgba(5,4,3,0.64);
  font: 900 18px/1 "Segoe UI", sans-serif;
  pointer-events: none;
}

#soundTableCanvas,
#soundWaveCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.sound-table-status {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(240,217,140,0.36);
  border-radius: 6px;
  color: #d9c18a;
  background: rgba(0,0,0,0.58);
  font: 12px/1.35 "Segoe UI", sans-serif;
  text-align: center;
}

.sound-display-panel {
  height: min(72vh, 760px);
  min-height: 520px;
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr) auto;
  overflow: hidden;
}

.sound-display-header {
  min-height: 58px;
  padding: 12px;
  display: grid;
  gap: 3px;
  border-bottom: 1px solid rgba(228,189,101,0.28);
  background: rgba(0,0,0,0.36);
  font-family: "Segoe UI", sans-serif;
}

.sound-display-header strong {
  color: #ffe7a2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sound-display-header span {
  color: #d9c18a;
  font-size: 12px;
}

.sound-control-grid {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid rgba(228,189,101,0.28);
}

.sound-control-grid label,
.sound-library-panel label {
  display: grid;
  gap: 5px;
  color: #ffe7a2;
  font: 800 11px/1.2 "Segoe UI", sans-serif;
}

.sound-control-grid input,
.sound-control-grid select,
.sound-library-panel input {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(240,217,140,0.5);
  border-radius: 6px;
  color: #fff1bf;
  background: rgba(0,0,0,0.74);
  padding: 7px 9px;
}

.sound-library-panel {
  height: min(72vh, 760px);
  min-height: 520px;
  padding: 12px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
}

.sound-library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sound-library-heading h3 {
  margin: 0;
  color: #ffe7a2;
  font-size: 24px;
}

.sound-scroll-list {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 4px;
  color: #d9c18a;
  font: 12px/1.4 "Segoe UI", sans-serif;
}

.sound-lattice-item {
  width: 100%;
  min-height: 64px;
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  align-items: center;
  border: 1px solid rgba(240,217,140,0.28);
  border-radius: 8px;
  color: #f3dda5;
  background: rgba(0,0,0,0.42);
  text-align: left;
}

.sound-lattice-item.selected {
  border-color: var(--sound-color, #f0d98c);
  box-shadow: inset 3px 0 0 var(--sound-color, #f0d98c);
}

.sound-lattice-item strong,
.sound-lattice-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sound-lattice-item strong {
  color: #fff0b5;
  font: 900 13px/1.2 "Segoe UI", sans-serif;
}

.sound-lattice-item small {
  grid-column: 2;
  color: #d9c18a;
  font: 11px/1.25 "Segoe UI", sans-serif;
}

.sound-node-dot {
  grid-row: 1 / span 2;
  width: 14px;
  height: 14px;
  border: 1px solid #fff0a4;
  border-radius: 50%;
  background: var(--sound-color, #e4bd65);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sound-color, #e4bd65) 72%, transparent);
}

@media (max-width: 1180px) {
  .sound-lattice-layout {
    grid-template-columns: 1fr;
  }
  .sound-table-panel,
  .sound-display-panel,
  .sound-library-panel {
    height: auto;
  }
  .sound-table-panel {
    aspect-ratio: 1 / 1;
    min-height: 420px;
  }
  .sound-display-panel {
    min-height: 460px;
  }
  .sound-library-panel {
    min-height: 360px;
    max-height: 520px;
  }
}

@media (max-width: 760px) {
  .sound-admin-shell {
    width: min(100% - 20px, 720px);
    padding-top: 14px;
  }
  .sound-admin-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .sound-admin-actions {
    justify-content: flex-start;
  }
  .sound-control-grid {
    grid-template-columns: 1fr;
  }
  .sound-table-panel {
    min-height: 320px;
  }
}