@font-face { font-family: "Grot"; src: url(fonts/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Grot"; src: url(fonts/barlow-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Grot"; src: url(fonts/barlow-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Type"; src: url(fonts/courier-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Type"; src: url(fonts/courier-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --paper: #ECE6D8; --ink: #1F2A36; --carbon: #3C5873; --red: #B23A2E; --slate: rgba(43,48,54,.8);
  --orange: #D9772B; --mustard: #C9A43A; --peat: #14161A; --iw: #F1EEE6;
  --u: min(1vw, 1.6vh);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--peat); color: var(--iw); font-family: "Grot", "Arial Narrow", sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
.hidden { display: none !important; }
.type { font-family: "Type", "Courier New", monospace; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
#hud > * { position: absolute; }
#minimap { left: max(14px, env(safe-area-inset-left)); top: 14px; width: clamp(96px, 15vmin, 168px); height: clamp(96px, 15vmin, 168px); border-radius: 4px; background: var(--slate); border: 1px solid rgba(241,238,230,.18); }
#top { left: 50%; top: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--slate); padding: 6px 14px; border-radius: 3px; }
#top b { font-size: clamp(20px, 3.2vmin, 30px); font-weight: 700; min-width: 2ch; text-align: center; }
#top .mark { width: 6px; height: clamp(20px, 3.2vmin, 28px); border-radius: 1px; }
.mark.watch { background: var(--orange); } .mark.tide { background: var(--mustard); }
#clock { display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 0 6px; }
#timer { font-size: clamp(18px, 2.8vmin, 26px); font-weight: 700; letter-spacing: .02em; }
#clock small { font-size: 11px; letter-spacing: .14em; opacity: .7; margin-top: 2px; }
#feed { right: max(14px, env(safe-area-inset-right)); top: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: "Type", monospace; font-size: clamp(12px, 1.8vmin, 15px); }
#feed div { background: var(--slate); padding: 3px 8px; border-radius: 2px; transition: opacity .25s; white-space: nowrap; }
#feed .w { color: var(--orange); } #feed .t { color: var(--mustard); } #feed .me { text-decoration: underline; }
#feed .wp { opacity: .75; }
#xh { left: 50%; top: 50%; width: 0; height: 0; }
#xh i { position: absolute; background: var(--iw); box-shadow: 0 0 0 1px rgba(20,22,26,.85); }
#xh .t, #xh .b { width: 2px; height: 9px; left: -1px; } #xh .l, #xh .r { height: 2px; width: 9px; top: -1px; }
#xh .dot { width: 2px; height: 2px; left: -1px; top: -1px; opacity: .8; }
#hitm { left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#hitm i { position: absolute; width: 10px; height: 2px; background: var(--iw); box-shadow: 0 0 0 1px rgba(20,22,26,.8); }
#hitm i:nth-child(1) { left: 6px; top: 6px; transform: rotate(45deg); } #hitm i:nth-child(2) { left: -16px; top: 6px; transform: rotate(-45deg); }
#hitm i:nth-child(3) { left: 6px; top: -8px; transform: rotate(-45deg); } #hitm i:nth-child(4) { left: -16px; top: -8px; transform: rotate(45deg); }
#hitm.kill i { background: var(--red); }
#vig { inset: 0; width: 100%; height: 100%; }
#scope { inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 34vmin, rgba(12,13,15,.97) 34.3vmin); display: none; }
#scope::before, #scope::after { content: ""; position: absolute; background: rgba(12,13,15,.9); }
#scope::before { left: 50%; top: calc(50% - 34vmin); width: 1px; height: 68vmin; }
#scope::after { top: 50%; left: calc(50% - 34vmin); height: 1px; width: 68vmin; }
#names { inset: 0; }
#names div { position: absolute; transform: translate(-50%, -100%); font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 1px 6px; background: rgba(43,48,54,.6); border-radius: 2px; white-space: nowrap; }
#names div.w { border-bottom: 2px solid var(--orange); } #names div.t { border-bottom: 2px solid var(--mustard); }
#hp { left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); background: var(--slate); padding: 8px 12px 9px; border-radius: 3px; min-width: 150px; }
#hp b { font-size: clamp(24px, 4vmin, 36px); font-weight: 700; line-height: 1; }
#hp .bar { height: 3px; background: rgba(241,238,230,.18); margin-top: 5px; }
#hp .bar i { display: block; height: 100%; background: var(--iw); width: 100%; transition: width .15s; }
#hp.low .bar i { background: var(--red); }
#hp small, #ammo small { display: block; font-size: 11px; letter-spacing: .16em; opacity: .72; margin-top: 4px; }
#teamtag.w { color: var(--orange); opacity: 1 !important; } #teamtag.t { color: var(--mustard); opacity: 1 !important; }
#ammo { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); background: var(--slate); padding: 8px 12px 9px; border-radius: 3px; text-align: right; min-width: 130px; }
#ammo b { font-size: clamp(26px, 4.4vmin, 40px); font-weight: 700; line-height: 1; }
#ammo span { font-size: clamp(15px, 2.4vmin, 20px); opacity: .7; margin-left: 4px; }
#ammo.empty b { color: var(--red); }
#notice { left: 50%; top: 22%; transform: translateX(-50%); font-family: "Type", monospace; font-size: clamp(13px, 2vmin, 17px); background: var(--slate); padding: 6px 12px; border-radius: 2px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
#callout { left: 50%; bottom: 20%; transform: translateX(-50%); font-family: "Type", monospace; font-size: 13px; color: var(--iw); opacity: 0; transition: opacity .25s; }
.hudbtn { pointer-events: auto; position: absolute; top: 14px; background: var(--slate); border-radius: 3px; font-weight: 700; letter-spacing: .1em; font-size: 14px; height: 40px; min-width: 44px; padding: 0 10px; color: var(--iw); }
#btnPause { right: max(14px, env(safe-area-inset-right)); top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 92px); }
#btnBoard { right: calc(max(14px, env(safe-area-inset-right)) + 54px); top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 92px); }
#keys { left: 50%; bottom: 10px; transform: translateX(-50%); font-family: "Type", monospace; font-size: 12px; opacity: .55; white-space: nowrap; }
body.touch #keys { display: none; }
body:not(.touch) #btnPause, body:not(.touch) #btnBoard, body:not(.touch) #pLog { display: none; }
body.touch #btnBoard { display: none; }
body.touch #hud #feed { top: 62px; left: 50%; right: auto; transform: translateX(-50%); align-items: center; font-size: 12px; max-width: 64vw; }
body.touch #btnPause, body.touch #btnBoard { top: 14px; bottom: auto; }

/* ---------------- TOUCH ---------------- */
#touch { position: fixed; inset: 0; touch-action: none; }
body.touch #hud { z-index: 3; }
#lookZone { position: absolute; inset: 0; }
#stickZone { position: absolute; left: 0; bottom: 0; width: 42%; top: 64px; z-index: 1; }
#stickBase { position: absolute; width: 124px; height: 124px; border-radius: 50%; background: rgba(43,48,54,.3); border: 1.5px solid rgba(241,238,230,.3); left: calc(env(safe-area-inset-left) + 40px); bottom: 96px; opacity: .55; pointer-events: none; transition: opacity .15s; }
#stickBase.live { opacity: .9; transition: none; }
#stickKnob { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: rgba(241,238,230,.5); left: calc(50% - 25px); top: calc(50% - 25px); }
#tCol { position: absolute; right: calc(env(safe-area-inset-right) + 14px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px); display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.tb { position: relative; width: 46px; height: 46px; border-radius: 50%; background: rgba(43,48,54,.5); border: 1.5px solid rgba(241,238,230,.4); color: var(--iw); opacity: .8; font-weight: 700; font-size: 14px; letter-spacing: .05em; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2; touch-action: none; }
.tb svg { width: 60%; height: 60%; }
.tb.on, .tb.sel { background: rgba(241,238,230,.35); }
#tSwap { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: 140px; height: 74px; background: transparent; border: 0; padding: 0; z-index: 2; touch-action: none; }
body.touch #wname::after { content: "  \21C4"; }
#tFM { position: absolute; right: calc(env(safe-area-inset-right) + 74px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px); width: 52px; height: 52px; border-color: var(--red); color: #f3c9c2; }
#tapHint { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); font-family: "Type", monospace; font-size: 12px; color: var(--iw); background: rgba(31,36,42,.7); padding: 6px 10px; border-radius: 2px; white-space: nowrap; pointer-events: none; opacity: 0; }
#tapHint.fade { animation: hintfade 9s ease forwards; }
@keyframes hintfade { 0%, 75% { opacity: .95; } 100% { opacity: 0; } }
@media (orientation: portrait) {
  #tapHint { white-space: normal; width: 80vw; text-align: center; bottom: 34%; }
  #stickZone { width: 50%; top: 45%; }
  #stickBase { left: 24px; bottom: 110px; width: 116px; height: 116px; }
  #btnPause, #btnBoard { top: 14px !important; bottom: auto !important; }
  #top { padding: 5px 10px; gap: 6px; }
  body.touch #hud #feed { top: 118px; }
  #tCol { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 96px); }
}
@media (max-height: 430px) {
  .sheet { padding: 14px 18px; } .sheet h3 { font-size: 20px; } table.log { font-size: 13px; } table.log td { padding: 2px 6px; } table.log th { padding: 2px 6px; }
  .tb { width: 42px; height: 42px; }
  #tCol { gap: 7px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 66px); }
  #tFM { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 66px); right: calc(env(safe-area-inset-right) + 66px); }
  #stickBase { bottom: 70px; } #btnPause, #btnBoard { bottom: auto !important; top: 14px !important; }
  #hp, #ammo { padding: 5px 10px 6px; } #ammo { min-width: 110px; } #hp { min-width: 120px; }
  #hp small, #ammo small { margin-top: 2px; }
  #tSwap { height: 58px; width: 120px; }
}
body.touch #ammo { bottom: max(10px, env(safe-area-inset-bottom)); }

/* ---------------- PAPER ---------------- */
.sheet { background: var(--paper) url(assets/ui/ui_paper.webp) center / cover; color: var(--ink); padding: 28px 32px; border-radius: 2px; box-shadow: 0 18px 50px rgba(0,0,0,.55); max-width: min(760px, 94vw); width: 100%; max-height: 92vh; max-height: 92dvh; overflow: auto; position: relative; animation: slideUp .22s ease-out; }
.sheet.small { max-width: min(460px, 94vw); }
.sheet h3 { margin: 0 0 6px; font-weight: 800; letter-spacing: .06em; font-size: 26px; text-transform: uppercase; }
.sheet .type { color: var(--carbon); font-size: 15px; margin: 6px 0 12px; }
.line { display: block; width: 100%; text-align: left; font-family: "Type", monospace; font-size: 18px; color: var(--ink); padding: 10px 2px; border-bottom: 1px solid rgba(60,88,115,.25); min-height: 46px; }
.line:hover, .line:focus-visible { outline: none; background-image: linear-gradient(transparent 82%, rgba(31,42,54,.75) 82%, rgba(31,42,54,.75) 88%, transparent 88%); background-size: 60% 100%; background-repeat: no-repeat; background-position: 2px 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .line { width: auto; flex: 1; }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
#board, #summary, #pause, #fmPick { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20,22,26,.45); z-index: 20; padding: 10px; }
#board .sheet { background: rgba(43,48,54,.92); color: var(--iw); }
#board .sheet h3 { color: var(--iw); }
#board .line { color: var(--iw); }
table.log { width: 100%; border-collapse: collapse; font-family: "Type", monospace; font-size: 15px; font-variant-numeric: tabular-nums; }
table.log th { text-align: left; font-family: "Grot"; letter-spacing: .12em; font-size: 12px; opacity: .7; padding: 4px 6px; font-weight: 700; }
table.log td { padding: 5px 6px; border-bottom: 1px solid rgba(60,88,115,.22); white-space: nowrap; }
table.log td.n { text-align: right; }
table.log tr.me td { font-weight: 700; }
table.log .tw { color: var(--orange); } table.log .tt { color: #a8831c; }
#board table.log .tt { color: var(--mustard); }
table.log .tick { color: var(--red); font-family: "Grot"; font-weight: 800; }
.stampimg { position: absolute; right: 22px; top: 18px; width: 150px; transform: rotate(-8deg); opacity: .9; mix-blend-mode: multiply; }
#summary .sheet { padding-top: 32px; }
#sumBody h4 { margin: 14px 0 2px; letter-spacing: .14em; font-size: 14px; }
#fmMap { width: min(420px, 80vw, 60vh); height: min(420px, 80vw, 60vh); display: block; margin: 0 auto 10px; background: #2B3036; border-radius: 3px; touch-action: none; }

/* ---------------- DEATH ---------------- */
#death { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 6; pointer-events: none; }
.strip { background: url(assets/ui/ui_strip.webp) center / 100% 100% no-repeat; color: var(--ink); padding: 16px 44px 18px; min-width: min(520px, 92vw); text-align: center; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.strip p { margin: 2px 0; font-family: "Type", monospace; font-size: 17px; color: var(--carbon); }
.strip p:first-child { font-family: "Grot"; font-weight: 800; letter-spacing: .08em; color: var(--ink); font-size: 20px; }
.clsrow { display: flex; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: center; }
.clsrow button { background: var(--slate); color: var(--iw); padding: 9px 14px; border-radius: 3px; font-weight: 700; letter-spacing: .08em; font-size: 15px; min-height: 44px; border-bottom: 2px solid transparent; }
.clsrow button.sel { border-bottom-color: var(--iw); }

/* ---------------- MENU ---------------- */
#menu { position: fixed; inset: 0; z-index: 30; overflow: hidden; background: #1b1a18; }
#desk { position: absolute; inset: -2%; background: url(assets/ui/ui_desk.webp) 60% 40% / cover no-repeat; filter: saturate(.92); }
#logo { position: absolute; right: 4vw; top: 5vh; width: clamp(150px, 22vw, 300px); transform: rotate(-4deg); mix-blend-mode: multiply; opacity: .95; filter: drop-shadow(0 0 0 transparent); z-index: 2; }
#clip { position: absolute; left: 3vw; top: 4vh; bottom: 3vh; aspect-ratio: 0.74; max-width: 94vw; background: url(assets/ui/ui_clipboard.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 16px 26px rgba(0,0,0,.55)); z-index: 3; }
#paper { position: absolute; left: 10%; right: 10%; top: 15%; bottom: 6%; color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
#paper .head { display: flex; justify-content: space-between; font-weight: 800; letter-spacing: .1em; font-size: clamp(16px, 2.6vh, 24px); border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
#paper .head span:last-child { font-family: "Type"; font-weight: 400; font-size: .7em; letter-spacing: 0; align-self: flex-end; color: var(--carbon); }
#paper .sub { color: var(--carbon); font-size: clamp(12px, 1.8vh, 15px); margin: 4px 0 6px; }
#roster { display: flex; flex-direction: column; }
#roster .line { font-size: clamp(14px, 2.4vh, 20px); padding: clamp(4px, 1vh, 9px) 2px; min-height: 40px; display: flex; gap: 10px; }
#roster .line .no { color: var(--carbon); width: 2.2ch; }
#roster .line.sel { background-image: linear-gradient(transparent 82%, rgba(31,42,54,.8) 82%, rgba(31,42,54,.8) 88%, transparent 88%); background-size: 70% 100%; background-repeat: no-repeat; background-position: 2.6ch 0; }
#panel { flex: 1; overflow: auto; margin-top: 8px; font-family: "Type", monospace; font-size: clamp(13px, 1.9vh, 16px); color: var(--carbon); padding-right: 4px; }
#panel h4 { font-family: "Grot"; color: var(--ink); letter-spacing: .12em; margin: 8px 0 4px; font-size: clamp(14px, 2vh, 17px); }
#panel .opt { display: inline-block; padding: 7px 10px; margin: 2px 4px 2px 0; border: 1px solid rgba(60,88,115,.35); color: var(--ink); font-family: "Type"; font-size: inherit; min-height: 40px; border-radius: 2px; }
#panel .opt.sel { border-color: var(--ink); border-width: 2px; font-weight: 700; }
#panel .go { display: inline-block; margin-top: 8px; padding: 9px 16px; border: 2px solid var(--red); color: var(--red); font-family: "Grot"; font-weight: 800; letter-spacing: .12em; font-size: clamp(15px, 2.2vh, 19px); min-height: 44px; }
#panel .wcard { display: flex; gap: 10px; align-items: center; }
#panel .wcard img { width: 44%; border-radius: 2px; }
#panel .portrait { width: 30%; float: right; margin: 0 0 6px 8px; transform: rotate(2deg); border: 4px solid #f4f1ea; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
#panel input[type=range] { width: 100%; accent-color: var(--ink); }
#panel a { color: var(--ink); }
#onduty { position: absolute; left: 50%; top: 50%; width: min(520px, 70vw); transform: translate(-50%, -50%) rotate(-7deg) scale(2.4); opacity: 0; pointer-events: none; mix-blend-mode: multiply; z-index: 5; }
#onduty.hit { animation: stamp .42s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(2.4); } 55% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(.96); } 75% { transform: translate(-50%, -50%) rotate(-7deg) scale(1.03); } 100% { opacity: .95; transform: translate(-50%, -50%) rotate(-7deg) scale(1); } }
#menu.push #desk { transition: transform .5s ease-in, opacity .5s; transform: scale(1.25) translate(-6%, 2%); opacity: 0; }
@media (orientation: portrait), (max-width: 720px) {
  #desk { filter: blur(3px) brightness(.6); }
  #clip { left: 50%; transform: translateX(-50%); top: 9vh; bottom: 2vh; width: auto; aspect-ratio: auto; width: min(94vw, 80vh * 0.74); }
  #logo { right: 50%; transform: translateX(50%) rotate(-4deg); top: 1vh; width: clamp(110px, 32vw, 180px); }
  #paper { top: 18%; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #clip { top: 2vh; bottom: 2vh; left: 2vw; aspect-ratio: auto; width: min(78vw, 760px); transform: none; }
  #paper { top: 15%; bottom: 5%; left: 7%; right: 7%; display: grid; grid-template-columns: 1fr 1.25fr; grid-template-rows: auto auto 1fr; column-gap: 16px; }
  #paper .head, #paper .sub { grid-column: 1 / 3; }
  #roster { grid-column: 1; grid-row: 3; overflow: auto; }
  #panel { grid-column: 2; grid-row: 3; margin-top: 0; }
  #roster .line { min-height: 34px; padding: 3px 2px; }
  #logo { right: 3vw; left: auto; transform: rotate(-4deg); width: 22vw; top: 4vh; }
  #desk { filter: none; }
}

/* ---------------- LOADING ---------------- */
#loading { position: fixed; inset: 0; z-index: 25; background: var(--peat); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7vh; }
#loadImg { position: absolute; inset: 0; background: center / cover no-repeat; animation: drift 14s linear infinite alternate; }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.12) translateX(-1.5%); } }
#loadStrip { position: relative; max-width: 92vw; }
.prog { height: 3px; background: rgba(60,88,115,.25); margin: 8px auto 0; width: 70%; }
.prog i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }
#toast { position: fixed; left: 50%; bottom: 12vh; transform: translateX(-50%); background: var(--slate); color: var(--iw); font-family: "Type", monospace; font-size: 15px; padding: 8px 14px; border-radius: 2px; opacity: 0; transition: opacity .2s; z-index: 50; pointer-events: none; max-width: 90vw; text-align: center; }
#panel .go { margin: 4px 0 8px; }
@media (orientation: portrait) and (max-height: 900px) { #roster .line { min-height: 34px; padding: 4px 2px; font-size: 16px; } }

#hud.dead #keys { display: none; }

#panel .optrow { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
#panel .optrow .opt { margin: 0; padding: 5px 8px; min-height: 36px; }
#panel .go { width: 100%; text-align: center; }

@media (orientation: portrait) { #clip { top: 7vh; } #panel .optrow .opt { padding: 3px 6px; min-height: 32px; font-size: 13px; } #mapNote { display: none; } #panel h4 { margin: 4px 0 2px; } }