@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: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 { position:relative;width:100%;height:clamp(400px,57svh,470px);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:0deg;--zoom:1;position:absolute;padding:0;border:0;background:transparent;transform:translate(-50%,-50%) rotate(var(--angle)) scale(var(--zoom));transition:transform 150ms ease;transform-origin:center; }
.weapon canvas { display:block;width:100%;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; }
.weapon[data-weapon='knife'] { left:16%;top:20%;width:17%;--angle:-18deg;--undo:18deg; }
.weapon[data-weapon='sword'] { left:48%;top:20%;width:28%;--angle:-10deg;--undo:10deg; }
.weapon[data-weapon='spear'] { left:30%;top:84%;width:49%;--angle:5deg;--undo:-5deg; }
.weapon[data-weapon='mace'] { left:47%;top:53%;width:25%;--angle:14deg;--undo:-14deg; }
.weapon[data-weapon='flail'] { left:82%;top:20%;width:25%;--angle:-12deg;--undo:12deg; }
.weapon[data-weapon='pistol'] { left:16%;top:53%;width:14%;--angle:-12deg;--undo:12deg; }
.weapon[data-weapon='shotgun'] { left:82%;top:53%;width:25%;--angle:-8deg;--undo:8deg; }
.weapon[data-weapon='smg'] { left:78%;top:84%;width:25%;--angle:-10deg;--undo:10deg; }
.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; }
.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:900px) {
  #menu { justify-content:flex-start; }
  .menu-layout { grid-template-columns:1fr;gap:18px; }
  #weapons { height:390px; }
  .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 { height:310px;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 { 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; }
}