/* Style dla protocols-game.html ("Port Rush" — arcade). */

.pg-hud {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:clamp(14px,2.2vh,20px); flex-wrap:wrap;
}
.pg-hud-box { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:8px 14px; text-align:center; min-width:72px; }
.pg-hud-lbl { font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.pg-hud-val { font-size:clamp(18px,3vw,24px); font-weight:800; color:var(--text); line-height:1; font-family:monospace; }
.pg-hud-box.score { border-color:#34d399; }
.pg-hud-box.score .pg-hud-val { color:#34d399; }
.pg-hud-box.combo { border-color:#e0a030; }
.pg-hud-box.combo .pg-hud-val { color:#e0a030; }
.pg-hud-box.ttl { border-color:var(--wrong-t); }
.pg-hud-box.ttl .pg-hud-val { color:var(--wrong-t); }
.pg-hud-box.ttl.hit { animation:pg-hit-flash 0.4s ease; }
.pg-hud-box.best { border-color:var(--multi-t); }
.pg-hud-box.best .pg-hud-val { color:var(--multi-t); font-size:clamp(13px,2vw,16px); }
@keyframes pg-hit-flash { 0%,100%{ background:var(--bg2); transform:scale(1); } 30%{ background:#2e0a0a; transform:scale(1.12); } }

.pg-round-bar { height:4px; border-radius:2px; background:var(--bg3); overflow:hidden; margin-bottom:clamp(20px,3.5vh,32px); }
.pg-round-fill { height:100%; background:var(--accent); width:100%; transition:width 0.05s linear, background 0.2s; }

/* "Pakiet" — wizualizacja enkapsulacji (ETH/IP otulające warstwę z pytaniem).
   Trafienie = dekapsulacja (laser-skan + rozpad na bajty hex, patrz niżej).
   Błąd = glitch RGB + trzęsienie; TTL:0 = pakiet "dropped" (migotanie i zgaśnięcie). */
.pg-packet { position:relative; padding-top:18px; margin:0 auto clamp(24px,4vh,36px); max-width:360px; }
.pg-layer-eth, .pg-layer-ip {
  position:absolute; left:50%; transform:translateX(-50%); height:16px;
  border:1.5px solid var(--border); border-bottom:none; border-radius:10px 10px 0 0;
  transition:opacity 0.2s;
}
.pg-layer-eth { width:88%; top:0; background:var(--bg3); border-color:#5ab4f055; z-index:1; }
.pg-layer-ip  { width:95%; top:8px; background:var(--bg2); border-color:#e0a03055; z-index:2; }
.pg-layer-eth span, .pg-layer-ip span {
  position:absolute; top:-9px; left:10px; font-size:8px; font-weight:800; letter-spacing:1px;
  background:var(--bg); padding:0 5px; border-radius:4px;
}
.pg-layer-eth span { color:#5ab4f0; }
.pg-layer-ip span { color:#e0a030; }
.pg-layer-core {
  position:relative; z-index:3; background:var(--bg2); border:2px solid var(--border); border-radius:14px;
  padding:clamp(20px,4vh,30px) 14px; text-align:center; transition:border-color 0.2s, background 0.2s;
}
.pg-term-lbl { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.pg-term { position:relative; font-size:clamp(26px,5.5vw,42px); font-weight:800; color:var(--text); line-height:1.1; min-height:1.2em; }

.pg-packet.pg-enter { animation:pg-enter-anim 0.22s ease; }
@keyframes pg-enter-anim { 0%{ opacity:0; transform:translateY(-14px) scale(0.93); } 100%{ opacity:1; transform:translateY(0) scale(1); } }

/* Dekapsulacja: laser skanuje warstwę nagłówka, ta rozpada się na opadające bajty hex
   (jeden z nich to dosłownie numer portu, który gracz właśnie odgadł — patrz spawnHexBytes w JS). */
.pg-laser {
  position:absolute; left:0; right:0; top:0; height:3px; z-index:5; border-radius:2px;
  background:linear-gradient(90deg, transparent, #22d3ee 20%, #ecfeff 50%, #22d3ee 80%, transparent);
  box-shadow:0 0 10px 2px #22d3ee, 0 0 26px 6px rgba(34,211,238,0.45);
  opacity:0; pointer-events:none;
}
.pg-packet.pg-decap .pg-laser { animation:pg-laser-scan 0.5s cubic-bezier(.3,.6,.3,1) forwards; }
@keyframes pg-laser-scan {
  0%   { top:0; opacity:0; }
  8%   { opacity:1; }
  88%  { opacity:1; }
  100% { top:100%; opacity:0; }
}

.pg-packet.pg-decap .pg-layer-core { animation:pg-decap-core 0.5s ease forwards; }
@keyframes pg-decap-core {
  0%   { border-color:var(--border); box-shadow:none; }
  30%  { border-color:#22d3ee; box-shadow:0 0 0 1px rgba(34,211,238,0.5) inset, 0 0 16px rgba(34,211,238,0.35); }
  100% { border-color:#22d3ee; opacity:0.2; box-shadow:none; }
}
.pg-packet.pg-decap .pg-term-lbl, .pg-packet.pg-decap .pg-term { animation:pg-dissolve 0.4s ease forwards; }
@keyframes pg-dissolve { 0% { opacity:1; filter:blur(0); } 100% { opacity:0; filter:blur(3px); } }

.pg-packet.pg-decap .pg-layer-eth, .pg-packet.pg-decap .pg-layer-ip { animation:pg-band-flash 0.5s ease forwards; }
@keyframes pg-band-flash { 0% { opacity:1; } 35% { border-color:#22d3ee; } 100% { opacity:0.25; } }

.pg-hexbits { position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:6; }
.pg-hex-byte {
  position:absolute; top:40%; font-family:monospace; font-size:11px; font-weight:800;
  color:#22d3ee; text-shadow:0 0 6px rgba(34,211,238,0.7); opacity:0; white-space:nowrap;
  animation:pg-hexfall 0.6s ease forwards;
}
.pg-hex-byte.port-byte { color:#34d399; text-shadow:0 0 7px rgba(52,211,153,0.8); font-size:12px; }
@keyframes pg-hexfall {
  0%   { opacity:0; transform:translate(-50%,-4px) scale(0.7) rotate(0deg); }
  18%  { opacity:1; transform:translate(-50%,0) scale(1.08) rotate(var(--rot, 8deg)); }
  100% { opacity:0; transform:translate(-50%,64px) scale(0.85) rotate(var(--rot, 8deg)); }
}

/* Błąd: glitch z rozszczepieniem RGB na tekście pytania + trzęsienie całego pakietu. */
.pg-packet.pg-glitch .pg-layer-core { animation:pg-glitch-shake 0.4s ease; border-color:var(--wrong-t); background:#2e0a0a; }
@keyframes pg-glitch-shake {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-8px) rotate(-1.5deg); }
  40% { transform:translateX(8px) rotate(1.5deg); }
  60% { transform:translateX(-5px); }
  80% { transform:translateX(5px); }
}
.pg-packet.pg-glitch .pg-term::before,
.pg-packet.pg-glitch .pg-term::after {
  content:attr(data-text); position:absolute; left:0; top:0; width:100%;
  mix-blend-mode:screen; pointer-events:none;
}
.pg-packet.pg-glitch .pg-term::before { color:#ff2b4d; animation:pg-glitch-r 0.4s steps(2,end); }
.pg-packet.pg-glitch .pg-term::after  { color:#22d3ee; animation:pg-glitch-b 0.4s steps(2,end); }
@keyframes pg-glitch-r {
  0%   { transform:translate(0,0); opacity:0.9; }
  25%  { transform:translate(-4px,1px); }
  50%  { transform:translate(3px,-1px); }
  75%  { transform:translate(-2px,0); }
  100% { transform:translate(0,0); opacity:0; }
}
@keyframes pg-glitch-b {
  0%   { transform:translate(0,0); opacity:0.9; }
  25%  { transform:translate(4px,-1px); }
  50%  { transform:translate(-3px,1px); }
  75%  { transform:translate(2px,0); }
  100% { transform:translate(0,0); opacity:0; }
}

/* Pakiet "dropped" — gdy TTL spada do 0: warstwy migoczą jak zrywane połączenie, potem gasną całkowicie,
   zanim ekran przełączy się na podsumowanie (patrz proceed()/endGame() w JS — 1050ms na całą sekwencję). */
.pg-packet.pg-dropped .pg-layer-core,
.pg-packet.pg-dropped .pg-layer-eth,
.pg-packet.pg-dropped .pg-layer-ip {
  animation:pg-drop-flicker 0.62s steps(1,end) 0.4s forwards;
}
@keyframes pg-drop-flicker {
  0%   { opacity:1; }
  8%   { opacity:0.15; }
  16%  { opacity:1; }
  24%  { opacity:0.1; }
  34%  { opacity:0.8; }
  42%  { opacity:0.15; }
  55%  { opacity:0.6; }
  70%  { opacity:0.1; }
  100% { opacity:0; }
}

.pg-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:auto; }
.pg-tile {
  background:var(--bg2); border:2px solid var(--border); border-radius:var(--radius);
  padding:clamp(18px,4vh,28px) 10px; font-size:clamp(20px,4vw,28px); font-weight:800;
  font-family:monospace; color:var(--text); text-align:center; cursor:pointer;
  transition:transform 0.08s, border-color 0.15s, background 0.15s; -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.pg-tile:active { transform:scale(0.96); }
@media (hover:hover) { .pg-tile:hover:not([disabled]) { border-color:var(--accent); } }
.pg-tile.correct { border-color:#34d399; background:#101e10; color:#34d399; animation:pg-pop 0.3s ease; }
.pg-tile.wrong { border-color:var(--wrong-t); background:#2e0a0a; color:var(--wrong-t); animation:pg-shake 0.3s ease; }
.pg-tile.dim { opacity:0.4; }
@keyframes pg-pop { 0%{transform:scale(1);} 40%{transform:scale(1.08);} 100%{transform:scale(1);} }
@keyframes pg-shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }

.pg-float {
  position:fixed; left:50%; top:40%; transform:translate(-50%,-50%);
  font-size:clamp(24px,5vw,36px); font-weight:800; color:#34d399; pointer-events:none;
  opacity:0; z-index:50;
}
.pg-float.show { animation:pg-float-up 0.7s ease forwards; }
@keyframes pg-float-up { 0%{opacity:0; transform:translate(-50%,-30%) scale(0.8);} 20%{opacity:1; transform:translate(-50%,-50%) scale(1.1);} 100%{opacity:0; transform:translate(-50%,-90%) scale(1);} }

.pg-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:20px 0; }
.pg-screen-emoji { font-size:48px; }
.pg-screen h2 { font-size:clamp(22px,4vw,30px); font-weight:800; color:var(--text); }
.pg-screen-score { font-size:clamp(40px,8vw,64px); font-weight:800; color:#34d399; font-family:monospace; line-height:1; }
.pg-screen-best { font-size:13px; color:var(--muted); }
.pg-screen-best b { color:var(--text); }
.pg-screen-new-best { font-size:13px; font-weight:700; color:#e0a030; }
.pg-screen .mode-row { width:100%; max-width:320px; margin-top:10px; }

.pg-login-hint { background:var(--bg2); border:1px solid var(--border); border-radius:9px; padding:9px 12px; font-size:12px; color:var(--muted); margin-bottom:clamp(14px,2.2vh,20px); }
.pg-login-hint a { color:var(--accent); font-weight:700; text-decoration:none; }