* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #0b0f19; color: #e7ecf3; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }
#app { position: relative; width: 100%; height: 100%; overflow: hidden; }
video#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); filter: saturate(1.05) contrast(1.05); pointer-events: none; z-index: 0; }
canvas#overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

#hud { position: absolute; top: 12px; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hp.left { color: #6be2ff; }
.hp.right { color: #ff6b8a; }
.center { opacity: .95; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.center .meta { font-size: 12px; opacity: .9; display: flex; gap: 8px; align-items: center; }
.center .meta button { appearance: none; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #e7ecf3; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.center .meta button:hover { background: rgba(255,255,255,.14); }

#gameover { position: absolute; inset: 0; z-index: 50; background: rgba(2,6,23,.55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
#gameover.hidden { display: none; }
#gameover .panel { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px 24px; box-shadow: 0 10px 30px rgba(0,0,0,.35); min-width: 260px; text-align: center; }
#result-text { font-size: 18px; margin-bottom: 12px; }
#restart-btn { appearance: none; border: none; background: #2563eb; color: white; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; }
#restart-btn:hover { background: #1d4ed8; }

.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

#perk-modal { position: absolute; inset: 0; z-index: 60; background: rgba(2,6,23,.55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
#perk-modal.hidden { display: none; }
#perk-modal .panel { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); min-width: 320px; }
#perk-modal .title { font-size: 16px; margin-bottom: 10px; }
#perk-modal .options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#perk-modal .option { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); padding: 8px; border-radius: 10px; cursor: pointer; text-align: center; }
#perk-modal .option:hover { background: rgba(255,255,255,.14); }
#perk-modal .ghost { margin-top: 10px; width: 100%; appearance: none; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #e7ecf3; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; }

#rules-modal { position: absolute; inset: 0; z-index: 100; background: rgba(2,6,23,.8); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
#rules-modal.hidden { display: none; }
#rules-modal .rules-panel { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 24px; box-shadow: 0 15px 40px rgba(0,0,0,.4); max-width: 600px; max-height: 80vh; overflow-y: auto; }

.rules-section { margin-bottom: 20px; }
.rules-section h3 { color: #e7ecf3; margin: 0 0 12px 0; font-size: 16px; font-weight: 600; }
.rules-section ul { margin: 0; padding-left: 20px; color: #b8c5d1; line-height: 1.6; }
.rules-section li { margin-bottom: 6px; }

.item-settings { display: flex; flex-direction: column; gap: 12px; }
.item-setting { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px; border-radius: 8px; transition: background-color 0.2s; }
.item-setting:hover { background: rgba(255,255,255,.08); }
.item-setting input[type="checkbox"] { width: 18px; height: 18px; accent-color: #2563eb; }
.item-icon { font-size: 20px; width: 24px; text-align: center; }
.item-icon.purple { color: #a78bfa; }
.item-icon.green { color: #34d399; }
.item-icon.mine { color: #f59e0b; }
.item-icon.drops { color: #8b5cf6; }
.item-icon.red { color: #ef4444; }
.item-icon.mirror { color: #c0c0c0; }
.item-icon.debug { color: #8b5cf6; }

.perks-list { list-style: none; padding-left: 0; }
.perks-list li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.perks-list li:last-child { border-bottom: none; }

.button-group { display: flex; gap: 12px; margin-top: 24px; }
.button-group button { flex: 1; padding: 12px 16px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.button-group .primary { background: #2563eb; color: white; border: none; }
.button-group .primary:hover { background: #1d4ed8; }
.button-group .secondary { background: transparent; color: #e7ecf3; border: 1px solid rgba(255,255,255,.25); }
.button-group .secondary:hover { background: rgba(255,255,255,.1); }

.vision-boot-panel {
  display: none;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.vision-boot-panel.vision-boot-active {
  display: block;
}
.vision-boot-label {
  font-size: 13px;
  color: #b8c5d1;
  margin-bottom: 8px;
  min-height: 1.35em;
}
.vision-boot-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.vision-boot-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.35s ease-out;
}