@font-face { font-family: "Press Start 2P"; src: url(fonts/pressstart2p.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Rajdhani"; font-weight: 500; src: url(fonts/rajdhani-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Rajdhani"; font-weight: 700; src: url(fonts/rajdhani-700.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #1a0f06; --panel: #2b1a0d; --panel2: #3c2512; --line: #7a4f26;
  --text: #fff3dc; --muted: #cfae85; --accent: #ffcc4d; --accent2: #ff8a2c; --cyan: #58e6ff;
  --good: #5ce07f; --bad: #ff5a4a;
  --font-arcade: "Press Start 2P", "Courier New", ui-monospace, monospace;
  --font-ui: "Rajdhani", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 18px; font-weight: 700; touch-action: none; user-select: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; background: #c8a964; display: block; }
.hidden { display: none !important; }

/* ---------- Bildschirme ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,160,50,.22), transparent 60%), linear-gradient(#2a1608, #120a04); z-index: 20; }
.screen.overlay { background: rgba(14,7,2,.78); backdrop-filter: blur(2px); }
.panel { width: min(460px, 100%); background: linear-gradient(var(--panel2), var(--panel)); border: 3px solid var(--line); border-radius: 14px; padding: 22px 22px 18px;
  box-shadow: 0 0 0 3px #120a04, 0 18px 50px rgba(0,0,0,.6); margin: auto; }
.panel.wide { width: min(640px, 100%); }
h1.logo { font-family: var(--font-arcade); font-size: clamp(26px, 6vw, 40px); line-height: 1.25; text-align: center; color: var(--accent);
  text-shadow: 3px 3px 0 #a14a10, 6px 6px 0 #120a04; letter-spacing: 2px; margin-bottom: 10px; }
h2 { font-family: var(--font-arcade); font-size: 16px; color: var(--accent); text-align: center; margin-bottom: 14px; line-height: 1.5; }
.tag, .hint { color: var(--muted); text-align: center; font-size: 17px; margin-bottom: 12px; line-height: 1.3; font-weight: 500; }
.ver { color: #8a6a45; text-align: center; font-size: 13px; margin-top: 10px; font-weight: 500; }
.label { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 12px 0 5px; }
.field { display: block; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
input { width: 100%; background: #160d06; border: 2px solid var(--line); color: var(--text); font: inherit; font-size: 20px; padding: 9px 12px; border-radius: 8px; margin-top: 4px; user-select: text; }
input:focus { outline: none; border-color: var(--accent); }
.row { display: flex; gap: 10px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.row.small .btn { font-size: 15px; padding: 8px 12px; }
.row input { margin: 0; text-align: center; letter-spacing: 6px; font-family: var(--font-arcade); font-size: 16px; width: 150px; }
.or { text-align: center; color: var(--muted); margin: 12px 0 0; }
.err { color: var(--bad); text-align: center; min-height: 22px; margin-top: 8px; font-weight: 500; }

.btn { font: inherit; font-size: 19px; color: var(--text); background: #4a2e16; border: 2px solid var(--line); border-radius: 9px; padding: 10px 20px; cursor: pointer; transition: transform .08s, background .12s; }
.btn:hover, .btn:focus-visible { background: #603c1c; border-color: var(--accent); outline: none; }
.btn:active { transform: translateY(2px); }
.btn.primary { background: linear-gradient(#ffb23c, #e0701a); color: #2a1304; border-color: #ffe08a; font-size: 21px; padding: 12px 28px; box-shadow: 0 4px 0 #8a3f0a; }
.btn.primary:hover, .btn.primary:focus-visible { background: linear-gradient(#ffc45c, #f08428); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font: inherit; font-size: 17px; color: var(--muted); background: #20120a; border: 2px solid #4a2e16; border-radius: 8px; padding: 6px 12px; cursor: pointer; flex: 1 1 auto; }
.seg button.on { color: #2a1304; background: var(--accent); border-color: #ffe08a; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.seg button:focus-visible { outline: 2px solid var(--cyan); }
.seg.big button { font-size: 20px; padding: 10px 8px; }
body.padnav .btn:focus, body.padnav .seg button:focus { outline: 3px solid var(--cyan); }
.cfg .desc { color: var(--muted); font-size: 15px; font-weight: 500; margin-top: 4px; }
.cfg[data-locked="1"] .seg button { pointer-events: none; opacity: .75; }

/* ---------- Lobby ---------- */
.code { font-family: var(--font-arcade); font-size: 30px; text-align: center; color: var(--cyan); letter-spacing: 8px; margin-bottom: 8px; }
.lplayers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0; }
.lp { border: 2px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #20120a; min-height: 56px; display: flex; flex-direction: column; justify-content: center; }
.lp b { font-size: 20px; }
.lp small { color: var(--muted); font-weight: 500; font-size: 14px; }
.lp.empty { opacity: .45; border-style: dashed; }
.lp .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ---------- Ergebnis ---------- */
.board { display: grid; gap: 6px; margin: 8px 0; max-height: 46vh; overflow: auto; }
.brow { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; background: #20120a; border: 2px solid #4a2e16; border-radius: 8px; padding: 7px 12px; }
.brow.first { border-color: var(--accent); background: #3a240f; }
.brow .rk { font-family: var(--font-arcade); font-size: 12px; color: var(--muted); }
.brow .sc { font-family: var(--font-arcade); font-size: 14px; color: var(--accent); }
.brow .sub { color: var(--muted); font-size: 14px; font-weight: 500; }
.helpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.helpgrid > div { background: #20120a; border: 2px solid #4a2e16; border-radius: 8px; padding: 8px 12px; }
.helpgrid b { color: var(--accent); }
.helpgrid p { font-size: 16px; font-weight: 500; color: #e8d5b4; line-height: 1.3; margin-top: 3px; }
@media (max-width: 560px) { .helpgrid { grid-template-columns: 1fr; } .lplayers { grid-template-columns: 1fr; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud-top { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; align-items: center; background: rgba(20,10,4,.72); border: 2px solid var(--line); border-radius: 10px; padding: 6px 16px; }
#hud-time { font-family: var(--font-arcade); font-size: 16px; color: var(--accent); }
#hud-time.low { color: var(--bad); animation: blink .6s infinite; }
@keyframes blink { 50% { opacity: .4; } }
#hud-left { color: var(--muted); font-size: 16px; }
#hud-players { position: absolute; inset: 0; }
.pcard { position: absolute; background: rgba(20,10,4,.78); border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px 8px; width: 226px; }
.pcard.c0 { left: 8px; top: 8px; } .pcard.c1 { right: 8px; top: 8px; } .pcard.c2 { left: 8px; bottom: 8px; } .pcard.c3 { right: 8px; bottom: 8px; }
.pcard.solo { top: 8px; left: 8px; }
.pcard .ph { display: flex; justify-content: space-between; align-items: baseline; }
.pcard .pn { font-size: 16px; } .pcard .ps { font-family: var(--font-arcade); font-size: 12px; color: var(--accent); }
.bar { height: 9px; background: #120a04; border: 1px solid #000; border-radius: 3px; overflow: hidden; margin-top: 4px; position: relative; }
.bar i { display: block; height: 100%; }
.bar.hp i { background: linear-gradient(#ff7a6a, #d8382a); } .bar.wa i { background: linear-gradient(#7fd6ff, #2d8fd6); } .bar.ba i { background: linear-gradient(#b5ff7d, #4fbf2c); } .bar.bo i { background: linear-gradient(#8fd0ff, #3a86d6); opacity: .8; }
.bar.cd i { background: #ffcc4d; }
.tools { display: flex; gap: 5px; margin-top: 6px; }
.tool { flex: 1; height: 38px; border: 2px solid #4a2e16; border-radius: 7px; background: #20120a; display: flex; align-items: center; justify-content: center; position: relative; }
.tool img { width: 28px; height: 28px; image-rendering: pixelated; opacity: .6; }
.tool.on { border-color: var(--accent); background: #4a2e16; } .tool.on img { opacity: 1; }
.tool small { position: absolute; right: 3px; bottom: 0; font-size: 11px; color: var(--muted); }
.pcard .stat { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 3px; }
.pcard.dead { filter: grayscale(.8); }
#hud-msg { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); text-align: center; pointer-events: none; }
#hud-msg div { background: rgba(20,10,4,.8); border: 2px solid var(--accent); border-radius: 8px; padding: 5px 14px; margin-top: 5px; font-size: 18px; animation: fade 3s forwards; }
@keyframes fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
#inv-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(24,12,5,.94); border: 3px solid var(--accent); border-radius: 14px; padding: 14px 18px; min-width: 300px; max-width: 94vw; pointer-events: auto; }
#inv-panel h3 { font-family: var(--font-arcade); font-size: 12px; color: var(--accent); text-align: center; margin-bottom: 10px; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot { aspect-ratio: 1; border: 2px solid #4a2e16; border-radius: 8px; background: #20120a; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-width: 62px; }
.slot img { width: 30px; height: 30px; } .slot b { position: absolute; right: 4px; top: 1px; font-size: 14px; } .slot small { font-size: 11px; color: var(--muted); font-weight: 500; }
.slot.empty { opacity: .35; }
.inv-sum { text-align: center; margin-top: 10px; color: var(--accent); font-family: var(--font-arcade); font-size: 11px; }

/* Touch-Knöpfe */
#touch-ui { display: none; }
body.touch.playing #touch-ui { display: block; }
#touch-ui button { position: absolute; pointer-events: auto; font: inherit; color: #fff; border: 3px solid rgba(255,225,140,.8); background: rgba(70,40,16,.7); border-radius: 50%; touch-action: none; }
#t-act { right: calc(18px + env(safe-area-inset-right)); bottom: calc(26px + env(safe-area-inset-bottom)); width: 92px; height: 92px; font-size: 15px; background: rgba(224,112,26,.8) !important; }
#t-inv { right: calc(120px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 46px; height: 46px; font-size: 22px; }
#t-tools button { right: calc(22px + env(safe-area-inset-right)); width: 56px; height: 56px; background-size: 36px; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; }
#t-tool0 { bottom: calc(135px + env(safe-area-inset-bottom)); } #t-tool1 { bottom: calc(198px + env(safe-area-inset-bottom)); } #t-tool2 { bottom: calc(261px + env(safe-area-inset-bottom)); }
#t-tools button.on { border-color: var(--cyan); background-color: rgba(30,90,120,.8); }
#pad-hint { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 14px; color: var(--muted); background: rgba(20,10,4,.6); padding: 2px 10px; border-radius: 6px; display: none; }
body.padplay #pad-hint { display: block; }
#pad-hint b { color: var(--accent); }
body.touch .pcard { transform: scale(.8); transform-origin: top left; }
body.touch #pad-hint { display: none; }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: #3a240f; border: 2px solid var(--accent); border-radius: 10px; padding: 8px 18px; z-index: 60; }
@media (max-height: 520px) { .panel { padding: 12px; } h1.logo { font-size: 22px; margin-bottom: 4px; } .tag { display: none; } }

/* ---------- Konto & Online-Lobby ---------- */
.acctbar { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: #20120a; border: 2px solid #4a2e16; border-radius: 10px; padding: 7px 10px; margin-bottom: 10px; flex-wrap: wrap; }
.acctbar .who { font-size: 18px; } .acctbar .who small { color: var(--muted); font-weight: 500; font-size: 14px; display: block; }
.acctbar .btn { font-size: 15px; padding: 6px 12px; }
.panel .field { margin-top: 10px; } .panel .field.hidden { display: none; }
.ok { color: var(--good); text-align: center; min-height: 22px; margin-top: 8px; font-weight: 500; }
#ac-extra .btn { font-size: 16px; }
.olist { display: grid; gap: 6px; margin-top: 4px; max-height: 30vh; overflow: auto; }
.orow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: #20120a; border: 2px solid #4a2e16; border-radius: 8px; padding: 6px 10px; }
.orow b { font-size: 17px; } .orow small { color: var(--muted); font-weight: 500; font-size: 14px; display: block; }
.orow .btn { font-size: 14px; padding: 5px 10px; }
.orow.room { border-color: var(--line); }
.dotl { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--good); margin-right: 6px; }
.invite { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 70; background: #3a240f; border: 2px solid var(--cyan); border-radius: 12px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.invite .btn { font-size: 15px; padding: 6px 12px; }
.pcard .tools { pointer-events: auto; cursor: pointer; }
.pcard .tool:hover { border-color: var(--cyan); }

/* ---------- Splash ---------- */
#splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #1b1647; cursor: pointer; transition: opacity .6s, transform .6s; }
#splash.out { opacity: 0; transform: scale(1.05); pointer-events: none; }
#splash-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.splash-title { position: relative; z-index: 1; margin: -8vh 0 0; text-align: center; line-height: 1.15; font-family: var(--font-arcade); font-weight: 400; padding: 0 8px; }
.splash-row { display: block; white-space: nowrap; }
.splash-row.r1 { font-size: clamp(24px, 9vw, 92px); letter-spacing: 3px; }
.splash-row.r2 { font-size: clamp(28px, 11.5vw, 118px); letter-spacing: 5px; margin-top: .2em; }
.splash-row i { font-style: normal; display: inline-block; color: #ffd23c; -webkit-text-stroke: 5px #4a1c08; paint-order: stroke fill; text-shadow: 4px 5px 0 #4a1c08, 0 0 26px rgba(255,170,40,.5);
  opacity: 0; transform: translateY(-60px) scale(1.3); animation: letter-in .5s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(.3s + var(--i) * .09s); }
.splash-row.r2 i { color: #fff0b0; }
@keyframes letter-in { to { opacity: 1; transform: none; } }
.splash-title.pulse { animation: title-pulse 2.4s ease-in-out infinite; }
@keyframes title-pulse { 50% { transform: scale(1.03); filter: brightness(1.12); } }
.splash-tag { position: relative; z-index: 1; margin: 24px 0 0; font-family: var(--font-arcade); font-size: clamp(9px, 2.3vw, 14px); color: #fff; letter-spacing: 2px; text-shadow: 2px 2px 0 #3a1608; opacity: 0; transition: opacity .6s; text-align: center; padding: 0 12px; }
.splash-tag.show { opacity: 1; }
.splash-start { position: absolute; z-index: 1; left: 0; right: 0; bottom: max(8vh, 40px); text-align: center; padding: 0 12px; opacity: 0; transition: opacity .6s; }
.splash-start.show { opacity: 1; }
.splash-start b { display: block; font-family: var(--font-arcade); font-weight: 400; font-size: clamp(16px, 3.6vw, 26px); color: #fff; text-shadow: 3px 3px 0 #3a1608; animation: blink 1.2s steps(2) infinite; }
.splash-start small { display: block; margin-top: 12px; font-size: clamp(14px, 3vw, 18px); color: #ffe9b8; text-shadow: 1px 1px 0 #3a1608; }
@media (prefers-reduced-motion: reduce) { .splash-row i { animation: none; opacity: 1; transform: none; } .splash-title.pulse, .splash-start b { animation: none; } #splash { transition-duration: .01s; } }

/* ---------- Neuigkeiten ---------- */
.news-panel { max-height: 94vh; overflow: auto; }
.alpha-tag { font-family: var(--font-arcade); font-size: 10px; background: linear-gradient(#ffe14d, #ff9e2c); color: #1a0b00; padding: 3px 7px; border-radius: 4px; margin-right: 6px; vertical-align: middle; }
.news-list { display: grid; gap: 10px; margin: 6px 0 12px; }
.news-card { background: #20120a; border: 2px solid #4a2e16; border-radius: 10px; padding: 10px 14px; }
.news-card.plan { border-color: var(--line); background: #2a180b; }
.news-card h3 { font-family: var(--font-arcade); font-size: 12px; color: var(--accent); margin-bottom: 8px; line-height: 1.5; }
.news-card p { font-size: 17px; font-weight: 500; color: #ecd9b8; line-height: 1.35; margin-top: 6px; }
.news-card b { color: var(--text); }
.news-steps, .news-plan { list-style: none; display: grid; gap: 8px; margin-top: 8px; }
.news-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; font-size: 17px; font-weight: 500; color: #ecd9b8; }
.news-steps .ico { width: 44px; height: 44px; border: 2px solid #4a2e16; border-radius: 8px; background: #160d06 center / 32px no-repeat; image-rendering: pixelated; }
.news-plan li { position: relative; padding-left: 22px; font-size: 17px; font-weight: 500; color: #ecd9b8; line-height: 1.3; }
.news-plan li::before { content: "◆"; position: absolute; left: 0; color: var(--accent2); font-size: 13px; top: 3px; }
.check { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--muted); font-size: 16px; font-weight: 500; margin-top: 6px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; }