:root{
      --bg0:#0b0d12;
      --bg1:rgba(12,14,20,.86);
      --card:rgba(18,22,30,.78);
      --card2:rgba(18,22,30,.62);
      --stroke:rgba(255,255,255,.10);
      --stroke2:rgba(255,255,255,.16);
      --txt:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.68);
      --muted2:rgba(255,255,255,.52);
      --ok:#39d98a;
      --warn:#ffcc66;
      --bad:#ff5b5b;
      --accent:#7dd3fc;
      --accent2:#c4b5fd;
      --shadow: 0 18px 40px rgba(0,0,0,.45);
      --radius: 18px;
      --radius2: 14px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

      /* Background textures */
      --tex: url('../img/texture_legno_hd.png');
      --texOpacity: .16;
      --heroGlow: radial-gradient(1200px 600px at 20% -10%, rgba(125,211,252,.26), transparent 55%),
                  radial-gradient(900px 500px at 90% 0%, rgba(196,181,253,.20), transparent 55%);
    }

    body.ice-mode{
      --accent:#93c5fd;
      --accent2:#a5b4fc;
      --tex: url('../img/texture_ghiaccio.png');
      --texOpacity: .18;
      --heroGlow: radial-gradient(1200px 600px at 18% -10%, rgba(147,197,253,.22), transparent 55%),
                  radial-gradient(900px 500px at 90% 0%, rgba(165,180,252,.20), transparent 55%);
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      font-family:var(--font);
      color:var(--txt);
      background:
        var(--heroGlow),
        radial-gradient(1200px 800px at 60% 140%, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(180deg, #070911, #05060b);
      overflow-x:hidden;
    }

    /* texture overlay */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      background-image: var(--tex);
      background-size: 920px auto;
      background-repeat: repeat;
      opacity: var(--texOpacity);
      filter: contrast(110%) saturate(110%);
      pointer-events:none;
      z-index:-1;
      transform: translateZ(0);
    }

    a{ color:inherit; }
    button{ font-family:inherit; }

    .wrap{
      width:min(1150px, 92vw);
      margin:0 auto;
      padding: 18px 0 44px;
    }

    /* Topbar */
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      background: linear-gradient(180deg, rgba(7,9,17,.92), rgba(7,9,17,.50));
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .topbar-inner{
      width:min(1150px, 92vw);
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 12px 0;
      gap: 12px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      user-select:none;
    }
    .brand-badge{
      width:38px; height:38px;
      border-radius: 12px;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), rgba(255,255,255,0) 55%),
                  linear-gradient(135deg, rgba(125,211,252,.42), rgba(196,181,253,.26));
      border:1px solid rgba(255,255,255,.16);
      box-shadow: 0 12px 26px rgba(0,0,0,.45);
      display:grid;
      place-items:center;
      font-weight:900;
      letter-spacing:.02em;
    }
    .brand-title{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }
    .brand-title strong{ font-size:14px; letter-spacing:.04em; }
    .brand-title span{ font-size:12px; color:var(--muted); }

    .actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .btn{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(18,22,30,.62);
      color:var(--txt);
      border-radius: 14px;
      padding: 9px 12px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
      box-shadow: 0 10px 24px rgba(0,0,0,.32);
      text-decoration:none;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.24); background: rgba(18,22,30,.74); }
    .btn:active{ transform: translateY(0); }
    .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

    .btn .dot{
      width:9px;height:9px;border-radius:999px;
      background: rgba(255,255,255,.26);
      box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
    }
    .btn .dot.ok{ background: var(--ok); }
    .btn .dot.warn{ background: var(--warn); }

    /* Hero */
    .hero{
      margin-top: 18px;
      border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(18,22,30,.76), rgba(18,22,30,.56));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(900px 420px at 16% 10%, rgba(125,211,252,.18), transparent 56%),
        radial-gradient(900px 420px at 90% 10%, rgba(196,181,253,.16), transparent 56%);
      pointer-events:none;
    }

    .hero-inner{
      padding: 18px 18px 16px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
      align-items:stretch;
    }
    @media (max-width: 880px){
      .hero-inner{ grid-template-columns: 1fr; }
    }

    .hero h1{
      margin:0;
      font-size: 20px;
      letter-spacing:.02em;
    }
    .hero p{ margin: 8px 0 0; color:var(--muted); }
    .hero .note{
      margin-top: 10px;
      font-size: 13px;
      color: rgba(255,255,255,.78);
    }
    .hero .note em{ color: rgba(255,255,255,.82); }

    .hero-panel{
      border:1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      background: rgba(0,0,0,.22);
      padding: 12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      justify-content:space-between;
    }

    .stats{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .stat{
      padding: 10px;
      border-radius: 14px;
      background: rgba(18,22,30,.58);
      border:1px solid rgba(255,255,255,.10);
    }
    .stat b{ display:block; font-size: 18px; letter-spacing:.02em; }
    .stat span{ display:block; margin-top:2px; font-size: 12px; color:var(--muted2); }

    .progress-bar{
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
    }
    .progress-bar > div{
      height:100%; width:0%;
      background: linear-gradient(90deg, rgba(125,211,252,.78), rgba(196,181,253,.72));
      border-radius:999px;
      transition: width .28s ease;
    }

    /* Sections */
    .section{
      margin-top: 18px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      background: rgba(18,22,30,.52);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .section-h{
      padding: 14px 16px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.16);
    }
    .section-h h2{
      margin:0;
      font-size: 14px;
      letter-spacing:.09em;
      text-transform:uppercase;
    }
    .section-h p{
      margin:4px 0 0;
      font-size: 12px;
      color: var(--muted);
      max-width: 58ch;
    }

    .tools{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    /* Block list */
    .blocks{
      padding: 10px;
      display:grid;
      gap: 10px;
    }

    details.block{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      overflow:hidden;
    }
    details.block[open]{
      border-color: rgba(255,255,255,.18);
      background: rgba(0,0,0,.24);
    }

    summary.block-sum{
      list-style:none;
      cursor:pointer;
      padding: 12px 12px;
      display:grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      align-items:center;
      user-select:none;
    }
    summary.block-sum::-webkit-details-marker{ display:none; }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(18,22,30,.55);
      font-size: 12px;
      color: rgba(255,255,255,.86);
      white-space:nowrap;
    }
    .pill small{ color: var(--muted2); font-size: 11px; }
    .pill .chk{ width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.22); }
    .pill.done .chk{ background: var(--ok); }

    .btitle{ min-width:0; }
    .btitle strong{ display:block; font-size: 14px; letter-spacing:.01em; }
    .btitle span{ display:block; margin-top:2px; font-size: 12px; color: var(--muted); }

    .bmeta{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      color: var(--muted2);
      font-size: 12px;
    }

    .chip{
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(18,22,30,.45);
      display:inline-flex;
      align-items:center;
      gap:7px;
    }
    .chip b{ color: rgba(255,255,255,.86); font-weight:800; }

    .block-body{
      padding: 12px;
      border-top: 1px solid rgba(255,255,255,.08);
      display:grid;
      gap: 12px;
    }

    .block-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }

    .block-actions .left{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }

    .muted{
      color: var(--muted2);
      font-size: 12px;
    }

    .thumbs{
      display:grid;
      grid-template-columns: repeat(6, minmax(0,1fr));
      gap: 8px;
    }

    @media (max-width: 980px){
      .thumbs{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    @media (max-width: 620px){
      .thumbs{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }

    .thumb{
      position:relative;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(18,22,30,.40);
      overflow:hidden;
      cursor:pointer;
      min-height: 92px;
      display:grid;
      place-items:center;
    }

    .thumb img{
      width:100%;
      height: 118px;
      object-fit: contain;
      display:block;
      background: rgba(0,0,0,.10);
    }

    .thumb .cap{
      position:absolute;
      left:8px;
      bottom:8px;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(0,0,0,.56);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
      font-size: 11px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      max-width: calc(100% - 16px);
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .thumb .badge{
      position:absolute;
      top:8px;
      right:8px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(0,0,0,.56);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.82);
      font-size: 11px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .thumb.more{
      border-style: dashed;
      background: rgba(255,255,255,.05);
    }
    .thumb.more:hover{
      background: rgba(255,255,255,.08);
    }
    .thumb.more .moretxt{
      text-align:center;
      padding: 10px 8px;
      line-height: 1.05;
      color: rgba(255,255,255,.90);
    }
    .thumb.more .moretxt b{
      display:block;
      font-size: 20px;
      letter-spacing: .02em;
    }
    .thumb.more .moretxt small{
      display:block;
      margin-top: 4px;
      opacity: .78;
      font-size: 12px;
    }


    .thumb:hover{ border-color: rgba(255,255,255,.20); transform: translateY(-1px); }

    /* Modal base */
    .modal{
      position: fixed;
      inset: 0;
      z-index: 120;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 16px;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .modal.show{ display:flex; }

    .dialog{
      width: min(1080px, 95vw);
      max-height: min(84vh, 760px);
      overflow:hidden;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(18,22,30,.92), rgba(18,22,30,.74));
      box-shadow: 0 30px 80px rgba(0,0,0,.60);
      display:flex;
      flex-direction:column;
    }

    .dialog-h{
      padding: 12px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.20);
    }
    .dialog-h strong{ font-size: 13px; letter-spacing:.06em; text-transform:uppercase; }

    .dialog-b{
      display:grid;
      grid-template-columns: 280px 1fr;
      min-height: 0;
      flex: 1;
    }

    @media (max-width: 880px){
      .dialog{ max-height: 90vh; }
      .dialog-b{ grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
    }

    .side{
      border-right: 1px solid rgba(255,255,255,.10);
      padding: 10px;
      overflow:auto;
    }
    @media (max-width: 880px){
      .side{ border-right:none; border-bottom:1px solid rgba(255,255,255,.10);} 
    }

    .main{
      padding: 10px;
      overflow:auto;
      display:flex;
      flex-direction:column;
      gap: 10px;
      min-height:0;
    }

    .viewer{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.22);
      padding: 10px;
      min-height: 320px;
      display:grid;
      place-items:center;
      position:relative;
      overflow:hidden;
    }

    .viewer img{
      max-width: 100%;
      max-height: 68vh;
      width:auto;
      height:auto;
      object-fit: contain;
      border-radius: 12px;
      background: rgba(0,0,0,.12);
      border:1px solid rgba(255,255,255,.08);
    }

    .viewer .v-cap{
      position:absolute;
      left: 10px;
      bottom: 10px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.62);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.90);
      font-size: 12px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      max-width: calc(100% - 20px);
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .viewer .nav{
      position:absolute;
      top:10px;
      right:10px;
      display:flex;
      gap:8px;
    }

    .icon-btn{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(18,22,30,.60);
      color: rgba(255,255,255,.90);
      border-radius: 12px;
      padding: 8px 10px;
      cursor:pointer;
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
      transition: transform .12s ease, border-color .12s ease;
      display:inline-flex;
      align-items:center;
      gap:8px;
      user-select:none;
    }
    .icon-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.24); }
    .icon-btn:active{ transform:none; }

    .list{
      display:grid;
      gap:8px;
    }

    .li{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
      border-radius: 14px;
      padding: 10px;
    }

    .li strong{ display:block; font-size: 13px; }
    .li p{ margin: 6px 0 0; font-size: 12px; color: var(--muted); }

    /* Jukebox */
    .track{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 10px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
    }
    .track strong{ font-size: 13px; }
    .track .tmeta{ font-size: 12px; color: var(--muted2); margin-top:2px; }
    .track .left{ display:flex; flex-direction:column; min-width:0; }
    .lock{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
      white-space:nowrap;
    }
    .lock .ic{ width: 10px; height: 10px; border-radius: 4px; background: rgba(255,255,255,.26); }
    .lock.on{ color: rgba(255,255,255,.86); }
    .lock.on .ic{ background: var(--ok); }

    /* Toast */
    .toastEl{
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 200;
      min-width: min(640px, 92vw);
      border:1px solid rgba(255,255,255,.14);
      background: rgba(18,22,30,.86);
      border-radius: 16px;
      padding: 10px 12px;
      box-shadow: 0 20px 50px rgba(0,0,0,.55);
      display:none;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .toastEl.show{ display:flex; }
    .toastEl b{ font-size: 13px; }
    .toastEl span{ color: var(--muted); font-size: 12px; }

    /* Floating buttons */
    .fab{
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 80;
      display:flex;
      flex-direction:column;
      gap: 10px;
      pointer-events:none;
    }
    .fab .icon-btn{ pointer-events:auto; }

    /* Progress wall (compact grid) */
    .wall{
      padding: 12px;
      display:grid;
      gap: 10px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .wall-grid{
      display:grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: 6px;
    }
    @media (max-width: 980px){
      .wall-grid{ grid-template-columns: repeat(8, minmax(0,1fr)); }
    }
    @media (max-width: 620px){
      .wall-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
    }
    .tile{
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      padding: 8px 8px;
      text-align:center;
      font-size: 11px;
      color: rgba(255,255,255,.84);
      overflow:hidden;
      text-overflow: ellipsis;
      white-space:nowrap;
    }
    .tile.done{ border-color: rgba(57,217,138,.45); background: rgba(57,217,138,.10); }
    .tile small{ color: var(--muted2); font-size: 10px; }

    /* ==== Quantum Coin HUD (from user's sample, adapted) ==== */
    .qc-hud{
      position: fixed;
      top: 78px;
      right: 16px;
      z-index: 90;
      display:flex;
      flex-direction:column;
      gap: 10px;
      align-items:flex-end;
    }
    @media (max-width: 520px){
      .qc-hud{ top: 68px; right: 12px; }
    }

    .qc-line{
      display:flex;
      align-items:center;
      gap: 10px;
    }

    .coin-wrap{
      width: 52px;
      height: 52px;
      border-radius: 999px;
      display:grid;
      place-items:center;
      cursor:pointer;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(20,20,20,.44);
      box-shadow: 0 12px 26px rgba(0,0,0,.40);
      position:relative;
      overflow:hidden;
    }

    .coin{
      width: 38px;
      height: 38px;
      position:relative;
      transform-style: preserve-3d;
      transform: rotateY(14deg) rotateX(6deg);
    }

    .coin-face{
      position:absolute;
      inset:0;
      border-radius: 999px;
      display:grid;
      place-items:center;
      backface-visibility:hidden;
      background:
        radial-gradient(circle at 30% 20%, var(--c1), rgba(255,255,255,0) 55%),
        radial-gradient(circle at 60% 80%, var(--c2), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, rgba(0,0,0,.15), rgba(255,255,255,.10)),
        conic-gradient(from 120deg, var(--c3), var(--c4), var(--c3));
      box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.18),
        inset 0 0 0 10px rgba(0,0,0,.06),
        0 0 0 1px rgba(0,0,0,.12);
    }

    .coin-front{ transform: translateZ(2px); }
    .coin-back{ transform: rotateY(180deg) translateZ(2px); }

    .coin-sigil{
      font-weight: 900;
      font-size: 18px;
      letter-spacing: .02em;
      color: rgba(20,20,20,.92);
      text-shadow: 0 1px 0 rgba(255,255,255,.35);
      user-select:none;
    }
    .coin-sigil sup{ font-size: 10px; margin-left:1px; }

    .coin--silver{
      --c1: rgba(255,255,255,.85);
      --c2: rgba(210,210,210,.35);
      --c3: rgba(255,255,255,.92);
      --c4: rgba(150,150,150,.25);
    }
    .coin--gold{
      --c1: rgba(255,236,190,.92);
      --c2: rgba(255,205,120,.42);
      --c3: rgba(255,245,210,.95);
      --c4: rgba(170,120,40,.22);
    }

    .coin.coin-spin{ animation: coinSpin 820ms cubic-bezier(.2,.9,.2,1) both; }
    @keyframes coinSpin{ 0%{transform:rotateY(14deg) rotateX(6deg) scale(1)} 35%{transform:rotateY(220deg) rotateX(18deg) scale(1.12)} 70%{transform:rotateY(520deg) rotateX(8deg) scale(1.06)} 100%{transform:rotateY(732deg) rotateX(6deg) scale(1)} }

    .coin.coin-spin-gold{ animation: coinSpinGold 980ms cubic-bezier(.2,.9,.2,1) both; filter: drop-shadow(0 14px 18px rgba(0,0,0,.26)) drop-shadow(0 0 14px rgba(255,215,125,.16)); }
    @keyframes coinSpinGold{ 0%{transform:rotateY(12deg) rotateX(6deg) scale(1)} 30%{transform:rotateY(260deg) rotateX(20deg) scale(1.16)} 70%{transform:rotateY(720deg) rotateX(10deg) scale(1.07)} 100%{transform:rotateY(860deg) rotateX(6deg) scale(1)} }

    .coin-burst{ position:absolute; inset:-18px; pointer-events:none; }
    .coin-burst span{ position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:999px; transform:translate(-50%,-50%); opacity:0; animation: coinPop 680ms ease-out forwards; box-shadow:0 0 0 1px rgba(0,0,0,.08); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 55%), conic-gradient(from 120deg, rgba(255,255,255,.9), rgba(200,200,200,.35), rgba(255,255,255,.9)); }
    @keyframes coinPop{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.65)} 10%{opacity:1} 100%{opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1)} }

    .coin-count{
      min-width: 92px;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(20,20,20,.54);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
      display:grid;
      gap: 2px;
      line-height:1.05;
      box-shadow: 0 12px 26px rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .coin-count-label{ font-size: 11px; opacity:.78; letter-spacing:.08em; }
    .coin-count-value{ font-size: 18px; font-weight: 900; }

    @media (prefers-reduced-motion: reduce){
      .coin, .coin.coin-spin, .coin.coin-spin-gold, .coin-burst span{ animation:none !important; transition:none !important; }
    }

    /* Bossfight intro */
    .boss-intro{
      position: fixed;
      inset: 0;
      z-index: 160;
      display:none;
      place-items:center;
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .boss-intro.show{ display:grid; }
    .boss-card{
      width: min(900px, 92vw);
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(18,22,30,.92), rgba(18,22,30,.72));
      box-shadow: 0 30px 80px rgba(0,0,0,.62);
      overflow:hidden;
    }
    .boss-card-h{
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      background: rgba(0,0,0,.20);
    }
    .boss-card-h strong{ letter-spacing:.08em; text-transform:uppercase; font-size: 13px; }
    .boss-card-b{ padding: 12px; }
    .chipwall{
      display:grid;
      grid-template-columns: repeat(8, minmax(0,1fr));
      gap: 8px;
    }
    @media (max-width: 720px){ .chipwall{ grid-template-columns: repeat(5, minmax(0,1fr)); } }

    .mini{
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      padding: 10px 10px;
      font-size: 12px;
      text-align:center;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transform: translateX(-40px);
      opacity: 0;
      animation: slideIn .8s ease forwards;
    }
    .mini.done{ border-color: rgba(57,217,138,.45); background: rgba(57,217,138,.10); }
    @keyframes slideIn{ to { transform: translateX(0); opacity: 1; } }

  
    /* --- Boss modal (DIM checklist) --- */
    .boss-card{ max-width: 980px; width: min(980px, calc(100vw - 24px)); }
    .boss-top{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
    .boss-hp{ min-width: 260px; }
    .hpbar{ width: min(360px, 80vw); height: 10px; background: rgba(255,255,255,.12); border-radius:999px; overflow:hidden; }
    .hpfill{ height:100%; width:0%; background: linear-gradient(90deg, rgba(125,210,255,.9), rgba(180,245,255,.9)); box-shadow: 0 0 18px rgba(120,220,255,.18); border-radius:999px; transition: width .35s ease; }
    .hpline{ display:flex; gap:10px; align-items:center; margin-top:8px; color: var(--muted); font-size: 13px; flex-wrap:wrap; }
    .boss-actions{ display:flex; gap:8px; flex-wrap:wrap; }
    .boss-list{ padding: 14px; }
    .boss-part{ margin: 12px 0 18px; }
    .boss-part h4{ margin: 0 0 10px; font-size: 15px; letter-spacing:.2px; }
    .dim-item{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; padding:10px 10px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16); border-radius:12px; margin-bottom:10px; }
    .dim-left{ display:flex; gap:10px; align-items:flex-start; min-width: 0; flex: 1; }
    .dim-check{ margin-top:2px; }
    .dim-check input{ margin-top:2px; transform: scale(1.1); }
    .dim-text{ color: rgba(255,255,255,.9); font-size: 13.5px; line-height: 1.35; overflow-wrap:anywhere; }
    /* Evidenziazioni (come negli screenshot bossfight) */
    .br{ font-weight: 800; padding: 0 .25em; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
    .math{ font-family: ui-serif, 'Times New Roman', Times, serif; font-style: italic; letter-spacing: .01em; }
    .math sup, .math sub{ font-style: normal; }

    .dim-code{ font-weight: 900; }
    .dim-actions{ display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; justify-content:flex-end; }
    .btn.sm{ padding:6px 10px; font-size:12px; border-radius:10px; }
    .spoiler{ border:1px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.12); border-radius:10px; padding:6px 8px; }
    .spoiler summary{ cursor:pointer; user-select:none; list-style:none; }
    .spoiler summary::-webkit-details-marker{ display:none; }
    .spoiler summary{ padding:6px 10px; border-radius:8px; display:inline-flex; gap:8px; align-items:center; font-size: 12px; background: rgba(255,255,255,.08); }
    .spoiler[open] summary{ background: rgba(255,255,255,.12); }
    .spoiler .spoiler-body{ margin-top:8px; display:block; }
    .boss-challenge{ margin: 0 14px 14px; padding:12px 12px; border-radius:14px; border:1px solid rgba(180,245,255,.2); background: rgba(40,80,120,.24); }
    .challenge-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .challenge-head strong{ font-size: 14px; }
    .challenge-text{ margin-top:10px; color: rgba(255,255,255,.92); font-size: 13.5px; line-height:1.35; }
    .challenge-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
    .timer{ font-variant-numeric: tabular-nums; padding:6px 10px; border-radius:999px; background: rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); }
    .boss-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding: 12px 14px; border-top:1px solid rgba(255,255,255,.08); }
    .boss-footer .row{ display:flex; gap:10px; flex-wrap:wrap; }


    .btn.btn-icon{ padding:0.55rem 0.65rem; width:2.6rem; justify-content:center; }
    .btn.success{ background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(16,185,129,.18)); border-color: rgba(34,197,94,.42); color: var(--text); }
    .btn.success:hover{ filter:brightness(1.08); transform: translateY(-1px); }
    footer.page-footer{ margin: 1.5rem auto 2.2rem; max-width: 1100px; padding: 0 1.1rem; }
    footer.page-footer .foot{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.10); border-radius: 16px; background: rgba(255,255,255,.06); box-shadow: 0 12px 36px rgba(0,0,0,.28); }
    footer.page-footer .foot-actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; }
    @media (max-width: 720px){
      footer.page-footer .foot{ flex-direction:column; }
      footer.page-footer .foot-actions{ width:100%; justify-content:stretch; }
      footer.page-footer .foot-actions .btn{ flex: 1 1 auto; }
    }

    /* Jukebox legend */
    details.legend{ border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); border-radius: 14px; padding: 10px 12px; }
    details.legend summary{ cursor:pointer; user-select:none; list-style:none; font-weight:800; }
    details.legend summary::-webkit-details-marker{ display:none; }
    .legend-list{ margin: 10px 0 0 18px; padding:0; display:grid; gap:6px; color: rgba(255,255,255,.88); }
    .legend-list li{ line-height:1.25; }

    /* Boss solutions (opzionali) */
    .sol-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:10px; width:100%; }
    .sol-img{ width:100%; height:auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 28px rgba(0,0,0,.25); }

  

    /* Bossfight soluzioni: thumbnails leggere (come block-body) */
    .sol-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      width: 100%;
      margin-top: 10px;
    }
    .sol-thumb{
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      box-shadow: 0 10px 28px rgba(0,0,0,.25);
      cursor: pointer;
      outline: none;
    }
    .sol-thumb:focus-visible{
      outline: 2px solid rgba(180,245,255,.45);
      outline-offset: 3px;
    }
    .sol-img{
      width: 100%;
      height: 120px;          /* importante: non lasciare l'immagine gigantesca in anteprima */
      object-fit: cover;       /* thumb compatta; full image si apre al click */
      display: block;
    }
    .sol-badge{
      position: absolute;
      top: 8px;
      left: 8px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      background: rgba(0,0,0,.55);
      color: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .sol-more{
      border-radius: 12px;
      border: 1px dashed rgba(255,255,255,.18);
      background: rgba(255,255,255,.03);
      display: grid;
      place-items: center;
      min-height: 120px;
      cursor: pointer;
      user-select: none;
    }
    .sol-more:hover{ background: rgba(255,255,255,.06); }
    .sol-more .moretxt{
      text-align:center;
      line-height: 1.05;
      color: rgba(255,255,255,.90);
      padding: 10px 8px;
    }
    .sol-more .moretxt b{
      display:block;
      font-size: 20px;
      letter-spacing: .02em;
    }
    .sol-more .moretxt small{
      display:block;
      margin-top: 4px;
      opacity: .78;
      font-size: 12px;
    }

/* ==========================================================
   Mobile layout fixes:
   1) qc-hud always below topbar real height (no overlap)
   2) topbar actions stay on one row with horizontal scroll
   ========================================================== */
.qc-hud{
  top: calc(var(--topbarH, 78px) + env(safe-area-inset-top, 0px) + 10px);
}

@media (max-width: 520px){
  .actions{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 2px;
  }
  .actions::-webkit-scrollbar{ display:none; }
  .actions .btn{ white-space: nowrap; }
}

/* ==========================================================
   Bossfight scroll fix (prevents background scroll on some devices)
   - Keeps header/footer visible and scrolls only the DIM list.
   ========================================================== */
html.modal-lock,
body.modal-lock{
  overflow: hidden;
}

#bossModal{
  overscroll-behavior: contain;
}

#bossModal .boss-card{
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#bossModal .boss-list{
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}