.dp_modal{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:rgb(0 0 0 / .7);overflow:auto}.dp_modal-content{background-color:#fff;margin:2% auto;padding:1px 20px;border-radius:10px;width:90%;max-width:1000px;box-shadow:0 5px 15px rgb(0 0 0 / .3)}.dp_close{color:#000;float:right;font-size:58px;font-weight:400;cursor:pointer;background-color:#FFF;border:none}.dp_close:hover{color:#000}.dp_modal-header h2{text-align:center;margin-bottom:20px;font-size: 20px;}.dp_modal-body{display:flex;flex-wrap:wrap;gap:20px}.dp_left-panel{flex:1;min-width:300px;display:flex;justify-content:center;align-items:flex-start}#dp_canvas{border:1px solid #ccc;max-width:400px;width: 100%;height:auto}.dp_right-panel{width:250px;display:flex;flex-direction:column;gap:15px}@media (max-width:768px){.dp_modal-body{flex-direction:column}.dp_right-panel{width:100%}.dp_left-panel{min-width:100%}}.dp_color-picker input{width:100%;height:40px}.dp_colors{display:flex;flex-wrap:wrap;gap:11px}.dp_colors span{width:40px;height:40px;border-radius:10px;cursor:pointer;border:3px solid #000}.dp_colors span:hover{border-color:#000}.dp_brush-size input{width:100%;padding:5px}.dp_btn{padding:10px;background-color:#4CAF50;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:24px}.dp_btn:hover{background-color:#45a049}.dp_btn_undo{background-color:#f44336}.dp_btn_undo:hover{background-color:#d32f2f}.rp_modal{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:rgb(0 0 0 / .7);overflow:auto}.rp_modal-content{background-color:#fff;margin:2% auto;padding:1px 20px;border-radius:10px;width:90%;max-width:1000px;box-shadow:0 5px 15px rgb(0 0 0 / .3)}.rp_close{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer;background-color:#FFF;border:none}.rp_close:hover{color:#000}.rp_modal-header h2{text-align:center;margin-bottom:20px}.rp_modal-body{display:flex;flex-wrap:wrap;gap:20px}.rp_left-panel{flex:1;min-width:300px;display:flex;justify-content:center;align-items:flex-start}.rp_canvas-container{position:relative;display:inline-block}#rp_canvas{border:1px solid #ccc;max-width:400px;width:100%;height:auto}.rp_text-overlay{font-family:"Street Bold3D Reject";position:absolute;top:50px;left:50px;background:#fff0;border:1px dashed #000;padding:5px;min-width:100px;min-height:20px;cursor:move;outline:none;font-size:20px;color:#000;user-select:none;max-width:80%;white-space:pre-wrap;word-wrap:break-word;display:flex;align-items:flex-start;justify-content:flex-start;text-align:left;touch-action:none}.rp_right-panel{width:250px;display:flex;flex-direction:column;gap:15px}.rp_text-input textarea{width:100%;padding:8px;resize:vertical;min-height:60px;box-sizing:border-box}.rp_font-size{display:flex;flex-direction:column;gap:8px}.rp_font-size input[type="number"]{width:100%;padding:5px;box-sizing:border-box}.rp_font-size input[type="range"]{width:100%}.rp_font-controls{display:flex;align-items:center;gap:10px}.rp_font-controls input[type="number"]{width:60px;padding:5px}.rp_font-controls input[type="range"]{flex:1}@media (max-width:768px){.rp_modal-content{padding:10px!important;;width:96%!important;}.gkp_choice-text{font-size:12px!important}.rp_modal-body{flex-direction:column}.rp_right-panel{width:100%}.rp_left-panel{min-width:100%}}.rp_btn{padding:10px;background-color:#4CAF50;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px}.rp_btn:hover{background-color:#45a049}#hero-img{background-color:#f9f9f9;padding:20px 5px;margin:5px -10px}#immagine-da-colorare{display:flex;margin:0 auto;align-items:center;gap:20px;max-width:650px}#disegno{max-width:300px;width:100%;display:block}#nav_disegni{display:block;font-size:13px;background-color:#fffaf6;width:100%;font-weight:700;margin-bottom:0;padding:7px 2px}.precedente{float:left;margin-left:10px}.prossimo{margin-right:10px;text-align:center;display:block}.bt_azione{display:inline-flex;align-items:center;padding:10px 10px;background-color:#ff6c01;color:#fff;text-decoration:none;border-radius:25px;font-family:Arial,sans-serif;font-weight:400;box-shadow:0 4px 6px rgb(0 0 0 / .1);transition:background-color 0.3s,transform 0.2s;max-width:100%;width:100%;margin-bottom:15px}#statistiche ul{margin-left:0;padding-left:0;margin-bottom:20px}#statistiche ul li{margin-left:5px;display:flex;margin-bottom:10px;align-items:center}.imgpreview{padding-bottom:0!important;margin-bottom:0}#azioni b{display:contents}#disegno{max-width:300px;min-width:130px;width:100%;display:block;border:2px solid #bfbfbf;border-radius:12px;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:inset 0 0 10px rgb(0 0 0 / .1),0 8px 15px rgb(0 0 0 / .2),0 2px 4px rgb(0 0 0 / .4);transition:transform 0.3s ease-in-out,box-shadow 0.3s ease-in-out}#disegno img{border-radius:12px;border-bottom-left-radius:0;border-bottom-right-radius:0}.rating{font-size:18px;color:#ffca2b}.rating-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.player-container{display:flex;align-items:center;background-color:#ffe0b2;border-radius:25px;padding:10px;box-shadow:0 4px 6px rgb(0 0 0 / .1);max-width:320px;margin:20px 0}#play-pause-btn{font-size:40px;width:50px;height:50px;border:none;border-radius:50%;cursor:pointer;margin-right:15px;transition:background-color 0.3s}.play-btn{background-color:#fff0;color:#fff}.pause-btn{background-color:#fff0;color:#fff}#track-info{font-size:18px;margin-top:5px;color:#000;font-weight:700}.unlocker{text-align:center;display:none;text-decoration:underline;color:#FF6C01;background-color:#fff;text-transform:uppercase;font-size:12px;padding:5px;border-radius:25px;border:3px solid #ff6c01;margin-top:10px}.mincc{background:radial-gradient(circle at center,white 35%,transparent 30%);color:#f60}.ar{color:#f60;width:30px}.entry-content p a{color:#147BA4;text-decoration:underline}</style><style>.gkp_choice-grid{margin-top:5px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:15px}.gkp_choice-option{background:linear-gradient(135deg,#fffbeb 0%,#fff9e6 100%);border:3px solid #e5e5e5;border-radius:10px;padding:12px 5px;cursor:pointer;transition:all 0.3s ease;text-align:center;position:relative;overflow:hidden;width:96px}.gkp_choice-option::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .3),transparent);transition:left 0.5s}.gkp_choice-option:hover::before{left:100%}.gkp_choice-option:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgb(255 102 0 / .15);border-color:#ffb380}.gkp_choice-option.gkp_selected{background:linear-gradient(135deg,#fff5e6 0%,#ffe6cc 100%);border:4px solid #f60;box-shadow:0 8px 25px rgb(255 102 0 / .3);transform:scale(1.02)}.gkp_choice-option i{font-size:22px;color:#f60;display:block;margin-bottom:0px;transition:transform 0.3s}.gkp_choice-option:hover i{transform:scale(1.1) rotateZ(5deg)}.gkp_choice-option.gkp_selected i{animation:gkp_bounce 0.5s}@keyframes gkp_bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}.gkp_choice-text{font-size:15px;font-weight:600;color:#333;text-transform:uppercase;line-height:1.2}.gkp_choice-option input[type="radio"]{display:none}.gkp_error-message{color:#d32f2f;font-size:14px;margin-top:8px;margin-bottom:15px;display:none;animation:gkp_shake 0.3s}@keyframes gkp_shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}.gkp_error-message.gkp_show{display:block}.spx40{margin:40px 0}.xpr_brushSize{-webkit-appearance:none;width:100%;height:8px;background:#e1e1e1;border-radius:4px;outline:none}.xpr_brushSize::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg,#4b8bff,#8ac4ff);border-radius:4px}.xpr_brushSize::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:#fff;border:3px solid #4b8bff;border-radius:50%;box-shadow:0 2px 5px rgb(0 0 0 / .2);cursor:pointer;margin-top:-7px}.xpr_brushSize::-moz-range-track{height:8px;background:linear-gradient(90deg,#4b8bff,#8ac4ff);border-radius:4px}.xpr_brushSize::-moz-range-thumb{width:22px;height:22px;background:#fff;border:3px solid #4b8bff;border-radius:50%;cursor:pointer}.btn-mi-piace{background-color:#fff;border-radius:5px;border:1px solid #c4c4c4cc;font-size:12px}#alertmessage1,#alertmessage2{display:none}.gr{background-color:#00b603}.grc{color:#00b603}#correlati{margin:10px 0 30px 0}#correlati ul,#correlati li{padding-left:0;margin-left:0;list-style:none}#correlati ul{margin-bottom:0;display:inline-block}#correlati li{border:2px solid #000;float:left;text-decoration:underline;padding:3px 10px;border-radius:20px;float:left;margin-right:10px;margin-bottom:15px}

/* Layout per schermi grandi (> 550px) */
#immagine-da-colorare {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Due colonne */
  gap: 20px;
}

#info-disegno {
  display: contents; /* Rende il div "invisibile" per il layout */
}

#disegno {
  grid-row: span 2; /* Il disegno occupa l'altezza di due righe a sinistra */
}

/* #statistiche e #azioni ora si comportano come se fossero nella griglia */
#statistiche {
  grid-column: 2; 
}

#azioni {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Layout Mobile (< 550px) */
@media (max-width: 550px) {
  #immagine-da-colorare {
    /* Manteniamo le 2 colonne, ma definiamo un comportamento diverso */
  }

  #disegno {
    grid-row: 1;    /* Prima riga, prima colonna */
    grid-column: 1;
  }

  #statistiche {
    grid-row: 1;    /* Prima riga, seconda colonna (affiancato al disegno) */
    grid-column: 2;
  }

  #azioni {
    grid-row: 2;    /* Seconda riga */
    grid-column: span 2; /* Occupa entrambe le colonne (100% larghezza) */
    margin-top: 15px;
  }
}