@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #0e0c0a;
  --panel: rgba(18, 15, 12, 0.84);
  --panel-2: rgba(26, 21, 17, 0.9);
  --card: rgba(246, 230, 185, 0.92);
  --card-2: rgba(255, 247, 220, 0.96);
  --ink: #201813;
  --muted: #665a4d;
  --gold: #d2a84b;
  --gold-2: #f1d17a;
  --green: #5b7c42;
  --red: #8e3a2f;
  --violet: #7650a6;
  --blue: #416a7b;
  --line: rgba(216, 174, 86, 0.36);
  --line-dark: rgba(70, 48, 23, 0.26);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #fff2cb;
  font-family: Inter, system-ui, sans-serif;
  background:
    linear-gradient(rgba(7, 6, 5, 0.16), rgba(7, 6, 5, 0.64)),
    url("assets/arkano-wallpaper.png") center / cover fixed no-repeat,
    #0d0b09;
}

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

button {
  cursor: pointer;
}

button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.app {
  min-height: 100vh;
  padding: 22px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.18) 34%, rgba(0, 0, 0, 0.62)),
    radial-gradient(circle at 82% 16%, rgba(118, 80, 166, 0.22), transparent 24%),
    radial-gradient(circle at 18% 20%, rgba(210, 168, 75, 0.2), transparent 24%);
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
}

.brand,
.profile-chip,
.dark-button,
.gold-button,
.ghost-button,
.danger-button,
.icon-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.brand,
.profile-chip,
.dark-button {
  color: #fff2cb;
  background: rgba(14, 10, 7, 0.78);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.logo-only-brand {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.top-logo {
  width: 170px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 10px rgba(70, 190, 255, 0.2));
}

.sigil,
.avatar,
.portrait {
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 209, 122, 0.7);
  color: #fff2cb;
  background: linear-gradient(145deg, #8e6928, #1b110a);
  font-family: Cinzel, serif;
  font-weight: 900;
  overflow: hidden;
}

.sigil,
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.avatar img,
.photo-box img {
  transform-origin: center;
  transition: object-position 160ms ease, transform 160ms ease;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-area {
  position: relative;
  justify-self: end;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.dropdown {
  position: absolute;
  right: 0;
  top: 54px;
  z-index: 10;
  width: 240px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 8, 6, 0.96);
  box-shadow: var(--shadow);
}

.dropdown button {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 6px;
  color: #fff2cb;
  background: transparent;
  text-align: left;
}

.dropdown button:hover {
  background: rgba(210, 168, 75, 0.14);
}

.hidden {
  display: none;
}

.clock {
  display: grid;
  gap: 2px;
  color: #fff2cb;
  text-shadow: 0 2px 10px #000;
}

.clock strong {
  font-size: 1.25rem;
}

.clock span {
  color: #e6d2a8;
  font-size: 0.88rem;
}

.stage {
  max-width: 1320px;
  margin: 22px auto 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: Cinzel, serif;
}

p {
  margin-top: 0;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--gold-2);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  text-align: center;
}

.home h1 {
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.9;
  text-shadow: 0 10px 30px #000;
}

.home p {
  max-width: 720px;
  margin: 16px auto 26px;
  color: #ead8b1;
  font-size: 1.05rem;
}

.auth-stage {
  max-width: 1180px;
  min-height: calc(100vh - 44px);
  display: grid;
  place-items: center;
}

.login-screen {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: 22px;
  align-items: stretch;
}

.login-mark,
.auth-card,
.integration-card {
  border: 1px solid rgba(241, 209, 122, 0.36);
  border-radius: 18px;
  background:
    linear-gradient(140deg, rgba(255, 244, 205, 0.07), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(70, 190, 255, 0.13), transparent 30%),
    rgba(12, 8, 6, 0.86);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 243, 204, 0.05);
}

.login-mark {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 32px;
  text-align: center;
}

.login-mark img {
  width: min(330px, 86%);
  margin-bottom: 10px;
  filter: drop-shadow(0 0 22px rgba(70, 190, 255, 0.24));
}

.login-mark h1 {
  font-size: clamp(3rem, 8vw, 6.2rem);
}

.login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.auth-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
}

.portal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.portal-button {
  min-height: 76px;
  padding: 18px 40px;
  border: 1px solid rgba(241, 209, 122, 0.48);
  border-radius: 12px;
  color: #fff2cb;
  background:
    linear-gradient(90deg, rgba(90, 63, 28, 0.52), rgba(22, 14, 8, 0.94) 18%, rgba(22, 14, 8, 0.94) 82%, rgba(90, 63, 28, 0.52)),
    linear-gradient(145deg, rgba(20, 14, 10, 0.95), rgba(45, 31, 18, 0.84));
  text-align: center;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(241, 209, 122, 0.08);
}

.portal-button strong {
  display: block;
  font-family: Cinzel, serif;
  font-size: 2rem;
}

.portal-button span {
  display: none;
}

.panel,
.sheet-head,
.page-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 10, 8, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.panel {
  padding: 20px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-title h1 {
  font-size: clamp(2rem, 4vw, 3.8rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gold-button {
  position: relative;
  overflow: hidden;
  color: #201813;
  background: linear-gradient(145deg, #f2cf73, #a97827);
}

.ghost-button,
.icon-button {
  color: #fff2cb;
  background: rgba(255, 242, 203, 0.08);
}

.danger-button {
  color: #fff2cb;
  background: linear-gradient(145deg, #9a3a2f, #501912);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.tile {
  min-height: 250px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(241, 209, 122, 0.34);
  border-radius: 8px;
  color: #fff2cb;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(11, 8, 6, 0.86));
  overflow: hidden;
  text-align: left;
}

.tile img,
.tile-art {
  width: 100%;
  height: 132px;
  border-radius: 6px;
  object-fit: cover;
}

.tile-art {
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 209, 122, 0.3);
  background: rgba(0, 0, 0, 0.34);
  font-family: Cinzel, serif;
  font-size: 3rem;
}

.tile strong {
  font-size: 1.05rem;
}

.tile small {
  color: #dcc799;
}

.character-card {
  cursor: default;
}

.tile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.tile-actions button {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 0.86rem;
}

.creator {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 290px;
  gap: 16px;
}

.steps,
.summary,
.creator-main {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 10, 8, 0.84);
  padding: 16px;
  box-shadow: var(--shadow);
}

.creator-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid rgba(241, 209, 122, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  animation: softRise 220ms ease;
}

.creator-context div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}

.creator-context span {
  color: #d5bf91;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.creator-context strong {
  color: #fff2cb;
  font-size: 0.9rem;
}

.step {
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  border: 1px solid rgba(241, 209, 122, 0.2);
  border-radius: 6px;
  color: #e8d3a6;
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
}

.step.active {
  color: #201813;
  background: linear-gradient(145deg, #f2cf73, #a97827);
}

.form-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
}

.photo-box {
  position: relative;
  min-height: 310px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px dashed rgba(241, 209, 122, 0.4);
  border-radius: 8px;
  color: #e8d3a6;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  overflow: hidden;
}

.photo-box img {
  width: 100%;
  height: 260px;
  max-height: none;
  object-fit: cover;
  border-radius: 6px;
}

.photo-box input[type="file"] {
  position: absolute;
  inset: auto 14px 14px;
  color: #fff2cb;
  font-size: 0.82rem;
}

.profile-photo-editor,
.avatar-controls {
  display: grid;
  gap: 12px;
}

.avatar-controls {
  padding: 12px;
  border: 1px solid rgba(241, 209, 122, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(62, 45, 96, 0.28), rgba(10, 16, 20, 0.58)),
    rgba(0, 0, 0, 0.22);
}

.avatar-controls input[type="range"] {
  accent-color: var(--gold-2);
}

.form-stack {
  display: grid;
  gap: 13px;
}

label {
  display: grid;
  gap: 7px;
  color: #f4dfaf;
  font-weight: 800;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(241, 209, 122, 0.28);
  border-radius: 6px;
  padding: 11px 12px;
  color: #fff7de;
  background: rgba(0, 0, 0, 0.42);
}

textarea {
  min-height: 170px;
  resize: vertical;
}

.choice-grid,
.stat-grid,
.skill-grid,
.card-grid,
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.choice,
.info,
.spell,
.feature,
.item-card {
  border: 1px solid rgba(241, 209, 122, 0.24);
  border-radius: 8px;
  padding: 14px;
  color: #fff2cb;
  background: rgba(255, 255, 255, 0.07);
}

.choice {
  min-height: 118px;
  text-align: left;
}

.choice.selected,
.skill.selected {
  border-color: var(--gold-2);
  background: rgba(210, 168, 75, 0.18);
}

.choice.locked,
.skill.locked {
  border-color: rgba(91, 124, 66, 0.7);
  background: rgba(91, 124, 66, 0.18);
}

.choice small,
.info small,
.spell small,
.feature small {
  color: #d5bf91;
}

.equipment-card {
  min-height: 145px;
}

.spell-choice {
  display: grid;
  align-content: start;
}

.manager-block {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid rgba(241, 209, 122, 0.24);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.manager-block .choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.manager-block summary {
  color: var(--gold-2);
  font-family: Cinzel, serif;
  font-size: 1.15rem;
}

.spell-manage-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.spell-manage-note strong,
.limit-full {
  padding: 7px 10px;
  border: 1px solid rgba(241, 209, 122, 0.26);
  border-radius: 999px;
  white-space: nowrap;
}

.limit-full {
  color: #ffd5c8;
  border-color: rgba(228, 129, 117, 0.55);
  background: rgba(142, 58, 47, 0.22);
}

.prepared-choice.blocked {
  opacity: 0.55;
}

.mechanics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.mechanics span {
  padding: 5px 8px;
  border: 1px solid rgba(241, 209, 122, 0.24);
  border-radius: 999px;
  color: #f7e6bb;
  background: rgba(0, 0, 0, 0.24);
  font-size: 0.76rem;
  font-weight: 800;
}

.spell .mechanics span {
  background: rgba(255, 255, 255, 0.06);
}

.warning {
  color: #ffb7aa;
  font-size: 0.78rem;
}

.loadout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 14px;
  margin: 12px 0 18px;
}

.silhouette {
  min-height: 300px;
  display: grid;
  grid-template-areas:
    ". head ."
    "left body right"
    ". body shield";
  grid-template-columns: 1fr 1.2fr 1fr;
  grid-template-rows: 72px 1fr 72px;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(241, 209, 122, 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 38%, rgba(241, 209, 122, 0.18), transparent 34%),
    rgba(0, 0, 0, 0.26);
}

.slot {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(241, 209, 122, 0.24);
  border-radius: 8px;
  color: #fff2cb;
  background: rgba(255, 255, 255, 0.07);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 900;
}

.head { grid-area: head; border-radius: 50%; }
.left-hand { grid-area: left; }
.right-hand { grid-area: right; }
.body { grid-area: body; }
.shield { grid-area: shield; }

.point-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(241, 209, 122, 0.28);
  border-radius: 8px;
  color: #fff2cb;
  background: rgba(0, 0, 0, 0.34);
}

.point-bar.invalid {
  border-color: #e48175;
  background: rgba(142, 58, 47, 0.32);
}

.attr-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(241, 209, 122, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.attr-control {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
}

.attr-value {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 6px;
  color: #201813;
  background: #f2cf73;
  font-size: 1.5rem;
  font-weight: 900;
}

.sheet-head {
  display: grid;
  grid-template-columns: 142px 118px 230px minmax(240px, 1fr) minmax(320px, auto);
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(184, 131, 48, 0.26), transparent 28%),
    radial-gradient(circle at 72% 24%, rgba(46, 123, 156, 0.18), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 9px),
    rgba(30, 24, 18, 0.96);
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(241, 209, 122, 0.12);
}

.sheet-actions {
  display: grid;
  gap: 8px;
}

.sheet-actions .ghost-button {
  border-radius: 999px;
  border-color: rgba(241, 209, 122, 0.36);
  background:
    linear-gradient(120deg, rgba(241, 209, 122, 0.1), rgba(70, 190, 255, 0.08)),
    rgba(0, 0, 0, 0.34);
}

.portrait {
  width: 112px;
  height: 112px;
  border-width: 2px;
  border-radius: 24px;
  background: linear-gradient(145deg, #6c5128, #17100a);
  box-shadow: 0 0 0 5px rgba(241, 209, 122, 0.12), 0 0 24px rgba(70, 190, 255, 0.14);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, auto));
  gap: 8px;
}

.sheet-vitals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.vital-pill {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(241, 209, 122, 0.38);
  border-radius: 12px;
  color: #fff2cb;
  font-weight: 900;
  background:
    linear-gradient(145deg, rgba(116, 86, 43, 0.78), rgba(31, 23, 16, 0.92)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 7px);
}

.hp-pill {
  grid-column: 1 / -1;
  justify-content: space-between;
  border-color: rgba(208, 86, 66, 0.55);
  background:
    linear-gradient(145deg, rgba(118, 42, 34, 0.92), rgba(41, 24, 17, 0.94)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 7px);
}

.magic-pill {
  border-color: rgba(70, 190, 255, 0.46);
  background:
    linear-gradient(145deg, rgba(30, 82, 104, 0.92), rgba(18, 23, 30, 0.94)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 7px);
}

.vital-pill input {
  width: 72px;
  padding: 5px;
  text-align: center;
  border-color: rgba(255, 242, 203, 0.25);
  background: rgba(0, 0, 0, 0.32);
}

.quick-stats span,
.quick-stats label,
.quick-stats button {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(241, 209, 122, 0.28);
  border-radius: 999px;
  color: #fff2cb;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.24)),
    rgba(0, 0, 0, 0.28);
  font-weight: 900;
}

.quick-stats span:nth-of-type(1) { border-color: rgba(70, 190, 255, 0.36); }
.quick-stats span:nth-of-type(2) { border-color: rgba(241, 209, 122, 0.42); }
.quick-stats span:nth-of-type(3) { border-color: rgba(91, 124, 66, 0.56); }
.quick-stats span:nth-of-type(4) { border-color: rgba(118, 80, 166, 0.52); }
.quick-stats span:nth-of-type(5) { border-color: rgba(210, 168, 75, 0.52); }

.quick-stats input {
  width: 72px;
  padding: 4px;
  text-align: center;
}

.top-spell-slots {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(70, 190, 255, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(25, 73, 96, 0.62), rgba(19, 17, 13, 0.9)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 8px);
}

.top-spell-slots.empty {
  color: #d8c69d;
  font-weight: 900;
}

.slot-pill {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid rgba(70, 190, 255, 0.38);
  border-radius: 999px;
  color: #eaf7ff;
  background: linear-gradient(145deg, rgba(35, 94, 118, 0.82), rgba(11, 17, 22, 0.92));
  font-weight: 900;
}

.tabs {
  position: sticky;
  top: 10px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin: 16px 0;
  padding: 10px;
  border: 1px solid rgba(241, 209, 122, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(241, 209, 122, 0.06), rgba(70, 190, 255, 0.06), rgba(118, 80, 166, 0.06)),
    rgba(10, 7, 5, 0.84);
  backdrop-filter: blur(8px);
}

.tabs button {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid rgba(241, 209, 122, 0.24);
  border-radius: 999px;
  color: #fff2cb;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)),
    rgba(0, 0, 0, 0.42);
  font-weight: 800;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.tabs button.active {
  color: #201813;
  border-color: rgba(255, 242, 203, 0.6);
  background: linear-gradient(145deg, #f2cf73, #b98a32);
  box-shadow: 0 0 18px rgba(241, 209, 122, 0.2);
}

.tabs button:hover {
  transform: translateY(-2px);
}

.sheet-body {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  color: #fff2cb;
  background: rgba(13, 10, 8, 0.84);
  box-shadow: var(--shadow);
}

.skill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(241, 209, 122, 0.18);
  border-radius: 6px;
  color: #fff2cb;
  background: rgba(255, 255, 255, 0.06);
}

details {
  margin-bottom: 10px;
}

summary {
  cursor: pointer;
  font-weight: 900;
}

.book-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 16px;
}

.book-reader {
  display: grid;
  gap: 14px;
}

.book-spread {
  min-height: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  perspective: 1800px;
}

.book-page {
  padding: 28px;
  border: 1px solid rgba(92, 66, 30, 0.32);
  color: #2a1e13;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.08)),
    #f0ddb0;
  box-shadow: inset 0 0 35px rgba(93, 61, 22, 0.18);
  animation: turnPage 320ms ease;
}

.book-page iframe {
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: 4px;
  background: #fff;
}

@keyframes turnPage {
  from {
    opacity: 0.4;
    transform: rotateY(-14deg);
  }
  to {
    opacity: 1;
    transform: rotateY(0);
  }
}

@keyframes softRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.choice,
.info,
.spell,
.feature,
.item-card,
.portal-button,
.tile {
  animation: softRise 220ms ease;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.64);
}

.modal-card {
  width: min(620px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  color: #fff2cb;
  background: rgba(15, 11, 8, 0.96);
  box-shadow: var(--shadow);
}

.wide-modal {
  width: min(920px, 100%);
}

.item-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roll-modal {
  text-align: center;
}

.roll-orb {
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  margin: 14px auto;
  border: 1px solid rgba(241, 209, 122, 0.55);
  border-radius: 50%;
  color: #fff9db;
  background:
    radial-gradient(circle at 50% 45%, rgba(70, 190, 255, 0.5), transparent 28%),
    radial-gradient(circle, rgba(241, 209, 122, 0.32), rgba(20, 14, 10, 0.92));
  box-shadow: 0 0 34px rgba(70, 190, 255, 0.28), inset 0 0 32px rgba(241, 209, 122, 0.2);
  animation: rollPop 580ms cubic-bezier(.18, .9, .22, 1.1);
}

.roll-orb span {
  font-family: Cinzel, serif;
  font-size: 2.7rem;
  font-weight: 900;
  animation: numberFlicker 520ms steps(7, end);
}

.roll-type-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 8px;
}

.roll-type-row span,
.history-head span {
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(70, 190, 255, 0.34);
  border-radius: 999px;
  color: #eaf7ff;
  background: rgba(24, 76, 102, 0.46);
  font-size: 0.76rem;
  font-weight: 900;
}

.roll-lines {
  display: grid;
  gap: 6px;
  margin: 10px 0 18px;
}

.macro-preview-label {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  color: #eaf7ff;
  text-align: left;
  font-weight: 900;
}

.roll-macro-preview {
  min-height: 104px;
  border-color: rgba(70, 190, 255, 0.38);
  color: #eaf7ff;
  background:
    linear-gradient(145deg, rgba(12, 35, 48, 0.84), rgba(7, 8, 10, 0.9));
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.86rem;
}

.roll-actions {
  justify-content: center;
}

.notice {
  margin: 12px 0;
  padding: 12px;
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  color: #ead8b1;
  background: rgba(255, 255, 255, 0.07);
}

.brand-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80, 190, 255, 0.34), rgba(210, 168, 75, 0.18) 48%, rgba(0, 0, 0, 0.65));
  box-shadow: 0 0 22px rgba(87, 194, 255, 0.35), inset 0 0 16px rgba(241, 209, 122, 0.18);
}

.brand-logo img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(91, 210, 255, 0.55));
}

.dashboard-arcane {
  min-height: calc(100vh - 130px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 28px;
}

.dashboard-logo {
  width: min(520px, 82vw);
  max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(70, 190, 255, 0.28));
  animation: logoPulse 4s ease-in-out infinite;
}

.main-menu {
  width: min(560px, 92vw);
  display: grid;
  gap: 16px;
}

.menu-button {
  position: relative;
  min-height: 76px;
  padding: 16px 62px;
  border: 1px solid rgba(241, 209, 122, 0.68);
  border-radius: 10px;
  color: #fff2cb;
  background:
    linear-gradient(90deg, rgba(142, 99, 35, 0.7), rgba(19, 13, 9, 0.98) 17%, rgba(22, 16, 12, 0.98) 83%, rgba(142, 99, 35, 0.7)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 8px);
  font-family: Cinzel, serif;
  font-size: 1.62rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.48),
    inset 0 0 0 2px rgba(241, 209, 122, 0.08),
    inset 0 0 24px rgba(210, 168, 75, 0.08);
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.menu-button::before,
.menu-button::after {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  width: 26px;
  border-top: 2px solid rgba(241, 209, 122, 0.66);
  border-bottom: 2px solid rgba(241, 209, 122, 0.66);
  opacity: 0.95;
}

.menu-button::before {
  left: 14px;
  border-left: 2px solid rgba(241, 209, 122, 0.66);
}

.menu-button::after {
  right: 14px;
  border-right: 2px solid rgba(241, 209, 122, 0.66);
}

.menu-button:hover {
  transform: translateY(3px) scale(0.99);
  filter: brightness(1.1);
  background:
    linear-gradient(90deg, rgba(166, 118, 44, 0.76), rgba(26, 18, 11, 0.98) 17%, rgba(23, 27, 30, 0.98) 83%, rgba(166, 118, 44, 0.76)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.065) 0 2px, transparent 2px 8px);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(70, 190, 255, 0.18),
    inset 0 0 0 2px rgba(241, 209, 122, 0.16);
}

.menu-button:active {
  transform: translateY(8px) scale(0.97);
}

.panel,
.sheet-body,
.sheet-head,
.steps,
.summary,
.creator-main,
.modal-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 22%),
    radial-gradient(circle at 90% 0%, rgba(65, 163, 218, 0.12), transparent 28%),
    rgba(13, 10, 8, 0.88);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 243, 204, 0.08);
}

.choice,
.info,
.spell,
.feature,
.item-card {
  background:
    linear-gradient(150deg, rgba(255, 247, 220, 0.08), transparent 36%),
    radial-gradient(circle at 100% 0%, rgba(75, 188, 255, 0.08), transparent 26%),
    rgba(255, 255, 255, 0.06);
}

.card-grid .info:nth-child(3n + 1) {
  border-color: rgba(184, 131, 48, 0.42);
  background:
    linear-gradient(145deg, rgba(119, 82, 35, 0.22), rgba(255, 255, 255, 0.05)),
    rgba(24, 18, 13, 0.62);
}

.card-grid .info:nth-child(3n + 2) {
  border-color: rgba(72, 132, 150, 0.42);
  background:
    linear-gradient(145deg, rgba(33, 84, 104, 0.24), rgba(255, 255, 255, 0.05)),
    rgba(18, 22, 24, 0.62);
}

.card-grid .info:nth-child(3n) {
  border-color: rgba(116, 114, 106, 0.45);
  background:
    linear-gradient(145deg, rgba(83, 76, 66, 0.26), rgba(130, 62, 38, 0.14)),
    rgba(20, 18, 16, 0.64);
}

.attack-card {
  border-color: rgba(157, 93, 54, 0.5);
  background:
    linear-gradient(145deg, rgba(96, 62, 43, 0.34), rgba(50, 53, 52, 0.22)),
    rgba(18, 16, 14, 0.72);
}

.spell {
  border-color: rgba(70, 190, 255, 0.34);
  background:
    linear-gradient(145deg, rgba(26, 82, 112, 0.28), rgba(118, 80, 166, 0.12)),
    rgba(13, 17, 22, 0.72);
}

.feature {
  border-color: rgba(91, 124, 66, 0.42);
  background:
    linear-gradient(145deg, rgba(58, 88, 48, 0.25), rgba(210, 168, 75, 0.08)),
    rgba(14, 18, 12, 0.68);
}

.item-card {
  border-color: rgba(196, 144, 62, 0.4);
  background:
    linear-gradient(145deg, rgba(128, 90, 38, 0.26), rgba(178, 178, 168, 0.08)),
    rgba(22, 17, 12, 0.68);
}

.cast-button {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}

.cast-button::after,
.gold-button::after {
  content: "";
  position: absolute;
  inset: -80% auto auto -40%;
  width: 40%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(24deg);
  opacity: 0;
}

.cast-button:hover::after,
.gold-button:hover::after {
  animation: glint 850ms ease;
}

.library-shelf-panel {
  min-height: calc(100vh - 150px);
}

.library-shelf {
  min-height: 520px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  align-content: start;
  gap: 22px;
  padding: 24px;
  border: 1px solid rgba(241, 209, 122, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(120, 78, 34, 0.2), rgba(23, 14, 8, 0.9)),
    repeating-linear-gradient(0deg, transparent 0 148px, rgba(241, 209, 122, 0.2) 149px 154px);
}

.book-tile {
  min-height: 250px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(241, 209, 122, 0.34);
  border-radius: 7px 12px 12px 7px;
  color: #fff2cb;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.46), transparent 13%),
    linear-gradient(145deg, #2b2119, #0e1418);
  box-shadow: 10px 16px 28px rgba(0, 0, 0, 0.38), inset 8px 0 12px rgba(0, 0, 0, 0.32);
  text-align: left;
  transition: transform 180ms ease, filter 180ms ease;
}

.book-tile:hover {
  transform: translateY(-8px) rotate(-1deg);
  filter: brightness(1.08);
}

.book-tile img,
.book-tile span {
  width: 100%;
  height: 150px;
  display: grid;
  place-items: center;
  object-fit: contain;
  border-radius: 5px;
  background: radial-gradient(circle, rgba(60, 180, 240, 0.16), rgba(0, 0, 0, 0.38));
}

.book-tile span {
  font-family: Cinzel, serif;
  font-size: 4rem;
}

.reader-screen {
  min-height: calc(100vh - 125px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
}

.reader-app {
  padding: 0;
}

.reader-stage {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
}

.reader-app .reader-screen {
  min-height: 100vh;
  padding: 18px;
}

.reader-toolbar,
.reader-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 8, 6, 0.86);
}

.book-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  justify-content: center;
  align-content: center;
  gap: 0;
  padding: 28px;
  perspective: 1800px;
  border: 1px solid rgba(241, 209, 122, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(70, 180, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.58));
}

.reader-app .book-stage {
  min-height: calc(100vh - 154px);
}

.book-page {
  display: grid;
  align-content: start;
  gap: 10px;
}

.pdf-page-frame {
  width: 100%;
  height: min(68vh, 780px);
  border: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(70, 48, 23, 0.18);
}

.book-stage .cover-page {
  grid-column: 1 / -1;
  width: min(760px, 94%);
  justify-self: center;
}

.cover-page img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.left-page {
  border-radius: 8px 0 0 8px;
  transform-origin: right center;
}

.right-page {
  border-radius: 0 8px 8px 0;
  transform-origin: left center;
}

.book-stage::after {
  content: "";
  position: absolute;
  top: 88px;
  bottom: 88px;
  left: 50%;
  width: 28px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(60, 35, 14, 0.32), transparent);
  pointer-events: none;
}

.turning-next .right-page,
.turning-back .left-page {
  animation: pageFlip 420ms ease;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.market-item {
  min-height: 98px;
}

.integrations-panel {
  min-height: calc(100vh - 150px);
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
}

.integration-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
}

.integration-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.status-pill {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(241, 209, 122, 0.28);
  border-radius: 999px;
  color: #fff2cb;
  font-size: 0.78rem;
  font-weight: 900;
}

.status-pill.prepared {
  border-color: rgba(70, 190, 255, 0.4);
  background: rgba(31, 83, 106, 0.4);
}

.status-pill.bridge {
  border-color: rgba(118, 80, 166, 0.5);
  background: rgba(62, 45, 96, 0.42);
}

#roll20MacroOutput {
  min-height: 110px;
  color: #eaf7ff;
  background: rgba(5, 10, 14, 0.62);
}

.roll20-card {
  border-color: rgba(70, 190, 255, 0.38);
}

.roll20-extension-box {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(70, 190, 255, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(31, 83, 106, 0.34), rgba(62, 45, 96, 0.22)),
    rgba(0, 0, 0, 0.26);
}

.roll20-extension-box strong {
  color: var(--gold-2);
  font-family: Cinzel, serif;
}

.roll20-extension-box span,
.roll20-bridge-status {
  color: #eaf7ff;
}

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

.link-button {
  display: inline-grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
}

.bridge-ok {
  border-color: rgba(109, 190, 128, 0.5);
  background: rgba(35, 87, 52, 0.32);
}

.bridge-fail {
  border-color: rgba(190, 96, 79, 0.5);
  background: rgba(97, 35, 28, 0.32);
}

.quick-macros-panel {
  margin-top: 16px;
}

.macro-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.macro-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(70, 190, 255, 0.24);
  border-radius: 8px;
  background: rgba(5, 10, 14, 0.5);
}

.macro-row code {
  min-width: 0;
  overflow: hidden;
  color: #eaf7ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-text {
  min-height: 460px;
  color: #eaf7ff;
  background: rgba(5, 10, 14, 0.72);
  font-family: Consolas, "Courier New", monospace;
}

.discord-card {
  border-color: rgba(118, 80, 166, 0.48);
}

.discord-command-panel {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(118, 80, 166, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(29, 48, 58, 0.48), rgba(53, 39, 82, 0.42)),
    rgba(0, 0, 0, 0.26);
}

.discord-command-panel h3 {
  margin: 0;
  color: #fff2cb;
  font-family: Cinzel, serif;
  font-size: 1rem;
}

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

.discord-command-grid button {
  min-height: 40px;
  border-color: rgba(70, 190, 255, 0.24);
  background:
    linear-gradient(145deg, rgba(31, 83, 106, 0.32), rgba(62, 45, 96, 0.28)),
    rgba(255, 255, 255, 0.05);
}

.discord-feedback,
.discord-log {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(241, 209, 122, 0.2);
  border-radius: 8px;
  background: rgba(5, 10, 14, 0.48);
  color: #eaf7ff;
}

.discord-feedback strong {
  color: var(--gold-2);
}

.discord-log {
  max-height: 116px;
  overflow: auto;
  font-size: 0.86rem;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(241, 209, 122, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}

.segmented button {
  min-height: 40px;
  border: 1px solid rgba(241, 209, 122, 0.22);
  border-radius: 999px;
  color: #fff2cb;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 900;
}

.segmented button.active {
  color: #201813;
  background: linear-gradient(145deg, #f2cf73, #a97827);
}

.market-block,
.inventory-head {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(241, 209, 122, 0.24);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.inventory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.market-block summary {
  color: var(--gold-2);
  font-family: Cinzel, serif;
  font-size: 1.15rem;
}

.level-up-button {
  width: 52px;
  min-height: 52px;
  padding: 0;
  border: 1px solid rgba(241, 209, 122, 0.62);
  border-radius: 50%;
  color: #fff9dc;
  background:
    radial-gradient(circle at 50% 35%, rgba(70, 190, 255, 0.44), transparent 34%),
    radial-gradient(circle, rgba(241, 209, 122, 0.24), rgba(20, 12, 8, 0.94));
  font-weight: 900;
  font-size: 1.15rem;
  box-shadow: 0 0 22px rgba(70, 190, 255, 0.22), inset 0 0 18px rgba(241, 209, 122, 0.18);
}

.level-up-button:hover {
  transform: translateY(-2px) scale(1.03);
}

.attr-summary {
  display: grid;
  gap: 7px;
}

.save-summary {
  display: grid;
  gap: 7px;
  border-color: rgba(70, 190, 255, 0.34);
}

.roll-history {
  margin-top: 18px;
}

.history-card {
  display: grid;
  gap: 9px;
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.history-details {
  display: grid;
  gap: 4px;
  color: #e6d7b6;
}

.history-details p {
  margin: 0;
}

.sheet-head {
  position: relative;
  overflow: hidden;
  border-color: rgba(241, 209, 122, 0.58);
  background:
    linear-gradient(90deg, rgba(122, 86, 37, 0.45), rgba(34, 29, 24, 0.98) 18%, rgba(43, 36, 29, 0.98) 70%, rgba(24, 35, 42, 0.96)),
    radial-gradient(circle at 22% 36%, rgba(180, 70, 54, 0.18), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(70, 190, 255, 0.18), transparent 28%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.052) 0 2px, transparent 2px 8px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.52),
    inset 0 0 0 2px rgba(241, 209, 122, 0.13),
    inset 0 0 38px rgba(0, 0, 0, 0.34);
}

.sheet-head::before,
.sheet-head::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(241, 209, 122, 0.24);
  border-radius: 14px;
  pointer-events: none;
}

.sheet-head::after {
  inset: 18px 22px;
  border-color: rgba(70, 190, 255, 0.13);
}

.sheet-head > * {
  position: relative;
  z-index: 1;
}

.sheet-head h1 {
  color: #fff7d8;
  text-shadow: 0 2px 12px #000, 0 0 14px rgba(241, 209, 122, 0.2);
}

.sheet-vitals {
  padding: 8px;
  border: 1px solid rgba(241, 209, 122, 0.22);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
}

.quick-stats span:nth-of-type(1) {
  background: linear-gradient(145deg, rgba(31, 83, 106, 0.78), rgba(14, 16, 19, 0.88));
}

.quick-stats span:nth-of-type(2) {
  background: linear-gradient(145deg, rgba(92, 88, 82, 0.78), rgba(21, 20, 18, 0.9));
}

.quick-stats span:nth-of-type(3) {
  background: linear-gradient(145deg, rgba(55, 87, 52, 0.74), rgba(16, 20, 14, 0.9));
}

.quick-stats span:nth-of-type(4) {
  background: linear-gradient(145deg, rgba(87, 63, 123, 0.72), rgba(18, 15, 24, 0.9));
}

.top-spell-slots {
  border-color: rgba(70, 190, 255, 0.42);
  background:
    linear-gradient(90deg, rgba(23, 77, 103, 0.78), rgba(16, 17, 18, 0.92) 46%, rgba(65, 48, 100, 0.52)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 8px);
}

.slot-pill {
  border-color: rgba(130, 219, 255, 0.5);
  box-shadow: inset 0 0 14px rgba(70, 190, 255, 0.08);
}

.tabs button:nth-child(1) {
  border-color: rgba(241, 209, 122, 0.38);
  background: linear-gradient(145deg, rgba(119, 82, 35, 0.46), rgba(14, 10, 7, 0.8));
}

.tabs button:nth-child(2) {
  border-color: rgba(160, 92, 56, 0.52);
  background: linear-gradient(145deg, rgba(87, 63, 50, 0.72), rgba(25, 21, 18, 0.88));
}

.tabs button:nth-child(3) {
  border-color: rgba(70, 190, 255, 0.46);
  background: linear-gradient(145deg, rgba(31, 83, 106, 0.62), rgba(12, 17, 22, 0.88));
}

.tabs button:nth-child(4) {
  border-color: rgba(91, 124, 66, 0.5);
  background: linear-gradient(145deg, rgba(47, 80, 49, 0.55), rgba(14, 19, 13, 0.88));
}

.tabs button:nth-child(5) {
  border-color: rgba(184, 131, 48, 0.5);
  background: linear-gradient(145deg, rgba(106, 73, 32, 0.58), rgba(23, 17, 11, 0.9));
}

.tabs button:nth-child(6) {
  border-color: rgba(118, 80, 166, 0.5);
  background: linear-gradient(145deg, rgba(70, 53, 102, 0.58), rgba(18, 14, 24, 0.9));
}

.tabs button:nth-child(7) {
  border-color: rgba(70, 190, 255, 0.5);
  background: linear-gradient(145deg, rgba(26, 82, 112, 0.58), rgba(16, 18, 22, 0.9));
}

.tabs button.active {
  color: #1e1712;
  background: linear-gradient(145deg, #f6d983, #b9822e);
}

@keyframes logoPulse {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 16px 34px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(70,190,255,.22)); }
  50% { transform: translateY(-6px); filter: drop-shadow(0 18px 38px rgba(0,0,0,.72)) drop-shadow(0 0 28px rgba(70,190,255,.42)); }
}

@keyframes glint {
  from { opacity: 0; transform: translateX(0) rotate(24deg); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translateX(380%) rotate(24deg); }
}

@keyframes pageFlip {
  from { transform: rotateY(0deg); filter: brightness(1); }
  45% { transform: rotateY(-18deg); filter: brightness(1.18); }
  to { transform: rotateY(0deg); filter: brightness(1); }
}

@keyframes rollPop {
  from { transform: scale(0.72) rotate(-18deg); opacity: 0.2; }
  55% { transform: scale(1.06) rotate(8deg); opacity: 1; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes numberFlicker {
  0% { filter: blur(3px); transform: translateY(-5px); }
  60% { filter: blur(1px); transform: translateY(2px); }
  100% { filter: blur(0); transform: translateY(0); }
}

@media (max-width: 1050px) {
  .portal-grid,
  .login-screen,
  .login-grid,
  .integration-grid,
  .creator,
  .form-grid,
  .sheet-head,
  .book-layout,
  .book-spread,
  .loadout {
    grid-template-columns: 1fr;
  }

  .quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-stage {
    grid-template-columns: 1fr;
  }

  .book-stage::after {
    display: none;
  }

  .reader-toolbar,
  .reader-footer,
  .spell-manage-note {
    align-items: stretch;
    flex-direction: column;
  }

  .item-form {
    grid-template-columns: 1fr;
  }
}

/* Arkano v6 - ornamental RPG interface */
:root {
  --ark-black: #05080a;
  --ark-iron: #10161a;
  --ark-stone: #171411;
  --ark-stone-2: #211a13;
  --ark-gold: #c9983e;
  --ark-gold-soft: #f1d17a;
  --ark-blue: #57c9ff;
  --ark-ember: #9a4b2f;
  --ark-green: #476840;
  --ark-purple: #5b3f7d;
  --ark-border: rgba(226, 178, 81, .72);
  --ark-border-dim: rgba(226, 178, 81, .25);
}

body {
  color: #f3e3bd;
  background:
    linear-gradient(90deg, rgba(2, 5, 7, .88), rgba(7, 8, 9, .52) 38%, rgba(2, 5, 7, .9)),
    radial-gradient(circle at 15% 18%, rgba(212, 143, 55, .25), transparent 32%),
    radial-gradient(circle at 84% 24%, rgba(65, 190, 255, .17), transparent 30%),
    url("assets/arkano-wallpaper.png") center / cover fixed no-repeat,
    #030405;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 0, rgba(241,209,122,.12), transparent 38%);
  mix-blend-mode: screen;
}

.app {
  background:
    linear-gradient(90deg, rgba(0,0,0,.62), transparent 22%, transparent 78%, rgba(0,0,0,.62)),
    radial-gradient(circle at 50% 4%, rgba(87,201,255,.09), transparent 38%);
}

.topbar {
  max-width: 1480px;
  min-height: 58px;
  padding: 8px 14px;
  border: 1px solid var(--ark-border-dim);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(20, 17, 13, .92), rgba(5, 8, 10, .88)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px);
  box-shadow: 0 18px 42px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}

.clock {
  color: #efd59a;
}

.profile-chip {
  border-radius: 8px;
  border-color: rgba(226,178,81,.52);
  background: linear-gradient(145deg, rgba(35,27,18,.95), rgba(8,12,14,.95));
}

.dropdown {
  border: 1px solid var(--ark-border);
  background:
    linear-gradient(180deg, rgba(30, 23, 15, .98), rgba(7, 10, 12, .98)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}

.stage {
  max-width: 1500px;
}

.dashboard-arcane {
  min-height: calc(100vh - 96px);
  align-content: center;
  justify-items: center;
  gap: 18px;
}

.dashboard-logo {
  width: min(620px, 80vw);
  max-height: 300px;
  margin-bottom: 2vh;
}

.main-menu {
  width: min(430px, 86vw);
  gap: 12px;
}

.menu-button {
  min-height: 68px;
  padding: 13px 58px;
  border: 1px solid rgba(241,209,122,.78);
  border-radius: 6px;
  color: #f7e5b8;
  background:
    linear-gradient(90deg, rgba(116,73,31,.82), rgba(17,15,13,.98) 14%, rgba(12,16,18,.98) 50%, rgba(17,15,13,.98) 86%, rgba(116,73,31,.82)),
    radial-gradient(circle at 50% 0, rgba(241,209,122,.18), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px);
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  letter-spacing: .05em;
}

.menu-button::before,
.menu-button::after {
  top: 8px;
  bottom: 8px;
  width: 34px;
  border-color: rgba(241,209,122,.75);
}

.menu-button::before {
  box-shadow: -5px 0 0 -3px var(--ark-blue), inset 8px 0 14px rgba(241,209,122,.08);
}

.menu-button::after {
  box-shadow: 5px 0 0 -3px var(--ark-blue), inset -8px 0 14px rgba(241,209,122,.08);
}

.menu-button:hover {
  transform: translateY(2px);
  background:
    linear-gradient(90deg, rgba(161,103,38,.9), rgba(30,22,13,.98) 14%, rgba(10,22,27,.98) 50%, rgba(30,22,13,.98) 86%, rgba(161,103,38,.9)),
    radial-gradient(circle at 50% 0, rgba(87,201,255,.2), transparent 55%);
}

.panel,
.sheet-head,
.sheet-body,
.steps,
.summary,
.page-card,
.modal-card,
.info,
.spell,
.item-card,
.feature,
.integration-card,
.book-tile,
.auth-card {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--ark-border-dim);
  background:
    linear-gradient(145deg, rgba(27, 22, 16, .95), rgba(7, 10, 12, .94)),
    radial-gradient(circle at 20% 0, rgba(241,209,122,.08), transparent 35%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px);
  box-shadow: 0 18px 46px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.035);
}

.panel::before,
.sheet-head::before,
.sheet-body::before,
.modal-card::before,
.info::before,
.spell::before,
.item-card::before,
.feature::before,
.book-tile::before,
.auth-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(226,178,81,.22);
  border-radius: 6px;
  pointer-events: none;
}

.panel::after,
.sheet-head::after,
.sheet-body::after,
.modal-card::after,
.info::after,
.spell::after,
.item-card::after,
.feature::after,
.book-tile::after,
.auth-card::after {
  content: "◆";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 24px;
  height: 20px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  color: var(--ark-blue);
  font-size: .78rem;
  text-shadow: 0 0 14px rgba(87,201,255,.75);
  pointer-events: none;
}

.panel-head,
.inventory-head,
.history-head {
  border-bottom: 1px solid rgba(226,178,81,.2);
  padding-bottom: 12px;
}

.panel-title h1,
.sheet-head h1,
.reader-toolbar h1,
.modal-card h1,
.info h2,
.feature summary,
.spell summary {
  font-family: Cinzel, serif;
  color: #ffe6a9;
  text-shadow: 0 2px 10px #000, 0 0 12px rgba(241,209,122,.18);
}

.eyebrow {
  color: #d1a85a;
  letter-spacing: .1em;
}

.gold-button,
.ghost-button,
.danger-button,
.dark-button {
  border-radius: 6px;
  border: 1px solid rgba(226,178,81,.48);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.32);
}

.gold-button {
  color: #1c130a;
  background:
    linear-gradient(180deg, #f0c86d, #a76527),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 8px);
}

.ghost-button {
  color: #f5ddb0;
  background: linear-gradient(180deg, rgba(38,30,21,.88), rgba(8,11,13,.88));
}

.danger-button {
  color: #ffe0d5;
  border-color: rgba(210, 82, 57, .55);
  background: linear-gradient(180deg, rgba(107, 39, 31, .86), rgba(23, 12, 12, .92));
}

.sheet-head {
  grid-template-columns: minmax(120px, 164px) minmax(180px, 230px) 1fr minmax(210px, 320px);
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(76,48,24,.78), rgba(13,16,17,.98) 22%, rgba(15,18,20,.98) 70%, rgba(23,41,48,.9)),
    radial-gradient(circle at 18% 30%, rgba(241,209,122,.14), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(87,201,255,.14), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px);
}

.sheet-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.portrait {
  width: 150px;
  height: 178px;
  border-radius: 6px;
  border: 1px solid rgba(241,209,122,.82);
  background:
    linear-gradient(145deg, rgba(42,31,19,.95), rgba(6,9,11,.95)),
    radial-gradient(circle at 50% 20%, rgba(87,201,255,.16), transparent 42%);
}

.portrait::before,
.portrait::after {
  color: #f1d17a;
  text-shadow: 0 0 10px rgba(241,209,122,.6), 0 0 16px rgba(87,201,255,.35);
}

.sheet-vitals,
.quick-stats,
.top-spell-slots {
  border: 1px solid rgba(226,178,81,.3);
  border-radius: 8px;
  background: rgba(2,5,7,.35);
}

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

.vital-pill,
.quick-stats span,
.quick-stat-button,
.level-up-button,
.slot-pill {
  min-height: 42px;
  border-radius: 6px;
  border: 1px solid rgba(226,178,81,.3);
  background:
    linear-gradient(145deg, rgba(25, 31, 34, .92), rgba(8, 11, 13, .94)),
    radial-gradient(circle at 20% 0, rgba(87,201,255,.08), transparent 55%);
}

.tabs {
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14,16,18,.78), rgba(3,5,7,.82)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px);
}

.tabs button {
  border-radius: 6px;
  color: #ecd29a;
}

.tabs button.active {
  color: #17100a;
  background: linear-gradient(180deg, #f4d783, #a86627);
}

.stat-grid,
.card-grid,
.skill-grid,
.market-grid,
.choice-grid {
  gap: 12px;
}

.skill,
.choice {
  border-radius: 6px;
  border: 1px solid rgba(226,178,81,.22);
  background: linear-gradient(145deg, rgba(22,25,27,.88), rgba(7,9,11,.9));
}

.skill.selected,
.choice.selected {
  border-color: rgba(87,201,255,.6);
  box-shadow: 0 0 0 1px rgba(87,201,255,.12), inset 0 0 22px rgba(87,201,255,.08);
}

.spell,
.item-card,
.feature,
.history-card {
  overflow: hidden;
}

.spell summary,
.feature summary {
  list-style: none;
}

.book-tile {
  min-height: 300px;
  overflow: hidden;
  border-color: rgba(226,178,81,.4);
}

.book-main {
  min-height: 246px;
}

.book-main img,
.book-tile img {
  width: 100%;
  aspect-ratio: 3 / 4.2;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(226,178,81,.32);
  box-shadow: inset 0 0 20px rgba(0,0,0,.4);
}

.book-stage {
  background:
    radial-gradient(circle at 50% 0, rgba(241,209,122,.09), transparent 38%),
    linear-gradient(90deg, rgba(7,8,9,.98), rgba(24,18,12,.95), rgba(7,8,9,.98));
  border: 1px solid rgba(226,178,81,.4);
}

.book-page {
  background:
    linear-gradient(145deg, rgba(235,221,183,.95), rgba(177,145,91,.9)),
    repeating-linear-gradient(0deg, rgba(80,49,20,.08) 0 1px, transparent 1px 6px);
  color: #22170c;
}

.book-page h2 {
  color: #43260f;
}

.pdf-render-canvas {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 5px;
  background: #120d08;
}

.book-render-placeholder {
  min-height: 420px;
  display: grid;
  place-content: center;
  gap: 8px;
  color: #43260f;
  text-align: center;
}

.forge-layout,
.integration-grid {
  align-items: start;
}

@media (min-width: 1200px) {
  .sheet-head {
    grid-template-columns: auto minmax(160px, 200px) minmax(180px, 240px) 1fr minmax(230px, 330px);
  }

  .sheet-actions {
    grid-column: auto;
    align-content: start;
  }
}

/* Arkano visual pass: game-menu, ornate sheets and forge/library polish */
.topbar {
  justify-content: space-between;
  border-bottom: 1px solid rgba(222, 176, 83, 0.34);
  background:
    linear-gradient(90deg, rgba(7, 11, 14, 0.92), rgba(24, 18, 13, 0.86), rgba(7, 13, 17, 0.92)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
}

.dashboard-arcane {
  min-height: calc(100vh - 110px);
  align-content: center;
  justify-items: center;
  gap: 26px;
}

.dashboard-logo {
  max-width: min(520px, 72vw);
  filter: drop-shadow(0 28px 42px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(66,190,255,.24));
}

.main-menu {
  width: min(380px, 88vw);
  display: grid;
  gap: 14px;
}

.menu-button {
  width: 100%;
  min-height: 62px;
  border-radius: 8px;
  border: 1px solid rgba(238, 196, 105, 0.72);
  background:
    linear-gradient(180deg, rgba(66, 52, 36, 0.92), rgba(12, 13, 14, 0.95)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 2px, transparent 2px 12px);
  color: #ffeab4;
  font-size: 1.08rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.42);
}

.menu-button:hover {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, rgba(178, 124, 46, 0.96), rgba(36, 25, 16, 0.98)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 12px);
}

.sheet-head {
  grid-template-columns: auto minmax(150px, 190px) minmax(170px, 230px) 1fr minmax(210px, 280px);
  gap: 18px;
  border-radius: 12px;
  border: 1px solid rgba(232, 181, 80, 0.72);
}

.portrait {
  position: relative;
  width: 156px;
  height: 156px;
  border-radius: 10px;
  border: 2px solid rgba(234, 190, 93, 0.82);
  background:
    radial-gradient(circle at 50% 20%, rgba(75, 188, 255, .18), transparent 42%),
    linear-gradient(145deg, rgba(34,28,22,.92), rgba(8,10,12,.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 36px rgba(0,0,0,.44);
  overflow: hidden;
}

.portrait::before,
.portrait::after {
  content: "◆";
  position: absolute;
  left: 50%;
  color: #64d8ff;
  text-shadow: 0 0 14px rgba(70,190,255,.8);
  transform: translateX(-50%);
  z-index: 2;
}

.portrait::before { top: -2px; }
.portrait::after { bottom: -2px; }

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sheet-vitals {
  display: grid;
  align-content: center;
  gap: 10px;
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(34, 31, 27, .96), rgba(12, 14, 16, .95)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px);
}

.vital-pill,
.quick-stats span,
.quick-stat-button,
.level-up-button,
.slot-pill {
  border-radius: 8px;
  border: 1px solid rgba(231, 185, 90, .46);
}

.tabs {
  padding: 8px;
  border: 1px solid rgba(226, 178, 81, .35);
  border-radius: 12px;
  background: rgba(5, 8, 10, .58);
}

.tabs button {
  border-radius: 8px;
  min-height: 44px;
}

.panel,
.sheet-body,
.modal-card {
  border-image: linear-gradient(135deg, rgba(235,191,101,.82), rgba(86,208,255,.28), rgba(235,191,101,.62)) 1;
}

.book-tile {
  display: grid;
  gap: 10px;
  border-radius: 8px;
}

.book-main {
  display: grid;
  gap: 10px;
  width: 100%;
  min-height: 210px;
  padding: 14px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.book-actions,
.tile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 10px 12px;
}

.book-image-page,
.book-text-page,
.book-loading {
  width: 100%;
  min-height: 420px;
  max-height: 66vh;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(102, 215, 255, .22);
  background: rgba(3, 5, 7, .68);
}

.book-text-page {
  overflow: auto;
  padding: 18px;
  white-space: pre-wrap;
  color: #f5e8c1;
}

.book-loading {
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: #f5e8c1;
}

.overlay-layer {
  align-items: flex-start;
  padding-top: 54px;
}

.overlay-card {
  width: min(1180px, 94vw);
  max-height: 88vh;
  overflow: auto;
}

.overlay-card .panel {
  box-shadow: none;
  margin: 0;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(236, 194, 102, .6);
  background: rgba(12, 12, 13, .86);
  color: #ffe8ad;
}

.forge-layout {
  display: grid;
  grid-template-columns: minmax(320px, 480px) 1fr;
  gap: 18px;
}

.forge-form {
  position: sticky;
  top: 84px;
  align-self: start;
}

.import-button {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(239, 196, 96, .55);
  background: linear-gradient(145deg, rgba(46, 35, 24, .92), rgba(13, 15, 17, .9));
  color: #ffe8ad;
  cursor: pointer;
}

.import-button input {
  display: none;
}

.forged-card.draft-card {
  border-color: rgba(102, 215, 255, .5);
}

.creature-sigil,
.creature-portrait {
  display: grid;
  place-items: center;
  color: #65d8ff;
  font-size: 3rem;
}

.creature-action {
  padding: 12px;
  margin: 10px 0;
  border: 1px solid rgba(238, 196, 105, .25);
  border-radius: 8px;
  background: rgba(0, 0, 0, .18);
}

@media (max-width: 1050px) {
  .forge-layout,
  .sheet-head {
    grid-template-columns: 1fr;
  }

  .portrait {
    width: 132px;
    height: 132px;
  }
}

/* Arkano v7 - tela ornamentada, leitura por pagina e ficha premium */
:root {
  --ark-void: #05080a;
  --ark-obsidian: #0a0f12;
  --ark-stone: #171718;
  --ark-stone-2: #24211c;
  --ark-iron: #31363a;
  --ark-bronze: #9f6f31;
  --ark-gold: #e4bb66;
  --ark-gold-soft: #f3d895;
  --ark-blue: #55c7f0;
  --ark-red: #8a2f2a;
  --ark-green: #356b4f;
  --ark-panel: rgba(10, 13, 15, 0.94);
  --ark-text: #f5e7c1;
  --ark-muted: #bba984;
}

body {
  color: var(--ark-text);
  background:
    radial-gradient(circle at 18% 20%, rgba(229, 170, 73, 0.16), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(58, 170, 228, 0.15), transparent 28%),
    radial-gradient(circle at 76% 85%, rgba(113, 42, 95, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(3, 6, 8, 0.52), rgba(3, 5, 6, 0.9)),
    var(--wallpaper, url("assets/arkano-wallpaper.png")) center / cover fixed no-repeat;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at center, transparent 0 46%, rgba(0,0,0,.62) 100%);
  mix-blend-mode: normal;
}

.topbar {
  min-height: 72px;
  padding: 12px 28px;
  background:
    linear-gradient(90deg, rgba(4, 8, 10, .96), rgba(31, 23, 15, .92), rgba(5, 10, 13, .96)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px);
  border-bottom: 1px solid rgba(228, 187, 102, .46);
  box-shadow: 0 18px 42px rgba(0,0,0,.38), inset 0 -1px 0 rgba(84, 199, 240, .18);
}

.clock,
.profile-chip {
  border: 1px solid rgba(228, 187, 102, .42);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(21, 23, 25, .92), rgba(8, 10, 12, .94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 10px 20px rgba(0,0,0,.26);
}

.dashboard-arcane {
  min-height: calc(100vh - 96px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 30px;
  padding: 34px 18px 76px;
}

.dashboard-logo {
  width: min(540px, 78vw);
  max-height: 280px;
  object-fit: contain;
  filter:
    drop-shadow(0 30px 44px rgba(0,0,0,.72))
    drop-shadow(0 0 24px rgba(79, 195, 239, .28))
    drop-shadow(0 0 8px rgba(228, 187, 102, .34));
}

.main-menu {
  width: min(430px, 88vw);
  display: grid;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(9, 13, 15, .72), rgba(0, 0, 0, .42)),
    repeating-linear-gradient(90deg, rgba(228,187,102,.035) 0 1px, transparent 1px 9px);
}

.menu-button {
  position: relative;
  min-height: 70px;
  padding: 0 34px;
  border: 1px solid rgba(228, 187, 102, .86);
  border-radius: 6px;
  color: #fff0bf;
  background:
    linear-gradient(90deg, rgba(124, 76, 31, .76), rgba(16, 16, 15, .98) 18%, rgba(31, 30, 28, .98) 50%, rgba(16, 16, 15, .98) 82%, rgba(124, 76, 31, .76)),
    radial-gradient(circle at 50% 10%, rgba(84, 199, 240, .18), transparent 28%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px);
  font-size: 1.12rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow:
    0 18px 32px rgba(0,0,0,.52),
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 28px rgba(0,0,0,.62);
  overflow: hidden;
}

.menu-button::before,
.menu-button::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  width: 26px;
  border-color: rgba(243, 216, 149, .82);
  filter: drop-shadow(0 0 8px rgba(84,199,240,.3));
}

.menu-button::before {
  left: 10px;
  border-left: 2px solid;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

.menu-button::after {
  right: 10px;
  border-right: 2px solid;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

.menu-button:hover {
  transform: translateY(4px) scale(.985);
  color: #fff8dc;
  background:
    linear-gradient(90deg, rgba(176, 115, 44, .9), rgba(24, 23, 20, .98) 18%, rgba(46, 38, 27, .98) 50%, rgba(24, 23, 20, .98) 82%, rgba(176, 115, 44, .9)),
    radial-gradient(circle at 50% 10%, rgba(84, 199, 240, .3), transparent 32%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.065) 0 1px, transparent 1px 8px);
}

.menu-button:active {
  transform: translateY(8px) scale(.965);
}

.panel,
.sheet-head,
.sheet-body,
.steps,
.summary,
.creator-main,
.modal-card,
.auth-card,
.reader-toolbar,
.reader-footer,
.imported-rules-panel {
  position: relative;
  border: 1px solid rgba(228, 187, 102, .58);
  border-radius: 8px;
  color: var(--ark-text);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 20%),
    radial-gradient(circle at 100% 0%, rgba(84, 199, 240, .14), transparent 26%),
    radial-gradient(circle at 0% 100%, rgba(159, 111, 49, .16), transparent 28%),
    linear-gradient(180deg, rgba(21, 21, 19, .96), rgba(7, 10, 11, .96)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
  box-shadow:
    0 22px 46px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 36px rgba(0,0,0,.48);
}

.panel::before,
.sheet-head::before,
.sheet-body::before,
.steps::before,
.summary::before,
.creator-main::before,
.modal-card::before,
.imported-rules-panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border: 1px solid rgba(84, 199, 240, .16);
  border-radius: 6px;
}

.panel::after,
.sheet-head::after,
.sheet-body::after,
.steps::after,
.summary::after,
.creator-main::after,
.modal-card::after,
.imported-rules-panel::after {
  content: "\25C6";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 38px;
  height: 18px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: var(--ark-blue);
  font-size: .86rem;
  text-shadow: 0 0 14px rgba(84,199,240,.8);
  background: linear-gradient(90deg, transparent, rgba(6,9,11,.96) 24%, rgba(6,9,11,.96) 76%, transparent);
}

.panel-head {
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(228, 187, 102, .22);
}

.panel-title h1,
.sheet-head h1,
.reader-toolbar h1,
.modal-card h1 {
  color: #ffe6a3;
  text-shadow: 0 2px 0 #2b1b0b, 0 0 18px rgba(228,187,102,.22);
}

.eyebrow {
  color: var(--ark-gold-soft);
  letter-spacing: .08em;
}

.sheet-head {
  display: grid;
  grid-template-columns: minmax(118px, 150px) minmax(150px, 190px) minmax(190px, 1fr) minmax(220px, 330px);
  gap: 16px;
  align-items: stretch;
  padding: 18px;
}

.sheet-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.portrait {
  width: clamp(132px, 12vw, 172px);
  height: clamp(132px, 12vw, 172px);
  justify-self: center;
  align-self: center;
  border-radius: 8px;
  border: 2px solid rgba(228, 187, 102, .86);
  background:
    radial-gradient(circle at 50% 18%, rgba(84,199,240,.18), transparent 36%),
    linear-gradient(145deg, #2d261f, #090b0c);
  box-shadow:
    0 18px 38px rgba(0,0,0,.54),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 6px rgba(0,0,0,.28);
}

.portrait::before,
.portrait::after {
  content: "\25C6";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--ark-blue);
  text-shadow: 0 0 12px rgba(84,199,240,.82);
}

.portrait::before { top: -10px; }
.portrait::after { bottom: -10px; }

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sheet-vitals {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 12px;
  border: 1px solid rgba(228, 187, 102, .34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(77, 40, 34, .34), rgba(15, 16, 16, .96)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
}

.vital-pill,
.quick-stats span,
.quick-stat-button,
.slot-pill,
.level-up-button {
  min-height: 42px;
  border: 1px solid rgba(228, 187, 102, .38);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(45, 42, 37, .96), rgba(12, 14, 15, .96)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.hp-pill {
  border-color: rgba(203, 83, 70, .64);
  background: linear-gradient(180deg, rgba(93, 36, 31, .96), rgba(17, 14, 14, .96));
}

.magic-pill,
.slot-pill {
  border-color: rgba(84, 199, 240, .46);
  background: linear-gradient(180deg, rgba(23, 55, 67, .9), rgba(12, 14, 16, .96));
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 10px;
  align-content: center;
}

.level-up-button {
  color: var(--ark-blue);
  font-size: 1.05rem;
  text-shadow: 0 0 12px rgba(84,199,240,.84);
}

.top-spell-slots {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(228, 187, 102, .22);
}

.tabs {
  margin: 14px 0;
  padding: 8px;
  border: 1px solid rgba(228, 187, 102, .4);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 11, 13, .92), rgba(20, 18, 15, .82));
}

.tabs button {
  min-height: 42px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: #d8c596;
  background: transparent;
}

.tabs button.active {
  color: #fff1c1;
  border-color: rgba(228, 187, 102, .58);
  background:
    linear-gradient(180deg, rgba(116, 78, 31, .72), rgba(25, 20, 16, .96)),
    radial-gradient(circle at 50% 0, rgba(84,199,240,.16), transparent 38%);
}

.info,
.choice,
.spell,
.feature,
.item-card,
.roll-history-item,
.forged-card,
.creature-card,
.macro-card,
.integration-card {
  position: relative;
  border: 1px solid rgba(228, 187, 102, .3);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(180deg, rgba(28, 29, 29, .94), rgba(8, 10, 11, .94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 24px rgba(0,0,0,.28);
}

.spell {
  border-color: rgba(84, 199, 240, .36);
  background:
    radial-gradient(circle at 100% 0, rgba(84,199,240,.14), transparent 30%),
    linear-gradient(180deg, rgba(17, 31, 39, .95), rgba(8, 10, 12, .95));
}

.item-card,
.forged-card {
  border-color: rgba(181, 132, 58, .4);
}

.gold-button,
.ghost-button,
.danger-button,
.import-button {
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .02em;
}

.gold-button {
  border: 1px solid rgba(255, 226, 157, .56);
  background:
    linear-gradient(180deg, #d8a85e, #8e5f25 55%, #4a3016),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px);
  color: #211308;
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
}

.ghost-button,
.import-button {
  border: 1px solid rgba(228, 187, 102, .36);
  background: linear-gradient(180deg, rgba(38, 39, 38, .9), rgba(10, 12, 13, .9));
  color: #f4dfaa;
}

.danger-button {
  border: 1px solid rgba(194, 76, 67, .5);
  background: linear-gradient(180deg, rgba(96, 38, 34, .95), rgba(24, 14, 14, .94));
  color: #ffd2c9;
}

.library-shelf {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
}

.book-tile {
  min-height: 300px;
  border: 1px solid rgba(228, 187, 102, .42);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(78, 47, 22, .5), rgba(10, 12, 13, .96) 20%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
  box-shadow: 0 18px 30px rgba(0,0,0,.38), inset 8px 0 18px rgba(0,0,0,.48);
}

.book-main {
  min-height: 254px;
  padding: 14px;
}

.book-main img,
.book-cover-fallback {
  width: min(128px, 74%);
  aspect-ratio: 2 / 3;
  justify-self: center;
  border-radius: 4px;
  border: 1px solid rgba(246, 216, 142, .58);
  object-fit: cover;
  background:
    linear-gradient(135deg, rgba(228, 187, 102, .18), transparent 28%),
    linear-gradient(180deg, #251e17, #090b0c);
  box-shadow: 0 14px 22px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.05);
}

.book-cover-fallback {
  display: grid;
  place-items: center;
  padding: 12px;
  color: #f6dda2;
  text-align: center;
  font-size: .8rem;
  line-height: 1.2;
}

.reader-screen {
  padding: 18px;
}

.book-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 1420px;
  margin: 18px auto;
  perspective: 1600px;
}

.cover-page {
  grid-column: 1 / -1;
  max-width: min(680px, 94vw);
  margin: 0 auto;
}

.book-page {
  min-height: 74vh;
  padding: clamp(14px, 2vw, 24px);
  color: #2d1c0e;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.45), transparent 32%),
    linear-gradient(90deg, rgba(96, 57, 22, .14), transparent 11%, transparent 88%, rgba(96, 57, 22, .16)),
    linear-gradient(180deg, #e5d0a1, #c8ad76);
  border: 1px solid rgba(80, 47, 19, .42);
  box-shadow: inset 0 0 32px rgba(80,47,19,.24), 0 20px 42px rgba(0,0,0,.38);
}

.left-page {
  border-radius: 10px 0 0 10px;
  transform-origin: right center;
}

.right-page {
  border-radius: 0 10px 10px 0;
  transform-origin: left center;
}

.book-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 28px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(255,255,255,.22), rgba(0,0,0,.28));
  box-shadow: 0 0 26px rgba(0,0,0,.46);
}

.book-stage:has(.cover-page)::after {
  display: none;
}

.turning-next .right-page {
  animation: pageTurnIn 360ms ease both;
}

.turning-back .left-page {
  animation: pageTurnBack 360ms ease both;
}

@keyframes pageTurnIn {
  from { transform: rotateY(-12deg); filter: brightness(.78); }
  to { transform: rotateY(0deg); filter: brightness(1); }
}

@keyframes pageTurnBack {
  from { transform: rotateY(12deg); filter: brightness(.78); }
  to { transform: rotateY(0deg); filter: brightness(1); }
}

.book-image-page,
.book-text-page,
.pdf-render-canvas {
  width: 100%;
  max-height: 66vh;
  object-fit: contain;
  background: #130d07;
  border: 1px solid rgba(80, 47, 19, .34);
}

.book-render-placeholder {
  min-height: 58vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  color: #4a2b11;
}

.book-render-placeholder.rendered span {
  opacity: .64;
  font-size: .78rem;
}

.book-file-page {
  display: grid;
  place-items: center;
  min-height: 260px;
  color: #2d1c0e;
}

.imported-rules-panel {
  margin-top: 16px;
  padding: 16px;
}

.rule-count-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.rule-count-grid article {
  padding: 12px;
  border: 1px solid rgba(228,187,102,.3);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(27,28,27,.9), rgba(8,10,12,.9));
}

.rule-count-grid strong {
  display: block;
  color: #ffe19b;
  font-size: 1.45rem;
}

.rule-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.rule-chip-list span {
  padding: 6px 9px;
  border: 1px solid rgba(84,199,240,.24);
  border-radius: 999px;
  background: rgba(12, 26, 32, .66);
  color: #d8eef6;
}

.edit-book-cover-preview {
  width: 128px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgba(228,187,102,.54);
  border-radius: 4px;
  box-shadow: 0 14px 26px rgba(0,0,0,.35);
}

@media (max-width: 980px) {
  .sheet-head,
  .book-stage {
    grid-template-columns: 1fr;
  }

  .sheet-actions,
  .top-spell-slots {
    grid-column: auto;
  }

  .book-stage::after {
    display: none;
  }

  .left-page,
  .right-page,
  .book-page {
    border-radius: 10px;
  }
}

/* Arkano v8 - pergaminho, menu leve e leitor de mesa */
:root {
  --theme-rgb: 84, 199, 240;
  --theme-accent: rgb(130, 215, 248);
  --theme-accent-soft: rgba(130, 215, 248, .42);
  --theme-ink: rgba(28, 22, 15, .92);
  --paper: #d8bd84;
  --paper-light: #ead6a6;
  --paper-dark: #9d743e;
  --ink: #24170c;
}

.main-menu {
  gap: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.menu-button {
  min-height: 64px;
  color: #f8e8bd;
  background:
    linear-gradient(90deg, transparent, rgba(0,0,0,.34) 18%, rgba(0,0,0,.28) 82%, transparent),
    radial-gradient(circle at 50% 50%, rgba(var(--theme-rgb), .16), transparent 68%);
  border-color: rgba(232, 199, 126, .55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 14px 28px rgba(0,0,0,.28);
}

.menu-button::before,
.menu-button::after {
  width: 36px;
  border-color: rgba(247, 218, 150, .9);
}

.menu-button:hover {
  background:
    linear-gradient(90deg, rgba(var(--theme-rgb), .12), rgba(0,0,0,.48) 18%, rgba(var(--theme-rgb), .18) 50%, rgba(0,0,0,.48) 82%, rgba(var(--theme-rgb), .12)),
    radial-gradient(circle at 50% 50%, rgba(var(--theme-rgb), .28), transparent 70%);
  border-color: rgba(255, 232, 170, .88);
  box-shadow:
    inset 0 0 20px rgba(var(--theme-rgb), .13),
    0 10px 22px rgba(0,0,0,.4);
}

.sheet-head,
.sheet-body,
.creator-main,
.steps,
.summary,
.creature-roll-panel,
.roll-history,
.modal-card {
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.28), transparent 24%),
    radial-gradient(circle at 88% 90%, rgba(116,72,34,.22), transparent 28%),
    repeating-linear-gradient(0deg, rgba(70,42,18,.055) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, var(--paper-light), var(--paper));
  border-color: rgba(80, 48, 22, .58);
  box-shadow:
    inset 0 0 38px rgba(71, 39, 14, .22),
    0 18px 36px rgba(0,0,0,.34);
}

.sheet-head {
  grid-template-columns: minmax(110px, 150px) minmax(150px, 190px) minmax(190px, 1fr) minmax(220px, 310px);
}

.sheet-head h1,
.sheet-body h2,
.sheet-body h3,
.creator-main h2,
.steps h2,
.summary h2,
.creature-roll-panel h2,
.roll-history h2 {
  color: #2a190b;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.sheet-head .eyebrow,
.reader-toolbar .eyebrow {
  color: #4b2c12;
}

.info,
.choice,
.feature,
.item-card,
.roll-history-item,
.history-card,
.forged-card,
.creature-card {
  color: var(--ink);
  border-color: rgba(70, 42, 18, .34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(180deg, rgba(236, 216, 170, .86), rgba(188, 151, 92, .72));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 18px rgba(0,0,0,.18);
}

.sheet-body .info,
.sheet-body .feature,
.sheet-body .item-card,
.creature-roll-panel .skill,
.roll-history .info {
  color: #201308;
  background:
    linear-gradient(135deg, rgba(255,255,255,.26), transparent 32%),
    repeating-linear-gradient(0deg, rgba(75, 45, 18, .045) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(231, 203, 139, .94), rgba(195, 157, 92, .88));
}

.sheet-body .info p,
.sheet-body .info small,
.sheet-body .feature p {
  color: #28190d;
}

.spell {
  color: #102434;
  border-color: rgba(var(--theme-rgb), .36);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--theme-rgb), .20), transparent 34%),
    linear-gradient(180deg, rgba(214, 231, 226, .86), rgba(157, 183, 177, .74));
}

.tabs {
  background: rgba(14, 10, 7, .56);
}

.tabs button {
  color: #f3dfad;
}

.tabs button.active {
  background:
    linear-gradient(180deg, rgba(226, 190, 112, .82), rgba(126, 82, 34, .9)),
    radial-gradient(circle at 50% 0, rgba(var(--theme-rgb), .18), transparent 42%);
  color: #1d1208;
}

.stat-grid,
.skill-grid,
.card-grid {
  gap: 10px;
}

.sheet-body {
  padding: 16px 18px;
}

.sheet-body .info {
  padding: 12px 14px;
}

.compact-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}

.creature-roll-panel {
  margin-top: 14px;
  padding: 14px;
}

.creature-roll-button {
  min-height: 44px;
}

.reader-toolbar {
  gap: 14px;
}

.reader-tools {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.reader-search {
  display: grid;
  gap: 4px;
  min-width: min(260px, 60vw);
  color: #f3dfad;
}

.reader-search span {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.reader-search input {
  min-height: 40px;
  border-radius: 6px;
  border: 1px solid rgba(230, 190, 112, .42);
  background: rgba(5, 7, 8, .72);
  color: #fff2c5;
}

.reader-icon-button {
  width: 42px;
  min-width: 42px;
  padding-inline: 0;
  font-size: 1.08rem;
}

.reader-search-status {
  color: #ffe4a0;
  border: 1px solid rgba(var(--theme-rgb), .28);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0,0,0,.25);
}

.reader-screen:fullscreen,
.reader-screen.is-fullscreen {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 5%, rgba(var(--theme-rgb), .18), transparent 28%),
    linear-gradient(180deg, rgba(4,5,6,.98), rgba(10, 7, 5, .98));
  padding: 14px;
}

.reader-screen:fullscreen .book-stage,
.reader-screen.is-fullscreen .book-stage {
  max-width: min(1680px, 96vw);
}

.reader-screen:fullscreen .book-page,
.reader-screen.is-fullscreen .book-page {
  min-height: calc(100vh - 190px);
}

@media (max-width: 980px) {
  .reader-tools {
    justify-content: stretch;
  }

  .reader-search {
    min-width: 100%;
  }
}

/* Arkano v9 - pedra, metal e ornamentos celtas */
:root {
  color-scheme: dark;
  --stone-black: #07090a;
  --stone-deep: #0d1113;
  --stone-mid: #1a1f22;
  --stone-high: #2b3134;
  --iron-dark: #24282a;
  --iron-light: #62696b;
  --wood-dark: #24170f;
  --wood-mid: #4b301d;
  --celtic-gold: #d8b86c;
  --celtic-gold-bright: #ffe3a0;
  --celtic-gold-dark: #725021;
  --text-main: #fff4d6;
  --text-soft: #ded4bd;
  --text-muted: #bcb29e;
  --danger-bright: #ffaea3;
  --stone-texture:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.055), transparent 20%),
    radial-gradient(circle at 82% 88%, rgba(0,0,0,.48), transparent 32%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(18deg, rgba(0,0,0,.08) 0 2px, transparent 2px 11px),
    linear-gradient(155deg, rgba(42,48,51,.97), rgba(12,15,17,.98) 54%, rgba(23,26,27,.98));
}

body {
  color: var(--text-main);
  background-color: var(--stone-black);
}

body::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.24) 32%, rgba(0,0,0,.24) 68%, rgba(0,0,0,.74)),
    radial-gradient(circle at 50% 24%, rgba(var(--theme-rgb), .12), transparent 30%),
    radial-gradient(ellipse at center, transparent 0 44%, rgba(0,0,0,.67) 100%),
    repeating-linear-gradient(24deg, rgba(255,255,255,.018) 0 1px, transparent 1px 8px);
}

.topbar {
  grid-template-columns: auto 1fr auto;
  min-height: 62px;
  border: 1px solid rgba(216,184,108,.45);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(6,8,9,.96), rgba(31,34,34,.94) 28%, rgba(24,20,15,.94) 70%, rgba(7,9,10,.96)),
    repeating-linear-gradient(110deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.85),
    inset 0 -12px 24px rgba(0,0,0,.28),
    0 12px 30px rgba(0,0,0,.35);
}

.topbar .clock {
  grid-column: 1;
}

.topbar .profile-area {
  grid-column: 3;
}

.topbar::before,
.topbar::after {
  display: none;
}

.dashboard-arcane {
  min-height: calc(100vh - 96px);
  gap: 18px;
  padding: 26px 18px 58px;
}

.dashboard-logo {
  width: min(470px, 70vw);
  max-height: 230px;
  margin: 0;
  filter:
    drop-shadow(0 24px 38px rgba(0,0,0,.78))
    drop-shadow(0 0 16px rgba(var(--theme-rgb), .28))
    drop-shadow(0 0 5px rgba(216,184,108,.34));
}

.main-menu {
  position: relative;
  box-sizing: border-box;
  width: min(380px, 88vw);
  display: block;
  padding: 42px 28px 24px;
  border: 1px solid rgba(255,225,155,.78);
  border-radius: 0;
  clip-path: polygon(
    18px 0,
    calc(50% - 34px) 0,
    calc(50% - 24px) 9px,
    calc(50% + 24px) 9px,
    calc(50% + 34px) 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    18px 100%,
    0 calc(100% - 18px),
    0 18px
  );
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 24%),
    radial-gradient(circle at 50% 0, rgba(var(--theme-rgb), .14), transparent 34%),
    repeating-linear-gradient(104deg, rgba(255,255,255,.02) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, rgba(34,39,41,.82), rgba(6,8,9,.88) 54%, rgba(20,22,22,.84));
  box-shadow:
    inset 0 0 0 4px rgba(2,3,4,.74),
    inset 0 0 0 5px rgba(216,184,108,.18),
    inset 0 0 34px rgba(0,0,0,.64),
    0 22px 52px rgba(0,0,0,.58),
    0 0 24px rgba(var(--theme-rgb), .08);
  backdrop-filter: blur(9px);
}

.main-menu::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(216,184,108,.32);
  clip-path: polygon(
    11px 0,
    calc(100% - 11px) 0,
    100% 11px,
    100% calc(100% - 11px),
    calc(100% - 11px) 100%,
    11px 100%,
    0 calc(100% - 11px),
    0 11px
  );
  pointer-events: none;
}

.main-menu::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--celtic-gold);
  background:
    radial-gradient(circle, rgba(var(--theme-rgb), .72) 0 22%, transparent 25%),
    var(--stone-deep);
  box-shadow:
    0 0 0 4px rgba(4,6,7,.92),
    0 0 12px rgba(var(--theme-rgb), .42);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

.main-menu-title {
  position: absolute;
  top: 10px;
  left: 50%;
  min-width: 136px;
  transform: translateX(-50%);
  text-align: center;
  color: var(--celtic-gold-bright);
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 2px 5px #000, 0 0 12px rgba(var(--theme-rgb), .34);
}

.main-menu-title::before,
.main-menu-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--celtic-gold));
}

.main-menu-title::before {
  right: calc(100% - 10px);
}

.main-menu-title::after {
  left: calc(100% - 10px);
  transform: scaleX(-1);
}

.main-menu-options {
  display: grid;
}

.menu-button {
  position: relative;
  width: 100%;
  min-height: 47px;
  padding: 9px 42px;
  border: 0;
  border-bottom: 1px solid rgba(216,184,108,.25);
  border-radius: 0;
  color: var(--text-main);
  background: transparent;
  box-shadow: none;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 1.03rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 2px 5px #000;
  overflow: visible;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    text-shadow 150ms ease,
    transform 150ms ease;
}

.menu-button:last-child {
  border-bottom: 0;
}

.menu-button::before,
.menu-button::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: auto;
  width: 18px;
  height: 9px;
  border: 0;
  opacity: .66;
  background: var(--celtic-gold);
  clip-path: polygon(0 40%, 68% 40%, 100% 0, 100% 100%, 68% 60%, 0 60%);
  filter: drop-shadow(0 0 5px rgba(var(--theme-rgb), .22));
  transform: translateY(-50%);
  transition: width 150ms ease, opacity 150ms ease, filter 150ms ease;
}

.menu-button::before {
  left: 8px;
}

.menu-button::after {
  right: 8px;
  transform: translateY(-50%) scaleX(-1);
}

.menu-button:hover,
.menu-button:focus-visible {
  color: #fff9e8;
  background:
    linear-gradient(90deg, transparent, rgba(var(--theme-rgb), .13) 20%, rgba(216,184,108,.10) 50%, rgba(var(--theme-rgb), .13) 80%, transparent);
  text-shadow:
    0 2px 5px #000,
    0 0 11px rgba(var(--theme-rgb), .62);
  transform: translateX(0);
}

.menu-button:hover::before,
.menu-button:hover::after,
.menu-button:focus-visible::before,
.menu-button:focus-visible::after {
  width: 29px;
  opacity: 1;
  filter:
    drop-shadow(0 0 6px rgba(var(--theme-rgb), .55))
    drop-shadow(0 1px 1px #000);
}

.menu-button:active {
  transform: translateY(2px);
  background: rgba(var(--theme-rgb), .18);
}

.panel,
.sheet-head,
.sheet-body,
.steps,
.summary,
.creator-main,
.modal-card,
.auth-card,
.creature-roll-panel,
.roll-history,
.reader-toolbar,
.reader-footer,
.imported-rules-panel {
  position: relative;
  color: var(--text-main);
  border: 1px solid rgba(216,184,108,.44);
  border-radius: 4px;
  border-image: none;
  background: var(--stone-texture);
  box-shadow:
    inset 0 0 0 2px rgba(1,2,3,.72),
    inset 0 0 0 3px rgba(216,184,108,.07),
    inset 0 0 38px rgba(0,0,0,.42),
    0 16px 38px rgba(0,0,0,.4);
}

.panel::before,
.sheet-head::before,
.sheet-body::before,
.steps::before,
.summary::before,
.creator-main::before,
.modal-card::before,
.auth-card::before,
.creature-roll-panel::before,
.roll-history::before,
.imported-rules-panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(216,184,108,.15);
  border-radius: 1px;
  background:
    linear-gradient(135deg, var(--celtic-gold) 0 2px, transparent 2px) top left / 18px 18px no-repeat,
    linear-gradient(225deg, var(--celtic-gold) 0 2px, transparent 2px) top right / 18px 18px no-repeat,
    linear-gradient(45deg, var(--celtic-gold) 0 2px, transparent 2px) bottom left / 18px 18px no-repeat,
    linear-gradient(315deg, var(--celtic-gold) 0 2px, transparent 2px) bottom right / 18px 18px no-repeat;
  pointer-events: none;
}

.panel::after,
.sheet-head::after,
.sheet-body::after,
.steps::after,
.summary::after,
.creator-main::after,
.modal-card::after,
.auth-card::after,
.creature-roll-panel::after,
.roll-history::after,
.imported-rules-panel::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255,226,157,.75);
  background: rgba(var(--theme-rgb), .44);
  box-shadow: 0 0 9px rgba(var(--theme-rgb), .36);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

.panel > *,
.sheet-head > *,
.sheet-body > *,
.steps > *,
.summary > *,
.creator-main > *,
.modal-card > *,
.auth-card > *,
.creature-roll-panel > *,
.roll-history > *,
.imported-rules-panel > * {
  position: relative;
  z-index: 1;
}

.sheet-head {
  grid-template-columns: minmax(108px, 142px) minmax(145px, 178px) minmax(185px, 1fr) minmax(215px, 300px);
  gap: 14px;
  padding: 15px;
  background:
    radial-gradient(circle at 16% 40%, rgba(var(--theme-rgb), .11), transparent 26%),
    linear-gradient(90deg, rgba(37,39,39,.98), rgba(11,14,16,.98) 34%, rgba(26,24,20,.98) 72%, rgba(12,17,19,.98)),
    repeating-linear-gradient(112deg, rgba(255,255,255,.018) 0 1px, transparent 1px 8px);
}

.sheet-head h1,
.sheet-body h1,
.sheet-body h2,
.sheet-body h3,
.creator-main h1,
.creator-main h2,
.creator-main h3,
.steps h2,
.summary h2,
.creature-roll-panel h2,
.roll-history h2,
.panel-title h1,
.reader-toolbar h1,
.modal-card h1 {
  color: var(--celtic-gold-bright);
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  letter-spacing: .02em;
  text-shadow: 0 2px 5px #000, 0 0 13px rgba(216,184,108,.12);
}

.panel-title h1,
.sheet-head h1,
.reader-toolbar h1,
.modal-card h1 {
  font-size: 2rem;
}

.sheet-body h2,
.creator-main h2,
.steps h2,
.summary h2,
.creature-roll-panel h2,
.roll-history h2 {
  font-size: 1.28rem;
}

.sheet-head .eyebrow,
.reader-toolbar .eyebrow,
.eyebrow {
  color: #f0cf82;
  text-shadow: 0 1px 3px #000;
}

.sheet-head p,
.sheet-body p,
.creator-main p,
.steps p,
.summary p,
.creature-roll-panel p,
.roll-history p,
.modal-card p {
  color: var(--text-soft);
}

.portrait,
.creature-portrait {
  border: 2px solid rgba(216,184,108,.74);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(var(--theme-rgb), .13), transparent 34%),
    linear-gradient(160deg, #34393b, #090b0c);
  box-shadow:
    inset 0 0 0 3px rgba(4,6,7,.76),
    inset 0 0 0 4px rgba(216,184,108,.18),
    0 0 18px rgba(var(--theme-rgb), .18),
    0 12px 24px rgba(0,0,0,.42);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}

.sheet-vitals,
.quick-stats,
.top-spell-slots {
  gap: 7px;
}

.vital-pill,
.quick-stats > *,
.slot-pill,
.quick-stat-button {
  border: 1px solid rgba(216,184,108,.35);
  border-radius: 3px;
  color: var(--text-main);
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 36%),
    linear-gradient(180deg, rgba(44,49,51,.94), rgba(10,13,14,.96));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.7),
    0 5px 12px rgba(0,0,0,.24);
}

.hp-pill {
  border-left: 4px solid #d7675a;
}

.magic-pill,
.slot-pill {
  border-left: 4px solid rgb(var(--theme-rgb));
}

.quick-stats > *:nth-child(2) {
  border-left: 4px solid #9ba4a8;
}

.quick-stats > *:nth-child(3) {
  border-left: 4px solid #d8b86c;
}

.tabs {
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(216,184,108,.34);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(31,35,37,.92), rgba(5,7,8,.94)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px);
  box-shadow: inset 0 0 18px rgba(0,0,0,.54), 0 9px 18px rgba(0,0,0,.24);
}

.tabs button,
.tabs button:nth-child(n) {
  position: relative;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #dfd4b8;
  background: transparent;
  box-shadow: none;
  font-weight: 800;
}

.tabs button:hover {
  color: #fff6da;
  border-color: rgba(216,184,108,.3);
  background: rgba(var(--theme-rgb), .08);
  transform: translateY(-1px);
}

.tabs button.active,
.tabs button:nth-child(n).active {
  color: #fff7de;
  border-color: rgba(255,226,157,.66);
  background:
    linear-gradient(180deg, rgba(var(--theme-rgb), .17), rgba(35,28,19,.74)),
    linear-gradient(90deg, transparent, rgba(216,184,108,.13), transparent);
  box-shadow:
    inset 0 -3px 0 var(--celtic-gold),
    inset 0 0 0 1px rgba(0,0,0,.62),
    0 0 12px rgba(var(--theme-rgb), .12);
}

.sheet-body {
  padding: 15px 16px;
}

.info,
.choice,
.feature,
.item-card,
.roll-history-item,
.history-card,
.forged-card,
.creature-card,
.skill,
.notice,
.slot,
.macro-card,
.integration-card {
  position: relative;
  color: var(--text-main);
  border: 1px solid rgba(138,145,147,.38);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 27%),
    radial-gradient(circle at 100% 0, rgba(var(--theme-rgb), .055), transparent 35%),
    repeating-linear-gradient(116deg, rgba(255,255,255,.015) 0 1px, transparent 1px 8px),
    linear-gradient(165deg, rgba(39,44,46,.96), rgba(11,14,15,.97));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.66),
    inset 0 0 18px rgba(0,0,0,.28),
    0 8px 17px rgba(0,0,0,.22);
}

.sheet-body .info,
.sheet-body .feature,
.sheet-body .item-card,
.creature-roll-panel .skill,
.roll-history .info {
  color: var(--text-main);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(circle at 100% 0, rgba(var(--theme-rgb), .06), transparent 34%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.014) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, rgba(43,48,50,.97), rgba(10,13,14,.98));
}

.sheet-body .info p,
.sheet-body .info small,
.sheet-body .feature p,
.info p,
.info small,
.feature p,
.choice p,
.item-card p,
.history-card p {
  color: var(--text-soft);
}

.info strong,
.choice strong,
.feature strong,
.item-card strong,
.history-card strong {
  color: #fff0bd;
}

.spell {
  color: #eefaff;
  border: 1px solid rgba(var(--theme-rgb), .42);
  border-left: 4px solid rgb(var(--theme-rgb));
  border-radius: 3px;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--theme-rgb), .17), transparent 36%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.018) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, rgba(22,40,48,.97), rgba(6,11,14,.98));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.64),
    0 0 14px rgba(var(--theme-rgb), .08);
}

.spell p,
.spell small,
.spell li {
  color: #dcebf0;
}

.item-card,
.forged-card,
.inventory-item {
  border-left: 4px solid #a87338;
  background:
    linear-gradient(135deg, rgba(216,184,108,.07), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, rgba(49,39,29,.97), rgba(13,12,11,.98));
}

.creature-card,
.creature-roll-panel {
  border-left-color: #8f6c96;
}

input,
textarea,
select {
  color: #fff6dc;
  border: 1px solid rgba(216,184,108,.38);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(17,20,21,.97), rgba(5,7,8,.98));
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.018);
}

input::placeholder,
textarea::placeholder {
  color: #aaa08c;
  opacity: 1;
}

select option {
  color: #fff5d7;
  background: #101315;
}

.gold-button,
.ghost-button,
.danger-button,
.import-button {
  min-height: 38px;
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 6px 13px rgba(0,0,0,.25);
}

.gold-button {
  color: #171008;
  border: 1px solid #ffe2a0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.24), transparent 25%),
    linear-gradient(180deg, #dab768, #8a612b 58%, #4b3219);
}

.ghost-button,
.import-button {
  color: #f8e5b4;
  border: 1px solid rgba(216,184,108,.42);
  background:
    linear-gradient(180deg, rgba(50,55,57,.94), rgba(10,13,14,.97));
}

.danger-button {
  color: #ffe1dc;
  border: 1px solid rgba(255,135,120,.56);
  background: linear-gradient(180deg, rgba(110,44,39,.94), rgba(27,13,13,.98));
}

.gold-button:hover,
.ghost-button:hover,
.import-button:hover,
.danger-button:hover {
  filter: brightness(1.14);
  transform: translateY(-1px);
}

.panel-head,
.inventory-head,
.history-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(216,184,108,.25);
}

.panel-head::after,
.inventory-head::after,
.history-head::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 9px;
  background: linear-gradient(90deg, var(--celtic-gold), transparent);
}

.library-shelf {
  gap: 15px;
}

.book-tile {
  border-radius: 3px;
  border-color: rgba(216,184,108,.45);
  background:
    linear-gradient(90deg, rgba(75,43,22,.62), rgba(12,14,15,.97) 19%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px);
}

.reader-toolbar,
.reader-footer {
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 25%),
    linear-gradient(160deg, rgba(41,46,48,.97), rgba(8,11,12,.98));
}

.reader-search span,
.reader-search-status {
  color: var(--text-main);
}

.reader-search-status {
  border-radius: 3px;
  background: rgba(var(--theme-rgb), .09);
}

.steps,
.summary,
.creator-main {
  padding: 14px;
}

.step,
.creator-step,
.summary-row {
  border-radius: 2px;
}

.step {
  color: #e7dac0;
  border: 1px solid rgba(138,145,147,.34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 32%),
    linear-gradient(180deg, rgba(39,44,46,.94), rgba(12,15,16,.96));
}

.step.active {
  color: #fff4cf;
  border-color: rgba(255,226,157,.68);
  border-left: 4px solid var(--celtic-gold);
  background:
    radial-gradient(circle at 0 50%, rgba(var(--theme-rgb), .18), transparent 42%),
    linear-gradient(180deg, rgba(74,58,34,.84), rgba(23,22,20,.97));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    0 0 12px rgba(var(--theme-rgb), .1);
}

.auth-card {
  max-width: 480px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #fff1b6;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #080a0b, 0 0 16px rgba(var(--theme-rgb), .62);
}

@media (max-width: 980px) {
  .sheet-head {
    grid-template-columns: minmax(96px, 126px) minmax(140px, 1fr);
  }

  .sheet-actions,
  .quick-stats,
  .top-spell-slots {
    grid-column: 1 / -1;
  }

  .main-menu {
    width: min(360px, 92vw);
  }
}

@media (max-width: 620px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px;
  }

  .topbar .clock {
    min-width: 0;
  }

  .topbar .clock span {
    font-size: .72rem;
    line-height: 1.15;
  }

  .topbar .profile-chip {
    max-width: 180px;
  }

  .dashboard-logo {
    width: min(390px, 82vw);
  }

  .main-menu {
    width: min(340px, calc(100vw - 56px));
    padding: 40px 18px 22px;
  }

  .menu-button {
    min-height: 45px;
    padding-inline: 36px;
    font-size: .96rem;
  }

  .panel-title h1,
  .sheet-head h1,
  .reader-toolbar h1,
  .modal-card h1 {
    font-size: 1.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .main-menu,
  .menu-button,
  .panel,
  .sheet-head,
  .sheet-body,
  .steps,
  .summary,
  .creator-main,
  .modal-card,
  .info,
  .spell,
  .item-card,
  .tabs,
  .tabs button {
    border: 1px solid CanvasText;
  }

  .tabs button.active,
  .menu-button:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* Arkano v10 - criatura, alvo e mesa local */
.creature-builder-section {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(216,184,108,.32);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 32%),
    linear-gradient(180deg, rgba(32,36,38,.9), rgba(7,9,10,.94));
}

.creature-builder-section legend {
  padding: 0 8px;
  color: var(--celtic-gold-bright);
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-weight: 800;
  letter-spacing: .05em;
}

.creature-builder-list {
  display: grid;
  gap: 12px;
}

.creature-builder-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(138,145,147,.28);
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,.014) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, rgba(43,48,50,.78), rgba(10,13,14,.82));
}

.trait-builder-row {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
}

.wide-field {
  grid-column: 1 / -1;
}

.creature-attr-grid,
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
}

.check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(216,184,108,.22);
  background: rgba(0,0,0,.18);
}

.creature-action {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(216,184,108,.18);
}

.creature-action:last-child {
  border-bottom: 0;
}

.conditions-panel {
  border-left: 4px solid #8f6c96;
}

.condition-chip {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(216,184,108,.24);
  background: rgba(0,0,0,.2);
}

.condition-chip small {
  color: var(--text-muted);
}

.condition-note {
  display: block;
  margin-top: 4px;
  color: #f3d78a;
  letter-spacing: .02em;
}

.target-modal {
  width: min(760px, 94vw);
}

.target-picker {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.target-choice {
  display: grid;
  gap: 3px;
  text-align: left;
}

.target-choice span {
  color: var(--text-soft);
}

.roll20-table-info {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(var(--theme-rgb), .28);
  background: rgba(var(--theme-rgb), .07);
}

.creature-edit-modal {
  width: min(1120px, 96vw);
  max-height: 92vh;
  overflow: auto;
}

@media (max-width: 860px) {
  .creature-builder-row,
  .trait-builder-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .creature-builder-row,
  .trait-builder-row {
    grid-template-columns: 1fr;
  }
}

/* Arkano v12 - portal, leitor ampliado e ponte de condicoes */
.main-menu-options {
  gap: 16px;
}

.menu-button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 72px;
}

.menu-button strong {
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.menu-button span {
  color: #d6c69c;
  font-size: .78rem;
  letter-spacing: .05em;
}

.mestrando-placeholder .info {
  min-height: 180px;
}

.reader-zoom-label {
  min-width: 58px;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(230, 190, 112, .36);
  background: rgba(0,0,0,.36);
  color: #ffe4a0;
  font-weight: 800;
  border-radius: 6px;
}

.book-stage {
  overflow: auto;
}

.book-page {
  transform-origin: top center;
}

.book-render-placeholder {
  overflow: auto;
}

.pdf-render-canvas {
  width: auto;
  max-width: none;
}

.reader-screen:fullscreen,
.reader-screen.is-fullscreen {
  padding: 10px 14px;
}

.reader-screen:fullscreen .reader-toolbar,
.reader-screen.is-fullscreen .reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 8;
}

.reader-screen:fullscreen .book-stage,
.reader-screen.is-fullscreen .book-stage {
  max-width: 100%;
  height: calc(100vh - 126px);
  align-items: stretch;
}

.reader-screen:fullscreen .book-page,
.reader-screen.is-fullscreen .book-page {
  min-height: calc(100vh - 150px);
}

.reader-screen:fullscreen .book-page:has(.pdf-render-canvas),
.reader-screen.is-fullscreen .book-page:has(.pdf-render-canvas) {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.reader-screen:fullscreen .book-render-placeholder,
.reader-screen.is-fullscreen .book-render-placeholder {
  min-height: calc(100vh - 230px);
}

/* Arkano v13 - Lendas refinado, topo flutuante e Oraculo fullscreen limpo */
.topbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 14px 22px 4px !important;
}

.topbar::before,
.topbar::after {
  display: none !important;
}

.topbar .clock,
.topbar .profile-chip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f9e7b2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9), 0 0 14px rgba(51, 167, 211, .22);
}

.topbar .clock strong,
.topbar .clock span {
  color: #f9e7b2;
}

.topbar .profile-chip .avatar {
  border: 1px solid rgba(232, 185, 89, .76);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 0 18px rgba(52, 178, 225, .24);
}

.lendas-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px;
  border: 1px solid rgba(230, 185, 96, .34);
  background:
    linear-gradient(90deg, rgba(10, 14, 17, .82), rgba(28, 25, 21, .72)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 0 24px rgba(0,0,0,.54), 0 12px 24px rgba(0,0,0,.28);
  border-radius: 10px;
}

.lendas-tabs button {
  position: relative;
  min-width: 150px;
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid rgba(226, 177, 82, .58);
  color: #f7e5b3;
  background:
    linear-gradient(180deg, rgba(21, 34, 40, .9), rgba(9, 12, 15, .92)),
    radial-gradient(circle at 50% 0, rgba(65, 180, 220, .24), transparent 60%);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}

.lendas-tabs button::before,
.lendas-tabs button::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e8b959, transparent);
}

.lendas-tabs button::before { left: 8px; }
.lendas-tabs button::after { right: 8px; }

.lendas-tabs button:hover,
.lendas-tabs button.active {
  transform: translateY(-1px);
  color: #fff6cf;
  border-color: rgba(255, 214, 119, .95);
  background:
    linear-gradient(180deg, rgba(31, 76, 89, .94), rgba(15, 18, 19, .96)),
    radial-gradient(circle at 50% 0, rgba(67, 198, 245, .34), transparent 64%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 0 20px rgba(61, 181, 222, .24);
}

.creature-add-tile {
  min-height: 210px;
  border-style: dashed;
  background:
    linear-gradient(145deg, rgba(16, 20, 21, .86), rgba(42, 35, 26, .82)),
    repeating-linear-gradient(45deg, rgba(232, 185, 89, .06) 0 1px, transparent 1px 8px);
}

.creature-add-tile .creature-sigil {
  font-size: 3.4rem;
  line-height: 1;
}

.forge-panel .panel-title .eyebrow,
.forge-panel .panel-title h1 {
  font-size: 0;
}

.forge-panel .panel-title .eyebrow::after {
  content: "Lendas";
  font-size: .74rem;
  letter-spacing: .16em;
}

.forge-panel .panel-title h1::after {
  content: "Forja de equipamentos";
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
  line-height: 1.05;
}

.inline-refresh {
  margin-left: 8px;
  padding: 5px 10px;
  min-height: 30px;
}

.reader-fullscreen-close {
  display: none;
}

.reader-screen:fullscreen,
.reader-screen.is-fullscreen {
  width: 100vw;
  height: 100vh;
  padding: 0 !important;
  overflow: hidden;
  background: #050607;
}

.reader-screen:fullscreen .reader-toolbar,
.reader-screen.is-fullscreen .reader-toolbar,
.reader-screen:fullscreen .reader-footer,
.reader-screen.is-fullscreen .reader-footer {
  display: none !important;
}

.reader-screen:fullscreen .reader-fullscreen-close,
.reader-screen.is-fullscreen .reader-fullscreen-close {
  display: grid;
  place-items: center;
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 30;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(245, 205, 115, .82);
  color: #ffe9aa;
  background: rgba(7, 8, 9, .82);
  box-shadow: 0 0 0 2px rgba(0,0,0,.44), 0 0 20px rgba(54, 183, 229, .22);
  font-size: 1.1rem;
  font-weight: 900;
}

.reader-screen:fullscreen .book-stage,
.reader-screen.is-fullscreen .book-stage {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  padding: 24px;
  overflow: auto;
  align-items: center;
  justify-content: center;
  cursor: grab;
  gap: 0;
}

.reader-screen:fullscreen .book-stage.dragging,
.reader-screen.is-fullscreen .book-stage.dragging {
  cursor: grabbing;
  user-select: none;
}

.reader-screen:fullscreen .book-page,
.reader-screen.is-fullscreen .book-page {
  min-height: calc(100vh - 48px);
  max-height: none;
  transform-origin: center center;
  box-shadow: inset 0 0 42px rgba(75, 48, 18, .32), 0 0 0 1px rgba(240, 195, 104, .18);
}

.reader-screen:fullscreen .cover-page,
.reader-screen.is-fullscreen .cover-page {
  width: min(74vw, 720px);
  max-width: none;
}

.reader-screen:fullscreen .book-render-placeholder,
.reader-screen.is-fullscreen .book-render-placeholder {
  min-height: calc(100vh - 140px);
  overflow: visible;
}

.reader-screen:fullscreen .pdf-render-canvas,
.reader-screen.is-fullscreen .pdf-render-canvas {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}