/* XO — own look. 🎨 كارتون (default) = school notebook: lined paper, blue marker X, red marker O, pen-drawn grid ·
   🎯 عادي = dark glass with neon X (cyan) and O (pink). Marks are drawn stroke by stroke like a pen. */
:root{--bg:#0b0d1f;--bg2:#1c1f45;--ink:#eef0ff;--muted:#a3a8d6;--card:#14173a;--line:#2d3270;--acc:#7cf3ff;--acc2:#3aa6b9;--field:#0a0c22;
  --x:#5ce1ff;--o:#ff5fa8;--grid:#ffffff38;--paper:#10132e;--glowx:0 0 10px #5ce1ffaa;--glowo:0 0 10px #ff5fa8aa;
  color-scheme:dark;font-family:"Baloo Bhaijaan 2","Segoe UI",Tahoma,system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overflow-x:hidden;color:var(--ink)}
body{min-height:100vh;user-select:none;background:radial-gradient(110% 70% at 50% 0,var(--bg2),var(--bg) 70%) fixed,var(--bg)}
.page{width:min(100%,560px);margin:auto;padding:max(10px,env(safe-area-inset-top)) 12px max(24px,env(safe-area-inset-bottom))}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.topline .brand-line{margin:0;min-width:0}
.icon{flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:17px;cursor:pointer}
.theme-switch{display:flex;width:max-content;margin:0 auto 14px;padding:4px;gap:4px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.theme-switch button{border:0;border-radius:999px;padding:8px 16px;background:transparent;color:var(--muted);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.theme-switch button[aria-pressed="true"]{background:linear-gradient(180deg,#b5f7ff,var(--acc));color:#062a33}
.sinan-credit{margin:18px auto 0;text-align:center;color:var(--muted);font-size:11px;letter-spacing:1.5px;font-weight:800}
.sinan-credit b{color:var(--acc);font-size:14px}
[hidden]{display:none!important}

/* the marks: drawn like a pen stroke */
.mk{display:block;width:100%;height:100%;overflow:visible}
.mk path,.mk circle{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:11}
.mk.x path{stroke:var(--x);filter:drop-shadow(var(--glowx))}
.mk.o circle{stroke:var(--o);filter:drop-shadow(var(--glowo))}
.mk.draw path{stroke-dasharray:150;stroke-dashoffset:150;animation:pen .38s ease-out forwards}
.mk.draw circle{stroke-dasharray:175;stroke-dashoffset:175;transform:rotate(-90deg);transform-origin:50% 50%;animation:pen .42s ease-out forwards}
@keyframes pen{to{stroke-dashoffset:0}}

/* home */
.hero{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#1c2160,#0d1035);box-shadow:0 12px 28px #0006}
.hero h1{margin:0;font-size:40px;line-height:1;letter-spacing:2px;background:linear-gradient(90deg,var(--x),var(--o));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:4px 0 0;color:var(--muted);font-size:14px;font-weight:700}
.hero-marks{flex:none;display:flex;gap:2px;width:96px;height:48px}
.hero-marks .mk{width:48px;height:48px}
.hero-marks .mk.x{animation:tilt 2.4s ease-in-out infinite}.hero-marks .mk.o{animation:tilt 2.4s ease-in-out -1.2s infinite}
@keyframes tilt{50%{transform:rotate(-10deg) scale(1.08)}}
.card{padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 12px 26px #0005;margin-bottom:12px}
.lbl{display:block;margin:0 4px 6px;font-weight:800}
.inp{width:100%;height:50px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--field);color:var(--ink);font:inherit;font-size:18px;font-weight:700;user-select:text}
.inp:focus{outline:2px solid var(--acc)}
.opt{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:12px;font-weight:700;color:var(--muted)}
.pick{display:flex;gap:6px}
.pick button{min-width:46px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--field);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.pick button[aria-pressed="true"]{background:linear-gradient(180deg,#b5f7ff,var(--acc));color:#062a33;border-color:transparent}
.modes{display:grid;gap:10px}
.mode{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px;border:0;border-radius:20px;color:#fff;font:inherit;text-align:right;cursor:pointer;box-shadow:0 6px 0 #00000055}
.mode b{font-size:22px}.mode small{font-size:14px;font-weight:700;opacity:.92}
.mode.solo{background:linear-gradient(135deg,#3a86ff,#2949c9)}
.mode.duo{background:linear-gradient(135deg,#ff5fa8,#c2185b)}
.mode.local{background:linear-gradient(135deg,#20c997,#0b8a63)}
.mode:active{transform:translateY(4px);box-shadow:0 2px 0 #00000055}
.sub{margin:-4px 0 4px}.sub .opt{margin-top:0}
.msg{min-height:20px;text-align:center;font-weight:800;color:#ffb4a2}
.btn{display:block;width:100%;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:transparent;color:var(--ink);font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.btn.main{border:0;background:linear-gradient(180deg,#b5f7ff,var(--acc));color:#062a33;box-shadow:0 5px 0 var(--acc2)}
.btn.main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--acc2)}
h2{margin:0 0 6px;text-align:center}
.hint{text-align:center;color:var(--muted);font-weight:700;font-size:14px}
.share-row{display:grid;grid-template-columns:2fr 1fr;gap:8px}.share-row .btn{margin-top:0}
.wait{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 6px;font-size:18px}
.wait .mk{width:38px;height:38px}.wait .mk.draw path,.wait .mk.draw circle{animation-iteration-count:infinite;animation-duration:1.6s;animation-direction:alternate}

/* players */
.players{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:10px}
.pl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:16px;background:var(--card);min-width:0;transition:.2s}
.pl .nm{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .sc{font-size:22px;color:var(--acc)}
.pl .sym{width:26px;height:26px;display:block}
.pl.now{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),0 0 18px #7cf3ff55}
.tgt{font-weight:800;color:var(--muted)}
.turnbar{min-height:30px;margin:4px 0 10px;text-align:center;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;gap:6px}
.turnbar .sym{width:22px;height:22px;display:inline-block}
.turnbar.mine{color:var(--acc)}

/* the board */
.paper{position:relative;width:min(100%,420px);aspect-ratio:1;margin:0 auto;padding:4%;border-radius:22px;background:var(--paper);box-shadow:inset 0 0 0 1px #ffffff12,0 18px 40px #0007}
.board{position:relative;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:100%;height:100%}
.cell{position:relative;padding:12%;border:0;background:none;cursor:default;-webkit-appearance:none}
.cell:nth-child(3n+1),.cell:nth-child(3n+2){border-right:5px solid var(--grid)}
.cell:nth-child(-n+6){border-bottom:5px solid var(--grid)}
.board.mine .cell:empty{cursor:pointer}
.board.mine .cell:empty:hover::after,.board.mine .cell:empty:active::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--acc);opacity:.12}
.cell.last .mk{animation:pop .35s ease}
@keyframes pop{50%{transform:scale(1.12)}}
.cell.dim .mk{opacity:.35;transition:opacity .4s}
.win-line{position:absolute;inset:4%;width:92%;height:92%;pointer-events:none;overflow:visible}
.win-line line{stroke:#ffd23f;stroke-width:12;stroke-linecap:round;filter:drop-shadow(0 0 8px #ffd23faa);stroke-dasharray:400;stroke-dashoffset:400;opacity:0}
.win-line.on line{opacity:1;animation:pen .5s ease-out .15s forwards}
.rules{margin-top:14px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.rules summary{font-weight:800;cursor:pointer}
.rules p{color:var(--muted);font-weight:700;line-height:1.7}

/* toast + result */
.toast{position:fixed;left:50%;top:18%;z-index:40;transform:translateX(-50%);max-width:90vw;padding:10px 16px;border-radius:14px;background:#000c;color:#fff;font-weight:800;text-align:center}
.toast.on{animation:tin .3s ease}
@keyframes tin{from{opacity:0;transform:translate(-50%,-10px)}}
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#000a;backdrop-filter:blur(3px)}
.modal{width:min(100%,380px);padding:20px;border:1px solid var(--line);border-radius:24px;background:var(--card);text-align:center;animation:tin .3s ease}
.modal .big{font-size:58px;line-height:1.1}
.modal p{color:var(--muted);font-weight:800}

/* 🎨 كارتون: a school notebook — blue marker X, red marker O, pen-drawn grid */
body.kids{--bg:#efe6cf;--bg2:#fbf6e8;--ink:#253055;--muted:#6b6f8c;--card:#fffdf6;--line:#253055;--acc:#2f6fed;--acc2:#1d47a8;--field:#fff;
  --x:#1f5fe0;--o:#e5383b;--grid:#253055;--paper:#fffef8;--glowx:0 0 0 transparent;--glowo:0 0 0 transparent;color-scheme:light}
body.kids{background:radial-gradient(#25305512 1.5px,transparent 2px) 0 0/22px 22px,linear-gradient(180deg,var(--bg2),var(--bg)) fixed}
.kids .icon,.kids .theme-switch,.kids .card,.kids .pl,.kids .rules{border:2.5px solid var(--line);box-shadow:3px 3px 0 var(--line)}
.kids .theme-switch button[aria-pressed="true"],.kids .pick button[aria-pressed="true"]{background:#ffd23f;color:var(--ink)}
.kids .hero{border:3px solid var(--line);background:#fffef8;box-shadow:5px 5px 0 var(--line)}
.kids .hero h1{background:none;color:var(--ink);-webkit-text-fill-color:currentColor;text-shadow:3px 3px 0 #ffd23f}
.kids .inp{border:2.5px solid var(--line)}
.kids .pick button{border:2px solid var(--line);background:#fff}
.kids .mode{border:3px solid var(--line);box-shadow:0 6px 0 var(--line);text-shadow:1px 1px 0 #0004}
.kids .btn{border:2.5px solid var(--line);background:#fff}
.kids .btn.main{background:#ffd23f;color:var(--ink);box-shadow:0 5px 0 var(--line)}
.kids .pl .sc{color:var(--acc)}
.kids .pl.now{box-shadow:0 0 0 3px #ffd23f,3px 3px 0 var(--line)}
.kids .turnbar.mine{color:var(--x)}
.kids .paper{border:3px solid var(--line);box-shadow:6px 6px 0 var(--line);
  background:linear-gradient(90deg,transparent 9%,#e5383b55 9% calc(9% + 2px),transparent calc(9% + 2px)),repeating-linear-gradient(180deg,transparent 0 27px,#2f6fed2e 27px 29px),var(--paper)}
.kids .cell:nth-child(3n+1),.kids .cell:nth-child(3n+2){border-right:5px solid var(--grid);border-image:none}
.kids .board{transform:rotate(-.6deg)}
.kids .mk path,.kids .mk circle{stroke-width:10}
.kids .win-line line{stroke:#ffb703;filter:none;stroke-width:11;opacity:.0}
.kids .win-line.on line{opacity:.95}
.kids .modal{border:3px solid var(--line);background:#fffef8;box-shadow:6px 6px 0 var(--line)}
.kids .overlay{background:#25305599}
.kids .toast{background:#fff;color:var(--ink);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line)}
.kids .msg{color:#e5383b}
.kids .sinan-credit b{color:var(--acc)}