/* body, container, header */
body {
    font-family: system-ui, sans-serif;
    background: #fafafa;
    margin: 0;
    padding: 20px;
    
    /* flex per layout verticale */
    display: flex;
    flex-direction: column;  /* logo sopra container */
    align-items: center;     /* centra orizzontalmente */
}

header {
    margin-bottom: 20px;
}

.logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
}


.container { max-width:480px; width:100%; background:white; padding:25px; border-radius:14px; box-shadow:0 3px 10px rgba(0,0,0,0.1);}
h1{font-size:1.6rem; text-align:center; margin:0 0 15px 0;}
.progress { text-align:center; margin:10px 0; font-weight:bold;}

/* box, moves, word rows */
.box { background:#e7eef7; padding:12px; border-radius:10px; font-size:1.05rem; text-align:center; line-height:1.5;}
.word-row { display:flex; justify-content:center; gap:6px; margin:10px 0; opacity:0; transform:translateY(10px); animation:fadeSlideIn 0.3s forwards;}
.cell { width:38px; height:42px; border-radius:6px; background:#eee; display:flex; align-items:center; justify-content:center; font-family:monospace; font-size:1.3rem; text-transform:uppercase;}
.cell.changed{background:#c8f7c5;font-weight:bold;}
@keyframes fadeSlideIn { to{opacity:1; transform:translateY(0);} }

/* input form */
form{margin-top:20px; display:flex; gap:10px;}
input[type=text]{flex:1; padding:10px 12px; font-size:1.2rem; border:2px solid #ccc; border-radius:8px; box-sizing:border-box; text-transform:uppercase;}
button{padding:10px 14px; font-size:1rem; background:#0066ff; color:white; border:none; border-radius:8px; cursor:pointer; white-space:nowrap;}
button:hover{background:#004ecc;}

/* messages */
.message{margin-top:15px; padding:10px; border-radius:8px; font-size:1rem; text-align:center;}
.message.success{background:#ddffdd;color:#005500;}
.message.error{background:#ffdddd;color:#a20000;}

/* dark mode automatico */
@media (prefers-color-scheme: dark){
    body{background:#121212;}
    .container{background:#1e1e1e; box-shadow:0 3px 10px rgba(0,0,0,0.5);}
    .box{background:#2a2a2a; color:#f0f0f0;}
    .cell{background:#333; color:#fff;}
    .cell.changed{background:#3c6e3c;}
    .message.success{background:#225522;color:#cfc;}
    .message.error{background:#552222;color:#fcc;}
}

.hint-btn {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 1rem;
    background: #ffcc00;
    color: #333;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    width: 100%;
}

.hint-btn:hover {
    background: #e6b800;
}

.info-btn {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 1rem;
    background: #00ccff;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    width: 100%;
}

.info-btn:hover {
    background: #00a3cc;
}

.instructions-panel {
    display: none; /* nascosto di default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    max-width: 90%;
    z-index: 1000;
}

.instructions-panel h2 {
    margin-top: 0;
}

.close-btn {
    margin-top: 15px;
    padding: 6px 12px;
    font-size: 1rem;
    background: #ff6666;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.close-btn:hover {
    background: #cc3333;
}
.reset-btn {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 1rem;
    background: #28a745;  /* verde */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    width: 100%;
}

.reset-btn:hover {
    background: #218838;  /* verde scuro al passaggio */
}

.attempts {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    font-size: 1rem;
    color: #333;
    margin-bottom: 10px;
}

@media (prefers-color-scheme: dark) {
    .attempts { color: #eee; }
}

.monthly-theme {
    border: 2px solid #6a00ff;
    box-shadow: 0 0 20px rgba(106,0,255,0.3);
    background: linear-gradient(180deg, #f7f0ff, #ffffff);
}

.subtitle {
    text-align:center;
    margin-top:-10px;
    font-size:1rem;
    color:#6a00ff;
}

.play-btn {
    background: #6a00ff;
    color: white;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    border: none;
    cursor: pointer;
}

.play-btn:hover {
    background: #5700d4;
}

footer {
    margin-top: 50px;
}

.monthly-btn {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 1rem;
    background: #C420E3;  
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    width: 100%;
}

.monthly-btn:hover {
    background: #B163C2;
}