/* Dragon Deck: mountain scroll + vermilion lacquer art direction. */
@font-face {
  font-family: "Pirata One";
  src: url("assets/fonts/PirataOne-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya";
  src: url("assets/fonts/Alegreya-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bg: #100906;
  --panel: rgba(25, 14, 10, .94);
  --panel-soft: rgba(51, 31, 21, .84);
  --line: rgba(226, 199, 151, .18);
  --line-bright: rgba(239, 216, 173, .43);
  --text: #f1e3c7;
  --muted: #b7a384;
  --red: #c92d22;
  --red-rgb: 201, 45, 34;
  --blue: #2da4be;
  --blue-rgb: 45, 164, 190;
  --yellow: #e8b959;
  --yellow-rgb: 232, 185, 89;
  --green: #20c879;
  --green-rgb: 32, 200, 121;
  --accent: #d9b978;
  --paper: #f4e9d2;
  --paper-dark: #b99b6d;
  --ink: #100b08;
  --vermilion: #b92c20;
  --vermilion-dark: #651710;
  --shadow: 0 28px 80px rgba(0, 0, 0, .62);
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya", Georgia, "Times New Roman", serif;
  --display: "Pirata One", Georgia, serif;
}

html,
body {
  background: #0d0806;
  font-family: var(--sans);
  letter-spacing: .015em;
}

.app-shell {
  background:
    radial-gradient(circle at 50% -18%, rgba(178, 49, 33, .24), transparent 40%),
    linear-gradient(160deg, #140b08 0%, #090605 55%, #160a06 100%);
}

.app-shell::after {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    repeating-linear-gradient(7deg, transparent 0 3px, rgba(246, 224, 181, .012) 4px),
    repeating-linear-gradient(101deg, transparent 0 7px, rgba(0, 0, 0, .035) 8px);
  content: "";
  mix-blend-mode: soft-light;
  opacity: .8;
  pointer-events: none;
}

.ambient { opacity: .06; filter: blur(130px); }
.ambient-one { background: var(--vermilion); }
.ambient-two { background: #c4884d; }

button:focus-visible,
[tabindex]:focus-visible {
  outline-color: #f0d59c;
  outline-style: double;
  outline-width: 3px;
}

.eyebrow {
  color: #d8b874;
  font-size: 11px;
  letter-spacing: .22em;
  text-shadow: 0 2px 8px #000;
}

/* Reusable responsive wordmark. The four stones live inside the O at every size. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: .8;
  filter: drop-shadow(0 5px 2px rgba(0, 0, 0, .7));
}

.brand-lockup .brand-text {
  display: inline-flex;
  align-items: center;
  color: var(--paper) !important;
  white-space: nowrap;
}

.brand-o {
  position: relative;
  display: inline-block;
  width: .72em;
  height: .72em;
  margin: 0 .015em;
  border: .06em solid var(--paper);
  border-radius: 50%;
  background: rgba(10, 7, 5, .92);
  box-shadow: inset 0 0 .12em rgba(234, 214, 172, .33), 0 0 .06em rgba(255, 237, 196, .28);
  transform: translateY(.035em);
}

.brand-gem {
  position: absolute;
  width: 21%;
  aspect-ratio: 1;
  border: .012em solid rgba(255, 255, 255, .76);
  background: currentColor;
  box-shadow: 0 0 .055em currentColor, 0 0 .12em currentColor;
  transform: rotate(45deg);
}

.brand-gem-red { top: 14%; left: 39.5%; color: #f0443c; }
.brand-gem-green { top: 39.5%; left: 14%; color: #27d984; }
.brand-gem-blue { top: 39.5%; right: 14%; color: #32b5d0; }
.brand-gem-gold { right: 39.5%; bottom: 14%; color: #f0bd55; }

.brand-cards {
  position: relative;
  display: inline-block;
  width: .8em;
  height: .72em;
  margin-left: .1em;
  color: var(--vermilion);
}

.brand-cards i {
  position: absolute;
  top: .05em;
  left: .07em;
  width: .25em;
  height: .57em;
  border: .045em solid #df392b;
  border-radius: 0;
  background: linear-gradient(145deg, #50100d, #120504 62%);
  box-shadow: inset 0 0 0 .018em #4b100d, 0 .04em .08em rgba(0, 0, 0, .7);
  clip-path: polygon(50% 0, 88% 16%, 100% 34%, 100% 77%, 76% 100%, 24% 100%, 0 77%, 0 34%, 12% 16%);
  transform: rotate(-5deg);
}

.brand-cards i:last-child {
  top: .12em;
  left: .32em;
  z-index: -1;
  background: linear-gradient(145deg, #a8241b, #310907 68%);
  transform: rotate(12deg);
}

.brand-lockup-large {
  margin: 0;
  font-size: clamp(66px, 8.2vw, 126px);
  text-shadow: 0 3px 0 #6d5940, 0 8px 2px #000, 0 22px 48px rgba(0, 0, 0, .9);
}

.brand-small {
  font-size: 25px;
  letter-spacing: .01em;
}

/* Shared carved-lacquer controls. */
.button {
  border: 1px solid rgba(225, 194, 140, .4);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(244, 224, 183, .07), transparent 42%),
    linear-gradient(145deg, rgba(42, 27, 19, .96), rgba(15, 9, 7, .98));
  box-shadow: inset 0 0 0 2px rgba(8, 5, 3, .58), 0 10px 22px rgba(0, 0, 0, .25);
  color: var(--paper);
  font-weight: 700;
  letter-spacing: .055em;
}

.button::after {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(231, 207, 164, .08);
  content: "";
  pointer-events: none;
}

.button:hover:not(:disabled) {
  border-color: rgba(247, 222, 174, .8);
  background:
    linear-gradient(180deg, rgba(244, 224, 183, .12), transparent 45%),
    linear-gradient(145deg, #49251b, #170c09);
  box-shadow: inset 0 0 0 2px rgba(8, 5, 3, .65), 0 13px 28px rgba(0, 0, 0, .38);
}

.button-primary,
.button-online,
.button-attack {
  border-color: rgba(241, 189, 133, .65);
  background:
    linear-gradient(180deg, rgba(255, 224, 184, .18), transparent 42%),
    linear-gradient(145deg, #bd3528, #72170f 76%);
  box-shadow: inset 0 0 0 2px rgba(74, 14, 9, .72), 0 12px 28px rgba(81, 11, 8, .38);
  color: #fff0d4;
}

.button-primary:hover:not(:disabled),
.button-online:hover:not(:disabled),
.button-attack:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 231, 195, .22), transparent 45%),
    linear-gradient(145deg, #d14332, #831b12 78%);
  box-shadow: inset 0 0 0 2px rgba(74, 14, 9, .75), 0 16px 36px rgba(89, 13, 8, .52);
}

.button-secondary,
.button-quiet,
.button-tutorial {
  background:
    linear-gradient(180deg, rgba(239, 211, 165, .06), transparent 44%),
    rgba(18, 12, 9, .9);
  color: #d8c6a6;
}

.button-kicker { color: #cfb58b !important; opacity: .72; }
.icon-button { color: #d6bc8e; }
.icon-button-round,
.deck-back { border-color: rgba(220, 188, 136, .32); border-radius: 2px; background: rgba(17, 10, 7, .58); }

/* Mountain scroll menus. */
.title-screen,
.deck-screen {
  background:
    linear-gradient(90deg, rgba(20, 11, 7, .76), rgba(19, 10, 7, .27) 48%, rgba(19, 10, 7, .72)),
    linear-gradient(0deg, rgba(9, 5, 3, .72), transparent 48%, rgba(10, 6, 4, .38)),
    url("assets/ui/mountain-mist-dragon.png") center / cover no-repeat;
}

.title-screen::before {
  inset: 3.5vh 3vw;
  border: 1px solid rgba(240, 211, 158, .35);
  background:
    linear-gradient(#c94a34, #c94a34) left top / 70px 2px no-repeat,
    linear-gradient(#c94a34, #c94a34) right bottom / 70px 2px no-repeat,
    linear-gradient(#c94a34, #c94a34) left top / 2px 70px no-repeat,
    linear-gradient(#c94a34, #c94a34) right bottom / 2px 70px no-repeat;
  box-shadow: inset 0 0 130px rgba(13, 7, 4, .47);
  mask-image: none;
}

.title-screen::after {
  border: 0;
  background: radial-gradient(ellipse at center, transparent 22%, rgba(11, 6, 4, .2) 60%, rgba(6, 4, 3, .78) 100%);
  box-shadow: inset 0 0 150px rgba(0, 0, 0, .54);
}

.title-vignette,
.title-ouroboros { display: none; }

.title-content {
  width: min(920px, 92vw);
  padding-top: 2vh;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .92);
}

.title-content > .eyebrow {
  margin-bottom: 14px;
  color: #f0d39d;
}

.title-copy {
  max-width: 690px;
  margin: 22px 0 25px;
  color: #ead9bd;
  font-size: 17px;
  text-shadow: 0 2px 9px #000, 0 0 20px #000;
}

.title-actions { gap: 8px; }
.title-actions .button-large { min-width: 265px; padding: 13px 20px; }
.title-footnote { margin-top: 18px; color: #c5ae88; text-shadow: 0 2px 8px #000; }
.title-rain { opacity: .42; }
.rain-stone { border-radius: 1px; opacity: .12; filter: sepia(.35) saturate(.8) contrast(1.2); }

.deck-screen { background-position: center; }
.deck-screen::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 7, 5, .76), rgba(16, 9, 6, .5), rgba(12, 7, 5, .8));
  content: "";
  pointer-events: none;
}

.deck-topbar,
.topbar {
  position: relative;
  border-bottom: 1px solid rgba(222, 188, 132, .32);
  background:
    linear-gradient(180deg, rgba(77, 34, 23, .7), rgba(17, 10, 7, .94)),
    #160d09;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3), inset 0 -2px rgba(65, 14, 10, .8);
  backdrop-filter: blur(8px);
}

.deck-content { position: relative; }
.deck-mode-label,
.campaign-progress { color: #e5c78e; }
.deck-intro h1,
.campaign-overlay-card h2,
.modal h2,
.handoff-card h2,
.result-card h2 {
  font-family: var(--display);
  color: var(--paper);
  letter-spacing: .025em;
  text-shadow: 0 3px 2px #000;
}

.deck-intro > p:last-child { color: #d6c3a2; font-size: 14px; text-shadow: 0 2px 8px #000; }

.deck-builder,
.campaign-roster,
.online-connect-card,
.campaign-overlay-card,
.handoff-card,
.result-card,
.modal,
.tutorial-coach,
.battle-log,
.music-controls {
  border: 1px solid rgba(225, 195, 143, .38);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(235, 207, 160, .075), transparent 34%),
    linear-gradient(150deg, rgba(48, 29, 20, .97), rgba(15, 9, 7, .985));
  box-shadow:
    inset 0 0 0 3px rgba(10, 6, 4, .72),
    inset 0 0 0 4px rgba(213, 177, 119, .12),
    0 24px 58px rgba(0, 0, 0, .46);
}

.deck-builder::before,
.campaign-roster::before {
  height: 3px;
  background: linear-gradient(90deg, transparent, #bc3325 12%, #d9aa63 50%, #bc3325 88%, transparent);
  box-shadow: 0 0 12px rgba(185, 44, 32, .58);
}

.deck-builder-head h2,
.campaign-roster-head h2,
.arena-heading h2,
.console-header h2,
.player-name-row h3 {
  color: #f0dec0;
  font-family: var(--display);
  letter-spacing: .03em;
}

.deck-color-row,
.campaign-roster li,
.rule-card,
.campaign-node,
.effect-chip,
.shelf-lane {
  border-radius: 1px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--deck-color, var(--lane-color, #ba8a59)), transparent 93%), transparent),
    rgba(7, 5, 4, .3);
  box-shadow: inset 0 0 0 1px rgba(239, 215, 174, .035);
}

.deck-color-gem,
.rule-gem { border-radius: 2px; transform: rotate(45deg); }
.deck-color-gem > *,
.rule-gem > * { transform: rotate(-45deg); }
.deck-stepper button,
.deck-presets button { border-radius: 1px; background: rgba(9, 6, 4, .54); }
.deck-footer { border-top-color: rgba(220, 188, 132, .32); }

.online-field input {
  border-radius: 1px;
  border-color: rgba(220, 188, 135, .34);
  background: rgba(9, 6, 4, .74);
  color: #f2e1c3;
  font-family: var(--serif);
}

.custom-game-settings,
.online-match-settings,
.online-waiting,
.online-resume { border-radius: 1px; background: rgba(15, 9, 6, .48); }

/* Storm-wave duel board. */
.game-screen {
  background:
    linear-gradient(rgba(10, 6, 4, .7), rgba(10, 6, 4, .83)),
    url("assets/ui/storm-wave-dragon.png") center / cover no-repeat;
}

.game-layout { background: radial-gradient(ellipse at center, rgba(16, 8, 5, .12), rgba(6, 4, 3, .32)); }

.player-card {
  border-color: rgba(225, 193, 138, .34);
  border-radius: 2px;
  background:
    linear-gradient(145deg, rgba(119, 37, 25, .18), transparent 48%),
    linear-gradient(150deg, rgba(37, 22, 15, .93), rgba(11, 7, 5, .96));
  box-shadow: inset 0 0 0 3px rgba(8, 5, 3, .5), 0 20px 55px rgba(0, 0, 0, .42);
}

.player-card.board-owner-card { background: linear-gradient(150deg, rgba(72, 31, 21, .94), rgba(13, 8, 6, .96)); }
.player-card::after { border-color: rgba(210, 159, 98, .09); border-style: dashed; }
.player-card.current { border-color: rgba(236, 201, 139, .82); box-shadow: inset 0 0 0 3px rgba(8, 5, 3, .5), 0 0 28px rgba(178, 47, 31, .2); }
.status-ribbon { border-radius: 0; background: var(--vermilion); color: #fae8ca; }

.arena {
  border: 2px solid rgba(224, 190, 132, .33);
  background:
    radial-gradient(circle, rgba(25, 13, 7, .02) 0 48%, rgba(7, 3, 2, .72) 100%),
    url("assets/arena-dark-walnut.png") center / cover;
  box-shadow: inset 0 0 75px #060403, inset 0 0 0 5px rgba(42, 18, 12, .8), 0 32px 75px rgba(0, 0, 0, .55);
}

.arena::before { border: 2px solid rgba(225, 190, 130, .14); }
.arena::after { border-color: rgba(231, 204, 157, .16); border-style: solid; animation-duration: 75s; }
.arena-grid { opacity: .25; filter: sepia(1); }
.arena-ouroboros { opacity: .96; filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .76)); }
.arena-orbit { border-color: rgba(226, 190, 130, .18); }
.orbit-one::before { background: #d03a2c; box-shadow: 0 0 12px #d03a2c; }
.arena-core { border-color: rgba(233, 203, 147, .46); box-shadow: 0 0 30px #000, inset 0 0 12px rgba(183, 48, 32, .38); }
.arena-core img { filter: sepia(1) saturate(.6) contrast(1.45); }

.board-stone,
.stone-button { border-radius: 2px; }
.stone-button::after { background: linear-gradient(145deg, rgba(255, 235, 197, .17), transparent 34%, rgba(31, 10, 6, .3)); }
.stone-button .stone-number,
.board-stone .power-pip { border-radius: 2px; transform: rotate(45deg); }
.stone-button .stone-number { background: rgba(8, 5, 3, .9); }
.stone-button.live-3d-proxy:focus-visible,
.board-stone.live-3d-proxy:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.effect-chip { background: rgba(11, 7, 5, .55); }
.play-console {
  border-top-color: rgba(226, 191, 133, .4);
  background:
    linear-gradient(180deg, rgba(83, 32, 22, .25), transparent 35%),
    linear-gradient(180deg, rgba(33, 20, 14, .97), rgba(10, 6, 4, .99));
  box-shadow: inset 0 2px rgba(86, 20, 14, .8), 0 -20px 55px rgba(0, 0, 0, .4);
}

.hand { border-color: rgba(222, 188, 133, .26); border-radius: 1px; background: rgba(7, 5, 4, .35); }
.shelf-lane::before { height: 2px; box-shadow: none; }
.health-track { border-radius: 1px; background: rgba(235, 211, 170, .1); }
.health-fill { border-radius: 0; background: linear-gradient(90deg, #7d180f, #d94832); }

/* Scroll-like overlays and Campaign choices. */
.campaign-overlay,
.handoff,
.result-screen {
  background:
    linear-gradient(rgba(12, 7, 5, .8), rgba(12, 7, 5, .9)),
    url("assets/ui/mountain-mist-dragon.png") center / cover no-repeat;
  backdrop-filter: blur(5px);
}

.campaign-overlay-card,
.handoff-card,
.result-card,
.modal {
  position: relative;
}

.campaign-overlay-card::after,
.handoff-card::after,
.result-card::after,
.modal::after {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(228, 197, 143, .12);
  content: "";
  pointer-events: none;
}

.campaign-node { background: linear-gradient(145deg, rgba(102, 42, 28, .17), rgba(8, 5, 4, .42)); }
.campaign-node:hover:not(:disabled) { border-color: #dfb86f; background: rgba(131, 47, 31, .25); }
.campaign-node-type { color: #ddb66d; }
.result-screen.campaign-failed { background: linear-gradient(rgba(35, 6, 4, .82), rgba(10, 5, 4, .94)), url("assets/ui/storm-wave-dragon.png") center / cover no-repeat; }
.result-screen.campaign-complete { background: linear-gradient(rgba(22, 15, 8, .62), rgba(9, 5, 3, .9)), url("assets/ui/mountain-mist-dragon.png") center / cover no-repeat; }
.modal::backdrop { background: rgba(7, 4, 3, .86); backdrop-filter: blur(7px); }
.modal-intro,
.rule-steps p,
.battle-log li { color: #c8b596; }
.log-toggle,
.toast { border-radius: 1px; background: rgba(18, 10, 7, .94); backdrop-filter: blur(7px); }

@media (max-height: 760px) {
  .brand-lockup-large { font-size: clamp(58px, 7.2vw, 98px); }
  .title-content > .eyebrow { margin-bottom: 9px; }
  .title-copy { margin: 15px 0 17px; font-size: 15px; }
  .title-actions .button-large { padding-top: 10px; padding-bottom: 10px; }
  .title-footnote { margin-top: 12px; }
}

@media (max-width: 1100px) {
  .brand-lockup-large { font-size: clamp(58px, 8vw, 86px); }
  .brand-small { font-size: 21px; }
}

@media (max-width: 700px) {
  .title-screen,
  .deck-screen {
    background-position: 38% center;
  }

  .title-screen::before {
    inset: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    background:
      linear-gradient(#c94a34, #c94a34) left top / 44px 2px no-repeat,
      linear-gradient(#c94a34, #c94a34) right bottom / 44px 2px no-repeat,
      linear-gradient(#c94a34, #c94a34) left top / 2px 44px no-repeat,
      linear-gradient(#c94a34, #c94a34) right bottom / 2px 44px no-repeat;
    box-shadow: inset 0 0 85px rgba(13, 7, 4, .58);
  }

  .title-screen::after {
    background:
      linear-gradient(90deg, rgba(9, 5, 3, .72), rgba(9, 5, 3, .08) 52%, rgba(9, 5, 3, .58)),
      linear-gradient(0deg, rgba(6, 4, 3, .92), transparent 58%);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .44);
  }

  .title-content {
    width: 100%;
    padding-top: max(80px, calc(env(safe-area-inset-top) + 62px));
  }

  .brand-lockup-large {
    max-width: 100%;
    font-size: clamp(45px, 15vw, 68px);
    text-shadow: 0 2px 0 #6d5940, 0 6px 2px #000, 0 15px 32px rgba(0, 0, 0, .9);
  }

  .title-copy {
    margin: 17px 0 20px;
    font-size: 15px;
  }

  .title-actions { gap: 9px; }

  .title-actions .button-large {
    width: 100%;
    min-width: 0;
    padding: 13px 17px;
  }

  .title-footnote { margin-top: 18px; }
  .title-rain { display: none; }

  .deck-screen { background-position: 43% center; }

  .deck-screen::before {
    position: fixed;
    background: linear-gradient(90deg, rgba(12, 7, 5, .88), rgba(16, 9, 6, .61), rgba(12, 7, 5, .86));
  }

  .deck-topbar,
  .topbar { background: linear-gradient(180deg, rgba(77, 34, 23, .88), rgba(17, 10, 7, .98)), #160d09; }

  .deck-topbar .brand-small { font-size: clamp(16px, 5.4vw, 21px); }
  .game-screen { background-position: 56% center; background-attachment: fixed; }

  .modal,
  .handoff-card,
  .result-card,
  .campaign-overlay-card { box-shadow: 0 18px 52px rgba(0, 0, 0, .72); }
}

@media (max-width: 360px) {
  .brand-lockup-large { font-size: 43px; }
}

@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  .title-content { width: 100%; padding-top: 68px; }
  .brand-lockup-large { font-size: 56px; }
  .title-copy { margin: 11px 0 13px; font-size: 14px; }
  .title-actions .button-large { min-width: 0; padding-block: 10px; }
  .title-footnote { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .arena-serpent-spinner { animation: none; }
  .arena::after { animation: none; }
}