@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#101a21;--text:#f6ead1;--muted:#9ba8aa;--accent:#d3a867;--mint:#9bcab8;--edge:#34434a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#2d3e42 0,#101a21 62%);min-height:100vh;color:var(--text);font-family:'DM Sans',Arial,sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #eac787;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}.shell{max-width:1080px;padding:0 24px;margin:auto}.topbar{height:79px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;letter-spacing:1.4px;font-weight:800;font-size:14px}.brand img{width:32px;height:32px}.accent{color:var(--accent)}.top-actions{display:flex;gap:9px}.icon-btn{background:#1c2a32;border:1px solid var(--edge);border-radius:11px;color:#d9d9d4;padding:9px 14px;font-size:13px}.hero{text-align:center;padding:42px 0 25px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--accent);font-weight:800}.hero h1{font-family:Outfit,sans-serif;font-weight:900;letter-spacing:10px;font-size:clamp(48px,8vw,82px);line-height:1.2;margin:9px 0 1px;color:#fff1d2}.hero h1 span{color:#d5a45c}.hero p{color:var(--muted);font-size:14px;margin:8px 0}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:22px 0 19px}.mode-switch{display:flex;background:#1b2930;padding:5px;border:1px solid #324149;border-radius:12px;gap:3px}.mode{border:0;background:transparent;color:#93a3a5;border-radius:9px;padding:11px 15px;font-size:12px;font-weight:700}.mode.active{color:#21190e;background:linear-gradient(135deg,#f1d3a0,#d4a866);box-shadow:0 4px 13px #0004}.options{display:flex;gap:10px;align-items:center}.options label{color:var(--muted);font-size:12px}.options select{background:#1b2930;color:#f5e9d2;padding:11px;border:1px solid var(--edge);border-radius:10px;font-size:12px}.primary{background:linear-gradient(135deg,#f0ca8b,#cd9750);border:0;color:#2b2013;padding:12px 19px;border-radius:11px;font-weight:800;font-size:12px;box-shadow:0 4px 16px #0005}.game-area{padding:20px 24px 18px;background:linear-gradient(180deg,#213137,#18262e);border:1px solid #394950;border-radius:20px;box-shadow:0 30px 70px #0005}.score-panel{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 21px}.player-info{display:flex;align-items:center;gap:10px;min-width:158px}.player-info.right{text-align:right;justify-content:flex-end}.player-info strong{display:block;font-size:13px}.player-info small{color:#9da9a6;font-size:11px}.avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:17px}.avatar.opponent{background:#563f3b;color:#e7b39b}.avatar.player{background:#295248;color:#a7e2ca}.turn-indicator{font-size:12px;font-weight:800;color:#e4c28d;background:#56452e88;border:1px solid #7c613a77;padding:9px 20px;border-radius:20px;text-align:center}.board-scroll{width:100%;overflow-x:auto;padding:5px 2px 14px}.board{position:relative;min-width:635px;padding:23px 23px 21px;border:3px solid #a26b3d;border-radius:30px;background:radial-gradient(ellipse at 45% 40%,#e5b77d 0%,#c48a52 62%,#a36a3c 100%);box-shadow:inset 0 0 0 6px #dea66c,inset 0 0 0 8px #975e37,inset 0 11px 23px #ffdda056,0 14px 0 #70452a,0 19px 20px #0008}.board:after{content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid #f0cb9670;border-radius:23px}.board-ornament{text-align:center;color:#744626;font-weight:900;letter-spacing:13px;font-size:9px;height:20px}.board-ornament.bottom{letter-spacing:5px;font-size:8px;height:13px;margin-top:13px}.board-grid{display:grid;grid-template-columns:76px minmax(0,1fr) 76px;gap:15px;align-items:center}.pits{display:flex;flex-direction:column;gap:13px}.pit-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.pit{height:91px;position:relative;border-radius:50%;border:3px solid #c38a56;background:radial-gradient(ellipse at 48% 43%,#84502d,#603a25 72%,#4f301f);box-shadow:inset 0 5px 12px #241309ba,0 3px 2px #ffd3988c;transition:filter .15s,transform .15s}.pit.legal{cursor:pointer;box-shadow:inset 0 5px 12px #241309ba,0 3px 2px #ffd3988c,0 0 0 2px #f6dfaa92}.pit.legal:hover{filter:brightness(1.18);transform:translateY(-3px)}.pit.last{outline:3px solid #f8da85;outline-offset:2px}.pit-count,.store-count{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);min-width:26px;height:26px;border-radius:100px;padding:3px 7px;text-align:center;display:grid;place-items:center;background:#2a3c3c;border:1px solid #769183;color:#fff2d4;font-size:12px;font-weight:800;z-index:2}.store-slot{display:flex;flex-direction:column;gap:19px;align-items:center}.store-slot small{font-size:8px;white-space:nowrap;letter-spacing:.4px;font-weight:800;color:#663b20}.store{width:74px;height:198px;border-radius:42px;position:relative;background:radial-gradient(ellipse at 50% 50%,#815031 0,#5a3521 75%);border:3px solid #c38a56;box-shadow:inset 0 7px 15px #261509c9,0 3px 2px #ffd3988c}.store-count{bottom:-9px;background:#543c2e}.stones{position:absolute;inset:9px;pointer-events:none}.stone{position:absolute;width:16px;height:15px;transform:translate(-50%,-50%) rotate(var(--rotate));border-radius:50% 46% 49% 45%;background:radial-gradient(circle at 33% 28%,var(--light),var(--dark) 65%,#2a2520);box-shadow:inset -2px -2px 2px #0005,1px 2px 2px #0007}.status-line{text-align:center;font-size:12px;color:#b9c5c4;min-height:22px;padding:11px 0 4px}.game-bottom{border-top:1px solid #ffffff17;padding-top:17px;margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.totals{display:flex;align-items:center;gap:18px;font-size:11px;color:#adbab7}.totals b{color:#f6dab0;font-size:17px;margin-left:6px}.divider{color:#926f49}.secondary-actions{display:flex;gap:12px}.subtle{border:0;background:none;color:#bbbcb5;font-size:11px}.subtle:hover{color:#fff}.shell footer{display:flex;gap:12px;justify-content:center;color:#718288;padding:28px 0;font-size:11px}.dialog{color:#f3ead8;background:#1c2d35;border:1px solid #637077;border-radius:21px;padding:23px;width:min(520px,calc(100vw - 30px));max-height:85vh;box-shadow:0 20px 90px #000c}.dialog::backdrop{background:#070f15cf;backdrop-filter:blur(4px)}.dialog-header{display:flex;align-items:center;justify-content:space-between}.dialog h2{font-family:Outfit,sans-serif;margin:0;font-size:24px}.close{font-size:28px;background:transparent;color:#fff;border:0}.dialog-body{overflow:auto;max-height:59vh;line-height:1.65;font-size:13px;color:#d0d4cf}.dialog-body li{margin:9px 0}.note{background:#ffffff0c;padding:10px;border-radius:8px}.dialog-action{margin-top:12px;width:100%}.ending{text-align:center}.win-symbol{font-size:50px;color:#e7bb73}.ending p{color:#cbd4ce;font-size:14px}.final-scores{padding:17px;background:#ffffff0b;border-radius:12px;margin:15px 0;font-weight:700}.ending .primary{width:100%}@media(max-width:700px){.shell{padding:0 12px}.topbar{height:65px}.hero{padding:32px 0 17px}.hero h1{letter-spacing:5px}.game-area{padding:16px 10px}.toolbar{justify-content:center}.mode{padding:11px 12px}.options{justify-content:center}.score-panel{margin-bottom:13px}.player-info{min-width:95px;gap:6px}.avatar{width:29px;height:29px}.player-info strong{font-size:11px}.player-info small{font-size:9px}.turn-indicator{padding:8px;font-size:10px}.game-bottom{justify-content:center}.secondary-actions{justify-content:center}.top-actions .icon-btn{padding:7px 9px}.brand{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* Version 2 enhancements */
.board{background-image:linear-gradient(#d5a57212,#d5a57212),url("assets/wood.webp"),radial-gradient(ellipse at 45% 40%,#e5b77d 0%,#c48a52 62%,#a36a3c 100%);background-size:cover,cover,cover}
.game-metrics{display:flex;justify-content:center;gap:24px;margin:15px auto 0;color:#b4c4c4;font-size:11px;flex-wrap:wrap}.game-metrics strong{color:#efce99;font-variant-numeric:tabular-nums}
.pit:focus-visible{outline:4px solid #fff0b5;outline-offset:3px}.pit.legal{animation:soft-glow 2.4s ease-in-out infinite alternate}@keyframes soft-glow{from{filter:brightness(1)}to{filter:brightness(1.10)}}
@media(max-width:700px){.board-scroll{scrollbar-color:#d7b478 #29373b;scrollbar-width:thin}.board{min-width:590px}.game-metrics{gap:12px}.hero{padding-top:23px}}

/* BerfinidaGames Mangala art direction */
:root{--bg:#082f35;--text:#fff7df;--muted:#c3ddd5;--accent:#ffc965;--mint:#66dec6;--edge:#5da698}
body{background:radial-gradient(circle at 50% -25%,#2e7d75 0,#104e52 36%,#082e37 70%,#061f2a 100%);background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background:radial-gradient(circle at 15% 20%,#ffe3a0 0 1px,transparent 2px),radial-gradient(circle at 80% 40%,#93f5df 0 1px,transparent 2px);background-size:73px 73px,97px 97px}
.shell{max-width:1180px}.topbar{height:62px}.brand img{width:38px;height:38px}.hero{padding:14px 0 8px}.hero h1{font-size:clamp(40px,6vw,68px);line-height:1;margin:4px 0;filter:drop-shadow(0 5px 0 #5d361f)}.hero p{margin:5px 0}.toolbar{margin:10px 0 12px}.mode-switch,.options select{background:#0c4148;border-color:#3a9189}.mode{color:#c8e5df}.mode.active{background:linear-gradient(135deg,#ffe3a2,#f1ad4f)}.primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(145deg,#ffe19b,#efa744);box-shadow:0 4px 0 #a66028,0 8px 17px #001d}.primary img,.subtle img{width:27px;height:27px;object-fit:contain}.icon-btn{width:43px;height:43px;padding:5px;display:grid;place-items:center;background:linear-gradient(#17636b,#0d424b);border:1px solid #71cabe;box-shadow:0 3px 0 #062a31}.icon-btn img{width:31px;height:31px;object-fit:contain}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.game-area{padding:14px 18px 15px;background:linear-gradient(180deg,#0d4851f2,#082f3af2);border-color:#65c8bd;border-radius:24px;box-shadow:0 25px 60px #001b24aa,inset 0 1px #bafff244}.score-panel{margin-bottom:9px}.turn-indicator{color:#3c260f;background:linear-gradient(#ffe3a1,#eeb358);border:0;box-shadow:0 3px 0 #9a622c}.avatar{background:linear-gradient(145deg,#f1bc69,#9a572c)!important;color:#fff8dd!important;box-shadow:inset 0 1px #fff8,0 3px 8px #0018}
.board-scroll{padding:3px 2px 12px}.board{padding:18px 22px 17px;border:4px solid #8a481f;background-image:linear-gradient(#f2b85f12,#71310e22),url("assets/wood.webp");background-size:cover;background-position:center;box-shadow:inset 0 0 0 5px #dda457,inset 0 0 0 8px #743913,inset 0 10px 23px #ffe09b66,0 10px 0 #4c2717,0 16px 22px #001a}.board:after{border-color:#ffe0a68f}.pit{height:88px;border-color:#be783b;background:radial-gradient(ellipse at 47% 42%,#613116,#3c1d10 75%);box-shadow:inset 0 7px 14px #170a07dd,inset 0 -2px #e2a76855,0 2px 1px #ffdfaa99}.store{background:radial-gradient(ellipse at 50% 48%,#603116,#371a0e 77%);border-color:#be783b;box-shadow:inset 0 9px 17px #150906dd,inset 0 -2px #e2a76855,0 2px 1px #ffdfaa99}.stone{width:21px;height:21px;border-radius:50%;background-position:center;background-size:180%;background-repeat:no-repeat;filter:drop-shadow(1px 2px 1px #160800aa);box-shadow:none}.stone-ivory{background-image:url("assets/stone-ivory.webp")}.stone-amber{background-image:url("assets/stone-amber.webp")}.stone-jade{background-image:url("assets/stone-jade.webp")}.stone-lavender{background-image:url("assets/stone-lavender.webp")}.stone-coral{background-image:url("assets/stone-coral.webp")}.pit-count,.store-count{background:#06454a;border-color:#70d5c4;color:#fff5d4}.store-slot small,.board-ornament{color:#552b15}.pit.legal{animation:soft-glow 1.45s ease-in-out infinite alternate}.pit.legal:hover{transform:translateY(-4px) scale(1.025)}.move-flash{animation:move-land .62s ease-out!important}.capture-flash{animation:capture .55s ease-out}.game-metrics{margin-top:8px}.status-line{color:#e6f6ef;padding:6px 0 2px}.game-bottom{margin-top:7px;padding-top:10px}.subtle{display:inline-flex;align-items:center;gap:5px;color:#e8f4ef;background:#0b4249;border:1px solid #4f9f96;border-radius:12px;padding:5px 10px}.subtle:hover{background:#145d64}.pause-dialog{text-align:center;width:min(420px,calc(100vw - 28px))}.pause-avatar{display:block;width:min(220px,60vw);height:200px;object-fit:contain;margin:4px auto 8px}.pause-dialog .primary{width:100%}
@keyframes move-land{0%{filter:brightness(2);transform:scale(.85)}55%{transform:scale(1.09)}100%{transform:scale(1)}}@keyframes capture{0%,100%{box-shadow:0 25px 60px #001b24aa}50%{box-shadow:0 0 45px #ffe386aa,inset 0 0 45px #ffe38644}}@keyframes soft-glow{from{filter:brightness(1)}to{filter:brightness(1.13);box-shadow:inset 0 7px 14px #170a07dd,0 0 0 3px #b7ffe3aa,0 0 18px #5ce5c477}}
@media(max-height:800px) and (min-width:701px){.hero{display:none}.toolbar{margin:8px 0}.topbar{height:54px}.game-area{padding-top:10px}.pit{height:78px}.store{height:174px}.board{padding-top:12px;padding-bottom:12px}}
@media(max-width:700px){.shell{padding:0 8px}.hero{padding:10px 0 4px}.hero h1{font-size:38px}.hero p,.eyebrow{font-size:9px}.toolbar{margin:7px 0 9px;gap:7px}.mode-switch{width:100%}.mode{flex:1;padding:9px 7px}.options{width:100%;justify-content:space-between}.options label{display:none}.options select{flex:1}.game-area{padding:10px 5px}.board{min-width:575px}.board-scroll{scroll-snap-type:x proximity}.score-panel{padding:0 5px}.top-actions{gap:5px}.icon-btn{width:39px;height:39px}.brand>span{display:none}.game-bottom{justify-content:center}.status-line{font-size:11px}.pause-avatar{height:170px}}
.pit:disabled{opacity:1;cursor:default}

/* Final board proportions */
.topbar{height:54px}.hero{padding:5px 0 4px}.hero .eyebrow{font-size:9px}.hero h1{font-size:clamp(38px,4.5vw,56px);letter-spacing:7px}.hero p{font-size:12px;margin:3px 0}.toolbar{margin:7px 0 9px}.game-area{padding-top:10px}.score-panel{max-width:1050px;margin:0 auto 8px}.board{width:100%;max-width:1050px;min-width:720px;margin:0 auto}.board-grid{grid-template-columns:82px minmax(0,1fr) 82px;gap:13px}.pit-row{gap:9px}.pit{height:auto;aspect-ratio:1;border-radius:50%}.store{width:78px;height:224px}.stone{width:34px;height:34px}.player-info{min-width:135px}.avatar{display:none}.turn-indicator{min-width:130px}.game-metrics,.status-line,.game-bottom{max-width:1050px;margin-left:auto;margin-right:auto}.game-bottom{padding-inline:4px}.totals{font-size:12px}.totals b{font-size:19px}.secondary-actions .subtle{min-height:42px}.board-ornament.top{height:14px}.board-ornament.bottom{margin-top:9px}
@media(max-width:700px){.hero{padding:5px 0 3px}.hero h1{font-size:34px}.board{min-width:690px}.board-grid{grid-template-columns:66px minmax(0,1fr) 66px;gap:9px}.store{width:64px;height:176px}.pit-row{gap:7px}.stone{width:30px;height:30px}.player-info{min-width:84px}.turn-indicator{min-width:92px}.score-panel{padding-inline:5px}.game-area{padding-top:8px}}
