/* Comic-Stil: dicke schwarze Ränder, versetzte Schatten, kräftige Farben. Keine externen Schriften. */
:root {
  --ink: #161616;
  --paper: #fff8e7;
  --accent: #ffd23f;
  --accent2: #ff6b4a;
  --ok: #6be36b;
  --font: "Arial Black", "Helvetica Neue", Arial, system-ui, sans-serif;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1b24; font-family: var(--font); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* Bildschirme */
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; z-index: 20;
  background: radial-gradient(circle at 30% 20%, #3a3350, #15121f) center / cover no-repeat; overflow-y: auto; touch-action: pan-y; }
.screen.show { display: flex; }
.panel { background: var(--paper); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink); padding: 22px; width: min(420px, 100%); text-align: center; margin: auto; }
.panel.wide { width: min(860px, 100%); }
.logo { font-size: clamp(28px, 9vw, 46px); white-space: nowrap; margin: 0; color: var(--accent); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; letter-spacing: 1px; transform: rotate(-3deg); text-shadow: 4px 4px 0 var(--ink); }
h2 { margin: 0 0 12px; font-size: 28px; }
h3 { margin: 16px 0 8px; font-size: 18px; }
.sub, .hint { font-family: system-ui, sans-serif; font-weight: 700; opacity: 0.8; }
.error { color: #c0261a; font-family: system-ui, sans-serif; font-weight: 700; min-height: 1.2em; }

input, select { font: 700 18px system-ui, sans-serif; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 12px; width: 100%; margin: 10px 0; background: #fff; }
button { font-family: var(--font); cursor: pointer; border: 3px solid var(--ink); border-radius: 14px; background: var(--accent); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
button.big { font-size: 24px; padding: 14px 28px; width: 100%; margin-top: 8px; }
button.small { font-size: 14px; padding: 8px 12px; }
button:disabled { background: #ccc; box-shadow: none; opacity: 0.6; }

#playerList { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#playerList li { border: 3px solid var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 15px; background: #fff; display: flex; gap: 6px; align-items: center; }
#playerList .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
#playerList .off { opacity: 0.45; }

#worldGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.world { border: 3px solid var(--ink); border-radius: 14px; padding: 10px; background: #fff center / cover no-repeat; text-align: left; position: relative; min-height: 96px; cursor: pointer; }
.world .wname { font-size: 17px; }
.world .wtag { font: 600 13px system-ui, sans-serif; margin-top: 4px; }
.world .wmeta { font: 700 12px system-ui, sans-serif; margin-top: 6px; opacity: 0.75; }
.world.sel { background-color: var(--accent); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.world.locked { cursor: default; }
.world.hasimg .wname, .world.hasimg .wtag, .world.hasimg .wmeta { background: rgba(255, 248, 231, 0.88); border-radius: 6px; padding: 2px 6px; display: inline-block; }

.settings { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; font: 700 14px system-ui, sans-serif; }
.settings label { display: flex; align-items: center; gap: 6px; }
.settings select, .settings input { width: auto; margin: 0; padding: 6px 8px; font-size: 14px; }

.roompick { display: flex; gap: 8px; justify-content: center; margin: 4px 0 6px; }
.roompick button { flex: 1; font-size: 15px; padding: 10px 6px; line-height: 1.25; background: #fff; }
.roompick button small { display: block; font: 700 12px system-ui, sans-serif; opacity: 0.75; }
.roompick button.sel { background: var(--accent); transform: translate(-2px, -2px); }
button.danger { background: var(--accent2); }
#pauseMenu { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 20, 0.55); pointer-events: auto; padding: 16px; }
#pauseMenu.hidden { display: none; }
.pausebtn { position: fixed; z-index: 25; top: 12px; left: 50%; transform: translateX(calc(-50% - 120px)); width: 44px; height: 44px; padding: 0; font-size: 20px; pointer-events: auto; opacity: 0.85; }
#rankingList { text-align: left; font: 700 18px system-ui, sans-serif; padding-left: 28px; }
#rankingList li { margin: 6px 0; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#topLeft { position: absolute; top: 12px; left: calc(12px + var(--safe-l)); }
#lives { font-size: 26px; letter-spacing: 2px; -webkit-text-stroke: 1px var(--ink); }
#hpBar { width: 200px; height: 22px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; overflow: hidden; position: relative; margin-top: 4px; }
#hpFill { height: 100%; width: 100%; background: var(--ok); transition: width 0.15s, background 0.3s; }
#hpText { position: absolute; inset: 0; text-align: center; font-size: 13px; line-height: 16px; }
#topRight { position: absolute; top: 12px; right: calc(12px + var(--safe-r)); text-align: right; }
#kills { font-size: 20px; color: #fff; -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
#killfeed { list-style: none; margin: 6px 0 0; padding: 0; font: 700 14px system-ui, sans-serif; }
#killfeed li { background: rgba(255, 248, 231, 0.9); border: 2px solid var(--ink); border-radius: 8px; padding: 3px 8px; margin-top: 4px; }
#weaponInfo { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; text-shadow: 2px 2px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); }
#weaponIcon { display: block; height: 30px; margin: 0 auto 2px; filter: drop-shadow(2px 2px 0 var(--ink)); }
#weaponName { font-size: 18px; }
/* Waffe in der Hand (1st Person): Bild unten rechts, kleiner Rückstoss beim Schiessen */
#fpWeapon { position: absolute; right: 0; bottom: 0; height: min(60vh, 46vw); width: auto; transition: transform 0.12s ease-out; }
#fpWeapon.kick { transform: translate(5px, 9px); transition: none; }
#ammo { font-size: 30px; }
#ammo.low { color: var(--accent2); }
#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
#crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }
#crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; transition: opacity 0.12s; }
#hitmarker::before, #hitmarker::after { content: ""; position: absolute; background: var(--accent2); }
#hitmarker::before { left: 16px; top: 0; width: 3px; height: 34px; }
#hitmarker::after { top: 16px; left: 0; height: 3px; width: 34px; }
#hitmarker.on { opacity: 1; transition: none; }
#center { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center; font-size: clamp(22px, 5vw, 44px); color: var(--accent); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); white-space: pre-line; width: 90%; }
#center small { display: block; font-size: 0.5em; color: #fff; }
#hurtFlash { position: absolute; inset: 0; box-shadow: inset 0 0 120px 30px rgba(220, 30, 30, 0.7); opacity: 0; transition: opacity 0.35s; }
#hurtFlash.on { opacity: 1; transition: none; }

#lockHint { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); background: rgba(255, 248, 231, 0.92); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 14px; font: 700 15px system-ui, sans-serif; text-align: center; }

/* Touch-Steuerung */
#touch { position: fixed; inset: 0; z-index: 11; }
#joyZone { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; }
#lookZone { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; }
#joyBase { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 3px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: rgba(0, 0, 0, 0.18); display: none; }
#joyBase.on { display: block; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); border: 3px solid var(--ink); transform: translate(-50%, -50%); }
.tbtn { position: absolute; width: 64px; height: 64px; border-radius: 50%; font-size: 26px; padding: 0; opacity: 0.85; box-shadow: 3px 3px 0 var(--ink); background: #fff; }
.tbtn.on { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); background: var(--accent); }
.tbtn.fire { width: 86px; height: 86px; right: calc(28px + var(--safe-r)); bottom: calc(40px + var(--safe-b)); background: var(--accent2); font-size: 34px; }
.tbtn.jump { right: calc(132px + var(--safe-r)); bottom: calc(26px + var(--safe-b)); }
.tbtn.reload { right: calc(122px + var(--safe-r)); bottom: calc(112px + var(--safe-b)); }
.tbtn.crouch { right: calc(210px + var(--safe-r)); bottom: calc(40px + var(--safe-b)); }
.tbtn.view { right: calc(28px + var(--safe-r)); bottom: calc(150px + var(--safe-b)); width: 52px; height: 52px; font-size: 22px; }
.tbtn.next { left: 50%; bottom: calc(80px + var(--safe-b)); transform: translateX(-50%); }

#rotateHint { display: none; position: fixed; inset: 0; z-index: 50; background: #15121f; color: var(--accent); font-size: 24px; align-items: center; justify-content: center; text-align: center; padding: 30px; -webkit-text-stroke: 1px var(--ink); }
@media (pointer: coarse) and (orientation: portrait) {
  body.ingame #rotateHint { display: flex; }
}
.pausebtn { display: flex; align-items: center; justify-content: center; gap: 5px; }
.pausebtn i { display: block; width: 5px; height: 16px; background: var(--ink); border-radius: 2px; }
.pausebtn.hidden { display: none; }

/* Coarse encounter cues, separate from the crosshair and touch controls. */
#encounterHud { position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(48vw,480px);text-align:center;pointer-events:none;font-size:13px;line-height:1.5;text-shadow:0 1px 4px #000; }
#zoneStatus { color:#f1c5ff; }
#activityHint { color:#fff3d3;font-weight:700; }
#supplyHint { color:#ffdb83; }
#shotDirection { position:absolute;left:50%;top:50%;width:180px;height:180px;border:7px solid transparent;border-top-color:#ffcf8a;border-radius:50%;pointer-events:none;opacity:0.8; }
@media (max-width:700px) { #encounterHud {top:8px;width:45vw;font-size:11px;} #shotDirection{width:130px;height:130px;border-width:5px;} }

#lootGuide { position:absolute; left:14px; top:120px; display:grid; gap:6px; pointer-events:none; font-size:13px; font-weight:700; color:#fff; text-shadow:0 1px 3px #000; }
#lootGuide div { padding:7px 10px; border-radius:7px; background:rgba(20,26,42,.8); border-left:3px solid #ffd66b; }
#lootGuide div:last-child { border-color:#72bdff; }


/* v13: separate status column, navigation and pause; centre and touch controls stay free. */
:root { --safe-t: env(safe-area-inset-top, 0px); }
#statusStack { position:absolute; top:calc(14px + var(--safe-t)); left:calc(14px + var(--safe-l)); width:210px; display:flex; flex-direction:column; gap:12px; }
#statusStack #topLeft, #statusStack #weaponInfo, #statusStack #lootGuide { position:static; inset:auto; transform:none; width:100%; text-align:left; }
#statusStack #weaponInfo { background:rgba(18,24,35,.7); border-radius:9px; padding:8px 10px; -webkit-text-stroke:0; text-shadow:0 1px 3px #000; }
#weaponIcon { display:none; }
#weaponName { font:600 13px/1.3 system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ammo { font:800 25px/1.2 system-ui,sans-serif; }
#lootGuide { gap:5px; font:600 12px/1.3 system-ui,sans-serif; }
#lootGuide div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:7px 8px; }
#hpBar { width:100%; }
#encounterHud { top:calc(14px + var(--safe-t)); width:min(380px,calc(100% - 500px - var(--safe-l) - var(--safe-r))); color:white; font:600 13px/1.5 system-ui,sans-serif; -webkit-text-stroke:0; }
#compassHeading { font-size:12px; letter-spacing:1px; }
#zoneStatus { background:rgba(28,18,40,.75); padding:4px 9px; border-radius:8px; margin:4px auto 0; width:fit-content; max-width:100%; }
#activityHint, #supplyHint { margin-top:5px; background:rgba(18,24,35,.7); padding:4px 8px; border-radius:7px; }
#activityHint:empty, #supplyHint:empty { display:none; }
#topRight { top:calc(16px + var(--safe-t)); right:calc(76px + var(--safe-r)); width:150px; }
#killfeed { font:600 12px/1.3 system-ui,sans-serif; }
#killfeed li { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pausebtn { top:calc(12px + var(--safe-t)); left:auto; right:calc(12px + var(--safe-r)); transform:none; }
#lockHint { top:auto; bottom:calc(18px + var(--safe-b)); font-size:13px; }
#center { width:min(600px,70%); top:36%; font-size:clamp(22px,3vw,36px); }

@media (pointer:coarse), (max-width:900px), (max-height:500px) {
  #statusStack { top:calc(8px + var(--safe-t)); left:calc(8px + var(--safe-l)); width:148px; gap:6px; }
  #lives { font-size:17px; letter-spacing:0; line-height:21px; -webkit-text-stroke:0; }
  #hpBar { height:15px; margin-top:2px; border-width:2px; }
  #hpText { font:600 10px/11px system-ui,sans-serif; }
  #statusStack #weaponInfo { padding:5px 7px; }
  #weaponName { font-size:11px; }
  #ammo { font-size:19px; }
  #lootGuide { font-size:10px; gap:0; }
  #lootGuide div { padding:5px 6px; }
  #encounterHud { top:calc(8px + var(--safe-t)); width:min(290px,calc(100% - 340px - var(--safe-l) - var(--safe-r))); font-size:11px; line-height:1.3; }
  #compassHeading { font-size:10px; }
  #zoneStatus { margin-top:3px; padding:4px 6px; }
  #activityHint, #supplyHint { font-size:10px; padding:4px; }
  #activityHint:not(:empty) + #supplyHint { display:none; }
  #topRight { top:calc(12px + var(--safe-t)); right:calc(62px + var(--safe-r)); width:85px; }
  #kills { font:700 12px/1.3 system-ui,sans-serif; -webkit-text-stroke:0; text-shadow:0 1px 3px #000; }
  #killfeed { display:none; }
  .pausebtn { width:44px; height:44px; top:calc(6px + var(--safe-t)); right:calc(8px + var(--safe-r)); }
  #center { font-size:22px; -webkit-text-stroke:1px var(--ink); width:60%; }
  #shotDirection { width:110px; height:110px; border-width:4px; }
}
@media (max-width:500px) {
  #encounterHud { left:auto; right:calc(8px + var(--safe-r)); transform:none; top:calc(62px + var(--safe-t)); width:calc(100% - 180px - var(--safe-l) - var(--safe-r)); }
}

#lootGuide div[data-kind='ammo'] { border-color:#ffd66b; }
#lootGuide div[data-kind='weapon'] { border-color:#72bdff; }
/* Local damage remains at the edges, leaving aiming unobstructed. */
#hurtFlash { box-shadow:inset 0 0 60px 10px rgba(220,30,30,.3); }

/* v18: bounded size preserves spacing to jump/reload/view on small screens. */
.tbtn.fire { width: var(--fire-size,86px); height: var(--fire-size,86px); }
.touch-settings { margin-top: 12px; }
.touch-settings summary { cursor:pointer; font-weight:700; }
.touch-settings[hidden] { display:none; }