/* D12 PLAYERS TURN v1.5 — liquid-glass navigation, rackmaster live-match lighting and credits */

/* Large glossy/back-lit main navigation actions */
.nav{
  gap:12px!important;
  padding:12px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 18px 44px rgba(0,0,0,.20)!important;
  overscroll-behavior-x:contain;
}
.nav button{
  position:relative;
  isolation:isolate;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:118px!important;
  min-height:94px!important;
  padding:11px 13px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:22px!important;
  color:var(--text)!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  background:linear-gradient(145deg,rgba(255,255,255,.145),rgba(255,255,255,.035))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 25px rgba(0,0,0,.18),0 0 20px color-mix(in srgb,var(--accent) 9%,transparent)!important;
  backdrop-filter:blur(22px) saturate(155%);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  overflow:hidden!important;
  flex:0 0 auto!important;
}
.nav button::before{
  content:"";
  position:absolute;
  inset:-45% 35% 55% -35%;
  z-index:-1;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.30),transparent);
  transform:rotate(9deg);
  pointer-events:none;
}
.nav button span{
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  font-size:27px!important;
  line-height:1!important;
  color:#fff!important;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.52),rgba(255,255,255,.13) 42%,rgba(0,0,0,.18) 78%)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50),0 0 22px color-mix(in srgb,var(--accent2) 42%,transparent),0 7px 18px rgba(0,0,0,.24)!important;
  text-shadow:0 0 14px rgba(255,255,255,.75);
}
.nav button:hover,.nav button.active{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.20))!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 19%,rgba(255,255,255,.12)),rgba(255,255,255,.045))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),0 0 34px color-mix(in srgb,var(--accent) 23%,transparent),0 13px 30px rgba(0,0,0,.23)!important;
}
.nav button.active span{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.56),0 0 14px var(--accent),0 0 30px color-mix(in srgb,var(--accent) 55%,transparent),0 8px 20px rgba(0,0,0,.24)!important;
}

/* High-contrast theme selector in the top-right control group */
.top-actions .mini-select{
  min-width:132px;
  background:#f2f3f4!important;
  color:#111!important;
  border:1px solid rgba(255,255,255,.70)!important;
  box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(0,0,0,.25)!important;
  font-weight:800;
}
.top-actions .mini-select option{background:#f2f3f4!important;color:#111!important}
html[data-theme="light"] .top-actions .mini-select{background:#171b20!important;color:#fff!important;border-color:#171b20!important}
html[data-theme="light"] .top-actions .mini-select option{background:#171b20!important;color:#fff!important}

/* Rackmaster table status — red when idle, green when a match is live */
.rack-card .table-head h2{
  display:flex;
  align-items:center;
  gap:10px;
}
.rack-card .table-head h2::before{
  content:"";
  width:13px;
  height:13px;
  flex:0 0 13px;
  border-radius:50%;
  background:#ff4352;
  box-shadow:0 0 0 4px rgba(255,67,82,.10),0 0 14px #ff4352,0 0 28px rgba(255,67,82,.62);
}
.rack-card.table-live .table-head h2::before,
.rack-card:has(.match-box) .table-head h2::before{
  background:#42f59a;
  box-shadow:0 0 0 4px rgba(66,245,154,.11),0 0 15px #42f59a,0 0 34px rgba(66,245,154,.74);
  animation:v15LiveDot 1.25s ease-in-out infinite;
}

/* Elaborate active-play cell after Start Match creates the realtime in-progress match */
.rack-card.table-live .match-box,
.rack-card:has(.match-box) .match-box{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(79,245,157,.48)!important;
  background:
    radial-gradient(circle at 50% -20%,rgba(82,255,171,.22),transparent 48%),
    linear-gradient(145deg,rgba(26,93,65,.36),rgba(8,24,21,.82))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 36px rgba(71,245,156,.07),
    0 0 0 1px rgba(72,246,156,.12),
    0 0 30px rgba(72,246,156,.22),
    0 18px 42px rgba(0,0,0,.25)!important;
  animation:v15MatchGlow 2.2s ease-in-out infinite;
}
.rack-card.table-live .match-box::before,
.rack-card:has(.match-box) .match-box::before{
  content:"ACTIVE PLAY";
  position:absolute;
  top:10px;
  right:11px;
  padding:5px 9px;
  border-radius:999px;
  font-size:9px;
  font-weight:950;
  letter-spacing:.13em;
  color:#04160e;
  background:#54f5a0;
  box-shadow:0 0 15px rgba(84,245,160,.80);
}
.rack-card.table-live .match-box .versus,
.rack-card:has(.match-box) .match-box .versus{
  position:relative;
  margin-top:23px!important;
  padding:18px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 24px rgba(91,252,174,.08);
}
.rack-card.table-live .match-box .versus b,
.rack-card:has(.match-box) .match-box .versus b{
  font-size:clamp(18px,2vw,26px)!important;
  font-weight:950!important;
  letter-spacing:.035em;
  text-shadow:0 0 15px rgba(255,255,255,.20),0 0 24px rgba(82,245,160,.20);
}
.rack-card.table-live .match-box .versus strong,
.rack-card:has(.match-box) .match-box .versus strong{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#07150f;
  background:radial-gradient(circle at 30% 25%,#fff,#70f2ad 48%,#30b973 100%);
  box-shadow:inset 0 1px 0 #fff,0 0 18px #46f39a,0 0 34px rgba(70,243,154,.58);
  font-size:12px!important;
}

/* Product/designer credits */
.app-credit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:18px 0 6px;
  padding:10px 14px;
  border-radius:18px;
  text-align:center;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 10px 26px rgba(0,0,0,.13)!important;
}
.credit-cuestrokes-logo{
  width:118px;
  height:58px;
  object-fit:contain;
  object-position:center;
  flex:0 0 auto;
  border-radius:10px;
}
.credit-copy{
  max-width:820px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  letter-spacing:.025em;
}
.login-credit{
  margin-top:18px;
  padding:10px;
  flex-direction:column;
}
.login-credit .credit-cuestrokes-logo{width:150px;height:72px}
.player-credit{margin-inline:0}

@keyframes v15LiveDot{50%{opacity:.62;transform:scale(.84)}}
@keyframes v15MatchGlow{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 42px rgba(71,245,156,.10),0 0 0 1px rgba(72,246,156,.18),0 0 42px rgba(72,246,156,.31),0 18px 46px rgba(0,0,0,.26)}}

/* Device containment */
@media(max-width:980px){
  .nav button{min-width:108px!important;min-height:88px!important}
  .nav button span{width:42px!important;height:42px!important;font-size:24px!important}
  .app-credit{flex-wrap:wrap}
}
@media(max-width:620px){
  .nav{gap:9px!important;padding:9px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .nav button{min-width:96px!important;min-height:82px!important;padding:8px 9px!important;font-size:10.5px}
  .nav button span{width:39px!important;height:39px!important;font-size:22px!important;border-radius:14px!important}
  .top-actions .mini-select{max-width:132px;min-width:112px}
  .rack-card .match-box .versus{padding:13px 8px!important}
  .rack-card .match-box .versus b{font-size:13px!important}
  .rack-card .match-box .versus strong{width:34px;height:34px;font-size:9px!important}
  .app-credit{flex-direction:column;gap:7px;padding:9px 10px;margin-top:12px}
  .credit-cuestrokes-logo{width:132px;height:62px}
  .credit-copy{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){
  .rack-card.table-live .match-box,.rack-card:has(.match-box) .match-box,.rack-card.table-live .table-head h2::before,.rack-card:has(.match-box) .table-head h2::before{animation:none!important}
  .nav button{transition:none!important}
}