/* Roboto removed: was loaded from Google Fonts but the @import blocked
   the rest of legacy.css from applying until fonts.googleapis.com
   responded. The puzzle game falls back to Geist Variable, which is
   already self-hosted via @fontsource-variable/geist in app.css. */

/* style.css */
:root {
    --cell-size: 50px;
    --board-margin: 20px; /* Matches your .board6, .board9 margin */
}

/* `touch-action: none` is the single rule touch-punch needs to make
   jQuery UI's draggable work over touch input — without it the browser
   claims the touchstart as a pan gesture and the page scrolls instead
   of the piece dragging. We do NOT add `user-select`, `-webkit-touch-
   callout`, or any of the other "iOS hardening" properties here: those
   were what previously broke the rotate-during-drag flow on desktop,
   for reasons that aren't fully diagnosed but reproducibly went away
   when those rules were removed. The rotate-during-drag freeze that's
   still seen in mobile / Chrome touch-emulation is a touch-punch +
   `applyRotation` DOM-rebuild interaction; the workaround for that
   lives in /js/script-touch-fix.js, not here. */
.piece {
    touch-action: none;
}
/* Suppress iOS's 350ms double-tap-to-zoom heuristic on the puzzle area
   only. Pinch-zoom on the rest of the page is unaffected because we
   don't touch the global viewport meta. */
.board6, .board9, .board4 {
    touch-action: manipulation;
}

body {
    font-family: 'Geist Variable', 'Geist', sans-serif;
    min-width: 410px!important;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

nav{
    /* min-width: 1200px; */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    min-width: 1136px;
}

.board-container{
    /* position: relative;
    width: 900px; */
}

.board6, .board9, .board4 {
    display: inline-block;
    margin: var(--board-margin);
    position: relative;
}
.boardRow {
    display: block;
    clear: both;
}
.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    float: left;
    position: relative;
}
.board-container > div{
    /* float: left;
    width: 50%; */
}
.board6-wrapper{
        position: relative;
    /* position: absolute;
    right: 20px;
    top: 0px;
    width: 340px;
    height: 340px; */
}

.board9-wrapper{
        position: relative;
    /* position: absolute; */
    /* left: 20px;
    top: 0px; */
    /* width: 491px; */
    /* height: 490px; */

}

.cell:after{

}

.piece > div > div:not(.placeholder):after,
.boardRow .cell:after
{
    position: absolute;
    content: "";
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iOTQ4LjAwMDAwMHB0IiBoZWlnaHQ9IjU1Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDk0OC4wMDAwMDAgNTU2LjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsNTU2LjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIKZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTIxMjQgNTUzMSBjLTEwMyAtNDkgLTE1NyAtMTIwIC0xODMgLTIzOSAtOCAtMzcgLTExIC0zMjAgLTExIC05MzgKbDAgLTg4NSAtMjYgLTQ1IGMtODcgLTE0NyAtMjA2IC0yMDMgLTM3OSAtMTc1IC0xMjUgMjAgLTE0MiAyOCAtMjE5IDEwNCAtNDAKNDAgLTEwMiA4OSAtMTM3IDExMCAtMjA1IDEyMSAtNTE2IDEzOSAtNzM0IDQyIC0xOTEgLTg0IC0zMzEgLTI1OSAtNDAwIC00OTkKLTUwIC0xNzcgLTQxIC0zNTAgMjggLTUzNiA0NyAtMTI0IDkwIC0xOTMgMTc3IC0yODAgMTIzIC0xMjQgMjY1IC0xODMgNDY5Ci0xOTYgMjMwIC0xNSA0NTQgNjcgNjAxIDIxOSA2MyA2NiA5NiA4MSAyMDkgOTcgOTggMTUgMTc3IDcgMjMzIC0yMSA0OSAtMjUKMTE3IC05MyAxNTIgLTE1MyBsMjYgLTQ1IDAgLTg1OSBjMCAtODQ3IDAgLTg2MSAyMSAtOTI4IDQ0IC0xNDIgMTEzIC0yNDAgMjAxCi0yODUgMzcgLTE5IDY1IC0xOSA5MTEgLTE3IGw4NzIgMyA2OCAzMyBjODkgNDQgMTIyIDkxIDEyMSAxNzEgLTIgNzYgLTI1IDEyOQotMTQxIDMyMiAtMTM1IDIyNSAtMTYzIDMwNSAtMTYzIDQ2NCAwIDE4NiA0NyAzNzkgMTIxIDQ5MSAxMjMgMTg5IDQwMSAzNDEKNzIyIDM5NSA4OCAxNSAxNjggNSAzMTcgLTM4IDI2MyAtNzYgNDU2IC0xOTkgNTYwIC0zNTggNzMgLTExMiAxMjAgLTMwNCAxMjAKLTQ4OSAwIC0xNjEgLTMxIC0yNDcgLTE2OSAtNDc1IC0xMDggLTE3NyAtMTMzIC0yMzcgLTEzNSAtMzEyIC0xIC04MCAzMiAtMTI3CjEyMSAtMTcxIGw2OCAtMzMgODc0IC0zIDg3NCAtMiA2MiAyOSBjMTA0IDQ4IDE1OCAxMTkgMTg0IDIzOSA4IDM3IDExIDMyMCAxMQo5MzggbDAgODg1IDI2IDQ1IGMzNSA2MCAxMDMgMTI4IDE1MyAxNTMgNTMgMjggMTM5IDM2IDIyNiAyMiAxMjUgLTIwIDE0MiAtMjgKMjE5IC0xMDQgNDAgLTQwIDEwMiAtODkgMTM3IC0xMTAgMjE0IC0xMjYgNTMzIC0xNDAgNzU0IC0zMiAxODYgOTAgMzEyIDI1MwozODAgNDg5IDUwIDE3NyA0MSAzNTAgLTI4IDUzNiAtNDcgMTI0IC05MCAxOTMgLTE3NyAyODAgLTEyMyAxMjQgLTI2NSAxODMKLTQ2OSAxOTYgLTIzMCAxNSAtNDU0IC02NyAtNjAxIC0yMTkgLTYzIC02NiAtOTYgLTgxIC0yMDkgLTk3IC0xMDEgLTE1IC0xNzUKLTkgLTIzMSAyMCAtNTEgMjYgLTExOCA5NCAtMTU0IDE1NCBsLTI2IDQ1IDAgODU5IGMwIDg0NyAwIDg2MSAtMjEgOTI4IC00NAoxNDIgLTExMyAyNDAgLTIwMSAyODUgLTM3IDE5IC02NSAxOSAtOTExIDE3IGwtODcyIC0zIC02OCAtMzMgYy04OSAtNDQgLTEyMgotOTEgLTEyMSAtMTcxIDIgLTc1IDI3IC0xMzIgMTM0IC0zMTEgMTM5IC0yMjggMTcwIC0zMTUgMTcwIC00NzUgMCAtMTg1IC00NwotMzc4IC0xMjEgLTQ5MSAtMTIzIC0xODkgLTQwMSAtMzQxIC03MjEgLTM5NSAtODkgLTE1IC0xNjkgLTUgLTMxOCAzOCAtMjYzCjc2IC00NTYgMTk5IC01NjAgMzU4IC03MyAxMTIgLTEyMCAzMDQgLTEyMCA0ODkgMCAxNjEgMzEgMjQ3IDE2OSA0NzUgMTA4IDE3NwoxMzMgMjM3IDEzNSAzMTIgMSA4MCAtMzIgMTI3IC0xMjEgMTcxIGwtNjggMzMgLTg3NSAzIC04NzUgMiAtNjEgLTI5eiIvPgo8L2c+Cjwvc3ZnPgo=");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    mask-composite: intersect; /* Helps with visibility issues */

    left: -16px;
    right: -16px;
    top: -1px;
    bottom: -1px;

}

.piece.ui-draggable-dragging > div > div:not(.placeholder):after
{

}

.boardRow .cell:after{


    background-color: #dedede; /* Color of the SVG */
}

.boardRow:nth-child(odd) .cell:nth-child(odd):after,
.boardRow:nth-child(even) .cell:nth-child(even):after {



}

.boardRow:nth-child(odd) .cell:nth-child(even):after,
.boardRow:nth-child(even) .cell:nth-child(odd):after {
    transform: rotate(90deg);
}

.boardRow:nth-child(odd) .cell:nth-child(odd),
.boardRow:nth-child(even) .cell:nth-child(even) {
    /* background: #ccc; */
}
.boardRow:nth-child(odd) .cell:nth-child(even),
.boardRow:nth-child(even) .cell:nth-child(odd) {
    /* background: #fff; */
}
.piece {
    position: absolute;

    visibility: hidden;
}
.placeholder { background: transparent; }

.piece:not(.fixed-piece) > div > div:not(.placeholder){
    cursor: move;
}

.piece > div > div{
    position: relative;
}

.piece > div > div:not(.placeholder):after{

}

 /* Color of the SVG */
.piece#greenPiece > div > div:after{ background-color: #4daf4a;}
.piece#pinkPiece > div > div:after{ background-color: #e7298a;}
.piece#redPiece > div > div:after{ background-color: #a65628;}
.piece#purplePiece > div > div:after{ background-color: #984ea3;}
.piece#yellowPiece > div > div:after{ background-color: #e6ab02;}
.piece#darkBluePiece > div > div:after{ background-color: #377eb8;}
.piece#lightBluePiece > div > div:after{ background-color: deepskyblue;}
.piece#orangePiece > div > div:after{ background-color: #ff7f00;}
.piece#darkGreenPiece > div > div:after{ background-color: #66c2a5;}


.piece > div > div.lightGreen:after,
.piece > div > div.lightRed:after,
.piece > div > div.lightPurple:after,
.piece > div > div.lightYellow:after,
.piece > div > div.lightBlue2:after,
.piece > div > div.lightLB:after,
.piece > div > div.lightOrange:after,
.piece > div > div.lightGreen2:after,
.piece > div > div.lightPink:after
{
    transform: rotate(90deg);
}


/* Add to style.css */
.level-display {
    position: absolute;
    top: 20px;
    text-align: center;
    width: 100%;
    font-size: 24px;
}

#next-level {
    display: none;
    cursor: pointer;
}

#force-next-level {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
}

.piece.fixed-piece {
    cursor: not-allowed;
    opacity: 0.4
}

.fixed-piece .placeholder {
    pointer-events: none;
}

.alert:after{ background-color: #ff0000!important;}

particle {
  border-radius: 50%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
}

.puzzle-box-level{
    text-shadow: 1px 1px 1px #333;
}

.puzzle-locked {
    background: url('../storage/levellocked.png') center center no-repeat;
    background-size: 110%;
    background-color: #e46161;
}

.puzzle-solved {
    background: url('../storage/level45.png') center center no-repeat;
    background-size: 110%;
    /* background-color: #497d00; */
}

.puzzle-unlocked{
    background: url('../storage/level.png') center center no-repeat;
    background-size: 110%;
    background-color: #fff;
}

.controls{
    background-image: url('../storage/keys.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0px 0;
}



/* Mobile bottom navigation */
@media (max-width: 768px) {
    body {
        padding-bottom: 60px; /* Space for the bottom nav */
    }

    /* The full-screen footer overlay is now styled by the React <SiteFooter>
     * component (className changes between hidden and the overlay state).
     * The previous rules here had bare `footer` selectors that hijacked the
     * component on mobile: Tailwind v4 puts utilities in @layer, and unlayered
     * rules win the cascade against layered ones, so `footer { display: flex }`
     * overrode `.hidden` and the menu was always visible. */





    /* Ensure the last element in the page has enough margin before footer */
    .flex-1.flex.flex-col > div:last-child {
        margin-bottom: 20px;
    }

    /* .mobile-bottom-nav rules removed: the React <MobileBottomNav> uses
     * Tailwind utility classes directly, so this class is unused. The
     * top-nav hide rule is also removed because <TopNav> already declares
     * `hidden md:block` itself. */
}