*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}body,html{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f3ead9;background:radial-gradient(ellipse at 20% -10%,#3a2413,transparent 55%),radial-gradient(ellipse at 90% 110%,#2a1a0d,transparent 55%),linear-gradient(160deg,#1c1108,#0d0805 70%);display:flex}h1,h2{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;margin:0}:root{--wood-mid:#2a1a0e;--wood-deep:#170e07;--p1:#7695b3;--p1-deep:#33465e;--p2:#cd8158;--p2-deep:#6e3527;--brass:#e0bd6a;--brass-deep:#a97c2f;--ink:#241608;--muted:#b8a888}.stage{width:min(760px,100%);height:100dvh;margin:auto;padding:clamp(8px,2vw,20px);display:flex;flex-direction:column;gap:clamp(7px,1.6vh,16px)}.top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:10px}.brand-logo{width:min(100%,430px);height:auto;max-height:72px;object-fit:contain;object-position:left center}.top-actions{display:flex;align-items:center;gap:7px}.reset{border:1px solid #ffffff2a;background:#ffffff10;color:#f3ead9;border-radius:10px;padding:8px 12px;font-size:clamp(10px, 2.2vmin, 13px);font-weight:600;cursor:pointer}.reset:hover{background:#ffffff1c}button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.scoreboard{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(7px,1.6vmin,12px) clamp(10px,2.4vmin,16px);border-radius:16px;background:#00000030;border:1px solid #ffffff18}.card{display:flex;align-items:center;gap:9px;min-width:0}.card.right{flex-direction:row-reverse;text-align:right}.avatar{width:clamp(28px,6.5vmin,38px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(13px, 3vmin, 17px);flex:none;box-shadow:inset 0 0 0 2px #ffffff30}.p1 .avatar{background:linear-gradient(145deg,var(--p1),var(--p1-deep))}.p2 .avatar{background:linear-gradient(145deg,var(--p2),var(--p2-deep))}.name{font-size:clamp(11px, 2.5vmin, 14px);font-weight:700;white-space:nowrap}.pips{display:flex;gap:3px;margin-top:4px}.card.right .pips{flex-direction:row-reverse}.pip{width:clamp(4px,1vmin,6px);height:clamp(4px,1vmin,6px);border-radius:50%;background:#ffffff20}.p1 .pip.on{background:var(--p1)}.p2 .pip.on{background:var(--p2)}.turn{font-size:clamp(9px, 2vmin, 12px);font-weight:700;color:var(--brass);text-align:center;white-space:nowrap;flex:none}.arena{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.track{display:flex;flex-direction:column;gap:clamp(3px,1vmin,6px);width:min(78vw,360px);height:100%;max-height:640px;margin:auto;padding:clamp(7px,1.8vmin,14px);border-radius:20px;background:repeating-linear-gradient(180deg,#00000014 0 2px,transparent 2px 6px),linear-gradient(180deg,var(--wood-mid),var(--wood-deep));border:2px solid var(--brass-deep);box-shadow:0 20px 50px #0007,inset 0 1px #ffffff14}.cell{flex:1 1 0;min-height:0;min-width:0;position:relative;border-radius:9px;display:flex;align-items:center;justify-content:center;border:1px solid #00000030}.cell.p1,.cell.p2{box-shadow:inset 0 1px 0 #ffffff40,inset 0 -3px 6px #00000040;border-color:#e0bd6a2a}.cell.p1{background:linear-gradient(165deg,var(--p1) 0,var(--p1-deep) 100%)}.cell.p2{background:linear-gradient(165deg,var(--p2) 0,var(--p2-deep) 100%)}.cell.start{background:linear-gradient(90deg,var(--p1-deep),var(--brass) 50%,var(--p2-deep));border-color:var(--brass)}.cell.goal.p1{box-shadow:inset 0 0 0 2px var(--p1),inset 0 0 18px 3px #7695b366}.cell.goal.p2{box-shadow:inset 0 0 0 2px var(--p2),inset 0 0 18px 3px #cd815866}.num{font-weight:800;font-size:clamp(11px, 2.6vmin, 15px);color:#ffffffcc;text-shadow:0 1px 2px #00000080}.goal-mark{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1}.goal-mark .icon{font-size:clamp(14px, 3.4vmin, 20px)}.goal-mark .word{font-size:clamp(7px, 1.6vmin, 10px);color:#ffffffcc;font-weight:700}.home-mark{font-size:clamp(13px, 3vmin, 18px)}.token{position:absolute;width:clamp(16px,5vmin,30px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,var(--brass) 35%,var(--brass-deep) 78%);border:2px solid #fffbe8cc;box-shadow:0 0 14px #e0bd6a99,0 3px 8px #0009;z-index:4}.token.hop{animation:.28s hop}@keyframes hop{0%{transform:scale(.7)}55%{transform:scale(1.22)}100%{transform:scale(1)}}.controls{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.6vmin,18px)}.dice-wrap{perspective:600px;flex:none}.dice{--d:clamp(44px, 10vmin, 64px);width:var(--d);height:var(--d);position:relative;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.2, .9, .2, 1)}.face{position:absolute;width:var(--d);height:var(--d);border-radius:14%;background:linear-gradient(150deg,#fffdf6,#e8e0cc);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:16%;border:1px solid #00000018;box-shadow:inset 0 0 6px #ffffffb0}.f1{transform:translateZ(calc(var(--d)/ 2))}.f2{transform:rotateY(90deg) translateZ(calc(var(--d)/ 2))}.f3{transform:rotateX(90deg) translateZ(calc(var(--d)/ 2))}.f4{transform:rotateX(-90deg) translateZ(calc(var(--d)/ 2))}.f5{transform:rotateY(-90deg) translateZ(calc(var(--d)/ 2))}.f6{transform:rotateY(180deg) translateZ(calc(var(--d)/ 2))}.dot{border-radius:50%;background:var(--ink);opacity:0;place-self:center;width:clamp(6px,2.1vmin,11px);height:clamp(6px,2.1vmin,11px)}.p_1 .dot:nth-child(5),.p_2 .dot:first-child,.p_2 .dot:nth-child(9),.p_3 .dot:first-child,.p_3 .dot:nth-child(5),.p_3 .dot:nth-child(9),.p_4 .dot:first-child,.p_4 .dot:nth-child(3),.p_4 .dot:nth-child(7),.p_4 .dot:nth-child(9),.p_5 .dot:first-child,.p_5 .dot:nth-child(3),.p_5 .dot:nth-child(5),.p_5 .dot:nth-child(7),.p_5 .dot:nth-child(9),.p_6 .dot:first-child,.p_6 .dot:nth-child(3),.p_6 .dot:nth-child(4),.p_6 .dot:nth-child(6),.p_6 .dot:nth-child(7),.p_6 .dot:nth-child(9){opacity:1}.rollBtn{padding:clamp(10px,2.4vmin,14px) clamp(20px,5vmin,30px);border-radius:14px;border:0;background:linear-gradient(150deg,var(--brass),var(--brass-deep));color:var(--ink);font-weight:800;font-size:clamp(12px, 2.6vmin, 15px);cursor:pointer;box-shadow:0 8px 20px #a97c2f66,inset 0 1px #ffffff90}.rollBtn:disabled{opacity:.4;cursor:not-allowed}.rollBtn:not(:disabled):hover{filter:brightness(1.06)}.message{text-align:center;min-height:16px;color:var(--muted);font-size:clamp(10px, 2.2vmin, 12px)}.message.important{color:var(--brass);font-weight:800;font-size:clamp(11px, 2.5vmin, 14px)}.overlay{position:fixed;inset:0;display:none;place-items:center;padding:20px;background:#000c;backdrop-filter:blur(8px);z-index:50}.overlay.show{display:grid}.win{width:min(88%,360px);text-align:center;padding:30px 22px;border-radius:20px;background:linear-gradient(155deg,#241708,#150d05);border:1px solid #e0bd6a55;box-shadow:0 30px 70px #000}.win h2{font-size:clamp(20px, 5vmin, 28px);color:var(--brass)}.win p{color:var(--muted);font-size:clamp(11px, 2.6vmin, 13px);margin:8px 0 0}.again{margin-top:16px;padding:11px 24px;border-radius:12px;border:0;background:linear-gradient(150deg,var(--brass),var(--brass-deep));color:var(--ink);font-weight:800;cursor:pointer}.sound-box{position:relative}.soundBtn{width:36px;height:36px;padding:0;border:1px solid #ffffff2a;border-radius:10px;background:#ffffff10;color:#f3ead9;font-size:16px;cursor:pointer}.soundBtn:hover{background:#ffffff1c}.soundPanel{position:absolute;top:calc(100% + 8px);right:0;width:220px;padding:14px;border-radius:14px;background:#241708;border:1px solid #e0bd6a55;box-shadow:0 15px 40px #0009;display:none;z-index:20}.soundPanel.show{display:block}.volume-row{display:flex;align-items:center;gap:8px;margin:8px 0}.volume-row label{width:45px;color:#f3ead9;font-size:11px}.volume-row input{flex:1;accent-color:var(--brass);cursor:pointer}.volume-row span{width:28px;text-align:right;color:var(--muted);font-size:11px}#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:100}.pause-overlay{position:fixed;inset:0;display:none;place-items:center;padding:20px;background:#000b;backdrop-filter:blur(7px);z-index:60}.pause-overlay.show{display:grid}.pause-box{width:min(88%,340px);padding:24px 20px;border-radius:18px;text-align:center;background:linear-gradient(155deg,#241708,#150d05);border:1px solid #e0bd6a55;box-shadow:0 30px 70px #000;max-height:90dvh;overflow-y:auto}.pause-box h2{color:var(--brass);font-size:clamp(20px, 5vmin, 28px);margin-bottom:20px}.pause-box button{width:100%;margin-top:10px;padding:11px;border:0;border-radius:12px;background:linear-gradient(150deg,var(--brass),var(--brass-deep));color:var(--ink);font-weight:800;cursor:pointer}.pause-box button:last-child{background:#ffffff12;color:#f3ead9;border:1px solid #ffffff20}.pauseBtn{border:1px solid #e0bd6a55;background:#e0bd6a18;color:var(--brass);border-radius:10px;padding:8px 12px;font-size:clamp(10px, 2.2vmin, 13px);font-weight:700;cursor:pointer}.pauseBtn:hover{background:#e0bd6a2b}.pause-volumes{margin:0 0 16px;padding:12px;border-radius:12px;background:#00000025;border:1px solid #ffffff12}.pause-volume-row{margin:8px 0}.pause-volume-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;color:#f3ead9;font-size:11px;font-weight:600}.pause-volume-label span:last-child{color:var(--muted);font-weight:400}.pause-volume-row input{width:100%;accent-color:var(--brass);cursor:pointer}.wins{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:clamp(32px,9vmin,48px);margin-left:clamp(5px,1.5vmin,10px);padding-left:clamp(5px,1.5vmin,10px);border-left:1px solid #ffffff18}.card.right .wins{margin-left:0;margin-right:clamp(5px,1.5vmin,10px);padding-left:0;padding-right:clamp(5px,1.5vmin,10px);border-left:0;border-right:1px solid #ffffff18}.wins span{color:var(--muted);font-size:clamp(8px, 1.8vmin, 11px);line-height:1}.wins strong{margin-top:3px;color:var(--brass);font-size:clamp(14px, 3.5vmin, 20px);line-height:1}@media (orientation:landscape){.stage{width:min(900px,100%)}.arena{flex:1 1 auto;min-height:0}.track{flex-direction:row;width:100%;max-width:900px;height:min(50vh,220px)}}@media (max-height:500px){.stage{gap:5px;padding-top:6px;padding-bottom:4px}.brand-logo{max-height:48px}.scoreboard{padding-top:5px;padding-bottom:5px}.arena{flex:1 1 auto;min-height:0}.track{height:100%;max-height:none}.controls{flex:none}.message{min-height:12px}.site-footer{display:none}}@media (max-width:420px){.soundPanel{right:-5px;width:205px}.soundBtn{width:34px;height:34px}}@media (prefers-reduced-motion:reduce){.dice{transition:none}.token.hop{animation:none}}.helpBtn{width:36px;height:36px;padding:0;border:1px solid #e0bd6a55;border-radius:50%;background:#e0bd6a18;color:var(--brass);font-size:16px;font-weight:800;cursor:pointer;flex:none}.helpBtn:hover{background:#e0bd6a2b}.help-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:#000c;backdrop-filter:blur(8px);z-index:70}.help-overlay.show{display:flex}.help-box{position:relative;width:min(92vw,520px);max-height:90dvh;overflow-y:auto;padding:26px 22px;border-radius:20px;background:linear-gradient(155deg,#241708,#150d05);border:1px solid #e0bd6a55;box-shadow:0 30px 70px #000;color:#f3ead9}.help-box h2{margin:0 40px 14px 0;color:var(--brass);font-size:clamp(21px, 5vmin, 28px)}.help-box h3{margin:18px 0 7px;color:var(--brass);font-size:14px}.help-box li,.help-box p{color:var(--muted);font-size:12px;line-height:1.6}.help-box ol,.help-box ul{margin:8px 0;padding-left:21px}.help-close{position:absolute;top:12px;right:13px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#ffffff12;color:#f3ead9;font-size:24px;line-height:1;cursor:pointer}.help-close:hover{background:#ffffff20}.help-done{width:100%;margin-top:16px;padding:11px;border:0;border-radius:12px;background:linear-gradient(150deg,var(--brass),var(--brass-deep));color:var(--ink);font-weight:800;cursor:pointer}@media (max-width:420px){.helpBtn{width:34px;height:34px}.help-box{width:94vw;padding:22px 18px}}.site-footer{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 8px;padding:2px 4px 1px;color:#8f8068;font-size:clamp(8px, 1.8vmin, 10px);line-height:1.4;text-align:center}.site-footer a{color:var(--brass);text-decoration:none;font-weight:600;transition:color .2s,opacity .2s}.site-footer a:hover{color:#f0d58b;opacity:1}.footer-separator{color:#e0bd6a55}.footer-rights{color:#766a57}@media (max-width:420px){.site-footer{gap:3px 6px;padding-bottom:0;font-size:8px}}