/* Fantasy decoration, native readable controls. All styles are scoped to RPG. */
.rpg-tile {
  background: radial-gradient(ellipse at 80% 0%, var(--ambient-purple), transparent 65%), var(--surface);
  border-top: 4px solid var(--warning);
}
main[data-game="rpg"] {
  --rpg-gold: #805f0b;
  --rpg-ink: #fff;
  --rpg-wash: rgba(158, 113, 27, .08);
  max-width: 78rem;
}
:root[data-theme="dark"] main[data-game="rpg"] {
  --rpg-gold: #f6d681;
  --rpg-ink: #211832;
  --rpg-wash: rgba(246, 214, 129, .08);
}
.rpg-hero, .rpg-campaign-header {
  position: relative;
  isolation: isolate;
  padding: clamp(1.3rem, 4vw, 3rem);
  margin-block-end: 1.5rem;
  border: 1px solid var(--panel-border);
  border-radius: 1.8rem .6rem 1.8rem .6rem;
  background: radial-gradient(ellipse at 90% 0%, var(--ambient-purple), transparent 60%),
    radial-gradient(ellipse at 10% 100%, var(--rpg-wash), transparent 70%), var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rpg-hero::after, .rpg-campaign-header::after {
  content: "✧";
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: -3rem;
  font-size: 16rem;
  color: var(--rpg-gold);
  opacity: .06;
  pointer-events: none;
  z-index: -1;
}
.rpg-hero h1 { font-size: clamp(2.2rem, 6vw, 4.5rem); letter-spacing: -.035em; }
.rpg-campaign-header h1 { font-size: clamp(1.8rem, 4vw, 3rem); overflow-wrap: anywhere; }
main[data-game="rpg"] .eyebrow { color: var(--rpg-gold); }
main[data-game="rpg"] .button:not(.secondary):not(.danger) {
  color: var(--rpg-ink);
  background: var(--rpg-gold);
  border-color: var(--rpg-gold);
}
.rpg-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
#rpg-dashboard { display: grid; gap: 1.4rem; }
.rpg-panel { background: linear-gradient(145deg, var(--rpg-wash), transparent 60%), var(--surface); }
.rpg-panel > h2 { padding-block-end: .7rem; border-block-end: 2px solid var(--panel-border); }
.rpg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; }
.rpg-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .75rem; margin-block: 1rem; }
.rpg-quick-grid button { min-height: 54px; }
.rpg-last-roll { font-size: 1.3rem; padding: .7rem 1rem; border-inline-start: 4px solid var(--rpg-gold); background: var(--surface-2); border-radius: .3rem; }
.rpg-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.rpg-character { padding: 1.25rem; background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: 1rem; overflow-wrap: anywhere; }
.rpg-character h3 { margin-block-start: 0; }
.rpg-character .button { margin-block: .25rem; margin-inline-end: .4rem; }
.rpg-vitals { font-size: 1.15rem; font-weight: 700; }
.rpg-turn { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.rpg-turn-order { padding-inline-start: 1.7rem; }
.rpg-turn-order li { padding: .65rem; margin-block: .2rem; }
.rpg-turn-order [aria-current="step"] { border: 2px solid var(--rpg-gold); background: var(--surface-2); border-radius: .5rem; font-weight: 700; }
.rpg-disclosure { margin: 0; padding: 1.2rem; }
.rpg-disclosure > summary { min-height: 44px; font-size: 1.15rem; font-weight: 700; cursor: pointer; padding: .4rem; }
.rpg-disclosure[open] > summary { margin-block-end: 1rem; }
.rpg-form { display: grid; gap: 1rem; }
.rpg-form .field { margin: 0; }
.rpg-form fieldset { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: .6rem; }
.rpg-form legend { padding-inline: .4rem; font-weight: 700; }
.rpg-form textarea { width: 100%; min-height: 7rem; resize: vertical; }
.rpg-form input, .rpg-form select, .rpg-form textarea { max-width: 100%; }
.rpg-dialog { width: min(52rem, calc(100% - 1rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: clamp(1rem, 3vw, 2rem); }
.rpg-dialog > .button:last-child { margin-block-start: 1rem; }
.rpg-entry-list { display: grid; gap: 1rem; margin-block-end: 1rem; }
.rpg-entry-list fieldset { display: grid; gap: .75rem; }
.rpg-history { display: grid; gap: 1rem; padding-inline-start: 1.7rem; }
.rpg-history article, .rpg-history li { padding-block: .5rem; border-block-end: 1px solid var(--panel-border); overflow-wrap: anywhere; }
.rpg-prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.rpg-saved-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.rpg-dice-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}
.rpg-die {
  display: inline-grid;
  place-content: center;
  text-align: center;
  flex: 0 0 clamp(2.6rem, 8vw, 5rem);
  height: clamp(2.6rem, 8vw, 5rem);
  border: 3px solid #f6d681;
  border-radius: 22%;
  color: #fff5d7;
  background: linear-gradient(135deg, #59328a, #211832);
  box-shadow: 0 8px 20px #14102366, inset 0 2px 2px #ffffff44;
  font-size: clamp(1rem, 3vw, 2rem);
  font-weight: 800;
  animation: rpg-roll 1.4s cubic-bezier(.2,.65,.3,1) both;
}
.rpg-die small { display: block; font-size: .65rem; }
.rpg-die-1, .rpg-die-3, .rpg-die-5, .rpg-die-7 { animation-name: rpg-roll-reverse; }
@keyframes rpg-roll {
  0% { transform: translate(-55vw, -20vh) rotate(-330deg) scale(.65); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translate(0, 0) rotate(12deg) scale(1); }
  78% { transform: rotate(0); opacity: 1; }
  100% { transform: translateY(2rem); opacity: 0; }
}
@keyframes rpg-roll-reverse {
  0% { transform: translate(55vw, 20vh) rotate(330deg) scale(.65); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translate(0, 0) rotate(-12deg) scale(1); }
  78% { transform: rotate(0); opacity: 1; }
  100% { transform: translateY(2rem); opacity: 0; }
}
@media (max-width: 700px) { .rpg-home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) {
  .rpg-hero, .rpg-campaign-header, .rpg-panel { padding: 1rem; }
  .rpg-quick-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .rpg-dice-stage { display: none; } .rpg-die { animation: none; } }
@media (forced-colors: active) {
  .rpg-hero, .rpg-campaign-header, .rpg-character, .rpg-turn-order [aria-current] { border: 2px solid CanvasText; }
  .rpg-hero::after, .rpg-campaign-header::after, .rpg-dice-stage { display: none; }
  main[data-game="rpg"] .button { border: 2px solid ButtonText; color: ButtonText; background: ButtonFace; }
}