/* Bank & Dice canonical Cubiri surfaces.
   Settings source: design-system.css + party.css + party-5sr.css.
   Rules/Tips source: Generic rich-text rule cards v1 in app.css.
   Do not approximate these patterns. Reuse the canonical geometry and values. */

body.bank-and-dice-active .bank-dice-settings.cubiri-card {
  width: min(calc(100% - 28px), 720px);
  margin-inline: auto;
  box-sizing: border-box;
  padding: var(--cubiri-card-padding);
  gap: 1rem;
}

body.bank-and-dice-active .bank-dice-settings h2 {
  margin: 0 0 2px;
  font-size: .68rem;
  line-height: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: inherit;
  opacity: .58;
}

body.bank-and-dice-active .bank-dice-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
}

body.bank-and-dice-active .bank-dice-choice-row .cubiri-option {
  position: relative;
  min-width: 0;
  min-height: var(--cubiri-control-min-h);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--cubiri-radius-control);
  padding: 8px 12px;
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  isolation: isolate;
}

body.bank-and-dice-active .bank-dice-choice-row .cubiri-option.is-active,
body.bank-and-dice-active .bank-dice-choice-row .cubiri-option[aria-pressed="true"] {
  border-color: transparent;
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--cubiri-brand-purple) 24%, transparent),
    0 0 14px color-mix(in srgb, var(--cubiri-brand-pink) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--cubiri-brand-orange) 12%, transparent);
}

body.bank-and-dice-active .bank-dice-name-list {
  gap: .5rem;
  padding-top: 0;
}

body.bank-and-dice-active .bank-dice-name-list input,
body.bank-and-dice-active .bank-dice-settings label input {
  min-height: var(--cubiri-control-min-h);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--cubiri-radius-control);
  padding: 8px 12px;
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit;
  font: inherit;
}

body.bank-and-dice-active .bank-dice-settings label {
  gap: .6rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  font-size: .68rem;
  line-height: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: inherit;
  opacity: .58;
}

body.bank-and-dice-active .bank-dice-settings label input {
  margin-top: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  font-weight: 400;
  opacity: 1;
}

body.bank-and-dice-active .bank-dice-settings > h2:not(:first-child) {
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

body.bank-and-dice-active .bank-dice-reset.cubiri-action-destructive {
  min-height: var(--cubiri-control-min-h);
  border-radius: var(--cubiri-radius-control);
  padding: 10px 14px;
  margin-top: 0;
  font: inherit;
  font-weight: 750;
}

/* BANK & DICE QUICK RULES
   Exact visual language from app.css: Generic rich-text rule cards v1. */
body.bank-and-dice-active .bank-dice-rules {
  width: min(calc(100% - 16px), 720px);
  max-width: none;
  margin-inline: auto;
  padding: clamp(8px, 1.8vw, 12px);
  box-sizing: border-box;
  line-height: normal;
}

body.bank-and-dice-active .bank-dice-rules details {
  --rule-accent: var(--purple);
  width: 100%;
  margin: 0 0 clamp(6px, 1.4vw, 9px);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--rule-accent) 22%, var(--line));
  border-radius: clamp(15px, 3.6vw, 20px);
  background:
    radial-gradient(circle at 9% 0%, color-mix(in srgb, var(--rule-accent) 9%, transparent), transparent 40%),
    color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow:
    0 5px 16px rgb(0 0 0 / .07),
    inset 0 1px 0 rgb(255 255 255 / .05);
  overflow: hidden;
}

body.bank-and-dice-active .bank-dice-rules summary {
  list-style: none;
  width: 100%;
  min-height: clamp(46px, 10.5vw, 54px);
  margin: 0;
  border: 0;
  padding: clamp(9px, 2vw, 12px) clamp(12px, 2.8vw, 16px);
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.bank-and-dice-active .bank-dice-rules summary::-webkit-details-marker { display: none; }

body.bank-and-dice-active .bank-dice-rules summary::before {
  width: 26px;
  flex: 0 0 26px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}
body.bank-and-dice-active .bank-dice-rules details:nth-of-type(1) summary::before { content: "🎲"; }
body.bank-and-dice-active .bank-dice-rules details:nth-of-type(2) summary::before { content: "💵"; }
body.bank-and-dice-active .bank-dice-rules details:nth-of-type(3) summary::before { content: "🎡"; }
body.bank-and-dice-active .bank-dice-rules details:nth-of-type(4) summary::before { content: "🎯"; }

body.bank-and-dice-active .bank-dice-rules summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-left: auto;
  border-right: 2px solid color-mix(in srgb, var(--rule-accent) 80%, white 20%);
  border-bottom: 2px solid color-mix(in srgb, var(--rule-accent) 80%, white 20%);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

body.bank-and-dice-active .bank-dice-rules details[open] summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

body.bank-and-dice-active .bank-dice-rules summary {
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1.15;
  font-weight: 720;
}

body.bank-and-dice-active .bank-dice-rules details p {
  margin: 7px 0 0;
  padding: 0 clamp(13px, 3vw, 17px) clamp(12px, 2.8vw, 16px);
  font-size: clamp(12px, 2.65vw, 14px);
  line-height: 1.42;
  opacity: 1;
}

body.bank-and-dice-active .bank-dice-trademark {
  margin: 4px clamp(13px, 3vw, 17px) 0 !important;
  padding: 0 0 clamp(12px, 2.8vw, 16px);
  border: 0;
  font-size: .78rem !important;
  line-height: 1.45;
  opacity: .55 !important;
}

/* Explanation behaves as one permanently-open canonical rule card. */
body.bank-and-dice-active .bank-dice-explanation {
  --rule-accent: var(--purple);
  width: min(calc(100% - 16px), 720px);
  max-width: none;
  margin-inline: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--rule-accent) 22%, var(--line));
  border-radius: clamp(15px, 3.6vw, 20px);
  background:
    radial-gradient(circle at 9% 0%, color-mix(in srgb, var(--rule-accent) 9%, transparent), transparent 40%),
    color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow:
    0 5px 16px rgb(0 0 0 / .07),
    inset 0 1px 0 rgb(255 255 255 / .05);
  overflow: hidden;
  line-height: normal;
}

body.bank-and-dice-active .bank-dice-explanation h2 {
  min-height: clamp(46px, 10.5vw, 54px);
  margin: 0;
  padding: clamp(9px, 2vw, 12px) clamp(12px, 2.8vw, 16px);
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1.15;
  font-weight: 720;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}

body.bank-and-dice-active .bank-dice-explanation h2::before {
  content: "💡";
  width: 26px;
  flex: 0 0 26px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

body.bank-and-dice-active .bank-dice-explanation p {
  margin: 7px 0 0;
  padding: 0 clamp(13px, 3vw, 17px) clamp(12px, 2.8vw, 16px);
  font-size: clamp(12px, 2.65vw, 14px);
  line-height: 1.42;
  opacity: 1;
}

/* Editor interaction contract: every non-primary editor control gets the same
   purple rollover/focus treatment already used by the player-transfer buttons. */
body.bank-and-dice-active .bank-dice-keypad button,
body.bank-and-dice-active .bank-dice-ops button,
body.bank-and-dice-active .bank-dice-quick-amounts button,
body.bank-and-dice-active .bank-dice-transfer {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

body.bank-and-dice-active .bank-dice-keypad button:hover,
body.bank-and-dice-active .bank-dice-keypad button:focus-visible,
body.bank-and-dice-active .bank-dice-ops button:hover,
body.bank-and-dice-active .bank-dice-ops button:focus-visible,
body.bank-and-dice-active .bank-dice-quick-amounts button:hover,
body.bank-and-dice-active .bank-dice-quick-amounts button:focus-visible,
body.bank-and-dice-active .bank-dice-transfer:hover,
body.bank-and-dice-active .bank-dice-transfer:focus-visible {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 2px color-mix(in srgb, #a855f7 18%, transparent);
}

@media (max-height: 760px) {
  body.bank-and-dice-active .bank-dice-rules summary,
  body.bank-and-dice-active .bank-dice-explanation h2 {
    min-height: 43px;
    padding-block: 8px;
  }
  body.bank-and-dice-active .bank-dice-rules details {
    margin-bottom: 5px;
  }
}