/* ============================================================
   PANEN KARET PALI — STYLE.CSS
   Scratch 3.0-style SVG puzzle blocks
   ============================================================ */

:root {
    /* ── Scratch-like colours ── */
    --blk-move:       #4C97FF;
    --blk-move-shad:  #3373CC;
    --blk-tap:        #0FBD8C; /* Pen / Extension green */
    --blk-tap-shad:   #0B8E69;
    --blk-repeat:     #FFAB19; /* Control orange */
    --blk-repeat-shad:#CF8B17;
    --blk-if:         #4CBFE6; /* Cyan */
    --blk-if-shad:    #398EAC;
    --blk-rain:       #039BE5; /* Dark blue */
    --blk-rain-shad:  #0277BD;
    --blk-event:      #FFBF00; /* Event yellow */
    --blk-event-shad: #CC9900;
    --blk-cuka:       #AB47BC; /* Purple */
    --blk-cuka-shad:  #8E24AA;

    /* ── UI colours ── */
    --clr-green:      #4CAF50;
    --clr-green-dark: #388E3C;
    --clr-green-pale: #E8F5E9;
    --clr-yellow:     #FFC107;
    --clr-yellow-lt:  #FFF8E1;
    --clr-orange:     #FF9800;
    --clr-red:        #EF5350;
    --clr-white:      #fff;
    --clr-g100:       #F5F5F5;
    --clr-g200:       #EEEEEE;
    --clr-g300:       #E0E0E0;
    --clr-g600:       #757575;
    --clr-g800:       #424242;
    --clr-g900:       #212121;
    --ws-bg:          #F5F5F5;

    /* ── Dimensions ── */
    --font:       'Nunito', system-ui, sans-serif;
    --grid-cols:  7;
    --grid-cell:  min(56px, calc((100vh - 250px) / 7));
    --rad:        4px;
    --rad-lg:     14px;
    --sp-sm:      8px;
    --sp-md:      14px;
    --z-modal:    1000;
}


/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body {
    font-family: var(--font);
    background: linear-gradient(120deg, #E8F5E9, #F1F8E9, #F9FBE7, #E8F5E9);
    background-size: 300% 300%;
    animation: smoothBg 15s ease infinite;
    color: var(--clr-g900);
    line-height: 1.5;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@keyframes smoothBg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px}


/* ═══════════════════════════════════
   HEADER
   ═══════════════════════════════════ */
.game-header{background:linear-gradient(135deg,var(--clr-green),var(--clr-green-dark));color:#fff;padding:var(--sp-sm) 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 12px rgba(0,0,0,.1);flex-shrink:0;z-index:10}
.header-brand{display:flex;align-items:center;gap:var(--sp-md)}
.brand-logo{font-size:2rem;animation:bounce 2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.brand-title{font-size:1.25rem;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.brand-subtitle{font-size:.62rem;opacity:.85;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.header-level{display:flex;align-items:center;gap:var(--sp-md)}
.level-pill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);padding:4px 14px;border-radius:20px}
.level-label{font-size:.58rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.8}
.level-num{font-size:1.2rem;font-weight:900}
.level-title{font-weight:700;font-size:.82rem;opacity:.9}


/* ═══════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════ */
.game-main{flex:1;display:grid;grid-template-columns:55fr 45fr;gap:var(--sp-md);padding:var(--sp-md);overflow:hidden;min-height:0}
.panel{background:var(--clr-white);border-radius:var(--rad-lg);box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;flex-direction:column;overflow:hidden}
.panel-head{padding:var(--sp-sm) var(--sp-md);background:var(--clr-g100);border-bottom:1px solid var(--clr-g200);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.panel-icon-title{font-weight:800;font-size:.85rem;color:var(--clr-g800)}


/* ═══════════════════════════════════
   MAP PANEL
   ═══════════════════════════════════ */
.panel-map{width:100%; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden;}
.map-hud{display:flex;gap:var(--sp-sm);padding:var(--sp-sm) var(--sp-md);flex-shrink:0}
.hud-item{display:flex;align-items:center;gap:4px;background:var(--clr-green-pale);padding:3px 8px;border-radius:8px;transition:transform .15s}
.hud-item.pulse{animation:hp .35s ease}
@keyframes hp{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.hud-icon{font-size:1rem}.hud-label{font-size:.52rem;font-weight:700;text-transform:uppercase;color:var(--clr-g600)}
.hud-value{font-size:.82rem;font-weight:800;color:var(--clr-green-dark)}

/* 7×7 Grid */
.grid-container{display:grid;grid-template-columns:repeat(var(--grid-cols),var(--grid-cell));grid-template-rows:repeat(var(--grid-cols),var(--grid-cell));gap:2px;padding:var(--sp-md);justify-content:center;position:relative}
.grid-cell{width:var(--grid-cell);height:var(--grid-cell);display:flex;align-items:center;justify-content:center;border-radius:var(--rad);font-size:1.5rem;position:relative;transition:background .3s;user-select:none}
.cell-grass{background:#C5E1A5}.cell-rock{background:#BCAAA4}.cell-tree{background:#C5E1A5}.cell-tree.tapped{background:#A5D6A7}
.cell-bamboo{background:#C5E1A5}.cell-sudung{background:#D7CCC8}
.cell-highlight{box-shadow:inset 0 0 0 3px var(--clr-yellow);background:var(--clr-yellow-lt)!important}
.player-sprite{font-size:1.8rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));animation:idle 1.4s ease-in-out infinite;display:inline-block}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.dir-arrow{position:absolute;bottom:2px;right:3px;font-size:.5rem;opacity:.5;pointer-events:none}

/* Tap animation */
.tap-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:5}
.tap-drip{font-size:.9rem;animation:dripF 1s ease-in forwards;opacity:0}
@keyframes dripF{0%{opacity:1;transform:translateY(-6px) scale(.7)}70%{opacity:1;transform:translateY(6px)}100%{opacity:0;transform:translateY(14px)}}
.tap-bucket{font-size:1.1rem;animation:bucketP .5s ease-out forwards;opacity:0}
@keyframes bucketP{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.cell-shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Rain & Cuka */
.rain-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;font-size:1.4rem;pointer-events:none;z-index:4;animation:floatR 2s infinite ease-in-out}
@keyframes floatR{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.cuka-drip{font-size:.9rem;animation:cukaF 1s ease-in forwards;opacity:0}
@keyframes cukaF{0%{opacity:1;transform:translateY(-10px) scale(.8)}70%{opacity:1;transform:translateY(2px)}100%{opacity:0;transform:translateY(10px)}}
.global-rain-active::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:20;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M15 0 L10 20 M45 30 L40 50' stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-size:60px 60px;animation:rain1 .4s linear infinite;border-radius:var(--rad-lg);}
.global-rain-active::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:19;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M30 10 L26 22 M70 50 L66 62 M10 60 L6 72' stroke='rgba(200,230,255,0.6)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-size:90px 90px;animation:rain2 .5s linear infinite;border-radius:var(--rad-lg);}
@keyframes rain1{0%{background-position:0 0}100%{background-position:-15px 60px}}
@keyframes rain2{0%{background-position:0 0}100%{background-position:-30px 90px}}
.level-desc-card{margin:0 var(--sp-md) var(--sp-md);padding:var(--sp-sm) var(--sp-md);background:var(--clr-green-pale);border-radius:8px;border:1px solid #C8E6C9}
.ldesc-label{font-size:.6rem;font-weight:800;text-transform:uppercase;color:var(--clr-green-dark);margin-bottom:2px}
.ldesc-text{font-size:.72rem;color:var(--clr-g800);line-height:1.4}


/* ═══════════════════════════════════
   CODE PANEL (Toolbox & Workspace)
   ═══════════════════════════════════ */
.panel-code{min-width:0}
.code-area{flex:1;display:grid;grid-template-columns:180px 1fr;overflow:hidden;min-height:0}

/* ── Toolbox ── */
.toolbox{background:var(--clr-g100);border-right:1px solid var(--clr-g200);padding:var(--sp-sm);display:flex;flex-direction:column;gap:6px;overflow-y:auto;transition:background 0.2s}
.toolbox.trash-hover{background:#ffcdd2;} /* Light red when dragging over to delete */
.toolbox-label{font-size:.55rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--clr-g600);text-align:center;padding-bottom:2px;border-bottom:1px solid var(--clr-g300)}
.toolbox-hint{font-size:.6rem;color:var(--clr-g600);text-align:center;line-height:1.2}
.toolbox-blocks{display:flex;flex-direction:column;gap:4px;align-items:center}
.toolbox-tip{font-size:.6rem;color:var(--clr-g800);line-height:1.3;background:var(--clr-yellow-lt);border:1px solid #FFE082;padding:5px 7px;border-radius:8px;margin-top:auto}


/* ═══════════════════════════════════
   WORKSPACE
   ═══════════════════════════════════ */
.workspace-wrap{display:flex;flex-direction:column;background:var(--ws-bg);overflow:hidden}
.event-block-slot{flex-shrink:0;padding:0;z-index:2;position:relative}

.workspace-area{
    flex:1;overflow-y:auto;
    padding:0 var(--sp-md) 150px; /* Extra space at bottom to ease dropping */
    display:flex;flex-direction:column;
    min-height:60px;position:relative;
    transition:background .15s;
}
.workspace-area.drag-over{background:#E8F5E9}

.ws-empty-hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:24px var(--sp-md);color:var(--clr-g600);font-size:.72rem;text-align:center;pointer-events:none}
.ws-empty-icon{font-size:1.6rem;opacity:.4}
.ws-empty-hint.hidden{display:none}


/* ═══════════════════════════════════
   SCRATCH BLOCKS — SVG Shapes
   ═══════════════════════════════════ */
.palette-block{cursor:pointer;position:relative;user-select:none;transition:transform .1s,filter .1s;width:140px;height:44px;}
.palette-block:hover{transform:translateY(-2px);filter:brightness(1.1)}
.palette-block:active{transform:scale(.94)}

.ws-block{
    position:relative;
    width:160px;
    min-height:44px;
    cursor:grab;user-select:none;
    transition:filter .1s;
    animation:blockIn .2s ease-out;
    display: flex;
    flex-direction: column;
}
.ws-block > .block-content, .c-head > .block-content {
    flex: 0 0 44px;
    height: 44px;
}

@keyframes blockIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.ws-block:active{cursor:grabbing; z-index: 9999 !important;}
.ws-block:hover{filter:brightness(1.08)}

/* Workspace Block Colors */
.wb-move { color: var(--blk-move); }
.wb-tap { color: var(--blk-tap); }
.wb-repeat { color: var(--blk-repeat); }
.wb-if { color: var(--blk-if); }
.wb-rain { color: var(--blk-rain); }
.wb-event { color: var(--blk-event); }
.wb-cuka { color: var(--blk-cuka); }

/* SVG Background */
.block-shape{position:absolute;top:0;left:0;pointer-events:none;display:block;}

/* Colour assignments */
.wb-move{color:var(--blk-move)}
.wb-move>.block-shape{filter:drop-shadow(0 2px 0 var(--blk-move-shad))}
.wb-tap{color:var(--blk-tap)}
.wb-tap>.block-shape{filter:drop-shadow(0 2px 0 var(--blk-tap-shad))}
.wb-cuka{color:var(--blk-cuka)}
.wb-cuka>.block-shape{filter:drop-shadow(0 2px 0 var(--blk-cuka-shad))}
.wb-repeat{color:var(--blk-repeat)}
.wb-repeat>.block-shape{filter:drop-shadow(0 2px 0 var(--blk-repeat-shad))}
.wb-rain{color:var(--blk-rain)}
.wb-rain>.block-shape{filter:drop-shadow(0 2px 0 var(--blk-rain-shad))}

/* Content */
.block-content{
    position:relative;z-index:1;height:44px;
    display:flex;align-items:center;gap:7px;
    padding:0 30px 0 12px;
    color:#fff;font-weight:700;font-size:.8rem;
    text-shadow:0 1px 1px rgba(0,0,0,.2);
    pointer-events:none;
}
.blk-icon{font-size:1rem}

/* Delete functionality now handled by drag-to-trash (dropping on toolbox) */



.drag-placeholder {
    width: 160px;
    height: 44px;
    position: relative;
    color: rgba(0,0,0,0.12);
    pointer-events: none;
    z-index: 10;
}

.ws-block.executing{filter:brightness(1.15) drop-shadow(0 0 8px rgba(255,193,7,.5))!important;z-index:5;}


/* ═══════════════════════════════════
   EVENT HAT BLOCK
   ═══════════════════════════════════ */
.event-hat{position:relative;width:160px;height:44px;color:var(--blk-event);}
.event-hat>.block-shape{position:absolute;top:0;left:0;pointer-events:none;display:block;filter:drop-shadow(0 2px 0 var(--blk-event-shad))}
.event-hat>.block-content{
    position:relative;z-index:1;height:44px;
    display:flex;align-items:center;gap:7px;
    padding:0 14px;
    color:var(--clr-white);font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.3);
}

/* ═══════════════════════════════════
   C-BLOCKS (REPEAT, IF)
   ═══════════════════════════════════ */
.c-block-wrap{width:160px;margin-bottom:4px;position:relative;cursor:grab;user-select:none;animation:blockIn .2s ease-out}
.c-head{position:relative;width:160px;height:44px;cursor:grab;user-select:none;transition:filter .1s;}
.c-head:hover{filter:brightness(1.08)}
.c-head>.block-shape{position:absolute;top:0;left:0;pointer-events:none;display:block;}
.c-head>.block-content{position:relative;z-index:1;height:44px;display:flex;align-items:center;gap:6px;padding:0 30px 0 12px;color:#fff;font-weight:700;font-size:.8rem;text-shadow:0 1px 1px rgba(0,0,0,.2);pointer-events:none;}
.c-foot{position:relative;width:160px;height:14px;}
.c-body{margin-left:14px;padding:0 6px 4px;min-height:44px;display:flex;flex-direction:column;transition:background .15s;}
.c-body-hint{font-size:.6rem;color:var(--clr-g600);font-style:italic;padding:12px 4px;text-align:center}

/* Specific logic for Repeat */
.c-wrap-repeat{color:var(--blk-repeat)}
.c-wrap-repeat .c-head>.block-shape, .c-wrap-repeat .c-foot>.block-shape{filter:drop-shadow(0 2px 0 var(--blk-repeat-shad))}
.c-wrap-repeat .c-body{border-left:4px solid var(--blk-repeat);background:rgba(255,171,25,0.08);}
.c-wrap-repeat .c-body.drag-over{background:rgba(255,171,25,0.2)}

/* Specific logic for If */
.c-wrap-if{color:var(--blk-if)}
.c-wrap-if .c-head>.block-shape, .c-wrap-if .c-foot>.block-shape{filter:drop-shadow(0 2px 0 var(--blk-if-shad))}
.c-wrap-if .c-body{border-left:4px solid var(--blk-if);background:rgba(76,191,230,0.08);}
.c-wrap-if .c-body.drag-over{background:rgba(76,191,230,0.2)}

/* Specific logic for Rain */
.c-wrap-rain{color:var(--blk-rain)}
.c-wrap-rain .c-head>.block-shape, .c-wrap-rain .c-foot>.block-shape{filter:drop-shadow(0 2px 0 var(--blk-rain-shad))}
.c-wrap-rain .c-body{border-left:4px solid var(--blk-rain);background:rgba(3,155,229,0.08);}
.c-wrap-rain .c-body.drag-over{background:rgba(3,155,229,0.2)}

.repeat-count-input{
    width:32px;border:1px solid rgba(0,0,0,0.2);border-radius:12px;
    text-align:center;font-family:var(--font);font-weight:900;font-size:.8rem;
    color:var(--clr-g900);padding:2px;background:#fff;outline:none;
    pointer-events:auto;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
}
.repeat-count-input:focus{border-color:var(--blk-move);}
.repeat-x{font-size:.7rem;opacity:.9}


/* ═══════════════════════════════════
   CONTROLS
   ═══════════════════════════════════ */
.workspace-controls{display:flex;gap:var(--sp-sm);padding:var(--sp-sm) var(--sp-md) var(--sp-md);flex-shrink:0;background:var(--clr-white);border-top:1px solid var(--clr-g200)}
.btn{flex:1;border:none;border-radius:8px;padding:10px 8px;font-family:var(--font);font-weight:800;font-size:.75rem;cursor:pointer;transition:background .1s,transform .1s,box-shadow .1s;letter-spacing:.3px}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-run{background:linear-gradient(135deg,var(--clr-green),var(--clr-green-dark));color:#fff}
.btn-run:hover:not(:disabled){box-shadow:0 0 14px rgba(76,175,80,.4)}
.btn-reset{background:#FFF3E0;color:var(--clr-orange)}.btn-reset:hover:not(:disabled){background:#FFE0B2}
.btn-clear{background:#FFEBEE;color:var(--clr-red)}.btn-clear:hover:not(:disabled){background:#FFCDD2}
.block-count-badge{font-size:.62rem;font-weight:700;background:var(--clr-green-pale);color:var(--clr-green-dark);padding:2px 10px;border-radius:20px}


/* ═══════════════════════════════════
   STATUS, MODALS, TOAST
   ═══════════════════════════════════ */
.status-bar{padding:var(--sp-sm) 24px;background:var(--clr-white);border-top:1px solid var(--clr-g200);text-align:center;flex-shrink:0}
.status-msg{font-size:.72rem;font-weight:600;color:var(--clr-g800)}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal)}
.modal-overlay.hidden{display:none}
.modal-box{background:#fff;border-radius:20px;padding:24px 24px 20px;max-width:380px;width:90%;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.14);animation:modalIn .3s ease-out}

.modal-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.85) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 28px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25), 0 10px 20px rgba(0,0,0,0.1), inset 0 2px 0 rgba(255,255,255,0.8);
    animation: modalCardIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    border: 1px solid rgba(255,255,255,0.6);
    position: relative;
}

@keyframes modalCardIn {
    0% { opacity: 0; transform: translateY(50px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-box.hidden{display:none}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-gfx{font-size:3rem;margin-bottom:var(--sp-sm);animation:gfxP .5s ease-out}
@keyframes gfxP{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.modal-heading{font-size:1.25rem;font-weight:900;margin-bottom:4px}
.modal-desc{font-size:.8rem;color:var(--clr-g600);margin-bottom:18px}
.stars-row{display:flex;justify-content:center;gap:var(--sp-sm);margin-bottom:18px}
.star-big{font-size:2rem;animation:starP .45s ease-out backwards}
.star-big:nth-child(1){animation-delay:.1s}.star-big:nth-child(2){animation-delay:.25s}.star-big:nth-child(3){animation-delay:.4s}
.star-big.empty{filter:grayscale(1);opacity:.3}
@keyframes starP{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.result-table{text-align:left;margin:0 auto 18px;max-width:250px}
.result-row{display:flex;justify-content:space-between;padding:4px 0;font-size:.78rem;border-bottom:1px solid var(--clr-g200)}
.result-row:last-child{border-bottom:none}
.modal-btns{display:flex;gap:var(--sp-sm);justify-content:center}
.btn-primary{background:linear-gradient(135deg,var(--clr-green),var(--clr-green-dark));color:#fff;padding:10px 18px}
.btn-secondary{background:var(--clr-g200);color:var(--clr-g800);padding:10px 18px}

.floating-msg{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);background:var(--clr-g900);color:#fff;padding:10px 20px;border-radius:20px;font-size:.78rem;font-weight:700;box-shadow:0 8px 28px rgba(0,0,0,.14);z-index:1100;animation:toastIn .25s ease-out;white-space:nowrap}
.floating-msg.hidden{display:none}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}


/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */
@media(max-width:900px){.game-main{grid-template-columns:1fr;overflow-y:auto}.panel-map{width:auto}:root{--grid-cell:44px}}
@media(max-width:560px){:root{--grid-cell:36px}.game-header{flex-direction:column;gap:var(--sp-sm);text-align:center}.code-area{grid-template-columns:1fr;grid-template-rows:auto 1fr}.toolbox{flex-direction:row;flex-wrap:wrap;gap:4px;border-right:none;border-bottom:1px solid var(--clr-g200)}.toolbox-label,.toolbox-hint{display:none}.toolbox-blocks{flex-direction:row;flex-wrap:wrap;gap:4px;align-items:flex-start}.palette-block{margin-bottom:0!important}}

/* ═══════════════════════════════════
   LEVEL MAP & INFO MODAL
   ═══════════════════════════════════ */
.map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 18px;
    margin-top: 20px;
}
.level-map-item {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
.level-map-item:hover:not(.locked) {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 20px rgba(0,0,0,0.1);
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--clr-green-light);
}
.level-map-item.current {
    border: 2px solid var(--clr-green);
    background: rgba(232, 245, 233, 0.8);
    box-shadow: 0 0 15px rgba(76,175,80,0.2);
}
.level-map-item.locked {
    background: rgba(245, 245, 245, 0.4);
    border-color: rgba(220, 220, 220, 0.4);
    cursor: not-allowed;
    opacity: 0.7;
}
.lm-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
    line-height: 1;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}
.lm-num {
    font-weight: 800;
    color: #424242;
    font-size: 1rem;
    margin-bottom: 6px;
}
.lm-stars {
    font-size: 0.85rem;
    letter-spacing: 2px;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}
.info-card {
    background: #FAFAFA;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #E0E0E0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
    border-color: var(--clr-green-light);
    background: #F1F8E9;
}
.info-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-align: center;
}
.info-title {
    font-weight: 800;
    color: var(--clr-green-dark);
    margin-bottom: 8px;
    text-align: center;
    font-size: 1.2rem;
}
.info-desc {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    text-align: center;
}