:root {
  --ink: #2b1a0e;
  --parch: #f3e2b3;
  --parch2: #dcc285;
  --wood: #6b4423;
  --wood2: #3d2412;
  --gold: #ffd34d;
  --gold2: #c8872a;
  --red: #d23c3c;
  --red2: #8e1f24;
  --sea: #0b1624;
  --hud: rgba(11, 22, 36, .78);
  --white: #fffaf0;
  --xp: #53c6ff;
  --xp2: #1f6fb0;
  --px: 'Press Start 2P', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--sea); color: var(--white);
  font-family: 'Pixelify Sans', monospace; font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  touch-action: none; overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
.hidden { display: none !important; }
img { image-rendering: pixelated; }

canvas#game {
  position: fixed; inset: 0; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
}

/* Retro-Filter */
#crt {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
}
body.nocrt #crt { background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35) 100%); }

#hurt {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 90px 10px rgba(220, 20, 30, .9);
  opacity: 0; transition: opacity .35s;
}
#hurt.on { opacity: .85; transition: none; }

/* Joystick */
#joyBase {
  position: fixed; z-index: 6; width: 104px; height: 104px; margin: -52px 0 0 -52px;
  border-radius: 50%; border: 3px solid rgba(255,250,240,.45); background: rgba(0,0,0,.18);
  pointer-events: none; display: none;
}
#joyKnob {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgba(255,250,240,.75); border: 3px solid var(--wood2);
}

/* HUD: dunkle Holzpaneele mit Goldkante, passend zu Hauptmenü und Knöpfen */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
.hp-wood {
  background: linear-gradient(rgba(61, 36, 18, .9), rgba(33, 19, 9, .9));
  border: 3px solid #1a0e05;
  box-shadow: inset 0 0 0 2px rgba(255, 211, 77, .38), 0 4px 0 rgba(0, 0, 0, .4);
}
/* Erfahrung: schmale Leiste über die ganze Breite */
.xpbar { position: absolute; left: 0; right: 0; top: 0; height: 7px; background: rgba(8, 16, 28, .85); border-bottom: 2px solid #1a0e05; }
.xpbar .fill { height: 100%; width: 0; background: linear-gradient(#9be3ff, var(--xp) 45%, var(--xp2)); box-shadow: 0 0 8px rgba(83, 198, 255, .6); transition: width .12s; }

/* Figurenkarte oben links */
.hudleft { position: absolute; left: max(10px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 6px); display: flex; flex-direction: column; gap: 6px; }
.pcard { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; width: 230px; }
.pface { position: relative; width: 46px; height: 46px; flex: none; background: radial-gradient(circle at 50% 40%, #f7e7b8, #c9a35b); border: 3px solid #1a0e05; box-shadow: inset 0 0 0 2px var(--gold); overflow: hidden; }
.pface canvas { width: 40px; height: 40px; image-rendering: pixelated; display: block; }
.plv { position: absolute; right: -1px; bottom: -1px; min-width: 18px; padding: 2px 3px 1px; text-align: center; font-family: var(--px); font-size: 8px; color: var(--ink); background: var(--gold); border-top: 2px solid #1a0e05; border-left: 2px solid #1a0e05; }
.plv.up { animation: lvUp .6s ease-out; }
@keyframes lvUp { 0% { transform: scale(1.8); background: #fff; } }
.pbars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pname { font-family: var(--px); font-size: 9px; color: var(--gold); text-shadow: 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpbar { position: relative; height: 14px; background: #2a0d10; border: 2px solid #1a0e05; }
.hpfill { height: 100%; width: 100%; background: linear-gradient(#7dea8a, #3fb54f 50%, #23803a); transition: width .15s; }
.hpbar.low .hpfill { background: linear-gradient(#ff8a7e, #e0413a 50%, #9c1c22); animation: hpLow .8s ease-in-out infinite; }
@keyframes hpLow { 50% { filter: brightness(1.35); } }
#hpText { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--px); font-size: 7px; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }

/* Slots: Fähigkeiten, Power-ups, Crew */
.slots { display: flex; flex-direction: column; gap: 4px; }
.slots > div { display: flex; gap: 4px; flex-wrap: wrap; max-width: 60vw; }
.slots > div:empty { display: none; }
.slot { position: relative; width: 26px; height: 26px; background: var(--hud); border: 2px solid var(--wood); }
.slot img { width: 100%; height: 100%; }
.slot.crew { border-color: #2f8a3e; }
.slot.combo { border-color: var(--gold); box-shadow: 0 0 6px rgba(255, 211, 77, .7); }
.slot i { position: absolute; right: -2px; bottom: -3px; font-style: normal; font-family: var(--px); font-size: 7px; color: var(--gold); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
#hud .slot { width: 32px; height: 32px; padding: 2px; background: linear-gradient(rgba(61, 36, 18, .88), rgba(33, 19, 9, .88)); border: 2px solid #1a0e05; box-shadow: inset 0 0 0 1px rgba(255, 211, 77, .3), 0 2px 0 rgba(0, 0, 0, .4); }
#hud .slot i { right: -3px; bottom: -4px; padding: 1px 2px 0; background: #1a0e05; border: 1px solid rgba(255, 211, 77, .6); text-shadow: none; }
#hud .slot.empty { background: rgba(26, 14, 5, .35); border: 2px dashed rgba(255, 211, 77, .28); box-shadow: none; }
#hud .slot.crew { box-shadow: inset 0 0 0 1px #4fd06a, 0 2px 0 rgba(0, 0, 0, .4); }
#hud .slot.evo { box-shadow: inset 0 0 0 1px #ff9a5c, 0 0 8px rgba(255, 122, 61, .8); }
#hud .slot.combo { box-shadow: inset 0 0 0 1px var(--gold), 0 0 8px rgba(255, 211, 77, .8); }

/* Mitte: Zeit und Kopfgeld */
.tcol { position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 6px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.timer { font-family: var(--px); font-size: 18px; padding: 8px 14px 6px; color: var(--white); text-shadow: 2px 2px 0 #000; letter-spacing: 1px; }
.bounty { font-family: var(--px); font-size: 9px; color: var(--ink); background: var(--parch); border: 2px solid #1a0e05; box-shadow: inset 0 0 0 1px var(--parch2), 0 3px 0 rgba(0, 0, 0, .4); padding: 4px 8px 3px; white-space: nowrap; }
.bounty:empty { display: none; }
.bounty .st { color: var(--red); margin-left: 4px; }

/* Rechts: K.O.s, Berry, Pause */
.hudright { position: absolute; right: max(10px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 6px); display: flex; gap: 6px; align-items: stretch; }
.chip { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px 0 6px; font-family: var(--px); font-size: 11px; color: var(--white); text-shadow: 2px 2px 0 #000; min-width: 70px; }
.chip img { width: 20px; height: 20px; image-rendering: pixelated; }
.chip.gold { color: var(--gold); }
.hudbtn { pointer-events: auto; width: 38px; height: 38px; cursor: pointer; font-family: var(--px); font-size: 11px; color: var(--gold); }
.hudbtn:hover { filter: brightness(1.2); }

/* Bosse: Leiste unten */
#bossbar { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(440px, 80vw); text-align: center; padding: 6px 10px 8px; }
.bname { font-family: var(--px); font-size: 10px; color: #ffb3a8; text-shadow: 2px 2px 0 #000; margin-bottom: 5px; }
.bbar { height: 12px; background: #2a0d10; border: 2px solid #1a0e05; }
.bfill { height: 100%; width: 100%; background: linear-gradient(#ff8a7e, #e0413a 50%, #9c1c22); transition: width .15s; }

/* Aktionen unten mittig, symmetrisch: Q (Observation) – Leertaste (Sprung, groß) – E (Königshaki).
   Jede Kachel füllt sich von unten (--cd): Haki-Vorrat bzw. Abklingzeit des Sprungs. */
#haki {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 12px; pointer-events: none;
}
body.overlay #haki { display: none; }
body:has(#bossbar:not(.hidden)) #haki { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 68px); }
.hakibtn {
  --fc: rgba(255, 211, 77, .38); --gl: rgba(255, 180, 0, .7); --rim: var(--gold);
  position: relative; pointer-events: auto; cursor: pointer; width: 46px; height: 46px; padding: 0;
  background: linear-gradient(rgba(61, 36, 18, .92), rgba(33, 19, 9, .92)); border: 2px solid #1a0e05;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 77, .3), 0 3px 0 rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center; transition: box-shadow .2s, transform .08s;
}
.hakibtn.obs { --fc: rgba(79, 168, 255, .45); --gl: rgba(79, 168, 255, .85); --rim: #8fd0ff; }
.hakibtn.king { --fc: rgba(178, 75, 255, .5); --gl: rgba(178, 75, 255, .9); --rim: #dcb0ff; }
.hakibtn.dash { width: 56px; height: 56px; }
.hakibtn .cfill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--cd, 0%); background: linear-gradient(to top, var(--fc), transparent 160%); transition: height .2s; pointer-events: none; }
.hakibtn img { position: relative; width: 30px; height: 30px; image-rendering: pixelated; filter: grayscale(.8) brightness(.7); opacity: .6; transition: filter .2s, opacity .2s; }
.hakibtn.dash img { width: 36px; height: 36px; }
.hakibtn:active { transform: translateY(2px); }
/* Taste als kleines Pergament-Schild unten mittig */
.hakibtn .k { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 4px 1px; white-space: nowrap;
  font-family: var(--px); font-size: 7px; color: var(--ink); background: var(--parch2); border: 2px solid #1a0e05; }
/* Name erscheint beim Darüberfahren */
.hakibtn .l { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 6px;
  font-size: 11px; font-weight: 700; color: var(--gold); background: rgba(26, 14, 5, .92); border: 2px solid #1a0e05; opacity: 0; transition: opacity .15s; pointer-events: none; }
.hakibtn:hover .l { opacity: 1; }
/* Bereit: volle Farbe, leuchtender Rand */
.hakibtn.ready img { filter: none; opacity: 1; }
.hakibtn.ready .k { background: var(--gold); }
.hakibtn.ready { box-shadow: inset 0 0 0 2px var(--rim), 0 0 12px var(--gl), 0 3px 0 rgba(0, 0, 0, .4); animation: abilGlow 1.6s ease-in-out infinite; }
.hakibtn.dash.ready { animation: none; }
.hakibtn.dash .cdn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--px); font-size: 13px; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; }
@keyframes abilGlow { 50% { box-shadow: inset 0 0 0 2px var(--rim), 0 0 22px var(--gl), 0 3px 0 rgba(0, 0, 0, .4); } }
@media (pointer: coarse) {
  #haki { gap: 16px; }
  .hakibtn { width: 58px; height: 58px; } .hakibtn.dash { width: 68px; height: 68px; }
  .hakibtn img { width: 36px; height: 36px; } .hakibtn.dash img { width: 42px; height: 42px; }
  .hakibtn .k, .hakibtn .l { display: none; }
}

/* Schmale Bildschirme: kompakter */
@media (max-width: 640px) {
  .pcard { width: 160px; padding: 4px 6px 4px 4px; gap: 6px; }
  .pface { width: 38px; height: 38px; } .pface canvas { width: 32px; height: 32px; }
  .pname { display: none; }
  .timer { font-size: 13px; padding: 6px 8px 4px; }
  .bounty { font-size: 7px; }
  .tcol { top: calc(max(10px, env(safe-area-inset-top)) + 52px); }
  .chip { min-width: 0; font-size: 9px; padding: 3px 6px 3px 4px; } .chip img { width: 16px; height: 16px; }
  #hud .slot { width: 26px; height: 26px; }
}
#banner {
  position: absolute; left: 0; right: 0; top: 34%; text-align: center; padding: 0 16px;
  font-family: var(--px); font-size: clamp(12px, 3.2vw, 22px); color: var(--gold);
  text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
  opacity: 0; pointer-events: none; line-height: 1.5;
}
#banner.show { animation: banner 2.6s ease-out forwards; }
#banner.boss { color: #ff7a6e; }
@keyframes banner {
  0% { opacity: 0; transform: scale(1.6); }
  10% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* Screens */
.screen {
  position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto; touch-action: pan-y;
}
.screen.on { display: flex; }
.screen.dim { background: rgba(5, 10, 20, .62); }
#screen-menu { background: radial-gradient(ellipse at 40% 50%, rgba(5,10,20,.1), rgba(5,10,20,.55)); }

.panel {
  background: var(--parch); color: var(--ink);
  border: 4px solid var(--wood2);
  box-shadow: inset 0 0 0 3px var(--parch2), 0 6px 0 rgba(0,0,0,.45);
  padding: 18px 20px; max-width: 100%;
}
.panel h2 { font-family: var(--px); font-size: 16px; color: var(--red2); text-align: center; margin-bottom: 14px; line-height: 1.4; }
.panel.wide { width: min(720px, 100%); }

.menuwrap { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 6vw, 90px); flex-wrap: wrap; width: 100%; margin: auto; }
.logo { text-align: center; }
.logo img { width: 96px; height: auto; display: block; margin: 0 auto 6px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)); }
.logo h1 {
  font-family: var(--px); font-weight: 400; line-height: 1.25;
  font-size: clamp(22px, 5.4vw, 46px); color: var(--gold);
  text-shadow: 0 4px 0 var(--gold2), 4px 4px 0 var(--wood2), -3px -3px 0 var(--wood2), 3px -3px 0 var(--wood2), -3px 4px 0 var(--wood2), 0 8px 0 rgba(0,0,0,.4);
}
.logo h1 span { display: block; }
.logo h1 span + span { color: #fff6e0; text-shadow: 0 4px 0 #b9a06a, 4px 4px 0 var(--wood2), -3px -3px 0 var(--wood2), 3px -3px 0 var(--wood2), -3px 4px 0 var(--wood2), 0 8px 0 rgba(0,0,0,.4); }
.logo .sub { margin-top: 16px; font-family: var(--px); font-size: clamp(9px, 1.6vw, 13px); letter-spacing: 4px; text-shadow: 2px 2px 0 #000; }


.btn {
  font-family: var(--px); font-size: 11px; cursor: pointer; padding: 12px 16px;
  background: var(--red); color: #fff; border: 3px solid var(--wood2);
  box-shadow: inset 0 -4px 0 var(--red2), 0 4px 0 rgba(0,0,0,.35);
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--red2); }
.btn.ghost { background: var(--parch2); color: var(--ink); box-shadow: inset 0 -4px 0 #b9a06a, 0 4px 0 rgba(0,0,0,.25); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.col { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* Charakterwahl */
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; max-height: 470px; overflow-y: auto; padding: 4px; scrollbar-width: thin; } /* wächst mit: neue Zeilen, ab der dritten scrollt nur dieser Bereich */
.char {
  background: #fff3cf; border: 3px solid var(--wood); padding: 10px 6px; text-align: center; cursor: pointer;
}
.char img { width: 64px; height: 84px; object-fit: contain; display: block; margin: 0 auto 6px; }
.char .n { font-weight: 700; font-size: 15px; }
.char .d { font-size: 11px; opacity: .75; }
.char canvas.portrait { width: auto; height: 84px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto 6px; image-rendering: pixelated; }
.char .perk { margin-top: 4px; color: #1f7a2e; opacity: 1; }
.char.sel { border-color: var(--red); box-shadow: 0 0 0 3px var(--gold); }
.char.locked { filter: grayscale(1); opacity: .5; cursor: default; }
.char.locked img, .char.locked canvas.portrait { filter: brightness(0); opacity: .6; }
.charinfo { margin-top: 12px; font-size: 14px; text-align: center; }
.stage { margin-top: 12px; text-align: center; font-size: 15px; }
.stage span { opacity: .65; }

/* Level-Up */
.lvwrap { text-align: center; width: 100%; max-width: 900px; }
.glow { font-family: var(--px); font-size: clamp(20px, 5vw, 34px); color: var(--gold); text-shadow: 3px 3px 0 var(--wood2), -2px -2px 0 var(--wood2), 0 0 20px rgba(255, 211, 77, .6); margin-bottom: 18px; }
.cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.card {
  width: min(250px, 100%); background: var(--parch); color: var(--ink); text-align: left;
  border: 4px solid var(--wood2); box-shadow: inset 0 0 0 3px var(--parch2), 0 6px 0 rgba(0,0,0,.45);
  padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  animation: cardIn .25s backwards;
}
.card:nth-child(2) { animation-delay: .06s; }
.card:nth-child(3) { animation-delay: .12s; }
@keyframes cardIn { from { transform: translateY(30px); opacity: 0; } }
.card:hover, .card.focus { transform: translateY(-4px); box-shadow: inset 0 0 0 3px var(--gold), 0 10px 0 rgba(0,0,0,.45); }
.card .top { display: flex; align-items: center; gap: 10px; }
.card img { width: 40px; height: 40px; flex: none; }
.card .nm { font-weight: 700; font-size: 17px; line-height: 1.1; }
.card .tag { font-family: var(--px); font-size: 8px; color: var(--red2); margin-top: 4px; }
.card .tag.new { color: #1f7a2e; }
.card .ds { font-size: 14px; line-height: 1.35; }
.card .key { font-family: var(--px); font-size: 8px; opacity: .45; align-self: flex-end; }
.hint { margin-top: 14px; font-size: 13px; opacity: .7; }

@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .card { width: min(330px, 100%); padding: 10px; flex-direction: row; align-items: center; }
  .card .ds { font-size: 13px; }
  .card .key { display: none; }
  .cards { flex-direction: column; align-items: center; gap: 8px; }
  .glow { margin-bottom: 10px; }
}

/* Seekarte */
.seamap { width: min(860px, 100%); background: #e9d6a2; }
.mapmsg { text-align: center; margin: -6px 0 12px; font-size: 15px; color: var(--red2); font-weight: 700; }
.mapcols { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; padding: 8px 0;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(61, 36, 18, .12) 46px 48px); }
.mcol { display: flex; flex-direction: column; gap: 10px; flex: 1; align-items: center; }
.mnode {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; max-width: 160px; padding: 8px 6px;
  background: #fff3cf; border: 3px solid var(--wood); cursor: pointer; color: var(--ink);
}
.mnode img { width: 34px; height: 34px; }
.mnode .mn { font-weight: 700; font-size: 14px; }
.mnode .ms { font-size: 11px; opacity: .7; text-align: center; }
.mnode.next { border-color: var(--red); box-shadow: 0 0 0 3px var(--gold); animation: hakiPulse 1.4s ease-in-out infinite; }
.mnode.next:hover { filter: brightness(1.06); }
.mnode.done { background: #cfe6b8; border-color: #2f8a3e; opacity: .85; }
.mnode.skipped, .mnode:disabled:not(.done) { opacity: .45; cursor: default; }
.mapstats { margin-top: 12px; text-align: center; font-size: 14px; }
.mapstats b { color: var(--red2); }
@media (max-width: 640px) {
  .mapcols { flex-direction: column; background: none; }
  .mcol { flex-direction: row; width: 100%; justify-content: center; }
  .mnode { max-width: 46%; }
}
.nodebox { width: min(460px, 100%); }
.nodetext { font-size: 16px; line-height: 1.45; text-align: center; margin-bottom: 4px; }
.offer {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; cursor: pointer; padding: 8px 10px;
  background: #fff3cf; border: 3px solid var(--wood); color: var(--ink);
}
.offer .on { font-weight: 700; font-size: 15px; }
.offer .od { grid-column: 1; font-size: 12px; opacity: .75; }
.offer .oc { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--px); font-size: 10px; color: var(--red2); }
.offer:disabled { opacity: .45; cursor: default; }
.offer:not(:disabled):hover { border-color: var(--red); }

/* Pause / Ende */
.build { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 320px; }
.build .slot { width: 34px; height: 34px; border-color: var(--wood2); background: #fff3cf; }
.endsub { text-align: center; margin: -6px 0 12px; font-size: 14px; opacity: .8; }
.endstats { display: grid; grid-template-columns: auto auto; gap: 6px 22px; font-size: 16px; }
.endstats div:nth-child(even) { text-align: right; font-weight: 700; }
.endstats .rec { color: #1f7a2e; }
.help { list-style: none; max-width: 440px; display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.35; }
.toggles { display: flex; flex-direction: column; gap: 8px; min-width: 260px; }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: none; border: 0; cursor: pointer; font-size: 17px; padding: 6px 2px; color: var(--ink); }
.toggle i { font-style: normal; font-family: var(--px); font-size: 9px; padding: 6px 8px; background: var(--wood); color: #fff; min-width: 54px; text-align: center; }
.toggle.on i { background: #2f8a3e; }
.slider { display: flex; align-items: center; gap: 12px; font-size: 17px; padding: 6px 2px; color: var(--ink); }
.slider span { flex: none; }
.slider i { font-style: normal; font-family: var(--px); font-size: 9px; padding: 6px 4px; background: var(--wood); color: #fff; min-width: 54px; text-align: center; }
.slider input {
  flex: 1; min-width: 100px; height: 28px; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.slider input::-webkit-slider-runnable-track { height: 8px; background: var(--parch2); border: 2px solid var(--wood2); }
.slider input::-moz-range-track { height: 8px; background: var(--parch2); border: 2px solid var(--wood2); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 22px; margin-top: -9px; background: var(--red); border: 3px solid var(--wood2); border-radius: 0; }
.slider input::-moz-range-thumb { width: 14px; height: 18px; background: var(--red); border: 3px solid var(--wood2); border-radius: 0; }

#legal {
  position: fixed; left: 8px; bottom: max(4px, env(safe-area-inset-bottom)); z-index: 21; font-size: 10px; opacity: .55;
  pointer-events: none; text-shadow: 1px 1px 0 #000; max-width: calc(100% - 16px);
}
body.playing #legal { display: none; }

/* Kopfgeld-Steckbrief */
.poster { display: block; margin: 0 auto 12px; width: 150px; height: 200px; image-rendering: pixelated; box-shadow: 0 4px 0 rgba(0,0,0,.35); }

/* Werft (Upgrades) */
.upberry { text-align: center; font-family: var(--px); font-size: 12px; color: var(--red2); margin: -4px 0 12px; }
.uplist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.upcard { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 10px; align-items: center; padding: 10px; background: #fff3cf; border: 3px solid var(--wood); color: var(--ink); text-align: left; cursor: pointer; }
.upcard img { width: 36px; height: 36px; grid-row: 1 / span 3; }
.upcard .un { font-weight: 700; font-size: 15px; }
.upcard .ud { grid-column: 2; font-size: 12px; opacity: .75; }
.upcard .pips { grid-column: 2; display: flex; gap: 3px; }
.upcard .pips i { width: 12px; height: 6px; background: #d8c08a; border: 1px solid var(--wood); }
.upcard .pips i.on { background: #2f8a3e; }
.upcard .uc { grid-column: 3; grid-row: 1 / span 3; font-family: var(--px); font-size: 10px; color: var(--red2); text-align: right; }
.upcard:disabled { cursor: default; }
.upcard.max .uc { color: #2f8a3e; }
.upcard.poor .uc { opacity: .5; }
.upcard:not(:disabled):hover { border-color: var(--red); }

/* Steckbrief-Sammlung */
.postergrid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.postergrid canvas { width: 120px; height: 160px; image-rendering: pixelated; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.sub2 { margin-top: 16px; font-size: 13px !important; }
.defgrid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.defcard { width: 96px; text-align: center; background: #fff3cf; border: 3px solid var(--wood); padding: 6px 4px; font-size: 12px; }
.defcard canvas { height: 64px; width: auto; max-width: 88px; image-rendering: pixelated; display: block; margin: 0 auto 4px; }
.defcard.locked canvas { filter: brightness(0); opacity: .45; }
.defcard b { color: var(--red2); }

/* Inselwahl im Freien Modus */
.stage .isl { font: inherit; font-size: 13px; margin: 3px; padding: 4px 9px; background: #fff3cf; border: 2px solid var(--wood); color: var(--ink); cursor: pointer; }
.stage .isl.sel { border-color: var(--red); box-shadow: 0 0 0 2px var(--gold); font-weight: 700; }
.stage .isl:disabled { opacity: .45; cursor: default; }

.endstats div.unlock { grid-column: 1 / -1; text-align: center; color: #1f7a2e; font-weight: 700; margin-top: 6px; }

/* Figuren freikaufen */
.wallet { text-align: center; font-size: 13px; margin: -6px 0 10px; opacity: .85; }
.wallet b { color: var(--red2); }
.char.buy { filter: none; opacity: 1; cursor: default; }
.char.buy canvas.portrait { filter: brightness(0); opacity: .45; }
.char .buybtn { margin-top: 6px; padding: 4px 10px; font-size: 12px; }
.char .buybtn:disabled { opacity: .5; }

/* Seekarte als Meer mit Routen und Schiff */
.mapcols { background: linear-gradient(#3f8fcf, #2a6fae); border: 3px solid var(--wood); border-radius: 4px; padding: 22px 10px 16px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.mapcols::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,.35) 14px 15px),
              repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.12) 60px 61px); }
.mapcols svg.route { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.mapcols svg.route path { fill: none; stroke-width: 3; }
.mapcols svg.route path.done { stroke: #f6e7b8; stroke-dasharray: 2 6; stroke-linecap: round; }
.mapcols svg.route path.next { stroke: #ffd34d; stroke-dasharray: 8 6; animation: routeDash 1s linear infinite; }
.mapcols svg.route path.far { stroke: rgba(255,255,255,.35); stroke-dasharray: 3 7; stroke-width: 2; }
@keyframes routeDash { to { stroke-dashoffset: -14; } }
.mcol { position: relative; z-index: 1; }
.mnode.isle { background: radial-gradient(ellipse at 50% 60%, #f1dca0 0 55%, #8fc46a 56% 70%, #fff3cf 71%); border-radius: 18px; }
.mnode.isle.done { background: radial-gradient(ellipse at 50% 60%, #cfe6b8 0 55%, #8fc46a 56% 70%, #cfe6b8 71%); }
.mapship { position: absolute; width: 64px; height: 48px; image-rendering: pixelated; pointer-events: none; z-index: 2; }
#nodeScene { width: 100%; height: auto; aspect-ratio: 240 / 90; image-rendering: pixelated; display: block; margin: 0 0 10px; border: 3px solid var(--wood); }
@media (max-width: 640px) { .mapcols { padding-top: 16px; } .mapship { display: none; } }
.mapcols .mcol { gap: 30px; }
.mapcols .mnode { max-width: 128px; padding: 6px 4px; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.mapcols .mnode img { width: 28px; height: 28px; }
.mapcols .mnode .mn { font-size: 13px; }

/* Konto und Bestenliste */
.ranks { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.rk { display: grid; grid-template-columns: 30px 28px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 8px; background: #fff3cf; border: 2px solid var(--wood); font-size: 14px; }
.rk.me { border-color: var(--red); box-shadow: 0 0 0 2px var(--gold); }
.rk img, .rk i { width: 26px; height: 26px; border-radius: 50%; background: #d8c08a; display: block; }
.rk .rk-n { font-family: var(--px); font-size: 11px; text-align: center; color: var(--red2); }
.rk .rk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.rk .rk-v { font-size: 12px; opacity: .7; }
.rk .rk-b { font-family: var(--px); font-size: 10px; color: var(--red2); }
.rk-msg { text-align: center; font-size: 13px; opacity: .75; padding: 8px; }
.synctext { text-align: center; font-size: 14px; margin: 0 0 4px; }

/* ===== Hauptmenü (Neugestaltung): Logo, großer Spielen-Knopf, Kacheln, Logbuch, Konto oben rechts ===== */
#screen-menu { padding-top: max(64px, env(safe-area-inset-top)); padding-bottom: 36px; }
.menuwrap { flex-direction: column; flex-wrap: nowrap; gap: 18px; width: min(620px, 100%); }
.logo img { width: clamp(64px, 9vw, 96px); animation: hatBob 3s ease-in-out infinite; }
@keyframes hatBob { 50% { transform: translateY(-5px) rotate(-3deg); } }

.playbtn {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 14px; /* Schiff und Schrift zusammen mittig */
  width: min(380px, 100%); padding: 14px 22px; cursor: pointer; text-align: left; overflow: hidden;
  background: linear-gradient(var(--red), #b52c2f); color: var(--white);
  border: 4px solid var(--wood2); box-shadow: inset 0 0 0 3px var(--gold), inset 0 -6px 0 rgba(0,0,0,.18), 0 6px 0 rgba(0,0,0,.5);
  animation: playPulse 2.4s ease-in-out infinite;
}
.playbtn .pship { width: 64px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); flex: none; }
.playbtn .ptxt { display: flex; flex-direction: column; align-items: flex-start; }
.playbtn .pt { font-family: var(--px); font-size: clamp(16px, 3.2vw, 22px); color: var(--gold); text-shadow: 3px 3px 0 var(--wood2); }
.playbtn .ps { font-size: 13px; opacity: .9; margin-top: 4px; }
.playbtn::after { /* Glanzstreifen, der regelmäßig darüberläuft */
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 40px; left: -60px; transform: skewX(-20deg);
  background: rgba(255, 255, 255, .25); animation: shine 3.6s ease-in-out infinite;
}
.playbtn:hover, .playbtn:focus-visible { filter: brightness(1.08); outline: none; transform: translateY(-2px); }
.playbtn:active { transform: translateY(2px); box-shadow: inset 0 0 0 3px var(--gold), 0 2px 0 rgba(0,0,0,.5); }
@keyframes playPulse { 50% { box-shadow: inset 0 0 0 3px var(--gold), inset 0 -6px 0 rgba(0,0,0,.18), 0 6px 0 rgba(0,0,0,.5), 0 0 0 6px rgba(255, 211, 77, .25); } }
@keyframes shine { 0%, 60% { left: -60px; } 100% { left: 110%; } }

.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.tiles.mini { margin-top: -6px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 128px; padding: 10px 6px 9px; cursor: pointer;
  background: var(--parch); color: var(--ink); border: 4px solid var(--wood2);
  box-shadow: inset 0 0 0 3px var(--parch2), 0 5px 0 rgba(0,0,0,.45); transition: transform .08s;
}
.tile img { width: 34px; height: 34px; image-rendering: pixelated; }
.tile .t { font-weight: 700; font-size: 15px; color: var(--wood2); line-height: 1.1; text-align: center; }
.tile .s { font-size: 11px; opacity: .7; text-align: center; line-height: 1.2; }
.tile.small { width: 150px; flex-direction: row; justify-content: center; gap: 6px; padding: 7px 6px; }
.tile.small img { width: 22px; height: 22px; }
.tile.small .t { font-size: 13px; }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); outline: none; }
.tile:hover .t { color: var(--red2); }

/* Logbuch: wichtigste Zahlen als kleine Marken */
.log { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.log .st { background: rgba(11, 22, 36, .72); border: 2px solid var(--wood2); padding: 6px 10px; text-align: center; min-width: 96px; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.log .st b { display: block; font-family: var(--px); font-size: 11px; color: var(--gold); }
.log .st span { font-size: 11px; opacity: .8; }
.log .empty { font-size: 13px; text-shadow: 1px 1px 0 #000; opacity: .9; text-align: center; }

/* Konto-Chip oben rechts */
.account {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 2;
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px);
  background: rgba(11, 22, 36, .78); border: 2px solid var(--wood2); padding: 5px 6px 5px 10px; font-size: 13px; color: var(--white);
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
}
.account .acc-t { line-height: 1.2; min-width: 0; }
.account .acc-t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.account .acc-t span { font-size: 11px; opacity: .7; white-space: nowrap; }
.account .acc-av { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gold); flex: none; }
.account .acc-b { font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; cursor: pointer; white-space: nowrap; border: 2px solid var(--wood2); background: var(--parch); color: var(--ink); }
.account .discord { display: flex; align-items: center; gap: 6px; background: #5865f2; border-color: #2c3394; color: #fff; }
.account .discord svg { width: 16px; height: 12px; flex: none; }
.account .acc-soon { font-size: 11px; opacity: .6; white-space: nowrap; }

@media (max-width: 640px) {
  #screen-menu { padding-top: 58px; }
  .menuwrap { gap: 14px; }
  .playbtn { padding: 12px 16px; }
  .tile { width: calc(33.3% - 7px); min-width: 92px; padding: 8px 4px; }
  .tile .s { display: none; }
  .tile.small { width: calc(50% - 5px); }
  .log .st { min-width: 0; flex: 1 1 40%; }
  .account .acc-t span { display: none; }
}
@media (max-height: 640px) and (min-width: 641px) { /* niedrige Fenster: Logo kleiner */
  .logo h1 { font-size: 28px; } .logo .sub { margin-top: 8px; } .tile .s { display: none; }
}

@media (max-width: 640px) { #legal { font-size: 8px; opacity: .45; } }
.slot.empty { background: rgba(11,22,36,.35); border-style: dashed; border-color: rgba(255,211,77,.35); }
.slot.evo { border-color: #ff7a3d; box-shadow: 0 0 6px rgba(255, 122, 61, .8); }
.lvtools { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.lvtools .btn { font-size: 10px; padding: 8px 12px; }
.lvtools .btn.on { background: var(--red); color: #fff; }
#cards.banishing .card { outline: 3px dashed var(--red); }
.card.evo { border-color: #ff7a3d; box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(255,122,61,.7); }

/* Spielmodus in der Charakterwahl: Reise oder einzelne Insel */
.stage { margin-top: 14px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode {
  display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 8px 12px; cursor: pointer; background: #fff3cf; color: var(--ink); border: 3px solid var(--wood); font: inherit; opacity: .75;
}
.mode .mico { grid-row: 1 / span 2; width: 60px; height: 44px; image-rendering: pixelated; }
.mode .mt { font-weight: 700; font-size: 15px; color: var(--wood2); }
.mode .ms { font-size: 11px; opacity: .75; line-height: 1.25; }
.mode.sel { opacity: 1; border-color: var(--red); box-shadow: 0 0 0 3px var(--gold); background: #fff8dc; }
.mode.sel .mt { color: var(--red2); }
.mode:hover { opacity: 1; }
.islands { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; }
.islands .isl { margin: 0; }
.isl-lock { font-size: 11px; opacity: .65; }
@media (max-width: 640px) {
  .modes { grid-template-columns: 1fr; }
  .mode { padding: 6px 10px; }
}
@media (max-width: 640px) { /* Charakterwahl kompakt: drei Figuren pro Zeile */
  .chars { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .char { padding: 6px 3px; }
  .char canvas.portrait, .char img { height: 56px; }
  .char .n { font-size: 13px; }
  .char .d { font-size: 9px; line-height: 1.2; }
  .char .perk { display: none; }
  .char.sel .perk { display: block; }
  .char .buybtn { font-size: 9px; padding: 3px 6px; }
}

/* Platzhalter-Kachel "Mehr Piraten folgen bald" */
.char.soon { cursor: default; background: transparent; border-style: dashed; border-color: rgba(107, 68, 35, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.char.soon .soon-ico { display: flex; gap: 4px; height: 84px; align-items: center; }
.char.soon .soon-ico span { width: 34px; height: 54px; border-radius: 16px 16px 6px 6px; background: rgba(107, 68, 35, .22); display: flex; align-items: center; justify-content: center;
  font-family: var(--px); font-size: 14px; color: rgba(61, 36, 18, .55); }
.char.soon .soon-ico span + span { height: 46px; margin-top: 8px; }
.char.soon .n { color: rgba(61, 36, 18, .7); }
@media (max-width: 640px) { .chars { max-height: 330px; } .char.soon .soon-ico { height: 56px; } .char.soon .soon-ico span { width: 24px; height: 38px; font-size: 10px; } .char.soon .soon-ico span + span { height: 32px; } }
#screen-chars .panel.wide { width: min(800px, 100%); } /* Platz für 6 Karten pro Reihe */

/* Insel-Titelkarte bei Ankunft */
#isleCard {
  position: absolute; left: 50%; top: 22%; transform: translate(-50%, -20px); z-index: 6; pointer-events: none; opacity: 0;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 14px; align-items: center;
  min-width: min(420px, 90vw); padding: 12px 20px 12px 14px;
  background: var(--parch); color: var(--ink); border: 4px solid var(--wood2); box-shadow: inset 0 0 0 3px var(--parch2), 0 6px 0 rgba(0,0,0,.45);
}
#isleCard.show { animation: isleIn 3.4s ease-out forwards; }
#isleCard .ic-boss { grid-row: 1 / span 3; height: 64px; width: auto; image-rendering: pixelated; filter: brightness(0) drop-shadow(2px 2px 0 rgba(210,60,60,.55)); }
#isleCard .ic-step { font-family: var(--px); font-size: 9px; color: var(--red2); letter-spacing: 1px; }
#isleCard .ic-name { font-family: var(--px); font-size: clamp(16px, 3.4vw, 24px); color: var(--wood2); margin: 4px 0; }
#isleCard .ic-sub { font-size: 13px; opacity: .8; }
@keyframes isleIn {
  0% { opacity: 0; transform: translate(-50%, -20px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -12px); }
}

/* Auftragsliste im HUD (oben rechts unter K.O.s und Berry) */
#missions { position: absolute; right: max(10px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 54px); width: 220px; display: flex; flex-direction: column; gap: 5px; }
#missions .mq { display: grid; grid-template-columns: 22px 1fr auto; column-gap: 7px; align-items: center; padding: 5px 8px 5px 6px; font-size: 11px; color: var(--white);
  background: linear-gradient(rgba(61, 36, 18, .88), rgba(33, 19, 9, .88)); border: 2px solid #1a0e05; border-left: 4px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255, 211, 77, .25), 0 3px 0 rgba(0, 0, 0, .35); }
#missions .mq img { width: 20px; height: 20px; image-rendering: pixelated; grid-row: 1 / span 2; }
#missions .mq .mn { font-weight: 700; color: var(--gold); }
#missions .mq .mp { font-family: var(--px); font-size: 8px; color: var(--white); }
#missions .mq .md { grid-column: 2 / span 2; font-size: 10px; opacity: .75; line-height: 1.2; }
#missions .mq.done { border-left-color: #4fd06a; } #missions .mq.done .mn, #missions .mq.done .mp { color: #8fe39a; } #missions .mq.done .md { display: none; }
#missions .mq.failed { opacity: .45; border-left-color: #8a7a66; } #missions .mq.failed .md { display: none; }
body.overlay #missions { display: none; }
@media (max-width: 640px) { #missions { width: 150px; top: calc(max(10px, env(safe-area-inset-top)) + 104px); } #missions .mq .md { display: none; } }

/* Logbuch */
.lb-head { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13px; margin: -4px 0 10px; }
.lb-head b { color: var(--red2); }
.lb-tier.bronze b { color: #b0703a; } .lb-tier.silver b { color: #7a8494; } .lb-tier.gold b { color: #c8901a; }
.lb-list { max-height: 58vh; overflow-y: auto; padding-right: 4px; }
.lb-cat { font-family: var(--px); font-size: 11px; color: var(--wood2); margin: 12px 0 6px; }
.lb-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; margin-bottom: 4px; background: #fff3cf; border: 2px solid var(--wood); }
.lb-row.done { background: #e4f2cf; border-color: #2f8a3e; }
.lb-chk { width: 18px; height: 18px; border: 2px solid var(--wood2); display: flex; align-items: center; justify-content: center; color: #2f8a3e; font-weight: 700; }
.lb-n { font-weight: 700; font-size: 14px; color: var(--wood2); }
.lb-d { font-size: 12px; opacity: .8; }
.lb-r { font-size: 11px; color: var(--red2); margin-top: 2px; }
.lb-bar { position: relative; height: 10px; margin-top: 4px; background: var(--parch2); border: 1px solid var(--wood); }
.lb-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #5bbf4a; }
.lb-bar span { position: absolute; right: 4px; top: -2px; font-size: 9px; }
.lb-use { padding: 6px 8px; font-size: 9px; }
.lb-use.on { background: #2f8a3e; }
/* Meldung oben (neuer Erfolg) */
#toast { position: fixed; left: 50%; top: 12px; transform: translate(-50%, -80px); z-index: 40; pointer-events: none;
  background: var(--parch); color: var(--ink); border: 3px solid var(--wood2); box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 rgba(0,0,0,.4);
  padding: 8px 16px; font-size: 14px; font-weight: 700; max-width: 90vw; text-align: center; }
#toast.show { animation: toastIn 3.2s ease-out forwards; }
@keyframes toastIn { 0% { transform: translate(-50%, -80px); } 10%, 85% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, -80px); } }
@media (max-width: 640px) { .tiles .tile { width: calc(50% - 5px); } }

/* Tägliche Fahndung: dritte Modus-Karte, Modifikator-Hinweis, Bestenlisten-Reiter */
.modes.three { grid-template-columns: repeat(3, 1fr); }
.mode.daily .mico { width: 40px; height: 40px; margin: 2px 10px; }
.mode.daily.sel { border-color: #c8901a; }
.daily-mod { margin-top: 8px; text-align: center; font-size: 12px; background: #fff3cf; border: 2px dashed #c8901a; padding: 6px 10px; }
.daily-mod b { color: var(--red2); }
.rtabs { display: flex; justify-content: center; gap: 6px; margin: -4px 0 10px; }
.rtab { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer; background: #fff3cf; color: var(--wood2); border: 2px solid var(--wood); }
.rtab.on { background: var(--red); color: #fff; border-color: var(--wood2); }
@media (max-width: 640px) { .modes.three { grid-template-columns: 1fr; } }

/* UI-Größe (Einstellungen): Menüs, HUD und Meldungen skalieren, die Spielwelt nicht */
.screen > *, #hud > *, #toast { zoom: var(--ui, 1); }

/* Ton an/aus: Lautsprecher in Pixel-Optik, durchgestrichen wenn stumm (Hauptmenü oben links und im HUD) */
.mutebtn { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mutebtn .spk { width: 22px; height: 22px; fill: currentColor; display: block; }
.mutebtn .spk .x { display: none; }
.mutebtn.off .spk .w { display: none; }
.mutebtn.off .spk .x { display: inline; }
.mutebtn.off { color: #ff7a6e; }
#hud .mutebtn { color: var(--gold); }
#hud .mutebtn.off { color: #ff7a6e; }
.menumute {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; z-index: 2; width: 42px; height: 42px; padding: 0;
  color: var(--gold); background: rgba(11, 22, 36, .78); border: 2px solid var(--wood2); box-shadow: 0 3px 0 rgba(0,0,0,.4);
}
.menumute:hover { filter: brightness(1.2); }
.menumute .spk { width: 26px; height: 26px; }
.account { max-width: calc(100% - 80px); }
@media (max-width: 640px) { #hud .mutebtn .spk { width: 18px; height: 18px; } }