/* Modal — a native <dialog> with a centred parchment sheet in a carved
   frame (default) or a dark wood sheet (.modal__sheet--dark).
   Open: dialog.showModal() (focus moves in and stays in, Escape closes,
   the page behind goes inert), then add .is-open to run the entrance.
   Close: dialog.close(); on its "close" event remove .is-open and focus
   the opener. See ui_kits/game/game.js.
   Markup:
     <dialog class="modal" aria-labelledby="t">
       <div class="modal__scrim"></div>
       <div class="modal__sheet"><div class="modal__inner">
         <header class="modal__head"><h2 class="modal__title" id="t">Rules</h2><button class="btn btn--icon btn--ghost btn--sm">×</button></header>
         <div class="modal__body">…</div>
         <footer class="modal__foot"><button class="btn">Later</button><button class="btn btn--primary">Play</button></footer>
       </div></div></dialog> */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
dialog.modal {                /* reset the UA dialog box: full-viewport, transparent */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: hidden;
}
dialog.modal:not([open]) { display: none; }
.modal::backdrop { background: transparent; }   /* .modal__scrim draws the dim */

.modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.modal.is-open .modal__scrim { opacity: 1; }

.modal__sheet {
  position: relative;
  width: min(100%, var(--modal-w));
  max-height: calc(100vh - var(--space-8));
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background: var(--surface-wood);
  background-color: var(--wood-700);
  box-shadow: var(--bevel-wood), var(--shadow-4);
  transform: translateY(var(--space-4)) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-slow) var(--ease-out);
  display: flex;
}
.modal.is-open .modal__sheet { transform: none; opacity: 1; }
.modal__sheet--wide { width: min(100%, var(--modal-w-wide)); }

.modal__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-parchment);
  background-color: var(--parchment-50);
  box-shadow: var(--bevel-inlay);
  overflow: hidden;
}

.modal__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-2) var(--space-5); }
.modal__icon { width: var(--icon-size-lg); height: var(--icon-size-lg); color: var(--gold-700); margin-right: calc(var(--space-1) * -1); }
.modal__title { flex: 1; margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--fg-strong); }
.modal__body { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-5) var(--space-4); color: var(--fg); }
.modal__body p { margin: 0 0 var(--space-3); }
.modal__body ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.modal__body li + li { margin-top: var(--space-1); }
.modal__foot { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-3) var(--space-5) var(--space-5); border-top: 1px solid var(--border); }
.modal__foot .btn { flex: 1 1 0; }
.modal__foot--stack { flex-direction: column; }

/* Dark wood sheet (end-of-game, reward) */
.modal__sheet--dark .modal__inner {
  background: var(--surface-wood-dark);
  background-color: var(--wood-800);
  color: var(--fg-on-dark);
  box-shadow: inset 0 0 0 1px var(--gold-700), var(--bevel-inlay);
}
.modal__sheet--dark .modal__title { color: var(--gold-300); }
.modal__sheet--dark .modal__body { color: var(--cream-300); }
.modal__sheet--dark .modal__foot { border-top-color: var(--border-on-dark); }

/* Result layout inside a modal */
.modal__hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-3); text-align: center; }
.modal__hero .t-display { font-size: var(--fs-3xl); }
.modal__hero .t-small { max-width: 32ch; }
.modal__crest { width: var(--icon-size-xl); height: var(--icon-size-xl); fill: currentColor; color: var(--gold-500); filter: drop-shadow(0 2px 2px var(--shade-mid)); }
.modal__sheet--dark .modal__crest { color: var(--gold-300); }

/* Full-height sheet from the bottom on small phones */
@media (max-width: 480px) {
  .modal { padding: 0; align-items: end; }
  .modal__sheet { width: 100%; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: calc(var(--space-2) + var(--safe-bottom)); transform: translateY(var(--space-8)); }
  .modal__inner { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}