.ico { width: 44px; height: 44px; flex: 0 0 44px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .meter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-family: system-ui, sans-serif; }
  .pips { display: flex; gap: 6px; }
  .pip { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 1px solid var(--accent); }
  .pip.used { background: transparent; border-color: var(--line); }
  .board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
  .note { display: flex; gap: 12px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 12px; font-size: .95rem; color: var(--muted); }
  .note.fresh { border-color: var(--accent); animation: glow 1.6s ease-out 1; }
  .note b { color: var(--text); }
  @keyframes glow { from { box-shadow: 0 0 0 0 rgba(217,164,65,.8); } to { box-shadow: 0 0 0 14px rgba(217,164,65,0); } }
  .people { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
  .person { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; font-family: inherit; color: var(--text); }
  .person.on { border-color: var(--accent); }
  @media (hover: hover) { .person:hover { border-color: var(--accent); } }
  .person svg { width: 64px; height: 64px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .person h4 { margin: 6px 0 2px; font-size: 1rem; }
  .person span { font-size: .8rem; color: var(--muted); font-family: system-ui, sans-serif; }
  .qbtn { display: block; width: 100%; text-align: left; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; margin: 8px 0; font-family: inherit; font-size: .98rem; cursor: pointer; }
  @media (hover: hover) { .qbtn:hover:not(:disabled) { border-color: var(--accent); } }
  .qbtn:disabled { opacity: .45; cursor: default; }
  .talk { margin-top: 14px; }
  .line-q { color: var(--accent); margin: 14px 0 4px; font-style: italic; }
  .line-a { background: var(--bg-2); border-left: 3px solid var(--line); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 0 0 6px; }
  .line-a em { color: var(--muted); }
  .line-a .who { display: block; font-family: system-ui, sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px; }
  .rank { font-size: 1.5rem; color: var(--accent); margin: 4px 0 10px; }
  .actions { text-align: center; margin-top: 16px; }
  .actions .btn { margin: 6px 4px; }
  .rain { position: relative; overflow: hidden; }
  .rain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
    background-image: repeating-linear-gradient(105deg, transparent 0 7px, rgba(180,200,220,.8) 7px 8px);
    background-size: 24px 80px; animation: fall .6s linear infinite; }
  @keyframes fall { to { background-position: -10px 80px; } }
  @media (prefers-reduced-motion: reduce) { .rain::before { animation: none; } .note.fresh { animation: none; } }
  .hide { display: none; }

  .filetag { display: inline-block; font-family: system-ui, sans-serif; font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 3px 10px; border-radius: 4px; transform: rotate(-2deg); margin-bottom: 10px; }
  .soundbtn { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-family: system-ui, sans-serif; font-size: .85rem; cursor: pointer; }
  .soundbtn:hover { color: var(--accent); border-color: var(--accent); }
  .hero-tools { margin-top: 12px; }
  .people .talk { grid-column: 1 / -1; margin-top: 0; }
  .person { scroll-margin-top: 76px; }
  .result-card.lose { border-color: #9a3b36; background: linear-gradient(160deg, #2a1a18, #1a1210); }
  .result-card.lose .tag { color: #c4706a; }
  .soundbtn.floating { position: fixed; right: 12px; bottom: 14px; z-index: 20; background: var(--bg-2); color: var(--text); border-color: var(--accent); padding: 9px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }

  .person:has(.pimg) { padding: 0 0 8px; overflow: hidden; }
  .people:has(.pimg) { gap: 8px; }
  .pimg { display: block; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 35%, #3a3027, #1d1814 75%); border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  .pimg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; image-rendering: pixelated; }
  .person:has(.pimg) h4, .person:has(.pimg) span:not(.pimg) { padding: 0 8px; }
  .person.on .pimg { background: radial-gradient(circle at 50% 35%, #5a4527, #1d1814 75%); }
  .killer-img { display: block; width: 130px; height: auto; margin: 0 auto 10px; image-rendering: pixelated; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }

  .person:has(.pimg) h4 { margin: 4px 0 1px; font-size: .95rem; }
  .person:has(.pimg) span:not(.pimg) { font-size: .75rem; }