/* lotteria.css — Lotteria HabboInHabbo (lotterie attive + storico) */

/* tab In corso / Storico */
.lotto-tabs{display:inline-flex;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:4px;box-shadow:var(--shadow-sm)}
.lotto-tabs button{display:inline-flex;align-items:center;gap:7px;font-family:var(--fontH);font-weight:600;font-size:14px;color:var(--muted);padding:9px 16px;border-radius:10px;transition:.14s}
.lotto-tabs button:hover{color:var(--text)}
.lotto-tabs button.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.lotto-tabs-n{font-size:11px;font-weight:800;color:#fff;background:var(--r1);border-radius:20px;padding:1px 7px}

/* ---- lista lotterie attive ---- */
.lotto-list{display:flex;flex-direction:column;gap:22px;padding-bottom:42px}
.lotto-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,400px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:relative}
.lotto-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c);z-index:1}

.lotto-card-info{padding:26px 26px 22px;min-width:0}
.lotto-card-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:13px}
.lotto-mode{font-family:var(--fontH);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--c);border-radius:7px;padding:4px 10px;box-shadow:0 3px 0 color-mix(in srgb,var(--c),#000 28%)}
.lotto-dates{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.lotto-dates svg{color:var(--c)}
.lotto-card-info h2{font-family:var(--fontH);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--text);margin:0 0 8px;line-height:1.05}
.lotto-desc{margin:0 0 18px;font-size:14.5px;font-weight:600;color:var(--muted);line-height:1.5;max-width:52ch;text-wrap:pretty}

.lotto-prizebox{display:flex;align-items:center;gap:13px;flex-wrap:wrap;background:color-mix(in srgb,var(--c) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 28%,transparent);border-radius:14px;padding:13px 16px;margin-bottom:18px}
.lotto-prizebox-lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.lotto-card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lotto-count{display:flex;flex-direction:column;gap:7px}
.lotto-count-lbl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.lotto-count-lbl svg{color:var(--c)}
.lotto-count-cells{display:flex;gap:8px}
.lotto-count-cell{display:flex;flex-direction:column;align-items:center;min-width:52px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:8px 6px 6px}
.lotto-count-cell b{font-family:var(--fontH);font-weight:700;font-size:22px;color:var(--text);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lotto-count-cell small{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.lotto-part{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.lotto-part svg{color:var(--faint)}
/* partecipanti visibili */
.lotto-people{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.lotto-people-avs{display:flex;align-items:center}
.lotto-people-av{width:32px;height:32px;border-radius:50%;border:2px solid var(--surface);background:var(--surface-2);overflow:hidden;margin-left:-9px;transition:transform .12s}
.lotto-people-av:first-child{margin-left:0}
.lotto-people-av:hover{transform:translateY(-3px);z-index:20 !important}
.lotto-people-av img{width:100%;height:100%;object-fit:cover;object-position:center -1px}
.lotto-people-more{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:50px;margin-left:-9px;background:var(--text);color:var(--surface);font-family:var(--fontH);font-weight:700;font-size:12px;border:2px solid var(--surface)}
.lotto-people-lbl{font-size:13px;font-weight:700;color:var(--muted)}

/* pannello gioco (destra) */
.lotto-card-play{background:var(--surface-2);border-left:1px solid var(--border);padding:22px;display:flex;flex-direction:column;min-width:0}

/* modalità a scelta */
.lotto-choose{display:flex;flex-direction:column;gap:14px}
.lotto-choose-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lotto-choose-title{font-family:var(--fontH);font-weight:600;font-size:14.5px;color:var(--text)}
.lotto-legend{display:flex;gap:11px}
.lotto-legend span{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--muted)}
.lotto-legend i{width:11px;height:11px;border-radius:4px;display:inline-block}
.lotto-legend .d-free{background:var(--surface);border:1px solid var(--border)}
.lotto-legend .d-taken{background:color-mix(in srgb,var(--text) 12%,var(--surface-2));border:1px solid var(--border)}
.lotto-legend .d-sel{background:var(--c)}

.lotto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:7px}
.lotto-num{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-family:var(--fontH);font-weight:700;font-size:14px;color:var(--text);transition:.12s}
.lotto-num:not(:disabled):hover{border-color:var(--c);color:var(--c);transform:translateY(-1px)}
.lotto-num.is-taken{background:color-mix(in srgb,var(--text) 9%,var(--surface-2));color:var(--faint);border-color:transparent;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1.5px}
.lotto-num.is-sel{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--c),#000 28%)}
.lotto-num.is-owned{background:var(--r4);border-color:var(--r4);color:#fff;cursor:default}

/* pannello acquisto */
.lotto-buy{display:flex;flex-direction:column;gap:13px}
.lotto-buy.is-inline{gap:11px;margin-top:4px;padding-top:14px;border-top:1px dashed var(--border)}
.lotto-buy-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--fontH);font-weight:600;font-size:15px;color:var(--text)}
.lotto-buy-h>span:first-child{display:inline-flex;align-items:center;gap:8px}
.lotto-buy-h svg{color:var(--c)}
.lotto-balance{font-family:var(--fontB);font-size:12.5px;font-weight:700;color:var(--muted)}
.lotto-balance b{color:var(--text)}

.lotto-qty{display:flex;flex-direction:column;gap:8px}
.lotto-qty-lbl{font-size:13px;font-weight:700;color:var(--muted)}
.lotto-stepper{display:inline-flex;align-items:center;gap:0;width:fit-content;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.lotto-stepper button{width:42px;height:42px;font-size:22px;font-weight:700;color:var(--text);background:var(--surface);transition:.12s}
.lotto-stepper button:hover:not(:disabled){background:var(--surface-2);color:var(--c)}
.lotto-stepper button:disabled{color:var(--faint);cursor:not-allowed}
.lotto-stepper b{min-width:48px;text-align:center;font-family:var(--fontH);font-weight:700;font-size:18px;color:var(--text)}
.lotto-qty-hint{font-size:12px;font-weight:600;color:var(--faint)}

.lotto-pick-info{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--muted)}
.lotto-pick-info b{color:var(--text)}
.lotto-pick-nums{font-family:var(--fontH);font-weight:600;color:var(--c)}

.lotto-total{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:700;color:var(--muted)}
.lotto-total b{font-family:var(--fontH);font-size:17px;color:var(--text)}
.lotto-buyrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lotto-buyrow .lotto-total{flex:1;min-width:120px}
.lotto-buy-btn{justify-content:center}
.lotto-buy-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.lotto-owned{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--r4);background:color-mix(in srgb,var(--r4) 12%,var(--surface));border-radius:11px;padding:9px 13px}
.lotto-owned svg{flex:0 0 auto}
.lotto-owned b{color:var(--text)}

/* stato ospite */
.lotto-buy.is-guest{align-items:flex-start;gap:11px}
.lotto-buy.is-guest p{margin:0;font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.5;display:flex;align-items:center;gap:8px}
.lotto-buy.is-guest p svg{color:var(--c);flex:0 0 auto}
.lotto-buy-actions{display:flex;gap:10px;flex-wrap:wrap}
.lotto-buy-note{font-size:12px;font-weight:700;color:var(--faint)}

/* premio */
.lotto-prize{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 11px;border-radius:11px;font-family:var(--fontH);font-weight:600;font-size:13.5px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.lotto-prize.is-big{font-size:17px;padding:9px 16px 9px 13px}
.lotto-prize.is-badge{padding:3px 13px 3px 4px}
.lotto-prize-badge{flex:0 0 auto}
.lotto-prize.is-credits{color:#B07A00;background:color-mix(in srgb,#FFC83D 18%,var(--surface));border-color:color-mix(in srgb,#FFC83D 45%,transparent)}
.lotto-prize.is-furni{color:var(--r7);background:color-mix(in srgb,var(--r7) 12%,var(--surface));border-color:color-mix(in srgb,var(--r7) 32%,transparent)}
.lotto-prize.is-points{color:var(--r4);background:color-mix(in srgb,var(--r4) 12%,var(--surface));border-color:color-mix(in srgb,var(--r4) 32%,transparent)}

/* ---- storico ---- */
.lotto-history{display:flex;flex-direction:column;gap:12px;padding-bottom:42px}
.lotto-past{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px 20px;transition:.14s}
.lotto-past:hover{box-shadow:var(--shadow)}
.lotto-past-main{flex:1;min-width:220px;display:flex;flex-direction:column;gap:9px}
.lotto-past-top{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.lotto-past-top h3{font-family:var(--fontH);font-weight:600;font-size:17px;color:var(--text)}
.lotto-past-date{font-size:12.5px;font-weight:700;color:var(--faint)}
.lotto-past-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lotto-winner{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:9px 13px}
.lotto-winner-lbl{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.lotto-winner-user{display:flex;align-items:center;gap:8px}
.lotto-winner-user img{width:34px;height:34px;border-radius:9px;background:var(--surface);object-fit:cover;object-position:center -2px}
.lotto-winner-user b{font-size:14px;font-weight:800;color:var(--text)}
.lotto-winner-user:hover b{color:var(--r6)}
.lotto-winner-num{font-family:var(--fontH);font-weight:700;font-size:13px;color:#fff;background:var(--r3);border-radius:9px;padding:5px 10px;white-space:nowrap}

/* ---- mobile ---- */
.hih[data-mobile="true"] .lotto-card{grid-template-columns:1fr}
.hih[data-mobile="true"] .lotto-card-play{border-left:none;border-top:1px solid var(--border)}
.hih[data-mobile="true"] .lotto-card-info h2{font-size:22px}
.hih[data-mobile="true"] .lotto-tabs{width:100%}
.hih[data-mobile="true"] .lotto-tabs button{flex:1;justify-content:center}
.hih[data-mobile="true"] .lotto-grid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}
.hih[data-mobile="true"] .lotto-winner{width:100%}