.game-page-marble{--danger: #f87171;--warning: #fbbf24;--success: #86efac;--marble-tray: #3b495b;--marble-tray-edge: rgba(101, 115, 130, .9)}.game-page-marble .ambient-grid{opacity:.11;background-image:linear-gradient(rgba(255,159,120,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(87,230,230,.03) 1px,transparent 1px);background-size:56px 56px}.marble-pop-main{max-width:76rem;padding-top:clamp(.8rem,2vw,1.5rem);padding-bottom:1rem}.marble-pop-game{padding:clamp(.8rem,2vw,1.4rem) clamp(1rem,2.5vw,1.75rem);border:1px solid rgba(42,49,66,.5);border-radius:.55rem;background:linear-gradient(145deg,rgba(255,159,120,.035),transparent 22%),linear-gradient(155deg,#121820f7,#090d12f2);box-shadow:0 0 0 1px #ffffff0a inset}.game-page-marble .game-heading{display:flex;align-items:end;margin-bottom:.65rem}.game-page-marble .game-heading>div{flex:1;min-width:0}.game-page-marble .game-intro{max-width:31rem;color:#8d99a8;font-size:.84rem;line-height:1.55}.marble-toolbar{display:grid;grid-template-columns:repeat(3,minmax(5.5rem,1fr)) minmax(10rem,auto) auto auto;align-items:stretch;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:.38rem;background:linear-gradient(90deg,rgba(87,230,230,.04),transparent 45%),#05090db3;box-shadow:inset 0 0 0 1px #00000057}.marble-toolbar .stat{display:grid;align-content:center;min-width:0;min-height:3.25rem;padding:.4rem .7rem;border-right:1px solid rgba(255,255,255,.1)}.marble-toolbar .stat:first-child{box-shadow:inset 2px 0 0 var(--accent)}.marble-toolbar .stat-label{color:#718091;font:400 .48rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.marble-toolbar .stat-value{margin-top:.3rem;color:var(--accent);font:500 1.05rem/1 var(--font-mono);letter-spacing:-.04em}.marble-toolbar .difficulty-control{display:grid;min-width:0;padding:.4rem .65rem;align-content:center;gap:.15rem;color:#718091;font:400 .5rem/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase}.marble-toolbar .difficulty-control select{width:100%;min-height:1.8rem;padding:.3rem 1.7rem .3rem .5rem;border:1px solid rgba(87,230,230,.38);border-radius:.32rem;background:linear-gradient(90deg,rgba(87,230,230,.045),transparent),#070c11c7;color:var(--accent);font:500 .62rem/1 var(--font-mono);letter-spacing:.035em;cursor:pointer}.marble-toolbar .control-button{min-width:7rem;min-height:3.25rem;padding:.65rem .8rem;border:0;border-left:1px solid rgba(255,255,255,.1);border-radius:0;background:#070c115c;color:var(--text);font:500 .62rem/1 var(--font-mono);letter-spacing:.045em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease}.marble-toolbar .restart-button:hover:not(:disabled){background:#57e6e61c;color:var(--accent)}.marble-toolbar .restart-button:disabled{opacity:.5;cursor:not-allowed}.marble-toolbar select:focus-visible,.marble-toolbar .control-button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.game-page-marble .board-scroll{max-width:100%;margin-top:.75rem;overflow-x:auto;padding:clamp(.5rem,1.5vw,.85rem);border:1px solid rgba(255,255,255,.09);border-radius:.4rem;background:linear-gradient(135deg,rgba(255,159,120,.035),transparent 25%),#0c141d3e;overscroll-behavior-x:contain}.marble-board{--cell-size: 40px;display:grid;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));width:max-content;margin:0 auto;padding:.38rem;border:1px solid rgba(62,122,128,.55);border-radius:.45rem;background:#1c2a2e;box-shadow:inset 0 1px #c1dddb2b,0 0 0 1px #3470772e,0 .75rem 1.5rem #00000047}.marble-row{display:contents}.marble-cell{position:relative;display:block;width:var(--cell-size);height:var(--cell-size);margin:0;padding:0;border:1px solid var(--marble-tray-edge);border-radius:0;background:var(--marble-tray);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .12s ease}.marble-cell.is-empty,.marble-cell.is-single,.marble-board[data-state=cleared] .marble-cell,.marble-board[data-state=stuck] .marble-cell{cursor:default}.marble-cell:focus-visible{z-index:1;outline:2px solid var(--accent);outline-offset:-2px}.marble{position:absolute;top:3.5%;right:3.5%;bottom:3.5%;left:3.5%;display:block;border-radius:50%;opacity:0;pointer-events:none;transform:scale(var(--marble-scale, 1));transition:transform .12s ease,opacity .12s ease}.marble-red,.marble-blue,.marble-green{opacity:1}.marble-red{border:1px solid rgba(92,22,14,.78);background:radial-gradient(circle at 34% 27%,#fad8c6 0,#fad8c6 6%,#ec845d 19%,#c2421f 54%,#66190a);box-shadow:inset .08rem .09rem .12rem #ffe4da4d,inset -.1rem -.12rem .16rem #3c080473,0 .1rem .13rem #08131861}.marble-blue{border:1px solid rgba(14,34,82,.78);background:radial-gradient(circle at 34% 27%,#dde1f7 0,#dde1f7 6%,#7b8fd8 19%,#2f43a0 54%,#121b52);box-shadow:inset .08rem .09rem .12rem #e6f0ff4d,inset -.1rem -.12rem .16rem #06103073,0 .1rem .13rem #08131861}.marble-green{border:1px solid rgba(20,70,30,.72);background:radial-gradient(circle at 34% 27%,#f1f6cf 0,#f1f6cf 6%,#c2db74 19%,#7aa232 54%,#364f12);box-shadow:inset .08rem .09rem .12rem #f2fde659,inset -.1rem -.12rem .16rem #08280e6b,0 .1rem .13rem #08131861}.marble:after{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;display:none;border:2px solid rgba(255,255,255,.96);border-radius:50%;background:#0a161c33;box-shadow:0 0 0 1px #0c343a99;content:""}.marble-cell.is-highlighted{z-index:1}.marble-cell.is-highlighted .marble:after{display:block}.marble.is-popping{opacity:0;transform:scale(1.3);transition:transform .15s ease-out,opacity .15s ease-out}.marble.is-falling{animation:marble-fall .24s cubic-bezier(.45,0,.75,1)}@keyframes marble-fall{0%{transform:translate(calc(var(--from-x, 0) * var(--cell-size)),calc(var(--from-y, 0) * var(--cell-size)))}}.marble-board.is-animating .marble-cell{cursor:progress}.marble-board[data-state=stuck] .marble{filter:saturate(.55) brightness(.92)}.game-message-row{display:flex;margin-top:.6rem;align-items:stretch;gap:.6rem}.game-page-marble .game-message{flex:1;min-height:1.4em;margin:0;padding:.5rem .85rem;border-left:2px solid rgba(87,230,230,.42);background:#57e6e609;color:#8794a3;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.025em;text-align:left}.game-page-marble .game-message.success{border-left-color:var(--success);color:var(--success)}.game-page-marble .game-message.warning{border-left-color:var(--warning);color:var(--warning)}.group-preview{display:flex;min-width:9rem;margin:0;padding:.5rem .85rem;align-items:center;justify-content:flex-end;color:var(--accent);font:500 .7rem/1 var(--font-mono);letter-spacing:.02em}.group-preview:empty{visibility:hidden}@media(max-width:820px){.marble-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}.marble-toolbar .difficulty-control,.marble-toolbar .control-button{border-top:1px solid rgba(255,255,255,.1)}.marble-toolbar .difficulty-control{border-left:0}.marble-toolbar .stat:nth-child(3){border-right:0}.marble-toolbar .control-button{min-width:0;min-height:3rem}}@media(max-width:640px){.marble-pop-main{padding-top:.6rem}.marble-pop-game{padding:.8rem .55rem;border-radius:.45rem}.game-page-marble .game-heading{padding:0 .25rem}.marble-toolbar .stat{padding:.6rem .35rem;text-align:center}.marble-toolbar .difficulty-control{padding-inline:.3rem}.marble-toolbar .difficulty-control select{padding:.3rem 0 .3rem .3rem;font-size:.56rem;letter-spacing:0}.game-page-marble .board-scroll{margin-top:.55rem;padding:.35rem .2rem}.marble-board{padding:.25rem}.group-preview{display:none}}@media(prefers-reduced-motion:reduce){.marble,.marble-cell,.marble-toolbar .control-button{transition:none}.marble.is-falling{animation:none}}@media(forced-colors:active){.marble-board{border-color:CanvasText}.marble-cell{border-color:GrayText;background:Canvas}.marble-cell.is-highlighted{background:Highlight}.marble:after{border-color:HighlightText;background:transparent;box-shadow:none}.marble{forced-color-adjust:none;box-shadow:none}.marble-red{border:2px solid CanvasText;background:CanvasText}.marble-blue{border:3px solid CanvasText;background:Canvas}.marble-green{border:2px solid CanvasText;background:radial-gradient(circle,CanvasText 0 28%,Canvas 31%)}}
