body{margin:0;background:#0B1020;font-family:Inter,system-ui,sans-serif;color:#E5E7EB}button{font-family:inherit;cursor:pointer}
.card{background:#111827;border:1px solid #243049;border-radius:18px;padding:22px}.lbl{font-size:12px;font-weight:700;letter-spacing:.8px;color:#94A3B8}
.g{background:#1B2440;border:1px solid #2C3A5C;color:#E5E7EB;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600}
.seg{display:flex;background:#0F1626;border:1px solid #243049;border-radius:12px;padding:4px;gap:4px}.seg button{flex:1;border:0;background:transparent;color:#94A3B8;padding:8px 6px;border-radius:9px;font-size:13px;font-weight:600}.seg .on{background:linear-gradient(135deg,#4F46E5,#7C3AED);color:#fff}
.f{display:flex;flex-direction:column;gap:8px}.r{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600}
.n{background:#0F1626;border:1px solid #2C3A5C;border-radius:10px;padding:7px 12px;min-width:90px;text-align:right;font-weight:700}
.b{height:6px;border-radius:6px;background:#243049;position:relative}.b i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#6366F1,#8B5CF6)}.b u{position:absolute;top:-6px;width:18px;height:18px;border-radius:50%;background:#fff;margin-left:-9px}
.s{padding:16px;border-radius:14px;background:#0F1626;border:1px solid #243049}.s p{margin:0;font-size:12px;color:#94A3B8;font-weight:600}.s h4{margin:6px 0 0;font-size:22px;font-weight:800}
.ad{border:1px dashed #2C3A5C;border-radius:14px;color:#64748B;font-size:12px;display:flex;align-items:center;justify-content:center;letter-spacing:1px}
.tip{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:16px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35);font-size:14px;line-height:1.6}
.row{display:grid;grid-template-columns:150px 1fr 90px;gap:12px;align-items:center;font-size:14px;margin:10px 0}.row .t{height:22px;position:relative;background:#0F1626;border-radius:6px}.row .t i{position:absolute;top:0;bottom:0;border-radius:6px}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid #2C3A5C;background:#0F1626;color:#CBD5E1}.chip.on{background:rgba(99,102,241,.22);border-color:#6366F1;color:#C7D2FE}.nw{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;background:#10B981;color:#04281d;margin-left:6px;font-style:normal}
.tg{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600}.sw{width:40px;height:22px;border-radius:12px;background:#243049;position:relative}.sw.on{background:#6366F1}.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff}.sw.on::after{left:21px}
table.k{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}table.k th{color:#94A3B8;font-size:12px;text-align:left;padding:8px 6px;font-weight:700}table.k td{padding:11px 6px;border-top:1px solid #243049}.pc{background:#111827;border:1px solid #243049;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;position:relative}.pc.act{box-shadow:0 0 0 2px var(--c),0 0 30px -4px var(--c)}
.av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:17px;border:3px solid rgba(255,255,255,.25)}
.pip{width:18px;height:18px;border-radius:50%;border:2px solid var(--c);display:inline-block}.pip.on{background:var(--c)}.pip.fin{background:#fff;border-color:#fff}
.lg{display:flex;gap:10px;font-size:13px;align-items:flex-start;line-height:1.45;color:#CBD5E1}.lg i{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none}.lg span{margin-left:auto;color:#64748B;font-size:11px;flex:none}
.rb{border:0;border-radius:18px;padding:20px 52px;font-size:20px;font-weight:800;color:#fff;background:linear-gradient(135deg,#4F46E5,#7C3AED);box-shadow:0 14px 34px rgba(99,102,241,.55);cursor:pointer}
.chip{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid #2C3A5C;background:#0F1626;color:#CBD5E1}.chip.on{background:rgba(99,102,241,.22);border-color:#6366F1;color:#C7D2FE}
.nw{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;background:#10B981;color:#04281d;margin-left:6px;font-style:normal}.in{background:#0F1626;border:1px solid #2C3A5C;border-radius:10px;padding:10px 12px;font-size:14px}
.mode{border:2px solid #243049;border-radius:16px;padding:16px;background:#0F1626;display:flex;flex-direction:column;gap:4px}.mode.on{border-color:#6366F1;background:rgba(99,102,241,.14)}
.seat{display:grid;grid-template-columns:18px 130px 1fr 130px;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:#0F1626;border:1px solid #243049;font-size:14px}.dotc{width:16px;height:16px;border-radius:50%}

/* === WIRING ADDITIONS (appended after the owner's mock stylesheet, which is
   reproduced verbatim above). Only what interactivity/responsiveness forces:
   form-control resets inside the mock's .in boxes, switch/token affordances,
   the dice-roll animation, the guide section, and small-viewport reflow. === */
input.in,select.in{font:inherit;color:#E5E7EB;appearance:none;-webkit-appearance:none}
input.in:focus,select.in:focus{outline:2px solid #6366F1;outline-offset:1px}
select.in option{color:#0F172A}
button.chip{font-family:inherit;cursor:pointer}
.mode{cursor:pointer}
.ld-tgl{cursor:pointer}
[data-action]{cursor:pointer}
.ld-token{cursor:pointer}
#ldBoardWrap{width:100% !important;max-width:700px}
#ldBoardSvg{width:100% !important;height:auto !important}
#ldDiceSvg.rolling{animation:ldDiceWig .16s linear infinite}
@keyframes ldDiceWig{0%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-6px)}100%{transform:rotate(-6deg) translateY(0)}}
.ld-guide{background:#0B1020;color:#CBD5E1;padding:52px 24px 72px;border-top:1px solid #1C2540;font-size:15px;line-height:1.65}
.ld-guide .in{max-width:920px;margin:0 auto}
.ld-guide h2{color:#E5E7EB;font-size:24px;margin:28px 0 8px}
.ld-guide h2:first-child{margin-top:0}
.ld-guide p{margin:0 0 12px}
@media (max-width:1500px){
  #ldGame main{grid-template-columns:484px minmax(0,1fr) 292px !important;padding:22px 24px 44px !important}
  #ldGame .ld-leftgroup{grid-template-columns:276px 188px}
}
@media (max-width:1100px){
  #ldGame main{display:flex !important;flex-direction:column;align-items:stretch !important}
  #ldGame main>div{grid-column:auto !important}
  #ldGame main>div>div:not(#ldBoardWrap){height:auto !important;gap:14px}
  #ldGame .ld-boardcol{align-items:center}
  #ldCreate main>div{grid-template-columns:1fr !important}
}
@media (max-width:640px){
  #ldCreate header,#ldGame header,#ldGameOver header{padding:12px 14px !important;gap:10px !important}
  #ldCreate header>span,#ldGame header>span,#ldGameOver header>span{display:none}
  #ldCreate header .g,#ldGame header .g,#ldGameOver header .g{padding:6px 8px;font-size:12px}
  #ldCreate header>b,#ldGame header>b,#ldGameOver header>b{font-size:15px !important}
  #ldDiceRow{flex-wrap:wrap;row-gap:10px}
  #ldCreate header button[data-action="fs"],#ldGame header button[data-action="fs"],#ldGameOver header button[data-action="fs"]{display:none}
  #ldCreate main{padding:20px 14px 44px !important}
  #ldGame main{padding:16px 12px 40px !important}
  #ldCreate h1{font-size:24px !important}
  .seat{grid-template-columns:18px minmax(0,1fr) minmax(0,1fr)}
  .seat>*:last-child{grid-column:2/4}
  #ldGameOver .ld-over-panel{margin:24px 12px !important;padding:30px 18px 24px !important}
  #ldGameOver .ld-over-stats{grid-template-columns:repeat(2,1fr) !important}
  #ldGameOver h2{font-size:30px !important}
  .rb{padding:16px 22px;font-size:17px}
}

/* === DICE TUMBLE + SELECT POPUP FIX (appended 2026-10-27) ===
   The dice roll is now a WAAPI 3D tumble driven from ludo-board.js; the old
   class wiggle must not fight it while .rolling is present. Transforms only:
   the tile's rest size/position/appearance are untouched. Native select
   popups: force the dark scheme + readable option colours so the option list
   is never light-text-on-light in the dark UI (closed state unchanged). === */
#ldDiceSvg.rolling{animation:none;transform-box:fill-box;transform-origin:center}
#ldCreate,#ldGame,#ldGameOver{color-scheme:dark}
#ldCreate select,#ldGame select,#ldGameOver select{color-scheme:dark}
#ldCreate select option,#ldGame select option,#ldGameOver select option{background-color:#0F172A;color:#E5E7EB}
#ldCreate select option:checked,#ldGame select option:checked,#ldGameOver select option:checked{background-color:#4F46E5;color:#FFFFFF}

/* ---- quick-chat bubbles + win celebration (append-only) ---- */
.pc{position:relative}

.ld-bubble{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px) scale(.85);background:#1B2440;color:#E5E7EB;border:1px solid #2C3A5C;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;line-height:1.25;white-space:nowrap;box-shadow:0 10px 24px rgba(2,6,23,.45);opacity:0;pointer-events:none;z-index:30;transition:opacity .22s ease,transform .22s cubic-bezier(.2,1.4,.4,1)}
.ld-bubble::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#1B2440;border-right:1px solid #2C3A5C;border-bottom:1px solid #2C3A5C;transform:translateX(-50%) rotate(45deg)}
.ld-bubble.below{bottom:auto;top:calc(100% + 10px);transform:translate(-50%,-6px) scale(.85)}
.ld-bubble.below::after{bottom:auto;top:-6px;border:0;border-left:1px solid #2C3A5C;border-top:1px solid #2C3A5C;background:#1B2440}
.ld-bubble.show{opacity:1;transform:translate(-50%,0) scale(1)}
#ldGameOver .ld-over-panel{position:relative}
.ld-confetti{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:5}
.ld-confetti i{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:0;animation-name:ldConfettiFall;animation-timing-function:cubic-bezier(.2,.6,.4,1);animation-fill-mode:forwards}
@keyframes ldConfettiFall{0%{opacity:0;transform:translate(0,-16px) rotate(0deg)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0px),var(--fall,640px)) rotate(var(--rot,320deg))}}
.ld-win-title{animation:ldWinPulse 1.1s ease-in-out infinite}
@keyframes ldWinPulse{0%,100%{text-shadow:0 0 0 rgba(250,204,21,0)}50%{text-shadow:0 0 26px rgba(250,204,21,.55)}}
.ld-win-row{animation:ldWinBounce 1.1s ease-in-out infinite}
@keyframes ldWinBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){.ld-win-title,.ld-win-row{animation:none}.ld-confetti{display:none}}

#ldMarks,#ldMarks *{pointer-events:none!important}

/* ---- chat panel + relocated game log (owner layout round) ---- */
.ld-chatline{display:flex;gap:6px;align-items:baseline;line-height:1.45}
.ld-chatline b{flex:none}
.ld-chatline .ld-ctext{flex:1;min-width:0;overflow-wrap:anywhere}
.ld-chatline time{flex:none;font-size:11px;color:#64748B}
#ldChatList::-webkit-scrollbar,#ldLogList::-webkit-scrollbar{width:6px}
#ldChatList::-webkit-scrollbar-thumb,#ldLogList::-webkit-scrollbar-thumb{background:#243049;border-radius:3px}
@media (max-width:1100px){
  #ldGame .ld-logcard{order:5;margin:0 !important}
  #ldGame .ld-logcard #ldLogList{max-height:220px}
  #ldChatPanel{height:auto !important;max-height:520px}
}

/* ---- 3D dice cube (replaces the flat tile flip) ---- */
.ld-dice3d{position:relative;width:88px;height:88px;flex:none}
.ld-dice3d .ld-dshadow{position:absolute;left:4px;top:8px;width:80px;height:78px;border-radius:18px;background:rgba(0,0,0,.3)}
.ld-dice3d .ld-stage{position:absolute;inset:0;perspective:520px}
.ld-dice3d .ld-throw{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ld-dice3d .ld-cube{position:absolute;left:4px;top:4px;width:80px;height:80px;transform-style:preserve-3d;will-change:transform}
.ld-dice3d .ld-face{position:absolute;inset:-0.5px;background:#F8FAFC;border:2px solid #CBD5E1;border-radius:18px;backface-visibility:hidden}
.ld-dice3d .ld-coreface{position:absolute;left:2px;top:2px;width:76px;height:76px;background:#EDF1F5;border-radius:12px}
.ld-dice3d{will-change:transform}
.ld-dice3d .ld-face i{position:absolute;width:14px;height:14px;border-radius:50%;background:#0F172A}
.ld-dice3d.grey .ld-face i{background:#CBD5E1}

/* ---- goti numerals + shared-cell badges + drag (items 12-16) ---- */
.ld-num{font-size:7.6px;font-weight:400;fill:#FFFFFF;opacity:.55;pointer-events:none}
.ld-token{touch-action:none;cursor:pointer}
.ld-desthit{cursor:pointer}
/* ---- one-line game log (item 18): entry + time on a single line ---- */
#ldLogList .lg{min-width:0}
#ldLogList .lg>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* === STAGE 1 (2026-10-28): full-height board, wide log, bottom dice row,
   smaller dice, softer goti numerals, chat notify light ===
   The board fills the centre column's full height (square, centred); its
   exact pixel size is fitted by fitBoard() in ludo-app.js from the live
   row height, capped by the column width on narrower screens. The game
   log spans both left sub-columns, out to just before the board panel. */
.ld-leftgroup{display:grid;grid-template-columns:336px 252px;grid-template-rows:auto 1fr auto;column-gap:20px;height:100%;min-height:0;align-self:stretch}
#ldColLTop{grid-column:1;grid-row:1}
#ldColRTop{grid-column:2;grid-row:1}
#ldGame .ld-logcard{grid-column:1/3;grid-row:2;min-height:0}
#ldColLBot{grid-column:1;grid-row:3}
#ldColRBot{grid-column:2;grid-row:3}
.ld-boardcell{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;align-self:stretch}
#ldGame #ldBoardWrap{width:auto !important;max-width:none !important;aspect-ratio:1/1}
#ldGame #ldBoardSvg{width:100% !important;height:100% !important}
#ldDiceRow{min-width:0}
/* dice ~10% smaller: the layout box is unchanged, the cube renders at .9 */
.ld-dice3d{transform:scale(.9)}
#ldDiceSvg{width:79px !important;height:79px !important}
/* chat notify: header dot + soft panel glow (bubbles stay the main signal) */
#ldChatDot{width:9px;height:9px;border-radius:50%;background:#FBBF24;box-shadow:0 0 10px 2px rgba(251,191,36,.75);opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s;flex:none}
#ldChatDot.on{opacity:1;transform:scale(1)}
#ldChatPanel.ld-chat-glow{animation:ldChatGlow 1.5s ease-out}
@keyframes ldChatGlow{0%{box-shadow:0 0 0 0 rgba(99,102,241,0)}25%{box-shadow:0 0 26px 4px rgba(99,102,241,.55)}100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}}
@media (max-width:1100px){
  .ld-leftgroup{display:flex;flex-direction:column;height:auto;gap:14px}
  #ldColLTop{order:1}
  #ldColLBot{order:2}
  #ldGame .ld-logcard{order:3}
  #ldColRTop{order:4}
  #ldColRBot{order:5}
  .ld-boardcell{align-self:auto}
}

/* ---- hotfix train (2026-10-28c) ---- */
.rb[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
/* movable token: gentle bob (animates the <use> child only — a CSS
   transform on the <g> would override its position attribute) */
.ld-hl-token use{animation:ldBob 1.4s ease-in-out infinite;transform-box:fill-box}
@keyframes ldBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ld-token:hover use{filter:brightness(1.15) drop-shadow(0 1px 2px rgba(0,0,0,.6))}
/* Board themes — ONE palette set for the real board AND the create-screen
   preview (both svgs carry data-theme). Player colours (yards, lanes,
   pawns, centre) are never touched: only slab, field and white cells. */
svg[data-theme="night"] .bd-slab{fill:#020617}
svg[data-theme="night"] .bd-field{fill:#0B1120}
svg[data-theme="night"] rect[fill="#F8F8F8"]{fill:#D9E2F1}
svg[data-theme="night"] rect[fill="#F1F5F9"]{fill:#D9E2F1}
svg[data-theme="wood"] .bd-slab{fill:#5F2D0C}
svg[data-theme="wood"] .bd-field{fill:#7C4A1E}
svg[data-theme="wood"] rect[fill="#F8F8F8"]{fill:#FFF3D6}
svg[data-theme="wood"] rect[fill="#F1F5F9"]{fill:#FFF3D6}
svg[data-theme="candy"] .bd-slab{fill:#831843}
svg[data-theme="candy"] .bd-field{fill:#A62B63}
svg[data-theme="candy"] rect[fill="#F8F8F8"]{fill:#FFF0F5}
svg[data-theme="candy"] rect[fill="#F1F5F9"]{fill:#FFF0F5}
/* MATCH ENDS as two large option cards (owner: it decides the whole
   shape of the match — it must not read as a minor setting) */
.ld-matchgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ld-matchcard{position:relative;border:2px solid #243049;border-radius:16px;padding:16px;background:#0F1626;color:#E2E8F0;text-align:left;cursor:pointer;font:inherit;width:100%}
.ld-matchcard:hover{border-color:#3B4A6B}
.ld-matchcard .mc-t{display:block;font-weight:800;font-size:16px;margin-bottom:5px}
.ld-matchcard .mc-d{display:block;font-size:12.5px;line-height:1.45;color:#94A3B8}
.ld-matchcard.on{border-color:#6366F1;background:rgba(99,102,241,.16)}
.ld-matchcard .mc-tick{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#6366F1;color:#fff;font-size:12px;font-weight:800;display:none;align-items:center;justify-content:center}
.ld-matchcard.on .mc-tick{display:inline-flex}
@media (max-width:640px){.ld-matchgrid{grid-template-columns:1fr}}
@media (max-width:1100px){#ldDiceRow{order:99}}

/* accounts / history / levels (stage 2) */
.ld-lvlbadge{display:inline-block;background:#4F46E5;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;letter-spacing:.02em}
#ldAcctBar b{color:#E5E7EB}
.ld-histrow{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid #1C2540;font-size:13px;color:#E5E7EB}
.ld-histgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.ld-histstat{background:#0B1020;border:1px solid #1C2540;border-radius:10px;padding:10px;text-align:center}
.ld-histstat b{display:block;font-size:18px;color:#fff}
.ld-histstat span{font-size:11px;color:#94A3B8}
.ld-xpbar{height:8px;background:#1C2540;border-radius:99px;overflow:hidden}
.ld-xpbar i{display:block;height:100%;background:#4F46E5;border-radius:99px}