/* ------------  PALETA  ------------ */
:root {
    --pink-light: #ffc0cb;
    --pink:       #ff69b4;
    --pink-dark:  #ff1493;
    --pink-extra: #ffe4e1;
    --radius: 12px;
    --selection-color: #9d00ff; /* A distinct purple/violet for selected piece */
}

/* ============ MOBILE OPTIMIZATIONS ============ */

/* DISABLE SCROLLING AND ZOOMING */
html, body {
    /* Prevent scrolling */
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    
    /* Prevent zoom gestures */
    touch-action: manipulation;
    
    /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* Prevent highlight on tap */
    -webkit-tap-highlight-color: transparent;
    
    /* Prevent pull-to-refresh */
    overscroll-behavior: none;
    
    /* Prevent overscroll bounce (iOS Safari) */
    -webkit-overflow-scrolling: touch;
}

/* PREVENT ZOOM ON DOUBLE TAP */
* {
    touch-action: manipulation;
}

/* ALLOW TEXT SELECTION ONLY WHERE NEEDED */
input, textarea, [contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* GAME CONTAINER - FULL SCREEN */
#app-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ORIENTATION MESSAGE - Show when landscape on mobile */
#orientation-message {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Bubblegum Sans', cursive;
    text-align: center;
    padding: 20px;
}

#orientation-message .rotate-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* SHOW ORIENTATION MESSAGE ON LANDSCAPE MOBILE */
@media screen and (orientation: landscape) and (max-height: 500px) {
    #orientation-message {
        display: flex !important;
    }
    
    #app-container {
        display: none !important;
    }
}

/* PREVENT ZOOM ON INPUT FOCUS (Additional safeguard) */
input, select, textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
}

/* PWA MODE OPTIMIZATIONS */
body.pwa-mode {
    overflow: hidden !important;
}

/* ============ ORIGINAL STYLES ============ */

*{box-sizing:border-box;}
body{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:100vh;margin:0;font-family:"Bubblegum Sans",cursive;
    background:var(--pink-light);color:var(--pink);overflow-x:hidden;
    transition:background .4s;
}
h1{margin:.1em 0 .4em;font-size:clamp(2.2rem,4vw+0.5rem,3.5rem);text-shadow:2px 2px rgba(0,0,0,.1);}

/* ------------  TABLERO  ------------ */
#game{
    display:grid;
    grid-template-columns:repeat(3,min(24vw,120px));
    grid-template-rows:repeat(3,min(24vw,120px));
    gap:min(3vw,10px);
    padding:10px;
    background:#fff;border:6px solid var(--pink);border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(0,0,0,.25);user-select:none;
    transition:border-color .3s,box-shadow .3s;
}
.cell{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:clamp(2rem,6vw,4rem);background:var(--pink-extra);border:2px solid #ffb6c1;border-radius:var(--radius);cursor:pointer;transition: background .15s ease, border-color .3s ease, box-shadow .3s ease, opacity .3s ease;position:relative;overflow:hidden;}
.cell:hover:not(.disabled){background:var(--pink-light);}
.cell.disabled{cursor:default;opacity:.7;}

.cell.rainbow::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet,red);background-size:400% 400%;animation:rb 2s linear infinite;opacity:.7;z-index:0;}
.cell span{position:relative;z-index:1;}

/* Style for selected piece to move */
.cell.selected-piece-to-move {
    border-color: var(--selection-color);
    box-shadow: 0 0 10px var(--selection-color), inset 0 0 8px rgba(157, 0, 255, 0.3);
    opacity: 1; /* Ensure it's fully opaque when selected */
    cursor: grabbing; /* Indicate it can be "moved" */
}
/* Slightly different hover for a selected piece to indicate it's active */
.cell.selected-piece-to-move:hover {
    background: var(--pink-extra); /* Keep background, or slightly different if needed */
    filter: brightness(1.05);
}

@keyframes rb{0%{background-position:0 50%}100%{background-position:100% 50%}}
@keyframes cellSelectAnim{0%{transform:scale(.9)}100%{transform:scale(1)}}

/* ------------  STATUS  ------------ */
#status{
    font-size:clamp(1.2rem,3vw,1.6rem);
    min-height:2.2rem;text-align:center;
    transition:transform .3s,color .3s;
    margin-bottom:clamp(10px,2vh,15px);
}
#status.highlight{transform:scale(1.2);color:var(--pink-dark);}

/* ------------  SCORE  ------------ */
#results{margin-top:clamp(10px,3vh,20px);padding:6px 14px;background:#fff;border:2px dashed var(--pink);border-radius:var(--radius);font-size:clamp(1rem,2.5vw,1.3rem);}
#results span{min-width:2ch;display:inline-block;font-weight:bold;}

/* ------------  TOP-BAR  ------------ */
.top-bar{position:fixed;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:200;}
.top-bar button{pointer-events:auto;}
.icon-btn{background:none;border:none;cursor:pointer;font-size:2rem;padding:4px;line-height:1;color:var(--pink-dark);transition:transform .15s;}
.icon-btn:hover{transform:scale(1.1);}

/* Specific styles for the new restart icon image */
#restart-icon {
    background-image: url('icons/restart_icon.png'); /* Adjust path if needed */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Adjust to 'cover' or specific pixels if needed */
    width: 30px;  /* Adjust to match your new icon's desired display size */
    height: 30px; /* Adjust to match your new icon's desired display size */
    font-size: 0; /* Hide any text fallback or residual spacing */
    /* Override or reset padding if it interferes with icon display */
    padding: 0; /* Reset padding from .icon-btn if necessary */
    /* Ensure background color from .icon-btn (if any) doesn't interfere, it's 'none' */
}

/* ------------  SIDE-MENU  ------------ */
#menu-toggle{font-size:2.2rem;}
.side-menu{position:fixed;top:0;left:0;height:100vh;width:clamp(250px,70vw,300px);background:var(--pink-light);box-shadow:3px 0 8px rgba(0,0,0,.15);transform:translateX(-100%);transition:transform .3s ease;padding:70px 14px 20px;display:flex;flex-direction:column;gap:18px;z-index:150;overflow-y:auto;}
.side-menu.open{transform:translateX(0);}
.side-menu .controls-group{display:flex;flex-direction:column;gap:14px;align-items:center;}
.side-menu .controls-group>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.side-menu .controls-group>div>span{width:100%;text-align:center;margin-bottom:-5px;font-size:.9rem;color:var(--pink-dark);}
button.std{padding:8px 20px;font-size:1rem;background:var(--pink);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;transition:filter .15s,box-shadow .15s;}
button.std:hover{filter:brightness(.9);}
button.std.active{outline:3px solid var(--pink-dark);filter:brightness(.88);box-shadow:0 0 5px var(--pink-dark);}

#restartBtn{display:none;} /* This is likely an old, unused button */

/* Confetti  */
.confetti{position:fixed;border-radius:4px;pointer-events:none;z-index:3000;}
@keyframes fall{to{transform:translateY(110vh) rotateZ(720deg);opacity:0;}}


/* Draw Animation Styles */
#status.highlight-draw-flash{animation:drawStatusFlash .3s 6 alternate;}
@keyframes drawStatusFlash{from{color:var(--pink-dark);transform:scale(1.25);}to{color:var(--pink);transform:scale(1);}}
#game.highlight-draw-border{animation:drawBoardFlash .3s 6 alternate;}
@keyframes drawBoardFlash{0%{border-color:var(--pink-dark);box-shadow:0 0 15px var(--pink-dark);}50%{border-color:var(--pink-light);box-shadow:0 0 5px var(--pink-light);}100%{border-color:var(--pink-dark);box-shadow:0 0 15px var(--pink-dark);}}

/* dark theme modifiers  */
body.dark-theme{background:#2b2b2b;color:#ffc0cb;}
body.dark-theme #game{background:#3d3d3d;border-color:var(--pink-dark);}
body.dark-theme .cell{background:#4a4a4a;border-color:#5a5a5a;color:#fff;}
body.dark-theme .cell.selected-piece-to-move { /* Dark theme for selected piece */
    border-color: var(--selection-color);
    box-shadow: 0 0 10px var(--selection-color), inset 0 0 8px rgba(157, 0, 255, 0.5); /* Brighter inset for dark */
    background-color: #3a2d4a; /* Darker purple-ish background */
}
body.dark-theme #results{background:#3d3d3d;border-color:var(--pink-dark);color:#fff;}
body.dark-theme .side-menu{background:#3d3d3d;}
body.dark-theme .side-menu .controls-group>div>span{color:var(--pink-light);}
body.dark-theme .icon-btn{color:var(--pink-light);} /* This will still apply to #menu-toggle */

/* ------------ QR MODAL ------------ */
#qr-display-area.modal {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.qr-modal-content {
    background-color: #fff8fb;
    margin: auto;
    padding: 20px;
    border: 1px solid var(--pink-light);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    max-width: 280px;
    text-align: center;
    position: relative;
}

.qr-modal-close-btn {
    color: var(--pink-dark);
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    transition: color 0.2s;
}

.qr-modal-close-btn:hover,
.qr-modal-close-btn:focus {
    color: #c7006a;
    text-decoration: none;
    cursor: pointer;
}

#qr-display-area #qr-code-canvas {
    border: 1px solid var(--pink-light);
    border-radius: 8px;
    display: block;
    margin: 10px auto 15px auto;
}

.copy-id-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    font-size: 0.9em;
    word-break: break-all;
    line-height: 1.3;
}

.copy-id-btn.copied {
    background-color: #4CAF50;
    filter: brightness(1);
}


/* Dark theme adjustments for QR Modal */
body.dark-theme #qr-display-area.modal .qr-modal-content {
    background-color: #3d3d3d;
    border-color: var(--pink-dark);
}

body.dark-theme #qr-display-area.modal #qr-code-canvas {
    border-color: #5a5a5a;
}

body.dark-theme #qr-display-area.modal .qr-modal-close-btn {
    color: var(--pink-light);
}
body.dark-theme #qr-display-area.modal .qr-modal-close-btn:hover,
body.dark-theme #qr-display-area.modal .qr-modal-close-btn:focus {
    color: #ffc0cb;
}

body.dark-theme .copy-id-btn {
}
body.dark-theme .copy-id-btn.copied {
    background-color: #66bb6a;
    color: #000;
}


@media(max-width:500px){
    #game{gap:min(2vw,8px);}
    h1{font-size:clamp(2rem,7vw,2.7rem);}
    #results{font-size:clamp(.9rem,3vw,1rem);}
    .side-menu{padding-top:60px;}
    .icon-btn{font-size:1.8rem;} /* This will affect #menu-toggle and #restart-icon (if it were text) */
    #menu-toggle{font-size:2rem;} /* Specific override for menu-toggle */
    /* Adjust #restart-icon size for mobile if needed, e.g.: */
    /* #restart-icon { width: 24px; height: 24px; } */


    .qr-modal-content {
        max-width: 90vw;
        padding: 15px;
    }
    #qr-display-area #qr-code-canvas {
         margin: 10px auto;
    }
    .copy-id-btn {
        font-size: 0.85em;
        padding: 8px;
    }
}

/* generic “disabled button” look */
button.std.disabled{
    opacity:.45;
    filter:grayscale(100%);
    cursor:not-allowed;
}

/* === Fancy on/off switch === */
.toggle-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    margin-top:1rem;
}

#threePieceWrapper {
    flex-basis: 100%; /* Ensures it takes full width in its flex container */
}

.toggle-title{ font-weight:600; }

.switch{
    position:relative; display:inline-block;
    width:46px; height:26px;
}
.switch input{ opacity:0; width:0; height:0; }

.slider{
    position:absolute; cursor:pointer;
    top:0; left:0; right:0; bottom:0;
    background:#aaa; transition:.2s; border-radius:26px;
}
.slider::before{
    position:absolute; content:"";
    height:20px; width:20px; left:3px; bottom:3px;
    background:#fff; transition:.2s; border-radius:50%;
}
input:checked + .slider{ background:#ff0090; }
input:checked + .slider::before{ transform:translateX(20px); }

/* Easy-mode hint - Pink Glowing Cell */
@keyframes pinkGlow {
  0% {
    box-shadow: 0 0 7px 2px var(--pink-light), 0 0 10px 3px var(--pink) inset;
    border-color: var(--pink);
  }
  50% {
    box-shadow: 0 0 12px 4px var(--pink), 0 0 15px 5px var(--pink-dark) inset;
    border-color: var(--pink-dark);
  }
  100% {
    box-shadow: 0 0 7px 2px var(--pink-light), 0 0 10px 3px var(--pink) inset;
    border-color: var(--pink);
  }
}

.cell.hint {
  /* Remove any text content or pseudo-elements if they were used for the star */
  /* content: ''; */ /* Ensure no pseudo-element content if you were using .cell.hint::after */

  /* Apply the glowing animation */
  animation: pinkGlow 1.5s infinite ease-in-out;

  /* Ensure the cell itself is clearly visible if it's empty */
  background-color: var(--pink-extra); /* You can adjust the base background if needed */
  opacity: 1; /* Make sure it's not transparent if other rules make it so */
  /* The border color will be animated by pinkGlow */
}

/* ============ ELECTRON-SPECIFIC STYLES ============ */
/* Add this to the END of your existing style.css */

body.electron-app {
    overflow: auto;
    position: static;
    touch-action: auto;
    user-select: auto;
    overscroll-behavior: auto;
}

body.electron-app #orientation-message {
    display: none !important;
}

body.electron-app #app-container {
    position: static;
    width: 100%;
    height: 100vh;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
}

body.electron-app #game {
    grid-template-columns: repeat(3, 90px);
    grid-template-rows: repeat(3, 90px);
    gap: 6px;
    margin: 15px auto;
}

body.electron-app .cell {
    width: 90px;
    height: 90px;
    font-size: 2.5rem;
}

body.electron-app .cell:hover:not(.disabled) {
    background: var(--pink-light);
    transform: scale(1.05);
    transition: all 0.15s ease;
}

body.electron-app .side-menu {
    width: 260px;
    padding: 50px 15px 15px;
}

body.electron-app h1 {
    font-size: 2.2rem;
    margin: 0.2em 0 0.3em;
}

body.electron-app #status {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

body.electron-app #results {
    margin-top: 15px;
    font-size: 1rem;
    padding: 4px 12px;
}

@media (max-height: 700px) {
    body.electron-app #game {
        grid-template-columns: repeat(3, 75px);
        grid-template-rows: repeat(3, 75px);
        gap: 5px;
    }
    
    body.electron-app .cell {
        width: 75px;
        height: 75px;
        font-size: 2rem;
    }
}

/* If you previously had a .cell.hint::after rule, make sure it's removed or commented out
   to prevent the star from appearing on top of the glow. */
/*
.cell.hint::after {
  display: none;
}
*/


/* keep the already-defined .std.disabled look from before */