/* css/fabbro.css - stile per il Fabbro delle Parole */
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 { width:100%; max-width:980px; background:#fff; border-radius:12px; padding:20px; box-shadow:0 6px 20px rgba(16,24,40,0.06);}
.title { font-size:1.4rem; margin:0 0 6px; }
.subtitle { color:#666; margin-bottom:12px; }

/* pieces area */
.pieces-wrap { display:flex; gap:10px; flex-wrap:wrap; padding:12px; border-radius:10px; background:#f2f4f7; margin-bottom:12px; min-height:64px; }
.piece {
  display:inline-flex; align-items:center; justify-content:center;
  background:#e6e9ef; color:#111; padding:8px 12px; border-radius:8px; font-weight:600;
  cursor:grab; user-select:none; box-shadow:0 2px 6px rgba(0,0,0,0.04);
}
.piece.dragging { opacity:0.6; transform:scale(0.98); }

/* forge area */
.forge { margin-top:10px; border-radius:10px; padding:12px; background:#fff8ed; border:1px solid #f0d8b0; min-height:60px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.slot { background:#fff; padding:8px 10px; border-radius:6px; border:1px dashed #ccc; min-width:50px; text-align:center; font-weight:600; }

/* buttons */
.controls { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.btn { padding:10px 14px; border-radius:8px; border:none; cursor:pointer; font-weight:600; }
.btn.primary { background:#0066ff; color:white; }
.btn.ghost { background:#fff; border:1px solid #ddd; color:#333; }
.btn.warn { background:#ff8c42; color:white; }

/* right column (info) */
.right { margin-left:18px; min-width:220px; max-width:280px; }
.row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #eee; }

/* layout two column */
.main-row { display:flex; gap:18px; align-items:flex-start; }
.left { flex:1; }

/* forged list */
.forged-list { margin-top:12px; background:#f8fbff; padding:10px; border-radius:8px; }

/* responsive */
@media (max-width:880px) {
  .main-row { flex-direction:column; }
  .right { margin-left:0; max-width:none; }
}

footer {
    margin-top: 50px;
}

/* Stile selettore livello */
.select-level {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;  /* rimuove stile nativo su Chrome/Firefox */
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    min-width: 120px;
}

/* Hover e focus */
.select-level:hover {
    border-color: #0066ff;
    background-color: #fff;
}

.select-level:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 2px rgba(0,102,255,0.2);
}

/* Aggiungi freccia personalizzata */
.select-level::-ms-expand {
    display: none; /* per IE */
}

.select-level::after {
    content: "▼";
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: #666;
}

.msg-box {
    margin-top: 10px;
}

/*.ghost {
    opacity: 0.4;
    transform: scale(1.1);
}*/
.forge {
    min-height: 60px;
    padding: 10px;
    border: 2px dashed #aaa;
    border-radius: 10px;
}