.detail-body{min-height:100vh}.detail-page-shell{width:min(1180px,calc(100% - 28px));margin:24px auto 90px}.detail-topbar{position:sticky;top:12px;grid-template-columns:auto 1fr auto}.detail-nav{display:flex;justify-content:center;gap:8px}.detail-nav a{padding:10px 12px;border-radius:14px;color:var(--muted);font-size:13px;font-weight:900}.detail-nav a:hover{background:var(--pink-50);color:var(--pink-500)}.detail-loading{padding:56px;text-align:center;margin-top:18px}.detail-content{display:grid;gap:18px;margin-top:18px}.detail-hero{display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;min-height:470px}.detail-hero-art{min-height:470px}.detail-hero-image{position:relative;width:100%;height:100%;min-height:470px;overflow:hidden;background:linear-gradient(135deg,var(--detail-fallback,#fbd9e5),#fff5ec)}.detail-hero-image img{width:100%;height:100%;object-fit:cover;display:block}.detail-image-fallback{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.78),transparent 12rem)}.detail-hero-image.has-image .detail-image-fallback{display:none}.detail-hero-copy{padding:clamp(26px,4vw,54px);display:flex;flex-direction:column;justify-content:center}.detail-breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:18px;color:var(--muted);font-size:11px;font-weight:800}.detail-breadcrumb a:hover{color:var(--pink-500)}.detail-hero-copy h1{max-width:13ch;font-size:clamp(40px,6vw,70px)}.detail-hero-copy>p{font-size:17px;max-width:46ch}.detail-hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}.detail-hero-actions .button.active{background:#d95a94;color:white}.detail-content-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr);gap:18px}.detail-main-card,.detail-info-card,.detail-article-card{padding:clamp(22px,3vw,34px)}.detail-main-card h2,.detail-info-card h2{margin:5px 0 12px}.detail-long-copy{font-size:16px;line-height:1.8}.detail-pros{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:20px 0}.detail-pros span{padding:12px 13px;border:1px solid var(--line);border-radius:15px;background:#fffafb;color:var(--choco-soft);font-size:13px;font-weight:850}.detail-facts{display:grid;gap:9px;margin-top:16px}.detail-facts>div{padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:#fffafb;display:grid;gap:5px}.detail-facts small{color:var(--pink-500);font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:900}.detail-facts strong,.detail-facts a{color:var(--choco);font-size:13px;font-weight:900}.detail-facts a:hover{color:var(--pink-500)}.detail-related-section{margin-top:2px}.detail-related-section .section-head{margin-bottom:13px}.detail-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.detail-related-card{overflow:hidden;display:grid;grid-template-rows:170px 1fr;box-shadow:0 10px 28px rgba(117,78,84,.08);transition:.18s ease}.detail-related-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(117,78,84,.12)}.detail-related-art{display:block;overflow:hidden;background:linear-gradient(135deg,var(--detail-fallback,#f8dce6),#fff5ec)}.detail-related-art img{width:100%;height:100%;object-fit:cover;display:block}.detail-related-copy{display:grid;gap:4px;padding:14px;align-content:start}.detail-related-copy small{color:var(--pink-500);font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:900}.detail-related-copy strong{font-size:18px;color:var(--choco)}.detail-related-copy span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:12px;line-height:1.5}.article-art{background:linear-gradient(135deg,#f8dce6,#ece5f8)}.detail-article-card{grid-column:1/2}.detail-article-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--pink-500);font-size:11px;font-weight:900;margin-bottom:18px}.detail-article-body{max-width:760px}.detail-article-body p{font-size:17px;line-height:1.85;margin:0 0 20px;color:#6e514b}.detail-empty{grid-column:1/-1;padding:28px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);text-align:center}.detail-error{padding:52px;text-align:center;margin-top:18px}.detail-error h1{max-width:none;margin:10px 0}.category-intro-card .button{margin-top:8px}
@media(max-width:900px){.detail-nav{display:none}.detail-topbar{grid-template-columns:auto 1fr auto}.detail-hero{grid-template-columns:1fr}.detail-hero-art,.detail-hero-image{min-height:360px}.detail-content-grid{grid-template-columns:1fr}.detail-related-grid{grid-template-columns:repeat(2,1fr)}.detail-article-card{grid-column:auto}}@media(max-width:620px){.detail-page-shell{width:min(100% - 14px,620px);margin-top:8px}.detail-topbar{position:static;border-radius:22px;padding:10px}.detail-topbar .brand-copy span{display:none}.detail-topbar .button{min-height:40px;padding:0 12px}.detail-hero{border-radius:25px}.detail-hero-art,.detail-hero-image{min-height:260px}.detail-hero-copy{padding:24px 18px 28px}.detail-hero-copy h1{font-size:40px}.detail-hero-copy>p{font-size:15px}.detail-content-grid{gap:12px}.detail-main-card,.detail-info-card,.detail-article-card{padding:20px 17px}.detail-pros{grid-template-columns:1fr}.detail-related-grid{grid-template-columns:1fr}.detail-related-card{grid-template-columns:110px 1fr;grid-template-rows:auto;min-height:110px}.detail-related-art{min-height:110px}.detail-article-body p{font-size:15px}.detail-breadcrumb{font-size:10px}}

/* ===== FASE 10.4 — pagine gioco/categoria/articolo ===== */
.detail-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
}
.detail-nav { min-width: 0; gap: 2px; }
.detail-nav a { padding: 9px 8px; white-space: nowrap; }
.detail-topbar .user-button { justify-self: end; }
.detail-hero, .detail-content-grid, .detail-main-card, .detail-info-card { min-width: 0; }
.detail-hero-copy h1 { overflow-wrap: anywhere; }
.detail-related-copy, .detail-related-copy strong, .detail-related-copy span { min-width: 0; overflow-wrap: anywhere; }

/* Le copertine quadrate restano intere anche nelle pagine complete. */
.detail-hero-image img { object-fit: contain; background: #fffaf7; }
.detail-related-art img { object-fit: contain; background: #fffaf7; }

@media (min-width: 901px) and (max-width: 1080px) {
  .detail-topbar { gap: 6px; }
  .detail-nav a { padding-inline: 5px; font-size: 12px; }
  .detail-nav .nav-icon { width: 19px; height: 19px; flex-basis: 19px; }
  .detail-topbar > .button.secondary { padding-inline: 10px; font-size: 12px; }
}

@media (max-width: 900px) {
  .detail-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .detail-topbar .user-button { grid-column: 2; }
  .detail-topbar > .button.secondary { grid-column: 3; }
}

@media (max-width: 620px) {
  .detail-topbar { grid-template-columns: auto minmax(0, 1fr); }
  .detail-topbar .user-button { grid-column: 2; justify-self: end; }
  .detail-topbar > .button.secondary { display: none; }
  .detail-hero-art, .detail-hero-image { min-height: 0; aspect-ratio: 1 / 1; }
}