* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #101418; color: #e8eef2; font-family: system-ui, "Segoe UI", sans-serif; font-size: 14px; overflow: hidden; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); z-index: 20; }
.card { background: #1b222a; border: 1px solid #2f3a46; border-radius: 12px; padding: 20px 24px; width: min(92vw, 380px); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.card h1 { margin: 0 0 6px; font-size: 22px; }
.card label { display: block; margin: 10px 0 0; font-size: 13px; color: #aab7c4; }
.card input, .card select { width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid #3a4756; background: #0f1418; color: #fff; font-size: 14px; }
button { margin-top: 14px; padding: 9px 14px; border: 0; border-radius: 8px; background: #e0413f; color: #fff; font-weight: 600; cursor: pointer; font-size: 14px; }
button.secondary { background: #3a4756; }
button:disabled { opacity: .5; cursor: default; }
.muted { color: #8b98a5; font-size: 12px; }
.error { color: #ff7b7b; min-height: 1.2em; margin: 8px 0 0; }
.big { font-size: 20px; font-weight: 700; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 16px; padding: 8px 12px; background: rgba(16,20,24,.85); font-weight: 600; }
#topbar #version { margin-left: auto; font-weight: 400; }

#side { position: absolute; top: 44px; right: 8px; width: 250px; display: flex; flex-direction: column; gap: 8px; }
.panel { background: rgba(27,34,42,.92); border: 1px solid #2f3a46; border-radius: 10px; padding: 10px 12px; }
.panel h2 { margin: 0 0 6px; font-size: 14px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid #242d36; }
.panel li:last-child { border-bottom: 0; }
.panel li img { width: 36px; height: 36px; image-rendering: pixelated; }
.panel li .grow { flex: 1; }
.panel li button { margin: 0; padding: 3px 8px; font-size: 12px; }
.shiny { color: #ffd54a; }
.badge { font-size: 11px; background: #2f3a46; border-radius: 6px; padding: 1px 6px; }

#chat { position: absolute; left: 8px; bottom: 8px; width: min(440px, 60vw); background: rgba(16,20,24,.85); border: 1px solid #2f3a46; border-radius: 10px; }
#chatLog { height: 160px; overflow-y: auto; padding: 8px 10px; font-size: 13px; }
#chatLog div { margin: 2px 0; word-break: break-word; }
#chatLog .sys { color: #8fd3ff; }
#chatLog .gm { color: #ffd54a; }
#chatLog b { color: #ffffff; }
#chatForm { border-top: 1px solid #2f3a46; }
#chatInput { width: 100%; border: 0; background: transparent; color: #fff; padding: 8px 10px; font-size: 13px; outline: none; }

.hpmini { height: 4px; background: #2f3a46; border-radius: 2px; margin-top: 3px; overflow: hidden; }
.hpmini div { height: 100%; }

/* ---------- Pokémon-Menü ---------- */
/* Menü-Agent: Alle Regeln des Pokémon-Menüs (HGSS-Stil) stehen gesammelt am Dateiende unter "Menü-Agent". */

/* ---------- Dialog & Shop ---------- */
.dialogbox { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(92vw, 760px); background: #f8f8e8; color: #202020; border: 4px solid #384860; border-radius: 12px; padding: 14px 20px 26px; z-index: 22; box-shadow: 0 8px 30px rgba(0,0,0,.45); font-size: 20px; line-height: 1.4; }
.dialogname { position: absolute; top: -18px; left: 16px; background: #384860; color: #fff; padding: 2px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; }
.dialogtext { min-height: 2.8em; white-space: pre-wrap; }
.dialoghint { position: absolute; right: 16px; bottom: 6px; font-size: 12px; color: #667; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2 } }
.shoplist { list-style: none; margin: 0 0 8px; padding: 0; }
.shoplist li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #2f3a46; }
.shoplist li .grow { flex: 1; }
.shoplist li button { margin: 0; padding: 4px 10px; font-size: 12px; }

/* ---------- Kampf (HGSS-Stil) ---------- */
#battle { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; background: #0b1016; }
.b-scene { position: relative; flex: 1; background: linear-gradient(#8fd8ff 0, #cfeeff 45%, #7fc86a 46%, #5fa64a 100%) center / 100% 100% no-repeat; overflow: hidden; image-rendering: pixelated; }
.b-sprite { position: absolute; image-rendering: pixelated; filter: drop-shadow(0 8px 6px rgba(0,0,0,.35)); transition: opacity .5s; transform-origin: 50% 100%; }
/* Podeste im Original-Hintergrund (240×112): Gegner-Ellipse Mitte ≈ 73 % / 55 % (Standfläche ≈ 58 %), eigene Ellipse Mitte ≈ 27 % / 96 %.
   top/left = Fußpunkt; der transparente Rand unten im Sprite-Bild wird per JS (alignSprite) über `translate` herausgerechnet. */
.b-sprite2 { left: 73.5%; top: 59%; translate: -50% -100%; width: min(47vh, 460px); }
.b-sprite1 { left: 26%; top: 98.5%; translate: -50% -100%; width: min(45vh, 440px); }
.b-sprite.b-hidden { opacity: 0; transition: none; }
/* Kampf-Agent II: HGSS-Panels – cremefarben, dunkle Doppel-Umrandung, große Schrift, KP-Balken ≥ 14 px bei 1080p */
.b-panel { position: absolute; box-sizing: border-box; background: #f8f8f0; border: 3px solid #303848; border-radius: 14px; padding: clamp(6px, 1.1vh, 10px) clamp(12px, 1.3vw, 18px) clamp(7px, 1.1vh, 11px); width: clamp(290px, 27vw, 430px); color: #202830; box-shadow: inset 0 0 0 3px #dcdccc, 0 8px 22px rgba(0,0,0,.35); transition: transform .45s cubic-bezier(.2,.8,.3,1), opacity .4s; z-index: 4; font-family: "DotGothic16", "Segoe UI", system-ui, sans-serif; }
.b-enemy-panel { left: 3%; top: 4.5%; }
.b-player-panel { right: 3%; bottom: 4%; width: clamp(310px, 29vw, 470px); }
.b-enemy-panel.off { transform: translateX(-130%); opacity: 0; }
.b-player-panel.off { transform: translateX(130%); opacity: 0; }
.b-panel.b-dmg { animation: bdmg .45s ease; }
@keyframes bdmg { 0%,100% { background: #f8f8f0 } 30% { background: #ffb8b8; box-shadow: inset 0 0 0 3px #dcdccc, 0 0 22px #ff4040 } }
.b-panel.b-lvup { animation: blvup .7s ease; }
@keyframes blvup { 0%,100% { box-shadow: inset 0 0 0 3px #dcdccc, 0 8px 22px rgba(0,0,0,.35) } 40% { box-shadow: inset 0 0 0 3px #ffe680, 0 0 30px 6px #ffd400; background: #fff7c0 } }
.b-name { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: clamp(19px, 2.8vh, 27px); line-height: 1.15; }
.b-name .b-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-gender { margin-left: 6px; font-weight: 900; } .b-gender.m { color: #3068e0; } .b-gender.f { color: #e0407a; }
.b-lv { color: #303848; font-size: .85em; white-space: nowrap; }
.b-hprow { display: flex; align-items: center; gap: 8px; margin: clamp(5px, .9vh, 9px) 0 0; }
.b-hplabel { font-size: clamp(11px, 1.5vh, 15px); font-weight: 900; color: #ffd54a; background: #303848; padding: 1px 7px; border-radius: 6px; letter-spacing: 1px; line-height: 1.4; }
.b-hpbar { flex: 1; height: clamp(13px, 1.8vh, 20px); background: #404850; border-radius: 8px; overflow: hidden; border: 2px solid #303848; box-shadow: inset 0 2px 0 rgba(0,0,0,.4); }
.b-hpfill { height: 100%; width: 100%; background: linear-gradient(#8cf08c, #40b848 55%, #38a040); }
.b-hpfill.hp-y { background: linear-gradient(#ffe680, #f0c000 55%, #d8a800); }
.b-hpfill.hp-r { background: linear-gradient(#ff9a9a, #e04040 55%, #c03030); }
.b-hptext { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; min-height: 1.2em; }
.b-enemy-panel .b-hptext { min-height: 0; margin-top: 0; } .b-enemy-panel .b-balls { margin-top: 5px; } /* wild: keine Leerzeile unter dem Balken */
.b-hpnum { margin-left: auto; font-size: clamp(17px, 2.5vh, 24px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.b-status { display: inline-block; padding: 1px 7px; border-radius: 5px; color: #fff; font-size: clamp(11px, 1.5vh, 14px); font-weight: 900; letter-spacing: .5px; vertical-align: middle; }
.b-status:empty { display: none; }
.st-par { background: #c8a800; } .st-psn { background: #9040a0; } .st-brn { background: #e06020; } .st-slp { background: #707890; } .st-frz { background: #58a8d8; }
.b-status.pop { animation: bpop .45s ease; }
@keyframes bpop { 0% { transform: scale(0) } 60% { transform: scale(1.35) } 100% { transform: scale(1) } }
.b-balls { display: inline-flex; gap: 4px; vertical-align: middle; }
.b-balls i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(#e63b3b 0 45%, #222 45% 55%, #fff 55%); border: 1px solid #222; }
.b-balls i.ko { background: #9a9a9a; opacity: .55; }
.b-exprow { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.b-explabel { font-size: clamp(10px, 1.3vh, 13px); font-weight: 900; color: #fff; background: #4a80d8; padding: 0 6px; border-radius: 5px; letter-spacing: 1px; line-height: 1.4; }
.b-expbar { flex: 1; height: clamp(8px, 1.1vh, 12px); background: #404850; border: 2px solid #303848; border-radius: 6px; overflow: hidden; }
.b-expfill { height: 100%; width: 0; background: linear-gradient(#8fd0ff, #2f7fe0); }
.b-panel.b-expglow { box-shadow: inset 0 0 0 3px #a8d0ff, 0 0 24px 4px rgba(74,163,255,.7); }
/* Unterer Bereich: Textbox links, Hauptmenü 2×2 rechts; Attacken/Beutel/Team über die ganze Breite */
.b-bottom { position: relative; box-sizing: border-box; height: clamp(170px, 27vh, 260px); padding: 8px; gap: 8px; background: #2a3646; border-top: 4px solid #6b7d92; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr; font-family: "DotGothic16", "Segoe UI", system-ui, sans-serif; }
.b-text { position: relative; grid-column: 1 / -1; box-sizing: border-box; margin: 0; padding: clamp(10px, 1.8vh, 18px) 26px; font-size: clamp(18px, 2.7vh, 25px); color: #fff; background: #1e2a38; border: 4px solid #8fa3ba; border-radius: 12px; box-shadow: inset 0 0 0 3px #1e2a38, inset 0 0 0 5px #4a5a70; line-height: 1.35; cursor: pointer; user-select: none; overflow: hidden; }
.b-bottom.choice .b-text { grid-column: 1; }
.b-bottom.full .b-text { display: none; }
.b-text.wait::after { content: "▼"; position: absolute; right: 16px; bottom: 8px; font-size: 16px; color: #ffd54a; animation: bcursor .7s steps(2) infinite; }
@keyframes bcursor { 50% { opacity: 0 } }
.b-speed { position: absolute; right: 8px; top: 8px; margin: 0; padding: 2px 8px; font-size: 11px; background: rgba(30,42,56,.8); color: #cfd8e3; border: 1px solid #8fa3ba; border-radius: 6px; z-index: 5; opacity: .75; }
.b-speed:hover { opacity: 1; }
.b-menu { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }
.b-menu button { margin: 0; padding: 0; min-height: 0; font-family: inherit; font-size: clamp(18px, 3vh, 28px); font-weight: 900; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); border: 3px solid #202838; border-radius: 14px; box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.25), 0 3px 0 #101820; }
.b-menu button[data-act="fight"] { background: #e8483e; } .b-menu button[data-act="bag"] { background: #e8a030; } .b-menu button[data-act="party"] { background: #48b058; } .b-menu button[data-act="run"] { background: #4a80d8; }
.b-menu button:hover { filter: brightness(1.15); }
.b-moves { display: grid; grid-template-columns: 1fr 1fr 120px; grid-template-rows: 1fr 1fr; gap: 8px; grid-column: 1 / -1; min-height: 0; }
.b-move { margin: 0; min-height: 0; padding: 6px 14px; text-align: left; border: 3px solid #202838; border-radius: 14px; background: linear-gradient(var(--tc, #888), color-mix(in srgb, var(--tc, #888) 68%, #000)); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 3px 0 #101820; font-family: inherit; }
.b-move > b { font-size: clamp(17px, 2.6vh, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-move:hover:not(:disabled) { filter: brightness(1.15); }
.b-move:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; }
.b-move.empty { background: #3a4656; border: 3px dashed #56657a; box-shadow: none; }
.b-moveinfo { display: flex; justify-content: space-between; align-items: center; font-size: clamp(13px, 1.9vh, 17px); }
.b-type { font-style: normal; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.65); border-radius: 6px; padding: 0 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; font-size: .85em; }
.b-pp b { font-size: 1.15em; }
.b-list { display: grid; grid-template-columns: repeat(3, 1fr) 120px; grid-template-rows: auto 1fr 1fr; gap: 6px 8px; grid-column: 1 / -1; min-height: 0; overflow-y: auto; }
.b-hint { grid-column: 1 / span 3; color: #ffd54a; font-size: clamp(14px, 2vh, 18px); padding: 0 4px; }
.b-list button { margin: 0; min-height: 0; background: #f8f8f0; color: #202830; border: 3px solid #303848; border-radius: 12px; padding: 4px 10px; text-align: left; box-shadow: inset 0 0 0 2px #dcdccc; font-family: inherit; font-size: clamp(14px, 2vh, 18px); }
.b-list button:hover:not(:disabled) { background: #fff0b8; }
.b-list button:disabled { opacity: .55; cursor: default; }
.b-list button small { color: #405060; font-size: .85em; }
.b-mon { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; align-items: center; column-gap: 8px; }
.b-mon img { width: clamp(44px, 7vh, 64px); height: clamp(44px, 7vh, 64px); grid-row: 1 / span 3; image-rendering: pixelated; }
.b-mon .b-mn { display: flex; justify-content: space-between; font-weight: 700; white-space: nowrap; overflow: hidden; } .b-mon .b-mn em { font-style: normal; color: #303848; font-size: .85em; margin-left: 6px; }
.b-mon .b-mini { display: block; height: 8px; background: #404850; border: 1px solid #303848; border-radius: 4px; overflow: hidden; } .b-mon .b-mini i { display: block; height: 100%; }
.b-mon .b-mini .hp-g { background: #40b848; } .b-mon .b-mini .hp-y { background: #f0c000; } .b-mon .b-mini .hp-r { background: #e04040; }
.b-mon.active { box-shadow: inset 0 0 0 2px #ffd54a; }
.b-item { display: flex; align-items: center; gap: 10px; } .b-item small { margin-left: auto; }
.b-ballicon { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#e63b3b 0 45%, #222 45% 55%, #fff 55%); border: 2px solid #222; box-sizing: border-box; flex: none; }
.b-ballicon.superball { background: linear-gradient(#3070e0 0 45%, #222 45% 55%, #fff 55%); } .b-ballicon.hyperball { background: linear-gradient(#303030 0 45%, #d8b000 45% 55%, #fff 55%); } .b-ballicon.meisterball { background: linear-gradient(#8040c0 0 45%, #222 45% 55%, #fff 55%); }
.b-healicon { display: inline-block; width: 14px; height: 22px; border-radius: 5px 5px 7px 7px; background: linear-gradient(#f0f0f0 0 30%, #d0a0e8 30%); border: 2px solid #404050; box-sizing: border-box; flex: none; }
.b-back { margin: 0; min-height: 0; background: #3a4756 !important; color: #fff !important; border: 3px solid #202838; border-radius: 14px; box-shadow: inset 0 3px 0 rgba(255,255,255,.15), 0 3px 0 #101820; font-family: inherit; font-size: clamp(15px, 2.2vh, 20px); font-weight: 900; }
.b-moves .b-back { grid-column: 3; grid-row: 1 / span 2; }
.b-list .b-back { grid-column: 4; grid-row: 1 / span 3; }
.promptcard { max-width: 460px; }
.evo { position: fixed; inset: 0; z-index: 60; background: radial-gradient(circle at 50% 40%, #1b2a3a 0, #05080c 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.evo-stage { width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; }
.evo-stage img { width: 240px; height: 240px; image-rendering: pixelated; object-fit: contain; transition: filter .12s; filter: drop-shadow(0 0 24px rgba(255,255,255,.25)); }
.evo-stage img.white { filter: brightness(0) invert(1) drop-shadow(0 0 30px #fff); }
.evo.flash { animation: evoflash .6s ease; }
@keyframes evoflash { 0% { background: #fff } 100% { background: radial-gradient(circle at 50% 40%, #1b2a3a 0, #05080c 70%) } }
.evo-text { margin-top: 28px; padding: 14px 22px; border: 3px solid #d8d8d8; border-radius: 10px; background: #182029; color: #fff; font-size: 18px; min-width: 360px; text-align: center; }
.evo-hint { margin-top: 10px; color: #aab; font-size: 13px; }
.charpick { display: flex; gap: 10px; margin-top: 6px; }
.charopt { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #2f3a46; border-radius: 8px; cursor: pointer; font-weight: normal; }
.charopt:has(input:checked) { border-color: #e04040; background: rgba(224,64,64,.12); }
.charimg { width: 32px; height: 32px; object-fit: none; object-position: -32px 0; image-rendering: pixelated; }
.boxcard { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #2f3a46; border-radius: 8px; margin: 6px 0; }
.boxcard img { width: 56px; image-rendering: pixelated; }
.promptchoices { display: grid; gap: 8px; margin-top: 12px; }
.promptchoices button { text-align: left; padding: 10px 12px; }
.promptchoices button small { display: block; opacity: .75; font-weight: normal; }
.promptchoices .secondary { text-align: center; }
.b-fx { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 6; }
@keyframes bflash { 0% { opacity: 0 } 30% { opacity: 1 } 100% { opacity: 0 } }
/* Ausfallschritt: Treffer sitzt bei ≈ 30 % der Animation (JS wartet 170 ms) */
.b-lunge1 { animation: blunge1 .5s ease-out; }
.b-lunge2 { animation: blunge2 .5s ease-out; }
@keyframes blunge1 { 0% { transform: none } 30% { transform: translate(70px, -45px) } 100% { transform: none } }
@keyframes blunge2 { 0% { transform: none } 30% { transform: translate(-70px, 45px) } 100% { transform: none } }
.b-hit { animation: bhit .5s ease; }
@keyframes bhit { 0%,100% { transform: translateX(0); filter: none } 20% { transform: translateX(-14px); filter: brightness(3) } 40% { transform: translateX(14px) } 60% { transform: translateX(-10px); filter: brightness(2) } 80% { transform: translateX(8px) } }
/* Einzug: Gegner gleitet von rechts herein (wild) */
.b-slidein { animation: bslidein .75s cubic-bezier(.2,.8,.3,1) both; }
@keyframes bslidein { from { transform: translateX(150%); opacity: 0 } 40% { opacity: 1 } to { transform: none; opacity: 1 } }
/* Aus dem Ball: weiß aufleuchtend wachsen, dann Farbe */
.b-appear { animation: bappear .5s ease-out both; }
@keyframes bappear { 0% { transform: scale(.08); opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 14px #fff) } 60% { transform: scale(1.06); opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 14px #fff) } 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 8px 6px rgba(0,0,0,.35)) } }
/* Rückruf / Fang: rot getönt in den Ball schrumpfen */
.b-recall { animation: brecall .38s ease-in both; }
.b-suck { animation: brecall .42s ease-in both; transform-origin: 50% 0 !important; }
@keyframes brecall { 0% { transform: scale(1); filter: drop-shadow(0 8px 6px rgba(0,0,0,.35)) } 100% { transform: scale(.04); opacity: .8; filter: brightness(.7) sepia(1) saturate(30) hue-rotate(-35deg) } }
/* K.O.: sinkt in den Boden (Unterkante bleibt an Ort, Oberkante rutscht nach unten) und blendet aus */
.b-fainting { animation: bfaintdown .68s ease-in both; }
@keyframes bfaintdown { 0% { transform: translateY(0); clip-path: inset(-30% -30% 0 -30%); opacity: 1 } 100% { transform: translateY(45%); clip-path: inset(-30% -30% 45% -30%); opacity: .2 } }
/* Statuswechsel: kurzes Aufleuchten des Sprites */
.b-statusflash { animation: bstatusflash .5s ease; }
@keyframes bstatusflash { 0%,100% { filter: drop-shadow(0 8px 6px rgba(0,0,0,.35)) } 50% { filter: brightness(1.8) saturate(1.5) drop-shadow(0 0 16px #fff) } }
.b-evolve { animation: bevolve 1.6s ease; }
/* Pokéball (rein CSS): Flugbahn setzt left/top/--rot per JS */
.b-ball { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; z-index: 7; pointer-events: none; box-sizing: border-box; background: linear-gradient(#e63b3b 0 44%, #1a1a1a 44% 56%, #f4f4f4 56%); border: 2px solid #1a1a1a; box-shadow: 0 4px 6px rgba(0,0,0,.35); transform: rotate(var(--rot, 0deg)); }
.b-ball::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; border: 2px solid #1a1a1a; box-sizing: border-box; }
.b-ball.open { animation: bballopen .32s ease-out; }
@keyframes bballopen { 0% { box-shadow: 0 0 0 0 #fff } 45% { box-shadow: 0 0 44px 28px #fff; filter: brightness(2) } 100% { box-shadow: 0 4px 6px rgba(0,0,0,.35) } }
.b-ball.wobble { animation: bwobble .66s ease-in-out; }
@keyframes bwobble { 0%,100% { transform: rotate(0) translateX(0) } 25% { transform: rotate(-26deg) translateX(-8px) } 50% { transform: rotate(0) } 75% { transform: rotate(26deg) translateX(8px) } }
.b-ball.bounce { animation: bbounce .32s ease-out; }
@keyframes bbounce { 0% { transform: translateY(0) } 40% { transform: translateY(-14px) } 100% { transform: translateY(0) } }
.b-ball.caught { filter: brightness(.55); animation: bcaught .35s ease-out; }
@keyframes bcaught { 0% { transform: scale(1) } 50% { transform: scale(1.3); filter: brightness(1.4) } 100% { transform: scale(1) } }
/* Frame-animierte Attacken-Sprites (client/assets/fx, Streifen; JS setzt Größe, --end, steps(n), Dauer, Transform) */
.b-sheet { position: absolute; pointer-events: none; z-index: 6; image-rendering: pixelated; background-repeat: no-repeat; animation: bsheet linear forwards; }
@keyframes bsheet { from { background-position-x: 0 } to { background-position-x: var(--end) } }
/* Ausblende am Kampfende (liegt über Szene + Menü) */
.b-fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .7s ease; z-index: 30; pointer-events: none; }
.b-fade.on { opacity: 1; }
.b-fade.dark { transition-duration: 1.2s; }
/* VS-Banner bei Trainerkämpfen */
/* Kampf-Agent II: Band quer über die Szene, Trainer-Sprite 4× (32-px-Zelle → 128 px) im Ring */
.b-vs { position: absolute; left: 0; right: 0; top: 20%; height: clamp(130px, 26vh, 220px); display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 48px); background: linear-gradient(90deg, #12163a, #2c3a8a 40%, #2c3a8a 60%, #12163a); border-top: 4px solid #ffd54a; border-bottom: 4px solid #ffd54a; color: #fff; z-index: 9; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-family: "DotGothic16", "Segoe UI", system-ui, sans-serif; animation: bvsin .5s cubic-bezier(.2,.8,.3,1) both; }
.b-vs::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-60deg, transparent 0 28px, rgba(255,255,255,.06) 28px 56px); pointer-events: none; }
.b-vs.out { animation: bvsout .4s ease-in forwards; }
@keyframes bvsin { from { transform: translateX(100%) } to { transform: none } }
@keyframes bvsout { to { transform: translateX(-100%); opacity: 0 } }
.b-vs-tag { color: #ffd54a; font-style: italic; font-weight: 900; font-size: clamp(44px, 9vh, 80px); text-shadow: 4px 4px 0 #a02020, 0 0 24px rgba(255,213,74,.5); }
.b-vs-ring { width: clamp(120px, 20vh, 160px); height: clamp(120px, 20vh, 160px); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #c8d4ff); border: 4px solid #ffd54a; box-shadow: 0 6px 18px rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; flex: none; }
.b-vs-sprite { width: 128px; height: 128px; margin-bottom: 4px; background-repeat: no-repeat; background-size: 384px 512px; background-position: -128px 0; image-rendering: pixelated; }
.b-vs-who { display: flex; flex-direction: column; gap: 4px; }
.b-vs-who small { font-size: clamp(12px, 1.8vh, 16px); letter-spacing: 3px; color: #ffd54a; font-weight: 900; }
.b-vs-name { font-size: clamp(28px, 5vh, 46px); font-weight: 900; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.b-vs .b-balls i { width: 16px; height: 16px; }
/* Shiny-Effekt */
.b-shinyflash { animation: bshinyflash .9s ease; }
@keyframes bshinyflash { 0% { filter: brightness(1) } 20% { filter: brightness(2.2) saturate(1.6) } 40% { filter: brightness(1) } 60% { filter: brightness(1.8) } 100% { filter: brightness(1) } }
.b-shinystar { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: radial-gradient(circle, #fff 0, #ffe36a 45%, transparent 70%); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: bshinystar 1.4s ease-out forwards; pointer-events: none; z-index: 8; filter: drop-shadow(0 0 6px #ffd400); }
@keyframes bshinystar { 0% { transform: translate(0,0) scale(0) rotate(0); opacity: 0 } 15% { opacity: 1; transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)) scale(1.3) rotate(90deg) } 100% { transform: translate(var(--dx), var(--dy)) scale(.4) rotate(360deg); opacity: 0 } }
.b-shinybanner { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); padding: 10px 26px; background: linear-gradient(90deg, #ffb300, #fff176, #ffb300); color: #3a2a00; font-weight: 900; font-size: 26px; letter-spacing: 2px; border-radius: 12px; box-shadow: 0 0 30px #ffd400, 0 0 60px #ffb300; animation: bshinybanner 3.2s ease forwards; z-index: 9; pointer-events: none; white-space: nowrap; }
@keyframes bshinybanner { 0% { transform: translateX(-50%) scale(.2); opacity: 0 } 15% { transform: translateX(-50%) scale(1.15); opacity: 1 } 25% { transform: translateX(-50%) scale(1) } 85% { opacity: 1 } 100% { opacity: 0 } }
/* Attacken-Effekte */
.b-scene { position: relative; overflow: hidden; }
.b-shake { animation: bshake .5s ease; }
@keyframes bshake { 0%,100% { transform: none } 15% { transform: translate(-8px, 4px) } 35% { transform: translate(7px, -3px) } 55% { transform: translate(-5px, 2px) } 75% { transform: translate(3px, -1px) } }
.b-strobe { animation: bstrobe .5s steps(2); }
@keyframes bstrobe { 0%,100% { filter: none } 50% { filter: brightness(1.8) contrast(1.2) } }
.b-proj { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--c) 45%, transparent 70%); box-shadow: 0 0 18px 6px var(--c); animation: bproj .32s ease-in forwards; pointer-events: none; z-index: 5; }
@keyframes bproj { to { transform: translate(var(--tx), var(--ty)) scale(1.4); } }
.b-aura { position: absolute; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c); animation: baura .8s ease-out forwards; pointer-events: none; z-index: 5; }
@keyframes baura { 0% { transform: scale(.3); opacity: 0 } 40% { opacity: 1 } 100% { transform: scale(1.6); opacity: 0 } }
.b-p { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; z-index: 6; background: var(--c); animation-duration: .75s; animation-fill-mode: forwards; animation-timing-function: ease-out; }
.b-p-flame { width: 16px; height: 24px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(to top, #ff3b00, #ffb300, #fff6a0); }
.b-p-drop { width: 10px; height: 16px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: linear-gradient(to bottom, #b3e5ff, #2f7fe0); }
.b-p-bolt { width: 6px; height: 46px; background: #fff27a; box-shadow: 0 0 10px #ffd400; clip-path: polygon(40% 0, 100% 0, 55% 45%, 90% 45%, 20% 100%, 45% 55%, 0 55%); transform: rotate(var(--rot)); }
.b-p-leaf { width: 18px; height: 10px; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #8fe07a, #2e8b3a); transform: rotate(var(--rot)); }
.b-p-shard { width: 10px; height: 22px; background: linear-gradient(to bottom, #fff, #9ad9ff); clip-path: polygon(50% 0, 100% 60%, 50% 100%, 0 60%); transform: rotate(var(--rot)); }
.b-p-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 3px solid var(--c); background: transparent; box-shadow: 0 0 12px var(--c); }
.b-p-wisp { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0, transparent 70%); opacity: .8; }
.b-p-bubble { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0, var(--c) 40%, transparent 75%); }
.b-p-rock { width: 14px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, #c9a36b, #6b4a2b); transform: rotate(var(--rot)); }
.b-p-streak { width: 40px; height: 4px; border-radius: 2px; background: linear-gradient(to right, transparent, #fff, transparent); transform: rotate(var(--rot)); }
.b-p-star { width: 18px; height: 18px; background: #fff; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.b-m-burst { animation-name: bpburst; }
@keyframes bpburst { 0% { transform: translate(0,0) scale(.6); opacity: 1 } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--rot)); opacity: 0 } }
.b-m-rise { animation-name: bprise; }
@keyframes bprise { 0% { transform: translate(0, 20px) scale(.7); opacity: 0 } 25% { opacity: 1 } 100% { transform: translate(var(--dx), -110px) scale(1.2); opacity: 0 } }
.b-m-fall { animation-name: bpfall; }
@keyframes bpfall { 0% { transform: translate(var(--dx), -90px); opacity: 0 } 30% { opacity: 1 } 100% { transform: translate(calc(var(--dx) * .5), 40px); opacity: 0 } }
.b-m-flash { animation-name: bpflash; animation-duration: .5s; }
@keyframes bpflash { 0%,100% { opacity: 0 } 20%,60% { opacity: 1 } 40%,80% { opacity: .2 } }
.b-m-swirl { animation-name: bpswirl; }
@keyframes bpswirl { 0% { transform: translate(var(--dx), var(--dy)) rotate(0) scale(.6); opacity: 0 } 30% { opacity: 1 } 100% { transform: translate(calc(var(--dx) * -.6), calc(var(--dy) * -.6)) rotate(360deg) scale(1); opacity: 0 } }
.b-m-pulse { animation-name: bppulse; animation-duration: .8s; }
@keyframes bppulse { 0% { transform: scale(.2); opacity: 1 } 100% { transform: scale(2.4); opacity: 0 } }
.b-m-sweep { animation-name: bpsweep; }
@keyframes bpsweep { 0% { transform: translate(calc(var(--dx) * -1), var(--dy)) rotate(var(--rot)); opacity: 0 } 30% { opacity: 1 } 100% { transform: translate(var(--dx), calc(var(--dy) * -1)) rotate(var(--rot)); opacity: 0 } }
@keyframes bevolve { 0%,100% { filter: none } 50% { filter: brightness(6) saturate(0); transform: scale(1.15) } }

#toast { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); background: #1b222a; border: 1px solid #ffd54a; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 30; box-shadow: 0 8px 30px rgba(0,0,0,.5); }

/* Kampf-Übergang ÜBER der Oberwelt: 3× Blitz (0–0,9 s), dann schließt sich ein Kreis zu Schwarz (0,85–1,45 s).
   #battle wird von battle.js erst eingeblendet, wenn die Blende komplett zu ist; .out blendet die Blende dann auf. */
#b-intro { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
#b-intro .b-intro-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: bintroflash .3s steps(1) 3; }
@keyframes bintroflash { 0% { opacity: .9 } 50% { opacity: 0 } 100% { opacity: 0 } }
/* Das "Loch" ist ein Kreis, dessen Außenbereich per riesigem box-shadow schwarz ist; der Kreis schrumpft auf 0 → alles schwarz */
#b-intro .b-intro-wipe { position: absolute; left: 50%; top: 50%; width: 280vmax; height: 280vmax; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 200vmax #000; animation: bwipe .6s ease-in .85s both; }
#b-intro.trainer .b-intro-wipe { box-shadow: 0 0 0 200vmax #101030; }
@keyframes bwipe { from { width: 280vmax; height: 280vmax } to { width: 0; height: 0 } }
#b-intro.out { animation: bintroout .5s ease-out forwards; }
@keyframes bintroout { to { opacity: 0 } }

/* Beutel mit Taschen */
.pockets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.pockets button { margin: 0; padding: 5px 10px; font-size: 12px; background: #2f3a46; }
.pockets button.active { background: #e0413f; color: #fff; }
.pockets .money { margin-left: auto; font-weight: bold; color: #ffd54a; }
.bagrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: #232c36; border: 1px solid #2f3a46; border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
.bagrow .actions button, .bagrow .actions select { margin: 2px 4px 2px 0; padding: 4px 10px; font-size: 12px; }
.small { font-size: 12px; }
/* Team: Drag & Drop */
.moncard.dragging { opacity: .5; }
.moncard.dragover { border-color: #ffd54a; box-shadow: 0 0 0 2px #ffd54a inset; }
.moncard[draggable="true"] { cursor: grab; }
/* Trainerpass */
.cardbox { max-width: 620px; }
.cardhead { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.cardface { width: 64px; height: 64px; object-fit: none; object-position: -32px 0; image-rendering: pixelated; background: rgba(255,255,255,.2); border-radius: 10px; }
.cardname { font-size: 18px; font-weight: bold; }
.cardsub { opacity: .85; font-size: 12px; }
.cardstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.cardstats div { background: rgba(0,0,0,.25); border-radius: 8px; padding: 6px 10px; }
.cardstats span { display: block; font-size: 11px; opacity: .8; }
.cardbox h3 { margin: 10px 0 6px; font-size: 14px; opacity: .9; }
.badges { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.badgeslot { background: rgba(0,0,0,.35); border-radius: 10px; text-align: center; padding: 6px 2px; opacity: .35; filter: grayscale(1); }
.badgeslot.won { opacity: 1; filter: none; background: rgba(255,255,255,.25); box-shadow: 0 0 0 2px #ffd54a inset; }
.badgeslot span { font-size: 22px; display: block; }
.badgeslot small { font-size: 10px; }
.cardteam { display: flex; gap: 6px; }
.cardteam div { background: rgba(0,0,0,.25); border-radius: 8px; padding: 4px; text-align: center; }
.cardteam img { width: 56px; height: 56px; image-rendering: pixelated; display: block; }
.cardteam small { font-size: 10px; }

/* Spielfigur-Auswahl */
.chargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.charopt { margin: 0; padding: 10px 6px; background: #232c36; border: 2px solid #2f3a46; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.charopt:hover { border-color: #ffd54a; background: #2b3542; }
.charimg { display: block; width: 32px; height: 32px; background-repeat: no-repeat; background-position: -32px 0; background-size: 96px 128px; image-rendering: pixelated; transform: scale(2.2); transform-origin: center; margin: 14px 0; }

/* Heil-Animation (Pokémon-Center) */
#healAnim { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#healAnim .healmachine { display: flex; gap: 14px; padding: 16px 22px; background: rgba(20,28,40,.85); border: 3px solid #384860; border-radius: 14px; animation: healfade 2.6s forwards; }
#healAnim .healball { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(#e0413f 0 48%, #222 48% 54%, #fff 54%); box-shadow: 0 0 0 2px #222 inset; animation: healblink 0.5s steps(1) 4; }
#healAnim .healflash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: healflash 0.6s ease 2s; }
@keyframes healblink { 0% { filter: brightness(1); } 50% { filter: brightness(1.8) drop-shadow(0 0 8px #fff); } }
@keyframes healflash { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes healfade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* Optionen: Tastenbelegung */
.keytable { border-collapse: collapse; margin-bottom: 10px; }
.keytable td { padding: 4px 12px 4px 0; }
.keytable button { margin: 0; padding: 3px 10px; font-size: 12px; }

/* Login-Screen (Titelbild) */
.login-screen { flex-direction: column; gap: 18px; background: #0b1016; }
.login-bg { position: absolute; inset: -20px; background: url("assets/maps/pallet.png") center / cover no-repeat; filter: blur(3px) brightness(.55) saturate(1.1); image-rendering: pixelated; z-index: 0; }
.login-hero, .login-card { position: relative; z-index: 1; }
.login-hero { text-align: center; }
.logo { font-family: "Segoe UI Black", "Arial Black", system-ui, sans-serif; font-size: clamp(44px, 8vw, 84px); font-weight: 900; letter-spacing: 4px; color: #ffd54a; text-shadow: 0 4px 0 #b8322f, 0 8px 0 #4a1512, 0 12px 24px rgba(0,0,0,.6); line-height: 1; }
.logo span { display: block; font-size: .42em; letter-spacing: 12px; color: #fff; text-shadow: 0 3px 0 #384860, 0 6px 16px rgba(0,0,0,.6); margin-top: 4px; }
.tagline { color: #e8eef2; text-shadow: 0 2px 6px #000; margin: 10px 0 0; font-size: 14px; }
.login-card { background: rgba(27,34,42,.94); backdrop-filter: blur(6px); }
.login-card .cta { width: 100%; font-size: 16px; padding: 12px; }
.adv { margin-top: 12px; font-size: 13px; color: #aab7c4; }
.adv summary { cursor: pointer; }

/* Menü-Agent */
/* ===== Pokémon-Menü im HGSS-Stil: Hauptliste, Team, Info, Box, Beutel, Pokédex, Trainerpass, Optionen, HUD-Seitenleiste ===== */
#menu { --m-teal: #2b5f74; --m-cream: #f8f8f0; --m-line: #4a6a8a; --m-ink: #203040; --m-red: #e8483e; --m-sel: #ffd84a; --m-navy: #283c58;
  font-family: "DotGothic16", "Segoe UI", system-ui, sans-serif; font-size: 16px; color: var(--m-ink); background: rgba(0,0,0,.25); display: block; }
#menu.screen { background: rgba(4,12,20,.72); display: flex; align-items: center; justify-content: center; }
#menu button { font-family: inherit; }
#menu img { image-rendering: pixelated; }
#menu.closing { animation: menufade .14s ease-in forwards; pointer-events: none; }
@keyframes menufade { to { opacity: 0 } }
/* Hauptliste rechts oben (wie das Feldmenü im Original) */
#menuMain { position: absolute; right: 28px; top: 56px; width: 290px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--m-cream); border: 4px solid #4a5a70; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 2px #fff; }
#menu.opening #menuMain { animation: menuslide .2s ease-out; }
#menu.opening .menuhint { animation: menuup .2s ease-out; }
@keyframes menuslide { from { transform: translateX(40px); opacity: 0 } }
@keyframes menuup { from { transform: translate(-50%, 20px); opacity: 0 } }
#menuMain button { position: relative; margin: 0; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 32px; background: transparent; color: var(--m-ink); font-size: 19px; font-weight: 700; letter-spacing: .5px; text-align: left; border-radius: 8px; cursor: pointer; transition: background .08s; }
#menuMain button.focus { background: #fff0b8; box-shadow: inset 0 0 0 2px var(--m-red); }
#menuMain button.focus::before, .menupopup button.focus::before, .bagitem.focus::before, .dexrow.focus::before, .optrow.focus::before { content: ""; position: absolute; left: 9px; top: 50%; width: 0; height: 0; margin-top: -7px; border-left: 11px solid var(--m-red); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
#menu .press { transform: translateX(2px) scale(.98); }
.mi { display: inline-block; width: 28px; height: 28px; flex: none; background: center / contain no-repeat; }
.mi-dex { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='2' width='18' height='20' rx='3' fill='%23e0413f' stroke='%235a1a18' stroke-width='2'/><circle cx='8' cy='7' r='2.5' fill='%238fd3ff' stroke='%235a1a18' stroke-width='1.5'/><rect x='6' y='12' width='12' height='6' rx='1' fill='%23c8f0c0' stroke='%235a1a18' stroke-width='1.5'/></svg>"); }
.mi-mon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%23fff' stroke='%23222' stroke-width='2'/><path d='M2 12a10 10 0 0 1 20 0z' fill='%23e0413f'/><path d='M2 12h20' stroke='%23222' stroke-width='2'/><circle cx='12' cy='12' r='3' fill='%23fff' stroke='%23222' stroke-width='2'/></svg>"); }
.mi-bag { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 8h12l1.5 12a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2z' fill='%23e8a838' stroke='%235a3a10' stroke-width='2'/><path d='M8 8V6a4 4 0 0 1 8 0v2' fill='none' stroke='%235a3a10' stroke-width='2'/><rect x='9' y='13' width='6' height='4' fill='%23c05028' stroke='%235a3a10' stroke-width='1.5'/></svg>"); }
.mi-card { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2' y='5' width='20' height='14' rx='2' fill='%23f0d060' stroke='%235a4a10' stroke-width='2'/><circle cx='8' cy='11' r='2.5' fill='%23fff' stroke='%235a4a10' stroke-width='1.5'/><rect x='13' y='9' width='6' height='2' fill='%235a4a10'/><rect x='13' y='13' width='6' height='2' fill='%235a4a10'/><rect x='5' y='15' width='6' height='2' fill='%235a4a10'/></svg>"); }
.mi-opt { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2 3 3.5-.5 1 3.5 3 2-1.5 3 1.5 3-3 2-1 3.5-3.5-.5-2 3-2-3-3.5.5-1-3.5-3-2 1.5-3L3 10l3-2 1-3.5L10.5 5z' fill='%23a0b0c0' stroke='%2330405a' stroke-width='1.5'/><circle cx='12' cy='12' r='3.5' fill='%23f8f8f0' stroke='%2330405a' stroke-width='1.5'/></svg>"); }
.mi-back { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 5L3 12l7 7v-4h6a4 4 0 0 0 0-8h-1' fill='%2378c850' stroke='%23204020' stroke-width='2' stroke-linejoin='round'/></svg>"); }
.menuhint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(760px, 90vw); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; background: var(--m-cream); border: 4px solid #4a5a70; border-radius: 12px; font-size: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 2px #fff; }
/* Bildschirm-Box */
.menubox { position: relative; width: min(96vw, 1180px); height: min(92vh, 720px); background: var(--m-teal); background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 24px 24px; border: 4px solid #dfe6ee; border-radius: 14px; box-shadow: 0 16px 50px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; animation: menupop .18s ease-out; }
@keyframes menupop { from { transform: scale(.96); opacity: 0 } }
.menuhead { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; background: linear-gradient(#34507a, var(--m-navy)); color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 1.5px; border-bottom: 4px solid #8fa3ba; text-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.menuhead .count, .menuhead .money, .menuhead .pager { font-size: 20px; color: #ffe27a; }
.menuhead small { font-size: 14px; color: #cfd8e3; letter-spacing: 0; }
.menutab { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.menutab.screen-in { animation: screenfade .16s ease-out; }
@keyframes screenfade { from { opacity: 0; transform: translateY(6px) } }
.menufoot { flex: none; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 14px; background: #1e2a38; border-top: 4px solid #8fa3ba; color: #fff; }
.menufoot .msg { flex: 1; font-size: 19px; }
.menufoot .legend, .menuhint .legend { font-size: 14px; color: #cfd8e3; white-space: nowrap; margin-right: 6px; }
.kbtn { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; text-align: center; font-size: 13px; font-weight: 700; color: #fff; margin: 0 4px 0 10px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); vertical-align: middle; }
.kbtn.a { background: var(--m-red); } .kbtn.b { background: #3a7ad8; }
.pbtn { margin: 0; padding: 7px 16px; background: var(--m-cream); color: var(--m-ink); border: 3px solid #4a5a70; border-radius: 8px; font-size: 16px; font-weight: 700; letter-spacing: .5px; box-shadow: 0 3px 0 #2a3a50; }
.pbtn.focus, .pbtn:hover { background: #ffe27a; border-color: var(--m-red); }
.pbtn small { font-size: 12px; color: #607080; }
.menuempty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 30px; text-align: center; color: #fff; font-size: 22px; text-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.menuempty small { font-size: 15px; color: #cfe8ff; }
.menuempty.small { height: auto; padding: 24px; color: #607080; font-size: 16px; text-shadow: none; }
/* Aktions-Popup (INFO / ATTACKEN / ITEM …) */
.menupopup { position: absolute; right: 22px; bottom: 76px; min-width: 250px; padding: 6px; background: var(--m-cream); border: 4px solid #4a5a70; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 2px #fff; display: flex; flex-direction: column; gap: 2px; z-index: 5; animation: popin .12s ease-out; }
@keyframes popin { from { transform: translateY(8px); opacity: 0 } }
.menupopup .popuptitle { padding: 4px 10px 6px; font-size: 14px; color: #607080; border-bottom: 2px dotted #b0c0d0; margin-bottom: 4px; }
.menupopup button { position: relative; margin: 0; padding: 8px 12px 8px 30px; background: transparent; color: var(--m-ink); font-size: 18px; font-weight: 700; text-align: left; border-radius: 8px; }
.menupopup button.focus { background: #fff0b8; box-shadow: inset 0 0 0 2px var(--m-red); }
.menupopup button:disabled { color: #a0a8b0; opacity: 1; cursor: default; }
.menupopup button small { font-size: 12px; font-weight: 400; }
/* Typ-Symbole */
.mtype { display: inline-block; min-width: 70px; padding: 1px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; color: #fff; text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,.45); border: 2px solid rgba(0,0,0,.25); margin-right: 4px; letter-spacing: .3px; vertical-align: middle; }
.t-normal{background:#a8a878}.t-fire{background:#f08030}.t-water{background:#6890f0}.t-grass{background:#78c850}.t-electric{background:#f8d030}.t-ice{background:#98d8d8}.t-fighting{background:#c03028}.t-poison{background:#a040a0}.t-ground{background:#e0c068}.t-flying{background:#a890f0}.t-psychic{background:#f85888}.t-bug{background:#a8b820}.t-rock{background:#b8a038}.t-ghost{background:#705898}.t-dragon{background:#7038f8}.t-dark{background:#705848}.t-steel{background:#b8b8d0}.t-fairy{background:#ee99ac}
/* Team: sechs Slots (links groß, rechts fünf) */
.party { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; padding: 14px; height: 100%; min-height: 0; }
.partyright { display: grid; grid-template-rows: repeat(5, 1fr); gap: 8px; min-height: 0; }
.pslot { position: relative; display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 8px; padding: 6px 12px; background: linear-gradient(#eef4fa, #cbdae8); border: 3px solid var(--m-line); border-radius: 14px; color: var(--m-ink); cursor: pointer; min-height: 0; box-shadow: 0 3px 0 rgba(0,0,0,.25); transition: transform .08s, background .1s; }
.pslot.empty { background: rgba(0,0,0,.18); border: 3px dashed rgba(255,255,255,.25); box-shadow: none; cursor: default; }
.pslot.big { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; text-align: center; padding: 14px; }
.pslot.big .psprite img { width: min(220px, 34vh); height: min(220px, 34vh); }
.pslot.big .pmain { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.pslot.big .pflags { position: absolute; right: 12px; top: 12px; }
.pslot.focus { background: linear-gradient(#fff8dc, #ffe9a0); border-color: var(--m-red); box-shadow: 0 0 0 3px var(--m-sel), 0 3px 0 rgba(0,0,0,.25); }
.pslot.swapsrc { background: linear-gradient(#d8f0ff, #9fd0ff); border-color: #2060c0; }
/* K.O. wie im Original: Slot rötlich-grau, Sprite ausgegraut, Text gedämpft */
.pslot.fainted { background: linear-gradient(#e8d6d6, #c9b0b0); color: #6a5a5a; }
.pslot.fainted .psprite img { filter: grayscale(1) brightness(.75); }
.hudmon.fainted { opacity: .8; filter: saturate(.4); }
.hudmon.fainted img { filter: grayscale(1) brightness(.75); }
.pslot.dragging { opacity: .5; } .pslot.dragover { box-shadow: inset 0 0 0 3px #2060c0; }
.psprite { display: flex; align-items: center; justify-content: center; }
.psprite img { width: 72px; height: 72px; }
.pmain { min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
.pname { grid-column: 1; font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plv { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 700; color: #405060; white-space: nowrap; }
.phprow { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.phpnum { grid-column: 1 / -1; text-align: right; font-size: 15px; font-weight: 700; } .phpnum small { font-weight: 400; color: #506070; }
.pslot.big .phprow, .pslot.big .phpnum { width: 80%; }
.phplabel { font-size: 10px; font-weight: 900; color: #f8f8e8; background: #384860; padding: 0 4px; border-radius: 3px; line-height: 14px; font-family: system-ui, sans-serif; }
.phptrack { flex: 1; height: 10px; background: #506070; border: 2px solid #384860; border-radius: 6px; overflow: hidden; }
.phpfill { height: 100%; transition: width .4s; } .hp-g { background: #58c85a } .hp-y { background: #f0c000 } .hp-r { background: #e04040 }
.pegg { font-size: 13px; color: #506070; grid-column: 1 / -1; }
.pflags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 26px; }
.pstatus { display: inline-block; padding: 1px 6px; border-radius: 4px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; font-family: system-ui, sans-serif; }
.pstatus.st-par{background:#c8a800}.pstatus.st-psn,.pstatus.st-tox{background:#9040a0}.pstatus.st-brn{background:#e06020}.pstatus.st-slp{background:#707890}.pstatus.st-frz{background:#58a8d8}.pstatus.st-ko{background:#c03028}
.pitem { width: 24px; height: 24px; }
.gender { font-weight: 900; margin-left: 6px; font-family: system-ui, sans-serif; } .gender.m { color: #3070e0 } .gender.f { color: #e05080 }
.star { color: #e8a000; margin-right: 3px; }
/* Seitenpanels (Box-/Beutel-/Pokédex-Details) */
.sidepanel { background: var(--m-cream); border: 3px solid var(--m-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; overflow: auto; min-height: 0; }
.sname { font-size: 20px; font-weight: 700; } .ssub { font-size: 14px; color: #506070; }
.bigsprite { width: 160px; height: 160px; } .bigicon { width: 96px; height: 96px; object-fit: contain; }
.types { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
/* Box */
.boxwrap { display: grid; grid-template-columns: 1fr 300px; gap: 14px; padding: 14px; height: 100%; min-height: 0; }
.boxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-content: start; overflow: auto; padding: 4px; }
.bcell { background: linear-gradient(#eef4fa, #cbdae8); border: 3px solid var(--m-line); border-radius: 12px; padding: 6px 4px; text-align: center; cursor: pointer; }
.bcell img { width: 64px; height: 64px; display: block; margin: 0 auto; }
.bcell .bname { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bcell .blv { font-size: 12px; color: #506070; }
.bcell.focus { background: linear-gradient(#fff8dc, #ffe9a0); border-color: var(--m-red); box-shadow: 0 0 0 3px var(--m-sel); }
.bcell.fainted img { filter: grayscale(1) brightness(.7); }
/* Info-/Status-Seite */
.infowrap { display: grid; grid-template-columns: 340px 1fr; gap: 14px; padding: 14px; height: 100%; min-height: 0; }
.infoleft { background: var(--m-cream); border: 3px solid var(--m-line); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
.infohead { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; padding-bottom: 6px; border-bottom: 3px solid var(--m-line); }
.infohead .pname { min-width: 0; }
.infohead .plv { margin-left: auto; font-size: 17px; }
.infosprite { width: 100%; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 60%, #d8ecff, #7fb0e0 75%); border: 3px solid #5a7aa0; border-radius: 12px; }
.infosprite.shinybg { background: radial-gradient(circle at 50% 60%, #fff3c0, #f0c040 75%); }
.infosprite img { width: min(240px, 36vh); height: min(240px, 36vh); }
.infounder { width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.infounder .sname { font-size: 18px; }
.dexno { font-weight: 700; color: #506070; } .dexno.big { font-size: 18px; }
.infostatus { display: flex; gap: 8px; align-items: center; min-height: 26px; } .ballicon { width: 26px; height: 26px; }
.infopanel { background: var(--m-cream); border: 3px solid var(--m-line); border-radius: 14px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.infotabs { display: flex; gap: 4px; padding: 8px 10px 0; background: #dde6ee; border-bottom: 3px solid var(--m-line); }
.infotabs button { margin: 0; padding: 7px 18px; background: #b8c8d8; color: #405060; border: 3px solid var(--m-line); border-bottom: 0; border-radius: 10px 10px 0 0; font-size: 16px; font-weight: 700; }
.infotabs button.active { background: var(--m-cream); color: var(--m-ink); }
.infotabs button.focus { background: #ffe27a; border-color: var(--m-red); }
.infopage { flex: 1; overflow: auto; padding: 10px 16px; animation: screenfade .15s; }
.inforows { display: flex; flex-direction: column; }
.inforow { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 2px dotted #b0c0d0; font-size: 17px; }
.inforow > span { width: 140px; flex: none; font-weight: 700; color: #34507a; }
.inforow > b { flex: 1; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inforow > em { font-style: normal; font-size: 13px; color: #607080; width: 60px; text-align: right; }
.rowicon { width: 24px; height: 24px; }
.hearts { color: #e05080; letter-spacing: 2px; } .hearts i { color: #c0c8d0; font-style: normal; } .hearts small { color: #607080; letter-spacing: 0; margin-left: 6px; }
.infotext { color: #506070; padding: 10px 4px; }
.statrow > b small { font-weight: 400; color: #607080; }
.expbar { height: 8px; background: #506070; border: 2px solid #384860; border-radius: 6px; overflow: hidden; margin-top: 10px; } .expbar div { height: 100%; background: #4aa3ff; }
.movelist { display: flex; flex-direction: column; gap: 6px; }
.moverow { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 3px solid #b0c0d0; border-radius: 10px; font-size: 17px; cursor: pointer; }
.moverow.focus { background: #fff0b8; border-color: var(--m-red); }
.moverow.empty { color: #b0b8c0; text-align: center; border-style: dashed; grid-template-columns: 1fr; cursor: default; }
.mvname { font-weight: 700; } .mvpp { font-size: 14px; color: #506070; } .mvpp b { color: var(--m-ink); font-size: 16px; }
.movedetail { margin-top: 10px; padding: 10px 14px; background: #e8eef4; border: 3px solid var(--m-line); border-radius: 10px; min-height: 90px; }
.mvstats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: #506070; } .mvstats b { color: var(--m-ink); font-size: 16px; margin-left: 4px; }
.movedetail p { margin: 8px 0 0; font-size: 16px; } .movedetail .hint { color: #607080; }
/* Beutel: Taschen-Reiter, Liste links, Beschreibung rechts */
.bagwrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bagtabs { display: flex; gap: 6px; padding: 10px 14px 0; flex: none; }
.bagtab { margin: 0; display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: #b8c8d8; color: #405060; border: 3px solid var(--m-line); border-bottom: 0; border-radius: 12px 12px 0 0; font-size: 15px; font-weight: 700; }
.bagtab img { width: 24px; height: 24px; } .bagtab small { font-size: 12px; background: rgba(0,0,0,.15); padding: 0 6px; border-radius: 6px; }
.bagtab.active { background: var(--m-cream); color: var(--m-ink); transform: translateY(3px); }
.bagtab.focus { background: #ffe27a; border-color: var(--m-red); } .bagtab:disabled { opacity: .5; }
.bagbody { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: 14px; padding: 0 14px 14px; }
.baglist { overflow: auto; background: var(--m-cream); border: 3px solid var(--m-line); border-radius: 0 14px 14px 14px; padding: 6px; }
.bagitem { position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 7px 12px 7px 32px; border-bottom: 2px dotted #c0ccd8; font-size: 17px; cursor: pointer; border-radius: 8px; }
.bagitem:last-child { border-bottom: 0; }
.bagitem.focus { background: #fff0b8; box-shadow: inset 0 0 0 2px var(--m-red); }
.bagicon { width: 30px; height: 30px; object-fit: contain; } .bagname { font-weight: 700; } .bagqty { font-size: 15px; color: #506070; }
.bagdetail .itemdesc { margin: 4px 0; font-size: 15px; line-height: 1.35; }
/* Pokédex: Detail links, Liste rechts */
.dexwrap { display: grid; grid-template-columns: 360px 1fr; gap: 14px; padding: 14px; height: 100%; min-height: 0; }
.dexbig { width: 100%; flex: 1; min-height: 160px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 60%, #d8ecff, #7fb0e0 75%); border: 3px solid #5a7aa0; border-radius: 12px; }
.dexbig img { width: min(220px, 32vh); height: min(220px, 32vh); }
.dexbig.seen img { filter: brightness(0) opacity(.75); } .dexbig.unknown img { filter: brightness(0) opacity(.25); }
.dexstate { font-size: 15px; font-weight: 700; color: #506070; display: flex; align-items: center; gap: 6px; } .dexstate.caught { color: #c03028; }
.dexright { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.dexsearch { display: flex; align-items: center; gap: 10px; flex: none; }
.dexsearch input { flex: 1; padding: 8px 12px; background: var(--m-cream); color: var(--m-ink); border: 3px solid var(--m-line); border-radius: 10px; font: inherit; font-size: 16px; }
.dexsearch input.focus, .dexsearch input:focus { border-color: var(--m-red); outline: none; background: #fff8dc; }
.dexsearch span { color: #ffe27a; font-weight: 700; }
.dexlist { flex: 1; overflow: auto; background: var(--m-cream); border: 3px solid var(--m-line); border-radius: 14px; padding: 6px; }
.dexrow { position: relative; display: grid; grid-template-columns: 60px 1fr 28px; align-items: center; gap: 8px; padding: 5px 10px 5px 30px; border-bottom: 2px dotted #c0ccd8; font-size: 17px; cursor: pointer; border-radius: 8px; }
.dexrow.focus { background: #fff0b8; box-shadow: inset 0 0 0 2px var(--m-red); }
.dexrow.unknown { color: #a0a8b0; } .dexrow .dexname { font-weight: 700; }
i.ball { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(#e63b3b 0 45%, #222 45% 55%, #fff 55%); border: 1px solid #222; vertical-align: middle; }
/* Trainerpass (Vorder-/Rückseite mit Dreh-Animation) */
.tcardwrap { display: flex; align-items: center; justify-content: center; height: 100%; padding: 14px; perspective: 1400px; }
.tcard { width: min(760px, 100%); aspect-ratio: 1.62; max-height: 100%; cursor: pointer; position: relative; }
.tcard-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.1,.2,1); }
.tcard.back .tcard-inner { transform: rotateY(180deg); }
.tcard-face { position: absolute; inset: 0; backface-visibility: hidden; border: 4px solid #fff; border-radius: 16px; padding: 14px 20px; color: #fff; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.5); overflow: hidden; }
.tcard-back { transform: rotateY(180deg); }
.tcard.focus .tcard-face { box-shadow: 0 0 0 4px var(--m-sel), 0 14px 40px rgba(0,0,0,.5); }
.rank-green .tcard-face { background: linear-gradient(135deg, #2f8f6f, #1f5f7f); }
.rank-bronze .tcard-face { background: linear-gradient(135deg, #b87333, #7a4a1e); }
.rank-silver .tcard-face { background: linear-gradient(135deg, #c8d0d8, #7a8a9a); color: #203040; }
.rank-gold .tcard-face { background: linear-gradient(135deg, #f0c040, #a07010); }
.rank-black .tcard-face { background: linear-gradient(135deg, #3a3a4a, #101018); }
.tcard-head { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; letter-spacing: 2px; border-bottom: 3px solid rgba(255,255,255,.5); padding-bottom: 6px; text-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.tcard-body { flex: 1; display: flex; gap: 16px; min-height: 0; }
.tcard-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.tcard-rows > div { display: flex; justify-content: space-between; align-items: baseline; background: rgba(0,0,0,.22); border-radius: 8px; padding: 6px 12px; font-size: 18px; }
.tcard-rows > div span { font-size: 13px; letter-spacing: 1px; opacity: .85; } .tcard-rows > div b { font-size: 19px; } .tcard-rows small { font-size: 12px; opacity: .8; }
.tcard-rows.two { display: grid; grid-template-columns: 1fr 1fr; flex: 1; align-content: center; }
.tcard-sprite { width: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.18); border-radius: 12px; }
.tsprite { display: block; width: 32px; height: 32px; background-repeat: no-repeat; background-position: -32px 0; background-size: 96px 128px; image-rendering: pixelated; transform: scale(3.2); transform-origin: center; margin: 40px 0; }
.tchamp { background: #ffd84a; color: #5a3a00; font-weight: 900; padding: 2px 10px; border-radius: 6px; letter-spacing: 2px; }
.gmtag { font-style: normal; font-size: 12px; background: #ffd84a; color: #5a3a00; padding: 0 6px; border-radius: 4px; margin-left: 6px; }
.tcard-badges { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.tbadge { background: rgba(0,0,0,.25); border-radius: 10px; text-align: center; padding: 6px 2px 4px; opacity: .35; filter: grayscale(1); }
.tbadge.won { opacity: 1; filter: none; background: rgba(255,255,255,.22); box-shadow: 0 0 0 2px var(--m-sel) inset; }
.tbadge img { width: 34px; height: 34px; display: block; margin: 0 auto; } .tbadge small { font-size: 10px; letter-spacing: .5px; }
.tcard-team { display: flex; gap: 8px; justify-content: center; }
.tcard-team div { background: rgba(0,0,0,.25); border-radius: 8px; padding: 4px; text-align: center; } .tcard-team img { width: 56px; height: 56px; display: block; } .tcard-team small { font-size: 11px; }
.shinytext { color: #ffe27a; }
/* Optionen */
.optwrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; padding: 14px; height: 100%; min-height: 0; }
.optpanel { background: var(--m-cream); border: 3px solid var(--m-line); border-radius: 14px; padding: 10px 14px; overflow: auto; min-height: 0; }
.optpanel h3 { margin: 6px 0 6px; font-size: 15px; letter-spacing: 2px; color: #34507a; border-bottom: 3px solid var(--m-line); padding-bottom: 4px; }
.optrow { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 7px 10px 7px 30px; border-bottom: 2px dotted #c0ccd8; font-size: 16px; cursor: pointer; border-radius: 8px; }
.optrow.focus { background: #fff0b8; box-shadow: inset 0 0 0 2px var(--m-red); }
.optlabel { font-weight: 700; } .optval { color: #34507a; font-weight: 700; } .optact { font-size: 12px; font-weight: 700; color: #fff; background: #4a5a70; padding: 2px 8px; border-radius: 6px; letter-spacing: .5px; }
.opthint { font-size: 14px; color: #506070; margin: 4px 0 10px; line-height: 1.4; }
/* HUD-Seitenleiste rechts (Team-Kurzansicht + Schnellzugriff) */
#side { width: 236px; gap: 8px; font-family: "DotGothic16", "Segoe UI", system-ui, sans-serif; }
#side .panel { background: rgba(248,248,240,.94); border: 3px solid #4a5a70; border-radius: 12px; color: #203040; padding: 8px 10px; }
#side .panel h2 { font-size: 14px; letter-spacing: 2px; color: #34507a; border-bottom: 2px solid #4a5a70; padding-bottom: 3px; margin-bottom: 6px; }
#side .panel h2 .muted { color: #607080; letter-spacing: 0; }
#side .panel li { border-bottom: 2px dotted #c0ccd8; padding: 4px 2px; }
#side .panel li img { image-rendering: pixelated; }
.hudmon { cursor: pointer; border-radius: 8px; } .hudmon:hover { background: #fff0b8; }
.hudmon img { width: 40px; height: 40px; }
.hudmon .hname { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; } .hudmon .hname .plv { font-size: 12px; margin-left: auto; }
.hudmon .phprow { margin-top: 2px; } .hudmon .phptrack { height: 8px; }
.hudmon .hhp { font-size: 11px; color: #506070; display: flex; justify-content: space-between; align-items: center; }
#side .badge { background: #4a5a70; color: #fff; }
#bag li { font-size: 13px; } #bag li button { margin: 0; padding: 2px 8px; font-size: 11px; background: #e8483e; }
#bag li img { width: 24px; height: 24px; }
#bag .muted { color: #607080; }
#rates { color: #506070; font-size: 11px; margin-top: 4px; line-height: 1.35; }
/* Kleine Fenster (1280×720): Spalten schmaler, Sprites kleiner */
@media (max-width: 1366px), (max-height: 760px) {
  #menu { font-size: 15px; }
  .infowrap { grid-template-columns: 300px 1fr; } .dexwrap { grid-template-columns: 300px 1fr; } .bagbody { grid-template-columns: 1fr 300px; } .boxwrap { grid-template-columns: 1fr 260px; }
  .pslot.big .psprite img { width: min(180px, 30vh); height: min(180px, 30vh); }
  .psprite img { width: 60px; height: 60px; } .pslot { grid-template-columns: 64px 1fr auto; padding: 4px 10px; }
  .menuhead { font-size: 21px; padding: 6px 16px; } .menufoot { min-height: 52px; } .menufoot .msg { font-size: 17px; }
  .tcard { width: min(640px, 100%); }
}

/* Kampf-Agent II */
/* Gegnerischer Trainer auf dem Podest (Overworld-Sheet 96×128, Zelle "runter/stehen" = Spalte 2, Zeile 1; Größe über --s) */
.b-trainer2 { --s: min(26vh, 230px); position: absolute; left: 73.5%; top: 59.5%; translate: -50% -100%; width: var(--s); height: var(--s); background-repeat: no-repeat; background-size: calc(var(--s) * 3) calc(var(--s) * 4); background-position: calc(var(--s) * -1) 0; image-rendering: pixelated; z-index: 3; filter: drop-shadow(0 8px 6px rgba(0,0,0,.35)); pointer-events: none; }
.b-trainer2.b-hidden { opacity: 0; }
.b-trainer2.b-tin { animation: bslidein .75s cubic-bezier(.2,.8,.3,1) both; }
.b-trainer2.b-tout { animation: btout .48s ease-in both; }
@keyframes btout { from { transform: none; opacity: 1 } to { transform: translateX(220%); opacity: 0 } }
/* Kleine Fenster (1280×720): Panels etwas schmaler, Menü-Spalten kompakter */
@media (max-width: 1366px), (max-height: 760px) {
  .b-panel { width: clamp(270px, 27vw, 360px); }
  .b-player-panel { width: clamp(290px, 29vw, 380px); }
  .b-moves { grid-template-columns: 1fr 1fr 100px; }
  .b-list { grid-template-columns: repeat(3, 1fr) 100px; }
  .b-vs-ring { width: 140px; height: 140px; }
}

/* Tageszeit & Wetter (über der 3D-Welt, unter dem HUD) */
#tint { position: fixed; inset: 0; pointer-events: none; z-index: 5; transition: background 2s; }
#tint.tint-night { background: rgba(10, 20, 60, .38); }
#tint.tint-evening { background: rgba(120, 60, 20, .18); }
#tint.tint-morning { background: rgba(255, 200, 120, .08); }
#tint.weather-rain { box-shadow: inset 0 0 0 100vmax rgba(40, 60, 90, .22); }
#tint.weather-fog { box-shadow: inset 0 0 0 100vmax rgba(220, 225, 235, .28); }
#tint.weather-sun { box-shadow: inset 0 0 0 100vmax rgba(255, 240, 180, .10); }
#rain { position: fixed; inset: -20% 0 0 0; pointer-events: none; z-index: 6; background-image: repeating-linear-gradient(115deg, transparent 0 22px, rgba(200, 220, 255, .28) 22px 24px); background-size: 120px 120px; animation: rainfall .45s linear infinite; opacity: .7; }
@keyframes rainfall { from { background-position: 0 0; } to { background-position: -40px 120px; } }

/* Optik-Agent */
/* Kartenwechsel-Blende: liegt über Welt und Tönung, unter dem HUD (z-index 10); .on = schwarz, .snap = ohne Übergang */
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 7; transition: opacity .32s ease-out; }
#fade.on { opacity: 1; }
#fade.snap { transition: none; }
/* Dunkle Höhle (Felstunnel): Lichtkreis um die Spielfigur (Bildmitte), Blitz weitet ihn */
#dark { position: fixed; inset: 0; pointer-events: none; z-index: 6; background: radial-gradient(circle at 50% 52%, transparent 0, transparent 90px, rgba(0,0,0,.6) 130px, rgba(0,0,0,.97) 200px); transition: background .6s; }
#dark.flash { background: radial-gradient(circle at 50% 52%, transparent 0, transparent 300px, rgba(0,0,0,.45) 420px, rgba(0,0,0,.85) 640px); }