/* =====================================================================
   HOME DEL GIOCATORE
   Il pezzo forte è il tavolo verde in alto con il saluto, il rango e le
   carte in ventaglio; tutto il resto è ordinato e sobrio.
   ===================================================================== */
.hm{display:flex;flex-direction:column;gap:18px;max-width:1180px;margin:0 auto;width:100%}

/* ---------- tavolo di benvenuto ---------- */
.hm-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:center;
  padding:clamp(22px,3.5vw,40px);border-radius:26px;color:#F2EEE3;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 1.5px) 0 0/18px 18px,radial-gradient(120% 140% at 20% 0%,var(--felt-2),var(--felt));
  box-shadow:0 0 0 7px var(--wood),0 0 0 9px var(--wood-2),0 22px 44px rgba(0,0,0,.28);margin:9px}
.hm-greet{display:flex;flex-direction:column;gap:14px;min-width:0}
.hm-greet h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1;margin:0;color:var(--gold-2);text-shadow:0 3px 0 var(--wood-2)}
.hm-greet p{margin:0;max-width:44ch;color:#D3DBD4;font-size:16px}

.hm-rank{display:flex;gap:16px;align-items:center;background:rgba(0,0,0,.24);border-radius:18px;padding:14px 18px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rk) 70%,transparent);max-width:460px}
.hm-emblem{flex:0 0 auto;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:34px;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--rk) 40%,#fff),var(--rk));box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 0 18px color-mix(in srgb,var(--rk) 55%,transparent)}
.hm-rinfo{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.hm-rname{font-family:var(--display);font-size:24px;line-height:1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hm-rname span{font-family:var(--body);font-weight:800;font-size:14px;color:#C9D1CA}
.hm-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.hm-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--rk) 70%,#fff),var(--rk))}
.hm-rnext{font-size:13px;color:#C9D1CA;font-weight:700}

.hm-hand{position:relative;height:clamp(130px,19vw,150px);justify-self:center;width:min(100%,380px)}
.hm-card{position:absolute;bottom:0;left:calc(8% + var(--i) * 17%);width:clamp(78px,8.4vw,110px);aspect-ratio:3/4;border-radius:14px;color:#fff;
  background:linear-gradient(165deg,color-mix(in srgb,var(--tc) 80%,#fff),color-mix(in srgb,var(--tc) 70%,#000));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),inset 0 -5px 0 rgba(0,0,0,.25),0 12px 22px rgba(0,0,0,.4);
  transform:rotate(calc((var(--i) - 2) * 8deg)) translateY(var(--y));transform-origin:50% 120%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.hm-card span{font-size:clamp(32px,3.6vw,46px);line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.hm-card b{font-size:11.5px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:no-preference){
  .hm-card{animation:hmDeal .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 80ms)}
  @keyframes hmDeal{from{opacity:0;transform:translateY(70px) rotate(0)}}
}

/* ---------- partita in corso ---------- */
.hm-continue{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--panel);border-radius:20px;padding:18px 22px;border:1px solid var(--line);
  box-shadow:inset 6px 0 0 var(--gold),var(--shadow)}
.hm-cbody{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.hm-cbody h2{font-size:20px}
.hm-cbody p{margin:0;color:var(--muted)}
.hm-lives{color:var(--bad);letter-spacing:1px}
.hm-line{display:flex;gap:6px;font-size:24px;flex-wrap:wrap}

/* ---------- scelta della modalità ---------- */
.hm-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hm-mode{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:16px;row-gap:4px;align-items:center;text-align:left;cursor:pointer;
  padding:20px 22px;border-radius:20px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.hm-mode:hover,.hm-mode:focus-visible{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.16)}
.hm-mode.ranked{background:linear-gradient(135deg,color-mix(in srgb,var(--rk) 20%,var(--panel)),var(--panel) 65%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rk) 50%,transparent),var(--shadow)}
.hm-mic{grid-row:1/4;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:34px;background:var(--panel-2)}
.hm-mode.ranked .hm-mic{background:color-mix(in srgb,var(--rk) 30%,var(--panel-2))}
.hm-mt{font-family:var(--display);font-size:22px}
.hm-md{font-size:14px;color:var(--muted)}
.hm-mgo{justify-self:start;margin-top:8px;font-weight:800;font-size:14px;padding:6px 14px;border-radius:999px;background:var(--ink);color:var(--panel)}
.hm-mode.ranked .hm-mgo{background:var(--rk);color:#fff}

/* ---------- numeri e classifica ---------- */
.hm-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:start}
.hm-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow)}
.hm-ph{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.hm-ph h2{font-size:19px}
.hm-empty{color:var(--muted);font-size:14px}
.hm-tabs{display:flex;background:var(--panel-2);border-radius:12px;padding:3px}
.hm-tab{border:0;background:transparent;padding:6px 12px;border-radius:9px;font-weight:800;font-size:13px;color:var(--muted);cursor:pointer}
.hm-tab[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.hm-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hm-board li{display:grid;grid-template-columns:28px 30px 1fr auto;gap:8px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--panel-2)}
.hm-board li.me{box-shadow:inset 0 0 0 2px var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--panel-2))}
.hm-board .pos{font-family:var(--display);color:var(--muted)}
.hm-board li:nth-child(-n+3) .pos{color:var(--rk)}
.hm-board .rg{font-size:20px}
.hm-board .nm{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-board .pt{font-weight:800;font-size:13px;color:var(--muted)}
.hm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hm-stat{display:flex;flex-direction:column;gap:2px;background:var(--panel-2);border-radius:14px;padding:12px}
.hm-stat b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1}
.hm-stat span{font-size:13px;color:var(--muted);font-weight:700}
.hm-recent{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:800;color:var(--muted)}
.hm-deltas{display:flex;gap:6px}
.hm-deltas i{font-style:normal;padding:3px 9px;border-radius:999px;font-weight:800}
.hm-deltas i.up{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.hm-deltas i.down{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}

/* ---------- come si gioca ---------- */
.hm-how{padding:4px 4px 12px}
.hm-how h2{font-size:18px;margin-bottom:10px}
.hm-how ol{list-style:none;counter-reset:passo;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hm-how li{counter-increment:passo;display:flex;flex-direction:column;gap:4px;padding:14px 16px 14px 56px;position:relative;border-radius:16px;background:color-mix(in srgb,var(--panel) 70%,transparent);border:1px dashed var(--line);color:var(--muted);font-size:14px}
.hm-how li::before{content:counter(passo);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);background:var(--felt);color:var(--gold-2)}
.hm-how li b{color:var(--ink);font-size:15px}

/* ---------- mentre il server risponde ---------- */
body.busy{cursor:progress}
body.busy .board.main,body.busy .encounter,body.busy .benchp{pointer-events:none;opacity:.85;transition:opacity .2s .15s}

@media (max-width:900px){
  .hm-hero{grid-template-columns:1fr}
  .hm-hand{height:150px}
  .hm-modes,.hm-cols{grid-template-columns:1fr}
  .hm-how ol{grid-template-columns:1fr}
}
@media (max-width:520px){.hm-stats{grid-template-columns:1fr 1fr}}