.global-controls{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2.5vw,1.25rem);margin:0;padding:0;width:auto;background:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;contain:layout style}.global-controls__cluster{display:inline-flex;gap:clamp(.4rem,1.6vw,.85rem);align-items:center}.global-controls__button{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:999px;border:1px solid rgba(227,195,112,.55);background:linear-gradient(145deg,#2d2d2df2,#121212e6);color:var(--color-cream);font-family:var(--font-family-primary);font-size:.88rem;font-weight:var(--font-weight-medium);cursor:pointer;transition:color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease;will-change:transform;box-shadow:0 14px 28px #00000059;text-shadow:0 2px 4px rgba(0,0,0,.45)}.global-controls__button:hover{background:linear-gradient(145deg,#3a3a3afa,#1a1a1aeb);color:var(--color-cream);transform:translateY(-2px);box-shadow:0 18px 30px #0006}.global-controls__button.is-active{background:linear-gradient(150deg,#e3c370bf,#b58f3be6);border-color:#e3c370d9;box-shadow:0 0 32px #e3c370a6;color:#1c1c1c;text-shadow:none}.global-controls__button.is-disabled{opacity:.5;cursor:not-allowed}.global-controls__indicator{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#787878cc,#3c3c3c99);box-shadow:inset 0 0 0 1px #00000073;transition:background-color .2s ease,box-shadow .2s ease,filter .2s ease}.global-controls__button.is-active .global-controls__indicator{background:radial-gradient(circle at 30% 30%,#6fffb7,#2ecc71 60%,#1f9d5c);box-shadow:0 0 16px #2fcc7199;filter:saturate(1.1)}.global-controls__label{white-space:nowrap;display:inline-flex;align-items:center}.global-controls__status{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:12px;padding:6px 14px;background:#000000d9;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--color-cream);font-family:var(--font-family-primary);font-size:.85rem;font-weight:500;white-space:nowrap;pointer-events:none;opacity:1;transition:opacity .2s ease,transform .2s ease;z-index:100;box-shadow:0 4px 12px #0000004d}.global-controls__status--hidden{opacity:0;transform:translate(-50%,8px);pointer-events:none}@media (max-width: 640px){.global-controls{gap:clamp(.3rem,1.8vw,.65rem)}.global-controls__button{padding:7px 14px;font-size:.78rem}.global-controls__status{position:static;transform:none;margin:0;font-size:.7rem}}@media (max-width: 560px){.global-controls{flex-wrap:wrap;justify-content:center;gap:clamp(.35rem,3vw,.65rem)}.global-controls__cluster{flex-wrap:wrap;justify-content:center;width:100%;gap:clamp(.35rem,3.5vw,.7rem)}.global-controls__button{flex:1 1 calc(50% - clamp(.45rem,4vw,.8rem));min-width:128px;justify-content:center;padding:8px clamp(.65rem,4.5vw,1.1rem)}.global-controls__status{position:static;transform:none;width:100%;justify-content:center;margin:0;margin-top:.3rem}}@media (max-width: 420px){.global-controls__button{flex:1 1 100%;min-width:unset}.global-controls__label{font-size:.78rem}.global-controls__status{display:none}}@media (max-width: 360px){.global-controls{gap:clamp(.25rem,4vw,.5rem)}.global-controls__cluster{gap:clamp(.25rem,4.5vw,.55rem)}.global-controls__button{padding:7px clamp(.55rem,5.5vw,.85rem);font-size:.74rem;gap:clamp(.35rem,4vw,.55rem)}.global-controls__icon{font-size:.9rem}}.global-controls__icon{font-size:1.15rem;transition:color .2s ease}.global-controls__button[data-control-id=new-game] .global-controls__icon{color:#7dd3a8}.global-controls__button[data-control-id=hint] .global-controls__icon{color:#f8d66d}.global-controls__button[data-control-id=undo] .global-controls__icon{color:#8ec5fc}.global-controls__button[data-control-id=auto-move] .global-controls__icon{color:#c4b5fd}.global-controls__button[data-control-id=settings] .global-controls__icon{color:#fda4af}.global-controls__range-container .global-controls__icon{color:#93c5fd}.global-controls__button.is-active .global-controls__icon{color:#1c1c1c}.global-controls__button.is-disabled .global-controls__icon{opacity:.4;filter:grayscale(.3)}.global-controls__range-container{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid rgba(227,195,112,.35);background:linear-gradient(145deg,#232323e6,#0e0e0ee0);color:var(--color-cream);box-shadow:0 14px 28px #00000059}.global-controls__range-input{-webkit-appearance:none;appearance:none;width:120px;height:4px;border-radius:2px;background:#e3c37059;cursor:pointer}.global-controls__range-input:focus-visible{outline:2px solid rgba(227,195,112,.75);outline-offset:2px}.global-controls__range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-cream);box-shadow:0 2px 4px #00000059;transition:transform .15s ease}.global-controls__range-input::-webkit-slider-thumb:hover{transform:scale(1.15)}.global-controls__range-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-cream);border:none;box-shadow:0 2px 4px #00000059;transition:transform .15s ease}.global-controls__range-input::-moz-range-thumb:hover{transform:scale(1.15)}.floating-controls--drawer .global-controls{flex-wrap:wrap;justify-content:center;gap:clamp(.45rem,4vw,.9rem)}.floating-controls--drawer .global-controls__cluster{flex-wrap:wrap;justify-content:center;width:100%;gap:clamp(.45rem,4vw,.9rem)}.floating-controls--drawer .global-controls__button{flex:1 1 calc(50% - clamp(.5rem,4vw,1rem));min-width:138px;justify-content:center;padding:clamp(.65rem,5vw,1.05rem) clamp(.8rem,6vw,1.2rem);font-size:clamp(.8rem,3.5vw,.9rem);gap:clamp(.4rem,3vw,.7rem)}.floating-controls--drawer .global-controls__label{font-size:clamp(.78rem,3.5vw,.88rem);display:inline-flex}.floating-controls--drawer .global-controls__status{position:static;transform:none;width:100%;justify-content:center;margin:0;margin-top:clamp(.35rem,3vw,.6rem);font-size:clamp(.72rem,3.4vw,.82rem)}@media (max-width: 420px){.floating-controls--drawer .global-controls__button{flex:1 1 calc(50% - clamp(.5rem,4.5vw,.9rem));min-width:0;padding:clamp(.58rem,6vw,.9rem)}}@media (max-width: 360px){.floating-controls--drawer .global-controls__button{flex:1 1 100%}.floating-controls--drawer .global-controls__status{display:none}}
