:root{color-scheme:light;font-family:Patrick Hand,Segoe Print,Segoe UI,sans-serif;--ink: #1d2a35;--muted: #4f5b66;--panel: rgba(255, 255, 255, .86);--stroke: rgba(20, 35, 45, .18);--accent: #d93a3a;--accent-2: #1f6fd8;--p1: #d93a3a;--p2: #1f6fd8;--shadow: 0 18px 34px rgba(16, 26, 34, .14)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:#f5efe4;background-image:radial-gradient(circle at top,#fff7e9,#f1e7d8 55%,#eadfce);color:var(--ink);position:relative}#root{min-height:100vh;position:relative;z-index:1}.shell{position:relative;max-width:1200px;margin:0 auto;padding:48px clamp(16px,5vw,64px) 80px}.glow{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(80px);opacity:.25;z-index:0}.glow-a{background:#d93a3a59;top:-160px;left:-120px}.glow-b{background:#1f6fd859;bottom:-180px;right:-120px}.hero{position:relative;z-index:1;max-width:720px;margin-bottom:40px;animation:popIn .7s ease both}.eyebrow{text-transform:uppercase;letter-spacing:.32em;font-size:.75rem;color:var(--muted);margin:0 0 10px}.hero h1{font-family:Gloria Hallelujah,Patrick Hand,cursive;font-size:clamp(2.2rem,4.2vw,3.4rem);margin:0 0 12px}.lede{font-size:1.1rem;line-height:1.6;margin:0;color:var(--muted)}.app{position:relative;z-index:1;display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:32px;align-items:start}.panel{background:var(--panel);border:2px solid var(--stroke);border-radius:24px;padding:24px;box-shadow:var(--shadow);animation:popIn .7s ease both;animation-delay:calc(var(--i, 0) * .12s)}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.panel-head h2{margin:0;font-size:1.2rem}.pill{font-size:.75rem;padding:6px 12px;border-radius:999px;background:#1f6fd81f;color:var(--accent-2);font-weight:600;text-transform:uppercase;letter-spacing:.12em}.pill.busy{background:#d93a3a26;color:var(--accent)}.controls{display:grid;gap:16px}.field{display:grid;gap:8px;font-weight:600}select{border-radius:16px;border:2px dashed rgba(20,35,45,.2);padding:10px 12px;font-size:1rem;background:#fffaf2f2;font-family:inherit}.primary{border:2px solid rgba(217,58,58,.5);border-radius:16px;padding:12px 16px;font-size:1rem;background:linear-gradient(130deg,var(--accent),#f28f5b);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 10px 20px #d93a3a40;transition:transform .2s ease,box-shadow .2s ease}.primary:hover:not(:disabled){transform:translateY(-2px) rotate(-.5deg);box-shadow:0 16px 30px #d93a3a4d}.primary:disabled{cursor:not-allowed;opacity:.6}.status{margin-top:24px;padding:16px;border-radius:18px;background:#ffffffb3;border:2px dashed rgba(20,35,45,.2)}.status-title{margin:0 0 8px;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:var(--muted)}.status-text{margin:0 0 8px;font-size:1.05rem}.status-hint{margin:0;font-size:.85rem;color:var(--muted)}.board-wrap{animation:popIn .7s ease both;animation-delay:calc(var(--i, 0) * .12s)}.scoreboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.score-card{background:var(--panel);border:2px solid var(--stroke);border-radius:20px;padding:16px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}.score-card strong{font-family:Gloria Hallelujah,Patrick Hand,cursive;font-size:2rem}.score-card.player-1{border-color:#d93a3a80}.score-card.player-1 strong{color:var(--p1)}.score-card.player-2{border-color:#1f6fd880}.score-card.player-2 strong{color:var(--p2)}.score-card.active{transform:translateY(-4px) rotate(-.8deg);box-shadow:0 20px 40px #141e282e;animation:wiggle 1.6s ease-in-out infinite}.board-shell{position:relative;background:#fff8ea;border-radius:28px;border:2px solid var(--stroke);padding:clamp(14px,2vw,24px);box-shadow:var(--shadow);overflow:hidden;width:min(70vmin,640px);max-width:100%;aspect-ratio:1 / 1;display:grid;place-items:center}.board-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url(/assets/background-B9uc9qmG.png);background-size:cover;background-position:center;opacity:.7;filter:saturate(1.05) contrast(.95);z-index:0}.board-shell:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,transparent 40%,rgba(24,32,38,.08));opacity:.35;pointer-events:none;z-index:0}.board{--gap: clamp(3px, .6vw, 8px);--dot-ratio: .32;--cell-size: calc( (100% - (var(--grid) - 1) * var(--gap)) / (var(--size) + (var(--size) + 1) * var(--dot-ratio)) );--dot-size: calc(var(--cell-size) * var(--dot-ratio));--edge-width: clamp(3px, .45vw, 6px);display:grid;grid-template-columns:var(--dot-size) repeat(var(--size),var(--cell-size) var(--dot-size));grid-template-rows:var(--dot-size) repeat(var(--size),var(--cell-size) var(--dot-size));gap:var(--gap);justify-content:center;align-content:center;transition:transform .3s ease;position:relative;z-index:1;width:100%;height:100%}.board.player-1{--preview-color: rgba(217, 58, 58, .6)}.board.player-2{--preview-color: rgba(31, 111, 216, .6)}.board-placeholder{min-height:280px;display:grid;place-items:center;font-size:1rem;color:var(--muted);position:relative;z-index:1}.dot{width:100%;height:100%;display:grid;place-items:center;background:transparent;position:relative;z-index:2}.dot:after{content:"";width:max(4px,calc(var(--dot-size) * .7));height:max(4px,calc(var(--dot-size) * .7));border-radius:50%;background:var(--ink);box-shadow:0 1px #0003,0 0 0 3px #16222b14}.edge{width:100%;height:100%;background:transparent;border:none;padding:0;position:relative;cursor:pointer;display:block;--edge-color: rgba(20, 35, 45, .35);--edge-rotate: 0deg;--edge-opacity: .35;z-index:2}.edge .stroke{position:absolute;left:50%;top:50%;border-radius:999px;background-color:var(--edge-color);background-image:radial-gradient(circle at 18% 30%,rgba(255,255,255,.25),transparent 55%),radial-gradient(circle at 82% 70%,rgba(0,0,0,.15),transparent 60%),repeating-linear-gradient(90deg,#fff3 0,#fff3 6px,#0000001a 6px,#0000001a 9px);background-blend-mode:multiply;opacity:var(--edge-opacity);filter:drop-shadow(0 1px 0 rgba(0,0,0,.2)) drop-shadow(0 0 2px rgba(0,0,0,.25)) blur(.1px);transform:translate(-50%,-50%) rotate(var(--edge-rotate));transition:opacity .2s ease,background-color .2s ease;pointer-events:none;mix-blend-mode:multiply}.edge.vertical .stroke{background-image:radial-gradient(circle at 30% 18%,rgba(255,255,255,.25),transparent 55%),radial-gradient(circle at 70% 82%,rgba(0,0,0,.15),transparent 60%),repeating-linear-gradient(0deg,#fff3 0,#fff3 6px,#0000001a 6px,#0000001a 9px)}.edge .stroke.shadow{opacity:.45;filter:blur(.6px);transform:translate(-50%,-50%) rotate(var(--edge-rotate)) translate(1px,1px)}.edge.horizontal{--edge-rotate: -1.8deg}.edge.vertical{--edge-rotate: 1.6deg}.edge.horizontal .stroke{width:130%;height:var(--edge-width)}.edge.vertical .stroke{width:var(--edge-width);height:130%}.edge.open:hover{--edge-color: var(--preview-color);--edge-opacity: .9}.edge.open:hover .stroke.shadow{opacity:.5}.edge.owner-1{--edge-color: var(--p1);--edge-opacity: 1}.edge.owner-2{--edge-color: var(--p2);--edge-opacity: 1}.edge.just-drawn.horizontal .stroke,.edge.just-drawn.horizontal .stroke.shadow{animation:draw-line-h .42s ease-out}.edge.just-drawn.vertical .stroke,.edge.just-drawn.vertical .stroke.shadow{animation:draw-line-v .42s ease-out}.pen-tip{position:absolute;width:16px;height:14px;background:radial-gradient(circle at 35% 30%,#fdf6ef 0,#fdf6ef 25%,#1b1f24 40%,#0f1317 75%);clip-path:polygon(50% 0,100% 35%,82% 100%,18% 100%,0 35%);opacity:0;pointer-events:none;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}.edge.horizontal .pen-tip{top:50%;left:8%;transform:translate(-50%,-50%) rotate(18deg)}.edge.vertical .pen-tip{left:50%;top:8%;transform:translate(-50%,-50%) rotate(108deg)}.edge.just-drawn.horizontal .pen-tip{animation:pen-h .42s ease-out}.edge.just-drawn.vertical .pen-tip{animation:pen-v .42s ease-out}.edge.locked{cursor:default}.edge:disabled{pointer-events:none}.box{width:calc(100% + (var(--gap) * 2));height:calc(100% + (var(--gap) * 2));margin:calc(var(--gap) * -1);border-radius:4px;background:transparent;position:relative;overflow:hidden;pointer-events:none;z-index:0}.box:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:4px;opacity:0;background-repeat:no-repeat;background-position:center;background-size:100% 100%;transform:none;filter:blur(.1px)}.box.owner-1,.box.owner-2{background:transparent}.box.owner-1:after{opacity:.95;background-image:url(/assets/gribouillage_rouge-DvwqiTJ0.png)}.box.owner-2:after{opacity:.95;background-image:url(/assets/gribouillage_bleu-DWZPU2vr.png)}@keyframes popIn{0%{opacity:0;transform:translateY(14px) rotate(-.3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes wiggle{0%,to{transform:translateY(-4px) rotate(-.8deg)}50%{transform:translateY(-6px) rotate(.6deg)}}@keyframes draw-line-h{0%{transform:translate(-50%,-50%) rotate(var(--edge-rotate)) scaleX(.12);opacity:.65}75%{transform:translate(-50%,-50%) rotate(var(--edge-rotate)) scaleX(1.02);opacity:.95}to{transform:translate(-50%,-50%) rotate(var(--edge-rotate)) scaleX(1);opacity:1}}@keyframes draw-line-v{0%{transform:translate(-50%,-50%) rotate(var(--edge-rotate)) scaleY(.12);opacity:.65}75%{transform:translate(-50%,-50%) rotate(var(--edge-rotate)) scaleY(1.02);opacity:.95}to{transform:translate(-50%,-50%) rotate(var(--edge-rotate)) scaleY(1);opacity:1}}@keyframes pen-h{0%{left:6%;opacity:1;transform:translate(-50%,-50%) rotate(12deg) scale(.95)}70%{left:94%;opacity:1;transform:translate(-50%,-50%) rotate(22deg) scale(1)}to{left:94%;opacity:0;transform:translate(-50%,-50%) rotate(18deg) scale(.9)}}@keyframes pen-v{0%{top:6%;opacity:1;transform:translate(-50%,-50%) rotate(98deg) scale(.95)}70%{top:94%;opacity:1;transform:translate(-50%,-50%) rotate(116deg) scale(1)}to{top:94%;opacity:0;transform:translate(-50%,-50%) rotate(108deg) scale(.9)}}@media (max-width: 900px){.app,.scoreboard{grid-template-columns:1fr}}