/* Home "Bacheca" (proposta A1, scelta da Marco il 26/9/2026).
   Sostituisce la home con video del 2005 + "Legends Never Fade": era lunga piu'
   di due schermate e le cose che contano (scarica, i tre server, la comunita')
   finivano in fondo. Colori presi dalla carta di forum.css. */
.hm-inner { margin: 9px 0 0 0; padding: 0 8px 6px 0; width: 481px; font-size: 11px; color: #160400; }
.hm-inner p { line-height: 1.5; margin: 0 0 8px 0; }
.hm-inner a { color: #8d0404; text-decoration: none; }
.hm-inner a:hover { text-decoration: underline; }

/* pulsante della casa (tutorial-btn: pergamena scura, testo oro) */
a.hm-btn { background: transparent url(../img/tutorial-btn.png) no-repeat; color: #f1e6a6; display: inline-block; font-size: 11px; font-weight: bold; height: 17px; padding: 3px 20px 0 10px; width: 170px; text-decoration: none; }
a.hm-btn:hover { text-decoration: underline; }
.hm-btn-riga { margin: 8px 0 2px 0; }

/* box in cima (two-boxes): testo piu' grande del .box p standard */
.box p.hm-grosso { font-size: 12px; line-height: 16px; text-align: left; }
.box .hm-in-gioco { color: #1f6b12; font-weight: bold; text-decoration: none; }
.box a.hm-in-gioco:hover { text-decoration: underline; }
.box .hm-in-gioco:before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2f9a1c; margin: 0 5px 1px 0; }

/* Il guerriero del 2004 scontornato, in piedi sulla carta al posto del video.
   Marco non voleva la card scura: il video ha l'alfa (VP9 yuva420p) e porta la
   sua ombra a terra. Il ritaglio ha aria intorno per l'ombra, percio' lo si
   ingrandisce con margini negativi e lo si lascia sbordare. */
.hm-arc-libero { display: flex; align-items: flex-end; margin: 2px 0 0 0; height: 136px; text-decoration: none !important; }
.hm-arc-libero video, .hm-arc-libero img { width: 146px; height: 154px; margin: -18px -14px -6px -12px; display: block; flex: none; }
.hm-arc-libero .t { flex: 1; padding: 0 0 8px 4px; color: #160400; font-size: 10px; line-height: 1.4; }
.hm-arc-libero .t b { display: block; color: #7b1300; font-size: 14px; line-height: 1.15; font-family: Georgia, serif; margin: 0 0 4px 0; }
.hm-arc-libero .t i { display: block; margin-top: 5px; color: #8d0404; font-style: normal; font-weight: bold; white-space: nowrap; }
.hm-arc-libero:hover .t i { text-decoration: underline; }

/* 28/9/2026: variante "Hard 2004" del box guerriero. La stessa card porta al
   download; il guerriero e' piu' piccolo per lasciare aria all'effetto brillo
   e al respiro (l'oro che pulsa). Cornice dorata come le firme del forum. */
/* 29/9/2026 (Marco): con height fissa a 108px e il testo ancorato in basso
   (flex-end), il titolo italiano su tre righe usciva SOPRA la cornice e la prima
   riga («Il client cinese») finiva sotto l'intestazione. Ora la card cresce col
   testo e lo centra. */
.hm-hard { height: auto; min-height: 108px; align-items: center; position: relative; border: 1px solid #b98a2e;
  background: linear-gradient(180deg, #fdf7e6 0%, #f7eccf 100%);
  border-radius: 3px; padding: 0 6px 0 0; overflow: hidden; }
.hm-hard video, .hm-hard img { width: 96px; height: 102px; margin: 2px -2px 2px 0; }
.hm-hard .t { padding: 7px 2px 7px 6px; }
.hm-hard .t b { font-size: 12px; margin: 0 0 3px 0; }
/* 28/9/2026 (Marco): la riga «Scarica e gioca» non deve prendere tutta la
   larghezza della card (era display:block) ma solo quella della frase. La rendo
   un chip inline dorato, largo quanto il testo. */
.hm-hard .t i { display: inline-block; margin-top: 6px; padding: 2px 9px;
  background: linear-gradient(180deg, #fff4d6, #f3d896); border: 1px solid #b98a2e;
  border-radius: 3px; color: #7b1300; }
.hm-hard:hover .t i { background: linear-gradient(180deg, #ffe9ac, #eaca7c);
  text-decoration: none; }
/* badge NUOVO accanto al titolo */
.hm-nuovo { display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 1px 6px; font-size: 9px; font-weight: bold; letter-spacing: .5px;
  color: #4a2a00; background: linear-gradient(180deg, #ffe08a, #e0a52e);
  border: 1px solid #b98a2e; border-radius: 3px; text-transform: uppercase; }

/* Brillo: una lama di luce che scorre lenta e poi si ferma (armonica, mai
   scattosa: vedi la memoria firme-forum). Respiro: l'oro che pulsa piano.
   Entrambi si spengono se l'utente chiede meno movimento. */
.brillo { position: relative; }
.brillo::after { content: ""; position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 0%, rgba(255,246,200,.15) 40%,
    rgba(255,250,225,.6) 50%, rgba(255,246,200,.15) 60%, transparent 100%);
  transform: skewX(-18deg); animation: hm-brillo 6.6s ease-in-out infinite; }
@keyframes hm-brillo {
  0% { left: -60%; } 22% { left: 130%; } 100% { left: 130%; } }
.respira { animation: hm-respira 5s ease-in-out infinite; }
@keyframes hm-respira {
  0%, 100% { box-shadow: 0 0 0 rgba(224,165,46,0); }
  50% { box-shadow: 0 0 10px rgba(224,165,46,.55); } }
@media (prefers-reduced-motion: reduce) {
  .brillo::after { animation: none; display: none; }
  .respira { animation: none; } }

/* tre server in colonne */
.hm-server3 { display: flex; gap: 6px; margin: 0 0 8px 0; }
.hm-server3 > div { flex: 1; background: #fbf6ea; border: 1px solid #c9b18c; }
.hm-server3 .testa { height: 58px; background-size: 381px auto; background-position: right 45%; border-bottom: 1px solid #c9b18c; position: relative; }
.hm-server3 .testa span { position: absolute; left: 6px; bottom: 5px; color: #f3ead6; font-weight: bold; font-size: 13px; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.hm-server3 .s1 .testa { background-image: url(../img/firststepsbox-1-bg1.jpg); }
.hm-server3 .s2 .testa { background-image: url(../img/firststepsbox-1-bg2.jpg); }
.hm-server3 .s3 .testa { background-image: url(../img/firststepsbox-1-bg3.jpg); }
.hm-server3 .corpo { padding: 6px 7px 2px 7px; }
.hm-server3 .motto { color: #7b1300; font-weight: bold; margin-bottom: 4px; }
.hm-server3 .corpo p { margin: 0 0 6px 0; }
.hm-nota { color: #533a00; font-size: 10px; }

/* riga "comunita'" */
.hm-porte-piccole { display: flex; gap: 6px; margin: 0 0 6px 0; }
.hm-porte-piccole a { flex: 1; display: block; background: #fbf6ea; border: 1px solid #c9b18c; padding: 6px 7px; color: #160400 !important; text-decoration: none !important; }
.hm-porte-piccole a:hover { border-color: #7b1300; }
.hm-porte-piccole a b { color: #7b1300; display: block; margin-bottom: 2px; }
.hm-porte-piccole a .fr-svg { color: #8a6a2a; margin: -2px 5px 0 0; }
.hm-porte-piccole a span { color: #533a00; font-size: 10px; }

/* telefono (layout .rq di riquadro-mobile.css): le colonne si impilano */
@media (max-width: 700px) {
  .hm-inner { width: auto; padding-right: 0; }
  .hm-server3, .hm-porte-piccole { flex-direction: column; }
}