/* Poke Bowl v162 · Studio-wide visual system
   Design layer only. No DOM behavior, rules, state, dimensions of card artwork,
   calculation logic, or network code is modified by this stylesheet.
   Loaded after style.css to make the theme auditable/removable. */

:root {
  --pb-void: #060d1b;
  --pb-deep: #0a1425;
  --pb-surface: rgba(18, 34, 56, .91);
  --pb-surface-raised: rgba(27, 46, 71, .88);
  --pb-edge: rgba(155, 184, 220, .23);
  --pb-edge-lit: rgba(174, 217, 255, .40);
  --pb-ink: #f5f8ff;
  --pb-muted: #aebfd5;
  --pb-copper: #f4ab74;
  --pb-ice: #91cde8;
  --pb-plum: #bca8f5;
  --pb-success: #8dd6b5;
  --pb-danger: #f39e9d;
  --pb-curve: 22px;
  --pb-shadow: 0 20px 50px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(244, 250, 255, .055);
}

/* One atmospheric backdrop shared by tool screens, the game and auth flows.
   The moving star canvas still follows its original landing-only lifecycle. */
body:has(#setup:not(.hidden)),
body:has(#game:not(.hidden)) {
  background:
    radial-gradient(ellipse 66% 52% at 7% 2%, rgba(26,76,113,.28), transparent 72%),
    radial-gradient(ellipse 62% 56% at 91% 8%, rgba(66,40,91,.20), transparent 76%),
    radial-gradient(ellipse 62% 50% at 74% 92%, rgba(114,55,27,.09), transparent 72%),
    var(--pb-void) !important;
  color:var(--pb-ink);
}

/* The hero logo should be unframed—no rectangles, orbits, or faux glass panels. */
#setupHome .homeHeroOrbit,
#setupHome .homeHeroMark::before,
#setupHome .homeHeroMark::after { display:none!important; content:none!important; }
#setupHome .homeHeroMark { background:transparent!important; border:0!important; box-shadow:none!important; }
#setupHome .homeHeroLogo {
  width:min(79%,315px)!important;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.39)) drop-shadow(0 0 25px rgba(235,117,60,.13))!important;
}
#setupHome .homeHeroGlow {
  width:min(96%,420px)!important;
  background:radial-gradient(ellipse, rgba(201,105,57,.16) 0%, rgba(47,89,144,.11) 38%, transparent 73%)!important;
  filter:blur(30px)!important;
}
#setupHome .homeHeroMarkLabel { bottom:6px!important; }

/* Inner-screen chrome and headers. Keep landing navigation intentionally lighter. */
#setup:has(> .panel:not(#setupHome):not(#roomPanel):not(.hidden)) > .topbar,
#setup:has(> #roomPanel:not(.hidden)) > .topbar:not(:has(+ #setupHome:not(.hidden))) {
  background:linear-gradient(125deg,rgba(20,37,60,.92),rgba(10,22,39,.90))!important;
  border:1px solid rgba(144,177,215,.18)!important;
  box-shadow:0 13px 35px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.045)!important;
  border-radius:18px!important;
}
#setup .topbar .title,
#game .topbar .title { color:#f6f8ff!important; text-shadow:none!important; }
#setup .topbar .title::before,
#game .topbar .title::before { filter:drop-shadow(0 3px 8px rgba(0,0,0,.32))!important; }

/* Tool panels: calm, deep-space material instead of flat rectangles. */
#setup > .panel:not(#setupHome):not(#roomPanel) {
  background:
    radial-gradient(ellipse 62% 32% at 100% 0%,rgba(89,76,128,.105),transparent 80%),
    linear-gradient(160deg,rgba(17,32,53,.95),rgba(9,20,36,.98))!important;
  border:1px solid rgba(145,178,216,.22)!important;
  border-radius:26px!important;
  box-shadow:0 26px 65px rgba(0,0,0,.24),inset 0 1px 0 rgba(248,252,255,.05)!important;
}
#setup > .panel:not(#setupHome):not(#roomPanel):not(#setupProbabilityPanel) { padding:clamp(18px,2.8vw,32px)!important; }
#setup > .panel:not(#setupHome) .panelTitle {
  color:#f7f9ff!important;
  font-weight:850!important;
  letter-spacing:-.04em!important;
  line-height:1.1!important;
}
#setupGamePanel > .panelTitle,
#setupDeckPanel > .panelTitle,
#setupCardLibraryPanel > .panelTitle,
#setupDeckPricingPanel > .panelTitle {
  font-size:clamp(28px,3.1vw,38px)!important;
  margin-bottom:22px!important;
}
#setupGamePanel > .panelTitle::before,
#setupDeckPanel > .panelTitle::before,
#setupCardLibraryPanel > .panelTitle::before,
#setupDeckPricingPanel > .panelTitle::before {
  display:block;
  font-size:10px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.20em;
  color:var(--pb-ice);
  margin-bottom:12px;
}
#setupGamePanel > .panelTitle::before { content:'MATCH CONFIGURATION'; }
#setupDeckPanel > .panelTitle::before { content:'YOUR WORKSPACE / DECKS'; }
#setupCardLibraryPanel > .panelTitle::before { content:'YOUR WORKSPACE / COLLECTION'; }
#setupDeckPricingPanel > .panelTitle::before { content:'COLLECTION INTELLIGENCE'; }

/* Buttons: readable, tactile, keyboard-visible; never alter disabled semantics. */
#setup > .panel:not(#setupHome) .bigbtn,
#setup > .panel:not(#setupHome) .smallbtn,
#game .bigbtn,
#game .smallbtn,
.modalOverlay .bigbtn,
.modalOverlay .smallbtn,
.roomLobbyModal .bigbtn,
.roomLobbyModal .smallbtn {
  color:var(--pb-ink)!important;
  border:1px solid rgba(162,191,223,.27)!important;
  background:linear-gradient(155deg,rgba(42,64,89,.80),rgba(19,36,60,.92))!important;
  border-radius:13px!important;
  box-shadow:0 9px 19px rgba(0,0,0,.17),inset 0 1px 0 rgba(244,251,255,.09)!important;
  font-weight:750!important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
#setup > .panel:not(#setupHome) .bigbtn:hover:not(:disabled),
#setup > .panel:not(#setupHome) .smallbtn:hover:not(:disabled),
#game .bigbtn:hover:not(:disabled),
#game .smallbtn:hover:not(:disabled),
.modalOverlay .bigbtn:hover:not(:disabled),
.modalOverlay .smallbtn:hover:not(:disabled),
.roomLobbyModal .bigbtn:hover:not(:disabled) {
  transform:translateY(-2px)!important;
  background:linear-gradient(150deg,rgba(51,77,110,.91),rgba(23,44,72,.97))!important;
  border-color:rgba(176,218,255,.57)!important;
  box-shadow:0 14px 25px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
#setup > .panel:not(#setupHome) :is(.bigbtn,.smallbtn).good,
#game :is(.bigbtn,.smallbtn).good,
.modalOverlay :is(.bigbtn,.smallbtn).good,
.roomLobbyModal :is(.bigbtn,.smallbtn).good {
  background:linear-gradient(145deg,rgba(23,83,66,.95),rgba(13,54,46,.98))!important;
  border-color:rgba(139,228,184,.40)!important;
  color:#eafff5!important;
}
#setup > .panel:not(#setupHome) :is(.bigbtn,.smallbtn).purple,
#game :is(.bigbtn,.smallbtn).purple,
.modalOverlay :is(.bigbtn,.smallbtn).purple,
.roomLobbyModal :is(.bigbtn,.smallbtn).purple {
  background:linear-gradient(145deg,rgba(73,57,112,.92),rgba(36,31,79,.97))!important;
  border-color:rgba(184,167,251,.45)!important;
  color:#f5efff!important;
}
#setup > .panel:not(#setupHome) :is(.bigbtn,.smallbtn).danger,
#game :is(.bigbtn,.smallbtn).danger,
.modalOverlay :is(.bigbtn,.smallbtn).danger,
.roomLobbyModal :is(.bigbtn,.smallbtn).danger {
  background:linear-gradient(145deg,rgba(107,49,57,.88),rgba(58,26,39,.97))!important;
  border-color:rgba(246,156,153,.45)!important;
  color:#fff0f0!important;
}
#setup > .panel:not(#setupHome) :is(.bigbtn,.smallbtn):disabled,
#game :is(.bigbtn,.smallbtn):disabled,
.roomLobbyModal :is(.bigbtn,.smallbtn):disabled,
#roomPanel button:disabled { opacity:.46!important; cursor:not-allowed!important; transform:none!important; }

/* Inputs maintain strong contrast in every state, including room rules. */
#setup > .panel:not(#setupHome) :is(input:not([type=checkbox]):not([type=radio]), select, textarea),
#roomPanel :is(input:not([type=checkbox]),select,textarea),
.modalOverlay :is(input:not([type=checkbox]),select,textarea),
.roomLobbyModal :is(input:not([type=checkbox]),select,textarea) {
  background:#091629!important;
  color:#edf5ff!important;
  border:1px solid rgba(149,183,225,.28)!important;
  border-radius:13px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  caret-color:#fed1a4;
}
#setup > .panel:not(#setupHome) :is(input,select,textarea):focus-visible,
#roomPanel :is(input,select,textarea):focus-visible,
.modalOverlay :is(input,select,textarea):focus-visible,
.roomLobbyModal :is(input,select,textarea):focus-visible,
#setup > .panel:not(#setupHome) :is(button,[role=button]):focus-visible,
#game :is(button,[role=button]):focus-visible,
.roomLobbyModal :is(button,[role=button]):focus-visible,
.modalOverlay :is(button,[role=button]):focus-visible {
  outline:2px solid #a7dbfb!important;
  outline-offset:3px!important;
}
#setup > .panel:not(#setupHome) :is(input,textarea)::placeholder,
#roomPanel :is(input,textarea)::placeholder {color:#8ea4bf!important;}
#setup > .panel:not(#setupHome) select option {background:#0d1c32!important;color:#e9f2ff!important;}

/* Room rules setup: distinct sections, balanced type, clean modular toggles. */
#setupGamePanel .panelGrid { gap:14px!important; }
#setupGamePanel .field,
#setupDeckPanel .field,
#setupCardLibraryPanel .field,
#setupDeckPricingPanel .field {
  background:linear-gradient(148deg,rgba(26,44,69,.84),rgba(13,27,47,.90))!important;
  border:1px solid rgba(149,179,217,.19)!important;
  border-radius:18px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.043)!important;
  color:#dce9f8!important;
}
#setupGamePanel .panelGrid > .field {margin:0!important;}
#setupGamePanel .field > .subhint {color:#9daeca!important;font-size:12px!important;line-height:1.45!important;}
#setupGamePanel .matchFeatureToggle,
#setupGamePanel .matchFeatureToggleCompact {
  background:linear-gradient(145deg,rgba(31,53,79,.72),rgba(13,30,51,.9))!important;
  border:1px solid rgba(147,180,217,.19)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  border-radius:15px!important;
}
#setupGamePanel .matchFeatureToggle:hover {border-color:rgba(163,210,244,.40)!important;}
#setupGamePanel .matchFeatureCopy b {color:#f4f8ff!important;}
#setupGamePanel .matchFeatureCopy small {color:#9ab0c9!important;}
#setupGamePanel .matchFeatureSwitch {background:#3b506b!important;border-color:rgba(149,179,218,.28)!important;}
#setupGamePanel .matchFeatureToggle input:checked + .matchFeatureSwitch {
  background:linear-gradient(135deg,#80c9e8,#a28ff1)!important;
  border-color:rgba(182,223,255,.60)!important;
}
#setupGamePanel .energySetupGrid > div {
  background:rgba(8,21,39,.60)!important;border-color:rgba(150,178,212,.17)!important;
  border-radius:15px!important;
}
#setupGamePanel .panelRow {gap:12px!important;margin-top:19px!important;}

/* About / Questions / Support: editorial hierarchy with the same studio finish. */
#setup .infoScreenPanel .infoScreenHeaderRow {margin-bottom:24px!important;}
#setup .infoScreenPanel .infoScreenHeaderRow .panelTitle {
  font-size:clamp(30px,3.3vw,43px)!important;
  letter-spacing:-.052em!important;
}
#setup .infoScreenPanel .infoScreenHeaderRow .subhint {color:#a5b8d0!important;font-size:14px!important;}
#setup .infoScreenPanel .infoHeroBlock {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse 42% 100% at 100% 0%,rgba(167,101,70,.11),transparent 77%),
             linear-gradient(120deg,rgba(29,49,74,.93),rgba(12,27,47,.96))!important;
  border:1px solid rgba(161,187,220,.22)!important;
  border-radius:24px!important;
  padding:clamp(23px,3vw,39px)!important;
  box-shadow:var(--pb-shadow)!important;
}
#setup .infoScreenPanel .infoHeroBlock::before {
  content:'';position:absolute;top:0;left:36px;right:36px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(252,184,137,.53),transparent);pointer-events:none;
}
#setup .infoScreenPanel .infoHeroEyebrow {
  color:#edb58d!important;
  font-size:11px!important;
  letter-spacing:.20em!important;
}
#setup .infoScreenPanel .infoHeroTitle {
  max-width:900px!important;
  font-size:clamp(26px,3.1vw,40px)!important;
  line-height:1.11!important;
  letter-spacing:-.045em!important;
  font-weight:850!important;
}
#setup .infoScreenPanel .infoHeroText,
#setup .infoScreenPanel .infoCardCopy {color:#b8c9dd!important;line-height:1.75!important;}
#setup .infoScreenPanel .infoCardBlock {
  background:linear-gradient(155deg,rgba(28,46,69,.88),rgba(12,25,45,.92))!important;
  border:1px solid rgba(151,186,220,.20)!important;
  border-radius:20px!important;
  box-shadow:0 15px 32px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.048)!important;
  padding:clamp(19px,2.25vw,28px)!important;
}
#setup .infoScreenPanel .infoCardBlock::before {
  content:'';display:block;width:34px;height:2px;
  background:linear-gradient(90deg,#eb9e73,rgba(235,158,115,0));
  border-radius:2px;margin-bottom:16px;
}
#setup .infoScreenPanel .infoCardTitle {font-size:19px!important;letter-spacing:-.022em!important;}
#setup .infoScreenPanel :is(.infoCalloutBlock,.infoEmailFeature) {
  background:linear-gradient(145deg,rgba(24,47,65,.91),rgba(13,28,46,.95))!important;
  border:1px solid rgba(162,194,224,.23)!important;
  box-shadow:var(--pb-shadow)!important;
  border-radius:20px!important;
  padding:clamp(18px,2.5vw,30px)!important;
}
#setup .infoScreenPanel .infoEmailFeatureValue {color:#ffbd8a!important;font-size:clamp(18px,2.5vw,27px)!important;overflow-wrap:anywhere;}

/* Deck management, upload/manage and modal card set surfaces. */
#setupDeckPanel #deckList :is(.deckListCard,.deckBuilderCard),
#setupCardLibraryPanel :is(.cardLibraryTile,.cardLibraryItem,.cardLibrarySummary,.cardLibrarySetRow),
#setupDeckPricingPanel :is(.pricingHero,.pricingCard,.pricingStatCard),
.deckBuilderSection,.deckBuilderSidebar,.deckBuilderCurrentCard,.deckBuilderPoolCard {
  background:linear-gradient(152deg,rgba(28,47,74,.84),rgba(13,28,48,.93))!important;
  border:1px solid rgba(152,186,220,.21)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.045)!important;
  border-radius:17px!important;
}
#setupCardLibraryPanel .cardLibraryStats,
#setupCardLibraryPanel .cardLibrarySelectionBar {
  background:linear-gradient(140deg,rgba(27,47,75,.94),rgba(12,27,46,.97))!important;
  border:1px solid rgba(158,190,224,.25)!important;
  border-radius:16px!important;
  box-shadow:0 15px 33px rgba(0,0,0,.18)!important;
}
#setupCardLibraryPanel .cardLibrarySelectionBar {border-color:rgba(192,173,248,.39)!important;}
#setupCardLibraryPanel .cardLibrarySelectBadge.selected {
  background:#725db1!important;border-color:#d9c6ff!important;
}
#setupCardLibraryPanel .cardLibraryTile:hover {border-color:rgba(170,213,246,.47)!important;box-shadow:0 19px 40px rgba(0,0,0,.26)!important;}
#setupCardLibraryPanel .cardLibraryTileSelected {border-color:rgba(204,185,255,.84)!important;box-shadow:0 0 0 2px rgba(177,140,246,.18)!important;}
#setupDeckPanel .panelRow,
#setupCardLibraryPanel .cardLibraryTopActions {gap:10px!important;flex-wrap:wrap!important;}

/* Probability lab: refine the skin, do not touch exact-card layout, dimensions,
   card thumbnails, probability model or viewport geometry. */
#setupProbabilityPanel {
  background:linear-gradient(145deg,rgba(14,29,48,.97),rgba(7,18,33,.98))!important;
}
#setupProbabilityPanel :is(.probCard,.probStatCard,.probTopDeckPoolSummary,.probTopHistory,.probTopBreakdown) {
  background:linear-gradient(155deg,rgba(27,44,67,.87),rgba(12,25,44,.95))!important;
  border-color:rgba(148,179,217,.21)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#setupProbabilityPanel .probSectionTitle {color:#f4f7fd!important;letter-spacing:-.025em!important;}
#setupProbabilityPanel :is(.probQueryCard,.probResultTheater) {background:linear-gradient(155deg,rgba(23,41,65,.87),rgba(10,22,39,.97))!important;}
#setupProbabilityPanel :is(.probGaugeInner,.probKnownList,.probKnownRow) {border-color:rgba(155,185,220,.18)!important;}

/* Game board: premium but quiet. Preserve slot geometry and visual gameplay cues. */
#game > .topbar {
  background:linear-gradient(125deg,rgba(21,38,61,.94),rgba(9,21,39,.96))!important;
  border:1px solid rgba(152,185,219,.22)!important;
  border-radius:18px!important;
  box-shadow:var(--pb-shadow)!important;
}
#game :is(.zone,.side,.message,.battleChatPanel,.battleLaneBenchSlot,.battleLaneActiveSlot,.battleLaneMiniZone) {
  background:linear-gradient(155deg,rgba(25,42,66,.93),rgba(10,22,40,.97))!important;
  border-color:rgba(152,182,216,.20)!important;
  box-shadow:inset 0 1px 0 rgba(245,251,255,.045),0 12px 26px rgba(0,0,0,.17)!important;
}
#game :is(.zoneTitle,.zone-title,.battleChatTitle) {color:#f2f7fe!important;}
#game :is(.battleChatHeader,.battleChatForm) {
  background:rgba(16,33,56,.80)!important;border-color:rgba(151,179,219,.18)!important;
}
#game .battleChatInput {background:#091628!important;color:#f4f9ff!important;border-color:rgba(158,187,225,.29)!important;}
#game .battleChatSendBtn {background:linear-gradient(145deg,#235e4d,#124433)!important;border-color:rgba(141,218,177,.44)!important;}

/* Modal & multiplayer overlays, including dynamically constructed room actions. */
.modalOverlay .modal,
.roomLobbyOverlay .roomLobbyModal,
.cardLibraryManagerModal {
  background:radial-gradient(ellipse at 100% 0%,rgba(106,74,125,.12),transparent 47%),
             linear-gradient(150deg,#172b46,#0a192d 70%)!important;
  border:1px solid rgba(166,198,230,.28)!important;
  border-radius:24px!important;
  box-shadow:0 30px 88px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.roomLobbyOverlay,.modalOverlay {backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.roomLobbyOverlay .roomLobbyHeader {
  background:linear-gradient(120deg,rgba(41,61,86,.44),rgba(19,38,60,.38))!important;
  border-color:rgba(167,197,227,.19)!important;
}
.roomLobbyOverlay .roomLobbyKicker {color:#e6b088!important;letter-spacing:.17em!important;}
.roomLobbyOverlay .roomLobbyTitle {color:#f6f8ff!important;letter-spacing:-.035em!important;}
.roomLobbyOverlay :is(.roomBrowserCard,.roomHostRequestCard,.roomRequestSummary,.roomMyRequestPill) {
  background:linear-gradient(145deg,rgba(35,55,81,.85),rgba(14,30,52,.91))!important;
  border:1px solid rgba(151,185,224,.22)!important;
  border-radius:17px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.roomLobbyOverlay .roomMiniBtn {
  background:linear-gradient(145deg,rgba(48,70,101,.92),rgba(21,40,67,.96))!important;
  border:1px solid rgba(161,190,222,.28)!important;
  color:#ecf5ff!important;
  border-radius:11px!important;
}
.roomLobbyOverlay .roomMiniBtn.good {background:linear-gradient(145deg,#236849,#134732)!important;border-color:rgba(149,229,186,.45)!important;}
.roomLobbyOverlay .roomMiniBtn.danger {background:linear-gradient(145deg,#743d4a,#48222b)!important;border-color:rgba(245,155,151,.43)!important;}
#roomPanel .roomGrid {gap:14px!important;}
#roomPanel .roomCompactBtn {border-radius:15px!important;}

/* Small mobile and accessibility pass across the entire studio. */
@media (max-width:800px){
  #setup .infoScreenPanel .infoGridTriple {grid-template-columns:1fr!important;}
  #setup .infoScreenPanel .infoGridDual {grid-template-columns:1fr!important;}
  #setup .infoScreenPanel .infoCalloutBlock {flex-direction:column!important;align-items:flex-start!important;}
  #setup .infoScreenPanel .infoSoonAction {min-width:0!important;max-width:100%;}
  #setupGamePanel .matchFeatureToggleGrid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:570px){
  #setup > .panel:not(#setupHome):not(#roomPanel):not(#setupProbabilityPanel) {padding:16px!important;border-radius:20px!important;}
  #setupGamePanel .panelGrid {grid-template-columns:1fr!important;}
  #setupGamePanel .matchFeatureToggleGrid {grid-template-columns:1fr!important;}
  #setup .infoScreenPanel .infoScreenHeaderRow {align-items:flex-start!important;flex-wrap:wrap!important;}
  #setup .infoScreenPanel .infoHeroBlock {padding:20px!important;}
  #setup .infoScreenPanel .infoHeroTitle {font-size:clamp(24px,7vw,32px)!important;}
  #setupGamePanel .panelRow .bigbtn,
  #setupCardLibraryPanel .cardLibraryTopActions .bigbtn {flex:1 1 140px;}
}
@media (prefers-reduced-motion:reduce){
  #setup :is(.bigbtn,.smallbtn,.cardLibraryTile),
  #game :is(.bigbtn,.smallbtn),
  .roomLobbyModal :is(.bigbtn,.smallbtn) {transition:none!important;}
}

/* Disabled setup CTA should never resemble an actionable primary control. */
#setup:has(#setupHome:not(.hidden)) > #roomPanel .roomPrimaryCta.bigbtn:disabled {
  opacity:.48!important;
  color:#f2e4dc!important;
  background:linear-gradient(135deg,rgba(130,82,62,.54),rgba(93,64,58,.55))!important;
  border-color:rgba(206,158,136,.23)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  cursor:not-allowed!important;
  transform:none!important;
}