/*
  CRYPTO ARCADE — Section & Box System v4
  Load after crypto-arcade-v3.css, button-radius-v3.1.css and every legacy stylesheet.
*/

:root,
.ca-v3 {
  --ca-box-navy: #153a67;
  --ca-box-navy-deep: #0b2850;
  --ca-box-cream: #fff8e8;
  --ca-box-cream-top: #fffdf6;
  --ca-box-cream-bottom: #f8ead1;
  --ca-box-gold-line: #e8c98d;
  --ca-box-gold-soft: #f3dfb8;
  --ca-box-blue-well: #f0f8fc;
  --ca-box-cyan: #36bde6;
  --ca-box-orange: #ff9216;
  --ca-box-shell-radius: 26px;
  --ca-box-section-radius: 20px;
  --ca-box-card-radius: 18px;
  --ca-box-well-radius: 14px;
  --ca-box-tile-radius: 12px;
  --ca-box-shell-depth: 6px;
  --ca-box-section-depth: 4px;
  --ca-box-card-depth: 3px;
  --ca-box-shadow-soft: 0 12px 24px rgba(34, 72, 108, .12);
}

.ca-v3 [data-ca-box],
.ca-v3 [data-ca-box]::before,
.ca-v3 [data-ca-box]::after {
  box-sizing: border-box;
}

/* Level 1 — one structural shell per screen */
.ca-v3 [data-ca-box="shell"] {
  border: 3px solid var(--ca-box-navy) !important;
  border-radius: var(--ca-box-shell-radius) !important;
  background: linear-gradient(180deg, var(--ca-box-cream-top), var(--ca-box-cream)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .9),
    inset 0 -3px 0 rgba(211, 172, 105, .22),
    0 var(--ca-box-shell-depth) 0 rgba(30, 68, 105, .26),
    0 20px 40px rgba(36, 77, 113, .18) !important;
  overflow: hidden;
}

/* Level 2 — major content sections */
.ca-v3 [data-ca-box="section"] {
  min-width: 0;
  min-height: 0;
  border: 2px solid var(--ca-box-gold-line) !important;
  border-radius: var(--ca-box-section-radius) !important;
  background: linear-gradient(180deg, var(--ca-box-cream-top), var(--ca-box-cream-bottom)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .94),
    0 var(--ca-box-section-depth) 0 rgba(154, 111, 49, .15),
    var(--ca-box-shadow-soft) !important;
  overflow: hidden;
}

.ca-v3 [data-ca-box="section-header"] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 14px;
  color: var(--ca-box-navy-deep);
  border: 0 !important;
  border-bottom: 1.5px solid var(--ca-box-gold-soft) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(255, 254, 248, .96), rgba(255, 246, 227, .90)) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .92) !important;
  font-size: 16px;
  font-weight: 950;
}

.ca-v3 [data-ca-box="section-header"] [data-ca-box="header-icon"] {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  border: 2px solid var(--ca-box-navy-deep);
  border-radius: 9px;
  background: linear-gradient(180deg, #55d0ee, #269dd5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 2px 0 rgba(15, 68, 103, .24);
}

.ca-v3 [data-ca-box="section-header"] [data-ca-box="header-meta"] {
  margin-left: 2px;
  color: #8192a5;
  font-size: 11px;
  font-weight: 800;
}

.ca-v3 [data-ca-box="section-header"] [data-ca-box="header-action"] {
  margin-left: auto;
}

.ca-v3 [data-ca-box="section-body"] {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Level 3 — recessed content areas. Never use raised shadows here. */
.ca-v3 [data-ca-box="well"] {
  min-width: 0;
  min-height: 0;
  border: 1.5px solid #e2cfaa !important;
  border-radius: var(--ca-box-well-radius) !important;
  background: rgba(255, 253, 247, .82) !important;
  box-shadow:
    inset 0 4px 10px rgba(75, 83, 88, .07),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

.ca-v3 [data-ca-box="well"][data-tone="blue"] {
  border-color: #bed7e8 !important;
  background: linear-gradient(180deg, #f8fcff, var(--ca-box-blue-well)) !important;
}

.ca-v3 [data-ca-box="well"][data-tone="cream"] {
  background: linear-gradient(180deg, #fffdf7, #fbf0dd) !important;
}

/* Level 3 — player cards are raised, color-coded cards. */
.ca-v3 [data-ca-box="player"] {
  --ca-player: #a978f5;
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 2.5px solid var(--ca-player) !important;
  border-radius: var(--ca-box-card-radius) !important;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, .72), transparent 36%),
    color-mix(in srgb, var(--ca-player) 9%, #fffdf5) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .68),
    inset 0 3px 0 rgba(255, 255, 255, .72),
    0 var(--ca-box-card-depth) 0 color-mix(in srgb, var(--ca-player) 34%, transparent),
    0 9px 16px rgba(37, 73, 108, .10) !important;
  overflow: hidden;
}

.ca-v3 [data-ca-box="player"][data-player="btc"] { --ca-player: #ff9518; }
.ca-v3 [data-ca-box="player"][data-player="eth"] { --ca-player: #36bde6; }
.ca-v3 [data-ca-box="player"][data-player="sol"] { --ca-player: #a66cf0; }
.ca-v3 [data-ca-box="player"][data-player="doge"] { --ca-player: #72c746; }

/* Raised selection/navigation rails */
.ca-v3 [data-ca-box="toolbar"],
.ca-v3 [data-ca-box="footer"] {
  min-width: 0;
  border: 2px solid var(--ca-box-gold-line) !important;
  background: linear-gradient(180deg, #fffdf6, #f6e7ce) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .94),
    0 4px 0 rgba(144, 105, 49, .15),
    0 9px 16px rgba(36, 73, 108, .09) !important;
}

.ca-v3 [data-ca-box="toolbar"] {
  border-radius: var(--ca-box-card-radius) !important;
}

.ca-v3 [data-ca-box="footer"] {
  border-radius: 16px !important;
}

.ca-v3 [data-ca-box="tile"] {
  min-width: 0;
  border: 2px solid #c7d7e2 !important;
  border-radius: var(--ca-box-tile-radius) !important;
  background: linear-gradient(180deg, #fff, #edf5f8) !important;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(64, 91, 116, .13) !important;
}

.ca-v3 [data-ca-box="tile"][aria-selected="true"],
.ca-v3 [data-ca-box="tile"].is-selected {
  border-color: var(--ca-box-orange) !important;
  background: linear-gradient(180deg, #fffaf0, #ffedc8) !important;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #d86c05, 0 8px 14px rgba(145, 82, 15, .12) !important;
}

/* Modal and list rows use the same surface family. */
.ca-v3 [data-ca-box="modal"] {
  --ca-result-accent: var(--ca-box-orange);
  --ca-result-edge: #c95a00;
  border: 4px solid var(--ca-box-navy) !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, #fffdf5, #fff1d5) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .9),
    inset 0 -4px 0 rgba(211, 172, 105, .24),
    0 7px 0 rgba(35, 72, 108, .26),
    0 24px 54px rgba(24, 55, 90, .28) !important;
}

.ca-v3 [data-ca-box="modal"] :where([data-ca="result-plate"], [data-ca-box="result-plate"]) {
  color: #fff !important;
  border: 3px solid var(--ca-box-navy) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ca-result-accent) 68%, #fff), var(--ca-result-accent)) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .42),
    0 5px 0 var(--ca-result-edge),
    0 10px 18px rgba(70, 53, 41, .18) !important;
}

.ca-v3 [data-ca-box="modal"][data-result="victory"] :where([data-ca="result-title"], [data-ca-box="result-title"]) {
  color: #3a9b42 !important;
}

.ca-v3 [data-ca-box="modal"][data-result="defeat"] {
  --ca-result-accent: #f0645b;
  --ca-result-edge: #ba3638;
}

.ca-v3 [data-ca-box="modal"][data-result="defeat"] :where([data-ca="result-title"], [data-ca-box="result-title"]),
.ca-v3 [data-ca-box="modal"][data-result="defeat"] :where([data-ca="stat-value"], [data-ca-box="stat-value"]) {
  color: #d64040 !important;
}

.ca-v3 [data-ca-box="modal"][data-result="defeat"] [data-ca-box="row"][data-current="true"],
.ca-v3 [data-ca-box="modal"][data-result="defeat"] [data-ca="ranking-row"][data-current="true"] {
  --ca-row: #f0645b;
  background: linear-gradient(180deg, #fff6f0, #ffe4dc) !important;
}

.ca-v3 [data-ca-box="row"] {
  --ca-row: #a9c2d8;
  border: 2px solid var(--ca-row) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--ca-row) 8%, #fffdf8) !important;
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 color-mix(in srgb, var(--ca-row) 20%, transparent) !important;
}

.ca-v3 [data-ca-box="row"][data-rank="1"] {
  --ca-row: #f2b727;
  background: linear-gradient(180deg, #fff7c9, #ffe590) !important;
}

/* Section states */
.ca-v3 [data-ca-box="section"][data-state="disabled"] {
  filter: saturate(.45);
  opacity: .66;
}

.ca-v3 [data-ca-box="section"][data-state="loading"] [data-ca-box="section-body"],
.ca-v3 [data-ca-box="section"][data-state="empty"] [data-ca-box="section-body"] {
  display: grid;
  place-items: center;
  color: #778a9f;
  text-align: center;
}

/* Migration safety net for the current waiting-room classes. */
.ca-v3 .ca-settings[data-ca-box="section"],
.ca-v3 .ca-chat[data-ca-box="section"],
.ca-v3 .match-settings[data-ca-box="section"],
.ca-v3 .chat-panel[data-ca-box="section"] {
  border: 2px solid var(--ca-box-gold-line) !important;
  border-radius: var(--ca-box-section-radius) !important;
  background: linear-gradient(180deg, var(--ca-box-cream-top), var(--ca-box-cream-bottom)) !important;
}

@media (max-height: 800px) {
  .ca-v3 [data-ca-box="section-header"] {
    min-height: 40px;
    padding-block: 6px;
  }

  .ca-v3 [data-ca-box="section-body"] {
    padding: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ca-v3 [data-ca-box] {
    transition: none !important;
  }
}