@font-face { font-family:'Love Ya Like A Sister';src:url('./fonts/LoveYaLikeASister-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap; }
:root { font-family:'Love Ya Like A Sister',cursive;color:#fff9e8;background:#dc4330;font-synthesis:none;-webkit-text-stroke:.55px #000;paint-order:stroke fill; }
* { box-sizing:border-box; }
body { margin:0;min-height:100svh;background:url('./assets/menu-doodles.svg') 0 0/900px 620px repeat,radial-gradient(ellipse at 25% 0,#e75b41 0,#dc4330 52%,#be322a 100%); }
button { font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid #000;outline-offset:7px; }
button:disabled { cursor:default;opacity:.55; }
[hidden] { display:none!important; }
main { width:min(1220px,100%);min-height:100svh;margin:0 auto;padding:22px 30px;display:flex;flex-direction:column;align-items:center; }
#menu { justify-content:center; }
.intro { position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:25px;margin-bottom:22px;padding:0 8px; }
h1 { margin:0;font-size:0; }
.title-logo { display:block;height:clamp(130px,22.1svh,179.4px);width:auto;max-width:78vw;object-fit:contain; }
#kill-balance { position:absolute;right:8px;top:50%;transform:translateY(-50%);flex-shrink:0;font-size:23px;color:#321815;background:#fff9e8;border:1px solid #000;border-radius:40px;padding:10px 22px;margin:0;box-shadow:3px 3px 0 #571c19; }
.menu-layout { width:100%;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:stretch; }
#weapons { --wall-unit:34cqw;position:relative;width:100%;height:auto;aspect-ratio:1000/550;flex-shrink:0;container-type:size;isolation:isolate;background:#b49165 url('./assets/wood-horizontal.jpg') center/cover;border:1px solid #000;border-radius:24px;box-shadow:5px 6px 0 #651f1a,inset 0 0 0 7px #fff2d926; }
.loadout { border:1px solid #000;border-radius:24px;background:#fff9e8;color:#321815;box-shadow:5px 6px 0 #651f1a;padding:23px 20px 18px;display:flex;flex-direction:column;text-align:center; }
.loadout-details { margin-bottom:20px; }
.weapon { --angle:0deg;--undo:calc(-1 * var(--angle));--zoom:1;--weapon-width:calc(var(--wall-unit) * var(--length));position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:max(44px,var(--weapon-width));height:max(44px,calc(var(--weapon-width) / var(--ratio)));padding:0;border:0;background:transparent;transform:translate(-50%,-50%) rotate(var(--angle));transform-origin:center; }
.weapon canvas { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--zoom));transition:transform 150ms ease;display:block;width:var(--weapon-width);height:auto;pointer-events:none; }
.weapon.locked canvas { filter:brightness(.04);opacity:.7; }
.weapon-cost { position:absolute;top:50%;left:50%;color:#fff9e8;font-size:25px;transform:translate(-50%,-50%) rotate(var(--undo));pointer-events:none;-webkit-text-stroke:1px #000;paint-order:stroke fill; }
/* Overall illustrated lengths in metres; one scale applies to every weapon. */
.weapon[data-weapon='knife'] { --length:0.3;--ratio:6.565789;--x:9.44321;--y:76.01448;--angle:28deg; }
.weapon[data-weapon='sword'] { --length:1;--ratio:4.355263;--x:29.23899;--y:52.16687;--angle:-42deg; }
.weapon[data-weapon='spear'] { --length:2.1;--ratio:14.47826;--x:49.74918;--y:69.46901;--angle:-18deg; }
.weapon[data-weapon='mace'] { --length:0.75;--ratio:3.987854;--x:9.99609;--y:30.12588;--angle:72deg; }
.weapon[data-weapon='flail'] { --length:1.05;--ratio:3.978261;--x:75.86557;--y:76.98073;--angle:-10deg; }
.weapon[data-weapon='pistol'] { --length:0.22;--ratio:1.488756;--x:50.69535;--y:86.44650;--angle:-24deg; }
.weapon[data-weapon='shotgun'] { --length:0.7;--ratio:3.787072;--x:47.29145;--y:13.20207;--angle:-5deg; }
.weapon[data-weapon='smg'] { --length:0.68;--ratio:2.12766;--x:61.33157;--y:40.95552;--angle:-12deg; }
.weapon[data-weapon='rpg'] { --length:0.95;--ratio:5.193717;--x:81.70856;--y:24.85120;--angle:32deg; }
.weapon.selected canvas { filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.weapon.locked.selected canvas { filter:brightness(.04) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);opacity:1; }
.weapon:hover,.weapon:focus-visible { --zoom:1.1;z-index:2;outline:none; }
.weapon:hover canvas,.weapon:focus-visible canvas { filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.weapon.locked:hover canvas,.weapon.locked:focus-visible canvas { filter:brightness(.04) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);opacity:1; }
#selected-weapon { font-size:38px;margin:0 0 5px;min-height:46px; }
#weapon-info { min-height:20px;font-size:16px;color:#593a31;margin:0;line-height:1.4;text-align:center; }
.actions { display:flex;flex-direction:column;gap:10px; }
.music-toggle { align-self:center;background:transparent;color:#593a31;border:1px solid #000;border-radius:6px;padding:7px 14px;font-size:16px;min-height:36px; }
.music-toggle:hover { background:#fff9e8; }
#capture .music-toggle { margin-top:12px;color:#321815; }
.primary { background:#fff9e8;color:#250e0c;border:1px solid #000;border-radius:9px;padding:12px 22px;min-width:180px;font-size:20px;transition:background 120ms,transform 120ms; }
.primary:active:not(:disabled) { transform:translateY(2px); }
#queue { background:#762a2b;color:#fff9e8; }
#queue:hover:not(:disabled) { background:#963c3d; }
#practice { background:#f2e6ca; }
#practice:hover:not(:disabled) { background:#fff; }
.primary:hover:not(:disabled) { background:white; }
.text-button { border:1px solid #000;border-radius:3px;background:transparent;color:#fff9e8;padding:10px 14px;font-size:19px; }
.text-button:hover { color:white; }
#queue-status { font-size:15px;line-height:1.4;text-align:center;color:#593a31;margin:12px 0 0; }
#queue-status:empty { display:none; }
.control-hint { color:#fff0d3;font-size:14px;text-align:center;margin:23px 0 0; }
body.playing { overflow:hidden;background:#fdfdf9; }
#arena,#arena:fullscreen { position:fixed;inset:0;width:100%;height:100dvh;padding:0;margin:0;background:#fdfdf9;color:#321b1b; }
#game { display:block;width:100%;height:100%;border:0;outline:none;touch-action:none;cursor:default; }
#minimap { position:absolute;top:14px;left:14px;width:128px;height:128px;pointer-events:none; }
#countdown { pointer-events:none;position:absolute;inset:0;display:grid;place-items:center;font-size:70px;color:#8b4a46; }
#capture,#result { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;padding:30px;min-width:280px;border:1px solid #000;border-radius:4px;background:#f7f7f2f5;z-index:3;text-align:center; }
#arena .primary { background:#762a2b;color:white;border-color:#000; }
#arena .primary:hover { background:#963c3d; }
#arena .primary:focus-visible { outline-color:#762a2b; }
#arena .text-button { color:#8b4a46;margin-top:8px; }
#arena .text-button:hover { color:#762a2b; }
#capture-note { font-size:14px;color:#8b4a46;margin:16px 0 0; }
#reward { color:#762a2b;font-size:20px;margin:-10px 0 22px; }
h2 { font-size:46px;font-weight:400;margin:0 0 25px; }
@media(max-width:1000px) {
  #menu { justify-content:flex-start; }
  .menu-layout { grid-template-columns:1fr;gap:18px; }
  .loadout { display:grid;grid-template-columns:1fr 150px;column-gap:25px;padding:20px; }
  .loadout-details { grid-column:1;grid-row:1;margin-bottom:12px; }
  .loadout .actions { grid-column:1;grid-row:2; }
  .loadout #queue-status { grid-column:1;grid-row:3; }
  .loadout .customise-corner { grid-column:2;grid-row:1/4;margin:0;justify-content:center; }
}
@media(max-width:650px) {
  #minimap { top:10px;left:10px;width:104px;height:104px; }
  main { padding:18px 14px 22px; }
  .intro { gap:8px;margin-bottom:18px;padding:0; }
  .title-logo { height:124.8px;max-width:70.2vw; }
  #kill-balance { font-size:18px;padding:9px 14px; }
  #weapons { border-radius:20px; }
  .weapon-cost { font-size:22px; }
  .loadout { grid-template-columns:minmax(0,1fr) 110px;gap:12px;padding:16px 12px;border-radius:20px; }
  #selected-weapon { font-size:31px;min-height:37px; }
  #weapon-info { font-size:14px; }
  .loadout .primary { min-width:0;font-size:18px;padding:11px 9px; }
  .control-hint { font-size:12px; }
}
@media(max-width:420px) {
  .intro { flex-wrap:wrap; }
  .intro h1 { flex-basis:100%; }
  .title-logo { margin:0 auto; }
  #kill-balance { position:static;transform:none;margin-left:auto; }
}
@media(prefers-reduced-motion:reduce) { .weapon canvas { transition:none; } }
.customise-corner { display:flex;flex-direction:column;align-items:center;margin-top:auto;padding-top:8px; }
#menu-cursor { display:block;width:100px;height:100px; }
.customise-corner .primary { min-width:130px;padding:9px 18px;font-size:19px; }
#customisation { justify-content:center;padding:30px 18px; }
.custom-card { width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;border:1px solid #000;border-radius:26px;background:#fff9e8;color:#250e0c; }
.custom-card h2 { margin:0;font-size:39px; }
#custom-cursor { width:120px;height:120px; }
.custom-head { display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%; }
#accessory-balance { font-size:19px;margin:0;white-space:nowrap; }
.helmet-shop { width:100%;border-top:1px solid #0003;padding-top:12px; }
.helmet-row { display:flex;align-items:center;gap:14px;width:100%; }
#helmet-icon { width:72px;height:56px;flex-shrink:0; }
.helmet-details { flex:1; }
.helmet-details .eyes-control { gap:10px;font-size:22px; }
.helmet-details p { margin:5px 0 0;font-size:15px;color:#593a31; }
.helmet-shop .primary { margin-top:10px;padding:9px 16px;font-size:19px; }
.colour-control,.eyes-control { display:flex;align-items:center;justify-content:space-between;gap:35px;font-size:24px;width:100%; }
#cursor-colour { width:60px;height:40px;padding:3px;background:#fff;border:1px solid #000;border-radius:5px;cursor:pointer; }
.eyes-control input { appearance:none;margin:0;width:24px;height:24px;flex-shrink:0;border:1px solid #000;border-radius:4px;background:#fff;cursor:pointer; }
.eyes-control input:checked { background:#762a2b;box-shadow:inset 0 0 0 5px #fff; }
.eyes-control input:focus-visible { outline:2px solid #000;outline-offset:4px; }
#custom-status { margin:0;font-size:16px; }
#custom-status:empty { display:none; }
.custom-card .primary { width:100%; }
@media(max-width:650px) {
  #menu-cursor { width:90px;height:90px; }
  .loadout .customise-corner .primary { min-width:0;width:100%;padding:10px 7px;font-size:17px; }
}

@media(max-width:560px) {
  #weapons { --wall-unit:46.875cqw;aspect-ratio:640/820; }
  .weapon-cost { font-size:18px; }
  .weapon[data-weapon='knife'] { --x:14.05140;--y:42.65665;--angle:-25deg; }
  .weapon[data-weapon='sword'] { --x:72.88603;--y:30.04777;--angle:-35deg; }
  .weapon[data-weapon='spear'] { --x:34.56745;--y:54.91317;--angle:-77deg; }
  .weapon[data-weapon='mace'] { --x:17.72375;--y:18.29382;--angle:62deg; }
  .weapon[data-weapon='flail'] { --x:68.67687;--y:86.83160;--angle:-16deg; }
  .weapon[data-weapon='pistol'] { --x:12.99047;--y:59.59450;--angle:-25deg; }
  .weapon[data-weapon='shotgun'] { --x:64.87763;--y:9.83506;--angle:8deg; }
  .weapon[data-weapon='smg'] { --x:78.04325;--y:50.25144;--angle:-4deg; }
  .weapon[data-weapon='rpg'] { --x:64.42091;--y:65.38216;--angle:18deg; }
}
@media(max-width:360px) { main { padding-left:12px;padding-right:12px; } }