:root{color-scheme:dark;--ink: #102427;--mint: #27f3b0;--mint-dark: #078962;--panel: rgba(5, 96, 75, .72);--white: #f8fff9;--shadow: rgba(7, 48, 42, .34);--orange: #ff9d35;--yellow: #ffe177;--font-display: Impact, "Arial Black", "Trebuchet MS", sans-serif;--font-ui: "Trebuchet MS", Verdana, sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#079a68;color:var(--white);font-family:var(--font-ui);-webkit-user-select:none;user-select:none}#app{position:relative}#game{display:block;width:100%;height:100%;cursor:crosshair}.hud{position:absolute;inset:0;pointer-events:none}.score-card{position:absolute;top:18px;left:22px;min-width:168px;padding:14px 16px 12px;border:3px solid rgba(204,255,236,.62);background:linear-gradient(135deg,#045b47db,#099f6b9e);box-shadow:8px 8px 0 var(--shadow);transform:skew(-8deg)}.score-card>*{display:block;transform:skew(8deg)}.score-card span{color:#b8ffd9;font-family:var(--font-display);font-size:18px;text-transform:uppercase;text-shadow:2px 2px 0 #006247}.score-card strong{color:var(--white);font-family:var(--font-display);font-size:58px;line-height:.94;text-shadow:4px 4px 0 #006247}.score-card small{display:flex;justify-content:space-between;gap:22px;margin-top:8px;color:#d8fff0;font-family:var(--font-display);font-size:18px;font-style:italic;text-transform:uppercase}.score-card i{font-style:normal;color:var(--yellow)}.combo-card{position:absolute;top:24px;right:42px;padding:9px 20px 10px;border:3px solid rgba(169,255,224,.64);background:linear-gradient(135deg,#047053db,#06b275a3);color:var(--white);font-family:var(--font-display);font-size:38px;font-style:italic;line-height:1;text-transform:uppercase;text-shadow:4px 4px 0 #006247;box-shadow:7px 7px 0 var(--shadow);transform:skew(-14deg)}.end-panel button{position:absolute;left:50%;bottom:28px;z-index:3;transform:translate(-50%) skew(-10deg);min-width:168px;border:3px solid #ffffff;padding:13px 28px;background:linear-gradient(180deg,#ffeb82,#ff9d35);color:#13493b;font-family:var(--font-display);font-size:26px;font-style:italic;text-transform:uppercase;text-shadow:1px 1px 0 #ffffff;box-shadow:8px 8px #05473a52;cursor:pointer}.end-panel button:hover{filter:brightness(1.08)}.hidden{display:none}.start-menu{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#023e318c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:20px}.menu-panel{width:min(560px,100%);padding:26px 24px 22px;border:4px solid #ffffff;background:linear-gradient(135deg,#058a61f5,#13d68ee6);box-shadow:12px 12px #05473a57;text-align:center}.menu-eyebrow{display:block;color:#ccffdf;font-family:var(--font-display);font-size:18px;letter-spacing:2px;text-transform:uppercase}.menu-title{display:block;margin-top:4px;color:var(--white);font-family:var(--font-display);font-size:42px;line-height:.95;text-shadow:4px 4px 0 #007352;text-transform:uppercase}.weapon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0 18px}.weapon-card{position:relative;padding:14px 10px 12px;border:3px solid rgba(255,255,255,.55);background:linear-gradient(160deg,#045b47eb,#099f6bc7);color:var(--white);font-family:var(--font-ui);cursor:pointer;text-align:center;transition:transform .12s ease,border-color .12s ease}.weapon-card:hover{transform:translateY(-2px)}.weapon-card.selected{border-color:var(--yellow);box-shadow:0 0 0 3px #ffe17759,6px 6px #05473a52}.weapon-card .weapon-name{display:block;font-family:var(--font-display);font-size:22px;letter-spacing:1px;text-transform:uppercase;text-shadow:2px 2px 0 #006247}.weapon-card .weapon-stats{display:block;margin-top:6px;color:#d8fff0;font-size:12px;line-height:1.35}.weapon-card .weapon-badge{display:inline-block;margin-top:8px;padding:2px 8px;border-radius:8px;background:var(--yellow);color:#13493b;font-family:var(--font-display);font-size:11px;letter-spacing:1px;text-transform:uppercase}.name-prompt{margin:16px 0 4px;text-align:left}.name-prompt label{display:block;color:#d8fff0;font-family:var(--font-display);font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}.name-prompt input{width:100%;padding:10px 14px;border:3px solid rgba(255,255,255,.6);background:#044637b3;color:var(--white);font-family:var(--font-ui);font-size:18px;letter-spacing:1px;outline:none}.name-prompt input:focus{border-color:var(--yellow)}.player-badge{margin:10px 0 4px;color:#d8fff0;font-family:var(--font-display);font-size:16px;letter-spacing:1px;text-transform:uppercase}.player-badge strong{color:var(--yellow);margin:0 6px}.player-badge button{border:1px solid rgba(255,255,255,.4);background:transparent;color:#b8ffd9;font-family:var(--font-ui);font-size:12px;padding:2px 8px;margin-left:6px;cursor:pointer}.player-badge button:hover{border-color:var(--yellow);color:var(--yellow)}.leaderboard{margin-top:18px;padding:14px 14px 10px;border:2px solid rgba(255,255,255,.35);background:#04463773;text-align:left;max-height:260px;overflow-y:auto}.leaderboard-title{display:block;color:var(--yellow);font-family:var(--font-display);font-size:16px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}.leaderboard-list{list-style:none;margin:0;padding:0;counter-reset:rank;color:var(--white);font-family:var(--font-ui);font-size:14px}.leaderboard-list li{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08);counter-increment:rank}.leaderboard-list li:last-child{border-bottom:none}.leaderboard-list li:before{content:counter(rank);color:#b8ffd9;font-family:var(--font-display);font-size:13px;width:24px;text-align:right;margin-right:10px}.leaderboard-list .lb-name{flex:1;margin-right:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-list .lb-score{font-family:var(--font-display);color:var(--yellow);letter-spacing:1px}.leaderboard-list .leaderboard-empty{display:block;color:#b8ffd9;text-align:center;font-style:italic}.leaderboard-list .leaderboard-empty:before{content:"";width:0;margin:0}.end-rank{margin-top:-56px;margin-bottom:60px;color:var(--yellow);font-family:var(--font-display);font-size:22px;font-style:italic}.start-button{display:inline-block;min-width:200px;border:3px solid #ffffff;padding:13px 32px;background:linear-gradient(180deg,#ffeb82,#ff9d35);color:#13493b;font-family:var(--font-display);font-size:26px;font-style:italic;text-transform:uppercase;text-shadow:1px 1px 0 #ffffff;box-shadow:8px 8px #05473a52;cursor:pointer;transform:skew(-10deg)}.start-button:hover{filter:brightness(1.08)}.end-screen{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#023e316b;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.end-panel{position:relative;width:min(420px,calc(100vw - 40px));padding:28px;border:4px solid #ffffff;background:linear-gradient(135deg,#058a61f0,#13d68ee0);box-shadow:12px 12px #05473a57;text-align:center;transform:skew(-5deg)}.end-panel>*{transform:skew(5deg)}.end-panel span{display:block;color:#ccffdf;font-family:var(--font-display);font-size:18px;text-transform:uppercase}.end-panel strong{display:block;margin-top:6px;color:var(--white);font-family:var(--font-display);font-size:54px;line-height:.95;text-shadow:4px 4px 0 #007352;text-transform:uppercase}.end-panel p{margin:16px 0 72px;color:#edfff7;font-family:var(--font-display);font-size:24px;font-style:italic}.end-panel button{bottom:18px}.hidden,.start-button.hidden,.end-screen.hidden{display:none}@media(max-height:500px){.score-card{top:8px;left:8px;min-width:100px;padding:6px 10px}.score-card span{font-size:12px}.score-card strong{font-size:26px}.score-card small{font-size:12px;margin-top:2px;gap:10px}.combo-card{top:10px;right:10px;font-size:18px;padding:5px 10px}}@media(max-width:720px){.score-card{top:12px;left:12px;min-width:132px;padding:10px 12px}.score-card strong{font-size:40px}.combo-card{top:14px;right:14px;font-size:24px;padding:8px 12px}.start-button,.end-panel button{font-size:22px}.menu-title{font-size:32px}.weapon-grid{grid-template-columns:1fr;gap:10px}.weapon-card{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;padding:10px 14px}.weapon-card .weapon-name{font-size:20px}.weapon-card .weapon-stats{grid-column:1 / -1;margin-top:4px}.weapon-card .weapon-badge{margin-top:0}}
