/* Shared premium presentation for menu dialogs and first-player guidance. */
.pause-panel,
.tutorial-card {
  overflow: visible;
  border: 3px solid #f7d45c;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 2%, rgba(179, 41, 201, .32), transparent 33%),
    repeating-radial-gradient(ellipse at center, rgba(255, 255, 255, .025) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #33034e 0%, #150122 52%, #08030e 100%);
  box-shadow:
    inset 0 0 0 2px #6a2d08,
    inset 0 0 0 6px #d69a28,
    inset 0 0 38px rgba(175, 30, 195, .24),
    0 0 0 2px #3d1704,
    0 24px 70px rgba(0, 0, 0, .78),
    0 0 32px rgba(117, 23, 159, .32);
}

.pause-panel::after,
.tutorial-card::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -12px;
  width: min(260px, 55%);
  height: 42px;
  transform: translateX(-50%);
  background: url('../assets/setup/setup-ornament.webp') center / contain no-repeat;
  pointer-events: none;
}

.pause-panel__header,
.settings-list,
.rules-pages,
.stats-rank,
.stats-grid,
.tutorial-card > * { position: relative; z-index: 1; }

.premium-panel__crown,
.tutorial-card__crown {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -74px;
  width: 132px;
  height: 98px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(246, 174, 50, .34));
  pointer-events: none;
}

.pause-panel__header {
  height: 92px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 5px;
  padding-top: 24px;
  border: 0;
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(90deg, transparent 5%, rgba(230, 169, 50, .82) 18%, #ffdf70 50%, rgba(230, 169, 50, .82) 82%, transparent 95%) bottom / 86% 1px no-repeat,
    linear-gradient(180deg, rgba(123, 12, 149, .26), rgba(45, 3, 69, .05));
  box-shadow: none;
}

.premium-panel__brand,
.tutorial-card__brand {
  display: block;
  color: #f4c84d;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.premium-panel__brand {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pause-panel__header h2,
.tutorial-card h2 {
  color: #fff7db;
  font-family: var(--font-display);
  letter-spacing: 0;
  text-shadow: 0 2px 0 #5d2500, 0 0 12px rgba(255, 209, 78, .24);
}

.pause-panel__header h2 { font-size: clamp(29px, 3.4vw, 42px); transform: translateY(-8px); }

.panel-close {
  right: 9px;
  top: 9px;
  width: 42px;
  height: 42px;
  border-color: #f8d65d;
  background: linear-gradient(150deg, #752192, #2c083e);
  box-shadow: inset 0 0 0 2px #a56718, 0 4px 9px rgba(0, 0, 0, .55);
}
.panel-close::before,
.panel-close::after { left: 7px; top: 17px; width: 25px; background: #ffe967; }

.settings-list,
.stats-grid { border-radius: 0 0 17px 17px; overflow: hidden; }
.setting-row {
  border-bottom-color: rgba(230, 179, 58, .18);
  background: linear-gradient(90deg, rgba(91, 11, 123, .32), rgba(19, 2, 31, .2));
}
.setting-row:nth-child(even) { background: rgba(8, 2, 15, .28); }

.menu-toggle {
  border-color: #b7892d;
  background: linear-gradient(#21122d, #0c0712);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 216, 92, .18);
}
.menu-toggle.is-on { border-color: #e0a82f; background: linear-gradient(#ffd449, #d88108); }
.menu-toggle__knob { background: radial-gradient(circle at 32% 24%, #fff58c, #62cc22 48%, #198413); }

.rules-panel {
  width: min(780px, calc(100vw - 64px));
  min-height: min(510px, calc(100dvh - 76px));
}
.rules-pages {
  min-height: 410px;
  padding: 22px 66px 48px;
  border-radius: 0 0 18px 18px;
  background: radial-gradient(ellipse at center bottom, rgba(107, 14, 145, .22), transparent 64%);
}
.rules-page p { max-width: 650px; margin-bottom: 18px; color: #f4edf7; font-size: clamp(16px, 1.75vw, 21px); }
.rules-page strong { color: #f3cc54; }
.rules-example { gap: 16px; margin-top: 18px; }
.rule-group { grid-template-columns: repeat(3, 58px); }
.rule-group--dead { grid-template-columns: repeat(2, 58px); }
.rule-group b { margin-bottom: 10px; text-shadow: 0 2px 5px #000; }

.rules-card {
  --rule-card-width: 68px;
  width: var(--rule-card-width);
  height: calc(var(--rule-card-width) * 1.38);
  margin-left: -9px;
  container-type: inline-size;
}
.rule-group b + .rules-card { margin-left: 0; }
.rules-card .card-front { padding: 6%; }
.rules-card .corner .r { font-size: 18cqi; }
.rules-card .corner .s { margin-top: 1px; font-size: 15cqi; }
.rules-card .center-rank { font-size: 36cqi; }
.rules-card .center-suit { font-size: 27cqi; }

.rules-arrow::before { border-color: #ffe87d; filter: drop-shadow(0 0 4px #8d34be); }
.rules-arrow,
.rules-dots,
.rules-tutorial-btn { z-index: 2; }
.rules-score-grid span,
.rules-steps span { box-shadow: inset 0 0 12px rgba(151, 31, 180, .3); }
.rules-tutorial-btn {
  border-color: #e4bc4c;
  background: linear-gradient(#602078, #280936);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.stats-rank {
  border-block: 1px solid rgba(235, 191, 64, .22);
  background: radial-gradient(circle at 50% 0, rgba(162, 36, 190, .32), rgba(21, 2, 34, .38));
}
.stats-rank > span { font-family: var(--font-display); font-size: 25px; }
.stats-grid { gap: 1px; background: rgba(225, 176, 52, .22); }
.stats-grid > div { background: linear-gradient(135deg, rgba(82, 12, 105, .74), rgba(18, 3, 28, .86)); }
.stats-grid strong { color: #ffe276; font-family: var(--font-display); }
.stats-xp i { background: linear-gradient(90deg, #8f2cac, #f2c74d); }

.tutorial-card {
  width: min(560px, calc(100vw - 32px));
  padding: 27px 30px 23px;
}
.tutorial-card--prompt { padding-top: 72px; }
.tutorial-card__eyebrow { margin-top: 7px; color: #cdbfd3; }
.tutorial-card__brand { margin-bottom: 7px; }
.tutorial-card h2 { margin: 7px 0 12px; font-size: clamp(27px, 3vw, 36px); }
.tutorial-card p { color: #eee5f2; }
.tutorial-btn {
  border-color: #d7ae41;
  background: linear-gradient(#4d1c61, #1c0829);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 10px rgba(0,0,0,.38);
}
.tutorial-btn--primary {
  border-color: #ffe175;
  background: linear-gradient(#f5c84d, #a75b09);
  color: #210923;
  text-shadow: 0 1px rgba(255,255,255,.35);
}

@media (max-width: 640px) {
  .premium-panel__crown { top: -50px; width: 96px; height: 68px; }
  .pause-panel__header { height: 76px; padding-top: 19px; gap: 3px; }
  .pause-panel__header h2 { font-size: 26px; }
  .premium-panel__brand { font-size: 8px; letter-spacing: 1.4px; }
  .panel-close { right: 5px; top: 5px; }
  .rules-panel {
    width: calc(100vw - 34px);
    min-height: 0;
    height: min(570px, calc(100dvh - 96px));
    max-height: calc(100dvh - 96px);
  }
  .rules-pages {
    min-height: 0;
    height: calc(100% - 76px);
    padding: 17px 38px 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .rules-page p { margin-bottom: 14px; font-size: 14px; line-height: 1.3; }
  .rules-example { gap: 14px 3px; margin-top: 16px; }
  .rule-group { grid-template-columns: repeat(3, 43px); }
  .rule-group--dead { grid-template-columns: repeat(2, 43px); }
  .rules-card { --rule-card-width: 51px; margin-left: -8px; }
  .tutorial-card { padding: 20px 18px 18px; }
  .tutorial-card--prompt { padding-top: 66px; }
  .tutorial-card__crown { top: -48px; width: 104px; height: 74px; }
  .tutorial-card__brand { font-size: 8px; letter-spacing: 1.3px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .premium-panel__crown { top: -31px; width: 68px; height: 45px; }
  .pause-panel__header { height: 58px; padding-top: 13px; gap: 1px; }
  .pause-panel__header h2 { font-size: 24px; }
  .premium-panel__brand { font-size: 7px; }
  .rules-panel { width: min(680px, calc(100vw - 88px)); min-height: 0; height: min(470px, calc(100dvh - 88px)); }
  .rules-pages { min-height: 0; height: calc(100% - 58px); padding: 14px 60px 38px; overflow-y: auto; }
  .rules-page p { font-size: 15px; margin-bottom: 10px; }
  .rules-example { margin-top: 8px; }
  .rules-card { --rule-card-width: 55px; }
  .tutorial-card { bottom: 12px; padding: 14px 20px 12px; }
  .tutorial-card h2 { margin: 4px 0 6px; font-size: 23px; }
  .tutorial-card p { margin-bottom: 8px; font-size: 12px; }
}