:root {
  --bg: #0b1120;
  --panel: #111827;
  --panel2: #172033;
  --line: rgba(255,255,255,.10);
  --text: #f4f7fb;
  --muted: #aeb8c7;
  --red: #e5484d;
  --yellow: #e6bd36;
  --green: #3aa981;
  --blue: #4b7bec;
  --cream: #f6f3ea;
  --board: #e8e3d5;
  --safe: #cfd4dc;
  --shadow: 0 18px 60px rgba(0,0,0,.38);
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background: radial-gradient(circle at 50% -10%, #1b2740 0%, var(--bg) 48%, #070b13 100%); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height:100vh; }
button, select { font:inherit; }
button { cursor:pointer; }
.app { min-height:100vh; padding:16px; }
.screen { display:none; min-height:calc(100vh - 32px); }
.screen.active { display:block; }
.heroCard { max-width:760px; margin:4vh auto 22px; background:linear-gradient(145deg, rgba(20,29,48,.98), rgba(12,18,31,.98)); border:1px solid var(--line); border-radius:28px; padding:42px 26px 30px; text-align:center; box-shadow:var(--shadow); }
.brandMark { display:flex; justify-content:center; gap:8px; margin-bottom:18px; }
.brandDot { width:18px; height:18px; border-radius:50%; box-shadow:0 0 0 5px rgba(255,255,255,.03); }
.brandDot.red{background:var(--red)} .brandDot.yellow{background:var(--yellow)} .brandDot.green{background:var(--green)} .brandDot.blue{background:var(--blue)}
h1 { margin:0; font-size:clamp(2.1rem,7vw,4.4rem); letter-spacing:-.045em; }
.heroCard p { max-width:600px; margin:14px auto 0; color:var(--muted); font-size:1.02rem; line-height:1.55; }
.menuPanel { display:grid; grid-template-columns: 1fr; gap:12px; max-width:420px; margin:28px auto 0; text-align:left; }
.menuPanel label { color:var(--muted); font-size:.84rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.selectControl { width:100%; background:#0c1423; color:var(--text); border:1px solid var(--line); padding:13px 14px; border-radius:14px; }
.primaryBtn, .rollBtn, .ghostBtn, .iconBtn, .choiceBtn { border-radius:14px; border:1px solid transparent; padding:12px 16px; transition:.18s ease; }
.primaryBtn { background:var(--text); color:#101827; font-weight:800; }
.primaryBtn:hover { transform:translateY(-1px); box-shadow:0 10px 25px rgba(255,255,255,.09); }
.primaryBtn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.wideBtn { display:block; width:min(440px,100%); margin:20px auto; }
.ghostBtn, .iconBtn { color:var(--text); background:rgba(255,255,255,.045); border-color:var(--line); }
.ghostBtn:hover, .iconBtn:hover { background:rgba(255,255,255,.09); }
.featureRow { max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.featureCard { background:rgba(16,24,39,.78); border:1px solid var(--line); border-radius:18px; padding:17px; display:flex; flex-direction:column; gap:5px; }
.featureCard strong { font-size:.95rem; } .featureCard span { color:var(--muted); font-size:.8rem; line-height:1.45; }
.topBar { max-width:1100px; margin:2vh auto 18px; display:grid; grid-template-columns:100px 1fr 100px; align-items:center; }
.topBar h2 { text-align:center; margin:0; font-size:1.55rem; }
.topBarSpacer{width:100px}
.setupGrid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.setupCard { position:relative; overflow:hidden; background:linear-gradient(145deg,#111827,#0c1422); border:1px solid var(--line); border-radius:22px; padding:16px; display:grid; grid-template-columns:120px 1fr; gap:15px; align-items:center; min-height:200px; }
.setupAccent { position:absolute; inset:0 auto 0 0; width:5px; }
.setupCard h3 { margin:0 0 4px; font-size:1.15rem; } .setupCard p { margin:0 0 12px; color:var(--muted); font-size:.84rem; }
.nameInput { width:100%; background:#0b1220; color:var(--text); border:1px solid var(--line); padding:11px 12px; border-radius:11px; }
.characterWrap { width:120px; height:170px; display:grid; place-items:center; }
.characterSvg { width:112px; height:165px; overflow:visible; }

.gameScreen { padding-bottom:18px; }
.gameHeader { max-width:1320px; margin:0 auto 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 4px; }
.eyebrow { color:var(--muted); font-size:.68rem; letter-spacing:.18em; font-weight:800; }
.turnName { margin-top:2px; font-size:1.28rem; font-weight:850; }
.headerActions { display:flex; gap:8px; }
.gameLayout { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; align-items:start; }
.playersColumn { display:grid; gap:10px; }
.playerCard { position:relative; display:grid; grid-template-columns:58px 1fr; gap:10px; align-items:center; background:rgba(16,24,39,.9); border:1px solid var(--line); border-radius:17px; padding:8px 10px; overflow:hidden; }
.playerCard.active { border-color:rgba(255,255,255,.28); box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; }
.playerColorBar { position:absolute; inset:0 auto 0 0; width:4px; }
.playerMini { width:54px; height:68px; display:grid; place-items:center; }
.playerMini .characterSvg { width:50px; height:65px; }
.playerInfo { min-width:0; }
.playerName { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.playerMeta { color:var(--muted); font-size:.73rem; margin-top:3px; }
.playerStatus { margin-top:5px; display:flex; gap:5px; flex-wrap:wrap; }
.tokenDot { width:9px; height:9px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }

.boardArea { min-width:0; }
.boardShell { width:min(82vw, 820px); max-width:100%; margin:0 auto; }
.ludoBoard { position:relative; width:100%; aspect-ratio:1; border-radius:22px; overflow:hidden; border:8px solid #0e1626; background:var(--board); box-shadow:var(--shadow); }
.boardCell, .yard, .centerHome, .safeRing { position:absolute; }
.boardCell { width:5.5556%; height:5.5556%; border:1px solid rgba(34,40,48,.17); display:grid; place-items:center; background:rgba(255,255,255,.38); }
.boardCell.path { background:#f0ede4; }
.boardCell.safe { background:#dfe5ec; }
.boardCell.start-red{box-shadow:inset 0 0 0 3px rgba(229,72,77,.45)}
.boardCell.start-yellow{box-shadow:inset 0 0 0 3px rgba(230,189,54,.45)}
.boardCell.start-green{box-shadow:inset 0 0 0 3px rgba(58,169,129,.45)}
.boardCell.start-blue{box-shadow:inset 0 0 0 3px rgba(75,123,236,.45)}
.token { position:absolute; width:7.2%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; border:3px solid rgba(255,255,255,.86); box-shadow:0 7px 12px rgba(0,0,0,.24); transition:left .22s ease, top .22s ease, transform .16s ease; z-index:10; display:grid; place-items:center; }
.token::after { content:""; width:34%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.72); box-shadow:0 1px 2px rgba(0,0,0,.18) inset; }
.token.movable { animation:pulseToken 1s infinite; cursor:pointer; box-shadow:0 0 0 4px rgba(255,255,255,.35), 0 8px 16px rgba(0,0,0,.24); }
@keyframes pulseToken { 50% { transform:translate(-50%,-50%) scale(1.12); } }
.yard { width:33.333%; height:33.333%; display:grid; place-items:center; }
.yard.red { top:0; left:0; background:rgba(229,72,77,.17); } .yard.yellow { top:0; right:0; background:rgba(230,189,54,.17); } .yard.green { bottom:0; right:0; background:rgba(58,169,129,.17); } .yard.blue { bottom:0; left:0; background:rgba(75,123,236,.17); }
.yardInner { width:68%; height:68%; border-radius:23px; background:rgba(255,255,255,.64); border:3px solid rgba(255,255,255,.8); position:relative; box-shadow:inset 0 0 0 1px rgba(30,42,58,.1); }
.yardSlots { position:absolute; inset:12%; display:grid; grid-template-columns:1fr 1fr; gap:12%; }
.yardSlot { border-radius:50%; background:rgba(255,255,255,.72); border:3px solid rgba(20,25,32,.12); display:grid; place-items:center; }
.centerHome { top:33.333%; left:33.333%; width:33.333%; height:33.333%; background:conic-gradient(var(--yellow) 0 25%,var(--green) 25% 50%,var(--blue) 50% 75%,var(--red) 75% 100%); display:grid; place-items:center; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
.centerHome::after { content:""; width:44%; aspect-ratio:1; border-radius:50%; background:#f7f3e7; border:4px solid rgba(17,24,39,.14); }
.dicePanel { margin:12px auto 0; display:flex; justify-content:center; align-items:center; gap:12px; }
.diceFace { width:66px; height:66px; background:#fff; color:#131a27; border-radius:15px; display:grid; place-items:center; font-size:1.9rem; font-weight:900; box-shadow:0 8px 22px rgba(0,0,0,.22); }
.rollBtn { background:#fff; color:#101827; font-weight:850; min-width:140px; }
.rollBtn:disabled { opacity:.45; cursor:not-allowed; }
.statusText { text-align:center; margin-top:9px; font-size:.93rem; font-weight:750; }
.rulesHint { color:var(--muted); font-size:.75rem; text-align:center; margin-top:7px; line-height:1.45; }

.modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; }
.modal.hidden { display:none; }
.modalBackdrop { position:absolute; inset:0; background:rgba(3,7,13,.78); backdrop-filter:blur(9px); }
.dramaCard, .winnerCard { position:relative; z-index:1; width:min(720px,100%); max-height:92vh; overflow:auto; background:linear-gradient(145deg,#131d2e,#0d1523); border:1px solid rgba(255,255,255,.13); border-radius:26px; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.dramaHeader { padding:22px 22px 8px; text-align:center; }
.dramaHeader span { font-size:.67rem; font-weight:850; letter-spacing:.18em; color:var(--muted); } .dramaHeader h2 { margin:5px 0 0; font-size:1.9rem; }
.dramaScene { min-height:280px; margin:10px 18px; border-radius:20px; background:radial-gradient(circle at 50% 30%, #263650 0%, #111a2a 62%, #0b121f 100%); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sceneInner { position:relative; width:100%; height:280px; }
.sceneCharacter { position:absolute; bottom:10px; width:150px; height:240px; display:grid; place-items:end center; }
.sceneCharacter.left { left:12%; } .sceneCharacter.right { right:12%; }
.sceneLabel { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:.8rem; color:#d6deea; font-weight:750; }
.attackHand { position:absolute; width:100px; height:16px; border-radius:999px; background:#dba47d; top:112px; left:39%; transform:rotate(-18deg); transform-origin:right center; box-shadow:0 5px 10px rgba(0,0,0,.22); z-index:5; }
.attackLeg { position:absolute; width:105px; height:18px; border-radius:999px; background:#dba47d; top:138px; left:41%; transform:rotate(-23deg); transform-origin:left center; z-index:5; }
.attackStick { position:absolute; width:15px; height:120px; background:#7a573d; top:80px; left:48%; transform:rotate(35deg); border-radius:8px; z-index:5; }
.impact { position:absolute; left:48%; top:91px; width:76px; height:76px; border-radius:50%; border:5px solid rgba(255,255,255,.65); opacity:0; }
.scene.play .attackHand { animation:slapMove .65s ease both; } .scene.play .attackLeg { animation:kickMove .65s ease both; } .scene.play .attackStick { animation:stickMove .65s ease both; } .scene.play .impact { animation:impact .65s .24s ease both; }
@keyframes slapMove { 0%{transform:rotate(-18deg) translateX(45px)} 50%{transform:rotate(-18deg) translateX(-5px)} 100%{transform:rotate(-18deg) translateX(45px)} }
@keyframes kickMove { 0%{transform:rotate(-23deg) translateX(-35px)} 50%{transform:rotate(-23deg) translateX(20px)} 100%{transform:rotate(-23deg) translateX(-35px)} }
@keyframes stickMove { 0%{transform:rotate(35deg) translate(-20px,-30px)} 48%{transform:rotate(35deg) translate(12px,20px)} 100%{transform:rotate(35deg) translate(-20px,-30px)} }
@keyframes impact { 0%{opacity:0; transform:scale(.5)} 35%{opacity:1; transform:scale(1.05)} 100%{opacity:0; transform:scale(1.35)} }
.choiceGrid { padding:6px 18px 18px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.choiceBtn { background:#101a2a; border-color:var(--line); color:var(--text); font-weight:800; min-height:78px; }
.choiceBtn:hover { background:#18253a; transform:translateY(-1px); }
.choiceBtn small { display:block; margin-top:5px; color:var(--muted); font-size:.72rem; font-weight:600; }
.continueWrap { padding:0 18px 18px; }
#continueBtn { width:100%; }
.winnerCard { max-width:820px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.winnerScene { min-height:420px; background:radial-gradient(circle at 50% 30%, #2a3850 0%, #111a2b 64%, #0b121e 100%); display:grid; place-items:center; }
.winnerScene .characterSvg { width:230px; height:390px; animation:celebrate .8s ease-in-out infinite alternate; }
@keyframes celebrate { to { transform:translateY(-8px) rotate(2deg); } }
.winnerTextBox { padding:30px; display:flex; flex-direction:column; justify-content:center; }
.winnerTextBox h2 { margin:8px 0 8px; font-size:2.2rem; letter-spacing:-.03em; } .winnerTextBox p { color:var(--muted); line-height:1.5; }
.winnerTextBox .primaryBtn { margin-top:14px; }
.winnerConfetti { position:absolute; inset:0; z-index:2; pointer-events:none; background-image:radial-gradient(circle,rgba(255,255,255,.72) 0 2px,transparent 3px),radial-gradient(circle,rgba(255,255,255,.45) 0 1px,transparent 2px); background-size:46px 46px,31px 31px; opacity:.24; }

@media (max-width:900px) {
  .gameLayout { grid-template-columns:1fr; }
  .playersColumn { grid-template-columns:repeat(4,1fr); }
  .playerCard { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .playerInfo { width:100%; }
  .playerStatus { justify-content:center; }
  .boardShell { width:min(94vw,700px); }
}
@media (max-width:700px) {
  .app { padding:10px; } .screen { min-height:calc(100vh - 20px); }
  .heroCard { margin-top:1vh; padding:30px 18px 22px; border-radius:22px; }
  .featureRow { grid-template-columns:1fr; }
  .setupGrid { grid-template-columns:1fr; }
  .topBar { grid-template-columns:80px 1fr 80px; } .topBarSpacer{width:80px}
  .setupCard { grid-template-columns:92px 1fr; min-height:180px; } .characterWrap{width:92px} .characterSvg{width:88px;height:148px}
  .playersColumn { grid-template-columns:1fr 1fr; }
  .gameHeader { align-items:flex-start; }
  .headerActions { flex-wrap:wrap; justify-content:flex-end; }
  .dramaScene { min-height:240px; } .sceneInner{height:240px} .sceneCharacter{height:210px;width:120px}.sceneCharacter.left{left:7%}.sceneCharacter.right{right:7%}
  .choiceGrid { grid-template-columns:1fr; }
  .winnerCard { grid-template-columns:1fr; max-height:92vh; } .winnerScene{min-height:320px}.winnerScene .characterSvg{width:180px;height:290px}
}
@media (max-width:430px) {
  h1{font-size:2.2rem}
  .turnName{font-size:1.05rem}
  .diceFace{width:58px;height:58px}
  .rollBtn{min-width:120px}
}