@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;600;700&display=swap');
:root{--bg:#080b15;--card:#111625;--stroke:#283047;--text:#f9faff;--muted:#94a0b9;--neon:#b6ff45;--purple:#8f72ff;--danger:#ff5c87}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:radial-gradient(ellipse 55% 30% at 50% 0%,#222047 0%,transparent 90%),var(--bg);font-family:Cairo,system-ui,sans-serif;min-height:100vh}.noise{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:50px 50px;opacity:.4;z-index:-1}.shell{max-width:1160px;margin:0 auto;padding-left:24px;padding-right:24px}.top{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff11}.brand,.footer strong{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:29px;letter-spacing:-2px;color:#fff;text-decoration:none;direction:ltr}.brand span,.footer strong span{background:var(--neon);color:#0a1012;padding:1px 5px;border-radius:5px;margin-left:5px;font-size:20px;letter-spacing:-1px}.top-right{display:flex;gap:25px;align-items:center}.live{font:700 11px 'Space Grotesk';letter-spacing:1px;color:#c7d1e9}.live b{display:inline-block;width:7px;height:7px;border-radius:100%;background:var(--neon);box-shadow:0 0 12px var(--neon);margin-right:8px}.rules-link{color:#cbd4e7;text-decoration:none;font-size:13px}.hero{text-align:center;padding:54px 0 40px}.pill,.eyebrow{font-family:'Space Grotesk';letter-spacing:2px;font-size:10px;font-weight:700;color:var(--neon)}.pill{border:1px solid #7ba33c55;background:#a2ff2b0c;border-radius:30px;display:inline-block;padding:9px 18px}.hero h1{font-size:clamp(45px,7vw,83px);font-weight:900;line-height:1.2;margin:16px 0}.hero h1 em{font-style:normal;color:var(--neon);text-shadow:0 0 50px #b6ff4544}.hero p{margin:0 auto;max-width:680px;line-height:2;color:#afbad2;font-size:15px}.hero p strong{color:#fff}.hero-tags{display:flex;justify-content:center;gap:11px;margin-top:20px;flex-wrap:wrap}.hero-tags span{border:1px solid var(--stroke);background:#12182a;border-radius:30px;padding:5px 13px;font-size:11px;color:#b6c2d8}.body-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(305px,.95fr);gap:22px;align-items:start}.panel{background:linear-gradient(145deg,#151b2d,#0f1422);border:1px solid var(--stroke);border-radius:20px;box-shadow:0 12px 40px #00000026}.game-panel{padding:26px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel h2{font-size:23px;margin:2px 0 0;font-weight:900}.danger-badge{color:#ff8fa9;border:1px solid #ff5c8740;background:#ff5c8714;border-radius:8px;padding:7px 11px;font:700 11px 'Space Grotesk';white-space:nowrap}.versus{display:flex;align-items:center;justify-content:center;gap:55px;margin:27px auto 18px;direction:ltr}.fighter{display:flex;align-items:center;flex-direction:column;gap:2px;font:700 13px 'Space Grotesk'}.avatar{width:69px;height:69px;border-radius:17px;display:grid;place-items:center;font:700 37px 'Space Grotesk';margin-bottom:6px}.human{background:#b6ff4518;color:var(--neon);border:1px solid #b6ff4544}.bot{background:#8f72ff20;color:#ad96ff;border:1px solid #8f72ff66}.fighter small{font:600 10px 'Space Grotesk';color:#8794ad;letter-spacing:1px}.versus-center{font:700 20px 'Space Grotesk';color:#6f7c96;display:flex;align-items:center;flex-direction:column;gap:5px}.versus-center span{font:600 10px Cairo;white-space:nowrap}.status{text-align:center;font-size:14px;font-weight:800;min-height:28px;color:#dbe4f5}.board{width:min(100%,345px);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:11px auto 20px;direction:ltr}.cell{background:#20283c;border:1px solid #39445b;border-radius:13px;color:var(--neon);font:800 clamp(42px,7vw,75px) 'Space Grotesk';cursor:pointer;transition:transform .12s,border-color .15s,background .15s;display:grid;place-items:center}.cell:disabled{cursor:default}.cell:not(:disabled):hover{background:#2b354b;border-color:var(--neon);transform:scale(.97)}.cell.o{color:#a890ff}.cell.win{border-color:var(--neon);box-shadow:inset 0 0 20px #b6ff4518}.game-actions{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}.game-actions button{border-radius:11px;padding:12px 8px;font-weight:900;font-family:Cairo;cursor:pointer;font-size:12px}.primary{background:var(--neon);border:1px solid var(--neon);color:#101413}.secondary{background:#20283a;border:1px solid #39445b;color:#e9eefb}.game-actions button:disabled{opacity:.55;cursor:wait}.points{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--stroke);padding-top:18px;margin-top:22px;color:#adb9d1;font-size:13px}.points strong{font:700 28px 'Space Grotesk';color:var(--neon)}.points small{font-size:12px}.legend{display:flex;justify-content:space-between;gap:9px;margin-top:10px;font-size:12px;color:#a5b0c4}.legend .good{color:#b6ff45}.legend .bad{color:#ff85a5}.hint,.small-note{font-size:11px;line-height:1.9;color:#8b97af}.hint{margin-bottom:0}.side{display:grid;gap:19px}.side .panel{padding:23px}.progress-panel h2{margin:6px 0 13px;font-size:21px}.counter{display:flex;align-items:baseline;gap:8px;direction:ltr;justify-content:flex-end}.counter strong{color:var(--neon);font:700 clamp(27px,4vw,40px) 'Space Grotesk'}.counter span{font-size:13px;color:#bbc5d9}.progress-outer{height:10px;background:#343a50;border-radius:25px;overflow:hidden;margin:13px 0}.progress-inner{height:100%;background:linear-gradient(90deg,#8fdc23,var(--neon));border-radius:25px;transition:width .8s}.reward-box{display:flex;align-items:center;gap:11px;padding:14px;background:#20273a;border:1px solid #373f57;border-radius:12px;margin-top:18px}.reward-icon{font-size:28px}.reward-box strong{font:700 13px 'Space Grotesk'}.reward-box p{font-size:10px;color:#a5b2c8;margin:2px 0 0}.reward-box .lock{margin-right:auto}.prize-panel{background:linear-gradient(150deg,#252044,#131525);border-color:#53436c}.prize-title{font:700 49px 'Space Grotesk';color:#ffe58c;margin:14px 0 0;direction:ltr;text-align:right}.prize-title span{font-size:17px}.prize-panel h3{font-size:17px;margin:5px 0}.prize-panel p{font-size:12px;line-height:2;color:#c6c4d8}.notice{color:#ffcf92;font-size:11px;background:#ffb34c0d;border:1px solid #ffb34c3b;padding:8px;border-radius:8px}.stat-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #ffffff14;font-size:13px;color:#afbad0}.stat-row:last-child{border-bottom:0}.stat-row strong{font:700 16px 'Space Grotesk';color:#e9f3ff}.ad{margin:28px 0 45px;min-height:90px;border:1px dashed #424a5d;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#77849b;font-size:12px;text-align:center;padding:15px}.ad small{font:600 10px 'Space Grotesk';letter-spacing:3px}.rules-section{padding-bottom:60px;scroll-margin-top:20px}.rules-section h2{font-size:31px;margin:8px 0 20px}.rules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.rules-grid article{background:#121827;border:1px solid #293047;padding:18px;border-radius:13px}.rules-grid article>b{color:var(--neon);font:700 13px 'Space Grotesk'}.rules-grid h3{margin:7px 0;font-size:14px}.rules-grid p{font-size:11px;color:#a9b5ca;line-height:2;margin:0}.footer{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #222a3f;padding-top:25px;padding-bottom:25px}.footer strong{font-size:21px}.footer strong span{font-size:14px}.footer small,.footer>span{font-size:10px;color:#808da7}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:#242d42;border:1px solid #63728e;border-radius:12px;padding:12px 20px;color:#fff;font-size:13px;box-shadow:0 15px 40px #0009;transition:transform .2s;text-align:center;z-index:9;max-width:90vw}.toast.show{transform:translateX(-50%) translateY(0)}@media(max-width:850px){.body-grid{grid-template-columns:1fr}.side{grid-template-columns:1fr 1fr}.stats-panel{grid-column:1/-1}.rules-grid{grid-template-columns:1fr 1fr}}@media(max-width:550px){.shell{padding-left:14px;padding-right:14px}.top{height:65px}.brand{font-size:23px}.top-right{gap:12px}.live{font-size:9px}.rules-link{font-size:11px}.hero{padding:35px 0 28px}.hero h1{font-size:49px}.hero p{font-size:12px}.hero-tags span{font-size:9px}.game-panel{padding:15px}.panel h2{font-size:20px}.danger-badge{font-size:9px}.versus{gap:37px}.board{max-width:320px}.cell{font-size:60px}.side{grid-template-columns:1fr}.stats-panel{grid-column:auto}.rules-grid{grid-template-columns:1fr}.footer{flex-wrap:wrap}.footer small{width:100%;order:3}.ad{margin-top:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* V2: mobile-first gameplay, no horizontal overflow, comfortable touch controls */
html,body{width:100%;max-width:100%;overflow-x:hidden}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cell{min-width:0;min-height:0;user-select:none;-webkit-user-select:none}
.board{touch-action:manipulation}
.points strong{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
@media(max-width:700px){
  .shell{padding-inline:14px}
  .top{height:60px}
  .hero{padding:19px 0 18px}
  .hero h1{font-size:clamp(32px,9vw,48px);line-height:1.1;margin:8px 0}
  .hero h1 br{display:none}
  .hero p{font-size:12px;line-height:1.6}
  .hero-tags{gap:6px;margin-top:10px}
  .hero-tags span{padding:3px 8px;font-size:9px}
  .pill{font-size:9px;padding:5px 10px;letter-spacing:1px}
  .body-grid{display:flex;flex-direction:column;gap:13px}
  .game-panel{order:0;width:100%;padding:15px 14px}
  .side{order:1;width:100%;display:grid;grid-template-columns:1fr;gap:12px}
  .panel{border-radius:17px}
  .panel h2{font-size:19px}
  .panel-head .eyebrow{font-size:9px}
  .versus{margin:12px auto 8px;gap:clamp(15px,9vw,52px)}
  .avatar{width:48px;height:48px;font-size:29px;border-radius:12px}
  .fighter{font-size:11px}.fighter small{font-size:9px}
  .status{min-height:24px;font-size:13px}
  .board{width:min(100%,min(72dvh,350px));max-width:350px;gap:7px;margin:7px auto 12px}
  .cell{border-radius:11px;font-size:clamp(36px,13vw,66px)}
  .game-actions{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px}
  .game-actions button{padding:11px 6px;font-size:12px;min-height:46px}
  .points{margin-top:13px;padding-top:11px}.points strong{font-size:25px}
  .legend{margin-top:6px}.hint{margin-top:7px;line-height:1.5}
  .side .panel{padding:17px}.prize-title{font-size:39px}
  .ad{margin:16px 0 26px}.rules-section{padding-bottom:30px}
}
@media(max-width:380px){
  .shell{padding-inline:10px}.top-right{gap:7px}.top .brand{font-size:19px}
  .top .brand span{font-size:14px}.live{font-size:8px}
  .hero h1{font-size:31px}.hero-tags span{font-size:8px}
  .game-panel{padding:12px 10px}.versus{gap:17px}
  .board{width:min(100%,min(65dvh,305px))}
  .game-actions button{font-size:11px}
}
@media(hover:none){.cell:not(:disabled):hover{transform:none;background:#20283c;border-color:#39445b}.cell:not(:disabled):active{background:#303a53;transform:scale(.97)}}

/* V3: guarantee 9 equal-sized SQUARES regardless of text, desktop zoom or mobile viewport. */
.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: min(100%, 345px);
  aspect-ratio: 1 / 1;
  height: auto;
  align-content: stretch;
  justify-content: stretch;
}
.board > .cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  line-height: 1;
  overflow: hidden;
}
@media (max-width: 700px) {
  .board { width: min(100%, 350px, 72dvh); }
}
@media (max-width: 380px) {
  .board { width: min(100%, 305px, 65dvh); }
}

/* V4 Accounts and leaderboard */
.account-wrap,.ranking-wrap{padding:20px 24px;margin:0 0 16px}
.account-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.account-top h2,.ranking-wrap h2{margin:4px 0;font-size:20px}
.account-name{color:#adff3f;font-weight:800;unicode-bidi:plaintext}
.auth-form{display:grid;grid-template-columns:1fr 1fr auto auto;gap:9px;align-items:stretch}
.auth-form input{min-width:0;border-radius:11px;border:1px solid #364056;background:#161d2e;color:white;padding:12px;font:inherit;direction:ltr;text-align:left}
.auth-form button,#logoutBtn{border-radius:10px;padding:10px 16px;cursor:pointer}
.auth-form[hidden],#logoutBtn[hidden]{display:none!important}
.ranking-list{margin-top:12px;color:#b8c0d3}.ranking-row{display:grid;grid-template-columns:58px 1fr auto;gap:8px;padding:11px;border-bottom:1px solid #30364a;align-items:center}.ranking-row span:last-child{font-weight:800;color:#b2ff42;direction:ltr}
@media(max-width:700px){.account-wrap,.ranking-wrap{padding:15px;margin-bottom:12px}.auth-form{grid-template-columns:1fr 1fr}.auth-form input{grid-column:1/-1}.auth-form button{min-height:45px}.ranking-row{font-size:13px}}

/* V10 control bar and robust phone sizing */
.mode-chooser{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px auto 12px;max-width:345px}
.mode-chooser button{cursor:pointer;padding:12px 7px;color:#b5bdd1;background:#151b2c;border:1px solid #384257;border-radius:11px;font:700 12px inherit;font-weight:800;min-height:44px}
.mode-chooser button.mode-active{color:#bbff56;border-color:#bbff56;background:#23301d}
.mode-chooser button:disabled{opacity:.47;cursor:not-allowed}
.board{box-sizing:border-box;width:min(100%,345px,70dvh)!important;aspect-ratio:1/1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important}
.board>.cell{box-sizing:border-box;aspect-ratio:1/1;min-width:0;min-height:0}
@media(max-width:390px){.board{width:min(100%,310px,62dvh)!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}