/* ===========================================================
   LudoX — house theme
   Matches the home screen: dark-pink field, gold furniture,
   chunky pressable 3D controls. Loaded last so it wins.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Outfit:wght@500;600;700;800&display=swap');

:root{
  --lx-pink1:#E0247E; --lx-pink2:#96114F; --lx-pink3:#5A0730;
  --lx-deep :#240418; --lx-deep2:#3E0522; --lx-panel:#34051C;
  --lx-gold1:#FFF0BE; --lx-gold2:#FFD35C; --lx-gold3:#E8A210; --lx-gold4:#9A6404;
  --lx-ink  :#3E0522; --lx-soft :#E06AAA;
}

/* ---------- page field ---------- */
/* the board field is defined in index.html so it can be a single
   fixed layer that never adds scroll height */
/* the area outside the phone column; index.html sets the same tone */
html,body{background:#160310}
body{
  font-family:'Outfit',system-ui,sans-serif !important;
  background:
    radial-gradient(78% 42% at 50% 32%,#E0247E 0%,#B01464 34%,#7C0C46 66%,#440726 88%,#240418 100%) !important;
}
.screen{z-index:2}

/* ---------- headings ---------- */
.title,h2.title{
  font-family:'Baloo 2',cursive !important;font-weight:800 !important;
  color:#fff !important;letter-spacing:.02em;
  text-shadow:-3px 0 0 var(--lx-ink),3px 0 0 var(--lx-ink),0 -3px 0 var(--lx-ink),
              0 3px 0 var(--lx-ink),0 7px 0 rgba(0,0,0,.4) !important;
}
.nxRibbon{
  font-family:'Baloo 2',cursive !important;font-weight:800 !important;
  background:linear-gradient(180deg,var(--lx-gold1),var(--lx-gold2) 46%,var(--lx-gold3)) !important;
  color:#4A2A00 !important;border:0 !important;border-radius:16px !important;
  padding:10px 26px !important;letter-spacing:.06em;
  box-shadow:0 6px 0 var(--lx-gold4),0 12px 14px rgba(0,0,0,.6),
             inset 0 3px 0 rgba(255,255,255,.9) !important;text-shadow:none !important;
}

/* ---------- buttons ---------- */
.btn{
  font-family:'Baloo 2',cursive !important;font-weight:800 !important;
  border:0 !important;border-radius:24px !important;letter-spacing:.02em;
  padding:15px 20px !important;text-shadow:0 2px 0 rgba(0,0,0,.32) !important;
}
.btn::before{border-radius:24px !important;inset:3px 3px 52% 3px !important}
.btn:active{transform:translateY(5px) !important}
.b-green{background:linear-gradient(180deg,#8CF0A4,#22A84A 54%,#158A39) !important;
  box-shadow:0 7px 0 #0F6B2C,0 13px 0 #0A4A1E,0 20px 20px -8px rgba(0,0,0,.7) !important}
.b-blue {background:linear-gradient(180deg,#8CD0FF,#2F8FE8 54%,#1668B8) !important;
  box-shadow:0 7px 0 #124A84,0 13px 0 #0C3260,0 20px 20px -8px rgba(0,0,0,.7) !important}
.b-gold {background:linear-gradient(180deg,var(--lx-gold1),var(--lx-gold2) 54%,var(--lx-gold3)) !important;
  color:#4A2A00 !important;text-shadow:0 1px 0 rgba(255,255,255,.6) !important;
  box-shadow:0 7px 0 var(--lx-gold4),0 13px 0 #6E4404,0 20px 20px -8px rgba(0,0,0,.7) !important}
.b-red  {background:linear-gradient(180deg,#FF97A6,#E8344E 54%,#C11830) !important;
  box-shadow:0 7px 0 #8A0F20,0 13px 0 #5E0A16,0 20px 20px -8px rgba(0,0,0,.7) !important}
.b-gray {background:linear-gradient(180deg,#C79ABA,#8A4E72 54%,#5E2848) !important;
  box-shadow:0 7px 0 #3E0522,0 13px 0 #2A0316,0 20px 20px -8px rgba(0,0,0,.7) !important}

/* ---------- panels, chips, cards ---------- */
.chip,.slot,.mbox,.tile,.tileWide,.nxBar,.hmCard,.hmWide,.hmBanner,#myCard,#tokBal{
  border-radius:22px !important;
  background:linear-gradient(168deg,var(--lx-pink1),var(--lx-pink2) 46%,var(--lx-pink3)) !important;
  border:3px solid var(--lx-gold3) !important;color:#fff !important;
  box-shadow:0 8px 0 #4E1A02,0 16px 18px rgba(0,0,0,.7),inset 0 3px 0 rgba(255,255,255,.35) !important;
}
.mbox{background:linear-gradient(178deg,#5A0730,#34051C 70%) !important;border-width:4px !important}
#tokBal{padding:8px 18px !important;font-weight:800 !important;font-family:'Baloo 2',cursive !important}

.iconRound,.iconbtn,.cbtn{
  border-radius:50% !important;border:0 !important;
  background:linear-gradient(180deg,#8A4E72,#3E0522) !important;color:#FFE9A6 !important;
  box-shadow:0 5px 0 #240418,0 10px 12px rgba(0,0,0,.65),inset 0 3px 0 rgba(255,255,255,.28) !important;
}
.iconbtn:active,.cbtn:active,.iconRound:active{transform:translateY(4px)}

/* segmented selectors — player count / bet */
.seg{gap:10px !important}
.seg button{
  font-family:'Baloo 2',cursive !important;font-weight:800 !important;
  border:0 !important;border-radius:16px !important;color:#FFE9C8 !important;
  background:linear-gradient(180deg,#8A4E72,#3E0522) !important;
  box-shadow:0 5px 0 #240418,0 9px 10px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.25) !important;
}
.seg button.sel{
  color:#4A2A00 !important;
  background:linear-gradient(180deg,var(--lx-gold1),var(--lx-gold2) 52%,var(--lx-gold3)) !important;
  box-shadow:0 5px 0 var(--lx-gold4),0 10px 12px rgba(0,0,0,.6),inset 0 3px 0 rgba(255,255,255,.9) !important;
}
/* The friends room takes its colours from the #roomSeg / #roomBetSeg id
   rules, which are the same ones the online screens use. Only the lift on
   selection had to be matched — the room was scaling up where the online
   screens lift by 3px. */
#scrRoom .seg button.sel{transform:translateY(-3px) !important}
#scrRoom .seg button:active{transform:translateY(4px) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.6) !important}
#cntSeg button,#onlineSeg button,#roomSeg button{width:52px !important;height:52px !important;font-size:20px !important}
#betSeg button,#roomBetSeg button{width:64px !important;height:52px !important;font-size:18px !important}

.htoggle button{
  font-family:'Baloo 2',cursive !important;font-weight:800 !important;border:0 !important;
  border-radius:14px !important;color:#FFE9C8 !important;
  background:linear-gradient(180deg,#8A4E72,#3E0522) !important;
  box-shadow:0 4px 0 #240418,inset 0 2px 0 rgba(255,255,255,.25) !important;
}
.htoggle button.sel{color:#4A2A00 !important;
  background:linear-gradient(180deg,var(--lx-gold1),var(--lx-gold2) 52%,var(--lx-gold3)) !important;
  box-shadow:0 4px 0 var(--lx-gold4),inset 0 3px 0 rgba(255,255,255,.9) !important}

input,textarea,select{
  border-radius:16px !important;border:3px solid var(--lx-gold3) !important;
  background:rgba(36,4,24,.75) !important;color:#fff !important;
  font-family:'Outfit',sans-serif !important;font-weight:600 !important;
}
input::placeholder{color:#C58FAE !important}

/* ---------- chat ---------- */
.chatHead{background:linear-gradient(180deg,#7C0C46,#3E0522) !important;
  border-bottom:3px solid var(--lx-gold3) !important}
.chatRow{background:linear-gradient(180deg,#5A0730,#240418) !important;
  border-top:3px solid var(--lx-gold3) !important;padding:10px !important}
#dmMsgs,#msgs{background:transparent !important}
#dmMsgs>div,#msgs>div{border-radius:16px !important}
.nbadge{background:linear-gradient(180deg,#FF9184,#E23A2A) !important;
  box-shadow:0 3px 0 #9E1D12 !important;border:2px solid #240418 !important;font-weight:800 !important}

/* ---------- game screen ---------- */
.topbar{background:linear-gradient(180deg,rgba(90,7,48,.9),rgba(36,4,24,.55)) !important;
  border-bottom:3px solid var(--lx-gold3) !important}
#boardWrap{border-radius:22px !important;
  box-shadow:0 10px 0 #4E1A02,0 22px 26px rgba(0,0,0,.8),0 0 0 4px var(--lx-gold3) !important}
.podRow .pod,.podAv{border-radius:18px}

/* ---------- spin + rewards ---------- */
.lxWheelWrap{position:relative;width:260px;height:290px;margin:6px auto 10px}
.lxWheel{position:absolute;top:22px;left:5px;width:250px;height:250px;border-radius:50%;
  border:9px solid var(--lx-gold3);
  background:conic-gradient(#FFE07A 0 45deg,#B01464 45deg 90deg,#FFE07A 90deg 135deg,#B01464 135deg 180deg,
    #FFE07A 180deg 225deg,#B01464 225deg 270deg,#FFE07A 270deg 315deg,#B01464 315deg 360deg);
  box-shadow:0 12px 0 #7A4E02,0 22px 22px rgba(0,0,0,.75),inset 0 0 30px rgba(0,0,0,.45);
  transition:transform 4.6s cubic-bezier(.15,.85,.2,1)}
.lxWheel span{position:absolute;left:50%;top:50%;transform-origin:0 0;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:17px;color:#3E0522;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.lxHub{position:absolute;top:132px;left:132px;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:3;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:19px;color:#5A0730;
  background:radial-gradient(circle at 36% 28%,#FFF6DC,var(--lx-gold2) 50%,#B57E06);
  border:4px solid #7A4E02;box-shadow:0 5px 0 #5A3A02,inset 0 3px 0 rgba(255,255,255,.9)}
.lxPin{position:absolute;top:0;left:50%;margin-left:-16px;width:0;height:0;z-index:4;
  border-left:16px solid transparent;border-right:16px solid transparent;border-top:32px solid #FFF6DC;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.8))}
.lxDays{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(340px,92vw);margin-bottom:14px}
.lxDay{border-radius:16px;padding:10px 4px;text-align:center;
  background:linear-gradient(180deg,#8A4E72,#3E0522);border:3px solid var(--lx-gold4);
  box-shadow:0 5px 0 #240418,inset 0 2px 0 rgba(255,255,255,.2)}
.lxDay b{display:block;font-family:'Baloo 2',cursive;font-size:13px;color:#FFD9A6;letter-spacing:.08em}
.lxDay i{display:block;font-style:normal;font-family:'Baloo 2',cursive;font-weight:800;
  font-size:20px;color:#fff;margin-top:3px}
.lxDay.done{background:linear-gradient(180deg,#8CF0A4,#1FA347);border-color:#0F6B2C}
.lxDay.done b,.lxDay.done i{color:#0B3A1A}
.lxDay.today{background:linear-gradient(180deg,var(--lx-gold1),var(--lx-gold3));border-color:#7A4E02;
  animation:lxPulse 1.4s ease-in-out infinite}
.lxDay.today b,.lxDay.today i{color:#4A2A00}
@keyframes lxPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.lxNote{font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;color:#FFD9A6;
  margin-bottom:12px;text-align:center;max-width:min(340px,92vw)}
@media (prefers-reduced-motion:reduce){.lxDay.today{animation:none}}

/* ===========================================================
   MOBILE FIRST — everything below is sized for a phone and
   scales up, so nothing overflows on a 360px screen.
   =========================================================== */
html,body{overscroll-behavior:none}
/* Scrolling is decided in index.html now: short screens sit still, only the
   genuinely tall ones scroll. Forcing auto here gave every screen a full
   viewport of empty space to drag through. */
.screen{
  padding:10px 12px calc(14px + env(safe-area-inset-bottom)) 12px !important;
  -webkit-overflow-scrolling:touch;
}
.screen>*{max-width:100%}
img,svg{max-width:100%}

/* the two segmented pickers now hold six chips — let them wrap */
.seg{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;
  gap:8px !important;max-width:min(360px,94vw) !important;margin-left:auto;margin-right:auto}
#cntSeg button,#onlineSeg button,#roomSeg button{
  width:46px !important;height:46px !important;font-size:18px !important;flex:0 0 auto}
#betSeg button,#roomBetSeg button{width:58px !important;height:46px !important;font-size:17px !important}

/* setup list: six slots must stay reachable */
.slots{width:min(360px,94vw) !important;max-height:52vh !important;
  overflow-y:auto !important;-webkit-overflow-scrolling:touch}
.slot{padding:8px 10px !important}
.slot input{min-width:0 !important;flex:1 1 60px !important}
.slot .htoggle button{padding:6px 9px !important;font-size:11px !important}

.menu{width:min(340px,92vw) !important;gap:11px !important}
.btn{width:100% !important;font-size:16px !important;padding:13px 14px !important}
.title,h2.title{font-size:24px !important;margin-bottom:10px !important}
.nxRibbon{font-size:13px !important;padding:8px 18px !important}
.logoImg{width:min(200px,58vw) !important;height:auto !important}

/* game screen fits the viewport without scrolling */
/* space-between pushed the board to the bottom once the pod rows were hidden
   for the ring layout; the board is centred in index.html instead */
/* Equal top and bottom padding so the board centres between the pinned
   header and the footer. This file loads last, so the value must be right
   here — anything set in index.html loses to it. */
/* the header is pinned at the top and each profile carries buttons that
   stick out above it, so the row needs more clearance than the header's
   own height; the bottom matches so the board still centres */
/* Reserve room for the pinned header, but scale it — a flat 74px top and
   bottom is fine on a tall phone and eats a small one alive. */
#scrGame{padding:clamp(38px,7vh,74px) 0 clamp(38px,7vh,74px) !important;
  overflow:hidden !important}
/* the game header spans the full column so it reaches both edges */
.topbar{padding:6px 8px !important}
#scrGame .topbar{padding:6px 6px !important;max-width:none !important;width:100% !important}
/* horizontal centring only — the vertical margins are set in index.html so
   the board can centre itself in the space left by the header and footer */
#boardWrap{margin-left:auto !important;margin-right:auto !important}
.podRow{gap:6px !important;padding:4px 6px !important;flex-wrap:wrap !important}

/* chat fills the screen properly on a phone */
#scrDM{padding:0 !important}
/* room at the bottom for the message row, which is pinned to the footer */
#dmMsgs{padding:10px 10px 78px !important}
.chatRow input{font-size:15px !important;padding:11px 14px !important}

/* spin + rewards */
.lxWheelWrap{width:min(250px,74vw) !important;height:min(278px,82vw) !important}
.lxWheel{width:min(238px,70vw) !important;height:min(238px,70vw) !important;
  top:6% !important;left:2% !important}
.lxHub{top:50% !important;left:50% !important}
.lxDays{grid-template-columns:repeat(4,1fr) !important;width:min(340px,94vw) !important}
.lxDay i{font-size:17px !important}

@media (max-width:359px){
  #cntSeg button,#onlineSeg button,#roomSeg button{width:40px !important;height:40px !important;font-size:16px !important}
  .btn{font-size:15px !important;padding:12px !important}
  .title,h2.title{font-size:21px !important}
}
@media (min-width:700px){
  .screen{padding:20px !important}
  .menu{width:340px !important}
}
/* landscape phones: keep the board on screen */
@media (max-height:520px){
  :root{--bw:min(86vw,44vh) !important}
  .title,h2.title{font-size:19px !important;margin-bottom:6px !important}
  .logoImg{width:150px !important}
}

/* The Login / Sign-up styles now live inline in index.html,
   right beside their markup, so a cached copy of this file can
   never leave those screens unstyled. */

/* The Settings, Store, footer, Nearby and Chat styles now live inline in
   index.html, beside their own markup, so a cached copy of this file can
   never leave those screens unstyled. */

/* ===========================================================
   SNAKES SECTION OVERRIDES
   These live here because this file loads after index.html, and the rules they
   replace are in it with !important.
   =========================================================== */
#scrMode .nxRibbon#modeTitle{
  font-size:23px !important;letter-spacing:.06em;padding:10px 22px !important;
  font-family:'Baloo 2',system-ui,cursive;font-weight:800;
  background:linear-gradient(180deg,#FFF6DC,#FFD35C 46%,#E8A210) !important;
  color:#1B4D2E !important;
  text-shadow:0 2px 0 rgba(255,255,255,.65);
  border:3px solid #1FA05A !important;border-radius:999px !important;
  box-shadow:0 6px 0 #0E5E36,0 12px 16px -6px rgba(0,0,0,.75),
             inset 0 2px 0 rgba(255,255,255,.85) !important}
/* ===========================================================
   SNAKES SECTION — the surfaces still coming out dark pink
   (player rows, number pills, bet pills, token chip, lobby cards, notes)
   =========================================================== */
/* Panels and player rows: a deep pine, several shades below the field. Navy
   read cold and brown read muddy — staying in the same family but much darker
   lets the green buttons pop without a second colour arguing with the theme. */
body.snlSkin .setupCard,
body.snlSkin .slot,
body.snlSkin .nx .slot,
body.snlSkin .nxBar,
body.snlSkin .htoggle button{
  background:linear-gradient(160deg,#1C4438,#102A22 52%,#071612) !important;
  border-color:rgba(255,211,92,.5) !important;
  box-shadow:0 5px 0 #050F0C,0 12px 16px -7px rgba(0,0,0,.85),
             inset 0 2px 0 rgba(255,255,255,.16) !important}
body.snlSkin .seg button,
body.snlSkin #cntSeg button,body.snlSkin #onlineSeg button,
body.snlSkin #roomSeg button,body.snlSkin #betSeg button,
body.snlSkin #roomBetSeg button,body.snlSkin #roomLiveSeg button{
  background:linear-gradient(180deg,#27B368,#0B4A29) !important;
  color:#EAFBF0 !important;
  box-shadow:0 5px 0 #052A18,0 9px 10px rgba(0,0,0,.6),
             inset 0 2px 0 rgba(255,255,255,.22) !important}
/* the selected pill keeps the same shape, in green */
/* the chosen one goes amber — against all that green it is unmistakable */
body.snlSkin .seg button.sel{
  background:linear-gradient(180deg,#FFE9A6,#FFB627 50%,#E07A05) !important;
  color:#4A2A00 !important;
  border:2px solid #FFF6DC !important;
  box-shadow:0 5px 0 #9A5200,0 10px 14px rgba(0,0,0,.65),
             inset 0 3px 0 rgba(255,255,255,.9),0 0 18px rgba(255,182,39,.55) !important;
  transform:translateY(-3px) !important}
body.snlSkin #tokBal,body.snlSkin #roomBal{
  background:linear-gradient(168deg,#1B8A50,#06331C) !important;
  border:2px solid rgba(140,240,164,.45);color:#EAFBF0 !important}
body.snlSkin .lxNote,body.snlSkin .nxRibbon:not(#modeTitle){
  background:linear-gradient(168deg,#1B8A50,#06331C) !important;color:#EAFBF0 !important}
body.snlSkin .slot input{color:#EAFBF0 !important}
body.snlSkin .title{color:#DFF7E7 !important}

/* ---------- the snakes menu's spin corner: same wheel as the home screen ---- */
.miniSpin{position:relative;width:38px;height:46px;display:block}
.msWheel{position:absolute;inset:0;border-radius:50%;border:3px solid #E8A210;
  background:conic-gradient(#FFE07A 0 45deg,#8C0F4E 45deg 90deg,#FFE07A 90deg 135deg,
    #8C0F4E 135deg 180deg,#FFE07A 180deg 225deg,#8C0F4E 225deg 270deg,
    #FFE07A 270deg 315deg,#8C0F4E 315deg 360deg);
  box-shadow:0 3px 0 #7A4E02,inset 0 0 8px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.35);
  animation:wspin 7s linear infinite}
@keyframes wspin{to{transform:rotate(360deg)}}
.msHub{position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border-radius:50%;font-style:normal;font-size:5px;font-weight:800;color:#7A4E02;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 36% 28%,#FFF6DC,#FFD35C 50%,#B57E06);
  border:1.5px solid #9A6404}
.msPin{position:absolute;left:50%;top:-4px;margin-left:-4px;width:0;height:0;font-style:normal;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid #FFF6DC;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
@media (prefers-reduced-motion:reduce){ .msWheel{animation:none} }

/* the coin stack the home wheel sits on, scaled down */
.msCoins{position:absolute;left:50%;bottom:-2px;margin-left:-17px;width:34px;height:14px;
  font-style:normal;z-index:2}
.msCoins u{position:absolute;border-radius:50%;
  background:linear-gradient(180deg,#FFF0BE,#FFD35C 46%,#C98A2E);
  box-shadow:inset 0 -2px 2px rgba(120,75,0,.55),inset 0 1px 2px rgba(255,255,255,.9),
             0 2px 3px rgba(0,0,0,.65)}
.msCoins u:nth-child(1){width:34px;height:9px;bottom:0;left:0}
.msCoins u:nth-child(2){width:27px;height:8px;bottom:4px;left:3.5px}
.msCoins u:nth-child(3){width:20px;height:7px;bottom:8px;left:7px}

/* 2. The selected pill has to beat the id rules that colour the unselected
      ones — a class selector loses to #betSeg button no matter how many
      classes it has, which is why only the border was changing. */
body.snlSkin #cntSeg button.sel,
body.snlSkin #onlineSeg button.sel,
body.snlSkin #roomSeg button.sel,
body.snlSkin #betSeg button.sel,
body.snlSkin #roomBetSeg button.sel,
body.snlSkin #roomLiveSeg button.sel,
body.snlSkin .seg button.sel{
  background:linear-gradient(180deg,#FFE9A6,#FFB627 50%,#E07A05) !important;
  color:#4A2A00 !important;
  border:2px solid #FFF6DC !important;
  box-shadow:0 5px 0 #9A5200,0 10px 14px rgba(0,0,0,.65),
             inset 0 3px 0 rgba(255,255,255,.9),0 0 18px rgba(255,182,39,.55) !important;
  transform:translateY(-3px) !important}

/* The player card sat in its Ludo purple on a green screen and looked pasted
   on. It takes the same pine as the panels so it belongs to the page; the
   avatar, flag, name and rating inside it are untouched. */
body.snlSkin .pcard{
  background:linear-gradient(160deg,#1C4438,#102A22 52%,#071612) !important;
  border-color:rgba(255,211,92,.5) !important;
  box-shadow:0 5px 0 #050F0C,0 10px 14px -6px rgba(0,0,0,.8) !important}