/* LUDO ARCADE
 *
 * The look this game already had, with the framework taken out from under it:
 * no Tailwind import, no build step, one file the server hands over as it is.
 */

:root { --ink:#07132c; --orange:#ff5a2a; --blue:#3159ed; --green:#00af8f; --yellow:#ffc328; }
* { box-sizing:border-box; }
html { background:#07132c; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 50% -15%,#334a95 0,#0d1d47 38%,#07132c 75%); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button { font:inherit; }
.arcade { min-height:100vh; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:27px 27px; overflow:hidden; }
.topbar { height:78px; padding:0 clamp(20px,5vw,82px); display:flex; align-items:center; justify-content:space-between; color:#fff; border-bottom:1px solid rgba(255,255,255,.16); letter-spacing:.08em; }
.brand { color:#fff; text-decoration:none; display:flex; align-items:center; gap:10px; font-size:18px; line-height:.8; font-weight:900; letter-spacing:-.05em; }.brand>span:last-child span{display:block;font-size:10px;color:#ffbd35;letter-spacing:.38em;margin-top:5px}.brand-orbit{width:28px;height:28px;border:3px solid #f5c430;color:#f5c430;border-radius:50%;display:grid;place-items:center;transform:rotate(-20deg)}
.topbar-center,.sound-button{font-size:10px;font-weight:700;letter-spacing:.15em}.topbar-center{color:#d9e2ff}.topbar-center b{color:#5d74c9;padding:0 8px}.pulse-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#ff633f;box-shadow:0 0 0 5px rgba(255,99,63,.15);margin-right:7px}.sound-button{border:0;background:transparent;color:#fff;cursor:pointer}.sound-button:first-letter{color:#ffca3c;font-size:17px}
.game-layout{max-width:1440px;margin:0 auto;padding:42px clamp(18px,4.8vw,76px) 34px;display:grid;grid-template-columns:220px minmax(480px,670px) 190px;gap:clamp(18px,2.5vw,36px);align-items:center}.panel{border:1px solid rgba(214,224,255,.24);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055));box-shadow:inset 0 1px rgba(255,255,255,.13),0 22px 45px rgba(0,0,0,.18);color:#fff}.players-card{padding:22px 15px 16px}.panel-kicker{color:#aebce5;font-size:9px;letter-spacing:.18em;font-weight:800}.players-card h2{font-size:24px;margin:6px 0 19px;letter-spacing:-.06em}.players-card h2 em{color:#ffcb30;font-style:normal}.player-list{display:grid;gap:8px}.player-row{border-radius:9px;padding:8px 7px;display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;opacity:.58;transition:.2s}.player-row.active{background:rgba(255,255,255,.12);opacity:1;box-shadow:inset 3px 0 #ffbe25}.player-avatar{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-weight:900;color:#fff;font-size:13px}.player-avatar.red{background:var(--orange)}.player-avatar.blue{background:#3c76f1}.player-avatar.green{background:#11b888}.player-avatar.yellow{background:#f6bc26;color:#4d3810}.player-row strong{font-size:11px;letter-spacing:.06em;display:block}.player-row small{display:block;font-size:8px;color:#b8c3e5;margin-top:2px}.player-score{color:#fff;font-size:14px;font-weight:900}.player-score i{color:#96a5d3;font-size:9px;font-style:normal}.streak{border-top:1px solid rgba(255,255,255,.17);margin-top:16px;padding-top:15px;display:flex;gap:10px;align-items:center}.streak>span{background:#f8c233;color:#0d1d47;width:29px;height:29px;border-radius:7px;display:grid;place-items:center}.streak small{display:block;color:#aebce5;font-weight:700;font-size:8px;letter-spacing:.12em}.streak strong{font-size:18px;line-height:1}.streak em{font-style:normal;font-size:9px;color:#f4c533}
.board-column{min-width:0}.match-heading{display:flex;align-items:end;justify-content:space-between;margin:0 7px 15px;color:#fff}.match-heading span,.turn-badge small{display:block;color:#a9b9e9;font-size:9px;font-weight:bold;letter-spacing:.16em}.match-heading h1{font-size:clamp(26px,3.2vw,38px);margin:4px 0 0;line-height:.9;letter-spacing:-.07em}.match-heading h1 i{color:#ffc337;font-style:normal}.turn-badge{text-align:right}.turn-badge b{display:block;margin-top:4px;font-size:12px;letter-spacing:.11em}.turn-badge b.red{color:#ff8d71}.turn-badge b.blue{color:#8daaff}.turn-badge b.green{color:#74e7c4}.turn-badge b.yellow{color:#ffe281}
.board-frame{position:relative;padding:10px;background:linear-gradient(135deg,#ffd75b,#fb632c 46%,#ffbd2e 100%);border-radius:18px;box-shadow:0 0 0 2px #12295d,0 17px 0 #e23b2f,0 30px 42px rgba(0,0,0,.42)}.ludo-board{position:relative;display:grid;grid-template:repeat(15,1fr)/repeat(15,1fr);width:100%;aspect-ratio:1;overflow:hidden;border:2px solid #122558;background:#f8f4ea;box-shadow:inset 0 0 0 3px #fff1b7}.board-tile{position:relative;min-width:0;min-height:0;border:1px solid rgba(9,30,73,.18);background:#faf9f3}.board-tile.home{border-color:transparent}.board-tile.home.red{background:#ffb096}.board-tile.home.blue{background:#9bbcfb}.board-tile.home.green{background:#92ead1}.board-tile.home.yellow{background:#ffe27a}.home-slot{position:absolute;inset:17%;border-radius:50%;background:#fff9e9;display:grid;place-items:center;box-shadow:inset 0 2px 5px rgba(11,27,61,.15)}.home-slot span{width:46%;height:46%;border:2px solid #d7dfef;border-radius:50%}.board-tile.track{background:#fffdf8}.board-tile.lane.red{background:#ff8b6a}.board-tile.lane.blue{background:#7d9ff8}.board-tile.lane.green{background:#68d6b7}.board-tile.lane.yellow{background:#ffd95e}.board-tile.safe{background:#fff5ca}.board-tile.safe-red{background:#ff815c}.board-tile.safe-blue{background:#668cf1}.board-tile.safe-green{background:#50caa9}.board-tile.safe-yellow{background:#ffd343}.star{font-size:clamp(7px,1.2vw,13px);position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}.board-tile.center{background:transparent;border-color:transparent}.goal{position:absolute;inset:40% 40%;z-index:1;width:20%;height:20%;display:grid;place-items:center;align-content:center;color:#fff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:conic-gradient(from 45deg,#ffcf39 0 25%,#21b991 0 50%,#496eea 0 75%,#ff5d37 0);text-shadow:0 2px 2px rgba(0,0,0,.25)}.goal span{font-size:clamp(7px,1vw,10px);letter-spacing:.05em;font-weight:900}.goal b{font-size:clamp(10px,2vw,19px);line-height:.7}/* The pawns are painted, not styled: they are pixels the brain composited (src/board-table.js), laid over the grid on a canvas. A canvas is a replaced element, so inset:0 alone would leave it at its own pixel size — it is given a width and a height too. The picture reaches a little past the board because a pawn stands taller than its square. */.board-art{position:absolute;left:-7%;top:-7%;width:114%;height:114%;pointer-events:none;z-index:4}/* Every place a pawn can stand is a button carrying its spot number and nothing else. */.spot{position:relative;z-index:6;min-width:0;min-height:0;padding:0;margin:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:default;border-radius:50%}.spot[data-live='1']{cursor:pointer}.spot:focus-visible{outline:3px solid #fff3c5;outline-offset:2px;z-index:12}.spot-yard{position:absolute;width:9.3%;aspect-ratio:.6875;transform:translate(-50%,-78%);border-radius:35%}.status-line{color:#fff;font-size:12px;font-weight:700;text-align:center;min-height:24px;margin:25px 0 0;letter-spacing:.01em}.status-spark{margin-right:7px}.status-spark.red{color:#ff8f70}.status-spark.blue{color:#8eacff}.status-spark.green{color:#71e8c5}.status-spark.yellow{color:#ffdf69}
.dice-panel{padding:19px 16px 14px;text-align:center}.dice-cage{width:105px;height:105px;margin:15px auto 14px;padding:10px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.23);border-radius:12px;background:rgba(1,11,37,.2)}.dice-cage.rolling{animation:shake .14s infinite}.die{background:#fff9e9;width:70px;height:70px;border-radius:14px;box-shadow:0 5px 0 #dbbf84,0 8px 12px rgba(0,0,0,.25);padding:11px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr)}.die span{width:11px;height:11px;border-radius:50%;background:#17265d;align-self:center;justify-self:center;opacity:0}.face-1 span:nth-child(1){opacity:1;grid-area:2/2}.face-2 span:nth-child(1){opacity:1;grid-area:1/3}.face-2 span:nth-child(2){opacity:1;grid-area:3/1}.face-3 span:nth-child(1){opacity:1;grid-area:1/3}.face-3 span:nth-child(2){opacity:1;grid-area:2/2}.face-3 span:nth-child(3){opacity:1;grid-area:3/1}.face-4 span:nth-child(1),.face-4 span:nth-child(2),.face-4 span:nth-child(3),.face-4 span:nth-child(4){opacity:1}.face-4 span:nth-child(1){grid-area:1/1}.face-4 span:nth-child(2){grid-area:1/3}.face-4 span:nth-child(3){grid-area:3/1}.face-4 span:nth-child(4){grid-area:3/3}.face-5 span:nth-child(1),.face-5 span:nth-child(2),.face-5 span:nth-child(3),.face-5 span:nth-child(4),.face-5 span:nth-child(5){opacity:1}.face-5 span:nth-child(1){grid-area:1/1}.face-5 span:nth-child(2){grid-area:1/3}.face-5 span:nth-child(3){grid-area:2/2}.face-5 span:nth-child(4){grid-area:3/1}.face-5 span:nth-child(5){grid-area:3/3}.face-6 span{opacity:1}.face-6 span:nth-child(1){grid-area:1/1}.face-6 span:nth-child(2){grid-area:1/3}.face-6 span:nth-child(3){grid-area:2/1}.face-6 span:nth-child(4){grid-area:2/3}.face-6 span:nth-child(5){grid-area:3/1}.face-6 span:nth-child(6){grid-area:3/3}.roll-button{width:100%;padding:12px 6px;background:#ffbd27;border:0;border-radius:7px;box-shadow:0 4px 0 #d58a0e;color:#142454;font-size:11px;font-weight:900;letter-spacing:.09em;cursor:pointer;transition:transform .15s}.roll-button:hover:not(:disabled){transform:translateY(-2px)}.roll-button:disabled{opacity:.58;cursor:not-allowed}.roll-button span{font-size:18px;vertical-align:-2px;margin-left:5px}.moves-stat{border-top:1px solid rgba(255,255,255,.18);padding:16px 0 13px;margin-top:19px}.moves-stat small,.moves-stat span{display:block;font-size:8px;color:#aebce5;font-weight:700;letter-spacing:.13em}.moves-stat strong{display:block;font-size:30px;line-height:1.1;color:#fff}.new-game{color:#c7d4ff;font-size:9px;font-weight:800;letter-spacing:.12em;border:0;background:transparent;cursor:pointer}.new-game:hover{color:#fff}
footer{max-width:1440px;padding:0 clamp(18px,4.8vw,76px) 30px;margin:0 auto;display:flex;justify-content:space-between;color:#8092c7;font-size:8px;font-weight:700;letter-spacing:.1em}footer b{color:#d9e2ff}footer i{color:#ffbd27;font-style:normal;padding:0 6px}@keyframes glow{from{box-shadow:0 0 0 0 rgba(255,255,255,.55),inset 0 -3px rgba(0,0,0,.16)}to{box-shadow:0 0 0 5px rgba(255,255,255,0),inset 0 -3px rgba(0,0,0,.16)}}@keyframes shake{50%{transform:rotate(4deg) scale(1.04)}}
@media(max-width:1050px){.game-layout{grid-template-columns:190px minmax(430px,1fr)}.dice-panel{grid-column:2;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;text-align:left}.dice-panel>.panel-kicker{grid-column:1}.dice-cage{grid-column:2;grid-row:1/4;margin:0}.roll-button{grid-column:3;grid-row:1}.moves-stat{grid-column:3;grid-row:2;border-top:0;margin:0;padding:0}.new-game{grid-column:3;grid-row:3;text-align:left}}@media(max-width:730px){.topbar{height:62px;padding:0 18px}.topbar-center{display:none}.sound-button span{display:none}.game-layout{padding:25px 13px;display:flex;flex-direction:column;gap:18px}.board-column{width:100%;order:1}.players-card{width:100%;order:2}.dice-panel{width:100%;order:3}.match-heading{margin:0 1px 14px}.board-frame{padding:6px;border-radius:12px;box-shadow:0 10px 0 #e23b2f,0 23px 30px rgba(0,0,0,.35)}.players-card{padding:13px}.player-list{grid-template-columns:repeat(2,1fr)}.streak{display:none}.dice-panel{grid-template-columns:1fr 86px 1fr;padding:13px}.dice-cage{width:78px;height:78px;padding:7px}.die{width:54px;height:54px;padding:8px;border-radius:10px}.die span{width:8px;height:8px}.roll-button{font-size:9px}.moves-stat strong{font-size:22px}.moves-stat span{font-size:7px}footer{padding:0 18px 22px;font-size:7px;gap:15px}footer span:last-child{display:none}}@media(max-width:420px){.match-heading h1{font-size:26px}.turn-badge b{font-size:10px}.player-row{padding:6px 4px}.player-avatar{width:24px;height:24px}.dice-panel{grid-template-columns:1fr 70px 1fr;gap:7px}.dice-cage{width:65px;height:65px}.die{width:45px;height:45px}.panel-kicker{font-size:7px}}

/* The two page links, sitting where the marquee used to. */
.topbar-center { display: flex; gap: 6px; }
.topbar-center a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid transparent; border-radius: 4px; color: #d9e2ff; text-decoration: none; }
.topbar-center a:hover { color: #fff; border-color: rgba(255, 255, 255, .22); }
.topbar-center a[aria-current="page"] { color: #ffbd35; border-color: rgba(255, 189, 53, .4); background: rgba(255, 189, 53, .08); }
.topbar-center a span { opacity: .75; }

/* The rules page borrows the panel, and nothing else. */
.reading { max-width: 780px; margin: 0 auto; padding: 34px clamp(18px, 4.8vw, 76px) 40px; color: #fff; }
.reading h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 6px; letter-spacing: -.05em; }
.reading h1 i { color: #ffc337; font-style: normal; }
.reading h2 { color: #ffbd27; font-size: 15px; letter-spacing: .04em; margin: 26px 0 6px; }
.reading p, .reading li { color: #c7d4ff; font-size: 13px; line-height: 1.7; margin: 0; }
.reading ul { display: grid; gap: 8px; margin: 0; padding-inline-start: 20px; }
.reading b { color: #fff; }