/* v62 — graphical game boards. CSS-only artwork retains existing server-authoritative moves. */
.mg-room{--mg-gold:#f5ce7a;--mg-dark:#06271e}
.mg-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 82% 15%,#2b6549 0%,transparent 38%),linear-gradient(125deg,#062b24,#071a17 90%);box-shadow:0 15px 35px #0005,inset 0 1px #ffffff20}
.mg-hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(100deg,transparent 0 24px,#fff1 25px 26px,transparent 27px 70px)}
.mg-game-card{padding:0 0 20px;overflow:hidden;box-shadow:0 15px 26px #0005;transition:transform .18s,box-shadow .18s}
.mg-game-card:hover{transform:translateY(-3px);box-shadow:0 20px 32px #0008}
.mg-game-card h3,.mg-game-card p,.mg-game-card>button{margin-left:20px;margin-right:20px}
.mg-game-card>button{width:calc(100% - 40px)}
.mg-art{height:220px;display:grid;place-items:center;overflow:hidden;position:relative;border-bottom:1px solid #c69a57;background:radial-gradient(ellipse at 50% 0%,#296347,transparent 65%),#071d19}
.mg-art:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 5px);pointer-events:none}
.mg-art-wood{width:195px;height:195px;display:grid;grid-template-columns:repeat(3,1fr);padding:10px;border:10px ridge #a16d3b;border-radius:12px;box-shadow:0 12px 25px #000b,inset 0 0 15px #0008;background:repeating-linear-gradient(95deg,#4c2a1d 0 10px,#583221 12px 24px,#402318 27px 35px);transform:perspective(500px) rotateX(8deg)}
.mg-art-wood span{display:grid;place-items:center;border-right:3px solid #cda768;border-bottom:3px solid #cda768;font-size:52px;line-height:1;font-family:Arial,sans-serif}
.mg-art-wood span:nth-child(3n){border-right:0}.mg-art-wood span:nth-child(n+7){border-bottom:0}
.mg-neon-x{color:#73cbff;text-shadow:0 0 10px #00aaff,0 0 20px #0079ff}.mg-neon-o{color:#ff7867;text-shadow:0 0 10px #ff5533,0 0 20px #ff4422}
.mg-art-four-frame{width:min(255px,85%);aspect-ratio:7/6;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:5px;padding:12px;border:7px ridge #237cde;border-radius:14px;background:linear-gradient(145deg,#246bd7,#063a99);box-shadow:0 15px 25px #000a,inset 0 4px 6px #ffffff66;transform:perspective(600px) rotateX(7deg)}
.mg-art-hole{border-radius:50%;background:radial-gradient(circle at 30% 25%,#082a2a,#031b19 70%);box-shadow:inset 1px 4px 7px #000d,0 1px 2px #ffffff70}
.mg-art-hole.red{background:radial-gradient(circle at 30% 25%,#ffc6b2,#e82e2e 50%,#790900 90%)}.mg-art-hole.yellow{background:radial-gradient(circle at 30% 25%,#fff7c0,#f6c42d 50%,#b86a04 90%)}
.mg-match{background:radial-gradient(ellipse at 50% -30%,#26563c,transparent 65%),linear-gradient(140deg,#0b3026,#061d19);box-shadow:0 20px 36px #0006}
.mg-stage{max-width:540px;margin:20px auto;padding:18px;position:relative;border-radius:24px;background:repeating-linear-gradient(95deg,#4b2d1b 0 22px,#543321 23px 45px,#3a2217 46px 60px);border:9px ridge #a06e3e;box-shadow:0 18px 30px #0009,inset 0 0 30px #0009}
.mg-stage-light{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 15%,#ffffff1f,transparent 55%);pointer-events:none}
.mg-stage .mg-board{position:relative;z-index:1;margin:0 auto;background:linear-gradient(135deg,#063c33,#04221d);box-shadow:inset 0 3px 14px #0008,0 4px 15px #0008}
.mg-stage-tic .mg-board{border:0;background:transparent;gap:0;padding:0;max-width:360px}
.mg-stage-tic .mg-board button{background:#1a17165c;border:0;border-right:4px solid #c8a46a;border-bottom:4px solid #c8a46a;border-radius:0;font-size:clamp(38px,8vw,70px);color:#78caff;text-shadow:0 0 8px #04a6ff,0 0 20px #0057ee;transition:background .2s}
.mg-stage-tic .mg-board button:nth-child(3n){border-right:0}.mg-stage-tic .mg-board button:nth-child(n+7){border-bottom:0}
.mg-stage-tic .mg-board button.mg-O{color:#ff8c70;text-shadow:0 0 8px #ff4e39,0 0 18px #e72a0d}
.mg-stage-four .mg-board{border:7px ridge #3884e6;border-radius:13px;background:linear-gradient(145deg,#277be4,#063eac);gap:4px;padding:9px;max-width:470px}
.mg-stage-four .mg-board button{border:0;border-radius:50%;background:radial-gradient(circle at 30% 24%,#062b2b,#001d1b 72%);box-shadow:inset 0 4px 8px #000d,0 1px 2px #ffffff70;overflow:hidden}
.mg-stage-four .mg-disc{width:100%;height:100%;box-shadow:inset 0 2px 3px #fff5,inset 0 -6px 12px #0007}
.mg-stage-four .mg-R .mg-disc{background:radial-gradient(circle at 28% 22%,#ffd0b8,#f13a30 48%,#850e0a 90%)}
.mg-stage-four .mg-Y .mg-disc{background:radial-gradient(circle at 28% 22%,#fff8cc,#f7c52c 48%,#aa6104 90%)}
.mg-board button:not(:disabled):hover{filter:brightness(1.3);box-shadow:inset 0 0 0 2px #fff8}
.mg-room button:disabled{cursor:default}
@media(max-width:580px){.mg-art{height:185px}.mg-stage{padding:9px;border-width:5px}.mg-stage-four .mg-board{gap:2px;padding:5px;border-width:4px}.mg-stage-tic .mg-board button{border-width:3px}.mg-game-card h3,.mg-game-card p,.mg-game-card>button{margin-left:15px;margin-right:15px}.mg-game-card>button{width:calc(100% - 30px)}}
@media(prefers-reduced-motion:reduce){.mg-game-card{transition:none}}