/* PARTY: the second game theme, picked from the Profile's THEME list (profile.js writes
   body[data-ui="party"]). CLASSIC is game.css itself and stays the default; everything here is
   scoped to the attribute, so with it off this file matches nothing.

   Colour only. Every rule restates a colour game.css already sets; no size, layout or motion
   changes, and the board, the table under it and the pieces are the shop's, not this file's.

   One job per colour, so a kid never has to guess:
     violet  - the surfaces: sheets, panels, the resting tiles.
     white   - every outline and ring. Gold lines read as brass on brown and go muddy on a
               bright violet.
     yellow  - "this one is picked": the selected mode, tab, head count. Violet's complement,
               so it is the loudest thing on any purple screen, the way red was on brown.
     pink    - "press me": COLLECT, START, INVITE and the other calls to action.
     gold    - coins, the title and progress only. Never a border.

   The scope adds a type and an attribute to every selector, so these outweigh game.css's own
   rules of the same shape. That also means they outweigh its STATE rules — .seat.now's seat
   colour, #guide.snk's green, the tip bubbles' kinds — so each of those is excluded with :not()
   rather than restated. */

body[data-ui="party"] {
  --bg: #3d0fa0;
  --panel: #4a17b8;
  --panel2: #5b22d6;
  --edge: #c4adff;
  --edge2: #8a5cff;
  --ink: #ffffff;
  --ink2: #dccdff;
  --gold: #ffd21f;
  --sand: #ff3d9a;
  --sand-edge: #ffffff;
  --sand-shadow: #a8105a;
  --shadow: #22076a;
  --ring: #ffffff;
  --pick: linear-gradient(180deg, #ffe04a, #ffb81a);
  --pick-edge: #c47a00;
  --pick-ink: #3a0c8a;
}

/* ---------------------------------------------------------------- surfaces */

body[data-ui="party"] #hud,
body[data-ui="party"] #status { text-shadow: 0 2px 0 var(--shadow); }
body[data-ui="party"] .rcount .rc.rc-card { color: #efe4ff; }
body[data-ui="party"] #tally { color: #b8a2ee; }
body[data-ui="party"] .seat { background: rgba(34, 7, 106, .8); }
body[data-ui="party"] .seat:not(.now) { border-color: rgba(255, 255, 255, .3); }
body[data-ui="party"] .seat.now { background: rgba(62, 18, 160, .96); }
body[data-ui="party"] .sav,
body[data-ui="party"] .ssec,
body[data-ui="party"] .chip .nt { background: #1c0558; }
body[data-ui="party"] .etgt:not(.on) { border-color: rgba(255, 255, 255, .3); }
body[data-ui="party"] .eitem { background: radial-gradient(circle at 50% 40%, #6a2fd6, #3d0fa0); }
body[data-ui="party"] .mini { background: rgba(74, 23, 184, .72); }
body[data-ui="party"] #cardPanel { box-shadow: 0 8px 22px rgba(20, 4, 60, .55); }
body[data-ui="party"] #guide { background: linear-gradient(180deg, #5b22d6, #3d0fa0); }
/* All four sides: the wide tier boxes the guide in gold, where the phone only tops it. */
body[data-ui="party"] #guide:not(.snk) { border-color: var(--ring); }
body[data-ui="party"] .sheet { background: linear-gradient(180deg, #8246f7, #5520d0); }
body[data-ui="party"] #leaveTitle { color: #fff; }
body[data-ui="party"] #scard { background: linear-gradient(180deg, #7a3cf0, #4a17b8); }
body[data-ui="party"] .codebtn { background: linear-gradient(180deg, #6a2fd6, #4a17b8); }
body[data-ui="party"] .obtn:not(.go),
body[data-ui="party"] .mopt:not(.sel) { color: #efe4ff; }
body[data-ui="party"] .sact.poor { border-color: #5a3a9a; color: #a592d6; }

body[data-ui="party"] #shopGrid::-webkit-scrollbar-track,
body[data-ui="party"] #style::-webkit-scrollbar-track { background: rgba(40, 8, 120, .9); }
body[data-ui="party"] #shopGrid::-webkit-scrollbar-thumb,
body[data-ui="party"] #style::-webkit-scrollbar-thumb { border-color: rgba(40, 8, 120, .9); }

/* ---------------------------------------------------------------- the home */

/* Same checker, same lamp, violet under it. The squares are a white tint here, not the board's
   own tiles: menu.js writes those inline, and a cream wash on violet reads as dirty. */
body[data-ui="party"] #menu {
  --menu-t0: rgba(255, 255, 255, .15) !important;
  --menu-t1: rgba(255, 255, 255, .04) !important;
  --menu-line: rgba(255, 255, 255, .09);
  background-image:
    radial-gradient(120% 68% at 50% 40%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(to right, var(--menu-line) 0 1px, transparent 1px var(--menu-tile)),
    repeating-linear-gradient(to bottom, var(--menu-line) 0 1px, transparent 1px var(--menu-tile)),
    repeating-conic-gradient(from 0deg at 0 0, var(--menu-t0) 0% 25%, var(--menu-t1) 0% 50%),
    linear-gradient(180deg, #8c4dff, #5b22d6);
}
body[data-ui="party"] #meBtn,
body[data-ui="party"] .hpill { background: rgba(40, 8, 120, .5); border-color: rgba(255, 255, 255, .45); }
body[data-ui="party"] #heroTitle h1 { text-shadow: 0 3px 0 var(--shadow), 0 0 26px rgba(255, 210, 31, .35); }
body[data-ui="party"] #heroTitle p { color: #fff; text-shadow: 0 1px 0 var(--shadow); }
body[data-ui="party"] #heroMark img { border-color: rgba(255, 255, 255, .7); box-shadow: 0 5px 0 var(--shadow), 0 0 26px rgba(255, 255, 255, .2); }

/* The three doors are one violet, as the brown ones were one brown; the picked one goes yellow. */
body[data-ui="party"] #modeRow .mopt {
  border-color: rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, #6f35e6, #4f1fbd);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 4px 0 var(--shadow);
}
body[data-ui="party"] #modeRow .mopt:active { box-shadow: 0 1px 0 var(--shadow); }
body[data-ui="party"] #modeRow .dico { color: #e6dbff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }

body[data-ui="party"] #modeRow .mopt.sel {
  border-color: var(--ring);
  background: var(--pick);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--pick-edge), 0 0 0 4px rgba(255, 255, 255, .22);
  color: var(--pick-ink);
}
body[data-ui="party"] #modeRow .mopt.sel .dnm,
body[data-ui="party"] #modeRow .mopt.sel .dico { color: var(--pick-ink); }
body[data-ui="party"] #modeRow .mopt.sel .dsub { color: #6a3fb8; }
body[data-ui="party"] #modeRow .mopt.sel .dico { background: rgba(255, 255, 255, .45); border-color: rgba(58, 12, 138, .25); }

/* INVITE is an action, not a mode, so it is pink like everything else you press. */
body[data-ui="party"] #modeRow .mopt.invite {
  border-color: var(--ring);
  background: linear-gradient(180deg, #ff5cab, #e02a86);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 4px 0 var(--sand-shadow);
}
body[data-ui="party"] #modeRow .mopt.invite .dnm,
body[data-ui="party"] #modeRow .mopt.invite .dico { color: #fff; }
body[data-ui="party"] #modeRow .mopt.invite .dico { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }

body[data-ui="party"] #rail { background: linear-gradient(180deg, #4a14b0, #370d92); border-top-color: rgba(255, 255, 255, .25); }
body[data-ui="party"] .rp:active { background: rgba(255, 255, 255, .14); }
body[data-ui="party"] .rp.on { background: rgba(255, 255, 255, .12); }
body[data-ui="party"] .rp .dot { border-color: var(--shadow); animation-name: pingParty; }
@keyframes pingParty {
  0% { box-shadow: 0 0 0 0 rgba(255, 61, 154, .6); }
  100% { box-shadow: 0 0 0 7px rgba(255, 61, 154, 0); }
}

/* ---------------------------------------------------------------- press me: pink */

body[data-ui="party"] .cta:not(.ghost),
body[data-ui="party"] .obtn.go,
body[data-ui="party"] .dtk-go { color: #fff; }
body[data-ui="party"] .obtn.go.busy::after { border-top-color: #fff; }

/* ---------------------------------------------------------------- picked: yellow, ringed white */

body[data-ui="party"] .stab.sel,
body[data-ui="party"] .etab.on,
body[data-ui="party"] .mopt.sel,
body[data-ui="party"] .btn.on,
body[data-ui="party"] .topt.sel {
  background: var(--pick);
  border-color: var(--ring);
  color: var(--pick-ink);
  box-shadow: 0 3px 0 var(--pick-edge);
}

/* Everything game.css rings in gold is ringed in white. */
body[data-ui="party"] .etgt.on { border-color: var(--ring); background: rgba(255, 255, 255, .14); }
body[data-ui="party"] .chip.sel,
body[data-ui="party"] .pk.sel,
body[data-ui="party"] .chip.fresh,
body[data-ui="party"] #styleBtn.pillhint,
body[data-ui="party"] .dtask.done:not(.paid) { border-color: var(--ring); }
body[data-ui="party"] .sitem.eq,
body[data-ui="party"] .srow.eq { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
body[data-ui="party"] .dslot.today { border-color: var(--ring); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
body[data-ui="party"] .tut-bubble:not(.snk):not(.card) { border-color: var(--ring); }
body[data-ui="party"] .pfriend { border-color: var(--ring); background: rgba(255, 255, 255, .12); }
body[data-ui="party"] #profTheme[aria-expanded="true"] { border-color: var(--ring); }
body[data-ui="party"] #themeList { border-color: rgba(255, 255, 255, .45); box-shadow: 0 6px 16px rgba(20, 4, 60, .45); }
body[data-ui="party"] #dailyGo.done { border-color: rgba(255, 255, 255, .5); color: #fff; }

/* ---------------------------------------------------------------- daily */

body[data-ui="party"] #climbMedal::before {
  background:
    radial-gradient(70% 70% at 50% 34%, rgba(255, 210, 31, .22), rgba(255, 210, 31, 0) 70%),
    linear-gradient(180deg, #6a2fd6, #3d0fa0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 6px 18px rgba(0, 0, 0, .3);
}
body[data-ui="party"] #climbMedal.got::before { animation-name: medalGlowParty; }
@keyframes medalGlowParty {
  0% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 0 0 0 rgba(255, 255, 255, .5); }
  100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 0 0 26px rgba(255, 255, 255, 0); }
}
body[data-ui="party"] .cm-track { stroke: rgba(255, 255, 255, .22); }
body[data-ui="party"] .dt-coin { border-color: #8a5cff; background: linear-gradient(180deg, #5b22d6, #3d0fa0); }
body[data-ui="party"] .dtok.past .dt-coin,
body[data-ui="party"] .dtok.past .dt-coin svg,
body[data-ui="party"] .dtok.today .dt-coin { color: #3d0fa0; }
body[data-ui="party"] .dtok.today .dt-coin { border-color: var(--ring); }