.card-route { margin:0; min-height:100vh; color:#f7f7fb; background:#090d18; font-family:"Alexandria",system-ui,sans-serif; }
/* Light shell for the Cardo game lab; the table itself keeps its game-specific surface. */
.card-route { color:#172554; background:linear-gradient(135deg,#FAF8F4,#F1F6FF); }
.lab-header { background:rgba(255,255,255,.9); border-bottom-color:#DFE7F5; box-shadow:0 5px 18px rgba(23,37,84,.06); }
.lab-header nav a { color:#64748B; }.lab-header nav a.active,.lab-header nav a:hover { color:#3366FF; background:#EDF3FF; }
.dev-label { color:#875A00; border-color:#FFC857; background:#FFF7E5; }.lab-title small { color:#20A999; }.lab-title>span { color:#64748B; }
.gallery-controls,.game-side { background:#fff; border-color:#DFE7F5; box-shadow:0 8px 22px rgba(23,37,84,.05); }.lab-tabs button,.table-actions button { color:#53627B; background:#F8FAFF; border-color:#DFE7F5; }.lab-tabs button.active,.table-actions .primary { color:#fff; background:#3366FF; }.gallery-controls label { color:#53627B; }.gallery-controls select { color:#172554; background:#fff; border-color:#DFE7F5; }.game-side h2 { color:#3366FF; }.info-list span { color:#64748B; background:#F7F9FF; }.info-list b { color:#172554; }.back-sample,.state-sample { background:#fff; border-color:#DFE7F5; }.back-sample h3,.state-sample span { color:#53627B; }
.lab-header { position:sticky; top:0; z-index:50; min-height:70px; display:flex; align-items:center; gap:28px; padding:10px clamp(16px,4vw,54px); background:rgba(9,13,24,.9); border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px); }
.lab-brand { display:flex; align-items:center; gap:10px; margin-inline-end:auto; }
.lab-brand img { display:block; width:auto; height:34px; max-width:160px; object-fit:contain; }
.game-lobby-link { margin-inline-start:auto; padding:9px 13px; border:1px solid #CFE0FF; border-radius:7px; color:#3366FF; background:#F2F6FF; font-size:.82rem; font-weight:800; }
.lab-brand span { width:40px; height:40px; display:grid; place-items:center; border-radius:8px; background:#20d39b; color:#07130f; font-weight:900; }
.lab-header nav { display:flex; gap:6px; overflow-x:auto; }
.lab-header nav a { padding:9px 12px; border-radius:7px; color:#aaaebe; white-space:nowrap; font-size:.86rem; }
.lab-header nav a.active,.lab-header nav a:hover { color:#fff; background:rgba(255,255,255,.09); }
.card-route .lab-header{background:rgba(255,255,255,.97);border-bottom:1px solid #dbe6f5;box-shadow:0 5px 18px rgba(23,37,84,.08)}
.card-route .lab-header nav a{color:#5d6b80}.card-route .lab-header nav a.active,.card-route .lab-header nav a:hover{color:#2454d8;background:#eaf0ff}
.card-route .lab-brand{padding:4px 8px;border-radius:7px;background:#fff}.card-route .lab-brand img{height:44px;max-width:220px}
.dev-label { padding:6px 9px; border:1px solid #f5bd4f; color:#f5bd4f; border-radius:5px; font-size:.7rem; font-weight:900; }
.lab-main { max-width:1600px; margin:auto; padding:34px clamp(16px,4vw,54px) 70px; }
.lab-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.lab-title small { color:#20d39b; font-weight:800; }
.lab-title h1 { margin:7px 0 0; font-size:clamp(1.75rem,3.2vw,3rem); }
.lab-title>span { color:#aaaebe; }
.gallery-controls { position:sticky; top:70px; z-index:30; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px; margin-bottom:20px; background:#111728; border:1px solid rgba(255,255,255,.12); border-radius:8px; }
.lab-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-inline-end:auto; }
.lab-tabs button,.table-actions button { min-height:40px; padding:0 14px; border:1px solid rgba(255,255,255,.13); border-radius:7px; color:#c7cad4; background:rgba(255,255,255,.06); font:inherit; font-weight:700; cursor:pointer; }
.lab-tabs button.active,.table-actions .primary { color:#05140f; background:#20d39b; }
.gallery-controls label { display:flex; align-items:center; gap:7px; color:#aaaebe; font-size:.83rem; }
.gallery-controls select { min-height:38px; color:#fff; background:#0b1020; border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:0 10px; }
.card-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:18px 12px; align-items:start; }
.playing-card { position:relative; flex:0 0 auto; width:112px; aspect-ratio:5/7; padding:0; border:0; border-radius:9%; background:transparent; box-shadow:0 7px 18px rgba(0,0,0,.28); transform:translateY(0) rotate(var(--rotation,0deg)); transform-origin:50% 100%; transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; cursor:pointer; }
.playing-card svg { display:block; width:100%; height:100%; overflow:visible; }
.playing-card.xs { width:68px; }.playing-card.sm { width:94px; }.playing-card.md { width:126px; }.playing-card.lg { width:164px; }
.playing-card:hover,.playing-card.selected { z-index:10; transform:translateY(-18px) rotate(var(--rotation,0deg)); box-shadow:0 18px 28px rgba(0,0,0,.4); }
.playing-card.selected { filter:drop-shadow(0 0 9px #f5bd4f); }
.playing-card.playable { filter:drop-shadow(0 0 7px rgba(32,211,155,.8)); }
.playing-card.disabled { filter:grayscale(.8) brightness(.6); cursor:not-allowed; }
.playing-card.winning { animation:winning 1s ease-in-out infinite alternate; }
.playing-card.dragging { opacity:.58; transform:translateY(-28px) rotate(6deg); }
@keyframes winning { to { filter:drop-shadow(0 0 18px #f5bd4f); transform:translateY(-12px); } }
.back-sample,.state-sample { display:grid; justify-items:center; gap:12px; padding:18px; background:#12182a; border:1px solid rgba(255,255,255,.1); border-radius:8px; }
.back-sample h3,.state-sample span { margin:0; font-size:.85rem; color:#c7cad4; }
.demo-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; }
.game-side { padding:20px; background:#111728; border:1px solid rgba(255,255,255,.11); border-radius:8px; }
.game-side h2 { margin-top:0; color:#f5bd4f; }
.info-list { display:grid; gap:10px; }
.info-list span { display:grid; gap:4px; padding:12px; background:rgba(255,255,255,.05); border-radius:6px; color:#aaaebe; font-size:.8rem; }
.info-list b { color:#fff; font-size:.95rem; }
.game-table { position:relative; min-height:720px; overflow:hidden; border:9px solid #402d22; border-radius:32px; background:radial-gradient(circle at 50% 45%,#149676,#075a4d 58%,#063a35); box-shadow:inset 0 0 0 3px rgba(245,189,79,.3),0 22px 60px rgba(0,0,0,.4); }
.felt-pattern { position:absolute; inset:0; opacity:.11; background-image:linear-gradient(30deg,transparent 48%,#fff 49%,transparent 51%),linear-gradient(150deg,transparent 48%,#fff 49%,transparent 51%); background-size:42px 42px; }
.table-player { position:absolute; z-index:4; display:flex; align-items:center; gap:9px; padding:8px 10px; min-width:150px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(7,15,24,.78); backdrop-filter:blur(10px); }
.table-player.current { box-shadow:0 0 0 2px #f5bd4f; }
.table-player.north { top:20px; left:50%; transform:translateX(-50%); }.table-player.west { top:38%; left:18px; }.table-player.east { top:38%; right:18px; }
.player-avatar { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#20d39b; color:#061510; font-weight:900; }
.table-player small { display:block; color:#adb2c1; font-size:.68rem; margin-top:3px; }
.opponent-cards { position:absolute; top:calc(100% + 7px); left:50%; width:85px; height:40px; transform:translateX(-50%); }
.mini-back { position:absolute; left:calc(var(--i) * 8px); width:35px; aspect-ratio:5/7; transform:rotate(calc((var(--i) - 3) * 3deg)); transform-origin:bottom; }
.mini-back svg { width:100%; height:100%; }
.trick-area,.pile-zone { position:absolute; z-index:3; left:50%; top:43%; display:flex; align-items:center; gap:18px; transform:translate(-50%,-50%); }
.trick-area .playing-card { margin-left:-42px; }
.score-board { position:absolute; top:18px; right:20px; display:flex; gap:12px; padding:9px 12px; background:rgba(5,14,23,.76); border-radius:7px; font-size:.78rem; }
.score-board strong { color:#f5bd4f; }.score-board b { color:#20d39b; }
.turn-timer { position:absolute; top:18px; left:20px; padding:8px 11px; background:#ff6a5f; color:#171018; border-radius:6px; font-weight:900; }
.current-hand { position:absolute; z-index:8; right:0; bottom:8px; left:0; display:grid; justify-items:center; }
.current-hand>span { padding:5px 10px; margin-bottom:4px; border-radius:5px; background:rgba(5,14,23,.72); font-size:.75rem; }
.player-hand { direction:ltr; display:flex; justify-content:center; align-items:end; width:min(94%,1050px); min-height:150px; overflow:visible; padding:22px 38px 4px; }
.player-hand .playing-card { margin-left:clamp(-51px,-3.7vw,-28px); }
.player-hand .playing-card:first-child { margin-left:0; }
.pile-zone>div { display:grid; justify-items:center; gap:7px; color:#fff; font-size:.75rem; }
.meld-zone { position:absolute; top:18%; right:24%; display:flex; align-items:center; gap:4px; }
.meld-zone>span { color:#d5ddd9; font-size:.72rem; margin-left:8px; }
.uno-piles { top:43%; }.direction { position:absolute; top:27%; left:50%; transform:translateX(-50%); padding:8px 11px; border-radius:6px; background:rgba(5,14,23,.75); font-size:.75rem; }
.direction i { display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:middle; }
.dev-warning { position:absolute; z-index:9; right:14px; bottom:14px; color:rgba(255,255,255,.5); font:600 9px Arial; }
.table-actions { display:flex; justify-content:flex-end; gap:9px; margin:16px 0 0; flex-wrap:wrap; }
.table-actions .uno-button { background:#ff6a5f; color:#fff; font-size:1.1rem; }
.backgammon-table { position:relative; min-height:720px; overflow:hidden; padding:26px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:linear-gradient(145deg,#101a35,#192854 58%,#392665); }
.backgammon-stage { position:relative; height:100%; min-height:666px; display:grid; place-items:center; }
.backgammon-board { position:relative; display:grid; grid-template-columns:1fr 48px 1fr; grid-template-rows:1fr 1fr; width:min(900px,90%); aspect-ratio:1.55/1; padding:20px; gap:0 12px; border:12px solid #17213e; border-radius:12px; background:#dfeaff; box-shadow:inset 0 0 0 3px #62d8ef,0 28px 65px rgba(2,7,22,.4); }
.bg-half { display:grid; grid-template-columns:repeat(6,1fr); align-items:start; overflow:hidden; background:#bcd7ef; }
.bg-half.bottom-half { align-items:end; }
.bg-point { position:relative; height:88%; background:#ff5f87; clip-path:polygon(0 0,100% 0,50% 100%); }
.bg-point.light { background:#6c63ff; }
.bg-point.bottom { align-self:end; clip-path:polygon(50% 0,100% 100%,0 100%); }
.bg-point::after { content:""; position:absolute; inset:5px; opacity:.22; background:linear-gradient(135deg,transparent 45%,#fff 46%,transparent 50%); clip-path:inherit; }
.bg-bar { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding-top:22px; grid-column:2; grid-row:1; background:#17213e; color:#9eefff; }
.bg-bar.lower { grid-row:2; justify-content:flex-end; padding:0 0 22px; }
.bg-checker { position:absolute; z-index:5; right:50%; width:clamp(28px,3.7vw,47px); aspect-ratio:1; padding:0; border-radius:50%; border:3px solid rgba(255,255,255,.72); box-shadow:0 5px 10px rgba(0,0,0,.3),inset 0 0 0 5px rgba(255,255,255,.17); transform:translateX(50%); cursor:pointer; transition:transform .18s,filter .18s; }
.bg-point.top .bg-checker { top:calc(7px + var(--stack) * clamp(22px,3vw,38px)); }
.bg-point.bottom .bg-checker { bottom:calc(7px + var(--stack) * clamp(22px,3vw,38px)); }
.bg-checker.cyan { background:#20cfe5; }.bg-checker.pink { background:#ff4f87; }
.bg-checker.selected { z-index:8; filter:drop-shadow(0 0 10px #ffd447); transform:translateX(50%) translateY(-8px) scale(1.08); border-color:#ffd447; }
.bg-bar .bg-checker { position:relative; right:auto; transform:none; width:34px; }
.bg-home { position:absolute; z-index:8; left:8px; display:grid; place-items:center; width:30px; height:58px; border-radius:6px; background:#0d1730; color:#fff; font-size:.75rem; font-weight:900; }.top-home{top:22px}.bottom-home{bottom:22px}
.dice-zone { position:absolute; z-index:12; top:50%; left:50%; display:flex; gap:10px; transform:translate(-50%,-50%); }
.die { width:58px; height:58px; padding:0; border:2px solid #fff; border-radius:10px; color:#17213e; background:#ffd447; box-shadow:0 10px 22px rgba(0,0,0,.3); font-size:2.5rem; line-height:1; cursor:pointer; }
.die.alt { color:#fff; background:#ff5f87; }.die.rolling{animation:diceRoll .55s ease}.die:hover{transform:translateY(-4px)}
@keyframes diceRoll { 35%{transform:rotate(120deg) scale(.8)} 70%{transform:rotate(260deg) scale(1.13)} }
.bg-player { position:absolute; z-index:15; display:flex; align-items:center; gap:9px; min-width:145px; padding:9px 12px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(7,13,32,.88); }
.bg-player>span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#091224; background:#20cfe5; font-weight:900; }.bg-player small{display:block;margin-top:3px;color:#aebbd5;font-size:.68rem}.bg-player.opponent{top:2px;left:50%;transform:translateX(-50%)}.bg-player.me{bottom:2px;left:50%;transform:translateX(-50%);box-shadow:0 0 0 2px #ffd447}.bg-player.me>span{background:#ff5f87;color:#fff}
.bg-status { position:absolute; z-index:14; right:14px; bottom:14px; display:grid; gap:3px; padding:10px 12px; border-radius:7px; background:rgba(7,13,32,.88); }.bg-status span,.bg-status small{color:#aebbd5;font-size:.68rem}.bg-status b{color:#ffd447;font-size:1.25rem}
.match-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-bottom:18px; padding:12px; border-radius:7px; background:linear-gradient(120deg,rgba(32,207,229,.15),rgba(255,79,135,.15)); }.match-score div{text-align:center}.match-score span{display:block;color:#b9c5db;font-size:.72rem}.match-score b{font-size:1.8rem}.match-score strong{color:#ffd447;font-size:.72rem}
/* Realistic backgammon table skin */
.backgammon-table { padding:34px; border-color:#263149; background:radial-gradient(circle at 50% 44%,#27334a,#111827 72%); box-shadow:inset 0 1px rgba(255,255,255,.07),0 24px 70px rgba(0,0,0,.42); }
.backgammon-board { grid-template-columns:1fr 54px 1fr; gap:0 13px; padding:22px; border:15px solid #4b2e20; border-radius:14px; background:#6b422b; box-shadow:inset 0 0 0 3px #b98252,inset 0 0 0 8px #291912,0 28px 55px rgba(0,0,0,.55); }
.backgammon-board::before { content:""; position:absolute; inset:8px; z-index:0; pointer-events:none; border:1px solid rgba(255,222,170,.34); border-radius:4px; }
.bg-half { position:relative; z-index:1; background:#dbc7a4; box-shadow:inset 0 0 18px rgba(74,43,25,.2); }
.bg-point { background:#7d2635; filter:drop-shadow(0 1px 0 rgba(255,255,255,.18)); }
.bg-point.light { background:#263342; }
.bg-point::after { opacity:.1; background:linear-gradient(135deg,transparent 46%,#fff 47%,transparent 51%); }
.bg-bar { background:linear-gradient(90deg,#2b1a13,#75472d 48%,#2b1a13); color:#f2d4a4; box-shadow:inset 1px 0 rgba(255,255,255,.15),inset -1px 0 rgba(0,0,0,.45); }
.bg-checker { border-color:rgba(255,255,255,.5); box-shadow:0 5px 8px rgba(31,18,12,.48),inset 0 2px 3px rgba(255,255,255,.65),inset 0 -5px 8px rgba(0,0,0,.25); }
.bg-checker.cyan { background:radial-gradient(circle at 38% 30%,#fffdf4,#e8dcc7 52%,#aa9578 100%); border-color:#fff8e9; }
.bg-checker.pink { background:radial-gradient(circle at 38% 30%,#626a72,#272c32 52%,#080a0d 100%); border-color:#747b82; }
.bg-checker.selected { filter:drop-shadow(0 0 9px #f7cc72); border-color:#f7cc72; }
.bg-home { background:#2c1a12; color:#f5dfba; border:1px solid #a57448; }
.board-hinge { position:absolute; z-index:14; left:50%; width:20px; height:34px; transform:translateX(-50%); border:2px solid #291912; border-radius:4px; background:linear-gradient(90deg,#6f4a2c,#d0a162 48%,#5a381f); box-shadow:0 2px 5px rgba(0,0,0,.5); }
.hinge-top { top:-12px; }.hinge-bottom { bottom:-12px; }
.dice-zone { gap:12px; }
.die { position:relative; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); width:56px; height:56px; padding:8px; border:1px solid #c5b89f; border-radius:9px; background:linear-gradient(145deg,#fffef8,#ddd0b8); box-shadow:0 10px 18px rgba(48,27,16,.38),inset 2px 2px 4px rgba(255,255,255,.8),inset -3px -3px 6px rgba(74,50,32,.18); }
.die.alt { background:linear-gradient(145deg,#353b42,#111419); border-color:#656c72; }
.pip { display:none; align-self:center; justify-self:center; width:8px; height:8px; border-radius:50%; background:#24201b; box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
.die.alt .pip { background:#f4e8d0; }
.pip.p1{grid-area:1/1}.pip.p2{grid-area:1/2}.pip.p3{grid-area:1/3}.pip.p4{grid-area:2/1}.pip.p5{grid-area:2/2}.pip.p6{grid-area:2/3}.pip.p7{grid-area:3/1}.pip.p8{grid-area:3/2}.pip.p9{grid-area:3/3}
.face-1 .p5,.face-2 .p1,.face-2 .p9,.face-3 .p1,.face-3 .p5,.face-3 .p9,.face-4 .p1,.face-4 .p3,.face-4 .p7,.face-4 .p9,.face-5 .p1,.face-5 .p3,.face-5 .p5,.face-5 .p7,.face-5 .p9,.face-6 .p1,.face-6 .p3,.face-6 .p4,.face-6 .p6,.face-6 .p7,.face-6 .p9 { display:block; }
.bg-player { border-color:rgba(219,199,164,.28); background:rgba(12,17,27,.92); box-shadow:0 8px 22px rgba(0,0,0,.3); }
.bg-player>span { color:#1b1d20; background:linear-gradient(145deg,#fffdf5,#c3b293); }.bg-player.me { box-shadow:0 0 0 2px #d7a75f,0 8px 22px rgba(0,0,0,.35); }.bg-player.me>span { color:#f7ead4; background:linear-gradient(145deg,#555d65,#171b20); }
.bg-status { border:1px solid rgba(219,199,164,.18); background:rgba(12,17,27,.92); }.bg-status b{color:#f0c36f}
.match-score { background:#0e1524; border:1px solid rgba(219,199,164,.18); }.match-score strong{color:#f0c36f}
.card-toast { position:fixed; z-index:80; bottom:22px; left:22px; padding:12px 18px; color:#061510; background:#20d39b; border-radius:7px; font-weight:900; transform:translateY(100px); transition:.25s; }.card-toast.show{transform:none;}
.route-message { min-height:100vh; display:grid; place-items:center; align-content:center; gap:12px; background:#090d18; color:#fff; font-family:system-ui; }
@media (prefers-reduced-motion:reduce){.playing-card,.card-toast{transition:none!important;animation:none!important;}}
@media (max-width:900px){.lab-header{gap:10px}.lab-brand b,.dev-label{display:none}.demo-layout{grid-template-columns:1fr}.game-side{display:none}.game-table{min-height:650px}.score-board{right:12px;top:12px}.table-player.west,.table-player.east{min-width:100px}.table-player div:not(.opponent-cards){display:none}}
@media (max-width:600px){.lab-main{padding:22px 10px 50px}.lab-title>span{display:none}.gallery-controls{top:64px}.card-gallery{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:12px 7px}.game-table{min-height:610px;border-width:5px;border-radius:18px}.playing-card.sm{width:76px}.player-hand{justify-content:flex-start;overflow-x:auto;padding-inline:12px}.player-hand .playing-card{margin-left:-34px}.table-player.north{top:12px}.table-player.west{left:8px}.table-player.east{right:8px}.trick-area .playing-card{margin-left:-48px}.score-board{top:90px;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}.turn-timer{top:12px;left:10px}.meld-zone{right:10%;top:22%}.backgammon-table{min-height:590px;padding:8px}.backgammon-stage{min-height:570px}.backgammon-board{width:98%;padding:8px;gap:0 5px;border-width:6px;grid-template-columns:1fr 28px 1fr}.bg-checker{width:25px;border-width:2px}.bg-point.top .bg-checker{top:calc(3px + var(--stack) * 18px)}.bg-point.bottom .bg-checker{bottom:calc(3px + var(--stack) * 18px)}.die{width:42px;height:42px;font-size:1.8rem}.bg-status{display:none}.bg-player{min-width:120px;padding:6px 8px}.bg-home{display:none}}