*{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Roboto',system-ui,sans-serif;
    background:
      radial-gradient(ellipse at 80% -10%, #cccccc 0%, transparent 55%),
      var(--asphalt);
    color:var(--chalk);
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:16px;
  }
  h1,.display{font-family:'Bungee',cursive;letter-spacing:.03em}

  .screen{width:min(980px,100%);}
  .hidden{display:none !important}

  /* ---------- Setup ---------- */
  #setup{max-width:520px;margin:0 auto;text-align:center}
  #setup h1{font-size:clamp(2.4rem,8vw,4rem);line-height:1}
  #setup h1 .zero{color:var(--p1)} #setup h1 .seven{color:var(--p2)}
  #setup p.sub{color:var(--chalk-dim);margin:10px 0 28px}
  .field{margin-bottom:16px;text-align:left}
  .field label{display:block;font-size:1.0rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chalk-dim);margin-bottom:6px}
  .field input{
    width:100%;padding:12px 14px;font-size:1.05rem;font-family:inherit;
    background:var(--asphalt-2);border:2px solid #aaaaaa;border-radius:10px;color:var(--chalk);
  }
  .field input:focus{outline:none;border-color:var(--chalk)}
  #f-p1 input:focus{border-color:var(--p1)} #f-p2 input:focus{border-color:var(--p2)}
  button{
    font-family:'Bungee',cursive;font-size:1rem;letter-spacing:.05em;
    padding:12px 22px;border:none;border-radius:12px;cursor:pointer;
    background:var(--chalk);color:var(--asphalt);
    box-shadow:0 4px 0 #9a9686;transition:transform .08s, box-shadow .08s;
  }
  button:hover{transform:translateY(-2px)}
  button:active{transform:translateY(2px);box-shadow:0 1px 0 #9a9686}
  button.ghost{background:transparent;color:var(--chalk);box-shadow:0 4px 0 #999999;border:2px solid #3a4150;font-size:.8rem;padding:9px 16px}
  button:disabled{opacity:.4;cursor:not-allowed;transform:none}
  #btn-start{width:100%;margin-top:10px;font-size:1.2rem;background:var(--ok);box-shadow:0 4px 0 #3f8a44}
  .rules-help{margin-top:26px;font-size:.85rem;color:var(--chalk-dim);text-align:left;background:var(--asphalt-2);border-radius:12px;padding:14px 16px;line-height:1.7}
  .rules-help b{color:var(--chalk)}
  kbd{background:#00b3b2;border-radius:5px;padding:1px 7px;font-family:inherit;font-weight:600;color:var(--chalk);border-bottom:2px solid #14161c;font-size:.8rem}

  /* ---------- Game ---------- */
  header.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
  .hud .round-info{font-family:'Bungee',cursive;font-size:1.1rem}
  .hud .round-info small{display:block;font-family:'Rubik';font-weight:400;font-size:.8rem;color:var(--chalk-dim);letter-spacing:.1em;text-transform:uppercase}
  .hud .actions{display:flex;gap:8px;flex-wrap:wrap}

  .arena{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
  @media (max-width:720px){.arena{grid-template-columns:1fr;}.vs-col{order:-1}}

  .pcol{display:flex;flex-direction:column;gap:10px}
  .pcard{
    background:var(--asphalt-2);border-radius:16px;padding:18px;
    border-top:5px solid var(--pc);display:flex;flex-direction:column;gap:12px;
  }
  .p1{--pc:var(--p1)} .p2{--pc:var(--p2)}
  .pcard .pname{font-family:'Bungee',cursive;font-size:1.25rem;color:var(--pc);overflow-wrap:anywhere}
  .stat-row{display:flex;justify-content:space-between;gap:8px}
  .stat{flex:1;background:var(--asphalt);border-radius:10px;padding:10px;text-align:center}
  .stat .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--chalk-dim)}
  .stat .val{font-family:'Bungee',cursive;font-size:1.6rem;margin-top:2px}
  .status{
    text-align:center;border-radius:10px;padding:10px;font-family:'Bungee',cursive;font-size:1rem;
    background:var(--asphalt);color:var(--chalk-dim);
  }
  .status.ready{background:var(--pc);color:var(--asphalt)}
  .status.waiting{animation:blink 1.2s infinite}
  @keyframes blink{50%{opacity:.45}}
  .empty-flash{color:var(--danger);text-align:center;font-weight:600;font-size:.85rem;min-height:1.2em}

  /* Key hints under each card */
  .hint{
    background:var(--asphalt-2);border-radius:12px;padding:10px 14px;
    font-size:.8rem;color:var(--chalk-dim);line-height:2;text-align:center;
    border-left:4px solid var(--pc);
  }
  .hint kbd{margin-right:2px}

.vs-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:240px;
  width:240px;
  align-self:stretch;
}  


  .vs-col .vs{font-family:'Bungee',cursive;font-size:1.6rem;color:var(--chalk-dim)}
  .result-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:212px;
  width:100%;
}
  
  
.result-strip img{
  width:200px;
  height:200px;
  object-fit:contain;
  background:var(--asphalt-2);
  border-radius:14px;
  padding:6px;
  animation:slam .25s ease-out;
  position: relative;
  z-index: 5;
}
  .result-strip img.i1{border:3px solid var(--p1);--glow:var(--p1)}
  .result-strip img.i2{border:3px solid var(--p2);--glow:var(--p2)}
  .result-strip img.winner{
    border-width:9px;
    box-shadow:0 0 20px 4px var(--glow), 0 0 10px 2px rgba(255,255,255,.85) inset;
    animation:slam .25s ease-out, winner-shine 1s ease-in-out infinite alternate;
  }
  .result-strip img.loser{
    /* no dimming: only the winner is emphasized */
  }
  @keyframes winner-shine{from{filter:brightness(1)}to{filter:brightness(1.4)}}
  @keyframes slam{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}
  .result-msg{font-family:'Bungee',cursive;text-align:center;font-size:1.05rem;min-height:1.4em}
  .result-msg.kill{color:var(--danger)}

  .progress-wrap{width:100%;max-width:260px;height:8px;background:var(--asphalt-2);border-radius:99px;overflow:hidden;visibility:hidden}
  .progress-wrap.on{visibility:visible}
  .progress-bar{height:100%;width:0;background:var(--chalk)}
  .progress-bar.run{animation:fill 1.5s linear forwards}
  @keyframes fill{to{width:100%}}

  #btn-next-round{background:var(--ok);box-shadow:0 4px 0 #3f8a44}

  /* ---------- Final victory overlay ---------- */
  #overlay{
    position:fixed;inset:0;background:rgba(15,17,22,.9);display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:20px;text-align:center;padding:20px;z-index:10;
  }
  #overlay .display{font-size:clamp(1.8rem,6vw,3.2rem)}
  #overlay .score-final{font-family:'Bungee',cursive;font-size:1.4rem;color:var(--chalk-dim)}
  @media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
  
  .theme-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.theme-btn{
    flex:1;
    min-width:120px;
}