/* O Pinguim Surfista v1.0.0 */
.ps-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #0d1b3e;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  user-select: none;
}
.ps-hud {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #0a1228;
  padding: 8px 16px;
  border-bottom: 2px solid #1a3a6e;
}
.ps-hud-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ps-hud-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #5b8dd9; }
.ps-hud-val { font-size: 20px; font-weight: 700; color: #e8f4ff; min-width: 50px; text-align: center; }
#ps-canvas { display: block; width: 100%; cursor: none; }
.ps-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,15,40,0.85);
  backdrop-filter: blur(4px);
  z-index: 10;
}
.ps-hidden { display: none !important; }
.ps-panel {
  background: linear-gradient(145deg,#0d1f50,#07122e);
  border: 2px solid #2a5fc4;
  border-radius: 18px;
  padding: 30px 38px;
  text-align: center;
  box-shadow: 0 0 40px rgba(42,95,196,0.35);
  max-width: 360px; width: 90%;
}
.ps-title { font-size: 24px; font-weight: 800; color: #7dd3fc; text-shadow: 0 0 20px rgba(125,211,252,0.5); margin-bottom: 10px; }
.ps-sub { color: #94a3b8; font-size: 13px; margin: 0 0 18px; line-height: 1.6; }
.ps-sub small { font-size: 11px; color: #64748b; }
.ps-diff-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.ps-diff-btn {
  padding: 7px 16px;
  border: 2px solid #2a5fc4;
  background: transparent; color: #7dd3fc;
  border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s;
}
.ps-diff-btn:hover { background: rgba(42,95,196,0.3); }
.ps-diff-btn.ps-diff-active { background: #2a5fc4; color: #fff; border-color: #60a5fa; }
.ps-btn-main {
  display: block; width: 100%;
  padding: 12px 0; margin-bottom: 10px;
  background: linear-gradient(135deg,#2563eb,#1e40af);
  color: #fff; border: none; border-radius: 30px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px rgba(37,99,235,0.4); transition: transform .15s;
}
.ps-btn-main:hover { transform: translateY(-2px); }
.ps-btn-sec {
  display: block; width: 100%; padding: 9px 0;
  background: transparent; color: #64748b;
  border: 1px solid #334155; border-radius: 30px;
  font-size: 14px; cursor: pointer;
}
.ps-hint { color: #475569; font-size: 11px; margin: 12px 0 0; }
.ps-hint kbd { background: #1e293b; border: 1px solid #334155; border-radius: 3px; padding: 1px 5px; font-size: 10px; }
.ps-mob-controls {
  display: none; justify-content: center; gap: 16px;
  padding: 10px 16px; background: #0a1228;
  border-top: 2px solid #1a3a6e;
}
.ps-mob-btn {
  flex: 1; max-width: 160px; padding: 14px 0;
  background: #0d1f50; border: 2px solid #2a5fc4;
  color: #7dd3fc; border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.ps-mob-jump { background: #1e3a8a !important; border-color: #60a5fa !important; }
.ps-mob-btn:active { filter: brightness(1.3); }
@media (max-width: 600px) {
  .ps-mob-controls { display: flex; }
  .ps-panel { padding: 22px 18px; }
}