@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --gold: #dab87a;
  --gold-bright: #ffe0a0;
  --muted: #b5aa92;
  --line: #d7aa614f;
  --carving: linear-gradient(90deg, #160e09, #57402a 18%, #2d1d12 48%, #61472b 80%, #1b110c);
  --wood: repeating-linear-gradient(2deg, #b68a4310 0 1px, transparent 1px 5px, #09050233 6px 7px), linear-gradient(110deg, #422d1c, #21170f 48%, #46301c);
}
.brand, h1, h2, .home-nav button, .button, .realm-tab strong {
  font-family: "Cinzel", Georgia, serif;
}
.home-title {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  font-size: clamp(64px, 10vw, 144px);
  letter-spacing: .07em;
  color: #f5d795;
  background: linear-gradient(180deg, #fff3d0 5%, #dfb771 43%, #ad763e 49%, #fbe5aa 58%, #cf9d55 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 1px #251408) drop-shadow(0 5px 25px #000);
  text-shadow: none;
}
.home { background-position: center 43%; }
.home:before {
  background: linear-gradient(180deg, #070a0980, #070a0912 28%, #08090725 65%, #070a0bed), linear-gradient(90deg, #04060560, transparent 30% 70%, #04060560);
}
.home-main { z-index: 2; }
.home-kicker { text-shadow: 0 2px 8px #000; }
.home-subtitle { color: #ffebbd; text-shadow: 0 2px 12px #000; }
.home-description { color: #f1e4cb; }
.home .topbar, .game-topbar, .page .topbar {
  background: linear-gradient(180deg, #140e09eb, #241b12c9 75%, #0d0a07d9);
  border-bottom: 3px double #b18a4c88;
  box-shadow: 0 4px 24px #0006, inset 0 1px #ffda8e18;
}
.brand { letter-spacing: .12em; text-shadow: 0 2px 3px #000; }
.brand-mark { color: #f6cf7c; text-shadow: 0 0 17px #ecad5877; }
.home-bottom { z-index: 2; }
.home-nav {
  background: linear-gradient(90deg, transparent, #24180fdd 20% 80%, transparent);
  border-top: 3px double #b38a4d88;
  border-bottom: 3px double #b38a4d66;
  gap: 30px;
}
.home-nav button { font-size: 11px; color: #e1cda9; }
.home-nav button:hover { color: #fff0c4; text-shadow: 0 0 14px #eabc70; }
.button, .icon-button, .resource-button, .resource-display {
  background: var(--wood);
  border: 1px solid #a47b43;
  box-shadow: inset 0 0 0 2px #150d09, inset 0 0 0 3px #b28d493b, 0 3px 7px #0006;
  color: #f0d7aa;
}
.button { position: relative; font-size: 11px; letter-spacing: .09em; }
.button::before, .button::after {
  content: "◆";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-size: 6px; color: #b9965c;
}
.button::before { left: 7px; }
.button::after { right: 7px; }
.button:hover, .icon-button:hover {
  background: var(--wood);
  box-shadow: inset 0 0 0 2px #150d09, inset 0 0 0 3px #d0a56488, 0 0 20px #ca934c30;
}
.button.primary {
  background: linear-gradient(180deg, #f5d695, #d5a65d 45%, #bc843f 50%, #e9c17b);
  border: 1px solid #ffe5ad;
  box-shadow: inset 0 0 0 2px #805126, inset 0 0 0 3px #ffe4a480, 0 5px 22px #0008, 0 0 28px #edaa4430;
  color: #35200c;
  text-shadow: 0 1px #ffe7b277;
}
.button.primary::before, .button.primary::after { color: #70461f; }
.button.primary:hover { background: linear-gradient(180deg, #ffe6aa, #dbac65 48%, #d8a25a 51%, #ffe1a0); }
.home-primary-actions .primary { min-height: 60px; min-width: 285px; }
.page {
  position: relative;
  isolation: isolate;
  background: linear-gradient(#12100de8, #17130ce6), var(--scene-image, url("../assets/backgrounds/menu.png")) center / cover fixed;
}
.page-content { position: relative; z-index: 2; }
.page-heading h1 { color: #f0d4a0; text-shadow: 0 3px 10px #000; }
.realm-tabs { border-bottom: 3px double #bd965a77; background: #21180f99; }
.realm-tab.active { background: linear-gradient(#74502333, #bb853136); border-color: #f3cb85; }
.realm-tab.active .roman { opacity: 1; text-shadow: 0 0 18px #e8b45799; }
.realm-art {
  border: 5px ridge #987044;
  box-shadow: 0 8px 25px #0009, inset 0 0 0 2px #1e130b;
}
.realm-art:before { background: linear-gradient(transparent 25%, #110d08ef 94%); }
.realm-art h2 { font-size: 33px; color: #ffe3b4; }
.stage-list-head { color: #d3b67f; }
.stage-row { border-bottom-color: #b58a442b; }
.stage-row.current {
  background: linear-gradient(90deg, #9d6c353b, #5538212b);
  box-shadow: inset 0 1px #d9b27433, inset 0 -1px #d9b27433;
}
.stage-row:hover:not(:disabled) { background: #b9863230; }
.stage-name { color: #eddbba; }
.stage-metric { color: #cabba0; }
.family-entry { padding: 23px 12px; background: linear-gradient(120deg, #7d5e2310, transparent); }
.family-entry h3 { color: #e6c899; }
.family-object .artifact-icon, .family-focus-item .artifact-icon {
  background: radial-gradient(ellipse, #73532955, #18130df2);
  border: 1px solid #a47c455c;
  box-shadow: inset 0 0 9px #0007;
}
.game-page { isolation: isolate; }
[data-realm="crypt"] {
  --wood: repeating-linear-gradient(172deg, #d1e1cf08 0 2px, transparent 3px 9px), linear-gradient(110deg, #293332, #151c1e 48%, #37413d);
  --carving: linear-gradient(110deg, #151c1d, #6e7767 18%, #293536 50%, #616a5d 85%, #141b1c);
}
[data-realm="temple"] {
  --wood: repeating-linear-gradient(165deg, #ead9ac08 0 1px, transparent 2px 9px), linear-gradient(110deg, #4e4936, #26251c 48%, #5a5137);
  --carving: linear-gradient(110deg, #393325, #b29b66 18%, #5c5137 50%, #c1a66b 85%, #343020);
}
[data-realm="dungeon"] {
  --wood: repeating-linear-gradient(2deg, #fba4650b 0 1px, transparent 2px 6px), linear-gradient(110deg, #48231c, #251210 48%, #512b20);
  --carving: linear-gradient(110deg, #25110b, #89502c 18%, #431c12 50%, #995d32 85%, #210c08);
}
[data-realm="crypt"] .game-hud { background: linear-gradient(90deg, #182225ed, #293330e8, #182225ed); }
[data-realm="temple"] .game-hud { background: linear-gradient(90deg, #322e20ed, #48412ce8, #322e20ed); }
[data-realm="dungeon"] .game-hud { background: linear-gradient(90deg, #301911ed, #492016e8, #301911ed); }
.game-page:before { background: linear-gradient(#0d0a0770, #110e0742 30%, #150f0952 75%, #080706cb); }
.game-topbar, .game-table, .game-footer, .orientation-note { z-index: 2; }
.game-table { width: min(1500px, calc((100dvh - 307px) * 20 / 7), calc(100vw - 100px)); }
.game-hud {
  background: linear-gradient(90deg, #20170be6, #322311e3 48%, #21170de6);
  border: 1px solid #c097535c;
  border-bottom: 0;
  box-shadow: inset 0 2px #f0d39112, 0 -7px 28px #0003;
  margin: 0 9px;
}
.hud-stat .value { color: #ffdda0; text-shadow: 0 2px 3px #000; }
.hud-stat .label { color: #d0bc93; }
.hud-stat .detail { color: #b1a58b; }
.family-focus-title { color: #f3dfb5; }
.board-frame {
  padding: 9px;
  background: var(--carving);
  border: 2px solid #bb945a;
  box-shadow: 0 12px 35px #0009, inset 0 0 0 2px #29180e, inset 0 0 0 4px #a97d444a;
}
.board-frame:before, .board-frame:after {
  top: -12px; font-size: 26px;
  color: #edc68a;
  text-shadow: 0 2px 2px #201206, 0 0 12px #e0a25055;
}
.board-frame:before { left: -10px; }
.board-frame:after { right: -10px; }
#board { box-shadow: 0 0 0 1px #0e0905, 0 0 0 2px #b891514f, inset 0 0 24px #0009; }
.board-caption { color: #d0bea0; text-shadow: 0 1px 4px #000; }
.bag-heading { color: #f0d3a1; text-shadow: 0 2px 4px #000; }
.bag-heading .bag-count { color: #e0c9a2; }
.bag-slot {
  background: radial-gradient(ellipse at 50% 100%, #76533466, #1b110de8), var(--wood);
  border: 1px solid #b28b5266;
  border-radius: 3px 3px 8px 8px;
  box-shadow: inset 0 3px 8px #000a, 0 1px #eac37c44;
}
.bag-slot.filled { border-color: #d5a965; background: radial-gradient(ellipse, #7a53234d, #1b120c); }
.bag-slot:empty:before { content: "◇"; color: #c9a47033; font-size: 15px; }
.resource-text .resource-label { color: #d2bc93; }
.resource-text .resource-value { color: #ffe0ab; text-shadow: 0 2px #000; }
.resource-button:hover:not(:disabled) { background: var(--wood); box-shadow: inset 0 0 18px #d9aa4f26, 0 0 13px #c79b4633; }
.game-footer { color: #c1b498; text-shadow: 0 1px 4px #000; }
.modal {
  background: radial-gradient(ellipse at 50% 0, #99713a29, transparent 65%), var(--wood);
  border: 4px ridge #a8834c;
  box-shadow: 0 25px 120px #000d, inset 0 0 0 3px #110a06, inset 0 0 0 5px #cfa26044;
}
.modal-heading h2 { color: #f4d69c; }
.modal-heading:after { content: "─────  ◆  ─────"; display: block; color: #b68c4f; font-size: 11px; letter-spacing: .15em; margin-top: 17px; }
.modal-copy, .modal-heading p, .tutorial-step p, .tutorial-tip { color: #d3c2a3; }
.modal .stage-objectives { background: #100a0744; border-color: #a77e4266; }
.modal .stage-objectives span { color: #d0bc96; }
.living-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.ambient-canvas { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.light-shafts {
  position: absolute; inset: -10% -15%;
  background: conic-gradient(from 150deg at 60% 0, transparent 0deg 14deg, #f8d5910c 15deg 20deg, transparent 22deg 34deg, #f8d59114 35deg 40deg, transparent 42deg 360deg);
  transform-origin: top center;
  animation: shaft-drift 18s ease-in-out infinite alternate;
}
.drifting-mist {
  position: absolute; left: -25%; right: -25%; bottom: -12%; height: 42%;
  background: radial-gradient(ellipse at 27% 70%, #b7c3b31f, transparent 45%), radial-gradient(ellipse at 70% 80%, #cdd9d622, transparent 45%);
  filter: blur(24px);
  animation: mist-drift 24s ease-in-out infinite alternate;
}
[data-realm="crypt"] .drifting-mist { opacity: 1.9; height: 60%; }
[data-realm="dungeon"] .drifting-mist { background: radial-gradient(ellipse at 50% 80%, #e759252c, transparent 60%); }
[data-realm="crypt"] .light-shafts { filter: hue-rotate(130deg); }
.game-page .drifting-mist { opacity: .55; }
.game-page .light-shafts { opacity: .75; }
.heraldry {
  position: absolute; top: 85px; width: 80px; height: 190px;
  background: repeating-linear-gradient(90deg, #ffffff03 0 1px, #0000000a 2px 4px), linear-gradient(90deg, #27130f, #722b20 45%, #3b1712);
  border: 2px solid #b99655;
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
  transform-origin: 50% 0;
  animation: banner-sway 7s ease-in-out infinite alternate;
  box-shadow: inset 0 0 0 6px #24160d, inset 0 0 0 8px #b9965588;
}
.heraldry span { display: block; margin-top: 47px; color: #d9b376; font-size: 42px; text-align: center; text-shadow: 0 3px 5px #000; }
.heraldry-left { left: 5%; }
.heraldry-right { right: 5%; animation-delay: -3s; }
.game-page .heraldry { top: 60px; width: 35px; height: 120px; }
.game-page .heraldry span { font-size: 22px; margin-top: 35px; }
.game-page .heraldry-left { left: 8px; }
.game-page .heraldry-right { right: 8px; }
.page .heraldry { display: none; }
[data-realm="village"] .heraldry { background-color: #344a25; filter: hue-rotate(55deg); }
[data-realm="crypt"] .heraldry { filter: hue-rotate(160deg) saturate(.5); }
[data-realm="temple"] .heraldry { filter: sepia(.8) brightness(1.3); }
.ember { display: none; }
@keyframes mist-drift { to { transform: translate(7%, -5%) scale(1.1); } }
@keyframes shaft-drift { to { transform: rotate(5deg); opacity: .45; } }
@keyframes banner-sway { to { transform: skewX(1.5deg) rotate(.7deg); } }
.decor-paused .living-decor * { animation-play-state: paused !important; }
.reduced-motion .living-decor { display: none; }
@media (max-width: 1000px) {
  .home-nav { gap: 16px; }
  .home .heraldry { width: 52px; height: 140px; }
  .home .heraldry span { font-size: 28px; }
  .game-table { width: min(calc((100dvh - 293px) * 20 / 7), calc(100vw - 58px)); }
  .game-page .heraldry { width: 22px; }
  .game-page .heraldry-left { left: 1px; }
  .game-page .heraldry-right { right: 1px; }
}
@media (max-height: 700px) and (orientation: landscape) {
  .game-page { height: auto; min-height: 600px; }
  .game-table { width: calc(100vw - 58px); margin: 14px auto; }
  .game-hud { height: 86px; margin: 0 5px; }
  .hud-stat .value { font-size: 22px; white-space: nowrap; }
  .board-frame { padding: 5px; }
  .home .heraldry { height: 120px; }
}
@media (max-width: 600px) {
  .home-title { font-size: clamp(45px, 11vw, 66px); }
  .home .heraldry { width: 29px; height: 105px; }
  .home .heraldry span { font-size: 20px; margin-top: 32px; }
  .home-nav { gap: 6px; }
  .home-nav button { font-size: 9px; }
  .game-table { width: calc(100vw - 20px); }
  .game-page .heraldry { display: none; }
  .board-frame { padding: 4px; }
  .page-heading h1 { font-size: 32px; }
  .realm-art h2 { font-size: 28px; }
  .button { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .living-decor { display: none; } }