:root{
  --bg:#07070b;
  --bg2:#12121a;
  --panel:#1b1017;
  --panel2:#25141a;
  --line:rgba(255,38,38,.42);
  --light:#e8d0ac;
  --dark:#aa7c57;
  --white:#f6f6f6;
  --black:#151515;
  --accent:#f20b0b;
  --accent2:#ff4545;
  --gold:#ffd600;
  --shadow:0 24px 70px rgba(0,0,0,.52);
  --board:min(72dvh,56vw,640px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;min-height:100%;background:#08080d;font-family:Arial Rounded MT Bold,Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:#fff;user-select:none;overscroll-behavior:none}
body{overflow:hidden}
button,select{font:inherit}
button{touch-action:manipulation;user-select:none}
.app{position:relative;width:100vw;height:100dvh;min-height:520px;overflow:hidden;background:radial-gradient(circle at 10% 8%,rgba(242,11,11,.36),transparent 28%),radial-gradient(circle at 92% 88%,rgba(242,11,11,.18),transparent 34%),linear-gradient(135deg,#08080d 0%,#14141e 52%,#0a0a10 100%)}
.app:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 52px,transparent 52px 122px),repeating-linear-gradient(-45deg,rgba(0,0,0,.16) 0 80px,transparent 80px 160px);opacity:.34;pointer-events:none}
.brand-bar{position:absolute;z-index:20;left:clamp(12px,2vw,24px);right:0;top:10px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:12px}
.brand-logo{width:min(300px,45vw);height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.stars{background:rgba(12,12,18,.78);border:1px solid rgba(242,11,11,.38);border-radius:0 0 0 16px;padding:10px 16px;color:var(--gold);font-weight:900;letter-spacing:2px;text-shadow:0 2px 2px #000;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.stars span{color:#fff;letter-spacing:0;margin-right:6px}
.screen{position:absolute;inset:0;display:none;place-items:center;padding:clamp(18px,4vw,44px);z-index:2;overflow:hidden}
.screen.active{display:grid}
.glass{background:linear-gradient(135deg,rgba(41,18,25,.88),rgba(12,12,19,.82));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.intro-screen{grid-template-rows:1fr auto 1fr;gap:clamp(22px,5vh,38px)}
.round-play{width:clamp(112px,17vw,150px);height:clamp(112px,17vw,150px);border-radius:50%;border:8px solid #fff;background:radial-gradient(circle at 35% 25%,#fff700 0 22%,#ffc000 23% 55%,#ff8200 56% 100%);box-shadow:0 12px 0 #e95100,0 24px 32px rgba(0,0,0,.4);cursor:pointer;transition:.18s transform,.18s filter;display:grid;place-items:center}
.round-play:hover,.main-btn:hover,.player-card:hover{transform:translateY(-3px) scale(1.02)}
.round-play:active,.main-btn:active,.player-card:active,.game-actions button:active{transform:scale(.97)}
.round-play span{display:block;margin-left:10%;width:0;height:0;border-top:clamp(26px,4vw,34px) solid transparent;border-bottom:clamp(26px,4vw,34px) solid transparent;border-left:clamp(42px,6vw,54px) solid #fff}
.intro-card{width:min(1100px,92vw);padding:clamp(22px,4vw,34px);text-align:center;border-radius:22px}
.intro-card h1{font-size:clamp(42px,7vw,86px);margin:0 0 12px;text-shadow:0 7px 5px #000;letter-spacing:.02em}
.intro-card p{font-size:clamp(17px,2.7vw,34px);line-height:1.25;margin:0;text-shadow:0 5px 5px #000}
.mouse-icon{font-size:42px;margin-top:14px;opacity:.9}
.home-screen,.mode-screen,.game-screen{background:transparent}
.hero-logo{text-align:center;margin-top:min(8vh,60px);text-shadow:0 10px 0 rgba(0,0,0,.35),0 8px 25px #000}
.hero-logo small{display:inline-block;background:#444;padding:8px 35px;font-size:clamp(18px,3vw,28px);transform:skew(-12deg) rotate(-2deg);box-shadow:8px 0 #333,-8px 0 #333}
.hero-logo strong{display:block;font-size:clamp(58px,12vw,128px);line-height:.82;letter-spacing:3px}
.mini-board{display:grid;grid-template-columns:repeat(2,clamp(74px,13vw,100px));grid-template-rows:repeat(2,clamp(74px,13vw,100px));gap:10px;background:#050505;border:10px solid #050505;border-radius:10px;box-shadow:var(--shadow);margin-top:-1vh}
.mini-board div{display:grid;place-items:center;font-size:clamp(54px,9vw,76px)}
.mini-board div:nth-child(1),.mini-board div:nth-child(4){background:var(--dark)}
.mini-board div:nth-child(2),.mini-board div:nth-child(3){background:var(--light)}
.main-btn{min-width:min(245px,74vw);border:5px solid #eee;border-radius:32px;background:linear-gradient(#3d3d3d 0 45%,#151515 46%);color:#fff;font-size:clamp(21px,4vw,28px);font-weight:900;padding:14px 46px;box-shadow:0 8px 15px rgba(0,0,0,.5);cursor:pointer;transition:.18s}
.settings-btn,.back-btn{position:absolute;z-index:30;border:4px solid rgba(255,255,255,.92);border-radius:50%;background:#262631;color:#fff;width:clamp(52px,7vw,70px);height:clamp(52px,7vw,70px);right:clamp(12px,3vw,42px);top:clamp(54px,7vw,70px);font-size:clamp(24px,4vw,34px);box-shadow:0 7px 14px rgba(0,0,0,.5);cursor:pointer;display:grid;place-items:center}
.back-btn{left:10px;right:auto;top:10px;background:radial-gradient(circle,#ffb500,#ff6a00);font-size:clamp(42px,6vw,58px);line-height:1}
.in-game{transform:scale(.78);top:10px}.in-game:hover{transform:scale(.82)}
.mode-wrap{display:flex;align-items:center;justify-content:center;gap:min(7vw,80px);margin-top:min(14vh,110px);width:100%;flex-wrap:wrap}
.player-card{background:transparent;border:0;color:#fff;cursor:pointer;text-align:center;transition:.18s;min-width:120px}
.player-card.selected .piece-card{outline:6px solid #ff1616;box-shadow:0 0 35px rgba(255,0,0,.7)}
.piece-card{display:grid;place-items:center;width:clamp(104px,16vw,140px);height:clamp(104px,16vw,140px);border:6px solid #fff;border-radius:24px;background:#fff;font-size:clamp(74px,12vw,104px);margin:0 auto 14px;box-shadow:var(--shadow)}
.piece-card.black{color:#0b0b0b}.piece-card.white{color:#e9e9e9;text-shadow:0 3px 2px #777}.player-card b{font-size:clamp(19px,3vw,26px);text-shadow:0 5px 5px #000}.vs{font-size:clamp(40px,7vw,64px);font-weight:900;text-shadow:0 5px 8px #000}
.game-screen{padding:clamp(12px,2.8vw,25px) clamp(10px,4vw,42px);overflow:hidden;align-content:center}
.game-layout{display:grid;grid-template-columns:minmax(118px,180px) var(--board) minmax(118px,180px);align-items:center;justify-content:center;gap:clamp(16px,3vw,46px);width:100%;max-width:1280px;min-height:0}
.board-wrap{position:relative;justify-self:center;display:grid;place-items:center}
.board{width:var(--board);height:var(--board);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);box-shadow:0 10px 0 rgba(0,0,0,.35),0 20px 40px rgba(0,0,0,.45);border-radius:4px;overflow:hidden;touch-action:manipulation;background:#111}
.square{position:relative;display:grid;place-items:center;font-size:clamp(30px,calc(var(--board) / 12),68px);cursor:pointer;transition:.13s transform,.13s filter;border:0;padding:0;color:inherit;min-width:0;min-height:0}
.square.light{background:var(--light)}.square.dark{background:var(--dark)}.square:hover{filter:brightness(1.08)}
.piece{display:block;line-height:1;transform:translateY(-4px);filter:drop-shadow(0 7px 2px rgba(0,0,0,.38));transition:transform .18s;pointer-events:none}
.piece.white{color:#f5f5f5;text-shadow:0 2px 1px #777}.piece.black{color:#111;text-shadow:0 2px 1px #555}
.square.selected{box-shadow:inset 0 0 0 6px #ffe600}.square.move:after{content:"";width:28%;height:28%;border-radius:50%;background:rgba(30,150,40,.55);box-shadow:0 0 0 8px rgba(255,255,255,.15)}.square.capture:after{content:"";position:absolute;inset:8%;border:5px solid rgba(255,0,0,.72);border-radius:50%}.square.last{box-shadow:inset 0 0 0 999px rgba(255,230,0,.22)}.square.check{animation:pulse 1s infinite;box-shadow:inset 0 0 0 999px rgba(255,0,0,.35)}@keyframes pulse{50%{filter:brightness(1.35)}}
.files{display:grid;grid-template-columns:repeat(8,1fr);width:var(--board);font-size:clamp(13px,2vw,22px);font-weight:900;color:rgba(255,255,255,.46);text-align:center;margin-top:7px}.ranks{position:absolute;right:calc(100% + 12px);top:0;height:var(--board);display:grid;grid-template-rows:repeat(8,1fr);font-size:clamp(13px,2vw,22px);font-weight:900;color:rgba(255,255,255,.46);align-items:center}
.side-panel{border:5px solid #f2f2f2;border-radius:24px;background:#111;padding:12px 10px 18px;text-align:center;box-shadow:var(--shadow);min-height:210px;display:grid;gap:7px;align-content:center;max-width:190px;justify-self:center;width:100%}.side-panel.active{box-shadow:0 0 0 6px #ffe600,0 0 35px #ffe600}.piece-box{background:#fff;color:#111;border-radius:17px;height:100px;display:grid;place-items:center;font-size:72px}.clock{font-size:clamp(22px,3vw,29px);font-weight:900;text-shadow:0 4px 4px #000}.side-panel b{font-size:clamp(16px,2vw,22px)}.side-panel small{font-size:clamp(11px,1.7vw,17px);color:#bbb;font-weight:900}.last-move{font-size:clamp(14px,2vw,23px);font-weight:900}.game-actions{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:10px;z-index:25}.game-actions button,.modal-actions button,.blocker button{border:2px solid #fff;border-radius:16px;background:#111;color:#fff;font-weight:900;padding:10px 16px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.34)}
.modal,.blocker{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.66);z-index:100;padding:18px}.modal.show,.blocker.show{display:grid}.modal-card,.blocker-card{width:min(520px,92vw);border-radius:24px;padding:24px;text-align:center}.settings-grid{display:grid;gap:12px;text-align:left}.settings-grid label{display:grid;gap:6px;font-weight:900}.settings-grid select{padding:12px;border-radius:12px;border:0;background:#fff;color:#111;font-weight:900}.modal-actions{margin-top:18px}.blocker-card img{width:70px}.blocker-card h2{margin-bottom:4px}
.devtools-open:after{content:"Protected View";position:fixed;inset:0;display:grid;place-items:center;background:#07070b;color:#fff;font-size:42px;font-weight:900;z-index:9999}

.portal-btn{position:absolute;z-index:35;left:clamp(10px,2vw,22px);top:clamp(72px,8vw,92px);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 16px;border:2px solid rgba(242,11,11,.72);border-radius:999px;background:rgba(15,15,22,.78);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.38);backdrop-filter:blur(10px);transition:transform .18s,background .18s}.portal-btn:hover{transform:translateY(-2px);background:rgba(242,11,11,.22)}.portal-btn:active{transform:scale(.97)}
@media (max-width:1050px){:root{--board:min(66dvh,56vw,560px)}.game-layout{grid-template-columns:minmax(104px,150px) var(--board) minmax(104px,150px);gap:18px}.piece-box{height:80px;font-size:60px}.side-panel{min-height:175px;border-width:4px}}
@media (max-width:820px){body{overflow:hidden}.brand-logo{width:min(190px,52vw)}.stars{font-size:12px;padding:7px 9px}.screen{padding:16px}.game-screen{align-content:start;padding-top:68px;overflow:hidden}.game-layout{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:10px;max-width:100%;margin:auto;align-content:start}.board-wrap{grid-column:1/-1;grid-row:1}.side-panel{grid-row:2;position:relative;z-index:5;min-height:auto;width:100%;max-width:170px;padding:8px;border-width:4px;border-radius:18px}.player-white{grid-column:1}.player-black{grid-column:2}.piece-box{height:54px;font-size:42px;border-radius:12px}.clock{font-size:19px}.side-panel b,.last-move{font-size:13px}.side-panel small{font-size:11px}.ranks{display:none}:root{--board:min(94vw,calc(100dvh - 220px),560px)}.files{width:var(--board);margin-top:5px}.game-actions{bottom:6px;gap:6px;width:100%;justify-content:center;padding:0 8px}.game-actions button{padding:8px 10px;font-size:12px}.settings-btn{right:12px;top:52px;width:54px;height:54px;font-size:24px;border-width:3px}.back-btn{width:54px;height:54px;border-width:3px}.mode-wrap{gap:18px;margin-top:10vh}.piece-card{width:104px;height:104px;font-size:76px}.vs{font-size:42px;order:3;width:100%;text-align:center}.intro-card p{font-size:20px}.intro-screen{gap:18px}.round-play{width:112px;height:112px}.hero-logo{margin-top:5vh}.mini-board{margin-top:0}.main-btn{padding:12px 34px}}
@media (max-width:480px){.brand-bar{top:8px}.brand-logo{width:150px}.stars{display:none}.intro-card{padding:20px 16px}.intro-card h1{font-size:40px}.intro-card p{font-size:17px}.hero-logo strong{font-size:56px}.hero-logo small{font-size:17px;padding:6px 24px}.mini-board{grid-template-columns:repeat(2,72px);grid-template-rows:repeat(2,72px);border-width:8px;gap:8px}.mini-board div{font-size:52px}.mode-wrap{gap:12px}.player-card{min-width:104px}.piece-card{width:96px;height:96px;font-size:70px}.player-card b{font-size:17px}:root{--board:min(96vw,calc(100dvh - 220px))}.square.selected{box-shadow:inset 0 0 0 4px #ffe600}.square.capture:after{border-width:3px}.side-panel{max-width:155px}.game-screen{padding-left:8px;padding-right:8px}.game-actions button{font-size:11px;padding:8px}.settings-grid select{font-size:16px}}
@media (max-height:620px) and (orientation:landscape){.brand-logo{width:150px}.stars{display:none}.screen{padding:10px 14px}.game-screen{padding:8px 74px 8px 74px;align-content:center}.settings-btn.in-game{right:8px;top:8px}.back-btn.in-game{left:8px;top:8px}.game-layout{grid-template-columns:minmax(92px,120px) minmax(260px,70dvh) minmax(92px,120px);grid-template-rows:auto;gap:12px}:root{--board:min(72dvh,54vw)}.board-wrap{grid-column:auto;grid-row:auto}.side-panel{grid-row:auto;max-width:120px;padding:6px;border-radius:16px}.player-white{grid-column:auto}.player-black{grid-column:auto}.piece-box{height:46px;font-size:36px}.clock{font-size:16px}.last-move,.side-panel b{font-size:11px}.side-panel small{display:none}.files{display:none}.game-actions{display:none}.hero-logo{margin-top:0}.hero-logo strong{font-size:60px}.mini-board{grid-template-columns:repeat(2,66px);grid-template-rows:repeat(2,66px)}.main-btn{font-size:20px;padding:8px 30px}.intro-screen{grid-template-rows:auto auto;align-content:center}.round-play{width:96px;height:96px}.intro-card p{font-size:16px}}
@media (pointer:coarse){.square:hover{filter:none}.game-actions button,.main-btn,.player-card,.settings-btn,.back-btn{min-height:44px}}

@media (max-width:820px){.portal-btn{top:8px;left:74px;min-height:42px;padding:8px 12px;font-size:13px}.brand-bar{padding-left:0}}
@media (max-width:480px){.portal-btn{left:64px;font-size:12px;padding:7px 10px}}