/* ABYSS V7 BLACK RELIQUARY
   The art leads. Matte black, bone and tarnished brass replace the stacked
   neon panels; cyan is reserved for live state feedback. */
:root {
  --reliquary-void: #020304;
  --reliquary-ink: #07090a;
  --reliquary-iron: #171d1e;
  --reliquary-bone: #e3ded2;
  --reliquary-muted: #8f9692;
  --reliquary-brass: #b58b47;
  --reliquary-brass-light: #d1ae6d;
  --reliquary-cold: #83b8b9;
  --reliquary-wound: #a6534f;
}

html {
  scrollbar-color: rgba(131, 184, 185, .52) transparent;
}

body {
  background:
    radial-gradient(ellipse at 50% -18%, rgba(60, 91, 94, .17), transparent 31rem),
    radial-gradient(ellipse at 50% 112%, rgba(93, 68, 37, .1), transparent 28rem),
    var(--reliquary-void);
}

body::before {
  inset: 0;
  opacity: .055;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(227, 222, 210, .055) 3px 4px),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 24%);
  animation: none;
  transform: none;
  will-change: auto;
}

body::after {
  inset: 0;
  opacity: 1;
  background: radial-gradient(ellipse at 50% 38%, transparent 18%, rgba(0, 0, 0, .58) 88%);
  animation: none;
  transform: none;
  will-change: auto;
}

.abyss-shell {
  color: var(--reliquary-bone);
}

.topbar {
  gap: 7px 10px;
  padding: 10px 8px 8px;
  border-bottom: 1px solid rgba(181, 139, 71, .28);
  background: rgba(3, 5, 6, .93);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.brand-block .eyebrow {
  color: var(--reliquary-brass-light);
  font: 600 .57rem/1.1 var(--hud);
  letter-spacing: .17em;
}

.brand-block h1 {
  margin-top: 3px;
  color: var(--reliquary-bone);
  font: 600 1.08rem/1 var(--hud);
  letter-spacing: .055em;
  text-shadow: none;
}

.brand-block h1 span {
  color: var(--reliquary-brass-light);
}

.run-stats {
  gap: 0;
  border-block: 1px solid rgba(227, 222, 210, .075);
}

.run-stats > div {
  min-height: 29px;
  padding: 5px 10px 4px;
  border: 0;
  border-left: 1px solid rgba(227, 222, 210, .1);
  background: transparent;
  box-shadow: none;
}

.run-stats > div:first-child {
  border-left: 0;
}

.run-stats > div::after {
  display: none;
}

.run-stats span {
  color: var(--reliquary-muted);
  font-size: .57rem;
  letter-spacing: .08em;
}

.run-stats strong {
  color: var(--reliquary-bone);
  font-size: .84rem;
  text-shadow: none;
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(227, 222, 210, .18);
  border-radius: 2px;
  color: var(--reliquary-muted);
  background: #090c0d;
  box-shadow: none;
}

.icon-button:hover,
.icon-button:focus-visible {
  border-color: rgba(209, 174, 109, .72);
  color: var(--reliquary-brass-light);
}

.screen::after {
  display: none;
}

.screen:not(.is-hidden) {
  animation: reliquary-enter calc(.36s / var(--speed)) cubic-bezier(.2, .74, .2, 1) both;
}

.start-screen .title-art {
  width: calc(100% + 2px);
  height: min(61dvh, 520px);
  min-height: 430px;
  margin-inline: -1px;
  border: 0;
  clip-path: none;
  background-position: center 40% !important;
  box-shadow: none;
  animation: reliquary-art-reveal calc(.72s / var(--speed)) cubic-bezier(.18, .78, .2, 1) both;
}

.start-screen .title-art::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .34), transparent 16%, transparent 84%, rgba(0, 0, 0, .38)),
    linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 52%);
}

.start-screen .title-art::after {
  height: 58%;
  background: linear-gradient(180deg, transparent, rgba(2, 4, 5, .64) 56%, var(--reliquary-void) 94%);
}

.start-screen .title-gate {
  inset: 12px;
  border: 1px solid rgba(181, 139, 71, .28);
  box-shadow: none;
}

.start-screen .title-gate::before,
.start-screen .title-gate::after,
.start-screen .title-water {
  display: none !important;
}

.start-screen .title-copy {
  width: 100%;
  margin: -184px 0 0;
  padding: 94px 18px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.start-screen .title-copy::after {
  display: none;
}

.start-screen .title-copy::before {
  z-index: 2;
  top: 82px;
  left: 18px;
  width: 46px;
  height: 1px;
  background: var(--reliquary-brass);
  box-shadow: 52px 0 0 rgba(131, 184, 185, .28);
}

.start-screen .title-copy > * {
  position: relative;
  z-index: 3;
}

.start-screen .title-copy h2 {
  margin: 0 0 9px;
  color: var(--reliquary-bone);
  font-family: var(--display-ja);
  font-size: clamp(2rem, 9.3vw, 2.55rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.055em;
  text-shadow: none;
}

.start-screen .title-copy h2::before {
  display: none;
}

.start-screen .title-copy h2 span {
  color: #a7ccca;
  text-shadow: none;
}

.start-screen .title-copy > p:not(.kicker) {
  color: #b9bdb8;
  font-size: .8rem;
  line-height: 1.55;
}

.start-screen .mechanic-hook {
  justify-content: flex-start;
  gap: 7px;
  margin-top: 13px;
  padding: 10px 0;
  border: 0;
  border-block: 1px solid rgba(227, 222, 210, .11);
  background: transparent;
}

.start-screen .hook-tile {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(227, 222, 210, .24);
  color: var(--reliquary-bone);
  background: #15191a;
  box-shadow: inset 0 0 0 2px #080a0b;
}

.start-screen .hook-tile.is-result {
  border-color: rgba(209, 174, 109, .72);
  color: #f0ddb7;
  background: #382c1b;
}

.start-screen .mechanic-hook > b {
  color: #6f7774;
}

.start-screen .mechanic-hook > strong {
  color: var(--reliquary-brass-light);
  font-size: .66rem;
  letter-spacing: .04em;
}

.start-screen .title-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top: 12px;
}

.start-screen .title-actions > button,
.start-screen .title-actions .primary-button,
.start-screen #new-run,
.start-screen #continue-run {
  grid-column: 1;
  width: 100%;
  min-width: 0;
}

.start-screen #new-run,
.start-screen #continue-run {
  min-height: 54px;
  border: 1px solid #ddbf86;
  border-radius: 1px;
  color: #17130c;
  background: #c9a464;
  text-shadow: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 244, 215, .46);
}

.start-screen #new-run:hover,
.start-screen #continue-run:hover {
  filter: brightness(1.045);
  transform: translateY(-1px);
}

.start-screen #new-run::after {
  content: "";
  margin: 0;
}

.start-screen #abandon-run {
  min-height: 44px;
  border: 0;
  color: #777d79;
  background: transparent;
  box-shadow: none;
}

.start-screen .title-more {
  margin-top: 4px;
  color: var(--reliquary-muted);
}

.start-screen .title-more > summary {
  color: var(--reliquary-muted);
  font-size: .68rem;
  letter-spacing: .05em;
}

.scene-banner,
.event-art {
  border: 0;
  background-color: var(--reliquary-ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

.scene-banner::before,
.event-art::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .48), transparent 28%, transparent 72%, rgba(0, 0, 0, .5)),
    linear-gradient(180deg, transparent 48%, rgba(2, 3, 4, .72));
}

.scene-banner::after,
.event-art::after {
  display: none;
}

.section-heading {
  padding-left: 0;
  padding-bottom: 11px;
  border: 0;
  border-bottom: 1px solid rgba(181, 139, 71, .34);
  box-shadow: none;
}

.section-heading h2,
.result-screen h2,
.enemy-title h2 {
  color: var(--reliquary-bone);
  font-weight: 400;
  text-shadow: none;
}

.choice-card,
.shop-card {
  --choice-accent: var(--reliquary-brass);
  border: 1px solid rgba(227, 222, 210, .12);
  border-left-color: rgba(227, 222, 210, .12);
  border-radius: 1px;
  background: linear-gradient(145deg, #0d1112, #07090a);
  box-shadow: none;
}

.choice-card::before,
.shop-card::before {
  inset: 0 auto auto 15px;
  width: 32px;
  height: 1px;
  background: var(--choice-accent);
  box-shadow: none;
}

.choice-card::after,
.shop-card::after {
  display: none;
}

.choice-card:hover,
.choice-card:focus-visible,
.shop-card:hover,
.shop-card:focus-visible {
  border-color: color-mix(in srgb, var(--choice-accent) 58%, #3f4543);
  filter: none;
  transform: translateY(-1px);
}

.choice-card strong,
.shop-card strong {
  color: var(--reliquary-bone);
  text-shadow: none;
}

.choice-card p,
.shop-card p {
  color: #aeb3af;
}

.enemy-panel {
  border: 1px solid rgba(181, 139, 71, .28);
  background: var(--reliquary-ink);
  box-shadow: 0 15px 38px rgba(0, 0, 0, .42);
}

.enemy-panel::before,
.enemy-scene::before,
.enemy-scene::after {
  display: none;
}

.enemy-copy {
  border-left: 1px solid rgba(227, 222, 210, .1);
  background: rgba(7, 9, 10, .97);
}

.intent-card {
  border-color: rgba(166, 83, 79, .34);
  border-left: 2px solid var(--reliquary-wound);
  background: rgba(54, 23, 25, .54);
  box-shadow: none;
}

.intent-card::after {
  display: none;
}

.board-frame {
  border: 1px solid rgba(181, 139, 71, .3);
  background: #07090a;
  box-shadow: 0 15px 38px rgba(0, 0, 0, .44), inset 0 0 0 1px rgba(227, 222, 210, .025);
}

.board-frame::before {
  inset: 4px;
  opacity: .38;
  background:
    linear-gradient(var(--reliquary-brass), var(--reliquary-brass)) left top / 14px 1px no-repeat,
    linear-gradient(var(--reliquary-brass), var(--reliquary-brass)) left top / 1px 14px no-repeat,
    linear-gradient(var(--reliquary-brass), var(--reliquary-brass)) right top / 14px 1px no-repeat,
    linear-gradient(var(--reliquary-brass), var(--reliquary-brass)) right top / 1px 14px no-repeat,
    linear-gradient(var(--reliquary-brass), var(--reliquary-brass)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--reliquary-brass), var(--reliquary-brass)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--reliquary-brass), var(--reliquary-brass)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--reliquary-brass), var(--reliquary-brass)) right bottom / 1px 14px no-repeat;
}

.board-frame::after {
  opacity: 0;
  background: none;
  animation: none;
}

.board-frame.is-merge-impact::after {
  opacity: .72;
  background: radial-gradient(circle at 50% 50%, rgba(209, 174, 109, .62), transparent 18%, transparent 43%, rgba(209, 174, 109, .34) 44%, transparent 46%);
  animation: reliquary-impact calc(.42s / var(--speed)) ease-out both;
}

.board {
  border-color: rgba(227, 222, 210, .1);
  background: #030405;
}

.cell:not(.is-empty) {
  box-shadow: inset 0 0 0 1px rgba(227, 222, 210, .08), 0 3px 7px rgba(0, 0, 0, .52);
}

.potion-section,
.relic-section,
.status-card,
.combat-log {
  border-color: rgba(227, 222, 210, .1);
  background: rgba(7, 9, 10, .88);
  box-shadow: none;
}

.potion-button,
.relic-button,
.mark-chip {
  border-color: rgba(227, 222, 210, .13);
  background: #0a0d0e;
  box-shadow: none;
}

.relic-button,
.mark-chip {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.start-screen .title-more > summary,
.event-details > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.enemy-panel[data-kind="boss"] .enemy-title h2 {
  font-size: clamp(.78rem, 3.8vw, 1.03rem);
  letter-spacing: -.08em;
  white-space: nowrap;
}

.combat-toast {
  border: 1px solid rgba(209, 174, 109, .45);
  background: rgba(7, 9, 10, .92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .48);
  backdrop-filter: blur(14px);
}

.result-screen::before {
  opacity: .07;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(181, 139, 71, .3) 35px 36px);
  animation: none;
}

.result-scene {
  border: 0;
  box-shadow: 0 15px 38px rgba(0, 0, 0, .42);
}

.result-sigil {
  border-color: rgba(209, 174, 109, .6);
  background: rgba(8, 10, 10, .84);
  box-shadow: inset 0 0 20px rgba(181, 139, 71, .08);
}

.result-sigil::before {
  border-color: rgba(181, 139, 71, .32);
  animation-duration: 28s;
}

.result-sigil::after {
  border-color: rgba(131, 184, 185, .14);
  animation-duration: 38s;
}

.result-screen h2 {
  text-shadow: none;
}

.reward-item {
  border: 1px solid rgba(181, 139, 71, .26);
  border-top-color: rgba(209, 174, 109, .62);
  background: linear-gradient(145deg, #0d1112, #07090a);
  box-shadow: none;
}

:where(button, summary, select, input):focus-visible {
  outline: 2px solid var(--reliquary-brass-light);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(181, 139, 71, .15);
}

@media (min-width: 721px) {
  .abyss-shell {
    border-inline: 0;
    background: linear-gradient(180deg, rgba(5, 7, 8, .99), rgba(2, 3, 4, .995));
    box-shadow: 0 28px 100px rgba(0, 0, 0, .7);
  }
}

@media (max-width: 390px) {
  .abyss-shell {
    padding-inline: 7px;
  }

  .topbar {
    padding-inline: 3px;
  }

  .brand-block h1 {
    font-size: 1.02rem;
  }

  .run-stats > div {
    padding-inline: 8px;
  }

  .start-screen .title-copy h2 {
    font-size: clamp(1.9rem, 9.8vw, 2.32rem);
  }
}

@media (max-width: 350px) {
  .enemy-panel {
    grid-template-columns: 124px minmax(0, 1fr);
  }

  .enemy-copy {
    padding-inline: 8px;
  }

  .enemy-title h2 {
    font-size: 1rem;
  }

  .enemy-title > strong {
    padding: 4px 5px;
    font-size: .61rem;
  }
}

@keyframes reliquary-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes reliquary-art-reveal {
  from { opacity: .3; transform: scale(1.025); filter: brightness(.58) saturate(.74); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes reliquary-impact {
  from { opacity: .78; transform: scale(.72); }
  to { opacity: 0; transform: scale(1.06); }
}

body.reduced-motion .start-screen .title-art,
body.reduced-motion .screen:not(.is-hidden),
body.reduced-motion .board-frame.is-merge-impact::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .start-screen .title-art,
  .screen:not(.is-hidden),
  .board-frame.is-merge-impact::after {
    animation: none !important;
  }
}

/* V15 compact vertical presentation: art first, copy secondary. */
.abyss-shell { width:min(430px,100%); }
.start-screen .mechanic-hook,
.start-screen .title-more { display:none; }
.start-screen .title-copy > p:not(.kicker) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#enemy-family,
#enemy-phase { display:none; }
.combat-log { max-height:58px; overflow:hidden; }
.log-row:nth-child(n+3) { display:none; }
.potion-button strong { display:none; }
.potion-button { min-width:44px; min-height:44px; padding:6px; }
#potion-hint { max-width:100%; margin:4px 0 0; font-size:.72rem; line-height:1.3; }
#event-body,
.choice-card p,
.shop-card p,
.reward-choice p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; margin-block:.35rem 0; }
.choice-route { display:none !important; }
.choice-card,.shop-card,.reward-choice { min-height:72px; padding:12px 14px; }
.result-screen .reward-list { gap:6px; }
.result-screen .reward-item { min-height:44px; display:flex; align-items:center; }
.screen-actions > button { min-height:44px; }

/* V16 art-first choice hierarchy: remove the inherited framed overlay. */
.choice-screen .scene-banner + .section-heading {
  margin-top: -10px;
  padding: 10px 2px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(181, 139, 71, .42);
  box-shadow: none;
  text-align: left;
}
.choice-screen .scene-banner + .section-heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 7vw, 1.85rem);
}
.choice-screen .scene-banner + .section-heading > p {
  margin: 4px 0 0;
  font-size: .8rem;
  line-height: 1.35;
}
#screen-shop .section-heading > p { display: none; }
#screen-shop .shop-groups {
  width: 100%;
  gap: 12px;
}
#screen-shop .shop-groups h3 {
  margin: 0 0 6px;
  color: var(--reliquary-brass-light);
  font-size: .78rem;
  letter-spacing: .08em;
}
#screen-shop .shop-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
#screen-shop .shop-card { min-height: 64px; }
@media (max-width:390px) {
  .abyss-shell { width:100%; padding-inline:6px; }
  .topbar { grid-template-columns:minmax(0,1fr) auto auto; gap:4px; }
  .run-stats > div { padding-inline:6px; }
  .start-screen .title-copy { padding-inline:12px; }
  .choice-card,.shop-card,.reward-choice { padding:10px 12px; }
  .board { gap:5px; padding:6px; }
  .cell { min-width:0; min-height:44px; }
}
@media (max-width:320px) {
  .abyss-shell { padding-inline:4px; }
  .brand-block h1 { font-size:.9rem; }
  .brand-block .eyebrow { font-size:.5rem; }
  .run-stats > div { padding-inline:4px; }
  .run-stats span { font-size:.5rem; }
  .run-stats strong { font-size:.72rem; }
  .board { gap:4px; padding:5px; }
  .cell { font-size:clamp(.95rem,7vw,1.25rem); }
}
body.reduced-motion .screen:not(.is-hidden),
body.reduced-motion .title-art,
body.reduced-motion .choice-card,
body.reduced-motion .shop-card,
body.reduced-motion .reward-choice,
body.reduced-motion .cell,
body.reduced-motion .enemy-art { animation:abyss-fade .12s linear 1 both !important; transform:none !important; }