:root { color-scheme: light; font-family: Inter, ui-rounded, system-ui, sans-serif; color: #14213d; background: #f6f7fb; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top right, #dbeafe, transparent 35rem), #f6f7fb; }
button, a { font: inherit; touch-action: manipulation; }
.app-shell { width: min(940px, 100%); min-height: 100vh; margin: auto; padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
header { margin-bottom: 24px; } .title-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .eyebrow { margin: 0 0 4px; color: #4f46e5; font-weight: 800; font-size: .75rem; letter-spacing: .12em; } h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: clamp(2rem, 7vw, 3.2rem); }.manage-link { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #4f46e5; color: #fff; text-decoration: none; font-size: 1.7rem; line-height: 1; }
.header-actions { display: flex; align-items: center; gap: 8px; }.header-actions form { margin: 0; }.logout-button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #dce3f1; color: #263450; font-size: 1.25rem; cursor: pointer; }
.login-shell { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px; }.login-card { display: grid; width: min(100%, 390px); gap: 14px; padding: clamp(24px, 7vw, 38px); border-radius: 24px; background: #fff; box-shadow: 0 18px 55px #14213d1f; }.login-card img { margin-bottom: 4px; }.login-card h1 { font-size: 2.2rem; }.login-copy { margin-bottom: 6px; color: #667085; }.login-card label { font-weight: 800; }.login-card input[type="password"] { width: 100%; padding: 14px; border: 1px solid #cdd4e2; border-radius: 12px; background: #fff; color: #14213d; font: inherit; }.login-card button { border: 0; border-radius: 12px; padding: 14px; background: #4f46e5; color: #fff; font-weight: 800; cursor: pointer; }.login-card small { color: #667085; line-height: 1.4; }.login-error { margin: 0; color: #b42318; font-weight: 750; }.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.volume-control { display: grid; grid-template-columns: auto minmax(120px, 280px) 38px; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin-top: 18px; padding: 9px 12px; border-radius: 14px; background: #ffffffb8; box-shadow: 0 3px 12px #14213d12; font-size: .85rem; font-weight: 800; }.volume-control input { width: 100%; accent-color: #4f46e5; touch-action: pan-x; }.volume-control output { text-align: right; color: #4f46e5; }
.category-list { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 15px; scrollbar-width: thin; }
.category { border: 2px solid transparent; background: #fff; border-radius: 16px; min-width: 136px; padding: 10px; color: inherit; cursor: pointer; box-shadow: 0 3px 12px #14213d12; text-align: left; transition: .16s transform, .16s border-color; }
.category:active, .sound-card:active { transform: scale(.97); } .category.active { border-color: #4f46e5; background: #eef2ff; } .category img { display: block; width: 36px; height: 36px; margin-bottom: 6px; } .category span { font-weight: 750; }
.sound-section { background: #fff; border-radius: 24px; padding: clamp(18px, 4vw, 32px); box-shadow: 0 12px 35px #14213d12; } .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } h2 { margin-bottom: 0; font-size: 1.5rem; } .instruction { margin-bottom: 4px; color: #667085; }
.badge { background: #e0e7ff; color: #3730a3; border-radius: 999px; padding: 6px 10px; font-size: .78rem; font-weight: 800; white-space: nowrap; } .permission { width: 100%; margin: 18px 0 0; border: 0; border-radius: 12px; padding: 12px; background: #4f46e5; color: #fff; font-weight: 800; cursor: pointer; }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-top: 22px; } .sound-card { position: relative; min-height: 158px; border: 2px solid #edf0f7; background: #fff; border-radius: 18px; padding: 16px 11px 12px; color: inherit; cursor: pointer; transition: .16s transform, .16s border-color, .16s background; } .sound-card.selected { border-color: #4f46e5; background: #eef2ff; } .sound-card img { width: 72px; height: 72px; display: block; margin: 0 auto 10px; } .sound-card span { display: block; font-weight: 800; } .sound-card small { display: block; margin-top: 3px; color: #667085; } .sound-card.playing { animation: pulse .42s ease; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px); opacity: 0; transition: .2s; background: #14213d; color: #fff; border-radius: 999px; padding: 11px 16px; max-width: calc(100% - 32px); text-align: center; font-weight: 700; pointer-events: none; }.toast.show { transform: translate(-50%, 0); opacity: 1; } @keyframes pulse { 50% { transform: scale(1.05); background: #dbeafe; } }
.weapon-detail { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; margin: 0; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); background: #101a30; color: #f6f8ff; text-align: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; transition: background-color .08s ease; }.weapon-detail::backdrop { background: #101a30; }.weapon-detail .close { position: absolute; z-index: 2; top: max(20px, env(safe-area-inset-top)); right: 20px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #ffffff20; color: #fff; font-size: 2rem; cursor: pointer; touch-action: manipulation; }.weapon-action { display: grid; place-content: center; width: 100%; height: 100%; pointer-events: none; transition: transform .08s ease; }.weapon-detail.firing { background: #1d3158; }.weapon-detail.firing .weapon-action { transform: scale(.992); }.weapon-detail img { display: block; width: min(84vw, 680px); height: min(54dvh, 530px); object-fit: contain; margin: 0 auto 20px; border-radius: 20px; background: #fff; }.weapon-detail h2 { font-size: clamp(2rem, 9vw, 4rem); margin-bottom: 18px; }.weapon-detail #weapon-hint { color: #c6d0e4; font-weight: 800; }.add-form button { border: 0; border-radius: 16px; padding: 16px 24px; background: #6366f1; color: white; font-size: 1.1rem; font-weight: 800; cursor: pointer; min-width: min(100%, 310px); }
.admin { max-width: 620px; }.back { display: inline-block; margin-bottom: 36px; color: #4f46e5; text-decoration: none; font-weight: 800; }.add-form { display: grid; gap: 18px; margin-top: 28px; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 12px 35px #14213d12; }.add-form label { display: grid; gap: 7px; font-weight: 750; }.add-form input, .add-form select { width: 100%; border: 1px solid #cdd4e2; border-radius: 10px; background: #fff; color: #14213d; padding: 12px; }.add-form button { justify-self: start; }.add-form #result { min-height: 1.5em; margin: 0; font-weight: 700; }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; color: #edf2ff; background: #0c1220; }
  body { background: radial-gradient(circle at top right, #172554, transparent 35rem), #0c1220; }
  .eyebrow { color: #a5b4fc; }
  .category, .sound-section, .sound-card { background: #141d30; color: #edf2ff; border-color: #263450; box-shadow: 0 8px 25px #0005; }
  .category.active, .sound-card.selected { background: #202a52; border-color: #818cf8; }
  .instruction, .sound-card small { color: #b5c0d4; }
  .badge { background: #303b74; color: #dbe4ff; }
  .toast { background: #e7edff; color: #10182b; }
  .volume-control { background: #141d30; box-shadow: 0 5px 18px #0005; }.volume-control output { color: #a5b4fc; }
  .logout-button { background: #263450; color: #edf2ff; }.login-card { background: #141d30; box-shadow: 0 18px 55px #0007; }.login-copy, .login-card small { color: #b5c0d4; }.login-card input[type="password"] { border-color: #3a4a68; background: #0d1526; color: #edf2ff; }.login-error { color: #fda29b; }
  .weapon-detail { background: #080d18; }.weapon-detail::backdrop { background: #080d18; }.back { color: #a5b4fc; }.add-form { background: #141d30; box-shadow: 0 8px 25px #0005; }.add-form input, .add-form select { border-color: #3a4a68; background: #0d1526; color: #edf2ff; }
  @keyframes pulse { 50% { background: #263968; } }
}