/* Oracle frame family. The art is decorative; the real border remains as fallback. */
:root {
  --oracle-metal: #a18460;
  --oracle-metal-dim: #80684e;
  --oracle-edge: #92765688;
}

/* The outer page line stays quiet so the chamber is the ornamental focus. */
.persona-app .frame::after { opacity: .58; }
.persona-app .ch-corners { display: none; }

:is(.kaeris-chamber, .oracle-frame--grand) {
  --oracle-art: url('../assets/oracle/frame-grand-v1.png');
  --oracle-slice: 185;
  --oracle-width: 31px;
  --oracle-opacity: .86;
}
:is(.ch-detail, .drink-detail, .patterns, .ritual-gauge, .effect-preview, .manifest, dialog, .oracle-frame--panel) {
  --oracle-art: url('../assets/oracle/frame-panel-v1.png');
  --oracle-slice: 175;
  --oracle-width: 21px;
  --oracle-opacity: .57;
}
:is(.story-card, .ch-card, .pattern, .oracle-frame--card) {
  --oracle-art: url('../assets/oracle/frame-card-v1.png');
  --oracle-slice: 160;
  --oracle-width: 14px;
  --oracle-opacity: .47;
}

/* Shared nine-slice overlay: fixed corners, scalable straight rails, no input capture. */
body[data-persona] :is(.kaeris-chamber, .ch-detail, .drink-detail, .patterns, .ritual-gauge, .effect-preview, .manifest, .story-card, .ch-card, .pattern, .oracle-frame--grand, .oracle-frame--panel, .oracle-frame--card),
body[data-persona] dialog {
  position: relative;
  border: 1px solid var(--oracle-edge);
}
body[data-persona] :is(.kaeris-chamber, .ch-detail, .drink-detail, .patterns, .ritual-gauge, .effect-preview, .manifest, .story-card, .ch-card, .pattern, .oracle-frame--grand, .oracle-frame--panel, .oracle-frame--card)::after,
body[data-persona] dialog::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  box-sizing: border-box;
  border: var(--oracle-width) solid transparent;
  border-image-source: var(--oracle-art);
  border-image-slice: var(--oracle-slice);
  border-image-width: var(--oracle-width);
  border-image-repeat: stretch;
  border-radius: 0;
  opacity: var(--oracle-opacity);
  pointer-events: none;
}

/* Grand shell and middle tier retain the dark velvet reading surface. */
body[data-persona] .kaeris-chamber {
  padding: 17px 17px 21px;
  background: linear-gradient(#09080bea, #08070bee), url('../assets/textures/velvet.webp') center / 500px;
  border-radius: 17px;
}
body[data-persona] :is(.ch-detail, .drink-detail, .patterns, .ritual-gauge, .effect-preview, .manifest) {
  isolation: isolate;
  border-radius: 12px;
  background-color: #0b090e;
}
body[data-persona] .ch-detail { padding: 20px 18px; }
body[data-persona] .drink-detail { padding: 20px 18px 18px; }
body[data-persona] .patterns { padding: 18px 14px; }
body[data-persona] .ritual-gauge { padding: 20px 16px 16px; }
body[data-persona] .effect-preview { padding: 17px; }
body[data-persona] .manifest { padding: 23px 18px 18px; }
body[data-persona] dialog:modal {
  position: fixed;
  inset: 0;
  margin: auto;
  border-radius: 18px;
}
body[data-persona] dialog .close { top: 19px; right: 19px; }

/* Small frames are dim enough to let portraits and object art lead. */
body[data-persona] :is(.story-card, .ch-card, .pattern) { border-color: #8a705580; }
body[data-persona] :is(.story-card, .ch-card, .pattern):is(:hover, :focus-visible)::after {
  animation: oracle-edge-flash .26s ease-out both;
}
body[data-persona] :is(.ch-card.selected, .pattern.selected) {
  border-color: color-mix(in srgb, var(--character-glow) 44%, var(--oracle-metal));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--character-glow) 28%, transparent),
              inset 0 0 20px color-mix(in srgb, var(--character-glow) 10%, transparent),
              0 0 12px color-mix(in srgb, var(--character-glow) 12%, transparent);
}
body[data-persona] :is(.story-card, .ch-card, .pattern):active { filter: brightness(1.08); }

/* Oracle navigation: one engraved rail, with artwork only on the selected plate. */
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 3px 0 5px;
  border-top: 1px solid #94765745;
  border-bottom: 1px solid #94765745;
  background: linear-gradient(180deg, #1a15152e, #08080bb8);
}
body[data-persona] .ch-subtabs {
  margin-top: 2px;
  padding-top: 2px;
  border-top-color: #9476572c;
}
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button {
  --plate-art: url('../assets/oracle/tab-main-plate-v1.png');
  --plate-slice: 145;
  --plate-width: 12px;
  position: relative;
  flex: 1 1 0;
  min-width: max-content;
  min-height: 51px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 8px 4px;
  color: #c7b7a6;
  background: transparent;
  box-shadow: none;
  transition: color .18s, background .18s, box-shadow .18s, transform .12s;
}
body[data-persona] .ch-subtabs button {
  --plate-art: url('../assets/oracle/tab-sub-plate-v1.png');
  --plate-slice: 180;
  --plate-width: 11px;
  min-height: 47px;
}
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button + button::before {
  content: '';
  position: absolute;
  top: 19%;
  bottom: 19%;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent, #9d80605e 30% 70%, transparent);
  pointer-events: none;
}
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true] + button::before { opacity: 0; }
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true]::before {
  content: '';
  position: absolute;
  inset: 5px;
  width: auto;
  height: auto;
  border-radius: 2px;
  background-image: url('../assets/oracle/tab-frost-v1.png');
  background-position: 48% 50%;
  background-size: 110% 120%;
  background-repeat: no-repeat;
  opacity: .65;
  animation: oracle-frost-reveal .75s ease-out both, oracle-frost-drift 11s ease-in-out .75s infinite alternate;
  pointer-events: none;
}
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button:hover:not([aria-selected=true]) {
  color: #ecddcc;
  background: linear-gradient(180deg, #493a2c1f, #1b141b40);
  box-shadow: inset 0 1px #cdb49419;
}
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true] {
  z-index: 1;
  color: #f3e8dc;
  border-color: color-mix(in srgb, var(--character-glow) 25%, #78634e);
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--character-glow) 17%, transparent), transparent 73%), linear-gradient(180deg, #191119df, #0c090fe8);
  box-shadow: inset 0 1px #d9bfaa1f, inset 0 0 16px color-mix(in srgb, var(--character-glow) 11%, transparent), 0 0 11px color-mix(in srgb, var(--character-glow) 10%, transparent);
}
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true]::after {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: var(--plate-width) solid transparent;
  border-image-source: var(--plate-art);
  border-image-slice: var(--plate-slice);
  border-image-width: var(--plate-width);
  border-image-repeat: stretch;
  opacity: .57;
  filter: drop-shadow(0 0 4px var(--character-glow));
  animation: oracle-plate-glint .22s ease-out both;
  pointer-events: none;
}
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button:active { transform: translateY(1px); }
body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button:focus-visible {
  z-index: 2;
  outline: 2px solid var(--character-focus);
  outline-offset: 2px;
}
body[data-persona] .ch-subtabs .control-hand { width: 20px; height: 24px; object-fit: contain; }
body[data-persona] .ch-subtabs .manifest-mark { width: 25px; height: 25px; object-fit: contain; filter: brightness(1.22); }
body[data-persona] .ch-subtabs svg.ch-icon { width: 20px; height: 20px; }
@keyframes oracle-plate-glint {
  0% { opacity: .35; filter: drop-shadow(0 0 0 var(--character-glow)); }
  48% { opacity: .78; filter: drop-shadow(0 0 8px var(--character-glow)); }
  100% { opacity: .57; filter: drop-shadow(0 0 4px var(--character-glow)); }
}
@keyframes oracle-frost-reveal {
  from { opacity: 0; }
  to { opacity: .65; }
}
@keyframes oracle-frost-drift {
  from { background-position: 48% 50%; }
  to { background-position: 52% 47%; }
}
@keyframes oracle-edge-flash { 0% { opacity: .47; } 45% { opacity: .82; } 100% { opacity: .68; } }

/* Controls use the same metal but remain simpler than the illustration frames. */
body[data-persona] :is(.ch-action, .panel-link, .reader-navigation button, .option-filters button[aria-pressed=true]) {
  border-color: #aa876080;
  border-radius: 7px;
  background: linear-gradient(180deg, #34271f8c, #130e13e8);
  box-shadow: inset 0 1px #f1d7ad1f, inset 0 0 0 3px #0b090d7a;
}
body[data-persona] :is(.ch-action, .panel-link, .reader-navigation button):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--character-glow) 37%, var(--oracle-metal));
  box-shadow: inset 0 1px #f1d7ad2b, 0 0 13px color-mix(in srgb, var(--character-glow) 15%, transparent);
}
body[data-persona] :is(.ch-action, .panel-link, .reader-navigation button):disabled { opacity: .45; }

@media (max-width: 540px) {
  .kaeris-chamber { --oracle-width: 24px; }
  :is(.ch-detail, .drink-detail, .patterns, .ritual-gauge, .effect-preview, .manifest, dialog) { --oracle-width: 17px; }
  :is(.story-card, .ch-card, .pattern) { --oracle-width: 11px; }
  body[data-persona] .kaeris-chamber { margin-inline: 5px; padding: 13px 11px 17px; }
  body[data-persona] .ch-detail { padding: 17px 13px; }
  body[data-persona] .drink-detail { padding: 17px 12px; }
  body[data-persona] .patterns { padding: 17px 12px; }
  body[data-persona] .ritual-gauge { padding: 18px 15px 15px; }
  body[data-persona] .manifest { padding: 19px 12px 15px; }
  body[data-persona] .ch-subtabs button { gap: 3px; font-size: .84rem; }
  body[data-persona] .ch-subtabs .control-hand { width: 17px; height: 21px; }
  body[data-persona] .ch-subtabs .manifest-mark { width: 19px; height: 19px; }
  body[data-persona] .ch-subtabs svg.ch-icon { width: 17px; height: 17px; }
}
@media (max-width: 350px) {
  .kaeris-chamber { --oracle-width: 21px; }
  :is(.ch-detail, .drink-detail, .patterns, .ritual-gauge, .effect-preview, .manifest, dialog) { --oracle-width: 15px; }
  :is(.story-card, .ch-card, .pattern) { --oracle-width: 10px; }
  body[data-persona] .kaeris-chamber { padding-inline: 9px; }
  body[data-persona] .ch-subtabs button { flex-direction: column; gap: 1px; min-height: 55px; font-size: .82rem; }
  body[data-persona] .ch-subtabs .control-hand { width: 16px; height: 20px; }
  body[data-persona] .ch-subtabs .manifest-mark { width: 18px; height: 18px; }
  body[data-persona] .ch-subtabs svg.ch-icon { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true]::before { animation: none; opacity: .65; }
  body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true]::after { animation: none; }
  body[data-persona] :is(.story-card, .ch-card, .pattern):is(:hover, :focus-visible)::after { animation: none; opacity: .68; }
}
@media (prefers-contrast: more) {
  body[data-persona] :is(.kaeris-chamber, .ch-detail, .drink-detail, .patterns, .ritual-gauge, .effect-preview, .manifest, .story-card, .ch-card, .pattern),
  body[data-persona] dialog { border-color: #d5bb94; }
  body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true] { border-color: #f1d5b4; }
  body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true]::before { animation: none; opacity: .22; }
}
@media (forced-colors: active) {
  body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button {
    color: ButtonText;
    background: ButtonFace;
    border-color: ButtonBorder;
  }
  body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true] {
    color: ButtonText;
    background: ButtonFace;
    border: 2px solid Highlight;
    box-shadow: inset 0 0 0 2px Highlight;
  }
  body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true]::before,
  body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button[aria-selected=true]::after { display: none; }
  body[data-persona] :is(.ch-main-tabs, .ch-subtabs) button:focus-visible { outline-color: Highlight; }
}