:root {
  --bg: #1b1b1b;
  --panel: #c6c6c6;
  --panel-dark: #8b8b8b;
  --slot: #8b8b8b;
  --slot-hi: #b5b5b5;
  --text: #fff;
  --accent: #5b8f3a;
  --font: 'Courier New', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--text); font-family: var(--font); user-select: none; -webkit-user-select: none; touch-action: none; }
#game canvas { display: block; width: 100vw; height: 100vh; image-rendering: pixelated; }
img { image-rendering: pixelated; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); mix-blend-mode: difference; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: #fff; }
#crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }
#crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }
#bottom { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
#stats { width: 364px; display: flex; justify-content: space-between; }
#stats .row { display: flex; flex-direction: column; gap: 1px; }
#stats .row.right { align-items: flex-end; justify-content: flex-end; }
#hearts, #food, #air { display: flex; height: 18px; }
#hearts img, #food img, #air img, #armorbar img { width: 18px; height: 18px; margin-right: -1px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.4)); }
#xpbar { width: 364px; height: 6px; background: #222; border: 1px solid #000; position: relative; }
#xpfill { height: 100%; background: #7cfc00; width: 0; }
#xplevel { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); color: #7cfc00; font-weight: bold; font-size: 15px; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#hotbar { display: flex; background: rgba(0,0,0,.45); border: 2px solid #111; padding: 1px; }
#hotbar .slot { width: 40px; height: 40px; background: rgba(139,139,139,.35); border: 2px solid transparent; margin: 0; pointer-events: auto; }
#hotbar .slot.sel { border-color: #fff; outline: 2px solid #000; z-index: 1; }
#itemname { position: absolute; bottom: 106px; left: 50%; transform: translateX(-50%); font-weight: bold; text-shadow: 2px 2px 0 #3f3f3f; opacity: 0; font-size: 16px; }
#itemname.fade { animation: fadename 2.5s forwards; }
@keyframes fadename { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
#minimapbox { position: absolute; right: 10px; top: 10px; border: 3px solid #333; background: #000; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
#minimap { display: block; width: 150px; height: 150px; image-rendering: pixelated; }
#coords { font-size: 12px; text-align: center; background: rgba(0,0,0,.7); padding: 2px; }
#maplegend { width: 150px; box-sizing: border-box; font-size: 11px; line-height: 15px; background: rgba(0,0,0,.7); padding: 2px 5px 3px; }
#maplegend span { display: block; white-space: nowrap; }
#maplegend i { display: inline-block; width: 14px; height: 4px; margin: 0 5px 2px 0; vertical-align: middle; border: 1px solid #000; }
#debug { position: absolute; left: 6px; top: 6px; margin: 0; font-size: 13px; line-height: 1.35; background: rgba(0,0,0,.45); padding: 6px 8px; white-space: pre; }
#chat { position: absolute; left: 6px; bottom: 90px; width: min(520px, 60vw); }
#chatlog { max-height: 40vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
#chatlog div { background: rgba(0,0,0,.45); padding: 2px 6px; font-size: 14px; transition: opacity 1s; word-wrap: break-word; }
#chatlog div.old { opacity: 0; }
#chatinput { display: none; width: 100%; background: rgba(0,0,0,.65); color: #fff; border: none; font: 15px var(--font); padding: 6px; outline: none; pointer-events: auto; }
#chat.open #chatinput { display: block; }
#chat.open #chatlog { overflow-y: auto; pointer-events: auto; }
#hurt { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(255,0,0,.55)); opacity: 0; }
#hurt.on { animation: hurt .5s; }
@keyframes hurt { 0% { opacity: 1; } 100% { opacity: 0; } }
#underwater { position: fixed; inset: 0; pointer-events: none; background: rgba(20,50,160,.25); display: none; }
#fire { position: fixed; inset: 0; pointer-events: none; display: none; background: linear-gradient(to top, rgba(255,110,0,.55), rgba(255,200,0,.15) 30%, transparent 50%); animation: flicker .2s infinite alternate; }
#portalfx { position: fixed; inset: -4%; pointer-events: none; opacity: 0; z-index: 5; background: radial-gradient(ellipse at center, rgba(150,60,255,.35) 0%, rgba(110,20,210,.65) 55%, rgba(50,0,110,.92) 100%); mix-blend-mode: screen; transition: opacity .15s; }
@keyframes flicker { from { opacity: .7; } to { opacity: 1; } }

/* ---------- Slots & Bildschirme ---------- */
.slot { position: relative; width: 40px; height: 40px; background: var(--slot); border: 2px solid; border-color: #373737 #fff #fff #373737; display: flex; align-items: center; justify-content: center; }
.slot img { width: 32px; height: 32px; pointer-events: none; }
.slot .cnt { position: absolute; right: 1px; bottom: -1px; font-size: 14px; font-weight: bold; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; pointer-events: none; }
.slot .dur { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; background: #000; pointer-events: none; }
.slot .dur i { display: block; height: 100%; }
/* Add-ons einer Waffe: kleine Symbole oben links (addons.js) */
.slot .addb { position: absolute; left: 1px; top: 1px; display: flex; gap: 1px; pointer-events: none; }
.slot .addb img { width: 11px !important; height: 11px !important; background: #0008; border-radius: 2px; image-rendering: pixelated; }
#screen .slot:hover { background: var(--slot-hi); }
.slot.big { width: 52px; height: 52px; }
#screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 10; }
#screen.show { display: flex; }
.panel { background: var(--panel); color: #3f3f3f; border: 3px solid; border-color: #fff #555 #555 #fff; padding: 12px; box-shadow: 0 0 0 2px #000; max-height: 96vh; overflow: auto; }
.panel .title { font-weight: bold; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.cols { display: flex; gap: 14px; }
.grid9 { display: grid; grid-template-columns: repeat(9, 40px); gap: 0; }
.grid9.hot { margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 40px); }
.grid3 { display: grid; grid-template-columns: repeat(3, 40px); }
.craftrow { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px 40px; }
.arrow { font-size: 30px; color: #555; }
.sep { margin: 8px 0; display: flex; gap: 6px; }
.tab { font: bold 12px var(--font); background: #a0a0a0; border: 2px solid; border-color: #fff #555 #555 #fff; padding: 3px 8px; cursor: pointer; color: #222; }
.tab:hover { background: #b8b8ff; }
.book { width: 250px; background: #b0b0b0; border: 2px solid; border-color: #555 #fff #fff #555; padding: 6px; display: flex; flex-direction: column; }
.bookhead { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.bookgrid { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 2px; overflow-y: auto; max-height: 340px; align-content: start; flex: 1; }
.slot.rec { cursor: pointer; }
.slot.rec.dim { opacity: .35; }
.hint { font-size: 11px; margin-top: 6px; color: #444; }
.creative { display: grid; grid-template-columns: repeat(9, 40px); max-height: 240px; overflow-y: auto; margin: 6px 0; }
/* Kreativ-Tabs */
.ctabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0 2px; }
.ctab { width: 32px; height: 32px; padding: 3px; background: #8b8b8b; border: 2px solid; border-color: #fff #555 #555 #fff; cursor: pointer; }
.ctab img { width: 22px; height: 22px; image-rendering: pixelated; display: block; }
.ctab:hover { background: #b8b8ff; }
.ctab.on { background: #e6c35c; border-color: #555 #fff #fff #555; }
.crar { grid-column: 1 / -1; font: bold 12px var(--font); padding: 4px 2px 2px; text-shadow: 1px 1px 0 #222; }
.ctabname { font: bold 13px var(--font); margin: 2px 0 4px; color: #333; }
#csearch { width: 100%; font: 14px var(--font); padding: 4px; border: 2px solid #555; background: #eee; }
.furnace { display: flex; align-items: center; gap: 20px; margin: 8px 0 12px 80px; }
.fcol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flame { width: 20px; height: 22px; background: #555; display: flex; align-items: flex-end; }
.flame i { display: block; width: 100%; background: linear-gradient(#ffd23a, #ff6a00); }
.progress { width: 60px; height: 14px; background: #555; }
.progress i { display: block; height: 100%; background: #fff; }
#cursorstack { position: fixed; pointer-events: none; z-index: 30; transform: translate(-50%, -50%); }
#cursorstack img { width: 32px; height: 32px; display: block; }
#cursorstack .cnt { position: absolute; right: -4px; bottom: -4px; font-weight: bold; text-shadow: 2px 2px 0 #3f3f3f; }
#tooltip { position: fixed; display: none; z-index: 40; background: rgba(16,0,16,.94); border: 2px solid #2d0a63; color: #fff; padding: 4px 8px; font-size: 14px; pointer-events: none; max-width: 260px; }

/* ---------- Menüs ---------- */
#menu, #loading, #pause, #death, #help, #glerror { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; }
#menu { background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.6)), repeating-linear-gradient(45deg, #5d4430 0 16px, #6b4f38 16px 32px); }
#loading { display: none; flex-direction: column; gap: 14px; background: #2a1e14; }
#pause, #death { display: none; background: rgba(0,0,0,.6); }
#death { background: rgba(120,0,0,.45); }
#help { display: none; z-index: 50; background: rgba(0,0,0,.7); }
#help.show { display: flex; }
.menubox { background: rgba(0,0,0,.6); border: 2px solid #555; padding: 24px 28px; text-align: center; max-width: 94vw; max-height: 94vh; overflow: auto; }
h1 { font-size: 64px; margin: 0; color: #ddd; text-shadow: 4px 4px 0 #3f3f3f; letter-spacing: 2px; }
h2 { margin: 0 0 14px; }
.sub { color: #ff5; margin-top: 4px; }
.small { font-size: 12px; color: #bbb; max-width: 420px; margin: 14px auto 0; }
#name { display: block; margin: 18px auto 10px; width: 260px; font: 18px var(--font); padding: 8px; background: #000; color: #fff; border: 2px solid #a0a0a0; text-align: center; }
.btn { display: block; margin: 8px auto; width: 260px; font: bold 17px var(--font); padding: 10px; background: #6f6f6f; color: #fff; border: 2px solid; border-color: #aaa #333 #333 #aaa; cursor: pointer; text-shadow: 2px 2px 0 #333; }
.btn:hover { background: #7c86c9; }
.btn.secondary { background: #555; font-size: 14px; }
.settings { display: grid; gap: 10px; margin: 16px 0; text-align: left; width: 320px; }
.settings label { display: flex; flex-direction: column; font-size: 14px; }
.settings label span { float: right; color: #ff5; }
.settings input[type=range] { width: 100%; }
.checks { display: flex; gap: 12px; flex-wrap: wrap; }
.checks label { flex-direction: row; gap: 4px; align-items: center; }
#help table { text-align: left; border-collapse: collapse; font-size: 14px; }
#help td { padding: 3px 10px; border-bottom: 1px solid #333; }
#help td:first-child { color: #ff5; white-space: nowrap; }
.spinner { width: 48px; height: 48px; background: #68aa3e; animation: spin 1s infinite steps(4); box-shadow: inset 0 -30px 0 #866043; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Touch ---------- */
#touch { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#touch button { pointer-events: auto; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.5); color: #fff; font-size: 22px; border-radius: 10px; }
#touch button.on { background: rgba(255,255,100,.45); }
#joy { position: absolute; left: 24px; bottom: 90px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.4); pointer-events: auto; }
#joyknob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.5); }
#tbtns { position: absolute; right: 18px; bottom: 90px; display: grid; grid-template-columns: 64px 64px; gap: 10px; }
#tbtns button { width: 64px; height: 64px; }
#tjump { grid-column: 1 / span 2; width: 100% !important; }
#ttop { position: absolute; right: 180px; top: 10px; display: flex; gap: 8px; }
#ttop button { width: 46px; height: 46px; font-size: 18px; }

@media (max-width: 700px) {
  #stats, #xpbar { width: 300px; }
  #hotbar .slot { width: 34px; height: 34px; }
  .slot img { width: 26px; height: 26px; }
  #minimapbox { transform: scale(.7); transform-origin: top right; }
  .grid9, .creative { grid-template-columns: repeat(9, 34px); }
  .grid9 .slot, .creative .slot { width: 34px; height: 34px; }
  .cols { flex-direction: column; }
  .book { width: 100%; }
  h1 { font-size: 40px; }
}
#glerror { display: none; z-index: 60; background: #2a1e14; }
#glerror ol { line-height: 1.5; padding-left: 20px; }
#glerror code { background: #000; padding: 1px 4px; color: #ff5; }

.keybox { text-align: left; width: 320px; margin: 0 auto 10px; font-size: 14px; }
.keybox summary { cursor: pointer; color: #ff5; margin-bottom: 6px; }
.keyrow { display: flex; justify-content: space-between; align-items: center; margin: 3px 0; }
.keyrow .tab { min-width: 150px; }

.menu-main { width: min(560px, 94vw); }
.menu-main h3 { margin: 18px 0 10px; font-size: 16px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pick { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; }
.pickrow { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.07); border: 2px solid #555; padding: 8px 10px; cursor: pointer; text-align: left; }
.pickrow:hover { border-color: #aaa; background: rgba(255,255,255,.14); }
.pickrow .main { flex: 1; }
.pickrow b { font-size: 16px; }
.pickrow small { display: block; color: #aaa; font-size: 12px; margin-top: 2px; }
.pickrow .del { background: #6a2020; border: 2px solid #a44; color: #fff; font: bold 12px var(--font); padding: 4px 8px; cursor: pointer; }
.pickrow .badge { color: #7f7; font-size: 12px; }
.empty { color: #aaa; font-size: 14px; padding: 8px; }
.newrow { display: flex; gap: 6px; margin-top: 10px; }
.newrow input, .newworld input, .newworld select { flex: 1; font: 15px var(--font); padding: 8px; background: #000; color: #fff; border: 2px solid #a0a0a0; min-width: 0; }
.small-btn { width: auto !important; margin: 0 !important; padding: 8px 14px !important; font-size: 14px !important; }
#newworldbox { margin-top: 12px; text-align: left; }
#newworldbox summary { cursor: pointer; color: #ff5; font-weight: bold; }
.newworld { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.err { color: #f77; min-height: 1em; margin: 10px 0 0; }
#kicked { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 70; background: rgba(0,0,0,.8); }

/* Biomsuche */
#locmark { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.55); padding: 4px 12px; border-radius: 3px; font-size: 15px; text-shadow: 1px 1px 0 #000; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
#locmark .arrow { display: inline-block; color: #e040fb; font-size: 16px; }
.locpanel { width: min(760px, 94vw); }
.locpanel .title small { font-weight: normal; }
#lsearch { width: 100%; box-sizing: border-box; font: 14px var(--font); padding: 5px 8px; margin-bottom: 8px; border: 2px solid #555; }
.locstatus { background: #d8d8d8; border: 2px solid; border-color: #555 #fff #fff #555; padding: 6px 8px; margin-bottom: 8px; min-height: 22px; line-height: 1.8; }
.lochead { font-weight: bold; margin: 10px 0 4px; }
.loclist { display: flex; flex-wrap: wrap; gap: 4px; }
.tab.loc.here { background: #9ed49e; }
.tab.loc.na { opacity: 0.45; text-decoration: line-through; }
.tab.loc.busy { background: #e6c35c; }
.locstufe { font-size: 13px; margin: 8px 0 3px; padding-left: 6px; border-left: 5px solid #888; }
.locstufe.lv1 { border-left-color: #5aa84a; } .locstufe.lv2 { border-left-color: #b5a331; } .locstufe.lv3 { border-left-color: #e0901f; }
.locstufe.lv4 { border-left-color: #d9582b; } .locstufe.lv5 { border-left-color: #c01e3a; } .locstufe.lv6 { border-left-color: #8a1030; } .locstufe.lv7 { border-left-color: #4a0a1a; }
.tab.loc .lvr { font-size: 10px; opacity: .7; margin-left: 5px; }
.locpanel .small { font-size: 12px; margin-top: 8px; color: #444; }

/* Befehlsvorschläge */
#cmdsug { position: absolute; left: 0; right: 0; bottom: 30px; background: rgba(12,12,16,.93); border: 1px solid #555; font-size: 13px; pointer-events: auto; z-index: 2; }
#cmdsug .sughead { padding: 5px 8px 0; color: #ddd; font-size: 14px; }
#cmdsug .sughead b { color: #ffdd55; }
#cmdsug .sughead.err { color: #f88; }
#cmdsug .sugsub { padding: 1px 8px 5px; color: #9ab; font-size: 12px; border-bottom: 1px solid #333; }
#cmdsug .suglist { max-height: min(42vh, 330px); overflow-y: auto; }
#cmdsug .sugrow { display: flex; gap: 12px; padding: 3px 8px; cursor: pointer; align-items: baseline; }
#cmdsug .sugrow:hover { background: rgba(255,255,255,.08); }
#cmdsug .sugrow.sel { background: rgba(120,140,255,.35); }
#cmdsug .sugl { color: #fff; white-space: nowrap; }
#cmdsug .sugrow.goal .sugl { color: #9f9; }
#cmdsug .sugd { color: #aaa; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cmdsug .sugfoot { padding: 3px 8px; color: #777; font-size: 11px; border-top: 1px solid #333; }

/* F1: nur die Welt zeigen */
body.nogui #hud, body.nogui #touch, body.nogui #hurt, body.nogui #fire, body.nogui #help { display: none !important; }

/* Auto-Anzeige */
#carhud { position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%); display: none; pointer-events: none; text-shadow: 1px 1px 0 #000; }
#carhud .gear { position: absolute; left: -64px; top: 0; width: 54px; height: 54px; border: 3px solid #ddd; border-radius: 50%; background: rgba(0,0,0,.55); font: bold 32px monospace; display: flex; align-items: center; justify-content: center; color: #fff; }
#carhud .gear.off { color: #f55; border-color: #a33; }
#carhud .info { background: rgba(0,0,0,.5); padding: 4px 10px; border-radius: 4px; min-width: 230px; }
#carhud .spd { font: bold 20px monospace; }
#carhud .spd small { font-size: 12px; opacity: .8; }
#carhud .rpm { position: relative; height: 7px; background: #333; margin: 3px 0; }
#carhud .rpm i { display: block; height: 100%; background: linear-gradient(90deg, #4c4, #ee4); }
#carhud .rpm i.red { background: #e33; }
#carhud .rpm b { position: absolute; left: 83%; top: 0; bottom: 0; right: 0; background: rgba(220,40,40,.35); }
#carhud .row { display: flex; gap: 10px; align-items: center; font-size: 12px; }
#carhud .hp { flex: 1; height: 5px; background: #333; }
#carhud .hp i { display: block; height: 100%; background: #5ad; }
#carhud .hp i.red { background: #e33; }
#carhud .hint { text-align: center; margin-top: 4px; font-size: 13px; color: #ffd76a; min-height: 16px; white-space: nowrap; }

/* Kreatur im Fadenkreuz */
#mobinfo { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); min-width: 190px; padding: 5px 10px 7px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; text-align: center; font-size: 14px; pointer-events: none; text-shadow: 1px 1px 0 #000; }
#mobinfo .mn { display: flex; justify-content: center; gap: 8px; align-items: baseline; }
#mobkind { font-size: 11px; opacity: .8; }
#mobinfo .mbar { height: 5px; margin-top: 4px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
#mobhp { height: 100%; width: 100%; background: #5c5; transition: width .15s; }
#mobinfo.k-hostile #mobname { color: #ff8a80; } #mobinfo.k-hostile #mobhp { background: #e53935; }
#mobinfo.k-predator #mobname, #mobinfo.k-territorial #mobname { color: #ffcc80; } #mobinfo.k-predator #mobhp, #mobinfo.k-territorial #mobhp { background: #fb8c00; }
#mobinfo.k-neutral #mobname { color: #fff59d; } #mobinfo.k-neutral #mobhp { background: #fdd835; }
#effects { position: absolute; bottom: 112px; left: 50%; transform: translateX(-50%); font-size: 14px; color: #cfe; text-shadow: 1px 1px 0 #000; pointer-events: none; white-space: nowrap; }
body.nogui #mobinfo, body.nogui #effects { display: none !important; }

/* Kreaturen-Auswahl (Taste B) */
.bestpanel { width: min(980px, 96vw); }
.bestpanel .title small { font-weight: normal; }
.besttabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.tab.btab { font-size: 15px; padding: 5px 14px; }
.tab.btab.on { background: #9ed49e; }
.tab.btab.mon.on { background: #d49e9e; }
.bcount { margin-left: auto; display: flex; gap: 3px; align-items: center; }
.bcount .tab.on { background: #e6c35c; }
.bhere { font-size: 13px; display: flex; align-items: center; gap: 4px; }
#bsearch { width: 100%; box-sizing: border-box; font: 14px var(--font); padding: 5px 8px; margin-bottom: 8px; border: 2px solid #555; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.bcard { position: relative; border: 2px solid; border-color: #fff #555 #555 #fff; background: linear-gradient(#b9d6ec, #9cc0dc); color: #222; }
.bcard .bsum { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 4px 3px 5px; border: 0; background: none; cursor: pointer; font: 12px var(--font); color: inherit; }
.bcard:hover { filter: brightness(1.12); }
.bcard .bsum:active { transform: translateY(1px); }
.bcard .binfo { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0,0,0,.55); background: rgba(255,255,255,.85); font: bold italic 13px Georgia, serif; color: #1a4a8a; line-height: 14px; padding: 0; cursor: pointer; }
.bcard .binfo:hover { background: #fff; transform: scale(1.12); }
.bcard img { width: 96px; height: 96px; }
.bcard img[src=""] { visibility: hidden; }
.bcard .bn { font-weight: bold; text-align: center; line-height: 1.15; }
.bcard .bk { font-size: 10px; opacity: .75; }
.bcard.k-bug { background: linear-gradient(#c4dcb8, #a6c69a); }
.bcard.k-predator, .bcard.k-territorial { background: linear-gradient(#ecd6b4, #d8bc92); }
.bcard.k-hostile, .bcard.mon { background: linear-gradient(#6e5c72, #4c3e52); color: #f2e6f4; }
/* Kartenfarbe nach Gefährlichkeit */
.bcard.t-aggressiv { background: linear-gradient(#f0a8a0, #d9776d); color: #2a0e0b; }
.bcard.t-passiv { background: linear-gradient(#f5e39a, #e2c65c); color: #2a2206; }
.bcard.t-friedlich { background: linear-gradient(#bfe3a8, #93c879); color: #102a0a; }
.bcard.here { outline: 3px solid #3fbf3f; outline-offset: -3px; }

/* Steckbrief */
.binfopanel .title { display: flex; align-items: center; gap: 8px; }
.bihead { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(#b9d6ec, #9cc0dc); border: 2px solid; border-color: #555 #fff #fff #555; padding: 8px; margin-bottom: 8px; }
.bihead.mon { background: linear-gradient(#6e5c72, #4c3e52); color: #f2e6f4; }
.bihead img { width: 160px; height: 160px; flex: none; }
.bihead img[src=""] { visibility: hidden; }
.bihead p { margin: 2px 0 8px; line-height: 1.4; }
.bdiffs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.bdiffs .tab { color: #222; }
.bdiffs .tab.on.bd0 { background: #a8d8f0; } .bdiffs .tab.on.bd1 { background: #9ed49e; } .bdiffs .tab.on.bd2 { background: #e6c35c; } .bdiffs .tab.on.bd3 { background: #e08a7a; }
.bsumline { font-size: 14px; }
.bact .tab { color: #222; }
.btable { width: 100%; border-collapse: collapse; font-size: 13px; }
.btable th { text-align: left; vertical-align: top; width: 150px; padding: 5px 8px; background: #cfcfcf; border-bottom: 1px solid #aaa; white-space: nowrap; }
.btable td { padding: 5px 8px; border-bottom: 1px solid #bbb; line-height: 1.4; }
.btable tr:nth-child(odd) td { background: rgba(255,255,255,.35); }
@media (max-width: 640px) { .bihead { flex-direction: column; } .btable th { width: auto; white-space: normal; } }
.bact .small { color: #223; font-size: 12px; } .bihead.mon .bact .small { color: #e8dcec; }
.bsort { font-size: 13px; display: flex; align-items: center; gap: 4px; }
.bsort select { font: 13px var(--font); padding: 2px 4px; }
.bcard .brank { position: absolute; top: 3px; left: 3px; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px; background: rgba(0,0,0,.7); color: #fff; font: bold 11px/18px var(--font); }
.bcard .bst { display: flex; gap: 5px; font-size: 10px; opacity: .85; margin-top: 1px; }
.bcard .bst .hi { font-weight: bold; opacity: 1; text-decoration: underline; }

/* Rüstung */
.armorcol { display: flex; flex-direction: column; gap: 2px; margin-right: 14px; align-items: center; }
.slot.armorslot .ph { opacity: .22; filter: grayscale(1); }
.armorinfo { font-size: 12px; text-align: center; margin-top: 4px; line-height: 1.25; }
#armorbar { display: flex; min-height: 0; }
#armorbar img { image-rendering: pixelated; }

/* Gefahren-Sterne */
.bcard .bstars, #mobstars { font-size: 11px; letter-spacing: 1px; }
#mobstars { font-size: 13px; }
.bstars.d1, #mobstars.d1 { color: #7ec060; } .bstars.d2, #mobstars.d2 { color: #d8c440; } .bstars.d3, #mobstars.d3 { color: #f0a030; } .bstars.d4, #mobstars.d4 { color: #f06a3a; } .bstars.d5, #mobstars.d5 { color: #ff3a5a; }
.bcard .bstars { text-shadow: 0 1px 0 rgba(0,0,0,.45); }

.bcard .brar { font-size: 10px; font-weight: bold; }
.brar.r5 { color: #555; } .brar.r4 { color: #2e7a3a; } .brar.r3 { color: #1f5fa0; } .brar.r2 { color: #7a2aa8; } .brar.r1 { color: #b06a00; }
.bcard.mon .brar.r5 { color: #ddd; } .bcard.mon .brar.r4 { color: #8fe09a; } .bcard.mon .brar.r3 { color: #8cc4ff; } .bcard.mon .brar.r2 { color: #d6a2ff; } .bcard.mon .brar.r1 { color: #ffc060; }

/* Spawn im Detail (Steckbrief im Spiel) */
.binfopanel .spawnbox { margin-top: 10px; background: #d8d8d8; border: 2px solid; border-color: #555 #fff #fff #555; padding: 8px 10px; font-size: 13px; }
.binfopanel .spawnbox h3 { margin: 0 0 4px; font-size: 15px; } .binfopanel .spawnbox h4 { margin: 10px 0 4px; font-size: 13px; }
.binfopanel .scond { margin: 0; padding-left: 18px; } .binfopanel .scond li { margin: 2px 0; }
.binfopanel .splace { border-top: 1px solid #aaa; padding: 6px 0 2px; } .binfopanel .splace p { margin: 2px 0; }
.binfopanel .stype { font-size: 11px; color: #555; } .binfopanel .snote { color: #a02020; font-weight: bold; }
.binfopanel .sbar { height: 5px; background: #bbb; margin: 4px 0; } .binfopanel .sbar i { display: block; height: 100%; background: #3c8d3c; }
.binfopanel .scomp { color: #444; font-size: 12px; }

/* Steckbrief: Größenvergleich mit Steve */
.biimg { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.biimg.cmp img { width: 256px; height: 160px; }
.bsteve { font-size: 12px; padding: 2px 8px; color: #222; }
.bsteve.on { background: #7fd0d6; }

/* Endkampf: Bossleiste und Abspann */
#bossbar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: min(460px, 70vw); text-align: center; pointer-events: none; text-shadow: 1px 1px 0 #000; font-size: 14px; color: #f0d8ff; }
#bossbar .bbar { height: 9px; margin-top: 3px; background: rgba(40,0,50,.7); border: 1px solid rgba(255,255,255,.35); }
#bossfill { height: 100%; width: 100%; background: linear-gradient(#f06cff, #a01ec0); transition: width .2s; }
body.boss #mobinfo { top: 44px; }
#credits { position: fixed; inset: 0; z-index: 40; background: #000; color: #e8e0f0; display: flex; justify-content: center; overflow: hidden; }
#creditsroll { position: absolute; top: 100%; width: min(760px, 92vw); text-align: center; font-size: 19px; line-height: 1.6; animation: creditsroll 42s linear forwards; }
#creditsroll h1 { font-size: 46px; color: #d9a6ff; margin: 0 0 30px; letter-spacing: 4px; }
#creditsroll h2 { font-size: 30px; color: #9fe; margin: 70px 0 10px; }
#creditsroll p { margin: 0 0 34px; }
#creditsroll p.big { font-size: 24px; color: #fff; }
#creditsskip { position: absolute; right: 20px; bottom: 20px; z-index: 41; }
@keyframes creditsroll { from { transform: translateY(0); } to { transform: translateY(-100%) translateY(-100vh); } }

/* Maus wieder einfangen (Browser hat Pointer-Lock verweigert) */
#relock { position: fixed; inset: 0; z-index: 19; display: none; align-items: center; justify-content: center; cursor: pointer; background: radial-gradient(circle at center, rgba(0,0,0,.05), rgba(0,0,0,.35)); }
#relock.show { display: flex; animation: relockIn .18s ease-out; }
#relock .relockbox { padding: 12px 22px; border-radius: 999px; background: rgba(20,22,28,.82); color: #fff; font: 600 16px/1.2 system-ui, sans-serif; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 24px rgba(0,0,0,.4); animation: relockPulse 1.8s ease-in-out infinite; user-select: none; }
#relock .relockicon { margin-right: 6px; }
@keyframes relockIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes relockPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
#screen .scrsearch:focus { outline: 2px solid #6cf; outline-offset: 1px; }
#pause { cursor: pointer; } #pause .menubox { cursor: default; }

.pausenote { margin: -4px 0 10px; font-size: 13px; opacity: .8; text-align: center; }
/* L-Menü: Variantenauswahl eines Bauwerks */
.locvars { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 5px; }
.tab.locvar { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 6px 9px; line-height: 1.3; border-left: 5px solid #888; }
.tab.locvar small { font-size: 11px; opacity: .8; font-weight: normal; }
.tab.locvar small .off { opacity: .25; }
.tab.locvar.lv1 { border-left-color: #5aa84a; } .tab.locvar.lv2 { border-left-color: #b5a331; } .tab.locvar.lv3 { border-left-color: #e0901f; }
.tab.locvar.lv4 { border-left-color: #d9582b; } .tab.locvar.lv5 { border-left-color: #c01e3a; } .tab.locvar.lv6 { border-left-color: #8a1030; } .tab.locvar.lv7 { border-left-color: #4a0a1a; }
.tab.loc.hasvar::after { content: ' ▸'; opacity: .6; }
.locvgrp { grid-column: 1 / -1; font-weight: bold; margin: 6px 0 0; font-size: 13px; }
.locvillage { display: grid; gap: 3px; margin-top: 8px; }
.locvrow { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 6px; }
.locvrow > b { font-size: 13px; }
.locvrow > span { display: flex; flex-wrap: wrap; gap: 4px; }
.locvrow .tab.loc { padding: 3px 9px; }
.locvrow .tab.loc.all { font-weight: bold; }
.locvrow.dead { margin-bottom: 5px; }
.locvrow.dead > b { font-weight: normal; font-size: 12px; opacity: .7; text-align: right; }
.locvrow.dead .tab.loc { opacity: .85; font-style: italic; }
body.nogui #whud { display: none !important; }
/* Monsterstufen 6–7 (Albtraum, Unbezwingbar) */
.bstars.d6, #mobstars.d6 { color: #c0105a; } .bstars.d7, #mobstars.d7 { color: #7a0020; text-shadow: 0 0 4px #ff3a5a; }

/* ---------- Apokalypse-Modus ---------- */
.modetabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.modetab { flex: 1; font: bold 15px var(--font); padding: 8px; background: #3a3a3a; color: #ddd; border: 2px solid #555; cursor: pointer; }
.modetab:hover { border-color: #aaa; }
.modetab.on { background: #5a6aa8; color: #fff; border-color: #c8d0ff; }
.modetab.apoc.on { background: #8a2a1a; border-color: #ff9a6a; }
.apocintro { text-align: left; font-size: 13px; color: #ddd; background: rgba(120,30,10,.25); border: 1px solid #7a3a2a; padding: 6px 12px; margin-bottom: 8px; max-width: 620px; }
.apocintro p { margin: 6px 0; }
.apocnew { justify-content: center; }
.apocbtn { background: #a8301c !important; width: auto !important; padding: 10px 22px !important; margin: 0 !important; }
.apocbtn:hover { background: #d0482a !important; }
.apoch { margin: 12px 0 4px; text-align: left; color: #ffb28a; }
.apoch small { color: #999; font-weight: normal; }
.pickrow .arena { color: #ff9a6a; }
#apocscores table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
#apocscores td, #apocscores th { padding: 3px 6px; border-bottom: 1px solid #444; }
#apocscores th { color: #aaa; font-weight: normal; }
#apocscores tr.me td { color: #ffd36a; }
#apochud { position: absolute; left: 10px; top: 34%; min-width: 190px; background: rgba(20,4,0,.55); border: 1px solid rgba(255,140,90,.35); border-radius: 4px; padding: 7px 10px; font-size: 13px; text-shadow: 1px 1px 0 #000; pointer-events: none; }
#apochud .ah { font-weight: bold; color: #ff7a4a; letter-spacing: 1px; }
#apochud .an { color: #ccc; font-size: 12px; margin-bottom: 4px; }
#apochud .al { font-size: 15px; }
#apochud .ab { height: 6px; margin: 4px 0 2px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
#apochud .ab i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a3a, #ff3a2a); transition: width .3s; }
#apochud .am { color: #ffd0b0; }
#apochud .ac { margin-top: 4px; color: #ffd36a; font-weight: bold; }
#apochud .ac span { color: #ccc; font-weight: normal; font-size: 12px; }
#apochud .ak { color: #999; font-size: 11px; margin-top: 2px; }
.apcoinpop { position: absolute; left: 100%; top: 70%; margin-left: 6px; color: #ffd36a; font-weight: bold; white-space: nowrap; animation: apcoin 1.2s ease-out forwards; }
@keyframes apcoin { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-30px); } }
#apocbig { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; white-space: nowrap; }
#apocbig .t { font-size: 42px; font-weight: bold; text-shadow: 3px 3px 0 #000, 0 0 18px rgba(0,0,0,.8); letter-spacing: 2px; }
#apocbig .s { font-size: 17px; color: #eee; text-shadow: 2px 2px 0 #000; margin-top: 4px; }
#apocbig.show { animation: apbig 3.2s ease-out forwards; }
@keyframes apbig { 0% { opacity: 0; transform: translateX(-50%) scale(1.4); } 8% { opacity: 1; transform: translateX(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
body.apoc #bossbar { top: 8px; }
body.nogui #apochud, body.nogui #apocbig { display: none !important; }
.apshop { width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.apshop .apcoins { float: right; color: #ffd36a; }
.aptabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.aptabs .tab.on { background: #ffd36a; }
.aptabs .aplv { margin-left: auto; font-size: 12px; color: #333; }
.apmsg { font-size: 12px; color: #333; min-height: 16px; margin-bottom: 6px; }
.apgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; overflow: auto; padding-right: 4px; }
.apsub { grid-column: 1 / -1; font-weight: bold; color: #6a2a8a; margin-top: 6px; }
.apitem { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; background: #8b8b8b; border: 2px solid; border-color: #fff #555 #555 #fff; padding: 4px 6px; cursor: pointer; font: 13px var(--font); }
.apitem:hover { background: #a8a8d8; }
.apitem.set { background: #9a9478; grid-column: span 2; }
.apitem.poor { opacity: .75; }
.apitem.locked { opacity: .45; filter: grayscale(.7); }
.apitem .apicons { grid-row: 1 / 3; display: flex; }
.apitem .apicons .slot { width: 36px; height: 36px; }
.apitem .apname { font-weight: bold; text-shadow: 1px 1px 0 #222; }
.apitem .apinfo { font-size: 12px; color: #222; }

.apoffers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 10px; }
@media (max-width: 640px) { .apoffers { grid-template-columns: 1fr; } }
.apoffer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; background: #8b8b8b; border: 4px solid; cursor: pointer; font: 13px var(--font); text-align: center; position: relative; }
.apoffer:hover { background: #a8a8d8; transform: translateY(-2px); }
.apoffer.poor { opacity: .7; }
.apoffer.sold { opacity: .4; filter: grayscale(.8); cursor: default; }
.apoffer .aprar { color: #111; font-weight: bold; padding: 1px 8px; border-radius: 3px; font-size: 12px; }
.apoffer .apkind { font-size: 12px; color: #333; }
.apoffer .apbig .slot { width: 56px; height: 56px; }
.apoffer .apname { font-weight: bold; font-size: 15px; text-shadow: 1px 1px 0 #222; }
.apoffer .aplore { font-size: 11px; color: #2a2a2a; min-height: 28px; }
.apoffer .apprice { font-weight: bold; font-size: 15px; color: #222; }
.apfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apodds { font-size: 11px; text-shadow: 1px 1px 0 #333; }
.apshop { width: min(720px, 94vw); }

.aplist { overflow: auto; max-height: 70vh; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.aptier { border-left: 6px solid; background: rgba(0,0,0,.06); padding: 6px 8px; }
.aptierh { font-weight: bold; font-size: 15px; text-shadow: 1px 1px 0 #333; margin-bottom: 4px; }
.aptierh small { color: #444; text-shadow: none; font-weight: normal; font-size: 12px; margin-left: 6px; }
.aplcat { font-size: 12px; color: #333; font-weight: bold; margin: 6px 0 2px; }
.aptier { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); column-gap: 8px; row-gap: 3px; }
.aptierh, .aplcat { grid-column: 1 / -1; }
.aplrow { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.aplrow .slot { width: 32px; height: 32px; flex: none; }
.aplrow .apln { flex: 1; }
.aplrow .aplp { color: #222; font-weight: bold; white-space: nowrap; }
#apochud .ae { margin-top: 5px; font-size: 12px; line-height: 1.5; }

/* ---------- Eigenes Level (Testarena-Editor, apoccustom.js) – im Menü dunkel, im Spiel im Panel-Stil ---------- */
.customlvl { text-align: left; max-width: 760px; margin: 8px auto 4px; border: 1px solid #3a6a8a; background: rgba(10,40,60,.35); padding: 4px 10px 8px; }
.customlvl > summary { cursor: pointer; font-weight: bold; color: #9fe8ff; padding: 4px 0; }
.customlvl > summary small { color: #9ab; font-weight: normal; }
.custombtn { background: #1c6a8a !important; } .custombtn:hover { background: #2a8ab0 !important; }
.pickrow .badge.cl { color: #9fe8ff; }
.cledit { --cl-bg: rgba(255,255,255,.06); --cl-on: rgba(120,220,255,.18); --cl-tx: #e8e8e8; --cl-dim: #9ab; --cl-bd: rgba(255,255,255,.15); color: var(--cl-tx); font-size: 13px; text-align: left; display: flex; flex-direction: column; min-height: 0; }
.clpanel { width: min(820px, 96vw); }
.clpanel .title small { font-size: 12px; font-weight: normal; color: #444; margin-left: 6px; }
.clpanel .cledit { --cl-bg: rgba(0,0,0,.08); --cl-on: rgba(40,120,200,.22); --cl-tx: #1a1a1a; --cl-dim: #444; --cl-bd: rgba(0,0,0,.25); flex: 1; }
.clsum { padding: 4px 0 6px; color: var(--cl-dim); }
.clsum b { color: var(--cl-tx); }
.cltabs, .clrun { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cltabs .tab.on { background: #9fe8ff; color: #000; }
.clrun .tab.go { background: #7dff8a; color: #000; font-weight: bold; }
.clmsg { color: #2a8a3a; font-weight: bold; margin-bottom: 4px; }
.customlvl .clmsg { color: #7dff8a; }
.clbody { overflow: auto; max-height: 52vh; padding-right: 4px; }
.clpanel .clbody { max-height: 58vh; }
.clh { font-weight: bold; margin: 8px 0 4px; display: flex; align-items: center; gap: 8px; }
.cledit button.mini { font: 12px var(--font); padding: 2px 7px; background: var(--cl-bg); color: var(--cl-tx); border: 1px solid var(--cl-bd); cursor: pointer; border-radius: 3px; display: inline-flex; align-items: center; gap: 4px; }
.cledit button.mini:hover { border-color: #9fe8ff; }
.cledit button.mini.on { background: #9fe8ff; color: #000; border-color: #fff; }
.cledit button.mini.x { color: #e55; }
.clsel { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.clsel .clh { width: 100%; margin-top: 0; }
.clchip { display: inline-flex; align-items: center; gap: 4px; background: var(--cl-on); border: 1px solid var(--cl-bd); padding: 2px 4px 2px 2px; border-radius: 3px; }
.clchip b { min-width: 18px; text-align: center; }
.clfilter { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.clsearch { flex: 1 1 180px; font: 13px var(--font); padding: 4px 6px; background: rgba(0,0,0,.35); color: #fff; border: 1px solid var(--cl-bd); }
.cllist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 3px; }
.cllist .clh, .cllist .clempty { grid-column: 1 / -1; }
.clrow { display: flex; align-items: center; gap: 5px; background: var(--cl-bg); padding: 2px 4px; border: 1px solid transparent; }
.clrow.on { background: var(--cl-on); border-color: var(--cl-bd); }
.clrow .cln { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.clrow.wpn .cln { text-shadow: 1px 1px 0 #000; }
.clrow.wpn .cln small { display: block; color: var(--cl-dim); text-shadow: none; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clchk { background: none; border: none; color: var(--cl-tx); font-size: 18px; cursor: pointer; padding: 0 2px; }
.clico { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.cledit button.mini .clico { width: 18px; height: 18px; }
.cllv { display: inline-block; min-width: 16px; text-align: center; color: #000; font-weight: bold; font-size: 11px; border-radius: 2px; padding: 0 2px; flex: none; }
.clempty, .clnote { color: var(--cl-dim); font-size: 12px; margin: 4px 0; }
.clarm { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.clrange { display: grid; grid-template-columns: 190px 1fr 90px; gap: 8px; align-items: center; margin: 6px 0; }
.clrange select { font: 13px var(--font); padding: 3px; }
.clcheck { display: block; margin: 6px 0; cursor: pointer; }
@media (max-width: 640px) { .clrange { grid-template-columns: 1fr; gap: 2px; } .cllist { grid-template-columns: 1fr; } }
.clintro { font-size: 13px; color: #cde; margin: 4px 0 8px; }
.clrun .tab.go.big { font-size: 14px; padding: 5px 14px; }
.clpanel .clh.rar { text-shadow: 1px 1px 0 #222; }
.cltabs.steps { align-items: center; gap: 4px; }
.cltabs .tab.step i { font-style: normal; display: inline-block; min-width: 16px; background: rgba(0,0,0,.25); border-radius: 8px; color: #fff; font-size: 11px; margin-right: 2px; }
.cltabs .tab.step.done { background: #b8d8b8; }
.cltabs .stsep { color: var(--cl-dim); font-weight: bold; }
.clnav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--cl-bd); }
.clnav .clstep { color: var(--cl-dim); font-size: 12px; }
.clnav .tab.go { background: #7dff8a; color: #000; }
.clrow.clpick { cursor: pointer; } .clrow.clpick:hover { outline: 1px solid #9fe8ff; }
.clrow .clchk { font-size: 18px; padding: 0 2px; }
/* Planer passt immer ins Fenster: nur die Liste scrollt */
.clpanel { max-height: 94vh; overflow: hidden; display: flex; flex-direction: column; }
.clpanel .cledit { flex: 1; min-height: 0; }
.clpanel .clbody { flex: 1; min-height: 0; max-height: none; }
@media (max-height: 720px) { .clpanel { padding: 8px; } .clpanel .clsum { padding: 0 0 3px; font-size: 12px; } .cltabs, .clrun { margin-bottom: 4px; } .clpanel .title { margin-bottom: 4px; } }
/* i-Knopf + Info-Fenster im Custom-Planer */
.cledit { position: relative; }
.cledit button.mini.ib { font: bold italic 12px Georgia, serif; width: 20px; height: 20px; padding: 0; justify-content: center; border-radius: 50%; background: #3a7ab8; color: #fff; border-color: #9fd0ff; flex: none; }
.cledit button.mini.ib:hover { background: #4a9ae0; }
.clgrp { display: inline-flex; gap: 2px; align-items: center; }
.clinfo { position: absolute; left: 0; right: 0; top: 0; bottom: 44px; z-index: 5; overflow: auto; background: #d4d4d4; border: 2px solid #3a7ab8; box-shadow: 0 4px 18px rgba(0,0,0,.5); padding: 8px 12px; color: #1a1a1a; }
.cliht { display: flex; align-items: center; gap: 6px; font-size: 15px; margin-bottom: 6px; }
.cliht small { color: #555; }
.cliht .tab { margin-left: auto; }
.clrar { text-shadow: 1px 1px 0 #222; }
.clihead { display: flex; gap: 12px; align-items: flex-start; }
.clihead p { margin: 0 0 6px; }
.climg { width: 150px; height: 150px; object-fit: contain; background: rgba(0,0,0,.12); flex: none; }
.cltable { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.cltable th, .cltable td { text-align: left; padding: 3px 6px; border-bottom: 1px solid rgba(0,0,0,.15); vertical-align: top; }
.cltable th { width: 140px; color: #333; }
.clstats { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.clstats span { background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.2); padding: 2px 6px; border-radius: 3px; }
.clsmall { font-size: 12px; color: #444; }
@media (max-width: 640px) { .clihead { flex-direction: column; } }
/* Apokalypse-Arenen: Bereiche, Stationen, Karte (arenagame.js) */
#apochud .az { color: #ffe9a8; font-size: 12px; margin-top: 3px; }
#aphint { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); background: rgba(12,8,16,.72); border: 1px solid rgba(255,211,106,.5); border-radius: 6px; padding: 6px 12px; font-size: 14px; text-align: center; color: #fff; text-shadow: 1px 1px 0 #000; pointer-events: none; max-width: 70vw; display: none; }
#aphint small { color: #ccc; font-size: 12px; }
#aphint .ok { color: #7dff8a; font-weight: bold; } #aphint .no { color: #ff7a6a; font-weight: bold; }
body.nogui #aphint { display: none !important; }
.apmap { display: flex; gap: 12px; margin-top: 10px; align-items: flex-start; flex-wrap: wrap; }
.apmapimg { position: relative; width: 230px; height: 230px; flex: none; background: #0c0a10; border: 1px solid #554; border-radius: 6px; overflow: hidden; }
.apmapimg img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.apmk { position: absolute; transform: translate(-50%, -50%); font-size: 13px; line-height: 1; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: auto; }
.apmk.me { color: #7dff8a; font-size: 16px; animation: apmk 1s infinite alternate; }
@keyframes apmk { from { opacity: 1; } to { opacity: .35; } }
.apzones { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 5px; }
.apzh { font-weight: bold; color: #ffd36a; } .apzh small { color: #999; font-weight: normal; margin-left: 6px; }
.apzone { display: flex; align-items: center; gap: 8px; border-left: 4px solid; background: rgba(255,255,255,.05); padding: 4px 6px; border-radius: 4px; }
.apzone.open { opacity: .65; }
.apzi { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-size: 15px; }
.apzt { flex: 1; display: flex; flex-direction: column; } .apzt small { color: #bbb; font-size: 11px; }
.apzs { color: #7dff8a; font-size: 12px; white-space: nowrap; }
.apzw { color: #7fd8ff; font-size: 11px; max-width: 40%; text-align: right; }
.apzlv { font-size: 11px; font-weight: bold; margin-left: 6px; }
#coords { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apzone .tab.poor { opacity: .55; }
.apshop { overflow-y: auto; }
.apshop .apmap { flex-wrap: nowrap; }
.apshop .apmapimg { width: 200px; height: 200px; }
.apshop .apzones { min-width: 0; }
.apshop .apzh { color: #7a4a00; } .apshop .apzh small { color: #555; }
.apshop .apzt small { color: #3a3a3a; }
.apshop .apzs { color: #1f7a30; font-weight: bold; }
.apshop .apzone { background: rgba(0,0,0,.06); }
/* B-Menü: Waffen, die die Kreatur natürlich nutzt */
.bcard .warms { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 4px; margin-top: 2px; }
.bcard .warm { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; white-space: nowrap; opacity: .85; }
.bcard .warm img { width: 12px; height: 12px; image-rendering: pixelated; }
.bcard .warm img { width: 12px; height: 12px; visibility: visible; flex: none; }
.bcard .warm { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.lochead .wgic { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -3px; margin-right: 4px; }

/* ---------- Touch-Layout fürs Handy (2026-10-13): Knöpfe nicht über Minikarte/Leisten ---------- */
#touch button { touch-action: none; -webkit-tap-highlight-color: transparent; }
#ttop button[hidden] { display: none; }
#tupd { color: #5f5 !important; border-color: #5f5 !important; }
@media (pointer: coarse) {
  #ttop { right: 180px; left: auto; top: calc(10px + env(safe-area-inset-top)); }
  #joy { left: calc(20px + env(safe-area-inset-left)); bottom: 24px; }
  #tbtns { right: calc(16px + env(safe-area-inset-right)); bottom: 24px; }
}
/* Querformat (Handy liegt): niedrig → Minikarte kleiner, Steuerknöpfe in die unteren Ecken */
@media (pointer: coarse) and (max-height: 500px) {
  #minimapbox { transform: scale(.62); transform-origin: top right; }
  #ttop { right: 112px; top: calc(8px + env(safe-area-inset-top)); gap: 6px; }
  #ttop button { width: 42px; height: 42px; font-size: 16px; }
  #joy { width: 116px; height: 116px; bottom: 14px; }
  #joyknob { left: 33px; top: 33px; }
  #tbtns { bottom: 14px; grid-template-columns: 58px 58px; gap: 8px; }
  #tbtns button { width: 58px; height: 58px; }
  #chat { bottom: 140px; left: calc(150px + env(safe-area-inset-left)); width: min(420px, 45vw); }
}
/* Hochformat: Leiste oben über die ganze Breite, Minikarte darunter */
@media (pointer: coarse) and (max-width: 600px) {
  #ttop { right: 10px; left: 10px; justify-content: flex-end; flex-wrap: wrap; }
  #minimapbox { top: 64px; transform: scale(.6); }
  #tbtns { bottom: 110px; }
  #joy { bottom: 110px; }
}
/* Apokalypse-Bank (apocbank.js), eigener Laden, Gebrauchtverkauf */
#apochud .abk { color: #ffd36a; font-size: 12px; margin-top: 2px; }
.apbank { width: min(900px, 96vw); }
.bksum { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.bkchip { display: flex; flex-direction: column; align-items: flex-start; min-width: 92px; padding: 4px 8px; background: #2c2c34; border: 2px solid #111; color: #ddd; position: relative; padding-left: 30px; }
.bkchip i { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 16px; }
.bkchip small { font-size: 10px; color: #aaa; }
.bkchip b { font-size: 15px; color: #ffd36a; }
.bktabs .tab { position: relative; }
.bkbadge { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 2px; background: #c33; color: #fff; border-radius: 8px; font-size: 11px; }
.bkbody { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.bkamt { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 8px; background: #7f7f86; border: 2px solid #555; }
.bkamt > span { font-weight: bold; margin-right: 4px; }
.bkamt .tab { padding: 2px 9px; }
.bkprod { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px auto; align-items: center; gap: 8px; padding: 6px 8px; background: #9a9a9a; border: 2px solid #555; }
.bki { font-size: 26px; text-align: center; }
.bkt { display: flex; flex-direction: column; gap: 2px; }
.bkt b { font-size: 14px; }
.bkt small, .bkv small { font-size: 11px; color: #222; }
.bkv { display: flex; flex-direction: column; text-align: right; }
.bkv b { font-size: 15px; color: #3a2a00; }
.bka { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 300px; }
.bka .tab { padding: 3px 8px; font-size: 12px; }
.bktags { display: flex; gap: 4px; flex-wrap: wrap; }
.bktags em { font-style: normal; font-size: 10px; padding: 0 5px; color: #111; border: 1px solid #333; }
.bktab { width: 100%; border-collapse: collapse; font-size: 12px; background: #9a9a9a; border: 2px solid #555; }
.bktab th, .bktab td { padding: 4px 6px; text-align: left; border-bottom: 1px solid #777; }
.bktab th { background: #7f7f86; }
.bktot td { background: #b5b5b5; }
.apbank .tab.on, .apown .tab.on { background: #ffd36a; }
.apshop .tab.poor { opacity: .55; }
.bklog { margin-top: 6px; font-size: 11px; color: #333; border-top: 2px solid #777; padding-top: 4px; }
.bklog b { display: block; font-size: 11px; }
@media (max-width: 640px) { .bkprod { grid-template-columns: 32px minmax(0, 1fr); } .bkv, .bka { grid-column: 2; text-align: left; justify-content: flex-start; } .bkv { align-items: flex-start; } }
.apown { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; padding: 5px 8px; background: #9a9a9a; border: 2px solid #555; font-size: 12px; }
.apown .aph { flex: 1; min-width: 200px; }
.apown .tab { font-size: 12px; padding: 2px 8px; }
.apoffer .apprice s { opacity: .55; font-size: 11px; }
.apsell { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; overflow-y: auto; }
.apsellit { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: #8b8b8b; border: 2px solid #555; cursor: pointer; font: 12px var(--font); text-align: left; }
.apsellit:hover { background: #a8a8d8; }
.apsellit.poor { opacity: .5; cursor: default; }
.apsellit .slot { width: 32px; height: 32px; flex: none; }
.apsellit .apln { flex: 1; }
.apsellit .aplp { color: #3a2a00; font-weight: bold; }
#apochud .apgo { pointer-events: auto; margin-top: 4px; padding: 3px 10px; font: bold 13px var(--font); color: #111; background: #7dff8a; border: 2px solid #1a4a1a; cursor: pointer; }
#apochud .apgok { color: #9a9; font-size: 11px; }

/* Inventar-Crafting 2×2: .grid2 aus menu.css (Optionen, 2×300px) nicht ins Inventar durchschlagen lassen */
#screen .grid2 { grid-template-columns: repeat(2, 40px); gap: 0; max-width: none; }

/* ---------- Handy (2026-10-16): Schließen-Knopf, ⋯-Leiste, Sprint-Stick ---------- */
#tclose { display: none; position: fixed; z-index: 15; top: calc(6px + env(safe-area-inset-top)); right: calc(6px + env(safe-area-inset-right)); width: 44px; height: 44px; font: 22px/1 var(--font); color: #fff; background: rgba(60,20,20,.85); border: 2px solid #000; box-shadow: inset 2px 2px 0 rgba(255,255,255,.25); touch-action: none; -webkit-tap-highlight-color: transparent; }
body.touchui.uiopen #tclose { display: block; }
body.nogui #tclose { display: none !important; }
#tmore { position: absolute; top: calc(62px + env(safe-area-inset-top)); right: 180px; display: grid; grid-template-columns: repeat(2, 132px); gap: 6px; padding: 6px; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.35); pointer-events: auto; }
#tmore[hidden], #tmore button[hidden] { display: none; }
#touch #tmore button { height: 38px; font: 14px/1 var(--font); border-radius: 6px; }
#joy.sprint { border-color: #ffd36a; background: rgba(255,211,106,.22); }
#joy.sprint #joyknob { background: rgba(255,211,106,.8); }
#tooltip { max-width: min(260px, 70vw); }

/* Handy quer: niedrige Fenster – kleinere Slots, Inventar nebeneinander statt untereinander, alles ohne Scrollen sichtbar */
@media (pointer: coarse) and (max-height: 500px) {
  #tmore { right: 112px; top: calc(56px + env(safe-area-inset-top)); grid-template-columns: repeat(3, 124px); }
  #hotbar .slot { width: 36px; height: 36px; }
  #hotbar .slot img { width: 28px; height: 28px; }
  #stats, #xpbar { width: 328px; }
  #hearts img, #food img, #air img, #armorbar img { width: 15px; height: 15px; }
  #hearts, #food, #air { height: 15px; }
  #itemname { bottom: 86px; }
  #chatlog { max-height: 32vh; }
  #chatlog div { font-size: 13px; line-height: 15px; }
  #chat.open { left: calc(8px + env(safe-area-inset-left)); bottom: auto; top: calc(6px + env(safe-area-inset-top)); width: calc(100vw - 70px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  #chat.open #chatlog { max-height: 24vh; }

  #screen { padding: env(safe-area-inset-top) calc(52px + env(safe-area-inset-right)) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  #screen .panel { padding: 6px 8px; max-height: calc(100vh - 6px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  #screen .panel .title { margin-bottom: 4px; font-size: 14px; }
  #screen .slot { width: 32px; height: 32px; border-width: 2px; }
  #screen .slot img { width: 24px; height: 24px; }
  #screen .slot .cnt { font-size: 13px; right: 1px; bottom: 1px; }
  #screen .slot.big { width: 42px; height: 42px; }
  #screen .grid9, #screen .creative { grid-template-columns: repeat(9, 32px); }
  #screen .grid3 { grid-template-columns: repeat(3, 32px); }
  #screen .grid2 { grid-template-columns: repeat(2, 32px); }
  #screen .grid9.hot { margin-top: 4px; }
  #screen .cols { flex-direction: row; gap: 10px; align-items: stretch; }
  #screen .craftrow { margin: 0 0 2px; gap: 8px; }
  #screen .armorcol { display: grid; grid-template-columns: repeat(5, 32px); gap: 0; margin-right: 4px; align-self: center; }
  #screen .armorinfo { grid-column: 1 / -1; font-size: 11px; line-height: 12px; margin-top: 2px; }
  #screen .arrow { font-size: 22px; }
  #screen .sep { margin: 2px 0; }
  #screen .tab { padding: 2px 8px 4px; font-size: 14px; }
  #screen .book { width: 220px; flex: none; padding: 4px; }
  #screen .bookgrid { grid-template-columns: repeat(auto-fill, 32px); max-height: none; min-height: 0; }
  #screen .book .hint { display: none; }
  #screen .creative { max-height: 34vh; margin: 2px 0; }
  #screen .ctab { width: 30px; height: 30px; padding: 2px; }
  #screen .furnace { margin: 4px 0 6px 40px; gap: 14px; }
  #screen .hint { font-size: 10px; margin-top: 2px; }
}
/* sehr schmale Querformat-Handys: Rezeptbuch etwas schmaler */
@media (pointer: coarse) and (max-height: 500px) and (max-width: 720px) {
  #screen .book { width: 150px; }
  #screen .armorinfo { display: none; }
}
@media (pointer: coarse) and (max-height: 500px) { #screen .cols > .book { contain: size; } #screen .bookgrid { flex: 1; } }
#help .touchhelp { display: none; }
@media (pointer: coarse) { #help .touchhelp { display: table; } #help .keyhelp, #help .small { display: none; } }
@media (pointer: coarse) and (max-height: 500px) {
  #help .menubox { padding: 10px 12px; max-height: calc(100vh - 12px); }
  #help .menubox table { font-size: 13px; line-height: 15px; }
  #help .menubox td { padding: 3px 6px; }
  #pause .pmain h2 { top: calc(8px + env(safe-area-inset-top)); }
  #pause .pbtns { top: calc(32px + env(safe-area-inset-top)); gap: 5px; }
  #pause .pbtns .mcb { height: 33px; }
  #pause #leave, #pause #apocrestart { margin-top: 8px; }
  #pause .pausenote { display: none; }
  #pause .pscr > header { padding: 8px 16px 4px; }
  #pause .pscr > footer { padding: 6px 16px 8px; }
  #pause .pscr .mcb { height: 34px; }
}
#touch #tmore button { white-space: nowrap; overflow: hidden; }
/* Kreativ-Inventar quer: Itemliste links, eigenes Inventar rechts, kein Rezeptbuch */
@media (pointer: coarse) and (max-height: 500px) {
  #screen .cols:has(.creative) > .book { display: none; }
  #screen .cols:has(.creative) > div:first-child { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-content: start; }
  #screen .cols:has(.creative) > div:first-child > * { grid-column: 1; }
  #screen .cols:has(.creative) > div:first-child > .sep { grid-column: 2; grid-row: 1; }
  #screen .cols:has(.creative) > div:first-child > .grid9:not(.hot) { grid-column: 2; grid-row: 2 / span 3; align-self: start; }
  #screen .cols:has(.creative) > div:first-child > .grid9.hot { grid-column: 2; grid-row: 5; align-self: start; }
  #screen .cols:has(.creative) .creative { max-height: calc(100vh - 190px); min-height: 96px; }
  #screen .cols:has(.creative) .hint { max-width: 300px; }
}
#touch #tmore button { white-space: nowrap; overflow: hidden; }
/* Kreativ-Inventar quer: Itemliste links, eigenes Inventar rechts, kein Rezeptbuch */
@media (pointer: coarse) and (max-height: 500px) {
  #screen .cols:has(.creative) > .book { display: none; }
  #screen .cols:has(.creative) > div:first-child { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-content: start; }
  #screen .cols:has(.creative) > div:first-child > * { grid-column: 1; }
  #screen .cols:has(.creative) > div:first-child > .sep { grid-column: 2; grid-row: 1; }
  #screen .cols:has(.creative) > div:first-child > .grid9:not(.hot) { grid-column: 2; grid-row: 2 / span 3; align-self: start; }
  #screen .cols:has(.creative) > div:first-child > .grid9.hot { grid-column: 2; grid-row: 5; align-self: start; }
  #screen .cols:has(.creative) .creative { max-height: calc(100vh - 190px); min-height: 96px; }
  #screen .cols:has(.creative) .hint { max-width: 300px; }
}
/* Zielen per Antippen: kein Fadenkreuz, Ring am Finger (halten = abbauen, pulsiert) */
body.tapaim #crosshair { display: none; }
#tapmark { position: fixed; z-index: 6; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.5); pointer-events: none; }
#tapmark[hidden] { display: none; }
#tapmark.tap { animation: tapmark .25s ease-out forwards; }
#tapmark.hold { border-color: #ffd36a; animation: tapheld .6s ease-in-out infinite alternate; }
@keyframes tapmark { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@keyframes tapheld { from { transform: scale(.85); } to { transform: scale(1.1); } }
body.nogui #tapmark { display: none; }
/* Rezept ansehen (Rechtsklick im Rezeptbuch / Ergebnisfeld, ui.recipeViewHTML) */
.panel:has(> .recview) { position: relative; }
.recview { position: absolute; top: 8px; right: 8px; z-index: 5; width: min(360px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow-y: auto; box-sizing: border-box;
  background: var(--panel); border: 3px solid; border-color: #fff #555 #555 #fff; box-shadow: 0 0 0 2px #000, 0 6px 18px #0008; padding: 8px; }
.recview .title img { width: 24px; height: 24px; image-rendering: pixelated; }
.recview .recrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #8886; }
.recview .recrow small { flex: 1; min-width: 60px; line-height: 1.25; font-size: 11px; overflow-wrap: anywhere; }
.recview .arrow { font-size: 20px; }
@media (max-height: 500px), (max-width: 600px) { .recview .grid3 { grid-template-columns: repeat(3, 32px); } .recview .grid3 .slot { width: 32px; height: 32px; } .recview .grid3 .slot img { width: 24px; height: 24px; } }

/* Begutachtungsfeld im Inventar (inspect.js, 2026-11-01) */
.inspwrap { display: flex; flex-direction: column; align-items: center; margin-left: 10px; padding-left: 12px; border-left: 2px solid #8888; }
.inspwrap small { font-size: 13px; line-height: 1; margin-top: 2px; }
.slot.inspslot { outline: 2px dashed #6a6a6a; outline-offset: -4px; }
.book.insp { width: 290px; }
.book.insp .bookhead { display: flex; align-items: center; justify-content: space-between; }
.inspbody { overflow-y: auto; max-height: 360px; flex: 1; min-height: 0; padding-right: 2px; }
.insptop { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.insptop img { width: 32px; height: 32px; image-rendering: pixelated; }
.insplore { font-size: 0.82em; color: #333; font-style: italic; margin-bottom: 4px; }
.inspsec { border-top: 1px solid #7776; padding: 4px 0; }
.insph { font-weight: bold; margin-bottom: 3px; }
.insph small { font-weight: normal; color: #444; }
.inspsec ul { margin: 0; padding-left: 16px; font-size: 0.85em; line-height: 1.3; }
.inspsec .hint { display: block !important; font-size: 0.8em; }
.inspgrid { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 2px; }
.inspgrid .slot, .insprow .slot { cursor: pointer; }
.inspgrid .slot.dim { opacity: .45; }
.insprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.85em; }
@media (pointer: coarse) and (max-height: 500px) { .inspwrap { margin-left: 4px; padding-left: 6px; } .book.insp { width: 230px; } .inspbody { max-height: none; } .inspgrid { grid-template-columns: repeat(auto-fill, 32px); } .inspgrid .slot, .insprow .slot { width: 32px; height: 32px; } .inspgrid .slot img, .insprow .slot img { width: 24px; height: 24px; } }
.insptop b, .insptop small { text-shadow: 1px 1px 0 #0009; }