/* ChatGame — nuova home (schermata di accesso). Tutte le regole sono limitate a #login-screen e usano il prefisso hm- */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap');
#login-screen{
  --hm-wood:#2a2017;--hm-paper:#faf6ec;--hm-ink:#2b2218;--hm-ink2:#5a4b3a;--hm-gold:#e8d9b0;--hm-accent:#b4531f;--hm-frame:rgba(30,22,14,.78);
  --hm-display:"Kalam","Segoe Print","Comic Sans MS",cursive;--hm-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  background:var(--hm-wood)!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;
  padding:0 max(16px,env(safe-area-inset-left,0px)) 24px!important;font-family:var(--hm-body);color:var(--hm-paper);
}
#login-screen *{box-sizing:border-box}
#login-screen .hm-bg{position:fixed;inset:0;z-index:0;background:var(--hm-wood) center top/cover no-repeat;pointer-events:none}
#login-screen .hm-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,14,8,0) 30%,rgba(20,14,8,.55) 100%)}
#login-screen .hm-page{position:relative;z-index:1;width:100%;max-width:1500px;margin:0 auto}

#login-screen .hm-top{display:flex;justify-content:flex-end;padding-top:16px;min-height:76px}
#login-screen .hm-login-btn{font:700 1.25rem/1 var(--hm-display);letter-spacing:.3px;color:#fff;background:var(--hm-accent);border:3px double var(--hm-gold);border-radius:10px;padding:14px 28px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.45);transition:transform .12s,background .12s}
#login-screen .hm-login-btn:hover{background:#c9602a;transform:translateY(-2px)}
#login-screen button:focus-visible{outline:3px solid var(--hm-gold);outline-offset:3px}

#login-screen .hm-mid{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;min-height:min(46vh,420px);padding-top:clamp(0px,5vh,50px)}
#login-screen .hm-frame{width:clamp(230px,24vw,330px);background:var(--hm-frame);border:4px double var(--hm-gold);border-radius:6px;padding:16px 18px;backdrop-filter:blur(4px);box-shadow:0 6px 20px rgba(0,0,0,.5)}
#login-screen .hm-frame h2{margin:0 0 8px;font:700 1.3rem/1.2 var(--hm-display);color:var(--hm-gold);text-wrap:balance}
#login-screen .hm-frame ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
#login-screen .hm-frame li{font:.84rem/1.42 var(--hm-body);color:rgba(250,246,236,.9)}
#login-screen .hm-frame li strong{color:#f3c98b}

#login-screen .hm-games{display:grid;grid-template-columns:repeat(60,1fr);gap:10px;margin-top:12px}
#login-screen .hm-card{grid-column:span 15;min-width:0;background:rgba(250,246,236,.94);color:var(--hm-ink);border-radius:6px;padding:12px 14px 14px;box-shadow:0 3px 10px rgba(0,0,0,.4);border-bottom:4px solid var(--hm-accent);transition:transform .15s}
#login-screen .hm-card:nth-child(-n+5){grid-column:span 12}
#login-screen .hm-card:nth-child(n+10):nth-child(-n+13){grid-column:span 10}
#login-screen .hm-card:hover{transform:translateY(-3px)}
#login-screen .hm-card h3{margin:0 0 4px;font:700 1.08rem/1.2 var(--hm-display);color:var(--hm-ink);display:flex;align-items:center;gap:8px}
#login-screen .hm-card h3 i{font-style:normal;font-size:1.25rem}
#login-screen .hm-card p{margin:0;font:.82rem/1.42 var(--hm-body);color:var(--hm-ink2)}
#login-screen .hm-legal{grid-column:span 20;min-width:0;background:var(--hm-frame);border:4px double var(--hm-gold);border-radius:6px;padding:10px 14px;box-shadow:0 3px 10px rgba(0,0,0,.4);backdrop-filter:blur(4px)}
#login-screen .hm-legal strong{display:block;font:700 .95rem/1.3 var(--hm-display);color:var(--hm-gold);margin-bottom:4px}
#login-screen .hm-legal p{margin:0;font:.72rem/1.4 var(--hm-body);color:rgba(250,246,236,.88)}

@media(max-width:1000px){
  #login-screen .hm-mid{flex-direction:column;align-items:stretch;min-height:0;padding-top:clamp(120px,28vw,220px)}
  #login-screen .hm-frame{width:auto}
  #login-screen .hm-games{grid-template-columns:repeat(6,1fr)}
  #login-screen .hm-card,#login-screen .hm-card:nth-child(-n+5),#login-screen .hm-card:nth-child(n+10):nth-child(-n+13){grid-column:span 2}
  #login-screen .hm-card:nth-child(13){grid-column:span 3}
  #login-screen .hm-legal{grid-column:span 3}
}
@media(max-width:560px){
  #login-screen .hm-games{grid-template-columns:repeat(2,1fr)}
  #login-screen .hm-card,#login-screen .hm-card:nth-child(-n+5),#login-screen .hm-card:nth-child(n+10):nth-child(-n+13){grid-column:span 1}
  #login-screen .hm-card:nth-child(13),#login-screen .hm-legal{grid-column:span 2}
  #login-screen .hm-login-btn{font-size:1.05rem;padding:12px 20px}
}

/* finestra di login */
#login-screen .hm-ov{position:fixed;inset:0;z-index:50;background:rgba(10,7,4,.7);display:flex;align-items:center;justify-content:center;padding:16px}
#login-screen .hm-ov[hidden]{display:none}
#login-screen .hm-ov .lcard{position:relative;background:var(--hm-paper);color:var(--hm-ink);border:4px double var(--hm-accent);border-radius:8px;padding:22px 22px 24px;box-shadow:0 12px 40px rgba(0,0,0,.6)}
#login-screen .hm-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:1.6rem;line-height:1;color:var(--hm-ink2);cursor:pointer}
#login-screen .hm-ov .mtabs{gap:6px;border-bottom:0;margin-bottom:16px}
#login-screen .hm-ov .mtab{flex:1;padding:10px;border:2px solid var(--hm-accent);border-radius:6px;background:transparent;color:var(--hm-accent);font:700 1rem var(--hm-display);margin-bottom:0}
#login-screen .hm-ov .mtab.on{background:var(--hm-accent);color:#fff;border-color:var(--hm-accent)}
#login-screen .hm-ov .fg label{color:var(--hm-ink2)}
#login-screen .hm-ov .btn-p{background:var(--hm-accent);font:700 1.05rem var(--hm-display);padding:12px}
#login-screen .hm-ov .btn-p:hover{background:#c9602a}