:root{--gold:#f2c75d;--gold2:#9d6d20;--cream:#fff7df;--ink:#061a16;--felt:#0b5a46;--danger:#ef6a61;--ok:#69e5a7}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020706;font-family:Arial,Helvetica,sans-serif;color:#fff}
button{font:inherit}
#viewport{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,#11352d,#010504 78%)}
#scaleRoot{position:absolute;width:1600px;height:900px;transform-origin:0 0;overflow:hidden;background:#071510}
.screen{position:absolute;inset:0;display:none}.screen.active{display:block}
.bg-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.bg-game{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.coverShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,12,9,.36),rgba(0,0,0,0),rgba(0,12,9,.36));pointer-events:none}
#menuContent{position:absolute;left:50%;top:61%;transform:translate(-50%,-50%);width:740px;text-align:center;padding-top:0}
.modeTitle{font-weight:900;letter-spacing:2.4px;color:#ffe49a;text-shadow:0 2px 8px #000;font-size:17px;margin-bottom:10px;display:inline-block;padding:6px 14px;border-radius:12px;background:rgba(0,0,0,.40);border:1px solid rgba(255,223,134,.55);line-height:1.15}
.menuButtons{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:700px;margin:auto;padding:12px;background:rgba(3,26,21,.38);border-radius:22px;backdrop-filter:blur(2px)}.menuWide{grid-column:1/3}
.btn{position:relative;border:2px solid rgba(255,223,134,.9);border-radius:18px;padding:17px 22px;min-height:66px;color:#fff9e7;font-weight:900;letter-spacing:.8px;font-size:22px;cursor:pointer;background:linear-gradient(#176a55,#0b3e34);box-shadow:0 8px 18px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.18);transition:.14s transform,.14s filter,.14s box-shadow;text-shadow:0 2px 3px #000}.btn:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 11px 23px rgba(0,0,0,.38),0 0 0 3px rgba(242,199,93,.12)}.btn:active{transform:translateY(1px) scale(.99)}.btn.secondary{background:linear-gradient(#3d4d48,#202b28);border-color:#b9cfc6}.btn.gold{color:#201607;background:linear-gradient(#ffe39a,#dca83e);border-color:#fff0ba;text-shadow:none}.btn.red{background:linear-gradient(#954d4b,#5b2625);border-color:#ffaaa6}.btn.small{font-size:18px;min-height:50px;padding:10px 16px;border-radius:14px}.btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.5);transform:none}
.menuStats{position:absolute;left:40px;bottom:38px;display:flex;gap:14px}.statChip{min-width:140px;padding:12px 16px;border:1px solid rgba(242,199,93,.55);border-radius:15px;background:rgba(1,17,14,.72);backdrop-filter:blur(3px);color:#ffe6a4;font-weight:800}
.menuHint{position:absolute;right:44px;bottom:42px;font-size:17px;color:#d9e9df;background:rgba(0,0,0,.34);padding:10px 16px;border-radius:14px}
#gameHud{position:absolute;left:72px;right:72px;top:62px;height:82px;display:flex;align-items:center;justify-content:space-between;z-index:5}.hudGroup{display:flex;gap:12px;align-items:center}.hudBox{min-width:155px;height:62px;padding:9px 16px;border:2px solid rgba(244,207,111,.82);border-radius:18px;background:rgba(3,31,26,.88);box-shadow:0 7px 18px rgba(0,0,0,.28)}.hudLabel{font-size:13px;color:#b8d4ca;font-weight:800;letter-spacing:1.5px}.hudValue{font-size:27px;line-height:30px;color:#fff2bd;font-weight:900}.iconBtn{width:58px;height:58px;border-radius:16px;border:2px solid #e9c46a;background:rgba(5,42,35,.9);color:#ffefbd;font-size:26px;font-weight:900;cursor:pointer;box-shadow:0 7px 14px rgba(0,0,0,.28)}
#aiArea{position:absolute;top:148px;left:170px;right:170px;height:105px;display:flex;justify-content:center;align-items:flex-start;gap:0;z-index:3}.aiTile{width:82px;height:auto;margin-left:-24px;filter:drop-shadow(0 4px 3px rgba(0,0,0,.42));transition:.2s}.aiTile:first-child{margin-left:0}.aiName{position:absolute;top:-5px;left:0;font-size:18px;font-weight:900;color:#d8ece4}.aiCount{position:absolute;top:-5px;right:0;color:#ffe4a1;font-weight:800}
#boardArea{position:absolute;left:188px;right:188px;top:265px;height:306px;border:2px solid rgba(255,224,135,.26);border-radius:42px;background:rgba(0,46,36,.16);box-shadow:inset 0 0 70px rgba(0,0,0,.18);z-index:2;overflow:hidden}
#boardLineWrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:visible}#boardLine{display:flex;align-items:center;justify-content:center;gap:5px;transform-origin:center center;transition:transform .25s ease}.boardTile{position:relative;flex:none;filter:drop-shadow(0 5px 4px rgba(0,0,0,.4));animation:tileIn .24s cubic-bezier(.2,.9,.3,1.25)}.boardTile.horizontal{width:92px}.boardTile.vertical{width:49px}.boardTile img{display:block;width:100%;height:auto;filter:none}.boardTile.flip img{transform:scaleX(-1)}
@keyframes tileIn{from{opacity:0;transform:translateY(-20px) scale(.75) rotate(-6deg)}to{opacity:1;transform:none}}
.endBadge{position:absolute;top:50%;transform:translateY(-50%);width:82px;height:82px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid rgba(245,208,107,.7);background:rgba(2,35,29,.82);color:#ffe39a;font-size:32px;font-weight:900;box-shadow:0 0 0 8px rgba(2,35,29,.3)}#leftEndBadge{left:18px}#rightEndBadge{right:18px}
#turnBanner{position:absolute;left:50%;top:247px;transform:translate(-50%,-50%);z-index:7;padding:8px 22px;border-radius:20px;background:#0c4e40;border:1px solid #e5c05f;color:#fff2c3;font-weight:900;letter-spacing:1px;box-shadow:0 5px 15px rgba(0,0,0,.3)}
#playerArea{position:absolute;left:155px;right:155px;bottom:54px;height:240px;z-index:6}.playerHeader{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 10px}.playerName{font-size:22px;font-weight:900;color:#f9e6ad}.playerActions{display:flex;gap:10px}.rewardBtn{border:2px solid #ffe59a;background:linear-gradient(#7b46ab,#4d2671);color:#fff;border-radius:14px;padding:10px 16px;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 5px 11px rgba(0,0,0,.26)}.actionBtn{border:2px solid #b9dfd0;background:linear-gradient(#126a55,#0a4337);color:#fff;border-radius:14px;padding:10px 18px;font-size:16px;font-weight:900;cursor:pointer}.actionBtn[disabled],.rewardBtn[disabled]{opacity:.45;cursor:not-allowed}
#playerHand{height:175px;display:flex;justify-content:center;align-items:flex-end;gap:6px;padding:12px 12px 6px;overflow:visible}.handTile{position:relative;cursor:pointer;flex:none;transition:transform .15s ease,filter .15s ease;margin-bottom:2px}.handTile img{display:block;width:100%;height:auto;filter:none}.handTile:hover{transform:translateY(-14px);filter:drop-shadow(0 8px 4px rgba(0,0,0,.35))}.handTile.playable::after{content:'';position:absolute;inset:-4px;border:3px solid rgba(255,235,176,.96);border-radius:12px;box-shadow:0 0 15px rgba(255,228,145,.42);pointer-events:none}.handTile.hinted{animation:hintPulse .75s infinite alternate}.handTile.hinted::after{content:'★';position:absolute;right:-7px;top:-18px;font-size:28px;color:#ffe174;text-shadow:0 2px 5px #000}.handTile.unplayable{opacity:.74;filter:none}
@keyframes hintPulse{from{transform:translateY(0)}to{transform:translateY(-18px)}}
#sideChooser{position:absolute;left:50%;top:560px;transform:translateX(-50%);z-index:12;display:none;gap:12px;background:rgba(2,28,23,.94);padding:10px 14px;border:2px solid #e7c462;border-radius:18px;box-shadow:0 10px 25px rgba(0,0,0,.4)}#sideChooser.show{display:flex}.sideLabel{align-self:center;color:#ffe3a0;font-weight:900;padding:0 8px}
.overlay{position:absolute;inset:0;background:rgba(0,9,7,.78);z-index:50;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px)}.overlay.show{display:flex}.panel{position:relative;width:620px;min-height:350px;padding:52px 60px 44px;text-align:center;background:url('assets/panel.webp') center/100% 100% no-repeat;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}.panel h2{margin:0 0 14px;font-size:46px;color:#ffe296;text-shadow:0 3px 5px #000}.panel p{font-size:20px;color:#e2eee9;line-height:1.4}.panelBtns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:24px}.resultCoins{font-size:29px;font-weight:900;color:#ffe282;margin:12px 0}.resultScore{font-size:23px;font-weight:900;color:#bbf1d8}.rewardBig{width:100%;margin-top:12px;background:linear-gradient(#8f55bf,#552b77)}
#rulesPanel{width:850px;min-height:570px;padding:42px 60px;background:rgba(3,31,26,.98);border:3px solid #e6bf5b;border-radius:34px;box-shadow:0 20px 45px rgba(0,0,0,.55);text-align:left}#rulesPanel h2{text-align:center;color:#ffe197;font-size:40px;margin:0 0 22px}#rulesPanel p,#rulesPanel li{font-size:19px;line-height:1.45;color:#e2eee9}#rulesPanel strong{color:#ffe093}.rulesColumns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.rulesFoot{text-align:center;margin-top:14px;color:#9fc6b8;font-size:15px}
#toast{position:absolute;left:50%;top:180px;transform:translateX(-50%) translateY(-12px);z-index:100;min-width:360px;max-width:800px;text-align:center;padding:14px 22px;border:2px solid #e9c768;border-radius:18px;background:rgba(3,36,29,.95);color:#fff0bd;font-size:20px;font-weight:900;opacity:0;pointer-events:none;transition:.22s}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#preloader{position:absolute;inset:0;z-index:200;background:#03110e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}.loaderLogo{width:520px}.loadBar{width:460px;height:18px;border-radius:12px;border:2px solid #d5ad50;padding:3px}.loadFill{height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,#90681e,#ffe495);transition:width .2s}.loadText{color:#e6d19b;font-weight:900;letter-spacing:2px}
#rotateNote{position:fixed;z-index:999;left:50%;bottom:12px;transform:translateX(-50%);display:none;padding:8px 13px;border-radius:12px;background:#111;color:#fff5d4;font-size:13px;border:1px solid #8f783d;pointer-events:none}


#menuContent .btn{min-height:58px;padding:11px 16px;border-radius:15px;font-size:18px;line-height:1.16}
#menuContent .btn span{display:inline-block;margin-top:5px;font-size:12px!important;line-height:1.2}
#leaderboardBtn{font-size:18px!important}
