:root {
  --ink: #2b2622;
  --paper: #f4ecd8;
  --paper-hi: #fbf6e9;
  --red: #d6342b;
  --font: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
  --title: "Rubik Doodle Shadow", "Patrick Hand", cursive;
  /* Hand-drawn box: uneven corner radii. */
  --sketch-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #3b322b; color: var(--ink);
  font: 18px/1.25 var(--font); }
canvas#game { display: block; width: 100vw; height: 100vh;
  /* Doodle crosshair as a real cursor: zero added input latency. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M16 4.5c6.5.3 11.2 5 11.3 11.4-.3 6.4-5 11.2-11.4 11.3C9.6 26.9 4.7 22.4 4.6 16 4.8 9.5 9.6 4.8 16.4 4.6' stroke='%23f4ecd8' stroke-width='4.5'/%3E%3Cpath d='M16 4.5c6.5.3 11.2 5 11.3 11.4-.3 6.4-5 11.2-11.4 11.3C9.6 26.9 4.7 22.4 4.6 16 4.8 9.5 9.6 4.8 16.4 4.6' stroke='%232b2622' stroke-width='2'/%3E%3Cpath d='M16 10v5M16 17v5M10 16h5M17 16h5' stroke='%23d6342b' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 16 16, crosshair; }

.paper { background: var(--paper-hi); border: 2px solid var(--ink); border-radius: var(--sketch-radius);
  box-shadow: 3px 3px 0 rgba(43, 38, 34, 0.55); }
.tilt-l { transform: rotate(-0.8deg); }
.tilt-r { transform: rotate(0.8deg); }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
body:not(.joined) #hud { display: none; }
#status { position: absolute; top: 12px; left: 50%; translate: -50% 0; padding: 4px 18px;
  font-size: 20px; text-align: center; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
#status:empty { display: none; }
#status small { display: block; font-size: 15px; opacity: 0.75; }
#status small .key { padding: 0 4px; }
#status .key { display: inline-block; border: 2px solid var(--ink); border-radius: 6px 4px 7px 3px;
  padding: 0 7px; margin: 0 2px; background: #ffe58a; line-height: 1.1; }

#scores { position: absolute; top: 12px; right: 12px; padding: 6px 10px 8px; min-width: 190px; font-size: 16px;
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(70, 120, 200, 0.18) 23px 24px); }
#scores .head { font-size: 14px; opacity: 0.6; display: flex; justify-content: space-between; border-bottom: 2px solid rgba(214,52,43,.4); margin-bottom: 2px; }
#scores .row { display: flex; gap: 6px; align-items: center; height: 24px; }
#scores img { width: 24px; height: 24px; flex: none; }
#scores .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scores .num { width: 26px; text-align: right; }
#scores .dead { opacity: 0.4; text-decoration: line-through; text-decoration-thickness: 2px; }
#scores .me .name { font-weight: bold; }
#scores .ready { color: #2e7d32; font-weight: bold; }

#roomchip { position: absolute; top: 12px; left: 12px; padding: 2px 12px; font-size: 16px; pointer-events: auto; cursor: pointer; }
#roomchip:empty { display: none; }
#banner.sd { color: #e63946; }
#status.sd { background: #ffe0dc; color: #b3261e; }
#feed { position: absolute; top: 60px; left: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
#feed > div { background: var(--paper-hi); border: 2px solid var(--ink); border-radius: var(--sketch-radius);
  padding: 1px 10px; display: flex; align-items: center; gap: 5px; animation: slidein 0.25s ease-out; }
#feed img { width: 22px; height: 22px; }
#feed .verb { opacity: 0.75; }
@keyframes slidein { from { transform: translateX(-30px); opacity: 0; } }

#banner { position: absolute; top: 26%; width: 100%; text-align: center; font-size: 46px;
  color: var(--paper-hi); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink); opacity: 0; }
#banner.show { animation: pop 0.35s cubic-bezier(.2, 1.6, .4, 1) forwards; }
#banner.big { font: 110px var(--title); color: #ffd23f; -webkit-text-stroke: 0; text-shadow: none; }
@keyframes pop { from { transform: scale(0.3) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(-2deg); opacity: 1; } }

#roundcard { position: absolute; top: 50%; left: 50%; translate: -50% -50%; rotate: -1deg; padding: 14px 24px 18px;
  min-width: min(360px, calc(100vw - 32px)); text-align: center; }
#roundcard h2 { margin: 0 0 4px; font: 34px var(--title); }
#roundcard .winner img { width: 72px; height: 72px; }
#roundcard table { margin: 8px auto 0; border-collapse: collapse; font-size: 17px; }
#roundcard td { padding: 1px 8px; text-align: left; }
#roundcard td.n { text-align: right; }
#roundcard img.mini { width: 22px; height: 22px; vertical-align: middle; }
#roundcard .sub { opacity: 0.7; }

#bottom { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; display: flex; gap: 12px; align-items: flex-end; }
.hpcard { padding: 6px 10px; display: flex; flex-direction: column; align-items: center; }
#hpbar { width: 200px; height: 18px; border: 2px solid var(--ink); border-radius: 4px 7px 3px 6px; overflow: hidden; background: var(--paper); }
#hpfill { height: 100%; width: 100%; transition: width 0.15s;
  background: repeating-linear-gradient(-45deg, #e63946 0 6px, #c92a37 6px 9px); }
#hptext { font-size: 16px; }
.weaponcard { display: flex; align-items: center; gap: 4px; padding: 2px 14px 2px 4px; min-width: 190px; }
#weaponicon { width: 48px; height: 48px; }
#weaponname { font-size: 19px; line-height: 1; }
#weaponuses { font-size: 14px; opacity: 0.75; letter-spacing: 1px; }
.dashcard { padding: 4px 10px 8px; font-size: 14px; text-align: center; }
#dash { width: 60px; height: 9px; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--paper); }
#dashfill { height: 100%; background: #5fbde8; }

#gear { position: absolute; bottom: 14px; right: 14px; width: 40px; height: 40px; font-size: 22px; line-height: 1;
  pointer-events: auto; cursor: pointer; padding: 0; }
#debug { position: absolute; bottom: 80px; left: 12px; margin: 0; font: 12px/1.35 ui-monospace, Consolas, monospace;
  background: #000a; color: #eee; padding: 6px 8px; border-radius: 4px; display: none; }

/* ---------------------------------------------------------------- settings */
#settings { position: fixed; top: 50%; left: 50%; translate: -50% -50%; padding: 14px 22px 18px; width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 10px; z-index: 5; }
#settings h2 { margin: 0; font: 30px var(--title); text-align: center; }
#settings label { display: flex; align-items: center; gap: 8px; }
#settings input[type=range] { flex: 1; accent-color: var(--red); }
#settings input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--red); }
#settings button, #join button { border: 2px solid var(--ink); border-radius: var(--sketch-radius); background: var(--paper);
  padding: 6px 12px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
#settings button:active, #join button:active { translate: 1px 1px; box-shadow: 1px 1px 0 var(--ink); }

/* ---------------------------------------------------------------- join screen */
#join { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: #3b322bdd; z-index: 10; overflow: auto; }
#join form { display: flex; flex-direction: column; gap: 10px; width: min(420px, 100%); padding: 18px 22px 16px; text-align: center; rotate: -0.6deg; }
#join h1 { margin: 0; font: 60px/1 var(--title); color: #e63946; }
#join input { font: inherit; font-size: 22px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: var(--sketch-radius);
  background: var(--paper); color: var(--ink); text-align: center; outline: none; }
#join input:focus { background: #fffbe8; }
#join .kinds { display: flex; gap: 12px; }
#join .kinds button { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px; font-size: 20px; }
#join .kinds button.selected { background: #ffe58a; outline: 3px solid var(--ink); outline-offset: -6px; }
#join .kinds canvas { width: 100%; max-width: 160px; height: auto; aspect-ratio: 160 / 140; }
#join .room { display: flex; gap: 8px; align-items: stretch; }
#join .room input { flex: 1; min-width: 0; letter-spacing: 3px; font-size: 20px; padding: 3px 10px; text-transform: uppercase; }
#join .room input::placeholder { letter-spacing: 1px; opacity: 0.5; }
#join .room button { white-space: nowrap; font-size: 19px; background: #ffe58a; }
.lobbyopts { display: flex; flex-direction: column; gap: 6px; font-size: 18px; }
.lobbyopts .opt { display: flex; align-items: center; gap: 10px; }
.lobbyopts .opt > span:first-child { width: 112px; text-align: left; white-space: nowrap; }
.lobbyopts input[type=range] { flex: 1; accent-color: var(--red); }
.lobbyopts output { min-width: 58px; text-align: center; }
.lobbyopts .stepper { display: flex; align-items: center; gap: 4px; }
.lobbyopts .stepper button { width: 30px; height: 28px; padding: 0 !important; font-size: 20px; line-height: 1; }
.lobbyopts.disabled { opacity: 0.55; }
#join .lobbyopts { padding: 6px 10px; border: 2px dashed rgba(43, 38, 34, 0.35); border-radius: 10px 6px 12px 5px; }
#settings h3 { margin: 4px 0 0; font-size: 22px; }
#lobby-section { display: flex; flex-direction: column; gap: 6px; border-top: 2px dashed rgba(43, 38, 34, 0.35); padding-top: 6px; }
#scores .host { font-size: 13px; }
#join .or { display: flex; align-items: center; gap: 10px; opacity: 0.6; font-size: 16px; }
#join .or::before, #join .or::after { content: ''; flex: 1; border-top: 2px dashed var(--ink); }
#join .msg { margin: 0; font-size: 17px; color: var(--red); min-height: 0; }
#join .msg:empty { display: none; }
#roomlist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 96px; overflow: auto; }
#roomlist button { font-size: 15px; padding: 2px 10px; box-shadow: 1px 1px 0 var(--ink); }
#join .go { font-size: 24px; background: #e63946 !important; color: var(--paper-hi); }
#join .help { margin: 0; font-size: 15px; opacity: 0.75; }
#connstate:empty { display: none; }

@media (max-width: 640px) {
  #scores { display: none; }
  #bottom { gap: 6px; }
  #hpbar { width: 110px; }
  .weaponcard { min-width: 0; }
  #banner.big { font-size: 70px; }
}