:root {
            --bg: #1a0a18;
            --surface: rgba(255,105,180,.1);
            --surface2: rgba(255,20,147,.15);
            --hotpink: #ff69b4;
            --deeppink: #ff1493;
            --gold: #ffd700;
            --text: #ffe4ec;
            --text-dim: #ffb6c1;
            --cell-size: 32px;
        }
        *{margin:0;padding:0;box-sizing:border-box}
        body{
            background:linear-gradient(135deg,#1a0a18 0%,#2d0a1f 30%,#1a0a2a 70%,#0d0a1a 100%);
            display:flex;justify-content:center;align-items:center;
            min-height:100vh;font-family:'Segoe UI',system-ui,sans-serif;
            color:var(--text);overflow-x:hidden;
            user-select:none;-webkit-user-select:none;
            -webkit-tap-highlight-color:transparent;
            cursor:default;
        }
        /* floating sparkles background */
        .sparkle-bg{position:fixed;inset:0;pointer-events:none;z-index:0}
        .sparkle-bg .sparkle{
            position:absolute;font-size:16px;opacity:0;
            animation:floatUp 6s ease-in infinite;
        }
        @keyframes floatUp{
            0%{transform:translateY(100vh) scale(0);opacity:0}
            10%{opacity:.8}
            80%{opacity:.4}
            100%{transform:translateY(-10vh) scale(1.2);opacity:0}
        }

        /* --- SCREENS --- */
        .screen{
            position:absolute;inset:0;display:flex;flex-direction:column;
            justify-content:center;align-items:center;
            transition:opacity .4s,transform .4s;pointer-events:none;
        }
        .screen.active{pointer-events:all;opacity:1;transform:scale(1)}
        .screen:not(.active){opacity:0;transform:scale(1.08)}
        #menuScreen{background:transparent;z-index:100;position:fixed;display:block;overflow:hidden}
        #menuScreen .logo{
            font-size:58px;font-weight:900;letter-spacing:3px;
            background:linear-gradient(180deg,#ff69b4,#ffd700,#ff1493);
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;
            background-clip:text;margin-bottom:4px;
            filter:drop-shadow(0 0 25px rgba(255,105,180,.6));
            animation:titleSparkle 2s ease-in-out infinite;
        }
        @keyframes titleSparkle{
            0%,100%{filter:drop-shadow(0 0 25px rgba(255,105,180,.6))}
            50%{filter:drop-shadow(0 0 50px rgba(255,215,0,.8)) drop-shadow(0 0 25px rgba(255,105,180,.4))}
        }
        #menuScreen .subtitle{
            color:var(--gold);margin-bottom:8px;letter-spacing:4px;font-size:13px;
            animation:subShine 1.5s ease-in-out infinite;
        }
        @keyframes subShine{
            0%,100%{opacity:.6}
            50%{opacity:1;text-shadow:0 0 10px rgba(255,215,0,.5)}
        }
        .chara-img{
            width:120px;height:auto;border-radius:16px;
            border:2px solid var(--hotpink);
            box-shadow:0 0 20px rgba(255,105,180,.3);
            margin-bottom:12px;transition:transform .3s;
        }
        .chara-img:hover{transform:scale(1.05)}
        .chara-game{
            width:80px;min-width:80px;height:auto;align-self:flex-start;
            border-radius:12px;
            border:1px solid rgba(255,105,180,.2);
            box-shadow:0 0 15px rgba(255,105,180,.2);
            margin-right:4px;z-index:1;
            animation: charaFloat 3s ease-in-out infinite;
            transition: opacity .3s;
        }
        .chara-bg{
            position:absolute;top:2%;left:58%;transform:translateX(-50%);
            max-height:75vh;width:auto;z-index:0;
            opacity:.7;pointer-events:none;
            filter:drop-shadow(0 0 40px rgba(255,105,180,.35));
            animation: charaFloat 4s ease-in-out infinite;
            transition: opacity .5s;
        }
        @keyframes charaFloat{
            0%,100%{transform:translateX(-50%) translateY(0)}
            50%{transform:translateX(-50%) translateY(-8px)}
        }
        .menu-float{
            position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);
            z-index:1;
            display:flex;flex-direction:column;
            align-items:center;gap:4px;
            background:transparent;
            padding:24px 40px;border-radius:20px;
            border:1px solid rgba(255,105,180,.1);
        }
        .credit{font-size:9px;color:var(--text-dim);margin-top:8px;letter-spacing:1px}
        .credit a{color:var(--hotpink);text-decoration:none}
        .crown{font-size:28px;display:block;margin-bottom:4px}
        #menuScreen .high-score-label{color:var(--text-dim);font-size:12px;letter-spacing:2px;margin-bottom:4px}
        #menuScreen .high-score-value{color:var(--gold);font-size:30px;font-weight:700;margin-bottom:32px;text-shadow:0 0 10px rgba(255,215,0,.4)}

        .btn{
            padding:14px 52px;border:2px solid var(--hotpink);background:rgba(255,105,180,.08);
            color:var(--hotpink);font-size:16px;font-weight:bold;cursor:pointer;
            letter-spacing:3px;border-radius:30px;transition:all .25s;
            text-transform:uppercase;position:relative;overflow:hidden;
        }
        .btn::after{
            content:'';position:absolute;inset:0;
            background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%);
            transform:translateX(-100%);transition:transform .5s;
        }
        .btn:hover::after{transform:translateX(100%)}
        .btn:hover{background:rgba(255,105,180,.2);box-shadow:0 0 25px rgba(255,105,180,.4);border-color:var(--deeppink);color:var(--gold)}
        .btn:active{transform:scale(.94)}
        .btn.accent{border-color:var(--gold);color:var(--gold);background:rgba(255,215,0,.08)}
        .btn.accent:hover{background:rgba(255,215,0,.2);box-shadow:0 0 25px rgba(255,215,0,.4)}
        .btn.small{padding:8px 24px;font-size:11px;letter-spacing:2px}

        /* Game layout */
        .game-wrapper{
            position:relative;display:none;flex-direction:column;align-items:center;
            gap:14px;z-index:1;
        }
        .game-wrapper.active{display:flex}

        .game-container{display:flex;gap:22px;align-items:flex-start;min-height:648px}

        .board-wrap{position:relative;border:2px solid var(--hotpink);border-radius:12px;
            box-shadow:
                0 0 20px rgba(255,105,180,.2),
                0 0 60px rgba(255,105,180,.08),
                inset 0 0 30px rgba(255,20,147,.04);
            overflow:hidden;
            width:324px;height:644px;
        }
        canvas#board{display:block;background:rgba(15,5,20,.9)}

        .side-panel{display:flex;flex-direction:column;gap:14px;min-width:150px}

        .panel-box{
            background:rgba(255,105,180,.06);border:1px solid rgba(255,105,180,.15);
            border-radius:12px;padding:14px;text-align:center;
            backdrop-filter:blur(4px);
            transition:box-shadow .3s;
        }
        .panel-box:hover{box-shadow:0 0 15px rgba(255,105,180,.1)}
        .panel-box h3{font-size:10px;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
        .panel-box .value{font-size:22px;font-weight:bold;color:var(--text)}
        .panel-box .value.score{color:var(--gold);text-shadow:0 0 8px rgba(255,215,0,.3)}
        .panel-box .value.level{color:var(--hotpink);text-shadow:0 0 8px rgba(255,105,180,.3)}

        canvas#hold-piece,canvas#next-piece{display:block;margin:0 auto;background:transparent}

        .action-popup{
            position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);
            font-size:30px;font-weight:900;letter-spacing:3px;
            pointer-events:none;opacity:0;transition:all .6s cubic-bezier(.18,.89,.32,1.27);
            z-index:10;text-shadow:0 0 15px currentColor,0 0 30px currentColor;
        }
        .action-popup.show{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
        .action-popup.tspin{color:var(--gold)}
        .action-popup.tetris{color:var(--hotpink)}
        .action-popup.combo{color:#ffb6c1}

        /* Overlays */
        .overlay{
            position:absolute;inset:0;display:none;flex-direction:column;
            justify-content:center;align-items:center;gap:16px;
            background:rgba(10,2,8,.85);border-radius:12px;z-index:20;
        }
        .overlay.show{display:flex}
        .overlay h2{font-size:38px;font-weight:900;letter-spacing:3px;
            background:linear-gradient(180deg,var(--gold),var(--hotpink));
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .overlay .stat{color:var(--text-dim);font-size:13px;margin-top:2px}
        .overlay .stat span{color:var(--gold);font-weight:bold;font-size:18px}
        .overlay .new-best{
            color:var(--gold);font-size:14px;letter-spacing:2px;animation:blink .5s infinite;
            text-shadow:0 0 10px rgba(255,215,0,.6);
        }
        @keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

        /* Mobile touch */
        .touch-controls{
            display:none;gap:10px;align-items:center;justify-content:center;
            width:100%;max-width:400px;flex-wrap:wrap;
        }
        .touch-btn{
            width:54px;height:54px;border:1px solid rgba(255,105,180,.2);
            background:rgba(255,105,180,.08);color:var(--text);border-radius:14px;
            font-size:20px;cursor:pointer;display:flex;align-items:center;
            justify-content:center;transition:all .1s;
            -webkit-tap-highlight-color:transparent;
        }
        .touch-btn:active{background:var(--hotpink);border-color:var(--hotpink);transform:scale(.88);box-shadow:0 0 15px rgba(255,105,180,.5)}
        .touch-btn.wide{width:96px;font-size:11px;letter-spacing:1px;font-weight:bold}
        .touch-dpad{display:grid;grid-template-columns:54px 54px 54px;grid-template-rows:54px 54px;gap:4px}
        .touch-dpad .up{grid-column:2}
        .touch-dpad .left{grid-column:1;grid-row:2}
        .touch-dpad .down{grid-column:2;grid-row:2}
        .touch-dpad .right{grid-column:3;grid-row:2}

        .key-hints{
            display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
            font-size:10px;color:var(--text-dim);margin-top:6px;
        }
        .key-hints kbd{
            display:inline-block;padding:2px 7px;border:1px solid rgba(255,105,180,.2);
            border-radius:4px;background:rgba(255,105,180,.06);font-family:inherit;color:var(--hotpink);
        }

        .vol-row{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:11px;margin-top:6px}
        .vol-row input[type=range]{width:70px;accent-color:var(--hotpink);height:4px}

        @media(max-width:700px){
            .game-container{flex-direction:column;align-items:center;gap:10px;min-height:auto}
            .game-wrapper{width:100%;max-width:420px;padding:8px}
            .side-panel{flex-direction:row;flex-wrap:wrap;justify-content:center;min-width:unset;width:100%;max-width:420px}
            .panel-box{padding:6px 10px;min-width:60px}
            .panel-box h3{font-size:8px;margin-bottom:2px}
            .panel-box .value{font-size:14px}
            .touch-controls{display:flex}
            .key-hints{display:none}
            .chara-game{width:60px;min-width:60px;align-self:center}
            canvas#board{width:300px!important;height:600px!important}
            .board-wrap{width:304px;height:604px!important}
            .score-overlay{top:4px;right:4px;padding:3px 8px}
            .chatter-box{max-width:200px;bottom:4px;left:4px}
            .vn-chara{max-height:60vh}
            .vn-textbox{width:92%;padding:12px 14px}
            .vn-text{font-size:15px;min-height:2.5em}
            .panel-box{padding:8px 12px}
            .panel-box h3{font-size:8px;margin-bottom:2px}
            .panel-box .value{font-size:15px}
            .touch-controls{display:flex}
            .key-hints{display:none}
            canvas#board{width:320px!important;height:640px!important}
        }

        /* ===== GYARU POWER-UPS ===== */

        /* 3. Rainbow gradient on board + glow */
        @keyframes rainbowBorder{
            0%{border-color:#ff69b4}
            25%{border-color:#ffd700}
            50%{border-color:#69f0ae}
            75%{border-color:#87ceeb}
            100%{border-color:#ff69b4}
        }
        .board-wrap.rainbow{border-width:3px;animation:rainbowBorder 2s linear infinite;
            box-shadow:0 0 25px rgba(255,105,180,.5),0 0 50px rgba(255,215,0,.3),0 0 75px rgba(135,206,235,.2)!important}

        /* 4. Purikura frame */
        .chatter-box{
            position:absolute;bottom:6px;left:6px;z-index:8;
            display:flex;align-items:center;gap:6px;
            background:rgba(10,2,15,.75);border:1px solid rgba(255,105,180,.2);
            border-radius:12px;padding:4px 10px 4px 4px;
            max-width:240px;backdrop-filter:blur(4px);
            opacity:0;transform:translateY(10px);
            transition:opacity .3s,transform .3s;pointer-events:none;
        }
        .chatter-box.show{opacity:1;transform:translateY(0)}
        .chatter-face{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,105,180,.2);object-fit:cover}
        .chatter-text{font-size:11px;color:var(--text);line-height:1.3;letter-spacing:.3px}
        .purikura-frame::before{
            content:'♥ ﾌﾟﾘｸﾗ ♥';position:absolute;bottom:-12px;left:50%;
            transform:translateX(-50%);font-size:10px;color:var(--hotpink);
            background:var(--bg);padding:0 8px;letter-spacing:2px;
        }

        /* VN Intro screen */
        #introScreen{background:linear-gradient(180deg,#1a0a18,#2d0a1f);z-index:200}
        .vn-bg{
            position:absolute;inset:0;
            background:radial-gradient(ellipse at center 30%, rgba(255,105,180,.12), transparent 60%);
        }
        .vn-chara{
            position:absolute;bottom:0;left:50%;transform:translateX(-50%);
            max-height:78vh;width:auto;z-index:1;
            filter:drop-shadow(0 0 40px rgba(255,105,180,.4));
            animation: vnBob 3s ease-in-out infinite;
            transition: opacity .5s;
        }
        @keyframes vnBob{
            0%,100%{transform:translateX(-50%) translateY(0)}
            50%{transform:translateX(-50%) translateY(-6px)}
        }
        .vn-textbox{
            position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
            width:85%;max-width:550px;z-index:2;
            background:rgba(10,2,15,.88);border:2px solid rgba(255,105,180,.3);
            border-radius:14px;padding:16px 20px;
            backdrop-filter:blur(8px);
        }
        .vn-name{
            font-size:12px;color:var(--hotpink);margin-bottom:6px;letter-spacing:1px;
            text-shadow:0 0 10px rgba(255,105,180,.3);
        }
        .vn-text{
            font-size:17px;color:var(--text);min-height:3em;line-height:1.6;
            letter-spacing:.5px;
        }
        .vn-click{
            font-size:11px;color:var(--text-dim);text-align:right;margin-top:4px;
            animation:blink .6s infinite;
        }

        /* 5. Marquee/denkouban effect */
        @keyframes marqueeFlash{
            0%,100%{background:transparent}
            10%{background:rgba(255,215,0,.15)}
            20%{background:transparent}
            30%{background:rgba(255,105,180,.15)}
            40%{background:transparent}
        }
        .marquee{animation:marqueeFlash .6s ease-out}

        /* 6. Combo heart gauge */
        .combo-gauge{
            display:flex;gap:4px;justify-content:center;margin-top:4px;flex-wrap:wrap;
            max-width:100px;min-height:24px;
        }
        .combo-heart{
            font-size:14px;opacity:.25;transition:all .3s;
            filter:grayscale(1);
        }
        .combo-heart.filled{
            opacity:1;filter:none;animation:heartPop .3s ease-out;
        }
        @keyframes heartPop{
            0%{transform:scale(.5)}50%{transform:scale(1.4)}100%{transform:scale(1)}
        }

        /* 2. Kaomoji popup enhancement */
        .action-popup .kao{font-size:20px;display:block}