/* Family arcade: scoped to Family screens so toddler games keep their own worlds. */
body.in-family{background:radial-gradient(ellipse at 12% 15%,#243d79,transparent 48%),radial-gradient(ellipse at 95% 65%,#462962,transparent 55%),#101c36;color:#edf6ff}
body.in-family>header{background:linear-gradient(100deg,#15243e,#223558);border-bottom:1px solid #547396;box-shadow:0 4px 25px #050d2255}
body.in-family header .brand{color:#e0f9ff}
body.in-family main{background:transparent}
.family-screen,.family-game-screen{position:relative;isolation:isolate}
.family-screen:before,.family-game-screen:before{content:'';position:fixed;inset:80px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(#83cfff07 1px,transparent 1px),linear-gradient(90deg,#83cfff07 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,#000 80%)}
.family-heading h1,.family-game-head h1{color:#f0f8ff;letter-spacing:-1.5px;text-shadow:0 3px 0 #253c69,0 0 30px #71d8ff35}
.family-heading .home-kicker,.family-game-head .home-kicker{color:#8be9f0;letter-spacing:3px}
.family-heading p{color:#b7cbe2}
.family-game-panel{position:relative;width:min(100%,760px);box-sizing:border-box;border:1px solid #6d87ab;border-radius:32px;background:linear-gradient(140deg,#2c4060ed,#16253fea 65%,#293451);box-shadow:inset 0 2px 1px #a3d8ff55,inset 0 -2px 0 #070e24,0 9px 0 #0c142a,0 24px 50px #050a2066;padding:22px}
.family-game-panel:before{content:'';position:absolute;top:-2px;left:20%;right:20%;height:3px;border-radius:3px;background:#80edf0;box-shadow:0 0 18px #63dcea;pointer-events:none}
.family-status{display:table;margin:15px auto 20px;padding:8px 24px;border-radius:40px;color:#e1faff;background:#0d1930;border:1px solid #557691;box-shadow:inset 0 2px 6px #0005;font-size:clamp(20px,3vw,27px)}
.family-rule,.family-mode-note{color:#b8cce0;font-weight:600;line-height:1.5}
.family-nav button,.family-modes button,.family-again{border:1px solid #7995b7;background:linear-gradient(#405774,#263951);color:#eaf5ff;box-shadow:inset 0 1px #fff5,0 4px 0 #0b1428,0 6px 10px #0003;border-radius:15px;transition:transform .15s,box-shadow .15s;min-height:52px}
.family-modes{gap:14px}.family-modes button[aria-pressed=true],.family-again{background:linear-gradient(#a8f6f1,#66cbd8);color:#143c52;border-color:#cefefa;box-shadow:inset 0 1px white,0 4px #32798e,0 0 18px #6ddfeb20}
.family-nav button:active,.family-modes button:active,.family-again:active{transform:translateY(2px)}
.family-game-screen button:focus-visible,.family-screen button:focus-visible{outline:3px solid #fff09d;outline-offset:4px}
.tic-board{background:linear-gradient(145deg,#536b8e,#263b5b 35%,#13203b);border:2px solid #7e9fc6;border-radius:29px;padding:14px;gap:12px;box-shadow:inset 0 2px 2px #d3f2ff80,0 9px 0 #080f24,0 11px 0 #4d6888,0 22px 25px #0005}
.tic-cell{background:radial-gradient(ellipse at 35% 12%,#385d82,#203b59 65%,#192d48);border:1px solid #7296b5;border-radius:20px;box-shadow:inset 0 2px 2px #bbecff35,inset 0 -6px 7px #0b192955,0 4px 0 #0a182c;color:#a6f7fa;transition:background .2s,box-shadow .2s,transform .15s}
.tic-cell:not(:disabled):hover{background:linear-gradient(#426f95,#284461);box-shadow:inset 0 0 0 2px #8ae8f377,0 4px #0a182c}
.tic-mark{display:block;font-family:Arial,sans-serif;font-weight:900;font-size:inherit;line-height:1;transform:scale(.86);filter:drop-shadow(0 7px 5px #0006)}
.tic-cell.is-x{color:#a1f7f6;text-shadow:0 1px #f4ffff,0 2px #57b6cb,0 3px #57b6cb,0 4px #367e9f,0 5px #235674,0 0 20px #6ceaff55}
.tic-cell.is-o{color:#ffb9ce;text-shadow:0 1px #fff2f8,0 2px #d66b98,0 3px #d66b98,0 4px #914772,0 5px #632a54,0 0 20px #ff91bf40}
.tic-cell.is-oldest:after{background:#ffe7aa;color:#4b391d;box-shadow:0 2px 4px #0005}
.tic-cell.just-played .tic-mark{animation:arcade-mark-in .28s cubic-bezier(.2,.85,.35,1.25)}
.checkers-board{border:10px solid #405779;outline:1px solid #9bb8d2;border-radius:16px;background:#243852;box-shadow:inset 0 0 0 2px #a8dbef,0 8px #142139,0 10px #6489a6,0 24px 28px #0006;overflow:hidden}
.checker-square.light{background:linear-gradient(145deg,#c8d9e7,#9fbbd1);box-shadow:inset 0 1px #f0fdff99}
.checker-square.dark{background:linear-gradient(145deg,#365071,#263951);box-shadow:inset 0 1px #5b769055,inset 0 -1px #15243b}
.checker-square.selected{background:radial-gradient(ellipse,#537993,#284866);box-shadow:inset 0 0 0 3px #9afafa,inset 0 0 16px #64eaff88}
.checker-piece{width:76%;border:2px solid #d4f1ff99;box-shadow:inset 0 2px 2px #fff9,inset 0 -5px 2px #0005,0 4px 0 #0c172b,0 7px 6px #040b1b88;transform:translateY(-2px)}
.checker-piece.red{background:radial-gradient(ellipse at 35% 20%,#ffe1d9 0%,#f89ba8 20%,#d95678 58%,#922c57 100%)}
.checker-piece.black{background:radial-gradient(ellipse at 35% 20%,#afcce0 0%,#607b9c 25%,#263950 64%,#101c30 100%)}
.checker-piece:before{content:'';position:absolute;inset:12%;border-radius:50%;border:1px solid #fff7;box-shadow:0 1px #0005,inset 0 1px 5px #fff2}
.checker-piece:empty:after{width:45%;border:1px solid #fff5;box-shadow:0 2px 3px #0003}
.checker-piece.king{color:#ffe89b;text-shadow:0 2px #8e602e,0 0 8px #ffe09b;box-shadow:inset 0 2px #fff9,inset 0 -5px #0005,0 4px #0c172b,0 7px 6px #040b1b88,0 0 0 2px #fce6a2}
.checker-square.legal:after{width:29%;background:#9ef5ed;border:2px solid #d9fffb;box-shadow:0 0 0 5px #69e6ef25,0 0 16px #91f9fc77}
.checker-square.capture:after{background:#ffe09a;box-shadow:0 0 0 3px #b98944,0 0 18px #ffecb380}
.family-result{background:#090f29b3;backdrop-filter:blur(10px)}
.family-result-card{border:1px solid #a3d3e8;background:radial-gradient(ellipse at 50% 0,#36557b,#1a2b49 70%);box-shadow:inset 0 2px #c9f6ff88,0 9px #0b152a,0 24px 70px #050917aa}
.family-result-card h2{color:#e2fdff;text-shadow:0 3px #396080,0 0 24px #6eeef344}.family-result-card p{color:#c0d6e9}.family-result-stars{color:#b7f7f2;text-shadow:0 0 15px #7bf0fa88}
.family-result-actions button{background:linear-gradient(#b7fbef,#70ccdc);color:#193e54;border:1px solid #e1ffff;box-shadow:0 4px #397687}.family-result-actions button:last-child{background:linear-gradient(#536a8b,#344866);color:#edf6ff;border:1px solid #8aa8c9;box-shadow:0 4px #14223a}
.family-tiles .game-tile{border:1px solid #8099bd;background:linear-gradient(140deg,#385374,#22344f);box-shadow:inset 0 2px #b5eaff66,0 7px #0a162b,0 20px 30px #0003;color:#f0f8ff;border-radius:28px}
.family-tiles .game-tile small{color:#b8d4e9}.family-tiles .family-tile-art{background:linear-gradient(135deg,#375375,#182b45);border:2px solid #93c9df;box-shadow:inset 0 2px #e3faff55,0 7px #0a1429,0 0 24px #77deed22;color:#acf5f5;text-shadow:0 3px #317895,0 5px #153b59}
.family-tiles .checker-art{background:repeating-conic-gradient(#a7bed0 0% 25%,#314963 0% 50%) 50%/50px 50px}
@keyframes arcade-mark-in{from{transform:scale(.35) translateY(-12px);opacity:.4}to{transform:scale(.86);opacity:1}}
@media(max-width:600px){.family-game-panel{padding:14px;border-radius:24px}.family-game-head h1{font-size:34px}.tic-board{padding:9px;gap:9px;border-radius:22px}.tic-cell{border-radius:14px}.checkers-board{border-width:6px}.family-status{font-size:20px;padding:7px 16px}.family-rule{font-size:13px}.family-nav button{font-size:13px}.checker-piece{border-width:1px}}
@media(prefers-reduced-motion:reduce){.tic-cell.just-played .tic-mark{animation:none}.family-game-screen button{transition:none}}
.tic-board,.checkers-board{box-sizing:border-box;max-width:100%}
.family-tiles .checker-art{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;box-sizing:border-box}
.family-tiles .checker-art .checker-piece{width:100%;display:block}
@media(min-width:761px) and (max-height:850px){.family-game-panel{padding:14px}.family-status{margin:8px auto 12px}.family-mode-note{margin:0}.family-game-head{margin-bottom:10px}.family-rule{margin-top:16px}.family-again{margin-top:12px}}
.family-result-card{max-height:calc(100dvh - 36px);overflow-y:auto}
.family-result-reward{display:grid;justify-items:center;gap:5px;margin:8px auto 18px}
.family-result-reward[hidden]{display:none}
#family-result-sticker .sticker{width:92px;height:92px}
.family-result-reward p{font-size:15px;color:#e9e2ff;margin:0}
.family-result-reward button{min-height:44px;padding:8px 16px;border:2px solid #fff7ce;border-radius:16px;background:linear-gradient(#fff6c7,#ffd977);color:#594372;font-weight:900;box-shadow:0 3px #ac8a5d}
.family-result-reward button:focus-visible{outline:3px solid #b9f8ff;outline-offset:3px}