:root {
  color-scheme: dark;
  --bg: #0f1714;
  --panel: #17231f;
  --panel-2: #203029;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f3f5ed;
  --muted: #aeb9ad;
  --accent: #69d2a0;
  --gold: #e6c565;
  --danger: #ef776d;
  --blue: #7eb6ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.character-studio {
  display: grid;
  grid-template-columns: minmax(118px, 150px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}
.character-studio h3 { margin: 0 0 6px; }
.character-studio p { margin: 0 0 8px; color: var(--muted); }
.avatar-name {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, 4vw, 1.25rem);
  line-height: 1.05;
}
.avatar-card {
  display: grid;
  place-items: center;
  min-height: 168px;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 14%, rgba(240,207,93,.24), transparent 26%), radial-gradient(circle at 42% 72%, rgba(126,182,255,.13), transparent 38%), linear-gradient(180deg, rgba(116,238,192,.11), rgba(0,0,0,.22));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.avatar-card.large { min-height: 250px; }
.character-avatar-stack {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.character-avatar-button {
  display: grid;
  width: 100%;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.character-avatar-button:hover,
.character-avatar-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(230,197,101,.82);
  box-shadow: 0 0 0 2px rgba(230,197,101,.18), 0 14px 26px rgba(0,0,0,.24);
  outline: none;
}
.character-avatar-button .avatar-card {
  width: 100%;
}
.health-panel {
  width: min(260px, 100%);
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(3,10,8,.68);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.health-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .78rem;
}
.health-label span {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}
.health-label b { color: #eafff1; }
.health-bar {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
}
.health-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #52d273, #d4ef69);
  box-shadow: 0 0 12px rgba(82,210,115,.45);
}
.health-panel.sick .health-bar i { background: linear-gradient(90deg, #e7c84e, #f08b3e); }
.health-panel.severe .health-bar i { background: linear-gradient(90deg, #e44b4b, #9f1e35); }
.health-panel.mini {
  width: auto;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(2,8,7,.78);
}
.health-panel.mini .health-label {
  margin-bottom: 4px;
  font-size: .62rem;
}
.health-panel.mini .health-bar { height: 8px; }
.avatar-card.mini { min-height: 100%; width: 100%; border: 0; background: transparent; }
.avatar-svg {
  width: min(92%, 190px);
  height: auto;
  max-height: 238px;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.36));
}
.avatar-card.large .avatar-svg {
  width: min(94%, 230px);
  max-height: 285px;
}
.avatar-card.mini .avatar-svg {
  width: 112px;
  max-height: 142px;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.28));
}
.avatar-svg .cloth,
.avatar-svg .jacket,
.avatar-svg .shoe,
.avatar-svg .hat {
  stroke: rgba(255,255,255,.18);
  stroke-width: 1.2;
  paint-order: stroke fill;
}
.avatar-svg .cloth {
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.18));
}
.avatar-svg .face-mask {
  stroke: rgba(255,255,255,.2);
  stroke-width: 1.2;
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.34));
}
.avatar-svg .jacket {
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.24));
}
.avatar-svg .skin {
  stroke: rgba(35,18,12,.1);
  stroke-width: .8;
}
.avatar-svg .hair {
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.26));
}
.avatar-svg .avatar-tattoo {
  font-size: 12px;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: .88;
  fill: #102018;
  stroke: rgba(255,255,255,.18);
  stroke-width: .55px;
  paint-order: stroke fill;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.2));
}
.avatar-figure { position: relative; width: 116px; height: 190px; transform-style: preserve-3d; }
.avatar-card.large .avatar-figure { height: 202px; transform: scale(1.18) rotateX(3deg); }
.avatar-card.mini .avatar-figure { transform: scale(.64) rotateX(3deg); }
.avatar-figure i { position: absolute; display: block; font-style: normal; text-align: center; }
.avatar-head {
  left: 36px;
  top: 8px;
  width: 44px;
  height: 52px;
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.33), transparent 18%),
    radial-gradient(circle at 38% 49%, #1d1714 0 2px, transparent 3px),
    radial-gradient(circle at 62% 49%, #1d1714 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 34%),
    var(--skin);
  box-shadow: 0 9px 17px rgba(0,0,0,.28), inset 8px 0 12px rgba(255,255,255,.16), inset -9px -5px 13px rgba(0,0,0,.2);
  z-index: 4;
}
.avatar-head::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 35px;
  width: 13px;
  height: 4px;
  border-radius: 999px;
  background: rgba(62,30,22,.45);
}
.avatar-hair {
  left: 32px;
  top: 2px;
  width: 52px;
  height: 29px;
  border-radius: 54% 54% 32% 32%;
  background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.12), transparent 20%), var(--hair);
  box-shadow: inset -8px -5px 9px rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.25);
  z-index: 5;
}
.avatar-neck {
  left: 51px;
  top: 57px;
  width: 14px;
  height: 17px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 35%), var(--skin);
  z-index: 2;
}
.avatar-shoulder { top: 69px; width: 27px; height: 18px; border-radius: 999px; background: var(--skin); z-index: 1; }
.avatar-shoulder.left { left: 25px; transform: rotate(-16deg); }
.avatar-shoulder.right { right: 25px; transform: rotate(16deg); }
.avatar-body {
  left: 29px;
  top: 70px;
  width: 58px;
  height: 78px;
  border-radius: 25px 25px 19px 19px / 34px 34px 17px 17px;
  background: linear-gradient(115deg, rgba(255,255,255,.22), transparent 28%), linear-gradient(180deg, var(--skin), rgba(126,75,48,.94));
  box-shadow: 0 12px 20px rgba(0,0,0,.29), inset 9px 0 13px rgba(255,255,255,.09), inset -11px 0 15px rgba(0,0,0,.23);
  z-index: 2;
}
.avatar-arm {
  top: 78px;
  width: 15px;
  height: 70px;
  border-radius: 999px;
  background: linear-gradient(115deg, rgba(255,255,255,.15), transparent 30%), linear-gradient(180deg, var(--skin), rgba(122,71,45,.9));
  box-shadow: 0 8px 13px rgba(0,0,0,.22), inset -4px 0 8px rgba(0,0,0,.18);
  transform-origin: top center;
  z-index: 1;
}
.avatar-arm.left { left: 15px; transform: rotate(8deg); }
.avatar-arm.right { right: 15px; transform: rotate(-8deg); }
.avatar-hand { top: 142px; width: 17px; height: 18px; border-radius: 50%; background: var(--skin); box-shadow: inset -4px -3px 6px rgba(0,0,0,.18); z-index: 1; }
.avatar-hand.left { left: 17px; }
.avatar-hand.right { right: 17px; }
.avatar-leg {
  top: 139px;
  width: 19px;
  height: 48px;
  border-radius: 12px 12px 10px 10px;
  background: linear-gradient(100deg, rgba(255,255,255,.14), transparent 32%), linear-gradient(180deg, var(--skin), rgba(120,70,42,.88));
  box-shadow: 0 8px 12px rgba(0,0,0,.25), inset -5px 0 8px rgba(0,0,0,.16);
  z-index: 1;
}
.avatar-leg.left { left: 37px; transform: rotate(2deg); }
.avatar-leg.right { right: 37px; transform: rotate(-2deg); }
.avatar-foot { top: 181px; width: 26px; height: 10px; border-radius: 999px; background: linear-gradient(180deg, var(--skin), rgba(92,49,35,.92)); box-shadow: 0 5px 9px rgba(0,0,0,.28); z-index: 2; }
.avatar-foot.left { left: 30px; }
.avatar-foot.right { right: 30px; }
.avatar-underwear, .avatar-sock, .avatar-topwear, .avatar-sleeve, .avatar-pantswear, .avatar-shoewear, .avatar-jacketwear, .avatar-hatwear, .avatar-accessory {
  display: none !important;
  position: absolute;
  z-index: 7;
  box-shadow: inset 7px 0 10px rgba(255,255,255,.12), inset -8px -3px 12px rgba(0,0,0,.22), 0 7px 12px rgba(0,0,0,.22);
}
.has-underwear .avatar-underwear {
  display: block !important;
  left: 34px;
  top: 124px;
  width: 48px;
  height: 25px;
  border-radius: 8px 8px 13px 13px;
  background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 32%), var(--underwear);
  z-index: 6;
}
.has-underwear .avatar-underwear::before,
.has-underwear .avatar-underwear::after {
  content: "";
  position: absolute;
  bottom: -9px;
  width: 18px;
  height: 15px;
  border-radius: 0 0 9px 9px;
  background: inherit;
}
.has-underwear .avatar-underwear::before { left: 3px; }
.has-underwear .avatar-underwear::after { right: 3px; }
.has-socks .avatar-sock {
  display: block !important;
  top: 164px;
  width: 15px;
  height: 19px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), var(--socks));
  z-index: 5;
}
.has-socks .avatar-sock.left { left: 39px; }
.has-socks .avatar-sock.right { right: 39px; }
.has-top .avatar-topwear {
  display: block !important;
  left: 28px;
  top: 71px;
  width: 60px;
  height: 65px;
  border-radius: 22px 22px 14px 14px;
  background: linear-gradient(125deg, rgba(255,255,255,.28), transparent 35%), var(--top);
}
.has-top .avatar-sleeve {
  display: block !important;
  top: 78px;
  width: 17px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(125deg, rgba(255,255,255,.24), transparent 35%), var(--top);
  z-index: 6;
}
.has-top .avatar-sleeve.left { left: 18px; transform: rotate(9deg); }
.has-top .avatar-sleeve.right { right: 18px; transform: rotate(-9deg); }
.has-pants .avatar-pantswear {
  display: block !important;
  top: 135px;
  width: 21px;
  height: 49px;
  border-radius: 8px 8px 9px 9px;
  background: linear-gradient(110deg, rgba(255,255,255,.16), transparent 33%), var(--pants);
  z-index: 6;
}
.has-pants .avatar-pantswear.left { left: 35px; }
.has-pants .avatar-pantswear.right { right: 35px; }
.has-shorts .avatar-pantswear { height: 25px; border-radius: 8px 8px 11px 11px; }
.has-shoes .avatar-shoewear {
  display: block !important;
  top: 181px;
  width: 29px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), var(--shoes) 55%, rgba(0,0,0,.22));
  z-index: 8;
}
.has-shoes .avatar-shoewear.left { left: 27px; }
.has-shoes .avatar-shoewear.right { right: 27px; }
.has-jacket .avatar-jacketwear {
  display: block !important;
  left: 24px;
  top: 73px;
  width: 68px;
  height: 70px;
  border-radius: 24px 24px 15px 15px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255,255,255,.35) 48% 52%, transparent 53%),
    linear-gradient(130deg, rgba(255,255,255,.18), transparent 33%),
    var(--jacket);
  border: 1px solid rgba(255,255,255,.15);
  z-index: 8;
}
.has-hat .avatar-hatwear {
  display: block !important;
  left: 30px;
  top: -2px;
  width: 56px;
  height: 18px;
  border-radius: 18px 18px 7px 7px;
  background: linear-gradient(130deg, rgba(255,255,255,.25), transparent 35%), var(--hat);
  z-index: 9;
}
.has-hat .avatar-hatwear::after {
  content: "";
  position: absolute;
  left: 36px;
  top: 10px;
  width: 28px;
  height: 8px;
  border-radius: 999px;
  background: inherit;
  transform: rotate(8deg);
}
.has-accessory .avatar-accessory {
  display: block !important;
  left: 34px;
  top: 62px;
  width: 48px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.23), var(--accessory));
  z-index: 10;
}
.avatar-censor { z-index: 11; left: 39px; width: 38px; height: 10px; border-radius: 999px; background: rgba(18,24,22,.84); filter: blur(.35px); }
.avatar-censor.chest { top: 88px; }
.avatar-censor.waist { top: 125px; }
.has-top .avatar-censor.chest,
.has-jacket .avatar-censor.chest,
.has-underwear .avatar-censor.waist,
.has-pants .avatar-censor.waist { display: none; }
.avatar-tattoos { left: 34px; top: 89px; z-index: 12; display: flex !important; gap: 2px; color: #10251e; font-size: 9px; font-weight: 900; text-shadow: 0 1px 0 rgba(255,255,255,.18); }
.property-visual {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(240,207,93,.22);
  background: linear-gradient(135deg, rgba(59,118,83,.35), rgba(31,56,49,.42)), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 24px);
}
.property-building { position: relative; min-height: 170px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.18)); overflow: hidden; }
.property-building i { position: absolute; display: block; }
.property-building .roof { left: 50%; top: 16px; width: 150px; height: 54px; transform: translateX(-50%) skewX(-12deg); background: linear-gradient(135deg, #8f3d34, #d07a44); border-radius: 8px 8px 2px 2px; }
.property-building .floors { position: absolute; left: 50%; top: 58px; width: min(76%, 260px); transform: translateX(-50%); display: grid; gap: 4px; }
.property-building .floors span { min-height: 25px; border-radius: 5px; background: linear-gradient(90deg, #d9c6a4, #f0dfbc); color: #3c2b1e; font-size: .68rem; font-weight: 900; text-align: center; padding-top: 5px; box-shadow: inset 0 0 0 2px rgba(80,48,28,.22); }
.property-building .tower { top: 54px; width: 34px; height: 92px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #c9b27f, #8f7850); }
.property-building .tower.left { left: 42px; }
.property-building .tower.right { right: 42px; }
.property-building .door { left: 50%; bottom: 18px; width: 34px; height: 44px; transform: translateX(-50%); border-radius: 16px 16px 2px 2px; background: #4d2c1e; }
.property-building .garage-door { right: 22px; bottom: 18px; width: 58px; height: 36px; border-radius: 4px; background: repeating-linear-gradient(180deg, #cfd8d0 0 5px, #95a89a 5px 9px); }
.property-visual.apartment .tower, .property-visual.apartment .roof { display: none; }
.property-visual.apartment .floors { top: 24px; }
.property-visual.garage .roof, .property-visual.garage .tower, .property-visual.garage .door, .property-visual.garage .floors { display: none; }
.property-visual.garage .garage-door { left: 50%; right: auto; top: 50%; bottom: auto; width: 180px; height: 82px; transform: translate(-50%, -50%); }
.property-visual.villa .property-building { min-height: 220px; background: linear-gradient(180deg, rgba(240,207,93,.18), rgba(0,0,0,.18)); }
.property-room-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.property-room-map button { min-height: 42px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(17,31,26,.86); color: var(--text); font-weight: 900; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.property-room-map button:hover,
.property-room-map button:focus-visible {
  border-color: rgba(230,197,101,.8);
  box-shadow: 0 0 0 2px rgba(230,197,101,.18), 0 10px 22px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.property-rent-button { justify-self: start; }
@media (max-width: 420px) {
  .character-studio { grid-template-columns: 1fr; }
  .character-overview-body {
    grid-template-columns: 1fr;
  }
  .character-overview-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .character-overview-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .character-overview-head span {
    grid-column: 1 / -1;
  }
}

.character-hub {
  gap: 10px;
  max-width: min(100%, 620px);
  overflow-x: hidden;
}

dialog.character-dialog {
  width: min(calc(100% - 24px), 560px);
  overflow: hidden;
}

dialog.character-dialog #dialogText {
  display: none;
}

.character-hub-help {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 -2px;
}

.character-hub-help .mini-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
}

.character-hub-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.character-hub-nav .mini-button {
  min-height: 34px;
  padding: 7px 6px;
  font-size: clamp(.68rem, 2.7vw, .82rem);
  line-height: 1.05;
}
.character-hub-nav .mini-button:hover,
.character-hub-nav .mini-button:focus-visible,
.character-overview-nav .mini-button:hover,
.character-overview-nav .mini-button:focus-visible {
  border-color: rgba(230,197,101,.85);
  box-shadow: 0 0 0 2px rgba(230,197,101,.18), 0 10px 20px rgba(0,0,0,.22);
  transform: translateY(-1px);
  outline: none;
}
.character-hub-nav .mini-button.gold,
.character-overview-nav .mini-button.gold {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 2px rgba(230,197,101,.16);
}
.character-hub-content {
  display: grid;
  gap: 10px;
  max-height: calc(100dvh - 175px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 3px;
  scrollbar-width: none;
}

.character-hub-content::-webkit-scrollbar {
  display: none;
}

.character-overview-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 10%, rgba(116,238,192,.16), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.08));
}

.character-overview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.character-overview-head h3 {
  margin: 0;
  font-size: clamp(1.05rem, 4vw, 1.32rem);
}

.character-overview-head span {
  color: var(--muted);
  font-weight: 900;
  white-space: nowrap;
}

.meta-strip.compact {
  margin-bottom: 0;
}

.character-overview-body {
  display: grid;
  grid-template-columns: minmax(138px, 175px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.character-overview-body .avatar-card.large {
  min-height: 225px;
}

.character-overview-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}

.character-overview-nav .mini-button {
  min-height: 36px;
  padding: 6px 5px;
  font-size: clamp(.64rem, 2.5vw, .78rem);
  line-height: 1.04;
}
.character-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.character-summary-grid span {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  font-weight: 850;
}
.quantity-field {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  font-weight: 900;
}
.quantity-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #07100d;
  color: var(--text);
  padding: 0 10px;
  font-weight: 900;
}
.skill-tree {
  display: grid;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(116,238,192,.06), rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 42px);
  border: 1px solid rgba(116,238,192,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 16px 36px rgba(0,0,0,.2);
}
.skill-tree-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.skill-tree-head h3 { margin: 0; }
.skill-tree-head span {
  color: var(--gold);
  font-weight: 950;
}
.skill-tree-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  position: relative;
}
.skill-tree-row::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -7px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(230,197,101,.36), transparent);
}
.skill-node {
  min-height: 74px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid rgba(230,197,101,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(0,0,0,.12)),
    radial-gradient(circle at 50% 12%, rgba(240,207,93,.26), rgba(18,32,27,.94));
  color: var(--text);
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.18);
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.skill-node:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(230,197,101,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.26), 0 0 16px rgba(230,197,101,.16);
}
.skill-node strong,
.skill-node span,
.skill-node small {
  display: block;
}
.skill-node strong { font-size: .78rem; }
.skill-node span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.62rem, 2.15vw, .82rem);
  line-height: 1.05;
  letter-spacing: 0;
}
.skill-node small { font-size: .68rem; }
.skill-node small { color: var(--gold); }
.skill-node:disabled {
  opacity: .62;
}
.skill-node.maxed {
  background: radial-gradient(circle at 50% 12%, rgba(116,238,192,.34), rgba(18,32,27,.92));
}
.tattoo-studio .avatar-card {
  min-height: 230px;
}
.tattoo-area-grid .item-card,
.tattoo-motif-card {
  border-color: rgba(230,197,101,.22);
}
.tattoo-motif-card {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
}
.tattoo-preview {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: radial-gradient(circle at 40% 30%, rgba(230,197,101,.32), rgba(11,20,17,.9));
  border: 1px solid rgba(230,197,101,.35);
  font-size: 1.35rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.22);
}
.highlow-table,
.blackjack-table {
  background:
    radial-gradient(circle at 50% 22%, rgba(240,207,93,.14), transparent 34%),
    linear-gradient(135deg, #123c2f, #07120f 72%);
  border-color: rgba(240,207,93,.24);
}
.highlow-layout {
  padding: 10px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.08), transparent 35%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 12px),
    #0d2c23;
  box-shadow: inset 0 0 0 2px rgba(240,207,93,.12);
}
.highlow-stack-row i.filled {
  background: radial-gradient(circle at 36% 28%, #fff7ce, #d9af38 62%, #6f3f14);
  box-shadow: 0 3px 0 #6f3f14, 0 0 10px rgba(240,207,93,.28);
}
.blackjack-felt-preview,
.blackjack-deck-rack {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #103528, #07110e);
  box-shadow: inset 0 0 0 2px rgba(240,207,93,.12);
}
.blackjack-deck-rack {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.blackjack-deck-rack span {
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: repeating-linear-gradient(180deg, #f7f1dd 0 5px, #d7ceb7 5px 8px);
  color: #19251f;
  font-size: .72rem;
  font-weight: 950;
  box-shadow: 0 5px 0 rgba(0,0,0,.22);
}
.blackjack-seat {
  text-align: center;
  color: var(--muted);
  font-weight: 850;
}
@media (max-width: 420px) {
  .character-hub-nav,
  .skill-tree-row,
  .blackjack-deck-rack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gfx-minimum * {
  animation: none !important;
  transition: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.gfx-medium .primary-button:active,
.gfx-high .primary-button:active,
.gfx-diamond .primary-button:active,
.gfx-ultra .primary-button:active,
.gfx-medium .mini-button:active,
.gfx-high .mini-button:active,
.gfx-diamond .mini-button:active,
.gfx-ultra .mini-button:active {
  transform: scale(0.98);
}

.gfx-high .roulette-number.selected,
.gfx-high .roulette-outside button.selected,
.gfx-diamond .roulette-number.selected,
.gfx-diamond .roulette-outside button.selected,
.gfx-ultra .roulette-number.selected,
.gfx-ultra .roulette-outside button.selected {
  box-shadow: 0 0 0 3px rgba(230,197,101,0.2), 0 0 22px rgba(230,197,101,0.62);
}

.gfx-diamond .app-shell,
.gfx-ultra .app-shell {
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 182, 255, 0.16), transparent 28%),
    linear-gradient(180deg, #101f1b 0%, #08100d 42%);
}

.gfx-diamond .casino-table,
.gfx-ultra .casino-table,
.gfx-diamond .save-slot,
.gfx-ultra .save-slot {
  box-shadow: 0 18px 48px rgba(0,0,0,0.36), 0 0 28px rgba(105,210,160,0.12);
}

.gfx-ultra .world-stage {
  display: grid;
}

.gfx-ultra .real-map-panel {
  background:
    linear-gradient(180deg, rgba(2, 9, 7, 0.2), rgba(2, 9, 7, 0.86)),
    radial-gradient(circle at 70% 25%, rgba(105, 210, 160, 0.22), transparent 30%),
    #0b120f;
  box-shadow: 0 20px 60px rgba(0,0,0,0.42), 0 0 34px rgba(126,182,255,0.12);
}

.gfx-ultra .real-map-panel h2::after {
  content: " · Ultra-Kartenmodus";
  color: var(--gold);
}

.win-explosion {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(230,197,101,0.28), transparent 46%);
  animation: winBurst 1.8s ease both;
}

.win-explosion strong,
.win-explosion span {
  grid-area: 1 / 1;
  text-align: center;
  text-shadow: 0 0 24px rgba(230,197,101,0.8);
}

.win-explosion strong {
  margin-top: -46px;
  color: #fff7c9;
  font-size: 2.7rem;
}

.win-explosion span {
  margin-top: 48px;
  color: var(--gold);
  font-weight: 1000;
}

@keyframes winBurst {
  0% { opacity: 0; transform: scale(0.82); }
  20% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.18); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #07100d;
  color: var(--text);
  overflow-x: hidden;
}

button, input, select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-shell {
  width: min(100%, 520px);
  overflow-x: hidden;
  min-height: 100vh;
  margin: 0 auto;
  background: linear-gradient(180deg, #13201b 0%, #0f1714 38%);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.38);
}

.hidden { display: none !important; }

.setup-screen {
  min-height: 100svh;
}

.setup-view {
  padding: 16px;
}

.compact-hero {
  min-height: min(42svh, 320px);
  border-bottom: 1px solid var(--line);
}

.start-actions {
  display: grid;
  gap: 10px;
  padding: 14px 16px 18px;
}

.secondary-button {
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 900;
}

.setup-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.setup-head h2 {
  margin: 0;
  font-size: 1.3rem;
}

.save-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.save-slot {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-2), #101915);
  color: var(--text);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.24);
}

.save-slot strong {
  font-size: 1rem;
  line-height: 1.15;
}

.save-slot small {
  color: var(--muted);
  line-height: 1.2;
}

.slot-plus {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #08110d;
  font-size: 2rem;
  font-weight: 900;
}

.settings-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(23, 35, 31, 0.78);
}

.custom-music-player {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  background: #050806;
}

.custom-music-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.custom-music-player p {
  margin: -30px 8px 6px;
  padding: 5px 8px;
  position: relative;
  border-radius: 8px;
  background: rgba(0,0,0,.62);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
}

.settings-overlay {
  position: fixed;
  z-index: 12;
  inset: 0;
  width: min(100%, 520px);
  margin: 0 auto;
  overflow-y: auto;
  background: rgba(10, 16, 13, 0.96);
  backdrop-filter: blur(16px);
}

.loading-view {
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.loading-card {
  width: 100%;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 25% 0%, rgba(105, 210, 160, 0.2), transparent 35%),
    linear-gradient(180deg, var(--panel-2), #0a100d);
  box-shadow: 0 22px 70px rgba(0,0,0,0.42);
}

.loading-card h2 {
  margin: 0;
  font-size: 1.45rem;
}

.loading-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.loading-card strong {
  color: var(--gold);
  font-size: 1.15rem;
}

.loading-bar {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(230,197,101,0.35);
  background: #07100d;
}

.loading-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: width 0.16s linear;
}

.hero {
  position: relative;
  min-height: 44vh;
  overflow: hidden;
}

.hero img, .portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 14, 12, 0.08), rgba(15, 23, 20, 0.94));
}

.hero-overlay {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 24px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 800;
}

h1, h2, p { margin-top: 0; }

.hero h1, .topbar h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.06;
}

.hero p:last-child {
  max-width: 29rem;
  margin: 10px 0 0;
  color: #e4ede2;
  line-height: 1.45;
}

.setup-form {
  padding: 20px;
  display: grid;
  gap: 14px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

input, select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 12px;
  background: #111b17;
  color: var(--text);
}

.primary-button, .action-button {
  min-height: 46px;
  border-radius: 8px;
  background: var(--accent);
  color: #08110d;
  font-weight: 900;
}

.topbar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  background: rgba(15, 23, 20, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-text-button {
  min-height: 42px;
  border-radius: 999px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--text);
  font-size: 1.25rem;
  display: grid;
  place-items: center;
}

.dashboard {
  padding: 14px 14px 86px;
}

.status-panel {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 112px;
  gap: 8px;
  align-items: stretch;
}

.portrait {
  position: relative;
  overflow: hidden;
  min-height: 188px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid rgba(230,197,101,.18);
  padding: 0;
  color: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.portrait button,
.health-panel {
  color: inherit;
  font: inherit;
}

.portrait-player-avatar,
.portrait-pet-quick,
.portrait-partner-quick {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.portrait-player-avatar {
  width: 100%;
  cursor: pointer;
}

.health-panel {
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.achievement-alert-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 30;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid #17251f;
  border-radius: 999px;
  color: #1a1200;
  background: #ffe071;
  font-size: .7rem;
  font-weight: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,.38), 0 0 12px rgba(255,224,113,.34);
}

.character-hub-nav .mini-button,
.character-overview-nav .mini-button {
  position: relative;
}

.nav-alert-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  color: #1a1200;
  background: #ffe071;
  font-size: .56rem;
  font-weight: 1000;
  line-height: 1;
}

.portrait-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px 6px 0;
}

.portrait-avatar-wrap {
  display: grid;
  place-items: center;
  min-height: 92px;
  margin-top: -2px;
}

.portrait:active {
  transform: scale(.99);
}

.portrait:hover,
.portrait:focus-visible,
.home-shortcut:hover,
.home-shortcut:focus-visible,
.dashboard-shortcut:hover,
.dashboard-shortcut:focus-visible,
.phone-shortcut:not(:disabled):hover,
.phone-shortcut:not(:disabled):focus-visible {
  border-color: rgba(116,238,192,.56);
  outline: 0;
  box-shadow:
    0 0 0 2px rgba(116,238,192,.14),
    0 0 18px rgba(116,238,192,.13),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

.portrait:focus-visible,
.home-shortcut:focus-visible,
.dashboard-shortcut:focus-visible,
.phone-shortcut:not(:disabled):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.portrait > span { display: none; }
.portrait-job,
.portrait-debt {
  display: grid;
  gap: 2px;
  margin: 6px 6px 0;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(3,10,8,.58);
  text-align: left;
}

.portrait-debt {
  margin-top: 5px;
  margin-bottom: 6px;
}

.portrait-job span,
.portrait-debt span {
  color: var(--muted);
  font-size: .56rem;
  font-weight: 950;
  text-transform: uppercase;
}

.portrait-job strong,
.portrait-debt strong {
  color: var(--text);
  font-size: .74rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.portrait-debt strong {
  color: var(--gold);
}

.portrait-badge {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(230,197,101,.28);
  background: rgba(5,12,10,.72);
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.portrait-badge small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
}
.portrait-badge b {
  color: var(--gold);
  font-size: .92rem;
}

.meters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.status-stack,
.compact-money-card,
.compact-work-card {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.meter,
.mini-stat {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 41px;
  padding: 5px 7px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.meter.status-action,
.mini-stat.status-action {
  width: 100%;
  border: 1px solid var(--line);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.meter.status-action:hover,
.meter.status-action:focus-visible,
.mini-stat.status-action:hover,
.mini-stat.status-action:focus-visible {
  border-color: rgba(116,238,192,.48);
  box-shadow: 0 0 0 2px rgba(116,238,192,.12), inset 0 0 0 1px rgba(255,255,255,.03);
}

.mini-stat span {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mini-stat strong {
  color: var(--gold);
  font-size: .8rem;
  overflow-wrap: anywhere;
}

progress {
  width: 100%;
  height: 7px;
  accent-color: var(--accent);
}

.compact-money-card,
.compact-work-card,
.home-shortcut {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.compact-money-card article,
.compact-work-card article {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.compact-money-card span,
.compact-work-card span {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.compact-money-card strong,
.compact-work-card strong {
  color: var(--text);
  font-size: .8rem;
  overflow-wrap: anywhere;
}

.compact-money-card strong {
  color: var(--gold);
}

.home-shortcut {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 54px;
  color: var(--text);
  font-weight: 950;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 20%, rgba(230,197,101,.22), transparent 34%),
    linear-gradient(180deg, rgba(34,52,42,.96), rgba(14,22,18,.96));
}

.dashboard-shortcut {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 54px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 950;
  cursor: pointer;
  background: var(--panel);
}

.dashboard-shortcut span {
  color: var(--muted);
  font-size: .62rem;
  text-transform: uppercase;
}

.dashboard-shortcut b {
  line-height: 1;
}

.dashboard-shortcut .shortcut-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 17px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 211, 104, .42);
  border-radius: 999px;
  color: #ffe58a;
  background: rgba(8, 13, 10, .78);
  font-size: .5rem;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-shortcut .shortcut-lock.unlocked {
  color: var(--accent);
  border-color: rgba(116, 238, 192, .34);
}

.dashboard-shortcut.level-locked {
  filter: saturate(.58);
  box-shadow: inset 0 0 0 1px rgba(255, 211, 104, .08);
}

.dashboard-shortcut.level-locked:hover,
.dashboard-shortcut.level-locked:focus-visible {
  border-color: #e6c565;
  filter: saturate(.8) brightness(1.05);
}

.dashboard-shortcut.casino {
  background:
    radial-gradient(circle at 50% 32%, rgba(230,197,101,.28), transparent 34%),
    linear-gradient(180deg, rgba(42,33,18,.96), rgba(14,17,13,.96));
}

.dashboard-shortcut.casino b {
  color: #f7d866;
  font-size: 1.52rem;
  text-shadow: 0 0 12px rgba(230,197,101,.45);
}

.dashboard-shortcut.realestate {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 50% 20%, rgba(116,238,192,.18), transparent 34%),
    linear-gradient(180deg, rgba(23,48,39,.96), rgba(10,18,15,.96));
}

.dashboard-shortcut.realestate b {
  color: var(--accent);
  font-size: 1.48rem;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(116,238,192,.28);
}

.home-shortcut span {
  color: var(--muted);
  font-size: .62rem;
  text-transform: uppercase;
}

.home-shortcut b {
  color: var(--gold);
  font-size: 2rem;
  line-height: 1;
}

.home-shortcut:disabled {
  opacity: .62;
  cursor: default;
}

.phone-shortcut {
  display: grid;
  place-items: center;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 188px;
  padding: 10px 7px;
  border-radius: 8px;
  border: 1px solid rgba(126,182,255,.22);
  background:
    radial-gradient(circle at 50% 18%, rgba(126,182,255,.2), transparent 34%),
    linear-gradient(180deg, rgba(25,42,38,.96), rgba(12,20,17,.96));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  text-align: center;
}

.phone-shortcut::before {
  content: "";
  width: 48px;
  height: 82px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.72);
  background:
    linear-gradient(180deg, rgba(126,182,255,.22), rgba(5,12,18,.8)),
    #0b1211;
  box-shadow: inset 0 -5px 0 rgba(255,255,255,.08), 0 8px 16px rgba(0,0,0,.25);
}

.phone-shortcut[data-phone-tier="-1"]::before {
  width: 42px;
  height: 70px;
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(180deg, #1a2420, #070d0b);
}

.phone-shortcut[data-phone-tier="0"]::before {
  border-radius: 6px;
  border-color: rgba(180,190,178,.62);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 28%),
    repeating-linear-gradient(180deg, #101815 0 8px, #18221e 8px 13px);
}

.phone-shortcut[data-phone-tier="1"]::before {
  border-color: rgba(126,182,255,.58);
  background:
    radial-gradient(circle at 50% 18%, rgba(126,182,255,.34), transparent 22%),
    linear-gradient(180deg, #182b3d, #07101a);
  box-shadow: inset 0 -5px 0 rgba(255,255,255,.1), 0 0 12px rgba(126,182,255,.16), 0 9px 18px rgba(0,0,0,.26);
}

.phone-shortcut[data-phone-tier="2"]::before {
  border-color: rgba(116,238,192,.7);
  background:
    radial-gradient(circle at 50% 22%, rgba(116,238,192,.28), transparent 24%),
    linear-gradient(180deg, #123f35, #07130f);
  box-shadow: inset 0 -5px 0 rgba(255,255,255,.1), 0 0 16px rgba(116,238,192,.22), 0 10px 20px rgba(0,0,0,.28);
}

.phone-shortcut[data-phone-tier="3"]::before {
  border-color: rgba(230,197,101,.82);
  background:
    radial-gradient(circle at 50% 22%, rgba(230,197,101,.34), transparent 22%),
    linear-gradient(180deg, #23313f, #090f17);
  box-shadow: inset 0 -5px 0 rgba(255,255,255,.1), 0 10px 22px rgba(230,197,101,.2);
}

.phone-shortcut[data-phone-tier="4"]::before {
  width: 54px;
  height: 88px;
  border-color: rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.42), transparent 20%),
    linear-gradient(135deg, rgba(126,182,255,.42), rgba(116,238,192,.22)),
    linear-gradient(180deg, #0e1522, #030609);
  box-shadow: inset 0 -5px 0 rgba(255,255,255,.12), 0 0 22px rgba(126,182,255,.28), 0 12px 24px rgba(0,0,0,.32);
}

.phone-shortcut span {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.phone-shortcut b {
  max-width: 100%;
  color: var(--blue);
  font-size: .68rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-align: center;
}

.phone-shortcut:disabled {
  cursor: default;
  opacity: .58;
}

@media (max-width: 560px) {
  .status-panel {
    grid-template-columns: 126px minmax(0, 1fr) 88px;
  }

  .portrait,
  .phone-shortcut {
    min-height: 168px;
  }

  .portrait-avatar-wrap {
    min-height: 112px;
  }

  .avatar-card.mini .avatar-figure {
    transform: scale(.56) rotateX(3deg);
  }

  .phone-shortcut::before {
    width: 40px;
    height: 68px;
  }

  .meter {
    min-height: 38px;
    padding: 4px 6px;
    font-size: .6rem;
  }

  .mini-stat,
  .home-shortcut,
  .dashboard-shortcut {
    padding: 6px;
  }
}

.money-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}

.money-grid article {
  padding: 13px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.money-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.money-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 1.06rem;
  overflow-wrap: anywhere;
}

.tabs {
  position: sticky;
  z-index: 2;
  top: 77px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  overflow: visible;
  padding: 8px 0;
  background: rgba(15, 23, 20, 0.92);
}

.tabs button {
  height: 38px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.tabs button.active {
  background: linear-gradient(180deg, #80e3b4, var(--accent));
  color: #08110d;
  border-color: rgba(230,197,101,.32);
  box-shadow: 0 8px 18px rgba(105,210,160,.2), inset 0 0 0 1px rgba(255,255,255,.18);
}

.tab-panel {
  display: none;
  padding-top: 6px;
}

.tab-panel.active {
  display: block;
}

.action-list, .item-list, .skill-grid {
  display: grid;
  gap: 10px;
}

.shop-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}

.shop-section h3 {
  margin: 0;
  font-size: 0.92rem;
}

.clothing-category-grid,
.clothing-model-list,
.clothing-variant-list {
  display: grid;
  gap: 9px;
  width: 100%;
}

.clothing-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clothing-category-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 118px;
  padding: 13px;
  border: 1px solid rgba(230, 197, 101, .2);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(0,0,0,.12)), var(--panel);
  color: var(--text);
  text-align: left;
}

.clothing-category-card:hover,
.clothing-category-card:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(230,197,101,.16), 0 10px 25px rgba(0,0,0,.22);
}

.clothing-category-card strong {
  font-size: .92rem;
}

.clothing-category-card span {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35;
}

.clothing-category-card small {
  align-self: end;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 900;
}

.clothing-model-card {
  min-height: 94px;
}

.clothing-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.clothing-swatches i,
.clothing-color-chip {
  display: inline-block;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.18);
}

.clothing-variant-card {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 82px;
}

.clothing-color-chip {
  width: 30px;
  height: 30px;
}

.clothing-variant-card.owned {
  border-color: rgba(105,210,160,.48);
}

.avatar-svg .avatar-chain {
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.45));
}

.avatar-svg .avatar-chain text {
  letter-spacing: 0;
  paint-order: stroke fill;
}

@media (max-width: 520px) {
  .clothing-category-grid {
    grid-template-columns: 1fr;
  }

  .clothing-category-card {
    min-height: 96px;
  }

  .clothing-variant-card {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .clothing-variant-card > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.action-card, .item-card, .skill-card, .bank-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.06)),
    var(--panel);
  padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.15);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.action-card::before, .item-card::before, .skill-card::before, .bank-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.07), transparent 38%, rgba(230,197,101,.04));
  opacity: .55;
}
.action-card:hover, .item-card:hover {
  transform: translateY(-1px);
  border-color: rgba(230,197,101,.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 14px 30px rgba(0,0,0,.22);
}
.action-card > *, .item-card > *, .skill-card > *, .bank-card > * {
  position: relative;
  z-index: 1;
}

.action-card, .item-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.inventory-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0 10px;
}

.inventory-category-grid button {
  min-height: 34px;
  padding: 7px 6px;
  font-size: .72rem;
}

.character-dialog .item-card,
.character-hub-content .item-card {
  min-height: 96px;
  overflow: hidden;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(148px, auto);
}

.character-dialog .item-card h3,
.character-hub-content .item-card h3 {
  overflow-wrap: anywhere;
}

.inventory-actions {
  display: grid;
  gap: 7px;
  min-width: 148px;
  align-self: center;
  align-content: center;
}

.inventory-actions button {
  min-height: 38px;
  min-width: 138px;
  white-space: normal;
}

.character-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.character-title-row h3 {
  margin: 0;
}

.tattoo-area-grid {
  gap: 10px;
}
.tattoo-motif-card.item-card {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
}

.wardrobe-closet {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) 1.2fr;
  gap: 14px;
  max-height: min(70dvh, 680px);
  overflow: hidden;
}

.wardrobe-preview {
  position: sticky;
  top: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}

.wardrobe-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  max-height: min(70dvh, 680px);
  padding-right: 4px;
}

.character-dialog .wardrobe-card,
.wardrobe-card {
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  min-height: 104px;
  gap: 7px;
  padding: 9px;
  overflow: hidden;
}

.wardrobe-card > div:first-child {
  min-width: 0;
  overflow: hidden;
}

.wardrobe-card h3 {
  margin: 0 0 4px;
  font-size: .78rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.wardrobe-card p {
  margin: 0;
  font-size: .64rem;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.wardrobe-actions {
  display: grid;
  grid-auto-rows: 27px;
  gap: 4px;
  width: 92px;
  min-width: 0;
  align-self: center;
  align-content: center;
}

.character-dialog .wardrobe-actions button,
.wardrobe-actions button {
  width: 100%;
  min-width: 0;
  min-height: 27px;
  height: 27px;
  padding: 2px 4px;
  font-size: .61rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wardrobe-card.equipped {
  border-color: rgba(241,204,87,.95);
  box-shadow: inset 0 0 0 1px rgba(241,204,87,.46), 0 0 12px rgba(241,204,87,.13);
}

.wardrobe-card:not(.equipped) {
  border-color: var(--line);
  box-shadow: none;
}

.wardrobe-card .danger,
.wardrobe-actions .danger {
  background: rgba(190,70,70,.2);
  border-color: rgba(190,70,70,.42);
}

.character-info-stats {
  display: grid;
  gap: 10px;
  max-height: min(70dvh, 680px);
  overflow: auto;
}

body.gfx-minimum {
  --shadow: none;
  --panel: #102018;
  --panel-2: #14251d;
  --line: rgba(255,255,255,.12);
  image-rendering: pixelated;
}

body.gfx-minimum * {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  transition: none !important;
}

body.gfx-minimum .avatar-svg,
body.gfx-minimum canvas {
  image-rendering: pixelated;
  filter: contrast(.92) saturate(.8);
}

body.gfx-minimum .win-explosion,
body.gfx-minimum .casino-floor-character,
body.gfx-minimum .casino-route-line {
  display: none !important;
}

body.gfx-medium {
  --panel: rgba(17, 35, 27, .94);
  --panel-2: rgba(24, 46, 36, .96);
}

body.gfx-high .action-card,
body.gfx-high .item-card,
body.gfx-high .bank-card,
body.gfx-high .casino-table {
  box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.03);
}

body.gfx-diamond {
  --gold: #ffe27a;
  --accent: #7fffd2;
}

body.gfx-diamond .action-card,
body.gfx-diamond .item-card,
body.gfx-diamond .casino-table {
  border-color: rgba(127,255,210,.34);
  box-shadow: 0 18px 40px rgba(0,0,0,.34), 0 0 28px rgba(127,255,210,.08);
}

body.gfx-ultra {
  --gold: #ffec8a;
  --accent: #8dffd8;
  background:
    radial-gradient(circle at 10% 8%, rgba(141,255,216,.12), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(255,236,138,.12), transparent 25%),
    #07100d;
}

body.gfx-ultra .app-shell,
body.gfx-ultra dialog,
body.gfx-ultra .snake-window {
  box-shadow: 0 30px 80px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.06);
}

body.gfx-ultra canvas,
body.gfx-ultra .avatar-svg {
  filter: saturate(1.2) contrast(1.08);
}

body.gfx-ultra .action-card,
body.gfx-ultra .item-card,
body.gfx-ultra .bank-card,
body.gfx-ultra .casino-table {
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.02)),
    var(--panel);
}

.device-shell {
  display: grid;
  justify-content: center;
  align-items: start;
  width: 100%;
  padding: 0;
}

.device-frame {
  width: min(100%, 400px);
  height: clamp(560px, 72dvh, 690px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 3px solid #111a18;
  border-radius: 34px;
  padding: 10px;
  background: linear-gradient(145deg, #050807, #1c2723 45%, #070a09);
  box-shadow: 0 24px 55px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.08);
}

.device-tier-0 .device-frame {
  border-radius: 24px;
  background: linear-gradient(145deg, #050706, #18201d 54%, #050706);
}

.device-tier-1 .device-frame {
  box-shadow: 0 24px 55px rgba(0,0,0,0.45), 0 0 20px rgba(126,182,255,.12), inset 0 0 0 1px rgba(255,255,255,0.1);
}

.device-tier-2 .device-frame {
  border-color: #15372e;
  box-shadow: 0 26px 58px rgba(0,0,0,0.48), 0 0 28px rgba(116,238,192,.18), inset 0 0 0 1px rgba(255,255,255,0.12);
}

.device-tier-3 .device-frame,
.device-tier-4 .device-frame {
  border-color: #6b5520;
  background:
    radial-gradient(circle at 20% 0%, rgba(230,197,101,.25), transparent 28%),
    linear-gradient(145deg, #060807, #23322b 45%, #090a07);
  box-shadow: 0 30px 66px rgba(0,0,0,0.54), 0 0 34px rgba(230,197,101,.24), inset 0 0 0 1px rgba(255,255,255,0.14);
}

.device-tablet .device-frame {
  width: min(100%, 620px);
  border-radius: 24px;
}

.device-status {
  position: relative;
  display: grid;
  grid-template-columns: minmax(78px, 1fr) auto 76px minmax(42px, .75fr);
  align-items: center;
  color: #ecfff7;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 8px 12px 10px;
}

.device-status > span:first-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-status > b {
  font-size: .68rem;
  justify-self: end;
}

.device-status > span:last-child {
  justify-self: end;
}

.device-status .device-island {
  position: relative;
  top: auto;
  left: auto;
  width: 76px;
  height: 18px;
  border-radius: 999px;
  transform: none;
  justify-self: center;
  background: #020403;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 3px 9px rgba(0,0,0,.35);
}

.device-status .device-island::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4c6d8e, #111816 68%);
}

.device-screen {
  overflow-y: auto;
  min-height: 0;
  border-radius: 25px;
  background:
    radial-gradient(circle at 22% 10%, rgba(101, 211, 160, 0.38), transparent 34%),
    radial-gradient(circle at 90% 24%, rgba(238, 205, 91, 0.25), transparent 30%),
    linear-gradient(160deg, #10221c, #07100e 66%);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px;
  scrollbar-width: none;
}

.device-screen::-webkit-scrollbar {
  display: none;
}

.device-tablet .device-screen {
  min-height: 0;
}

.device-wallpaper {
  display: flex;
  justify-content: space-between;
  align-items: end;
  min-height: 74px;
  padding: 10px;
  border-radius: 22px;
  color: #fff7c6;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
    linear-gradient(145deg, #24634f, #10241d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.device-wallpaper > div {
  width: 100%;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.device-wallpaper h3 {
  margin: 2px 0 0;
  font-size: 1.05rem;
}

.device-app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 10px 0;
}

.device-phone .device-app-grid .device-appstore-anchor {
  /* Direkt hinter Börse einordnen – keine künstliche leere Rasterzelle. */
  grid-column: auto;
}

.device-phone .device-app-grid .device-downloaded-app {
  /* Finder.KL, Finster.KL und weitere Downloads bleiben unter den System-Apps. */
  position: relative;
}

.device-phone .device-app-grid .device-downloaded-app-first {
  /* Alte Spielstände können die Klasse noch tragen: niemals eine neue Reihe erzwingen. */
  grid-column: auto !important;
}

.device-app-grid button {
  display: grid;
  grid-template-rows: 29px 14px 13px;
  place-items: center;
  gap: 5px;
  min-height: 66px;
  max-height: 66px;
  padding: 7px 5px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  color: #f5fff9;
  font-size: 0.66rem;
  line-height: 1;
  overflow: hidden;
}

.device-app-grid button span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 10px;
  background: linear-gradient(145deg, #f4d35e, #52d59f);
  color: #08110e;
  font-weight: 1000;
}

.device-app-grid button.active {
  outline: 2px solid var(--gold);
  background: rgba(244, 211, 94, 0.16);
}

.device-app-grid button.locked,
.device-app-grid button:disabled {
  opacity: .46;
  filter: grayscale(.45);
}

.device-app-grid button.locked span,
.device-app-grid button:disabled span {
  background: linear-gradient(145deg, #46524b, #17211d);
  color: #aeb9ad;
}

.device-app-grid button small {
  color: #ffcd73;
  font-size: .56rem;
  font-weight: 950;
  min-height: 12px;
}

.device-app-view {
  border-radius: 18px;
  padding: 10px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.08);
}

.device-app-view h3 {
  margin: 0 0 6px;
}

.device-app-view p {
  margin: 0 0 10px;
  color: var(--muted);
}

.device-hint {
  font-size: 0.86rem;
}

.device-finance-view {
  display: grid;
  gap: 9px;
}

.device-finance-summary {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}

.device-finance-summary small,
.device-finance-card small {
  color: var(--muted);
  line-height: 1.25;
}

.device-market-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.device-finance-list {
  display: grid;
  gap: 8px;
}

.device-finance-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}

.device-finance-card strong,
.device-finance-card small {
  display: block;
}

.device-finance-card button {
  min-width: 84px;
}

.online-casino-view,
.online-casino-actions,
.business-phone-view {
  display: grid;
  gap: 9px;
}

.business-nav-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.business-phone-view .device-finance-summary {
  padding: 8px 9px;
  border-radius: 11px;
}

.business-phone-view .device-finance-summary b {
  font-size: .84rem;
}

.business-phone-view .device-finance-summary small {
  font-size: .7rem;
}

.business-phone-view .device-finance-card {
  gap: 7px;
  padding: 8px;
  border-radius: 11px;
}

.business-phone-view .device-finance-card strong {
  font-size: .82rem;
  line-height: 1.1;
}

.business-phone-view .device-finance-card small {
  font-size: .68rem;
  line-height: 1.2;
}

.business-phone-view .device-finance-card button {
  min-width: 72px;
  min-height: 29px;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: .68rem;
}

.business-nav-tabs .mini-button {
  min-width: 0;
  padding: 6px 4px;
  font-size: .7rem;
}

.online-casino-tabs,
.online-casino-stakes,
.online-casino-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.online-casino-stakes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.online-casino-reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 10%, rgba(240,207,93,.28), transparent 36%), rgba(0,0,0,.28);
  border: 1px solid rgba(240,207,93,.28);
}

.online-casino-reels span {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-radius: 14px;
  background: linear-gradient(145deg, #2d1710, #f0cf5d 48%, #4d2b15);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), 0 10px 20px rgba(0,0,0,.25);
  font-size: 1.8rem;
}

.online-risk-ladder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.online-risk-ladder span {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 10px;
  background: rgba(240,207,93,.12);
  border: 1px solid rgba(240,207,93,.2);
  color: var(--gold);
  font-size: .72rem;
  font-weight: 950;
  text-align: center;
}

.business-info-list {
  display: grid;
  gap: 9px;
  max-height: 265px;
  overflow: auto;
  scrollbar-width: none;
}

.business-info-list::-webkit-scrollbar {
  display: none;
}

.business-info-list .item-card {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 13px;
  min-height: 78px;
}

.business-info-list .item-card h3 {
  font-size: 1rem;
}

.business-info-list .item-card p {
  font-size: .92rem;
  line-height: 1.35;
}

.business-action-list .device-finance-card,
.weapon-business-card,
.staff-card,
.business-lock-card {
  min-height: 86px;
  padding: 13px;
  border-radius: 12px;
}

.weapon-owned-list,
.weapon-shop-list,
.staff-list {
  display: grid;
  gap: 8px;
}

.weapon-business-card,
.staff-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 76px;
  gap: 8px;
  align-items: center;
  min-height: 68px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(0,0,0,.24));
}

.weapon-business-card.owned {
  grid-template-columns: 42px minmax(0, 1fr) 78px;
  border-color: rgba(230,197,101,.2);
}

.weapon-card-copy {
  min-width: 0;
  overflow: hidden;
}

.weapon-card-copy strong {
  overflow-wrap: anywhere;
}

.weapon-card-copy small {
  display: grid;
  gap: 1px;
}

.weapon-card-copy small span {
  display: block;
}

.weapon-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 78px;
  align-self: center;
}

.weapon-card-actions .mini-button,
.weapon-buy-button {
  min-width: 0;
  width: 100%;
  min-height: 28px;
  padding: 5px 5px;
  border-radius: 8px;
  font-size: .66rem;
  line-height: 1.05;
  white-space: normal;
  justify-self: stretch;
}

.weapon-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  color: #101611;
  background: linear-gradient(145deg, #fbeb98, #8b6b31);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  font-size: 1.08rem;
  font-weight: 1000;
}

.weapon-preview,
.weapon-select-card,
.weapon-mod-overview {
  --weapon-color: #d8aa35;
}

.weapon-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 74px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--weapon-color) 78%, #ffffff 12%), color-mix(in srgb, var(--weapon-color) 55%, #050806 45%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 26px rgba(0,0,0,.22);
  overflow: hidden;
}

.weapon-preview.small {
  min-height: 40px;
  width: 40px;
  border-radius: 9px;
}

.weapon-preview.small .weapon-body {
  width: 26px;
  height: 20px;
  font-size: .76rem;
}

.weapon-preview.small .weapon-grip {
  width: 9px;
  height: 21px;
}

.weapon-preview.small small {
  display: none;
}

.weapon-preview span {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(8,14,11,.84);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.weapon-preview .weapon-barrel {
  width: 48%;
  height: 9px;
  right: 12%;
  top: 30%;
}

.weapon-preview .weapon-slide {
  width: 42%;
  height: 18px;
  left: 21%;
  top: 24%;
  border-radius: 8px;
}

.weapon-preview .weapon-body {
  position: relative;
  width: 40px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #f6e58b;
  font-size: 1rem;
  z-index: 2;
  border-radius: 8px;
}

.weapon-preview .weapon-grip {
  width: 13px;
  height: 31px;
  left: 37%;
  top: 48%;
  transform: rotate(19deg);
  border-radius: 6px;
}

.weapon-preview small {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: .68rem;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.weapon-select-card,
.weapon-mod-overview {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.2);
}

.weapon-mod-overview {
  grid-template-columns: minmax(0, 1fr);
}

.finish-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
  border-radius: 50%;
  background: var(--finish-color);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 0 12px color-mix(in srgb, var(--finish-color) 60%, transparent);
}

.device-finance-card.positive {
  border-color: rgba(126, 255, 178, .28);
}

.device-finance-card.negative {
  border-color: rgba(255, 117, 117, .32);
}

.trade-direction {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--gold);
  font-weight: 1000;
}

.weapon-business-card strong,
.staff-card strong {
  display: block;
  font-size: .82rem;
  line-height: 1.08;
}

.weapon-business-card small,
.staff-card small {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.2;
}

.weapon-shop-list,
.weapon-owned-list {
  gap: 7px;
}

.weapon-owned-list {
  margin-bottom: 10px;
}

.weapon-shop-list .weapon-business-card {
  min-height: 64px;
}


.staff-card {
  grid-template-columns: minmax(0, 1fr);
}

.staff-card div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

@media (max-width: 460px) {
  .business-nav-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weapon-business-card,
  .weapon-business-card.owned {
    grid-template-columns: 38px minmax(0, 1fr) 72px;
    gap: 7px;
    padding: 8px;
  }

  .weapon-icon,
  .weapon-preview.small {
    width: 38px;
    min-height: 38px;
    height: 38px;
  }

  .weapon-card-actions {
    width: 72px;
  }

  .weapon-select-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
}

.phone-online-view,
.phone-contact-list,
.phone-contact-form,
.sms-thread,
.sms-bubbles,
.sms-compose {
  display: grid;
  gap: 8px;
}

.phone-contact-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.phone-contact-form input,
.sms-compose textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
  min-width: 0;
}

.phone-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.055);
}

.phone-contact-card.incoming {
  border-color: rgba(240,207,93,.45);
  box-shadow: 0 0 18px rgba(240,207,93,.12);
}

.phone-contact-card strong,
.phone-contact-card small {
  display: block;
}

.phone-contact-card small {
  color: var(--muted);
}

.phone-contact-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, auto));
  gap: 5px;
}

.sms-bubbles {
  max-height: 190px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.07);
}

.sms-bubble {
  justify-self: start;
  max-width: 86%;
  padding: 8px 10px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255,255,255,.09);
  color: var(--text);
  overflow-wrap: anywhere;
}

.sms-bubble.mine {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, rgba(126,239,196,.95), rgba(240,207,93,.82));
  color: #07110d;
}

.sms-compose {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sms-compose textarea {
  min-height: 68px;
  resize: vertical;
}

.device-notes {
  display: grid;
  gap: 8px;
}

.device-notes span {
  color: var(--gold);
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.device-notes textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 10px;
  font: inherit;
}

.device-note-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.device-notes-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.device-note-card {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(0,0,0,.2);
}

.device-note-card p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.device-note-card small {
  color: var(--muted);
}

.device-note-card div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.character-floating-info {
  position: absolute;
  top: 14px;
  right: 72px;
  z-index: 30;
  background: rgba(240,207,93,.18);
  border: 1px solid rgba(240,207,93,.36);
}

.modal-icon-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 1000;
  cursor: pointer;
}

.modal-icon-button:hover {
  outline: 2px solid rgba(240,207,93,.55);
}

.device-home-bar {
  width: 42%;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.45);
  margin: 10px auto 2px;
}

@media (max-height: 760px) {
  .device-frame {
    height: min(690px, calc(100dvh - 138px));
  }
}

@media (max-width: 460px) {
  .device-status {
    grid-template-columns: minmax(58px, 1fr) auto 64px minmax(34px, .65fr);
    gap: 5px;
    padding-inline: 9px;
  }

  .device-status .device-island {
    width: 64px;
  }

  .device-app-grid {
    gap: 6px;
  }

  .inventory-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .character-dialog .item-card,
  .character-hub-content .item-card {
    grid-template-columns: 1fr;
  }

  .character-dialog .inventory-actions,
  .character-hub-content .inventory-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .character-dialog .inventory-actions button,
  .character-hub-content .inventory-actions button {
    min-width: 0;
  }

  .phone-contact-form,
  .phone-contact-card,
  .sms-compose {
    grid-template-columns: 1fr;
  }

  .phone-contact-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.business-select {
  width: 100%;
  min-height: 44px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 800;
  padding: 0 10px;
}

.action-card h3, .item-card h3, .skill-card h3 {
  margin: 0 0 5px;
  font-size: 1rem;
}

.action-card p, .item-card p, .skill-card p, .bank-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.mini-button {
  min-width: 86px;
  min-height: 40px;
  border-radius: 8px;
  padding: 0 11px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 900;
}

.mini-button.gold { background: var(--gold); color: #201700; }
.mini-button.danger { background: var(--danger); color: #210503; }
.mini-button.blue { background: var(--blue); color: #031121; }
.mini-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.meta-strip span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #dce6da;
  font-size: 0.78rem;
  font-weight: 800;
}

.feed {
  display: none;
  margin-top: 12px;
  gap: 8px;
}

#overview .item-card {
  padding: 10px 12px;
}

#overview .item-card h3 {
  margin-bottom: 2px;
}

#overview .item-card p {
  font-size: 0.8rem;
}

.games-hub {
  display: grid;
  gap: 12px;
}

.games-hub .item-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(105,210,160,.22);
  background:
    radial-gradient(circle at 12% 0%, rgba(105,210,160,.14), transparent 34%),
    linear-gradient(135deg, rgba(17,35,29,.96), rgba(8,18,14,.98));
}

.games-hub .item-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #69d2a0, #e6c565);
}

.games-hub .item-card button {
  min-width: 92px;
}

.feed p {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: #dce6da;
  font-size: 0.86rem;
}

body.snake-open {
  overflow: hidden;
  touch-action: none;
}

.snake-modal {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(0,0,0,0.78);
  overflow: hidden;
}

.snake-window {
  width: min(100%, 520px);
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto auto minmax(0, auto) auto auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(105,210,160,0.3);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 0%, rgba(105,210,160,0.18), transparent 34%),
    linear-gradient(180deg, #10251d, #07100d);
  box-shadow: 0 24px 70px rgba(0,0,0,0.58);
  overflow: hidden;
}

.snake-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.snake-head h2 {
  margin: 0;
  font-size: 1.35rem;
}

.snake-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.snake-stats span {
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
}

.snake-stats b {
  display: block;
  color: var(--gold);
  font-size: 0.82rem;
}

.snake-canvas {
  width: min(calc(100vw - 48px), 480px, calc(100dvh - 238px));
  height: min(calc(100vw - 48px), 480px, calc(100dvh - 238px));
  justify-self: center;
  border: 2px solid rgba(230,197,101,0.36);
  border-radius: 8px;
  background: #06110d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 14px 28px rgba(0,0,0,0.38);
  touch-action: none;
}

.snake-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.snake-controls button {
  min-height: 46px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  font-size: 1.22rem;
  font-weight: 1000;
}

.snake-controls button:active {
  background: var(--accent);
  color: #08110d;
}

.snake-message {
  min-height: 38px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.24);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
  text-align: center;
}

.snake-end-panel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(230,197,101,.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 70% 0%, rgba(230,197,101,.18), transparent 34%),
    linear-gradient(145deg, rgba(31,55,45,.98), rgba(9,18,15,.98));
  box-shadow: inset 0 0 20px rgba(230,197,101,.08), 0 14px 28px rgba(0,0,0,.24);
}

.snake-end-panel strong {
  color: var(--gold);
}

.snake-end-panel span {
  color: var(--muted);
  font-weight: 800;
}

.snake-end-panel div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.war-window {
  border-color: rgba(230,197,101,0.32);
  background:
    radial-gradient(circle at 0% 0%, rgba(31,157,99,0.2), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(201,50,50,0.2), transparent 24%),
    radial-gradient(circle at 0% 100%, rgba(216,178,47,0.2), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(50,120,216,0.2), transparent 24%),
    linear-gradient(180deg, #111c18, #07100d);
}

.war-color-select,
.war-actions,
.war-line-filter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.war-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.game-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.war-house-panel {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  margin: 8px 0;
  border: 1px solid rgba(243, 216, 103, .38);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(34, 54, 43, .96), rgba(15, 32, 25, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.24);
}

.war-house-panel div {
  display: grid;
  gap: 2px;
}

.war-house-panel b {
  color: #f3d867;
}

.war-house-panel span {
  color: #c6d6c8;
  font-size: .82rem;
}

.war-house-panel button {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(36, 57, 48, .95);
  color: #f5f2df;
  font-weight: 900;
  padding: 8px 10px;
}

.war-house-panel button:hover {
  border-color: rgba(243, 216, 103, .72);
}

.war-line-filter {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.war-color-select button,
.war-actions button,
.war-line-filter button {
  min-width: 0;
  min-height: 34px;
  border-radius: 8px;
  padding: 0 3px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 1000;
}

.war-color-select button[data-war-color="green"] { background: rgba(31,157,99,0.44); }
.war-color-select button[data-war-color="red"] { background: rgba(201,50,50,0.44); }
.war-color-select button[data-war-color="yellow"] { background: rgba(216,178,47,0.5); color: #171207; }
.war-color-select button[data-war-color="blue"] { background: rgba(50,120,216,0.44); }

.war-color-select button.active,
.war-actions button.active,
.war-line-filter button.active {
  outline: 3px solid var(--gold);
  background: radial-gradient(circle at 50% 18%, #fff2a6, var(--gold));
  color: #201700;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(230,197,101,0.18), 0 0 18px rgba(230,197,101,0.7);
  transform: translateY(-1px);
}

.war-line-filter button {
  min-height: 30px;
  padding: 0 2px;
  font-size: 0.55rem;
}

.war-line-filter button[data-war-lines="green"] { color: #84e6b5; }
.war-line-filter button[data-war-lines="red"] { color: #ff9898; }
.war-line-filter button[data-war-lines="yellow"] { color: #f1cf5b; }
.war-line-filter button[data-war-lines="blue"] { color: #9fc5ff; }

.war-color-select.locked button:not(.active) {
  opacity: 0.45;
}

.war-canvas {
  border-color: rgba(230,197,101,0.42);
  image-rendering: crisp-edges;
  background: #0b1712;
  box-shadow: inset 0 0 34px rgba(105,210,160,0.08), 0 18px 42px rgba(0,0,0,0.46);
}

.gfx-ultra .war-window {
  background:
    radial-gradient(circle at 10% 8%, rgba(105,210,160,0.28), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(126,182,255,0.18), transparent 28%),
    radial-gradient(circle at 50% 105%, rgba(230,197,101,0.18), transparent 36%),
    linear-gradient(180deg, #13251c 0%, #07110d 72%);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 34px rgba(230,197,101,0.14);
}

.gfx-ultra .war-canvas {
  image-rendering: auto;
  border-color: rgba(255,242,166,0.72);
  box-shadow:
    inset 0 0 42px rgba(126,182,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.13),
    0 20px 55px rgba(0,0,0,0.58),
    0 0 34px rgba(230,197,101,0.18);
}

.gfx-ultra .war-roster,
.gfx-ultra .war-actions,
.gfx-ultra .war-line-filter {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.22));
  border-radius: 8px;
}

.war-roster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(230,197,101,0.22);
  border-radius: 8px;
  background: rgba(0,0,0,0.24);
}

.war-roster span {
  min-width: 0;
  padding: 6px 4px;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-align: center;
}

.war-roster b {
  display: block;
  color: var(--gold);
  font-size: 0.82rem;
}

.kingdom-window {
  width: min(100%, 430px);
  position: relative;
  grid-template-rows: auto auto auto auto minmax(0, auto) auto;
  border-color: rgba(116, 238, 192, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(240,207,93,0.18), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(29,159,117,0.24), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(169,60,70,0.2), transparent 30%),
    linear-gradient(180deg, #0d1c18, #06100e);
}

.kingdom-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.kingdom-stats span {
  padding: 6px 3px;
  font-size: 0.61rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kingdom-startbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.kingdom-startbar button {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(116,238,192,0.24);
  background: rgba(255,255,255,0.07);
  color: var(--text);
  font-weight: 1000;
}

.kingdom-startbar button:first-child {
  background: linear-gradient(180deg, #79e0ae, #2b9a70);
  color: #06100e;
}

.kingdom-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.kingdom-actions button {
  min-height: 31px;
  padding: 5px 3px;
  font-size: 0.52rem;
}

.kingdom-wall-time {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(240,207,93,0.34);
  color: #f0cf5d;
  font-size: 0.72rem;
  vertical-align: middle;
}

.kingdom-selection-strip {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(116,238,192,0.24);
  border-radius: 8px;
  background: rgba(6,16,14,0.72);
  color: #dff8e7;
  font-size: 0.72rem;
  font-weight: 900;
  overflow: hidden;
  flex-wrap: wrap;
}

.kingdom-selection-strip span {
  flex: 1 1 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kingdom-selection-strip button,
.kingdom-line-controls button,
.kingdom-command-panel button {
  min-height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(116,238,192,0.24);
  background: rgba(255,255,255,0.07);
  color: var(--text);
  font-size: 0.64rem;
  font-weight: 1000;
}

.kingdom-selection-strip button:active,
.kingdom-line-controls button.active,
.kingdom-command-panel button:active {
  background: #f0cf5d;
  color: #16110a;
}

.kingdom-line-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.kingdom-command-panel {
  display: none;
  position: absolute;
  left: 14px;
  right: 14px;
  top: min(51dvh, 410px);
  z-index: 12;
  max-height: min(180px, 28dvh);
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(240,207,93,0.2);
  border-radius: 8px;
  background: rgba(8,18,15,0.96);
  color: #dff8e7;
  font-size: 0.7rem;
  box-shadow: 0 18px 42px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.kingdom-command-panel.active {
  display: grid;
  gap: 7px;
}

.kingdom-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kingdom-command-panel b {
  color: #f0cf5d;
}

.kingdom-panel-meta,
.kingdom-command-panel span {
  font-weight: 850;
}

.kingdom-panel-head button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
}

.kingdom-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.kingdom-unit-card {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 0;
  padding: 7px 4px;
  background:
    linear-gradient(180deg, rgba(240,207,93,0.18), rgba(255,255,255,0.05)),
    rgba(8,18,15,0.9);
}

.kingdom-unit-card strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f0cf5d;
  color: #181209;
  font-size: 1rem;
}

.kingdom-unit-card em {
  font-style: normal;
  font-size: 0.62rem;
  color: #fff2a6;
}

.kingdom-unit-card small {
  color: #cfe9dc;
  font-size: 0.5rem;
  line-height: 1.1;
}

.kingdom-canvas {
  width: min(100%, 404px, calc(100dvh - 276px));
  height: min(100%, 404px, calc(100dvh - 276px));
  justify-self: center;
  align-self: center;
  border-color: rgba(116, 238, 192, 0.42);
  background: #07100e;
  box-shadow: inset 0 0 24px rgba(116,238,192,0.08), 0 16px 34px rgba(0,0,0,0.42);
  touch-action: none;
}

.racer-window {
  border-color: rgba(126,182,255,0.38);
  background:
    radial-gradient(circle at 15% 0%, rgba(105,210,160,0.2), transparent 26%),
    radial-gradient(circle at 85% 0%, rgba(126,182,255,0.22), transparent 28%),
    linear-gradient(180deg, #101823, #070b10);
}

.racer-canvas {
  width: min(calc(100vw - 48px), 420px, calc((100dvh - 250px) * 0.75));
  height: min(calc((100vw - 48px) * 1.333), 560px, calc(100dvh - 250px));
  border-color: rgba(126,182,255,0.42);
  background: #070b10;
}

.racer-designs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.racer-designs button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 900;
}

.racer-designs button small {
  font-size: 0.62rem;
  color: var(--muted);
}

.racer-designs button.locked {
  border-color: rgba(241,207,91,0.24);
  background: rgba(255,255,255,.035);
}

.racer-designs button.owned small,
.racer-designs button.active small {
  color: inherit;
}

.racer-designs button.active {
  outline: 3px solid var(--gold);
  background: radial-gradient(circle at 50% 18%, #fff2a6, var(--gold));
  color: #201700;
}

.racer-designs.locked button:not(.active) {
  opacity: .48;
}

.kingdom-picker-window {
  max-width: 520px;
}

.game-mode-grid {
  display: grid;
  gap: 10px;
}

.game-mode-grid button {
  display: grid;
  gap: 6px;
  min-height: 92px;
  text-align: left;
  border: 1px solid rgba(241,207,91,0.24);
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 15% 0%, rgba(241,207,91,0.2), transparent 30%),
    rgba(255,255,255,0.055);
  color: var(--text);
}

.game-mode-grid button b {
  font-size: 1rem;
}

.game-mode-grid button small {
  color: var(--muted);
  font-weight: 800;
}

.racer-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.racer-controls button {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 6px;
  border: 1px solid var(--line);
  background: rgba(126,182,255,0.12);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 1000;
}

.racer-controls button:nth-child(2) {
  background: rgba(230,197,101,0.24);
  color: #fff2bf;
}

.racer-controls button:nth-child(3) {
  background: rgba(126,182,255,0.26);
  color: #dcedff;
}

.racer-controls button:active {
  background: var(--blue);
  color: #031121;
}

.strong-window {
  width: min(100%, 840px);
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  border-color: rgba(240,207,93,0.38);
  background:
    radial-gradient(circle at 18% 0%, rgba(240,207,93,0.16), transparent 24%),
    radial-gradient(circle at 86% 0%, rgba(116,238,192,0.16), transparent 26%),
    linear-gradient(180deg, #10231d, #06100d);
}

.strong-hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.strong-hud span {
  min-width: 0;
  padding: 7px 6px;
  border-radius: 8px;
  border: 1px solid rgba(116,238,192,0.22);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  text-align: center;
  font-size: 0.68rem;
  font-weight: 900;
}

.strong-hud b {
  display: block;
  color: var(--gold);
  font-size: 0.78rem;
}

.strong-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.strong-controls button {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 1000;
}

.strong-controls button.active {
  background: var(--gold);
  color: #171207;
  border-color: transparent;
}

.strong-color-select {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.strong-color-select button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 1000;
}

.strong-color-select span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--strong-color);
  box-shadow: 0 0 12px var(--strong-color);
}

.strong-canvas {
  width: 100%;
  aspect-ratio: 1.22 / 1;
  max-height: calc(100dvh - 260px);
  min-height: 360px;
  display: block;
  border: 1px solid rgba(240,207,93,0.26);
  border-radius: 8px;
  background: #173122;
  touch-action: none;
}

.krieg-window {
  width: min(100%, 900px);
  max-height: calc(100dvh - 20px);
  border-color: rgba(230,197,101,.36);
  background:
    radial-gradient(circle at 18% 0%, rgba(230,197,101,.16), transparent 28%),
    radial-gradient(circle at 84% 4%, rgba(105,210,160,.13), transparent 28%),
    linear-gradient(180deg, #132019, #07100d);
}

.krieg-window.battle {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.krieg-scenario-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.krieg-scenario-list button {
  min-height: 108px;
  padding: 12px;
  border: 1px solid rgba(230,197,101,.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 0%, rgba(230,197,101,.14), transparent 34%),
    linear-gradient(145deg, rgba(22,40,32,.96), rgba(8,16,13,.98));
  color: var(--text);
  text-align: left;
}

.krieg-scenario-list strong,
.krieg-scenario-list span {
  display: block;
}

.krieg-scenario-list strong {
  margin-bottom: 7px;
  color: var(--gold);
  font-size: 1rem;
}

.krieg-scenario-list span {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.3;
}

.krieg-hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.krieg-hud span {
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid rgba(105,210,160,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  color: var(--muted);
  text-align: center;
  font-size: .68rem;
  font-weight: 900;
}

.krieg-hud b {
  display: block;
  color: var(--gold);
  font-size: .78rem;
}

.krieg-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.krieg-actions button {
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  font-size: .68rem;
  font-weight: 1000;
}

.krieg-actions button:nth-last-child(-n+2) {
  background: rgba(230,197,101,.14);
  border-color: rgba(230,197,101,.26);
}

.krieg-canvas {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  max-height: calc(100dvh - 286px);
  min-height: 320px;
  display: block;
  border: 2px solid rgba(230,197,101,.28);
  border-radius: 8px;
  background: #17251d;
  box-shadow: inset 0 0 44px rgba(0,0,0,.32), 0 14px 28px rgba(0,0,0,.32);
  touch-action: none;
}

@media (max-width: 620px) {
  .wardrobe-closet {
    grid-template-columns: 1fr;
    max-height: min(76dvh, 760px);
  }

  .wardrobe-preview {
    max-height: 300px;
    overflow: auto;
  }

  .character-dialog .wardrobe-card {
    grid-template-columns: minmax(0, 1fr) 86px;
  }

  .character-dialog .wardrobe-actions {
    width: 86px;
  }

  .krieg-window {
    padding: 10px;
  }

  .krieg-scenario-list {
    grid-template-columns: 1fr;
  }

  .krieg-hud {
    grid-template-columns: repeat(3, 1fr);
  }

  .krieg-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .krieg-canvas {
    min-height: 300px;
    max-height: calc(100dvh - 360px);
  }
}

.iconman-window {
  position: relative;
  width: min(100%, 620px);
  border-color: rgba(126,182,255,0.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(242,207,93,0.22), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(126,182,255,0.2), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #101a28, #05090f);
  box-shadow: inset 0 0 0 1px rgba(126,182,255,.16), 0 24px 70px rgba(0,0,0,.62);
}

.iconman-stats {
  grid-template-columns: repeat(4, 1fr);
}

.iconman-menu {
  display: grid;
  gap: 9px;
  overflow: auto;
}

.iconman-panel {
  padding: 9px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
}

.iconman-panel h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
}

.iconman-levels,
.iconman-shop,
.iconman-upgrades {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.iconman-levels button,
.iconman-shop button,
.iconman-upgrades button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(126,182,255,0.12);
  color: var(--text);
  font-weight: 1000;
}

.iconman-upgrades {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iconman-upgrades button {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 7px 4px;
  font-size: 0.68rem;
}

.iconman-shop button {
  display: grid;
  place-items: center;
  gap: 2px;
  font-size: 1.35rem;
}

.iconman-shop small {
  color: var(--muted);
  font-size: 0.58rem;
}

.iconman-levels button.active,
.iconman-shop button.active,
.iconman-upgrades button:active {
  outline: 3px solid var(--gold);
  background: radial-gradient(circle at 50% 20%, #fff4ad, var(--gold));
  color: #1b1505;
}

.iconman-skin-dialog {
  position: absolute;
  inset: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.72);
}

.iconman-skin-box {
  width: min(100%, 540px);
  max-height: min(74dvh, 560px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(242,207,93,0.36);
  border-radius: 8px;
  background: linear-gradient(180deg, #101a28, #05090f);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

.iconman-shop-large {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.iconman-canvas {
  width: min(calc(100vw - 48px), 570px, calc((100dvh - 250px) * 0.905));
  height: min(calc((100vw - 48px) * 1.105), 630px, calc(100dvh - 250px));
  border-color: rgba(126,182,255,0.42);
  border-width: 3px;
  background:
    radial-gradient(circle at 50% 45%, rgba(126,182,255,.12), transparent 45%),
    #05090f;
  box-shadow: inset 0 0 34px rgba(126,182,255,.18), 0 16px 36px rgba(0,0,0,.42);
  image-rendering: crisp-edges;
}

.local-place-section {
  border-color: rgba(105,210,160,.2);
  background: linear-gradient(145deg, rgba(105,210,160,.09), rgba(255,255,255,.035));
}

.iconman-controls {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 430px) {
  .war-actions {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .racer-controls {
    grid-template-columns: repeat(2, 1fr);
  }

  .iconman-levels,
  .iconman-shop,
  .iconman-upgrades {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .iconman-shop-large {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.skill-grid {
  grid-template-columns: 1fr 1fr;
}

.skill-card {
  min-height: 112px;
  text-align: left;
  color: inherit;
}

.skill-card strong {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: rgba(105, 210, 160, 0.16);
  color: var(--accent);
}

.bank-card {
  margin-bottom: 10px;
  background: linear-gradient(135deg, #20372d, #111b17 64%);
}

.bank-card h2 {
  margin: 0 0 12px;
  font-size: 1.16rem;
  overflow-wrap: anywhere;
}

.world-stage {
  position: relative;
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(105,210,160,.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 48% 22%, rgba(126, 182, 255, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(34,72,60,.96), #0f1714 66%);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 34px rgba(0,0,0,.24);
}

.world-stage h2 {
  margin: 0;
  font-size: 1.25rem;
}

.world-globe {
  position: relative;
  width: 100%;
  aspect-ratio: 1.45;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(circle at 24% 38%, rgba(78, 206, 147, 0.43), transparent 18%),
    radial-gradient(circle at 63% 42%, rgba(69, 190, 142, 0.38), transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 54%, rgba(0,0,0,.28) 78%),
    linear-gradient(145deg, #0b2d34, #0f413c 48%, #081412);
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
  border: 1px solid rgba(126, 182, 255, 0.18);
  box-shadow:
    inset 0 0 42px rgba(0,0,0,0.28),
    0 18px 34px rgba(0,0,0,0.28);
}

.unified-map-toolbar {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(105,210,160,.18);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(105,210,160,.12), rgba(255,255,255,.035));
}

#world .city-map {
  height: clamp(280px, 58vw, 390px);
  background:
    linear-gradient(rgba(255,255,255,0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.038) 1px, transparent 1px),
    radial-gradient(circle at 18% 24%, rgba(68,147,196,.5), transparent 16%),
    radial-gradient(circle at 72% 38%, rgba(81,164,106,.38), transparent 18%),
    radial-gradient(circle at 46% 72%, rgba(230,197,101,.24), transparent 18%),
    linear-gradient(135deg, #173329, #0d1814);
  box-shadow: inset 0 0 34px rgba(0,0,0,.32), 0 16px 26px rgba(0,0,0,.22);
}

.travel-map-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.continent {
  position: absolute;
  display: block;
  border-radius: 45% 55% 48% 52%;
  background: linear-gradient(135deg, rgba(98, 184, 112, 0.9), rgba(191, 174, 94, 0.7));
  box-shadow: inset -10px -10px 18px rgba(0,0,0,0.18), 0 0 20px rgba(98,184,112,0.1);
}

.c-america { left: 9%; top: 26%; width: 21%; height: 38%; transform: rotate(-18deg); }
.c-europe { left: 43%; top: 25%; width: 12%; height: 14%; transform: rotate(8deg); }
.c-africa { left: 47%; top: 39%; width: 14%; height: 28%; transform: rotate(-6deg); }
.c-asia { left: 58%; top: 25%; width: 27%; height: 34%; transform: rotate(7deg); }
.c-australia { left: 76%; top: 68%; width: 12%; height: 10%; transform: rotate(10deg); }

.map-line {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
}

.l-atlantic { left: 27%; top: 44%; width: 22%; transform: rotate(-10deg); }
.l-asia { left: 58%; top: 54%; width: 24%; transform: rotate(18deg); }

.world-current-card {
  position: absolute;
  z-index: 3;
  left: 10px;
  top: 10px;
  display: grid;
  gap: 2px;
  max-width: min(58%, 260px);
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(5, 18, 15, 0.78);
  border: 1px solid rgba(230, 197, 101, 0.22);
  box-shadow: 0 10px 18px rgba(0,0,0,0.22);
}

.world-current-card small,
.world-current-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.world-current-card strong {
  color: var(--gold);
  font-size: 1rem;
}

.globe-pin {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  padding: 0;
}

.globe-pin b {
  display: block;
  width: 14px;
  height: 14px;
  margin: 3px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(239, 119, 109, 0.22), 0 8px 18px rgba(0,0,0,0.34);
}

.globe-pin.current b {
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(230, 197, 101, 0.28), 0 0 20px rgba(230,197,101,0.74);
}

.globe-pin span {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  max-width: 86px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.68);
  color: var(--text);
  font-size: 0.67rem;
  font-weight: 900;
  white-space: nowrap;
}

.world-travel-section,
.world-local-section {
  margin-top: 12px;
}

.casino-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid rgba(230, 197, 101, 0.35);
  border-radius: 8px;
  background:
    radial-gradient(circle at 80% 20%, rgba(230, 197, 101, 0.22), transparent 30%),
    var(--panel);
}

.casino-wallet h2 {
  margin: 0;
  font-size: 1.15rem;
}

.wallet-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.casino-nav-row, .chip-row, .slot-picker, .casino-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.casino-upgrade {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(230,197,101,0.25);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(230,197,101,0.14), rgba(116,238,192,0.07));
}

.casino-upgrade strong,
.casino-upgrade span {
  display: block;
}

.casino-upgrade span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.casino-nav, .chip {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 900;
}

.casino-nav.active, .chip.active {
  background: var(--gold);
  color: #201700;
  border-color: transparent;
}

.casino-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 12% 8%, rgba(230, 197, 101, 0.12), transparent 28%),
    linear-gradient(180deg, #163027, #111b17);
  overflow: hidden;
}

.casino-table h3 {
  margin: 0;
}

.casino-table p {
  color: var(--muted);
  line-height: 1.4;
}

.casino-loading,
.casino-floor {
  padding: 14px;
  border: 1px solid rgba(230,197,101,.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(230,197,101,.2), transparent 34%),
    linear-gradient(145deg, #17251f, #07110d);
  box-shadow: inset 0 0 32px rgba(0,0,0,.28), 0 18px 34px rgba(0,0,0,.24);
}

.casino-loading h3 {
  margin: 0 0 12px;
}

.casino-progress {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(230,197,101,.28);
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.45);
}

.casino-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #69d2a0, #e6c565);
  box-shadow: 0 0 18px rgba(230,197,101,.42);
}

.casino-progress.walk {
  margin-top: 10px;
}

.casino-floor-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
}

.casino-floor-head h3,
.casino-floor-head p {
  margin: 0;
}

.casino-floor-head span {
  color: var(--gold);
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.casino-map {
  position: relative;
  height: min(390px, 72vw);
  min-height: 270px;
  border: 3px solid rgba(230,197,101,.38);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(230,197,101,.12), transparent 24%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 2px, transparent 2px 22px),
    linear-gradient(145deg, #13221b, #07110d);
  box-shadow: inset 0 0 0 8px rgba(0,0,0,.22), inset 0 0 42px rgba(0,0,0,.5);
}

.casino-map::before {
  content: "";
  position: absolute;
  left: 38%;
  top: 28%;
  width: 24%;
  height: 38%;
  border: 2px solid rgba(230,197,101,.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(230,197,101,.16), transparent 45%),
    rgba(15,31,25,.72);
  pointer-events: none;
  z-index: 1;
}

.casino-room,
.casino-carpet,
.casino-wall,
.casino-room-label {
  position: absolute;
  display: block;
  pointer-events: none;
}

.casino-room {
  border: 2px solid rgba(230,197,101,.26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.1), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 12px),
    rgba(20,37,31,.88);
  box-shadow: inset 0 0 24px rgba(0,0,0,.34), 0 10px 20px rgba(0,0,0,.2);
  z-index: 1;
}

.room-cards.left { left: 4%; top: 10%; width: 29%; height: 27%; }
.room-cards.right { right: 4%; top: 10%; width: 29%; height: 27%; }
.room-slots { left: 36%; top: 30%; width: 28%; height: 33%; background-color: rgba(44,32,56,.82); }
.room-roulette { left: 4%; top: 48%; width: 31%; height: 30%; background-color: rgba(42,23,27,.82); }
.room-salon { right: 4%; top: 48%; width: 31%; height: 30%; background-color: rgba(26,34,55,.82); }
.room-cashier { left: 32%; bottom: 4%; width: 36%; height: 18%; background-color: rgba(62,48,19,.86); }
.room-toilet { left: 39%; top: 4%; width: 22%; height: 17%; background-color: rgba(22,50,58,.86); }

.casino-wall {
  z-index: 2;
  border-radius: 6px;
  background: linear-gradient(180deg, #6f5a35, #2b2419);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 12px rgba(0,0,0,.22);
}

.wall-top { left: 2%; top: 2%; width: 96%; height: 3%; }
.wall-bottom { left: 2%; bottom: 2%; width: 96%; height: 3%; }
.wall-left { left: 2%; top: 2%; width: 3%; height: 96%; }
.wall-right { right: 2%; top: 2%; width: 3%; height: 96%; }

.casino-carpet {
  z-index: 2;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(121,21,35,.86), rgba(178,39,53,.86), rgba(121,21,35,.86));
  box-shadow: inset 0 0 0 2px rgba(230,197,101,.2), 0 6px 16px rgba(0,0,0,.2);
}

.casino-carpet.main { left: 48%; top: 19%; width: 4%; height: 68%; }
.casino-carpet.cross { left: 18%; top: 43%; width: 64%; height: 5%; }
.casino-carpet.lower { left: 34%; top: 79%; width: 32%; height: 5%; }
.casino-carpet.upper { left: 43%; top: 20%; width: 14%; height: 5%; }

.casino-room-label {
  left: 50%;
  top: 34%;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(230,197,101,.72);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.casino-station {
  position: absolute;
  z-index: 3;
  width: 112px;
  min-height: 58px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(230,197,101,.3);
  border-radius: 8px;
  padding: 7px;
  background:
    radial-gradient(circle at 50% 0%, rgba(230,197,101,.15), transparent 36%),
    linear-gradient(180deg, rgba(31,55,45,.98), rgba(13,25,20,.98));
  color: var(--text);
  box-shadow: 0 12px 18px rgba(0,0,0,.28);
}

.casino-station strong,
.casino-station small {
  display: block;
}

.casino-station small {
  color: var(--muted);
  font-size: .68rem;
}

.casino-station.active {
  background: linear-gradient(180deg, #e6c565, #a77f26);
  color: #1d1605;
}

.casino-station.active small {
  color: rgba(29,22,5,.72);
}

.casino-runner {
  position: absolute;
  z-index: 5;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #efffed, #69d2a0 54%, #236b4b);
  color: #07110d;
  box-shadow: 0 0 0 6px rgba(105,210,160,.18), 0 0 22px rgba(105,210,160,.58);
  transition: left .35s linear, top .35s linear;
}

.casino-floor.compact .casino-map {
  height: 190px;
  min-height: 190px;
}

.casino-floor.compact .casino-station {
  width: 86px;
  min-height: 45px;
  font-size: .72rem;
}

.casino-gender {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid rgba(230,197,101,.22);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}

.casino-gender span {
  color: var(--gold);
  font-weight: 900;
}

.casino-gender button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-weight: 900;
  padding: 8px 12px;
}

.casino-plan {
  height: min(430px, 76vw);
  min-height: 310px;
  border-color: rgba(191,168,128,.72);
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px),
    linear-gradient(0deg, rgba(0,0,0,.055) 0 1px, transparent 1px 18px),
    linear-gradient(145deg, #bda98a, #806d54);
  box-shadow: inset 0 0 0 10px #3f4345, inset 0 0 0 16px rgba(255,255,255,.08), 0 18px 34px rgba(0,0,0,.32);
}

.casino-plan::before {
  display: none;
}

.casino-plan .casino-room {
  border: 7px solid #44494b;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
    linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 22px),
    #bca88a;
  box-shadow: inset 0 0 24px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.22);
}

.casino-plan .casino-room b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0,0,0,.74);
  font-size: clamp(.62rem, 2.3vw, 1rem);
  line-height: 1.05;
  text-align: center;
  pointer-events: none;
}

.room-hair { left: 2%; top: 3%; width: 20%; height: 22%; background-color: #d1d1ce !important; }
.room-bath { left: 2%; top: 25%; width: 20%; height: 22%; background-color: #d8d8d4 !important; }
.room-sleep { left: 2%; top: 61%; width: 22%; height: 34%; }
.room-dress { left: 24%; top: 61%; width: 10%; height: 34%; }
.room-hall { left: 22%; top: 14%; width: 34%; height: 48%; }
.room-kid { left: 34%; top: 61%; width: 22%; height: 34%; }
.room-guest { left: 42%; top: 3%; width: 24%; height: 31%; }
.room-pantry { left: 66%; top: 3%; width: 10%; height: 31%; background-color: #a99c89 !important; }
.room-kitchen { left: 76%; top: 3%; width: 22%; height: 31%; }
.room-living { left: 56%; top: 34%; width: 42%; height: 61%; }

.casino-cash-desk {
  display: none;
  position: absolute;
  left: 47%;
  top: 48%;
  z-index: 4;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 24px;
  padding: 0;
  border: 2px solid rgba(230,197,101,.72);
  border-radius: 8px;
  background: linear-gradient(180deg, #f1d47a, #9c7424);
  font-style: normal;
  box-shadow: 0 10px 20px rgba(0,0,0,.28);
}

.casino-door {
  position: absolute;
  z-index: 5;
  width: 34px;
  height: 7px;
  border-radius: 999px;
  background: #e8edf2;
  box-shadow: 0 0 0 2px rgba(45,50,53,.72), 0 4px 10px rgba(0,0,0,.28);
}

.door-entry { right: 1.4%; top: 50%; transform: rotate(90deg); }
.door-floor-left { left: 39%; top: 14%; }
.door-floor-right { right: 16%; top: 2%; }

.casino-route-line {
  position: absolute;
  z-index: 4;
  height: 0;
  border-top: 3px dashed rgba(230,197,101,.75);
  transform-origin: 0 0;
  filter: drop-shadow(0 0 6px rgba(230,197,101,.45));
  pointer-events: none;
}

.casino-plan .casino-station {
  width: 88px;
  min-height: 45px;
  padding: 6px 5px;
  font-size: .74rem;
  line-height: 1.05;
  background: linear-gradient(180deg, rgba(31,55,45,.96), rgba(13,25,20,.96));
}

.casino-plan .casino-station small {
  font-size: .55rem;
  line-height: 1.05;
}

.casino-plan .casino-station[data-casino-area="toilet-men"],
.casino-plan .casino-station[data-casino-area="toilet-women"] {
  width: 76px;
  min-height: 43px;
  font-size: .69rem;
}

.casino-plan .casino-station[data-casino-area="slots"],
.casino-plan .casino-station[data-casino-area="exit"] {
  width: 86px;
}

.casino-gender.locked {
  justify-content: flex-start;
}

.casino-gender.locked b {
  color: var(--gold);
}

.casino-plan .casino-station[data-casino-area="exit"],
.casino-plan .casino-station[data-casino-area="stairs"] {
  background: linear-gradient(180deg, rgba(70,68,55,.96), rgba(25,24,20,.96));
}

@media (max-width: 460px) {
  .casino-plan .casino-station {
    width: 72px;
    min-height: 38px;
    font-size: .62rem;
  }

  .casino-plan .casino-station small {
    display: none;
  }
}

.casino-exit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 24%, rgba(230,197,101,.18), transparent 34%),
    rgba(2, 8, 6, .86);
  backdrop-filter: blur(10px);
}

.casino-exit-box {
  width: min(430px, 100%);
  border: 1px solid rgba(230,197,101,.34);
  border-radius: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 70% 0%, rgba(105,210,160,.16), transparent 36%),
    linear-gradient(145deg, #17251f, #07110d);
  box-shadow: 0 24px 70px rgba(0,0,0,.52), inset 0 0 30px rgba(230,197,101,.07);
}

.casino-exit-box h3 {
  margin: 0 0 14px;
}

.casino-exit-box p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.casino-cashier {
  margin-top: 10px;
}

.table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.table-head strong {
  color: var(--gold);
  white-space: nowrap;
}

.hand-zone {
  padding: 11px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
}

.hand-zone p {
  margin: 0 0 8px;
  font-weight: 900;
  color: var(--text);
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.play-card {
  width: 52px;
  height: 72px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #f5f2e8;
  color: #111;
  border: 1px solid rgba(0,0,0,0.16);
  box-shadow: 0 8px 16px rgba(0,0,0,0.24);
}

.play-card.red {
  color: #b91c1c;
}

.play-card.hidden-card {
  background: repeating-linear-gradient(45deg, #163a31, #163a31 6px, #235849 6px, #235849 12px);
  color: #fff;
}

.play-card b {
  font-size: 1.15rem;
}

.play-card small {
  margin-top: -12px;
  font-size: 1rem;
}

.highlow-table {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.12), transparent 34%),
    radial-gradient(ellipse at 50% 58%, rgba(44,125,87,.82), rgba(8,54,39,.95) 58%, #04100c 100%);
  border: 5px solid rgba(91, 58, 24, 0.86);
  box-shadow: inset 0 0 0 2px rgba(230,197,101,.28), inset 0 0 52px rgba(0,0,0,.42), 0 20px 34px rgba(0,0,0,.32);
}

.highlow-table::before {
  content: "HIGH  •  EQUAL  •  LOWER";
  position: absolute;
  left: 50%;
  top: 58px;
  transform: translateX(-50%);
  width: min(82%, 390px);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(230,197,101,.25);
  color: rgba(230,197,101,.46);
  font-size: .72rem;
  font-weight: 1000;
  text-align: center;
  letter-spacing: .08em;
  pointer-events: none;
}

.highlow-table::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(230,197,101,.22);
  border-radius: 999px;
  pointer-events: none;
}

.highlow-table .table-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(16,41,31,.9), rgba(230,197,101,0.12));
  border: 1px solid rgba(230,197,101,.22);
}

.highlow-table .table-head strong {
  color: var(--gold);
}

.highlow-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.highlow-stack {
  border: 1px solid rgba(230,197,101,0.22);
  border-radius: 8px;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.1), transparent 36%),
    linear-gradient(180deg, rgba(5,29,21,0.9), rgba(0,0,0,0.36));
  box-shadow: inset 0 0 24px rgba(0,0,0,.28);
}

.highlow-stack-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--gold);
  font-weight: 900;
}

.highlow-chip-stack {
  display: grid;
  gap: 5px;
}

.highlow-stack-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px;
  align-items: center;
}

.highlow-stack-row span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.highlow-stack-row div {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  min-height: 20px;
  padding: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(255,255,255,0.045));
  box-shadow: inset 0 2px 7px rgba(0,0,0,.32);
}

.highlow-stack-row i {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}

.highlow-stack-row i.filled {
  background: radial-gradient(circle at 34% 25%, #fff7ce, #e6c565 48%, #a47726 72%, #5b3915);
  box-shadow: 0 3px 0 #6d4718, 0 0 9px rgba(230,197,101,0.48);
}

.highlow-stack-row.full div {
  outline: 1px solid rgba(230,197,101,0.34);
}

.highlow-card-zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.highlow-card-zone > div {
  min-height: 128px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.07), transparent 36%), rgba(0,0,0,0.24);
  box-shadow: inset 0 0 18px rgba(0,0,0,.25);
}

.highlow-card-zone small {
  color: var(--muted);
  font-weight: 900;
}

.highlow-card {
  width: 62px;
  height: 86px;
}

.highlow-drawn {
  margin-top: 10px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}

.highlow-drawn small {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-weight: 900;
}

.highlow-drawn .card-row {
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.highlow-drawn .highlow-card {
  width: 38px;
  height: 54px;
  flex: 0 0 auto;
}

.highlow-risk-actions {
  position: relative;
  z-index: 1;
  padding: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(230,197,101,0.16), rgba(255,255,255,.04));
  border: 1px solid rgba(230,197,101,.18);
}

.highlow-history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.highlow-history span {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.highlow-history span.win {
  color: var(--gold);
  background: rgba(230,197,101,0.15);
}

.highlow-history span.loss {
  color: #ffb4aa;
  background: rgba(217,74,58,0.18);
}

.casino-result {
  min-height: 34px;
  margin: 10px 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.2);
  color: #f3f5ed !important;
  font-weight: 800;
}

.roulette-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}

.roulette-table {
  background:
    radial-gradient(circle at 50% 0%, rgba(230, 197, 101, 0.16), transparent 35%),
    linear-gradient(180deg, #173b30, #07100d);
  border-color: rgba(230, 197, 101, 0.22);
}

.roulette-wheel {
  position: relative;
  width: min(76vw, 292px);
  aspect-ratio: 1;
  margin: 0 auto 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #efe8c8 0 10%, #92743b 11% 13%, transparent 14%),
    radial-gradient(circle at 50% 50%, transparent 0 34%, #d6b861 35% 37%, transparent 38%),
    repeating-conic-gradient(from -4.86deg, #161614 0 4.86deg, #9b1e24 4.86deg 9.72deg, #161614 9.72deg 14.58deg, #0b7a43 14.58deg 19.44deg),
    radial-gradient(circle at 34% 26%, rgba(255,255,255,0.34), transparent 10%),
    #111;
  box-shadow:
    inset 0 0 0 10px #5b351c,
    inset 0 0 0 16px #c19443,
    inset -22px -18px 34px rgba(0,0,0,0.52),
    0 18px 36px rgba(0,0,0,0.44);
  display: grid;
  place-items: center;
}

.roulette-wheel b {
  position: relative;
  z-index: 5;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 26%, #fff8d6, #b98d3e);
  color: #201700;
  font-size: 1rem;
  text-transform: uppercase;
  box-shadow: inset 0 -8px 14px rgba(0,0,0,0.22);
}

.wheel-pocket-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.wheel-pocket-ring span {
  position: absolute;
  left: calc(50% - 12px);
  top: calc(50% - 12px);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  transform: rotate(var(--pocket-angle)) translateY(calc(min(76vw, 292px) * -0.385)) rotate(calc(-1 * var(--pocket-angle)));
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35);
}

.wheel-pocket-ring span.red { background: #a61e28; }
.wheel-pocket-ring span.black { background: #141618; }
.wheel-pocket-ring span.zero { background: #0d8a4c; }
.wheel-pocket-ring span.landed {
  outline: 2px solid var(--gold);
  box-shadow: 0 0 16px rgba(230,197,101,0.9);
}

.roulette-ball {
  position: absolute;
  z-index: 6;
  left: calc(50% - 7px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, #fff, #d8d8d8 58%, #8f8f8f);
  box-shadow: 0 0 10px rgba(255,255,255,0.92), 0 5px 9px rgba(0,0,0,0.36);
  transform: rotate(var(--ball-angle)) translateY(calc(min(76vw, 292px) * -0.34));
  transform-origin: center;
}

.roulette-wheel.spinning .roulette-ball {
  animation: ballSpin 2.6s cubic-bezier(.15,.75,.2,1);
}

.roulette-action-bar {
  position: sticky;
  top: 183px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid rgba(230,197,101,0.22);
  border-radius: 8px;
  background: rgba(15, 23, 20, 0.92);
  backdrop-filter: blur(12px);
}

.roulette-start {
  min-height: 48px;
}

@keyframes rouletteSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(1480deg); }
}

@keyframes ballSpin {
  0% { transform: rotate(calc(var(--ball-angle) - 1440deg)) translateY(calc(min(76vw, 292px) * -0.36)); }
  70% { transform: rotate(calc(var(--ball-angle) - 260deg)) translateY(calc(min(76vw, 292px) * -0.36)); }
  100% { transform: rotate(var(--ball-angle)) translateY(calc(min(76vw, 292px) * -0.34)); }
}

.roulette-number, .roulette-outside button {
  min-width: 0;
  min-height: 34px;
  border-radius: 6px;
  color: #fff;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.18);
}

.roulette-number.red { background: #a52828; }
.roulette-number.black { background: #161a1d; }
.roulette-number.zero { background: #17834b; }
.roulette-number.hit {
  outline: 3px solid var(--gold);
  box-shadow: 0 0 18px rgba(230, 197, 101, 0.65);
}

.roulette-number.selected,
.roulette-outside button.selected {
  outline: 3px solid var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(230,197,101,0.18), 0 0 18px rgba(230,197,101,0.45);
  position: relative;
}

.roulette-number.selected::after,
.roulette-outside button.selected::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff7ce, #e6c565 62%, #8f6822);
  border: 1px solid rgba(0,0,0,0.25);
}

.roulette-outside {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.roulette-outside button {
  background: var(--panel-2);
}

.bet-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.bet-list span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(230, 197, 101, 0.16);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
}

.reels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 8px;
  margin: 12px 0;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #0b0d0b, #251d29);
  border: 1px solid rgba(230,197,101,0.25);
}

.reel {
  display: grid;
  gap: 7px;
  padding: 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, #4b365b, #151713);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.reel-spinning {
  animation: reelSpin 360ms linear infinite;
  animation-delay: var(--reel-delay);
}

.reel span {
  min-height: 54px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: radial-gradient(circle at 36% 20%, #fff7df, #f2d77c 62%, #b78532);
  color: #14211d;
  font-weight: 1000;
  font-size: 1.6rem;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.18), 0 5px 10px rgba(0,0,0,0.22);
}

.reels.spinning .reel span {
  filter: blur(1px);
}

@keyframes reelSpin {
  0% { transform: translateY(-8px); }
  50% { transform: translateY(8px); }
  100% { transform: translateY(-8px); }
}

.reel span.win-symbol {
  outline: 3px solid var(--gold);
  background: radial-gradient(circle at 36% 20%, #fff, #ffe783 60%, #d19a2f);
  box-shadow: 0 0 18px rgba(230,197,101,0.82), inset 0 -6px 0 rgba(0,0,0,0.16);
  animation: winPulse 900ms ease-in-out infinite alternate;
}

.horus-reels {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 221, 124, 0.24), transparent 36%),
    linear-gradient(180deg, #241709, #070d0d 70%);
  border-color: rgba(247, 204, 94, 0.46);
  box-shadow: inset 0 0 24px rgba(247, 204, 94, 0.08), 0 14px 26px rgba(0,0,0,0.28);
}

.horus-reels .reel {
  background:
    linear-gradient(180deg, rgba(255, 226, 133, 0.2), transparent 18%),
    linear-gradient(180deg, #5b3515, #101817 72%);
  border: 1px solid rgba(247, 204, 94, 0.24);
}

.horus-reels .reel span {
  background:
    radial-gradient(circle at 35% 18%, #fff8d8, #e7b94d 58%, #7d4b18);
  color: #1a1209;
  text-shadow: 0 1px 0 rgba(255,255,255,0.24);
}

.horus-reels .reel span.win-symbol {
  outline-color: #fff2a8;
  box-shadow: 0 0 22px rgba(255, 219, 93, 0.92), inset 0 -6px 0 rgba(0,0,0,0.16);
}

@keyframes winPulse {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

.slot-machine {
  background:
    radial-gradient(circle at 18% 10%, rgba(230, 197, 101, 0.22), transparent 26%),
    linear-gradient(160deg, #2b2130, #101915 58%, #0a0d0b);
  border-color: rgba(230, 197, 101, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 16px 28px rgba(0,0,0,0.26);
}

.slot-machine .table-head {
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(230,197,101,0.24), rgba(255,255,255,0.05));
}

.slot-machine .table-head h3 {
  color: #fff7d7;
}

.slot-risk {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(230,197,101,0.32);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(230,197,101,0.12), rgba(255,255,255,0.04));
}

.slot-risk strong {
  color: var(--gold);
}

.risk-ladders {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 10px;
  align-items: end;
}

.risk-ladder {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(230,197,101,0.24);
  background: rgba(0,0,0,0.22);
}

.risk-step {
  display: grid;
  place-items: center;
  min-height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, #17231f, #0b100d);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.risk-step.special {
  color: var(--blue);
  border-color: rgba(126,182,255,0.35);
}

.risk-step.active {
  color: #201700;
  background: radial-gradient(circle at 50% 20%, #fff3b0, var(--gold));
  box-shadow: 0 0 18px rgba(230,197,101,0.78);
  transform: scale(1.04);
}

.top-ladder .risk-step {
  min-height: 30px;
}

.card-risk-table {
  display: grid;
  grid-template-columns: 1fr 92px 0.8fr;
  gap: 10px;
  align-items: center;
}

.risk-history,
.risk-peak {
  min-height: 116px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px;
  background: rgba(0,0,0,0.24);
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 5px;
}

.risk-history span,
.risk-deck span {
  min-width: 34px;
  min-height: 46px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #f7f1dd;
  color: #141414;
  font-weight: 1000;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.risk-history span.red,
.risk-deck span.red {
  color: #b91c1c;
}

.risk-deck {
  min-height: 132px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #173a31, #173a31 8px, #235849 8px, #235849 16px);
  border: 2px solid rgba(230,197,101,0.5);
}

.risk-deck span {
  min-width: 58px;
  min-height: 82px;
  font-size: 1.1rem;
}

.risk-deck small,
.risk-peak small,
.risk-history small {
  color: var(--muted);
  font-weight: 800;
}

.risk-peak {
  color: var(--gold);
}

.fireworks i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: rocketBurst 1.2s ease-out infinite;
}

.fireworks i:nth-of-type(1) { transform: translate(-90px, -80px); background: #ffec8b; }
.fireworks i:nth-of-type(2) { transform: translate(88px, -72px); background: #69d2a0; animation-delay: 120ms; }
.fireworks i:nth-of-type(3) { transform: translate(-62px, 84px); background: #7eb6ff; animation-delay: 220ms; }
.fireworks i:nth-of-type(4) { transform: translate(72px, 94px); background: #ef776d; animation-delay: 320ms; }
.fireworks i:nth-of-type(5) { transform: translate(0, -118px); background: #ffffff; animation-delay: 420ms; }

@keyframes rocketBurst {
  0% { opacity: 0; box-shadow: 0 0 0 0 currentColor; }
  35% { opacity: 1; box-shadow: 0 0 0 18px rgba(230,197,101,0.2), 0 0 26px currentColor; }
  100% { opacity: 0; box-shadow: 0 0 0 34px rgba(230,197,101,0); }
}

.real-map-panel {
  display: none;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.real-map-panel h2 {
  margin: 0 0 10px;
}

.real-map-panel iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 8px;
  background: #dbe7dd;
}

.slot-picker .casino-nav {
  border-radius: 8px;
}

.map-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.map-toolbar h2 {
  margin: 0;
  font-size: 1.2rem;
}

.city-map {
  position: relative;
  height: 360px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    radial-gradient(circle at 22% 28%, rgba(126, 182, 255, 0.36), transparent 18%),
    radial-gradient(circle at 68% 40%, rgba(105, 210, 160, 0.24), transparent 16%),
    radial-gradient(circle at 46% 72%, rgba(230, 197, 101, 0.22), transparent 19%),
    #111b17;
  background-size: 34px 34px, 34px 34px, auto, auto, auto, auto;
}

.map-road {
  position: absolute;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transform-origin: left center;
}

.map-pin {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--text);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.map-pin.current {
  background: var(--accent);
  color: #08110d;
}

.map-pin span {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.64);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 900;
}

dialog {
  position: relative;
  width: min(calc(100% - 28px), 480px);
  max-height: calc(100dvh - 34px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: #121d18;
  color: var(--text);
}

.dialog-back-button {
  position: absolute;
  top: 13px;
  left: 14px;
  z-index: 6;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(230,197,101,.24);
  border-radius: 9px;
  background: rgba(14,28,23,.94);
  color: var(--gold);
  font-size: .76rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}

.dialog-back-button:hover {
  border-color: rgba(230,197,101,.52);
  background: rgba(32,49,41,.98);
}

.dialog-back-button[hidden] {
  display: none;
}

dialog #dialogTitle {
  padding-right: 42px;
}

dialog.has-dialog-back {
  padding-top: 62px;
}

dialog.has-dialog-back #dialogTitle {
  min-height: 0;
  padding-top: 0;
}

dialog .purchase-error {
  color: #ffd86b;
  background: rgba(112, 33, 25, 0.42);
  border: 1px solid rgba(255, 111, 91, 0.62);
  border-radius: 6px;
  padding: 10px 12px;
  font-weight: 800;
}

dialog.device-dialog {
  width: min(calc(100% - 24px), 460px);
  overflow: hidden;
}

dialog.device-dialog #dialogText {
  display: none;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
}

.dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.dialog-actions button {
  min-height: 44px;
}

.local-route-actions {
  grid-template-columns: 1fr;
}

.travel-confirm-question {
  display: block;
  margin-top: 12px;
  color: var(--text);
  font-weight: 850;
}

@media (max-width: 420px) {
  .dialog-actions {
    grid-template-columns: 1fr;
  }
}

.market-list {
  display: grid;
  gap: 10px;
  max-height: min(62vh, 620px);
  overflow-y: auto;
  padding-right: 4px;
}

.market-card {
  align-items: stretch;
}

.mini-chart {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  border-radius: 6px;
  background: rgba(6, 20, 15, 0.68);
  border: 1px solid rgba(241, 207, 91, 0.22);
}

.mini-chart polyline {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  float: none;
  margin: 0;
}

@media (max-width: 380px) {
  .field-row, .money-grid, .skill-grid {
    grid-template-columns: 1fr;
  }

  .status-panel {
    grid-template-columns: 126px minmax(0, 1fr) 88px;
    gap: 6px;
  }

  .portrait,
  .phone-shortcut {
    min-height: 168px;
  }

  .portrait-avatar-wrap {
    min-height: 112px;
  }

  .avatar-card.mini .avatar-figure {
    transform: scale(.56) rotateX(3deg);
  }

  .phone-shortcut::before {
    width: 40px;
    height: 68px;
  }

  .meter {
    min-height: 36px;
    padding: 4px 6px;
    font-size: .6rem;
  }

  .tabs {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .hero h1, .topbar h1 {
    font-size: 1.72rem;
  }
}

@media (max-width: 560px) {
  .strong-hud {
    grid-template-columns: repeat(3, 1fr);
  }

  .strong-controls {
    grid-template-columns: repeat(4, 1fr);
  }

  .strong-color-select {
    grid-template-columns: repeat(2, 1fr);
  }

  .strong-canvas {
    min-height: 430px;
    max-height: calc(100dvh - 300px);
  }
}


/* Kaufbestätigung · Version 2026-07-19 */
.purchase-toast-layer {
  position: fixed;
  z-index: 2147483647;
  inset: max(18px, env(safe-area-inset-top)) auto auto 50%;
  width: min(430px, calc(100vw - 24px));
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 10px;
  overflow: visible;
  background: transparent;
  color: inherit;
  transform: translateX(-50%);
  pointer-events: none;
}


.purchase-toast {
  position: relative;
  min-height: 88px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid rgba(244, 207, 98, .35);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 10%, rgba(244,207,98,.18), transparent 28%),
    linear-gradient(145deg, rgba(20,43,35,.98), rgba(5,13,10,.98));
  color: #f8f5e8;
  box-shadow: 0 24px 65px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0;
  transform: translateY(-22px) scale(.94);
  transition: opacity .28s ease, transform .34s cubic-bezier(.2,.9,.25,1.18);
  backdrop-filter: blur(18px);
}

.purchase-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.purchase-toast.hide { opacity: 0; transform: translateY(-12px) scale(.97); }

.purchase-toast::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, #f4cf62, #71efbd);
  transform-origin: left;
  animation: purchase-toast-timer 2.2s linear both;
}

.purchase-toast-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244,207,98,.35);
  border-radius: 16px;
  background: rgba(244,207,98,.11);
  font-size: 1.55rem;
  animation: purchase-icon-pop .5s .08s cubic-bezier(.2,.9,.25,1.4) both;
}

.purchase-toast-copy { min-width: 0; display: grid; gap: 3px; }
.purchase-toast-copy small {
  color: #71efbd;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.purchase-toast-copy strong {
  overflow: hidden;
  color: #fff;
  font-size: .98rem;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.purchase-toast-copy span {
  overflow: hidden;
  color: #aebdb4;
  font-size: .74rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-toast-check {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #71efbd;
  color: #07120e;
  font-weight: 1000;
  box-shadow: 0 0 22px rgba(113,239,189,.28);
}

.purchase-toast-burst { position: absolute; inset: 50% auto auto 42px; pointer-events: none; }
.purchase-toast-burst i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: #f4cf62;
  opacity: 0;
  transform: rotate(calc(var(--i) * 36deg)) translateY(0);
  animation: purchase-burst .72s .13s ease-out both;
}
.purchase-toast-burst i:nth-child(even) { background: #71efbd; }

.purchase-button-feedback {
  position: relative;
  overflow: hidden;
  animation: purchase-button-pulse .58s ease both;
}
.purchase-button-feedback::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  transform: translateX(-70%);
  animation: purchase-button-shine .55s ease both;
  pointer-events: none;
}

@keyframes purchase-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes purchase-icon-pop { from { opacity: 0; transform: scale(.4) rotate(-14deg); } }
@keyframes purchase-burst { 0% { opacity: 1; transform: rotate(calc(var(--i) * 36deg)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(calc(var(--i) * 36deg)) translateY(-44px) scale(.35); } }
@keyframes purchase-button-pulse { 0%,100% { transform: scale(1); } 40% { transform: scale(.96); filter: brightness(1.25); } }
@keyframes purchase-button-shine { to { transform: translateX(70%); } }

@media (max-width: 520px) {
  .purchase-toast-layer { top: max(10px, env(safe-area-inset-top)); }
  .purchase-toast { grid-template-columns: 46px minmax(0, 1fr) 30px; min-height: 78px; padding: 11px 12px; border-radius: 15px; }
  .purchase-toast-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 1.3rem; }
}

/* Game-EP & Icon-Man-Fix · Version 2026-07-19 */
.iconman-levels button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 6px 4px;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
}

.iconman-levels button b {
  font-size: .9rem;
  line-height: 1;
}

.iconman-levels button small {
  color: var(--muted);
  font-size: .56rem;
  font-weight: 850;
  line-height: 1.1;
}

.iconman-levels button:active small,
.iconman-levels button.active small {
  color: currentColor;
}

.snake-difficulty {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.snake-difficulty button {
  min-height: 52px;
}

.snake-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.racer-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.game-xp-toast-layer {
  position: fixed;
  z-index: 2147483647;
  inset: max(18px, env(safe-area-inset-top)) auto auto 50%;
  width: min(430px, calc(100vw - 24px));
  display: grid;
  gap: 10px;
  padding: 0;
  transform: translateX(-50%);
  pointer-events: none;
  isolation: isolate;
  transition: top .2s ease;
}

.game-xp-toast-layer.below-purchase-toast {
  top: calc(max(18px, env(safe-area-inset-top)) + 102px);
}

.game-xp-toast {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 12px 15px;
  overflow: hidden;
  border: 1px solid rgba(132, 199, 255, .62);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 22%, rgba(104, 187, 255, .25), transparent 38%),
    linear-gradient(145deg, rgba(15, 35, 55, .99), rgba(4, 10, 17, .99));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .58), 0 0 34px rgba(94, 174, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .1);
  opacity: 0;
  transform: translateY(-18px) scale(.95);
  transition: opacity .22s ease, transform .32s cubic-bezier(.18, .92, .22, 1.18);
  backdrop-filter: blur(18px);
}

.game-xp-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.game-xp-toast.hide { opacity: 0; transform: translateY(-12px) scale(.97); }

.game-xp-toast-glow {
  position: absolute;
  inset: -70%;
  z-index: 0;
  opacity: .42;
  background: conic-gradient(from 0deg, transparent, rgba(116, 202, 255, .26), transparent 30%, rgba(104, 255, 190, .18), transparent 62%);
  animation: experience-toast-spin 2.2s linear infinite;
}

.game-xp-toast-badge {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(157, 218, 255, .72);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(113, 194, 255, .26), rgba(84, 255, 184, .12));
  color: #e5f6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 20px rgba(62, 151, 224, .18);
  font-size: .86rem;
  font-weight: 1000;
  letter-spacing: .06em;
}

.game-xp-toast-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.game-xp-toast-copy strong {
  color: #fff;
  font-size: clamp(1.05rem, 3vw, 1.34rem);
  line-height: 1;
  text-shadow: 0 0 16px rgba(116, 202, 255, .32);
}

.game-xp-toast-copy small {
  overflow: hidden;
  color: #c3d5e3;
  font-size: .73rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-xp-toast-copy em {
  color: #8ff0ba;
  font-size: .67rem;
  font-style: normal;
  font-weight: 950;
}

@keyframes experience-toast-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 620px) {
  .snake-stats,
  .racer-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .game-xp-toast-layer.below-purchase-toast { top: calc(max(10px, env(safe-area-inset-top)) + 90px); }
}

/* Zuhause-, EP- und Casino-Overlay-Update · 2026-07-19 */
.tabs button[aria-hidden="true"] { display: none !important; }

/* Bank-, Arbeits- und Gewerbe-Update · 2026-07-19 */
.work-mode-card {
  min-height: 118px;
  align-items: center;
  border-color: rgba(111, 180, 230, .24);
  background:
    linear-gradient(145deg, rgba(24, 44, 61, .92), rgba(10, 19, 29, .96));
}

.work-mode-card h3 {
  margin-bottom: 5px;
  font-size: 1rem;
}

.work-mode-card p {
  max-width: 680px;
  font-size: .79rem;
  line-height: 1.45;
}

.work-mode-card button {
  min-width: 112px;
}

.automatic-work-list {
  display: grid;
  gap: 10px;
}

.manual-work-selection {
  display: grid;
  gap: 12px;
  width: min(760px, 100%);
}

.manual-work-option {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(130, 189, 230, .25);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 16%, rgba(87, 170, 224, .14), transparent 38%),
    linear-gradient(145deg, rgba(21, 39, 54, .98), rgba(8, 16, 25, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px rgba(0, 0, 0, .2);
}

.manual-work-option-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 205, 247, .36);
  border-radius: 17px;
  background: rgba(84, 165, 218, .12);
  font-size: 1.65rem;
}

.manual-work-option h3,
.manual-work-option p {
  margin: 0;
}

.manual-work-option p {
  margin-top: 4px;
  color: #b8c8d4;
  font-size: .78rem;
  line-height: 1.42;
}

.manual-work-option small {
  display: block;
  margin-top: 7px;
  color: #7fa4bb;
  font-size: .68rem;
  font-weight: 850;
}

.manual-work-game,
.manual-work-result {
  width: min(760px, 100%);
  display: grid;
  gap: 14px;
}

.manual-work-hud,
.manual-work-result-grid,
.business-offer-status,
.bank-branch-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.manual-work-hud article,
.manual-work-result-grid article,
.business-offer-status article,
.bank-branch-summary article {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(127, 187, 229, .22);
  border-radius: 14px;
  background: rgba(7, 18, 28, .72);
}

.manual-work-hud span,
.manual-work-result-grid span,
.business-offer-status span,
.bank-branch-summary span {
  display: block;
  color: #82a7bd;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.manual-work-hud strong,
.manual-work-result-grid strong,
.business-offer-status strong,
.bank-branch-summary strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #f5fbff;
  font-size: .98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-branch-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bank-branch-summary small {
  display: block;
  margin-top: 3px;
  color: #728fa2;
  font-size: .62rem;
  line-height: 1.25;
}

.manual-work-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .55);
}

.manual-work-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4ba4e5, #78e4b5);
  box-shadow: 0 0 16px rgba(91, 194, 226, .42);
  transition: width .25s linear;
}

.manual-work-message,
.business-last-result {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(124, 185, 225, .18);
  border-radius: 13px;
  background: rgba(9, 21, 31, .72);
  color: #bfd0dc;
  font-size: .78rem;
  line-height: 1.4;
}

.mine-work-area {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(149, 125, 93, .38);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 85%, rgba(198, 146, 77, .14), transparent 38%),
    linear-gradient(180deg, #172029, #090e13 55%, #0d0b09);
  box-shadow: inset 0 -60px 100px rgba(0, 0, 0, .52);
}

.mine-depth {
  position: absolute;
  inset: 0;
  opacity: .42;
  background:
    linear-gradient(120deg, transparent 0 32%, rgba(255,255,255,.04) 33% 34%, transparent 35% 100%),
    repeating-linear-gradient(12deg, rgba(92, 75, 58, .28) 0 3px, transparent 3px 33px);
}

.mine-depth i {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 46% 54% 42% 58%;
  background: #15191c;
  box-shadow: inset -12px -12px 22px rgba(0,0,0,.55), inset 8px 8px 18px rgba(255,255,255,.03);
}

.mine-depth i:nth-child(1) { left: 8%; top: 15%; transform: rotate(22deg); }
.mine-depth i:nth-child(2) { right: 7%; top: 24%; transform: scale(.72) rotate(-18deg); }
.mine-depth i:nth-child(3) { left: 18%; bottom: 5%; transform: scale(.58); }

.mine-rock {
  position: absolute;
  left: var(--mine-x, 50%);
  top: var(--mine-y, 50%);
  z-index: 2;
  width: min(184px, 48%);
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(206, 181, 145, .42);
  border-radius: 48% 52% 43% 57% / 55% 42% 58% 45%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.14), transparent 20%),
    linear-gradient(145deg, #5a5148, #2f2d2b 58%, #1a1918);
  color: #fff;
  box-shadow: 0 18px 34px rgba(0,0,0,.48), inset -16px -16px 28px rgba(0,0,0,.34), inset 10px 10px 18px rgba(255,255,255,.06);
  cursor: pointer;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
  transition: left .16s ease, top .16s ease, transform .1s ease, filter .12s ease;
  will-change: left, top, transform;
}

.mine-rock:hover { filter: brightness(1.08); }
.mine-rock:active,
.mine-rock.hit { transform: translate(-50%, -50%) scale(.91) rotate(-1deg); }
.mine-rock span { font-size: 2rem; }
.mine-rock b { font-size: .88rem; }
.mine-rock small { color: #d6c7b4; font-size: .6rem; }
.mine-autoclick-hint {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  z-index: 3;
  color: rgba(219, 205, 184, .72);
  font-size: .61rem;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.electrical-work-area {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 110px minmax(120px, 1fr);
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid rgba(80, 157, 211, .34);
  border-radius: 22px;
  background:
    radial-gradient(circle at center, rgba(66, 144, 196, .12), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 30px),
    #0b1721;
}

.electrical-column {
  display: grid;
  gap: 10px;
}

.electrical-column h3 {
  margin: 0 0 3px;
  color: #9db8c8;
  font-size: .72rem;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.wire-button,
.socket-button {
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(8, 18, 27, .92);
  color: #dbe8ef;
  font-size: .76rem;
  font-weight: 900;
}

.wire-button i,
.socket-button i {
  width: 25px;
  height: 12px;
  border: 3px solid var(--wire);
  border-radius: 999px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--wire), transparent 42%);
}

.socket-button i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.wire-button.selected {
  border-color: var(--wire);
  background: color-mix(in srgb, var(--wire) 14%, #0a1721);
  box-shadow: 0 0 22px color-mix(in srgb, var(--wire), transparent 72%);
}

.electrical-board {
  height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(115, 183, 225, .35);
  border-radius: 20px;
  background: linear-gradient(145deg, #183348, #0a1822);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 35px rgba(0,0,0,.35);
}

.electrical-board span { font-size: 2.2rem; }
.electrical-board small { color: #8baabd; font-size: .65rem; font-weight: 900; }

.construction-work-area {
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 22px;
  border: 1px solid rgba(216, 164, 75, .34);
  border-radius: 22px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #171b1e;
  background-size: 28px 28px;
}

.construction-grid {
  width: min(480px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.construction-tile {
  aspect-ratio: 1.18;
  border: 1px solid rgba(190, 166, 121, .22);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(111, 90, 61, .62), rgba(51, 45, 37, .88));
  color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}

.construction-tile.is-target {
  color: #fff3a2;
  filter: brightness(1.32);
  box-shadow: 0 0 0 2px rgba(255, 210, 99, .65), 0 0 28px rgba(255, 192, 65, .52), inset 0 0 20px rgba(255, 218, 112, .18);
  animation: construction-target-pulse .82s ease-in-out infinite alternate;
}

.construction-tile.is-target span { font-size: 1.4rem; }

@keyframes construction-target-pulse {
  to { transform: translateY(-2px) scale(1.025); filter: brightness(1.55); }
}

.manual-work-result {
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(97, 194, 166, .28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(83, 219, 173, .16), transparent 42%),
    linear-gradient(145deg, rgba(14, 36, 39, .97), rgba(6, 15, 23, .99));
  text-align: center;
}

.manual-work-result-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(125, 234, 199, .38);
  border-radius: 24px;
  background: rgba(76, 190, 154, .13);
  font-size: 2.2rem;
}

.manual-work-result h2,
.manual-work-result p { margin: 0; }
.manual-work-result-grid { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.business-offer-panel,
.bank-branch-panel {
  width: min(780px, 100%);
  display: grid;
  gap: 14px;
}

.business-offer-status {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.business-offer-panel > small {
  color: #8199a9;
  font-size: .68rem;
  line-height: 1.45;
  text-align: center;
}

.credit-tier-box {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid rgba(118, 183, 224, .2);
  border-radius: 16px;
  background: rgba(8, 20, 30, .72);
}

.credit-tier-box h3 {
  margin: 0 0 4px;
  font-size: .84rem;
}

.credit-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #9fb4c2;
  font-size: .74rem;
}

.credit-tier strong { color: #e9f6ff; }
.credit-tier.active {
  background: linear-gradient(90deg, rgba(75, 161, 219, .2), rgba(75, 219, 171, .1));
  color: #dff4ff;
  box-shadow: inset 3px 0 0 #62b9ee;
}

@media (max-width: 720px) {
  .manual-work-option {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .manual-work-option-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.3rem;
  }

  .manual-work-option button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .manual-work-hud,
  .bank-branch-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-work-result-grid,
  .business-offer-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .electrical-work-area {
    grid-template-columns: 1fr 58px 1fr;
    gap: 7px;
    padding: 12px 8px;
  }

  .electrical-board {
    height: 126px;
    border-radius: 15px;
  }

  .wire-button,
  .socket-button {
    min-height: 48px;
    grid-template-columns: 20px 1fr;
    gap: 5px;
    padding: 6px;
    font-size: .65rem;
  }

  .wire-button i { width: 18px; }
  .socket-button i { width: 16px; height: 16px; }
  .construction-grid { gap: 7px; }
  .mine-work-area,
  .electrical-work-area,
  .construction-work-area { min-height: 290px; }
  .mine-rock { width:min(150px,46%);min-height:112px; }
  .mine-rock span { font-size:1.7rem; }
  .mine-rock b { font-size:.72rem; }
  .mine-rock small { font-size:.52rem; }
}


@media (max-width: 460px) {
  .work-mode-card {
    grid-template-columns: 1fr;
  }

  .work-mode-card button {
    width: 100%;
  }

  .manual-work-hud,
  .manual-work-result-grid,
  .business-offer-status,
  .bank-branch-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Item-IDs und Vermietungsverwaltung */
.item-id {
  display: none;
  margin-top: 5px;
  color: rgba(231, 205, 115, .82);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}

body.mod-item-ids-visible .item-id {
  display: block;
}

.rental-management-list .item-card {
  align-items: start;
}

.danger-button {
  background: linear-gradient(180deg, #a8333d, #761c29);
  border-color: rgba(255, 167, 167, .42);
  color: #fff;
}


/* Notunterkunft-Fallback · 2026-07-19 */
.emergency-shelter-card {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.emergency-shelter-card strong {
  font-size: .98rem;
}
.emergency-shelter-card span {
  color: var(--muted, #aeb5c2);
  font-size: .82rem;
  line-height: 1.4;
}


/* Rucksack-Inventar & High-or-Lower · Version 2026-07-19 */
.inventory-backpack-card {
  border-color: rgba(94, 174, 255, .22);
  background: linear-gradient(145deg, rgba(20, 38, 52, .96), rgba(9, 17, 25, .96));
}
.inventory-backpack-card.is-active {
  border-color: rgba(113, 239, 189, .45);
  box-shadow: inset 0 0 0 1px rgba(113, 239, 189, .08), 0 10px 30px rgba(0, 0, 0, .18);
}
.inventory-backpack-card.is-active button:disabled {
  opacity: 1;
  color: #07120e;
  background: #71efbd;
}
.highlow-table .meta-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.highlow-table [data-highlow-collect]:disabled {
  opacity: .48;
}
@media (max-width: 620px) {
  .highlow-table .meta-strip { grid-template-columns: 1fr; }
}

/* Startort bleibt dauerhaft auf der Weltkarte sichtbar. */
.globe-pin.start-city b {
  background: #4ecb86;
  border-color: #effff6;
  box-shadow: 0 0 0 6px rgba(78, 203, 134, 0.24), 0 0 20px rgba(78, 203, 134, 0.58);
}

.globe-pin.start-city.current b {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(78, 203, 134, 0.34), 0 0 0 9px rgba(230, 197, 101, 0.20), 0 0 22px rgba(230, 197, 101, 0.72);
}

.globe-pin.start-city span {
  border: 1px solid rgba(78, 203, 134, 0.42);
  color: #effff6;
}


/* Performance-Optimierung: lange Listen werden erst beim Sichtbarwerden gezeichnet. */
.item-list > .item-card,
.action-list > .action-card,
.market-list > .item-card,
.device-finance-list > .device-finance-card {
  content-visibility: auto;
  contain-intrinsic-size: 92px;
}

.tab-panel:not(.active),
.tab-panel.hidden {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .game-xp-toast-glow,
  .purchase-toast-burst,
  .slot-reel.spinning,
  .construction-cell.active {
    animation: none !important;
  }
}

/* Finder.KL, schneller Markt und Paaransicht · Version 2026-07-20 */
.finder-app {
  --finder-pink: #ff5f78;
  --finder-rose: #ff8a6b;
  --finder-purple: #9b6dff;
  display: grid;
  gap: 10px;
  min-width: 0;
  color: #fff;
}

.finder-nav {
  position: sticky;
  top: -10px;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 8px 0 7px;
  background: linear-gradient(180deg, rgba(7, 16, 14, .98) 72%, rgba(7, 16, 14, 0));
}

.finder-nav button,
.finder-preference button {
  min-width: 0;
  min-height: 34px;
  padding: 7px 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.76);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
}

.finder-nav button.active,
.finder-preference button.active {
  color: #fff;
  border-color: rgba(255, 126, 126, .58);
  background: linear-gradient(135deg, var(--finder-pink), var(--finder-purple));
  box-shadow: 0 7px 18px rgba(255, 95, 120, .22);
}

.finder-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,95,120,.15), rgba(155,109,255,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.finder-summary span {
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffb6c4;
}

.finder-summary b {
  grid-row: span 2;
  grid-column: 2;
  font-size: .8rem;
  color: #fff;
  white-space: nowrap;
}

.finder-summary small {
  color: rgba(255,255,255,.66);
  font-size: .61rem;
}

.finder-preference {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 6px;
  align-items: center;
}

.finder-preference > span {
  font-size: .66rem;
  font-weight: 850;
  color: rgba(255,255,255,.64);
}

.finder-swipe-stage {
  display: grid;
  gap: 8px;
  min-width: 0;
  perspective: 900px;
}

.finder-profile-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: #101615;
  box-shadow: 0 18px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  transform-origin: 50% 92%;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
  touch-action: pan-y;
  user-select: none;
  will-change: transform, opacity;
}

.finder-profile-card.dragging {
  transition: none;
  cursor: grabbing;
  box-shadow: 0 23px 55px rgba(0,0,0,.48);
}

.finder-profile-card::before,
.finder-profile-card::after {
  position: absolute;
  z-index: 5;
  top: 18px;
  padding: 7px 9px;
  border: 3px solid currentColor;
  border-radius: 9px;
  font-size: 1.02rem;
  font-weight: 1000;
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  transition: opacity .08s linear;
}

.finder-profile-card::before {
  content: "LIKE";
  left: 15px;
  color: #63efb2;
  transform: rotate(-10deg);
}

.finder-profile-card::after {
  content: "WEITER";
  right: 15px;
  color: #ff7081;
  transform: rotate(10deg);
}

.finder-profile-card[data-direction="right"]::before,
.finder-profile-card.swipe-right::before {
  opacity: max(.2, var(--swipe-strength, 1));
}

.finder-profile-card[data-direction="left"]::after,
.finder-profile-card.swipe-left::after {
  opacity: max(.2, var(--swipe-strength, 1));
}

.finder-profile-card.swipe-right {
  transform: translateX(130%) rotate(19deg) !important;
  opacity: 0;
}

.finder-profile-card.swipe-left {
  transform: translateX(-130%) rotate(-19deg) !important;
  opacity: 0;
}

.finder-avatar {
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.finder-avatar svg {
  display: block;
  width: 100%;
  height: auto;
}

.finder-avatar.hero svg {
  max-height: 330px;
  object-fit: cover;
}

.finder-avatar.mini {
  flex: 0 0 52px;
  width: 52px;
  height: 62px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: rgba(255,255,255,.06);
}

.finder-avatar.mini svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.finder-avatar.detail,
.finder-avatar.character {
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}

.finder-avatar.detail svg {
  max-height: 350px;
}

.finder-avatar.character {
  width: min(100%, 220px);
  margin-inline: auto;
}

.finder-profile-teaser {
  display: grid;
  gap: 7px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(7,12,11,.74), rgba(7,12,11,.98));
}

.finder-profile-teaser p,
.finder-full-profile p,
.finder-settings-card p,
.finder-empty p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .73rem;
  line-height: 1.45;
}

.finder-profile-teaser > div,
.finder-full-profile > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.finder-profile-teaser > div span,
.finder-full-profile > div:last-child span {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font-size: .58rem;
  font-weight: 850;
}

.finder-swipe-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.finder-swipe-actions button {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,14,13,.93);
  font-size: 1.8rem;
  font-weight: 1000;
  box-shadow: 0 11px 22px rgba(0,0,0,.26);
}

.finder-swipe-actions .finder-pass {
  color: #ff7081;
  border-color: rgba(255,112,129,.35);
}

.finder-swipe-actions .finder-like {
  color: #67eeb3;
  border-color: rgba(103,238,179,.35);
}

.finder-swipe-actions button:active {
  transform: scale(.92);
}

.finder-swipe-hint {
  text-align: center;
  color: rgba(255,255,255,.48);
  font-size: .59rem;
  line-height: 1.35;
}

.finder-empty,
.finder-settings-card,
.finder-full-profile {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 17px;
  background: rgba(255,255,255,.055);
}

.finder-empty {
  min-height: 145px;
  place-content: center;
  text-align: center;
}

.finder-empty.small {
  min-height: 84px;
}

.finder-empty b,
.finder-settings-card h4,
.finder-full-profile h4 {
  margin: 0;
  font-size: .9rem;
}

.finder-settings-card {
  background: linear-gradient(145deg, rgba(255,95,120,.1), rgba(155,109,255,.08));
}

.finder-settings-card .finder-preference {
  grid-template-columns: 1fr 1fr;
}

.finder-settings-card .finder-preference > span {
  display: none;
}

.finder-match-list {
  display: grid;
  gap: 7px;
}

.finder-match-list > button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  color: #fff;
  text-align: left;
}

.finder-match-list > button > span {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.finder-match-list b,
.finder-chat-head b {
  font-size: .78rem;
}

.finder-match-list small,
.finder-chat-head small {
  overflow: hidden;
  color: rgba(255,255,255,.6);
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-match-list i,
.finder-chat-head i {
  color: #ff9aac;
  font-size: .59rem;
  font-style: normal;
  font-weight: 850;
}

.finder-full-profile dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.finder-full-profile dl > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
}

.finder-full-profile dt,
.finder-full-profile dd {
  margin: 0;
  font-size: .66rem;
}

.finder-full-profile dt {
  color: rgba(255,255,255,.58);
}

.finder-full-profile dd {
  text-align: right;
  font-weight: 850;
}

.finder-full-profile blockquote {
  margin: 0;
  padding: 10px;
  border-left: 3px solid var(--finder-pink);
  border-radius: 0 10px 10px 0;
  background: rgba(255,95,120,.075);
  color: rgba(255,255,255,.83);
  font-size: .7rem;
  line-height: 1.45;
}

.finder-chat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.05);
}

.finder-chat-head > div:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.finder-chat-thread {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 170px;
  max-height: 290px;
  overflow-y: auto;
  padding: 8px 3px 8px 0;
  scrollbar-width: none;
}

.finder-chat-thread::-webkit-scrollbar {
  display: none;
}

.finder-chat-thread > p {
  display: grid;
  gap: 2px;
  max-width: 84%;
  margin: 0;
}

.finder-chat-thread > p.them {
  justify-self: start;
}

.finder-chat-thread > p.me {
  justify-self: end;
}

.finder-chat-thread > p span {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px 14px 14px 4px;
  background: rgba(255,255,255,.075);
  font-size: .7rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.finder-chat-thread > p.me span {
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, rgba(255,95,120,.9), rgba(155,109,255,.86));
}

.finder-chat-thread > p small {
  padding-inline: 4px;
  color: rgba(255,255,255,.38);
  font-size: .52rem;
}

.finder-chat-thread > p.me small {
  text-align: right;
}

.finder-chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.finder-chat-compose textarea {
  min-width: 0;
  min-height: 62px;
  max-height: 110px;
  resize: vertical;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(0,0,0,.27);
  color: #fff;
  font: inherit;
  font-size: .7rem;
}

.finder-chat-compose button {
  align-self: stretch;
  min-width: 62px;
  padding: 8px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--finder-pink), var(--finder-purple));
  color: #fff;
  font-size: .68rem;
  font-weight: 950;
}

.finder-chat-actions {
  display: grid;
  gap: 7px;
  padding-top: 3px;
}

.finder-chat-actions small,
.finder-chat-actions strong {
  padding: 8px;
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.7);
  font-size: .63rem;
  line-height: 1.4;
}

.finder-chat-actions strong {
  color: #ffbdc8;
  text-align: center;
}

.finder-date-list .item-card,
.finder-date-list .action-card {
  content-visibility: auto;
  contain-intrinsic-size: 90px;
}

.trading-live-ticker {
  display: grid;
  gap: 6px;
  margin-bottom: 9px;
  padding: 8px;
  border: 1px solid rgba(126,182,255,.2);
  border-radius: 13px;
  background: rgba(126,182,255,.07);
}

.trading-live-ticker > small {
  color: rgba(255,255,255,.57);
  font-size: .58rem;
}

.trading-live-ticker > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.trading-live-ticker span {
  display: grid;
  min-width: 0;
  gap: 1px;
  padding: 5px 6px;
  border-radius: 9px;
  background: rgba(255,255,255,.045);
}

.trading-live-ticker b {
  overflow: hidden;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trading-live-ticker i {
  font-size: .56rem;
  font-style: normal;
}

.trading-live-ticker i.up { color: #69d2a0; }
.trading-live-ticker i.down { color: #ef776d; }

.character-couple {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  width: 100%;
}

.character-avatar-stack.with-partner .character-couple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.character-partner-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(255,138,107,.2);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,95,120,.09), rgba(155,109,255,.07));
}

.character-avatar-button > small,
.character-partner-card > small {
  padding: 3px 4px 1px;
  color: rgba(255,255,255,.72);
  font-size: .63rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.avatar-svg.gender-female .avatar-body {
  transform: scaleX(.92);
  transform-origin: center;
}

.avatar-svg.gender-male .avatar-body {
  transform: scaleX(1.04);
  transform-origin: center;
}

@media (max-width: 480px) {
  .finder-avatar.hero svg { max-height: 295px; }
  .finder-summary { grid-template-columns: 1fr; }
  .finder-summary b { grid-column: 1; grid-row: auto; }
  .finder-preference { grid-template-columns: 1fr 1fr; }
  .finder-preference > span { grid-column: 1 / -1; }
  .trading-live-ticker > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .finder-profile-card,
  .finder-swipe-actions button {
    transition: none !important;
  }
}

.device-app-grid button[data-device-app="finder"] span {
  background: linear-gradient(145deg, #ff5f78, #9b6dff);
  color: #fff;
  box-shadow: 0 6px 14px rgba(255,95,120,.28);
}

.avatar-card.gender-female .avatar-svg {
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.36)) saturate(1.05);
}

.avatar-card.gender-male .avatar-svg {
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.36)) contrast(1.015);
}

/* Finder.KL Tarife, Likes und Date-Sterne · Version 2026-07-20-2 */
.finder-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.finder-nav button {
  padding-inline: 3px;
  font-size: .61rem;
}

.finder-app,
.finder-like-list,
.finder-plan-grid,
.finder-date-categories {
  scrollbar-width: none;
}

.finder-app::-webkit-scrollbar,
.finder-like-list::-webkit-scrollbar,
.finder-plan-grid::-webkit-scrollbar,
.finder-date-categories::-webkit-scrollbar {
  display: none;
}

.finder-profile-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px !important;
}

.finder-profile-tools .mini-button {
  min-width: 0;
  padding: 7px 5px;
  font-size: .59rem;
  line-height: 1.2;
}

.finder-favorite-button {
  color: #ffe28a;
  border-color: rgba(255, 217, 92, .28) !important;
}

.finder-favorite-button.active {
  color: #151006;
  background: linear-gradient(135deg, #ffe276, #f3ad36) !important;
  box-shadow: 0 8px 18px rgba(243, 173, 54, .2);
}

.finder-priority-note {
  padding: 6px 8px;
  border: 1px solid rgba(169, 137, 255, .28);
  border-radius: 10px;
  background: rgba(155, 109, 255, .1);
  color: #d9cbff;
  font-size: .57rem;
  font-weight: 850;
  text-align: center;
}

.finder-rewind {
  justify-self: center;
  max-width: 220px;
  color: #a9dcff;
}

.finder-cooldown-note {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 182, 84, .25);
  border-radius: 13px;
  background: rgba(255, 166, 55, .08);
}

.finder-cooldown-note b {
  color: #ffd392;
  font-size: .7rem;
}

.finder-cooldown-note span {
  color: rgba(255,255,255,.67);
  font-size: .61rem;
  line-height: 1.4;
}

.finder-like-list {
  display: grid;
  gap: 7px;
}

.finder-like-list > article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.05);
}

.finder-like-list > article > div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.finder-like-list b {
  overflow: hidden;
  color: #fff;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-like-list small {
  overflow: hidden;
  color: rgba(255,255,255,.55);
  font-size: .57rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-like-list .mini-button {
  max-width: 92px;
  padding: 6px;
  font-size: .55rem;
  line-height: 1.2;
}

.finder-plan-grid {
  display: grid;
  gap: 8px;
}

.finder-plan-card {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}

.finder-plan-card.current {
  border-color: rgba(255, 120, 150, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 150, .13), 0 10px 24px rgba(0,0,0,.2);
}

.finder-plan-card.gold {
  background: linear-gradient(145deg, rgba(255, 198, 73, .12), rgba(255,255,255,.035));
}

.finder-plan-card.platinum {
  background: linear-gradient(145deg, rgba(168, 132, 255, .16), rgba(90, 211, 255, .07));
}

.finder-plan-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.finder-plan-card h4 {
  margin: 0;
  font-size: .82rem;
}

.finder-plan-card strong {
  color: #ffd2dc;
  font-size: .69rem;
  white-space: nowrap;
}

.finder-plan-card p {
  margin: 0;
  color: rgba(255,255,255,.67);
  font-size: .64rem;
  line-height: 1.4;
}

.finder-plan-card ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.finder-plan-card li {
  position: relative;
  padding-left: 13px;
  color: rgba(255,255,255,.72);
  font-size: .6rem;
  line-height: 1.35;
}

.finder-plan-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #68e8ae;
  font-weight: 1000;
}

.finder-platinum-details {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(169, 137, 255, .28);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(155,109,255,.12), rgba(94,205,255,.06));
}

.finder-platinum-details h5 {
  margin: 0;
  color: #d9cbff;
  font-size: .72rem;
}

.finder-platinum-details dl {
  margin: 0;
}

.finder-date-categories {
  display: grid;
  gap: 10px;
  max-height: min(66vh, 580px);
  overflow-y: auto;
  padding-right: 2px;
}

.finder-date-group {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
}

.finder-date-group > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.finder-date-group h4 {
  margin: 0;
  font-size: .77rem;
}

.finder-date-group header small {
  color: rgba(255,255,255,.55);
  font-size: .56rem;
  text-align: right;
}

.finder-date-group > div {
  display: grid;
  gap: 5px;
}

.finder-date-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(0,0,0,.18);
  color: #fff;
  text-align: left;
}

.finder-date-option:disabled {
  opacity: .42;
}

.finder-date-option b {
  overflow: hidden;
  font-size: .64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-date-option small {
  color: rgba(255,255,255,.64);
  font-size: .58rem;
  font-weight: 850;
  white-space: nowrap;
}

.finder-stars {
  color: #ffd75e;
  font-size: .6rem;
  letter-spacing: -.08em;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .finder-nav button { font-size: .56rem; }
  .finder-profile-tools { grid-template-columns: 1fr; }
  .finder-like-list > article { grid-template-columns: 46px minmax(0, 1fr); }
  .finder-like-list > article .mini-button { grid-column: 1 / -1; max-width: none; }
  .finder-date-option { grid-template-columns: 1fr auto; }
  .finder-date-option .finder-stars { grid-column: 1 / -1; }
}

/* 2026-07-20 · Mietwohnungen, Notunterkunft und erweiterte Raumverwaltung */
.emergency-shelter-card.expired {
  border-color: rgba(255, 118, 110, .38);
  background: linear-gradient(180deg, rgba(112, 37, 37, .18), rgba(0, 0, 0, .18));
}
.emergency-shelter-actions,
.property-home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.shelter-day-meter {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  margin-top: 10px;
}
.shelter-day-meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #71efbd, #f0cf5d);
  transition: width .25s ease;
}
.rental-tier-grid {
  display: grid;
  gap: 10px;
}
.rental-tier-grid > button {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-areas: "icon title" "icon text" "icon price";
  align-items: center;
  gap: 3px 11px;
  width: 100%;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  color: var(--text);
  text-align: left;
}
.rental-tier-grid > button:hover,
.rental-tier-grid > button:focus-visible {
  border-color: rgba(240,207,93,.42);
  transform: translateY(-1px);
}
.rental-tier-grid > button > b {
  grid-area: icon;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(240,207,93,.12);
  font-size: 1.45rem;
}
.rental-tier-grid > button > strong { grid-area: title; font-size: .95rem; }
.rental-tier-grid > button > span { grid-area: text; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.rental-tier-grid > button > small { grid-area: price; color: #f0cf5d; font-weight: 900; }
.tenant-rental-list { gap: 8px; }
.tenant-rental-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 92px;
}
.tenant-rental-copy { min-width: 0; }
.tenant-rental-copy > small { color: #71efbd; font-size: .68rem; font-weight: 850; }
.tenant-rental-copy > h3 { margin: 3px 0 4px; font-size: .9rem; }
.tenant-rental-copy > p { margin: 0; font-size: .72rem; line-height: 1.4; }
.tenant-rental-copy > strong { display: block; margin-top: 5px; color: #f0cf5d; font-size: .82rem; }
.tenant-rental-detail { display: grid; gap: 10px; }
.tenant-rental-price {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(240,207,93,.25);
  border-radius: 13px;
  background: rgba(240,207,93,.07);
}
.tenant-rental-price span { font-weight: 900; }
.tenant-rental-price b { color: #f0cf5d; font-size: 1.05rem; }
.tenant-rental-price small { grid-column: 1 / -1; color: var(--muted); }
.property-room-map button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 6px;
}
.property-room-map button span { font-weight: 900; line-height: 1.08; }
.property-room-map button small { color: var(--muted); font-size: .58rem; font-weight: 750; }
.property-room-map button.fixed-room {
  border-style: dashed;
  background: rgba(126,182,255,.08);
}
.property-room-map button.living-room {
  background: rgba(113,239,189,.07);
}
.property-editor-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}
.property-editor-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 850;
}
.property-editor-card input,
.property-editor-card textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: 10px;
  font: inherit;
}
.property-editor-card textarea { min-height: 105px; resize: vertical; }
.property-editor-card small { color: var(--muted); text-align: right; }
@media (max-width: 520px) {
  .emergency-shelter-actions,
  .property-home-actions { grid-template-columns: 1fr 1fr; }
  .tenant-rental-card { grid-template-columns: 1fr; gap: 8px; }
  .tenant-rental-card > button { width: 100%; }
  .property-room-map { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* Business Map */
body.business-map-open { overflow: hidden; }
.business-map-overlay { position:fixed; inset:0; z-index:2147482500; display:grid; place-items:center; padding:12px; background:#07100b; animation:businessMapFade .22s ease both; }
.business-map-shell { position:relative; display:grid; grid-template-rows:auto auto minmax(0,1fr); width:min(100%,1120px); height:min(100%,1120px); overflow:hidden; border-radius:20px; background:#0c160f; box-shadow:0 28px 80px rgba(0,0,0,.58); }
.business-map-toolbar { z-index:5; display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr) auto; gap:14px; align-items:center; min-height:58px; padding:8px 12px; background:rgba(7,15,10,.96); border-bottom:1px solid rgba(255,255,255,.1); }
.business-map-toolbar div,.business-map-toolbar strong,.business-map-toolbar small { display:block; }
.business-map-toolbar strong { color:#f6e58b; }
.business-map-toolbar small,.business-map-toolbar>span { color:rgba(255,255,255,.72); font-size:.76rem; }
.business-map-toolbar>span { overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.business-map-status-strip {
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(10, 25, 16, .97);
}
.business-map-status-strip > span {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 6px 8px;
  border: 1px solid rgba(246,229,139,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  text-align: center;
}
.business-map-status-strip small {
  overflow: hidden;
  color: rgba(255,255,255,.55);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.business-map-status-strip b {
  overflow: hidden;
  color: #f6e58b;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.business-staff-open { width: 100%; margin: 2px 0 8px; }
.hehler-mission-card em {
  display: block;
  margin-top: 4px;
  color: #88d7aa;
  font-size: .64rem;
  font-style: normal;
  font-weight: 900;
}
.hehler-mission-card.is-cooldown { opacity: .75; }
.hehler-mission-card.is-cooldown em { color: #f0c879; }

.business-map-stage { position:relative; min-height:0; aspect-ratio:1; width:100%; max-height:100%; margin:auto; overflow:hidden; cursor:crosshair; background:#14251a; touch-action:none; }
.business-map-stage>img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.business-map-hotspot { position:absolute; z-index:3; padding:0; border:0; border-radius:18%; background:transparent; cursor:pointer; opacity:0; }
.business-map-hotspot:focus-visible { opacity:1; outline:3px solid #f6e58b; background:rgba(246,229,139,.12); }
.business-map-avatar { position:absolute; z-index:4; width:clamp(25px,3.2vw,40px); height:clamp(25px,3.2vw,40px); transform:translate(-50%,-64%); transition-property:left,top; transition-timing-function:linear; pointer-events:none; filter:drop-shadow(0 5px 5px rgba(0,0,0,.72)); }
.business-map-avatar span { display:grid; place-items:center; width:100%; height:100%; font-size:clamp(1.2rem,2.7vw,2rem); animation:businessMapBob .48s ease-in-out infinite alternate; }
.business-map-panel { position:absolute; z-index:8; top:116px; right:12px; bottom:12px; width:min(430px,calc(100% - 24px)); overflow:hidden; border:1px solid rgba(246,229,139,.24); border-radius:18px; background:rgba(7,15,10,.96); box-shadow:0 22px 60px rgba(0,0,0,.6); backdrop-filter:blur(16px); animation:businessMapPanelIn .24s ease both; }
.business-map-panel[hidden] { display:none; }
.business-map-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.1); }
.business-map-panel-head small,.business-map-panel-head h3 { display:block; margin:0; }
.business-map-panel-head small { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
.business-map-panel-scroll { height:calc(100% - 58px); overflow:auto; padding:10px; scrollbar-width:none; }
.business-map-panel-scroll::-webkit-scrollbar { display:none; }
.business-map-panel .weapon-business-card,.business-map-panel .device-finance-card,.business-map-panel .staff-card { background:rgba(255,255,255,.055); }
.business-map-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.business-protection-meter { position:relative; height:28px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }
.business-protection-meter i { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg,#d95757,#f0cf5d 52%,#74d99f); transition:width .3s ease; }
.business-protection-meter span { position:relative; z-index:1; display:grid; place-items:center; height:100%; color:white; font-size:.78rem; font-weight:900; text-shadow:0 1px 4px #000; }
.warehouse-business-card,.warehouse-business-stats { display:grid; gap:9px; }
.warehouse-business-visual { display:grid; place-items:center; min-height:120px; border-radius:16px; background:radial-gradient(circle at 50% 20%,rgba(240,207,93,.2),transparent 35%),linear-gradient(145deg,#18261c,#080d09); border:1px solid rgba(240,207,93,.2); }
.warehouse-business-visual span { font-size:3rem; color:#f0cf5d; }
.warehouse-business-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.warehouse-business-stats span { padding:8px; border-radius:10px; background:rgba(255,255,255,.055); color:var(--muted); font-size:.7rem; text-align:center; }
.warehouse-business-stats b { display:block; color:white; font-size:1rem; }
@keyframes businessMapFade { from{opacity:0} to{opacity:1} }
@keyframes businessMapPanelIn { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes businessMapBob { from{transform:translateY(0)} to{transform:translateY(-3px)} }
@media (max-width:720px) { .business-map-overlay{padding:0}.business-map-shell{width:100%;height:100%;border-radius:0}.business-map-toolbar{min-height:54px;grid-template-columns:minmax(0,1fr) auto}.business-map-toolbar>span{display:none}.business-map-status-strip{grid-template-columns:repeat(5,minmax(72px,1fr));overflow-x:auto;padding:6px 8px;scrollbar-width:none}.business-map-status-strip::-webkit-scrollbar{display:none}.business-map-status-strip>span{padding:5px 6px}.business-map-stage{width:100%;max-height:none}.business-map-panel{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:min(62vh,560px)} }
@media (prefers-reduced-motion:reduce) { .business-map-avatar,.business-map-avatar span,.business-map-panel,.business-map-overlay{animation:none!important} }


/* Casino-Map 2026-07-20 */
.casino-world-floor {
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(145deg, #130d18, #07060a);
}
.casino-world-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 2px solid rgba(230,197,101,.5);
  border-radius: 16px;
  background: #0a0710;
  box-shadow: 0 22px 56px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.05);
}
.casino-world-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: crosshair;
  background: #0d1110;
  touch-action: manipulation;
}
.casino-world-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.casino-map-hotspot {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 0;
  border-radius: 16%;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}
.casino-map-hotspot:focus-visible {
  opacity: 1;
  outline: 3px solid #f6e58b;
  background: rgba(246,229,139,.12);
}
.casino-world-avatar {
  position: absolute;
  z-index: 5;
  width: clamp(24px,3.4vw,42px);
  height: clamp(24px,3.4vw,42px);
  transform: translate(-50%,-72%);
  pointer-events: none;
  transition: left .11s linear, top .11s linear;
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.82));
}
.casino-world-avatar span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: clamp(1.2rem,3vw,2.1rem);
  animation: casinoWorldWalk .42s ease-in-out infinite alternate;
}
.casino-world-panel {
  position: absolute;
  z-index: 8;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: min(455px,calc(100% - 20px));
  overflow: hidden;
  border: 1px solid rgba(230,197,101,.4);
  border-radius: 16px;
  background: rgba(8,8,12,.96);
  box-shadow: 0 24px 70px rgba(0,0,0,.68);
  backdrop-filter: blur(16px);
  animation: casinoWorldPanelIn .22s ease both;
}
.casino-world-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(230,197,101,.1), transparent);
}
.casino-world-panel-head h3,
.casino-world-panel-head small {
  display: block;
  margin: 0;
}
.casino-world-panel-head small {
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.casino-world-panel-scroll {
  height: calc(100% - 58px);
  overflow: auto;
  padding: 10px;
  scrollbar-width: none;
}
.casino-world-panel-scroll::-webkit-scrollbar { display: none; }

.casino-world-panel-scroll {
  overflow-anchor: none;
  contain: layout paint;
}
.casino-world-panel-scroll.casino-stable-refresh {
  scroll-behavior: auto;
}
.casino-game-stable-root,
.casino-game-stable-root .casino-table,
.casino-game-stable-root .reels,
.casino-game-stable-root .roulette-wheel,
.casino-game-stable-root .play-card {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.casino-game-stable-root .reels,
.casino-game-stable-root .roulette-wheel,
.casino-game-stable-root .card-row,
.casino-game-stable-root .highlow-card-zone {
  min-height: 1px;
}

.casino-world-panel .casino-table,
.casino-world-panel .casino-upgrade,
.casino-world-panel .device-finance-summary,
.casino-world-panel .device-finance-card {
  background-color: rgba(255,255,255,.045);
}
.casino-world-panel .casino-table {
  padding: 10px;
}
.casino-world-panel .meta-strip {
  margin-bottom: 8px;
}
.casino-world-panel .chip-row {
  gap: 5px;
  margin: 8px 0;
}
.casino-world-panel .chip {
  min-width: 0;
  padding: 7px 8px;
  font-size: .72rem;
}
.casino-bar-list {
  gap: 8px;
}
.casino-bar-list .device-finance-card {
  grid-template-columns: minmax(0,1fr) auto;
}
.casino-bar-list .device-finance-card small {
  line-height: 1.3;
}
@keyframes casinoWorldWalk {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-3px) rotate(2deg); }
}
@keyframes casinoWorldPanelIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 760px) {
  .casino-world-floor { padding: 6px; }
  .casino-floor-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .casino-floor-head span {
    white-space: normal;
    font-size: .7rem;
  }
  .casino-world-panel {
    top: auto;
    left: 6px;
    right: 6px;
    bottom: 6px;
    width: auto;
    height: min(62vh,560px);
  }
}
@media (max-width: 470px) {
  .casino-world-panel {
    height: min(66vh,590px);
  }
  .casino-world-panel-scroll {
    padding: 8px;
  }
  .casino-world-panel .casino-table,
  .casino-world-panel .casino-upgrade {
    font-size: .86rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .casino-world-avatar,
  .casino-world-avatar span,
  .casino-world-panel {
    animation: none !important;
    transition: none !important;
  }
}


/* Stimmung, Inventarstatus, Bonität in Bank-App und Elektro-Verbindungen · 2026-07-20 */
.mood-meter progress::-webkit-progress-value {
  background: linear-gradient(90deg, #b15de2, #f083a6 55%, #ffd56d);
}

.mood-info-panel {
  width: min(720px, 100%);
  display: grid;
  gap: 14px;
}

.mood-overview-card,
.mood-advice-list {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(241, 139, 183, .22);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(52, 25, 63, .96), rgba(16, 19, 31, .98));
}

.mood-overview-card > div:first-child {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: end;
}

.mood-overview-card span,
.mood-overview-card small,
.mood-advice-list small {
  color: rgba(255,255,255,.68);
  font-size: .72rem;
  line-height: 1.45;
}

.mood-overview-card strong { font-size: 1.15rem; }
.mood-overview-card b { grid-row: 1 / 3; grid-column: 2; color: #ffd2e3; font-size: 1.65rem; }

.mood-big-bar,
.device-credit-bar {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.45);
}

.mood-big-bar i,
.device-credit-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #bb5dd9, #f47fa5, #ffd166);
}

.mood-advice-list h3 { margin: 0; }
.mood-advice-list article {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}
.mood-advice-list article > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(118, 237, 183, .13);
  color: #76edb7;
  font-weight: 1000;
}
.mood-advice-list article div { display: grid; gap: 3px; }

.inventory-needs-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0 12px;
}
.inventory-needs-panel article {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(123, 184, 218, .16);
  border-radius: 13px;
  background: rgba(8, 20, 29, .72);
}
.inventory-needs-panel article > div {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: #bcd0dc;
  font-size: .64rem;
  font-weight: 900;
}
.inventory-needs-panel progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: rgba(0,0,0,.42);
}
.inventory-needs-panel progress::-webkit-progress-bar { background: rgba(0,0,0,.42); }
.inventory-needs-panel progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #4aa6de, #71e0ad); }
.inventory-needs-panel progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #4aa6de, #71e0ad); }

.device-credit-score {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid rgba(104, 186, 231, .2);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(24, 55, 77, .8), rgba(7, 18, 27, .94));
}
.device-credit-score > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.device-credit-score span { color: #a9c5d5; font-size: .72rem; font-weight: 900; }
.device-credit-score strong { color: #eef9ff; font-size: 1.05rem; }
.device-credit-score small { color: rgba(255,255,255,.62); font-size: .62rem; line-height: 1.35; }
.device-credit-bar i { background: linear-gradient(90deg, #e45d68, #e5b34c 45%, #66d5a8); }

.electrical-work-area { position: relative; }
.electrical-connection-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.electrical-connection-layer path {
  fill: none;
  stroke: var(--electrical-line, #d8f3ff);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .9;
  filter: drop-shadow(0 0 8px var(--electrical-line, #d8f3ff));
}
.electrical-connection-layer path.preview {
  stroke-dasharray: 9 8;
  animation: electrical-flow .75s linear infinite;
}
.electrical-connection-layer path.success {
  stroke-width: 8;
  animation: electrical-success .36s ease both;
}
.electrical-connection-layer path.failure {
  stroke-width: 7;
  animation: electrical-failure .36s ease both;
}
.electrical-column,
.electrical-board { position: relative; z-index: 3; }
.wire-button.connected,
.socket-button.connected { box-shadow: 0 0 0 2px var(--wire), 0 0 24px color-mix(in srgb, var(--wire), transparent 35%); }
.wire-button.connection-error,
.socket-button.connection-error { border-color: #ff6f75; animation: electrical-shake .3s ease; }
@keyframes electrical-flow { to { stroke-dashoffset: -34; } }
@keyframes electrical-success { 0% { opacity: .2; } 45% { opacity: 1; } 100% { opacity: .25; } }
@keyframes electrical-failure { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes electrical-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (max-width: 760px) {
  .inventory-needs-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-needs-panel article:last-child { grid-column: 1 / -1; }
}

/* Casino-, Trading- und EP-Overlay-Fix · 2026-07-20 */
.trading-open-positions { margin-bottom: 10px; }
.casino-world-floor [data-casino-security-countdown] { font: inherit; color: inherit; }

/* Casino-Scroll, Training/Erfolge und Musiksteuerung · 2026-07-20 */
.settings-music-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.settings-music-actions > button {
  width: 100%;
}
@media (max-width: 430px) {
  .settings-music-actions { grid-template-columns: 1fr; }
}

/* App Store und feste Blackjack-Einsätze · Version 2026-07-20 */
.device-app-grid button[data-device-app="appstore"] span {
  background: linear-gradient(145deg, #5be08a, #16a765);
  color: #fff;
  box-shadow: 0 6px 14px rgba(22, 167, 101, 0.3);
}

.phone-app-store {
  display: grid;
  gap: 10px;
}

.app-store-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.app-store-head > div {
  min-width: 0;
}

.app-store-logo,
.app-store-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #fff;
  font-weight: 1000;
}

.app-store-logo {
  width: 44px;
  height: 44px;
  background: linear-gradient(145deg, #5be08a, #16a765);
  box-shadow: 0 8px 18px rgba(22, 167, 101, 0.28);
}

.app-store-list {
  display: grid;
  gap: 8px;
}

.app-store-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}

.app-store-card.locked {
  opacity: .67;
}

.app-store-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(145deg, #56635c, #24312b);
}

.app-store-icon.app-finder {
  background: linear-gradient(145deg, #ff5f78, #9b6dff);
}

.app-store-icon.app-onlinecasino {
  background: linear-gradient(145deg, #f0cf5d, #a66d15);
  color: #1b1205;
}

.app-store-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.app-store-card strong,
.app-store-card small,
.app-store-card i {
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-store-card strong {
  font-size: .78rem;
}

.app-store-card small {
  color: rgba(235,247,240,.74);
  font-size: .62rem;
  line-height: 1.35;
}

.app-store-card i {
  color: #76e6aa;
  font-size: .57rem;
  font-style: normal;
  font-weight: 900;
}

.app-store-card.locked i {
  color: #ffcb72;
}

.app-store-card .mini-button {
  min-width: 78px;
  padding-inline: 8px;
  font-size: .6rem;
}

.chip-row.stake-locked .chip,
.blackjack-table [data-bj-decks]:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.chip-row.stake-locked .chip.active,
.blackjack-table [data-bj-decks].active:disabled {
  opacity: 1;
  outline: 2px solid #f0cf5d;
  box-shadow: 0 0 0 3px rgba(240,207,93,.12);
}

.casino-stake-lock {
  margin-top: 5px;
  color: #ffd77b;
  font-weight: 850;
}

@media (max-width: 520px) {
  .app-store-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .app-store-icon {
    width: 38px;
    height: 38px;
  }
  .app-store-card .mini-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* Finster.KL, Tankstellen-Kiosk und Arbeits-Skillbaum · Version 2026-07-20 */
.device-app-grid button[data-device-app="finster"] span,
.app-store-icon.app-finster {
  background: linear-gradient(145deg, #111, #4f2c74 55%, #d84f88);
  color: #fff;
  font-family: Georgia, serif;
  font-weight: 1000;
  text-transform: lowercase;
}

.finster-app {
  --finster-bg: #08080b;
  --finster-card: #121217;
  --finster-line: rgba(255,255,255,.11);
  --finster-text: #f6f2f7;
  --finster-muted: #a8a0ad;
  --finster-accent: #e6508e;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 510px;
  max-height: 68vh;
  margin: 0 -6px -6px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--finster-bg);
  color: var(--finster-text);
  border: 1px solid var(--finster-line);
}
.finster-app *, .finster-app *::before, .finster-app *::after { box-sizing: border-box; }
.finster-topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 13px; border-bottom:1px solid var(--finster-line); background:rgba(8,8,11,.96); }
.finster-topbar b { font-family:Georgia,serif; font-size:1.05rem; letter-spacing:-.04em; }
.finster-topbar span { color:#7ee0a6; font-size:.55rem; font-weight:900; text-transform:uppercase; }
.finster-content { min-height:0; overflow:auto; scrollbar-width:none; overscroll-behavior:contain; }
.finster-content::-webkit-scrollbar, .finster-chat-thread::-webkit-scrollbar { display:none; }
.finster-nav { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--finster-line); background:#0c0c10; }
.finster-nav button { border:0; border-radius:0; background:transparent; color:var(--finster-muted); padding:7px 2px 6px; display:grid; place-items:center; gap:1px; min-width:0; }
.finster-nav button span { font-size:1rem; line-height:1; }
.finster-nav button small { font-size:.48rem; }
.finster-nav button.active { color:#fff; background:rgba(230,80,142,.12); }
.finster-onboarding { padding:18px; display:grid; gap:12px; }
.finster-brand { display:grid; grid-template-columns:54px 1fr; gap:12px; align-items:center; }
.finster-brand > span { width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#111,#4f2c74 55%,#d84f88);font:1000 2rem Georgia;color:#fff; }
.finster-brand h3 { margin:0;font:1000 1.25rem Georgia; }
.finster-brand p,.finster-onboarding small { margin:3px 0 0;color:var(--finster-muted);font-size:.66rem;line-height:1.45; }
.finster-onboarding label { display:grid;gap:4px;font-size:.62rem;font-weight:850;color:#d9d1dd; }
.finster-onboarding input,.finster-onboarding textarea,.finster-create textarea,.finster-comment-compose input,.finster-chat-compose textarea,.finster-search input { width:100%;border:1px solid var(--finster-line);border-radius:11px;background:#17171d;color:#fff;padding:10px;font:inherit;resize:none; }
.finster-feed { display:grid; }
.finster-post { border-bottom:1px solid var(--finster-line); background:var(--finster-bg); }
.finster-post header { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 11px; }
.finster-post header > button:first-child { padding:0;border:0;background:none; }
.finster-post header div { min-width:0;display:grid; }
.finster-post header strong { font-size:.68rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.finster-post header small { color:var(--finster-muted);font-size:.52rem; }
.finster-more { background:transparent;border:0;color:#ddd;padding:5px;font-size:.75rem; }
.finster-image-button { display:block;width:100%;padding:0;border:0;background:#17171d;border-radius:0; }
.finster-image-button img { display:block;width:100%;aspect-ratio:1/1;object-fit:cover; }
.finster-post-actions { display:flex;align-items:center;gap:4px;padding:7px 10px 2px; }
.finster-post-actions button { width:34px;height:31px;padding:0;border:0;background:transparent;color:#fff;font-size:1.18rem; }
.finster-post-actions button.liked { color:#ff416f; }
.finster-post-actions button:last-child { margin-left:auto;transform:rotate(-18deg); }
.finster-post > p,.finster-like-count,.finster-comments-link { margin:0;padding:2px 11px;font-size:.62rem;line-height:1.45; }
.finster-post > p { padding-bottom:3px; }
.finster-like-count { display:block;font-size:.61rem; }
.finster-comments-link { display:block;padding-bottom:10px;border:0;background:transparent;color:var(--finster-muted);text-align:left; }
.finster-avatar { --avatar-hue:280; width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(145deg,hsl(var(--avatar-hue) 72% 58%),hsl(calc(var(--avatar-hue) + 55) 65% 33%));border:2px solid rgba(255,255,255,.85);color:#fff;font-size:.67rem;font-weight:1000;box-shadow:0 0 0 2px #d84f88; }
.finster-avatar.small { width:34px;height:34px;font-size:.57rem;box-shadow:none;border-width:1px; }
.finster-avatar.tiny { width:26px;height:26px;font-size:.46rem;box-shadow:none;border-width:1px; }
.finster-avatar.large { width:70px;height:70px;font-size:1rem; }
.finster-explore,.finster-profile-view,.finster-own-profile,.finster-create,.finster-post-detail,.finster-inbox { padding:11px;display:grid;gap:10px; }
.finster-search { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;background:#17171d;border-radius:12px;padding:0 10px; }
.finster-search input { border:0;background:transparent;padding-left:0; }
.finster-user-grid { display:grid;gap:7px; }
.finster-user-grid article { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px;border:1px solid var(--finster-line);border-radius:13px;background:var(--finster-card); }
.finster-user-grid article > div { min-width:0;display:grid;gap:2px; }
.finster-user-grid strong { font-size:.67rem; }
.finster-user-grid small,.finster-user-grid p { margin:0;color:var(--finster-muted);font-size:.53rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.finster-upload-preview { min-height:260px;border:1px dashed rgba(255,255,255,.25);border-radius:14px;background:#15151b;display:grid;place-items:center;text-align:center;overflow:hidden;color:var(--finster-muted); }
.finster-upload-preview span { font-size:3rem; }
.finster-upload-preview img { width:100%;height:100%;min-height:260px;object-fit:cover; }
.finster-file-button { display:grid;place-items:center;padding:10px;border-radius:11px;background:#2a2730;font-size:.68rem;font-weight:900;cursor:pointer; }
.finster-file-button input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.finster-create small { color:var(--finster-muted);font-size:.56rem; }
.finster-comment-list { display:grid;gap:8px;padding:4px 2px; }
.finster-comment-list > article { display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start; }
.finster-comment-list p { margin:0;font-size:.6rem;line-height:1.45; }
.finster-comment-list small { display:block;color:var(--finster-muted);font-size:.48rem; }
.finster-comment-compose,.finster-chat-compose { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;position:sticky;bottom:0;background:var(--finster-bg);padding:7px 0; }
.finster-comment-compose button,.finster-chat-compose button { border:0;border-radius:10px;background:var(--finster-accent);color:#fff;font-weight:900;padding:0 10px; }
.finster-profile-view > header,.finster-own-profile > header { display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center; }
.finster-profile-view h3,.finster-own-profile h3 { margin:0;font-size:1rem; }
.finster-profile-view header div,.finster-own-profile header div { display:grid;gap:2px; }
.finster-profile-view p,.finster-own-profile p { margin:0;color:#ddd;font-size:.63rem;line-height:1.5; }
.finster-profile-actions { display:flex;gap:7px; }
.finster-profile-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:2px; }
.finster-profile-grid button { padding:0;border:0;border-radius:2px;overflow:hidden;background:#18181e; }
.finster-profile-grid img { display:block;width:100%;aspect-ratio:1/1;object-fit:cover; }
.finster-own-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center; }
.finster-own-stats span { padding:7px;border:1px solid var(--finster-line);border-radius:10px;font-size:.52rem;color:var(--finster-muted); }
.finster-own-stats b { display:block;color:#fff;font-size:.75rem; }
.finster-inbox > button { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px;border:1px solid var(--finster-line);border-radius:12px;background:var(--finster-card);color:#fff;text-align:left; }
.finster-inbox > button div { display:grid; }
.finster-inbox > button strong { font-size:.66rem; }
.finster-inbox > button small { color:var(--finster-muted);font-size:.53rem; }
.finster-chat { height:100%;min-height:440px;display:grid;grid-template-rows:auto minmax(0,1fr) auto; }
.finster-chat > header { display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;align-items:center;padding:9px;border-bottom:1px solid var(--finster-line); }
.finster-chat > header > button { border:0;background:transparent;color:#fff;font-size:1rem; }
.finster-chat > header div { display:grid; }
.finster-chat > header small { color:var(--finster-muted);font-size:.52rem; }
.finster-chat-thread { min-height:0;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none; }
.finster-chat-thread p { margin:0;max-width:83%;display:grid;gap:2px; }
.finster-chat-thread p.mine { align-self:flex-end; }
.finster-chat-thread p.theirs { align-self:flex-start; }
.finster-chat-thread p.system { align-self:center;text-align:center;color:var(--finster-muted); }
.finster-chat-thread span { padding:8px 10px;border-radius:13px;background:#25252c;font-size:.62rem;line-height:1.4; }
.finster-chat-thread .mine span { background:linear-gradient(145deg,#7841b0,#dc4e8b); }
.finster-chat-thread small { color:var(--finster-muted);font-size:.45rem;padding:0 4px; }
.finster-chat-compose { padding:8px;border-top:1px solid var(--finster-line); }
.finster-chat-compose textarea { min-height:38px;max-height:86px;padding:8px; }
.finster-chat-compose button:disabled,.finster-chat-compose textarea:disabled { opacity:.62;cursor:wait; }
.finster-chat-status { margin:0;padding:6px 10px;border-top:1px solid var(--finster-line);background:rgba(105,74,160,.14);color:#d9c9f2;font-size:.54rem;line-height:1.35;text-align:center; }
.finster-chat-status.error { background:rgba(173,49,66,.18);color:#ffc0c8; }
.finster-empty { padding:25px 12px;text-align:center;color:var(--finster-muted);display:grid;gap:7px; }

.work-info-entry { border-color:rgba(244,200,79,.35);background:linear-gradient(145deg,rgba(244,200,79,.08),rgba(255,255,255,.035)); }
.work-info-dashboard { display:grid;gap:12px; }
.work-info-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.work-info-summary article { padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.04);display:grid;gap:3px; }
.work-info-summary span,.work-info-summary small { font-size:.6rem;color:rgba(236,244,255,.68); }
.work-info-summary strong { font-size:1.12rem; }
.work-type-stats { display:flex;flex-wrap:wrap;gap:6px; }
.work-type-stats span { padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.06);font-size:.62rem; }
.work-skill-tree { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
.work-skill-branch { min-width:0;padding:11px;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.025));display:grid;align-content:start;gap:7px;text-align:center; }
.work-skill-branch.time { border-color:rgba(92,157,255,.35); }
.work-skill-branch.automatic { border-color:rgba(244,200,79,.35); }
.work-skill-branch.manual { border-color:rgba(91,224,138,.35); }
.work-skill-icon { font-size:1.55rem; }
.work-skill-branch h3 { margin:0;font-size:.75rem; }
.work-skill-branch > strong { font-size:1rem; }
.work-skill-branch p,.work-skill-branch small { margin:0;font-size:.56rem;line-height:1.4;color:rgba(236,244,255,.7); }
.work-skill-progress { height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden; }
.work-skill-progress i { display:block;height:100%;background:linear-gradient(90deg,#5c9dff,#f4c84f,#5be08a);border-radius:inherit; }
@media (max-width:620px) {
  .work-skill-tree { grid-template-columns:1fr; }
  .work-info-summary { grid-template-columns:1fr; }
  .finster-app { min-height:480px;max-height:72vh; }
}

/* Flughafen, Partneransicht und Beziehungsstatus */
.local-only-map-toolbar {
  align-items: center;
}

.airport-map-hint {
  max-width: 250px;
  color: rgba(255,255,255,.68);
  font-size: .72rem;
  line-height: 1.35;
  text-align: right;
}

.airport-travel-shell {
  display: grid;
  gap: 12px;
}

.airport-search-field {
  display: grid;
  gap: 6px;
  color: rgba(255,255,255,.72);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.airport-search-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(116,238,192,.24);
  border-radius: 10px;
  color: var(--text);
  background: rgba(3,12,10,.88);
  outline: none;
}

.airport-search-field input:focus {
  border-color: rgba(116,238,192,.72);
  box-shadow: 0 0 0 3px rgba(116,238,192,.12);
}

.airport-travel-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.airport-travel-summary span {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.035);
  font-size: .66rem;
}

.portrait-avatar-wrap.with-partner {
  position: relative;
  min-height: 104px;
}

.portrait-player-avatar {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 76%;
  margin-left: -12%;
}

.portrait-avatar-wrap:not(.with-partner) .portrait-player-avatar {
  width: 100%;
  margin-left: 0;
}

.portrait-partner-quick {
  position: absolute;
  right: 4px;
  bottom: 2px;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: 55%;
  height: 94px;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  opacity: .94;
  transition: transform .16s ease, filter .16s ease;
}

.portrait-partner-quick:hover,
.portrait-partner-quick:focus-visible {
  z-index: 5;
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.1);
  outline: 2px solid rgba(255,138,167,.72);
}

.portrait-partner-quick .finder-avatar,
.portrait-partner-quick .finder-avatar svg {
  width: 100%;
  height: 100%;
  max-height: 96px;
}

.portrait-partner-quick small {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  padding: 2px 4px;
  border-radius: 6px;
  color: #fff;
  background: rgba(4,8,7,.72);
  font-size: .48rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.finder-avatar.plain,
.finder-avatar.plain svg {
  background: transparent;
}

.character-partner-card {
  color: inherit;
  cursor: pointer;
  text-align: inherit;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.character-partner-card:hover,
.character-partner-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,138,167,.65);
  box-shadow: 0 12px 28px rgba(0,0,0,.3), 0 0 0 2px rgba(255,138,167,.1);
  outline: none;
}

.character-partner-card .finder-avatar.character,
.character-partner-card .finder-avatar.character svg {
  max-height: 245px;
}

.partner-mini-meters {
  display: grid;
  gap: 3px;
  padding: 4px 5px 2px;
}

.partner-mini-meters span {
  padding: 4px 6px;
  border-radius: 7px;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.05);
  font-size: .56rem;
  font-weight: 850;
  text-align: center;
}

.partner-care-panel {
  display: grid;
  gap: 12px;
}

.partner-care-hero {
  display: grid;
  grid-template-columns: minmax(100px, 150px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,138,167,.2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,95,120,.1), rgba(155,109,255,.07));
}

.partner-care-hero .finder-avatar,
.partner-care-hero .finder-avatar svg {
  width: 100%;
  max-height: 210px;
}

.partner-care-hero h3,
.partner-care-hero p {
  margin: 0 0 5px;
}

.partner-care-hero span {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 999px;
  color: #ffd4df;
  background: rgba(255,138,167,.1);
  font-size: .64rem;
  font-weight: 900;
}

.partner-meter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.partner-meter-grid article {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
}

.partner-meter-grid article > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.partner-meter-grid progress {
  width: 100%;
  accent-color: #ff8aa7;
}

.partner-meter-grid small {
  color: rgba(255,255,255,.62);
  font-size: .62rem;
}

.partner-daily-note {
  padding: 9px 11px;
  border: 1px solid rgba(255,196,91,.22);
  border-radius: 10px;
  color: #ffd58b;
  background: rgba(255,196,91,.06);
  font-size: .68rem;
  font-weight: 800;
}

.partner-daily-note.done {
  border-color: rgba(116,238,192,.22);
  color: #9ef5d0;
  background: rgba(116,238,192,.06);
}

.partner-action-list {
  display: grid;
  gap: 8px;
}

.partner-move-card {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(230,197,101,.18);
  border-radius: 11px;
  background: rgba(230,197,101,.05);
}

.partner-move-card div {
  display: grid;
  gap: 3px;
}

.partner-move-card small {
  color: rgba(255,255,255,.58);
  font-size: .62rem;
}

.finder-walk-label {
  color: #82efc4;
  font-size: .66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.finder-date-option.special {
  border-color: rgba(255,215,92,.55);
  background: linear-gradient(145deg, rgba(255,215,92,.12), rgba(164,79,255,.1));
}

@media (max-width: 560px) {
  .airport-map-hint { max-width: 150px; font-size: .58rem; }
  .partner-care-hero { grid-template-columns: 105px minmax(0, 1fr); }
  .partner-meter-grid { grid-template-columns: 1fr; }
  .partner-move-card { align-items: stretch; flex-direction: column; }
}

/* Arbeitsfreischaltung & Finder.KL-Beziehungswechsel · 2026-07-20 */
.finder-app {
  position: relative;
}

.finder-relationship-confirm {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 12px;
  border-radius: 18px;
  background: rgba(2, 7, 6, .86);
  backdrop-filter: blur(8px);
}

.finder-relationship-confirm-card {
  display: grid;
  gap: 10px;
  width: min(100%, 330px);
  padding: 14px;
  border: 1px solid rgba(255, 116, 142, .34);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(29, 38, 35, .99), rgba(15, 20, 19, .99));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  text-align: center;
}

.finder-relationship-confirm-card h4,
.finder-relationship-confirm-card p {
  margin: 0;
}

.finder-relationship-confirm-card h4 {
  font-size: .92rem;
  color: #fff;
}

.finder-relationship-confirm-card p {
  color: rgba(255, 255, 255, .72);
  font-size: .68rem;
  line-height: 1.48;
}

.finder-switch-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.finder-switch-avatars > span {
  color: #ff91a6;
  font-size: 1.25rem;
  font-weight: 1000;
}

.finder-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.finder-confirm-actions button {
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
}

/* Partnerdarstellung, Trennung & Beziehungs-Erfolge · 2026-07-20 */
.portrait-avatar-wrap.with-partner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  justify-items: stretch;
  gap: 0;
  min-height: 116px;
  overflow: visible;
}

.portrait-avatar-wrap.with-partner .portrait-player-avatar,
.portrait-avatar-wrap.with-partner .portrait-partner-quick {
  position: relative;
  inset: auto;
  z-index: 2;
  display: grid;
  place-items: end center;
  width: 100%;
  height: 116px;
  min-width: 0;
  margin: 0;
  overflow: visible;
}

.portrait-avatar-wrap.with-partner .portrait-player-avatar {
  padding-bottom: 17px;
}

.portrait-avatar-wrap.with-partner .avatar-card.mini,
.portrait-avatar-wrap.with-partner .portrait-player-avatar .avatar-card {
  width: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.portrait-avatar-wrap.with-partner .portrait-player-avatar .avatar-svg {
  width: 100%;
  max-width: 88px;
  max-height: 101px;
}

.portrait-partner-quick {
  padding: 0 2px 17px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 1;
  isolation: isolate;
  transition: transform .16s ease, filter .16s ease;
}

.portrait-partner-outline {
  position: relative;
  display: grid;
  place-items: end center;
  width: 100%;
  height: 99px;
  border: 1px solid rgba(255, 145, 174, .36);
  border-radius: 38% 38% 20px 20px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.025), 0 0 14px rgba(255, 115, 151, .08);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.portrait-partner-quick:hover,
.portrait-partner-quick:focus-visible {
  z-index: 5;
  transform: translateY(-1px);
  filter: none;
  outline: none;
}

.portrait-partner-quick:hover .portrait-partner-outline,
.portrait-partner-quick:focus-visible .portrait-partner-outline {
  border-color: rgba(255, 145, 174, .95);
  box-shadow: 0 0 0 2px rgba(255, 145, 174, .18), 0 0 20px rgba(255, 98, 139, .28);
  transform: scale(1.02);
}

.portrait-partner-quick .finder-avatar,
.portrait-partner-quick .finder-avatar svg {
  width: 100%;
  height: 100%;
  max-height: 101px;
  overflow: visible;
  background: transparent;
}

.portrait-partner-quick .finder-avatar svg {
  object-fit: contain;
  object-position: center bottom;
}

.portrait-partner-quick small {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: grid;
  gap: 0;
  padding: 2px 1px 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.95);
}

.portrait-partner-quick small b {
  overflow: hidden;
  font-size: .5rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portrait-partner-quick small em {
  overflow: hidden;
  color: rgba(255,255,255,.76);
  font-size: .39rem;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-avatar-stack.with-partner .character-couple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.character-partner-card {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
  box-shadow: none;
}

.character-partner-outline {
  display: grid;
  place-items: end center;
  width: 100%;
  min-height: 225px;
  border: 1px solid rgba(255, 145, 174, .36);
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.025), 0 12px 28px rgba(0,0,0,.16);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.character-partner-card:hover,
.character-partner-card:focus-visible {
  transform: none;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.character-partner-card:hover .character-partner-outline,
.character-partner-card:focus-visible .character-partner-outline {
  border-color: rgba(255, 145, 174, .95);
  box-shadow: 0 0 0 2px rgba(255, 145, 174, .16), 0 16px 34px rgba(0,0,0,.28), 0 0 24px rgba(255, 98, 139, .2);
  transform: translateY(-2px);
}

.character-partner-card .finder-avatar.character,
.character-partner-card .finder-avatar.character svg {
  width: 100%;
  max-width: 230px;
  max-height: 285px;
  margin: 0 auto;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  object-position: center bottom;
}

.character-partner-card > small {
  padding: 3px 2px 0;
  color: #fff;
  background: transparent;
  font-size: .7rem;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
}

.partner-mini-meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 0;
}

.partner-mini-meters span {
  padding: 2px 1px;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,.72);
  background: transparent;
  font-size: .55rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.partner-breakup-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(239, 119, 109, .24);
  border-radius: 11px;
  background: rgba(239, 119, 109, .055);
}

.partner-breakup-card > div {
  display: grid;
  gap: 3px;
}

.partner-breakup-card small {
  color: rgba(255,255,255,.58);
  font-size: .62rem;
  line-height: 1.35;
}

.partner-care-panel {
  position: relative;
}

.partner-breakup-confirm {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 12px;
  border-radius: 14px;
  background: rgba(2, 7, 6, .88);
  backdrop-filter: blur(9px);
}

.partner-breakup-confirm-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 340px);
  padding: 15px;
  border: 1px solid rgba(239, 119, 109, .38);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(34, 28, 28, .99), rgba(15, 20, 19, .99));
  box-shadow: 0 24px 66px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.07);
  text-align: center;
}

.partner-breakup-confirm-card .finder-avatar.mini {
  width: 70px;
  height: 88px;
  border-color: rgba(255, 145, 174, .34);
  background: transparent;
}

.partner-breakup-confirm-card h4,
.partner-breakup-confirm-card p {
  margin: 0;
}

.partner-breakup-confirm-card h4 {
  font-size: .95rem;
}

.partner-breakup-confirm-card p {
  color: rgba(255,255,255,.7);
  font-size: .69rem;
  line-height: 1.48;
}

.partner-breakup-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  width: 100%;
}

.partner-breakup-confirm-actions button {
  min-width: 0;
  white-space: normal;
  line-height: 1.18;
}

@media (max-width: 560px) {
  .portrait-avatar-wrap.with-partner {
    min-height: 112px;
  }

  .portrait-avatar-wrap.with-partner .portrait-player-avatar,
  .portrait-avatar-wrap.with-partner .portrait-partner-quick {
    height: 112px;
  }

  .portrait-avatar-wrap.with-partner .portrait-player-avatar .avatar-svg,
  .portrait-partner-quick .finder-avatar,
  .portrait-partner-quick .finder-avatar svg {
    max-height: 96px;
  }

  .portrait-partner-outline {
    height: 95px;
  }

  .character-partner-outline {
    min-height: 205px;
  }

  .partner-breakup-card {
    align-items: stretch;
    flex-direction: column;
  }
}


/* Casino Big Upgrade · 2026-07-20 */
.casino-map-pro-head{align-items:center}.casino-map-live-stats{display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:6px}.casino-map-live-stats span,.casino-pro-stats span,.casino-kpi-row span{display:grid;gap:2px;padding:8px 10px;border:1px solid rgba(242,211,112,.18);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025))}.casino-map-live-stats small,.casino-pro-stats small,.casino-kpi-row small{color:#9ca9a1;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.casino-map-live-stats b,.casino-pro-stats b,.casino-kpi-row b{color:#fff;font-size:.79rem}.casino-pro-header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border:1px solid rgba(242,211,112,.24);border-radius:15px;background:radial-gradient(circle at 10% 10%,rgba(242,211,112,.16),transparent 35%),linear-gradient(145deg,#18151e,#0b0b0f)}.casino-pro-title{display:flex;align-items:center;gap:10px}.casino-pro-title>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#f2d370,#8e6825);font-size:1.4rem;box-shadow:0 8px 22px rgba(0,0,0,.35)}.casino-pro-title small,.casino-pro-title strong,.casino-pro-wallet small,.casino-pro-wallet b{display:block}.casino-pro-title small,.casino-pro-wallet small{color:#a8aaa5;font-size:.62rem;font-weight:900;letter-spacing:.1em}.casino-pro-title strong{font-size:1rem}.casino-pro-wallet{text-align:right}.casino-pro-wallet b{color:#f2d370}.casino-pro-stats,.casino-kpi-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0}.casino-chip-selector{margin:8px 0;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035)}.casino-chip-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;color:#aeb6b0;font-size:.72rem}.casino-chip-label b{color:#f2d370}.casino-chip-selector .chip{position:relative;display:flex;align-items:center;gap:4px;padding:6px 8px}.casino-chip-selector .chip i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c7,#d6a83e 64%,#725018);box-shadow:0 0 0 2px rgba(0,0,0,.2)}.casino-chip-selector .chip.active{box-shadow:0 0 0 2px #f2d370,0 0 20px rgba(242,211,112,.3)}.casino-pro-game{padding:10px!important;border-radius:16px!important;background:linear-gradient(165deg,#111b16,#080b09)!important;border-color:rgba(242,211,112,.22)!important}.casino-game-banner{display:flex;align-items:center;gap:10px;margin-bottom:9px;padding:11px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.02))}.casino-game-banner>span{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;font-size:1.55rem;background:rgba(0,0,0,.28)}.casino-game-banner h3,.casino-game-banner p,.casino-game-banner small{margin:0}.casino-game-banner small{font-size:.61rem;font-weight:900;letter-spacing:.12em;color:#f2d370}.casino-game-banner p{font-size:.72rem;line-height:1.35}.casino-game-banner.blackjack{background:linear-gradient(135deg,rgba(28,111,68,.35),rgba(0,0,0,.12))}.casino-game-banner.poker{background:linear-gradient(135deg,rgba(72,43,114,.38),rgba(0,0,0,.15))}.casino-game-banner.roulette{background:linear-gradient(135deg,rgba(151,39,49,.32),rgba(0,0,0,.15))}.casino-game-banner.slots{background:linear-gradient(135deg,rgba(174,101,28,.35),rgba(63,18,80,.22))}.casino-round-track{display:flex;justify-content:center;gap:8px;margin:8px 0}.casino-round-track i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.14);color:#79817c;font-style:normal;font-weight:900}.casino-round-track i.active{border-color:#f2d370;color:#f2d370;box-shadow:0 0 16px rgba(242,211,112,.35)}.casino-round-track i.done{border-color:#72d8a0;background:#72d8a0;color:#092114}.highlow-layout.pro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:8px}.highlow-card-zone.pro{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:15px;background:radial-gradient(circle at 50% 50%,rgba(242,211,112,.12),transparent 60%),#0c1712}.highlow-card-zone.pro>div{text-align:center}.highlow-versus{color:#f2d370;font-weight:1000}.highlow-stack.pro{margin:0}.casino-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0}.casino-choice-grid button{display:grid;gap:2px;place-items:center;min-height:62px;border-radius:13px;border:1px solid rgba(242,211,112,.22);background:linear-gradient(145deg,#1e2d25,#0c120e);color:white}.casino-choice-grid button span{font-size:1.3rem;color:#f2d370}.casino-collect{width:100%}.casino-service-card{display:grid;gap:10px;padding:12px;border:1px solid rgba(242,211,112,.24);border-radius:16px;background:radial-gradient(circle at 10% 0,rgba(242,211,112,.14),transparent 32%),linear-gradient(155deg,#16151b,#09090c)}.casino-service-hero{display:flex;gap:11px;align-items:flex-start}.casino-service-hero>span{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#f2d370,#805b20);font-size:1.55rem}.casino-service-hero small,.casino-service-hero h3,.casino-service-hero p{display:block;margin:0}.casino-service-hero small{color:#f2d370;font-size:.62rem;font-weight:900;letter-spacing:.12em}.casino-service-hero p{margin-top:3px;color:#adb5af;font-size:.75rem;line-height:1.4}.casino-balance-grid,.casino-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.casino-balance-grid article{padding:10px;border-radius:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}.casino-balance-grid small,.casino-balance-grid b{display:block}.casino-balance-grid small{color:#9aa39d;font-size:.63rem}.casino-balance-grid b{margin-top:3px;color:#f2d370;font-size:.85rem}.casino-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.casino-quick-button{display:grid;gap:2px;padding:10px;border:1px solid rgba(242,211,112,.2);border-radius:12px;background:rgba(242,211,112,.08);color:#fff}.casino-quick-button small{color:#aeb5b0}.casino-quick-button b{color:#f2d370}.casino-security-ring{--security:100;position:relative;display:grid;place-items:center;width:148px;height:148px;margin:4px auto;border-radius:50%;background:conic-gradient(#72d8a0 calc(var(--security)*1%),rgba(255,255,255,.08) 0);box-shadow:0 0 32px rgba(114,216,160,.18)}.casino-security-ring:before{content:"";position:absolute;width:116px;height:116px;border-radius:50%;background:#111419}.casino-security-ring>div{position:relative;z-index:1;text-align:center}.casino-security-ring b,.casino-security-ring small{display:block}.casino-security-ring b{color:white;font-size:1rem}.casino-security-ring small{color:#9da69f;font-size:.64rem}.casino-security-pro.urgent .casino-security-ring{background:conic-gradient(#ed6e62 calc(var(--security)*1%),rgba(255,255,255,.08) 0)}.casino-security-status{display:flex;justify-content:space-between;padding:9px;border-radius:10px;background:rgba(255,255,255,.05)}.casino-security-status b{color:#72d8a0}.casino-tour-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.casino-tour-grid article{display:flex;gap:8px;padding:8px;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}.casino-tour-grid article>span{font-size:1.2rem}.casino-tour-grid b,.casino-tour-grid small{display:block}.casino-tour-grid small{margin-top:2px;color:#a8b0aa;font-size:.66rem;line-height:1.3}.casino-tier-list{display:grid;gap:7px}.casino-tier-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);opacity:.68}.casino-tier-card.active{opacity:1;border-color:#f2d370;box-shadow:0 0 0 2px rgba(242,211,112,.12)}.casino-tier-card.unlocked{opacity:1}.casino-tier-card>span{font-size:1.35rem}.casino-tier-card small,.casino-tier-card b,.casino-tier-card em{display:block}.casino-tier-card small{color:#9da69f;font-size:.6rem}.casino-tier-card em{color:#aeb5b0;font-size:.65rem;font-style:normal}.casino-tier-card>strong{color:#f2d370;font-size:.68rem}.casino-vip-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.casino-vip-benefits span{padding:7px;border-radius:9px;background:rgba(114,216,160,.08);color:#aee8c7;font-size:.68rem}.poker-felt{position:relative;display:grid;gap:9px;padding:14px 10px;border-radius:48% 48% 22% 22%/22% 22% 12% 12%;background:radial-gradient(ellipse at 50% 50%,#17633d,#0c3926 62%,#062018);border:7px solid #6b411d;box-shadow:inset 0 0 0 3px #c69b4d,inset 0 0 35px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.35)}.poker-seat{display:flex;justify-content:space-between;align-items:center;gap:8px}.poker-seat small,.poker-seat b{display:block}.poker-seat small{color:#d6c795;font-size:.6rem}.poker-seat b{color:white;font-size:.72rem}.poker-community{text-align:center}.poker-community>small{color:#d6c795;font-size:.6rem;font-weight:900}.poker-community .card-row{justify-content:center}.poker-pot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid #d9b65b;color:#f2d370}.poker-pot span{font-size:.48rem}.poker-pot b{font-size:.7rem}.poker-empty-card{display:grid;place-items:center;color:rgba(255,255,255,.28);background:rgba(0,0,0,.2);border:1px dashed rgba(255,255,255,.2)}.poker-history{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:8px}.poker-history span{display:grid;padding:7px;border-radius:9px;background:rgba(255,255,255,.045)}.poker-history span.win{border-left:3px solid #72d8a0}.poker-history span.loss{border-left:3px solid #ed6e62}.poker-history span.tie{border-left:3px solid #f2d370}.poker-history small{color:#aeb5b0}.blackjack-rules{display:flex;flex-wrap:wrap;gap:5px}.blackjack-rules span{padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.05);color:#b8c2bb;font-size:.62rem}.casino-deck-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:8px 0}.casino-deck-option{display:grid;place-items:center;padding:7px 3px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:white}.casino-deck-option b{font-size:1rem}.casino-deck-option small,.casino-deck-option em{font-size:.58rem;font-style:normal;color:#9da69f}.casino-deck-option.active{border-color:#f2d370;background:rgba(242,211,112,.12)}.blackjack-pro-felt{position:relative;display:grid;grid-template-columns:auto 1fr;gap:9px;padding:12px;border-radius:45% 45% 18% 18%/22% 22% 12% 12%;background:radial-gradient(ellipse,#14623d,#082f20 72%);border:6px solid #6a3f1d;box-shadow:inset 0 0 0 2px #c99b4b,inset 0 0 30px rgba(0,0,0,.4)}.blackjack-score{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#0a1610;border:2px solid #d5b25a}.blackjack-score small{font-size:.5rem;color:#aeb5b0}.blackjack-score b{font-size:1rem;color:white}.blackjack-table-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(242,211,112,.35);font-size:1.5rem;font-weight:1000;text-align:center}.blackjack-table-logo small{font-size:.45rem}.blackjack-pro-felt .hand-zone{margin:0;min-height:80px}.blackjack-pro-felt .player-hand{grid-column:1/2}.blackjack-pro-felt .blackjack-score.player{grid-column:2/3}.roulette-history{display:grid;gap:5px;margin:7px 0;padding:7px;border-radius:11px;background:rgba(255,255,255,.04)}.roulette-history>small{color:#9fa8a2;font-size:.58rem;font-weight:900}.roulette-history>div{display:flex;gap:5px;overflow:hidden}.roulette-history span{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:50%;color:#fff;font-size:.66rem;font-weight:900}.roulette-history .red{background:#a52828}.roulette-history .black{background:#15181a}.roulette-history .zero{background:#17834b}.roulette-history em{color:#8f9992;font-size:.68rem}.slots-pro-shell>.slots-machine-frame>.casino-table{border:0!important;padding:0!important;background:transparent!important}.slots-machine-frame{padding:9px;border-radius:15px;background:linear-gradient(145deg,#28130c,#12070f);border:3px solid #a8752d;box-shadow:inset 0 0 0 2px #e5c46d,inset 0 0 26px rgba(0,0,0,.5)}.casino-map-status{margin-bottom:0}.casino-service-actions{margin-bottom:0}
@media(max-width:520px){.casino-map-live-stats{width:100%;grid-template-columns:repeat(3,1fr)}.casino-pro-stats,.casino-kpi-row{grid-template-columns:repeat(3,minmax(80px,1fr));overflow-x:auto}.highlow-layout.pro{grid-template-columns:1fr}.casino-balance-grid{grid-template-columns:1fr}.casino-tour-grid{grid-template-columns:1fr}.poker-felt{padding:12px 6px}.poker-felt .play-card{width:38px;height:54px}.casino-deck-grid{grid-template-columns:repeat(2,1fr)}.blackjack-pro-felt .play-card{width:42px;height:60px}}


/* Charakter- und Inventar-Redesign · 2026-07-21 */
.character-dialog {
  width: min(860px, 95vw);
  max-height: min(900px, 92vh);
  padding: 18px;
}
.character-dialog.inventory-dialog { width: min(1180px, 97vw); }
.character-hub { gap: 12px; }
.character-hub-nav,
.character-overview-nav {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(10,25,20,.94);
  backdrop-filter: blur(12px);
}
.character-hub-nav .mini-button,
.character-overview-nav .mini-button { min-height: 38px; }
.character-overview-card {
  border: 1px solid rgba(116,238,192,.14);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(22,47,39,.95), rgba(8,18,15,.98));
}
.character-overview-head { padding: 14px 15px 5px; }
.character-overview-card .meta-strip { margin: 8px 14px; }
.character-overview-body { padding: 10px 14px 15px; }
.character-couple { gap: 12px; }
.character-person-card {
  min-width: 0;
  min-height: 330px;
  display: grid;
  grid-template-rows: minmax(235px, 1fr) auto auto;
  align-items: end;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.16));
  overflow: hidden;
}
.character-person-card:hover,
.character-person-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(116,238,192,.5);
  box-shadow: 0 15px 34px rgba(0,0,0,.28), 0 0 0 2px rgba(116,238,192,.08);
  outline: 0;
}
.character-person-figure,
.character-person-figure > .avatar-card,
.character-person-figure > .finder-avatar,
.character-person-figure svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 255px !important;
  object-fit: contain;
  background: transparent !important;
}
.character-partner-card { background: linear-gradient(180deg, rgba(255,138,167,.055), rgba(0,0,0,.16)); }
.character-partner-card .finder-avatar.character,
.character-partner-card .finder-avatar.character svg { max-height: 255px !important; }
.partner-mini-meters { grid-template-columns: repeat(2,minmax(0,1fr)); width:100%; }
.partner-mini-meters span { min-width:0; white-space:normal; }

.inventory-needs-panel article > div { min-width: 0; padding-right: 4px; align-items:center; }
.inventory-needs-panel article > div span { min-width:0; display:flex; align-items:center; gap:4px; }
.inventory-needs-panel article > div span i { width:17px; display:inline-grid; place-items:center; font-style:normal; }
.inventory-needs-panel article > div b { flex:0 0 auto; margin-right:3px; padding-left:3px; }
.inventory-needs-panel article.need-health > div span i { color:#ff5d68; filter:drop-shadow(0 0 5px rgba(255,55,70,.35)); }
.inventory-needs-panel article.need-health progress::-webkit-progress-value { background:linear-gradient(90deg,#e2414e,#ff7380); }
.inventory-needs-panel article.need-health progress::-moz-progress-bar { background:linear-gradient(90deg,#e2414e,#ff7380); }
.inventory-needs-panel article.need-mood progress::-webkit-progress-value { background:linear-gradient(90deg,#b15de2,#f083a6 55%,#ffd56d); }
.inventory-needs-panel article.need-mood progress::-moz-progress-bar { background:linear-gradient(90deg,#b15de2,#f083a6 55%,#ffd56d); }

.inventory-game-layout {
  display:grid;
  grid-template-columns: 190px minmax(360px,1fr) 220px;
  gap:12px;
  align-items:start;
  min-height:560px;
}
.inventory-character-column,
.inventory-storage-column,
.inventory-detail-column {
  min-width:0;
  border:1px solid rgba(255,255,255,.085);
  border-radius:16px;
  background:linear-gradient(160deg,rgba(24,51,42,.84),rgba(7,16,13,.96));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 14px 32px rgba(0,0,0,.18);
}
.inventory-character-column { padding:9px; position:sticky; top:70px; }
.inventory-needs-panel.is-vertical { grid-template-columns:1fr; margin:0 0 9px; }
.inventory-needs-panel.is-vertical article { padding:8px; gap:5px; }
.inventory-avatar-drop {
  position:relative;
  min-height:315px;
  display:grid;
  grid-template-rows:1fr auto auto;
  align-items:end;
  justify-items:center;
  gap:4px;
  padding:24px 8px 9px;
  border:2px dashed rgba(116,238,192,.2);
  border-radius:14px;
  background:radial-gradient(circle at 50% 25%,rgba(116,238,192,.12),transparent 42%),rgba(0,0,0,.14);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.inventory-avatar-drop.drag-ready { border-color:rgba(240,207,93,.48); }
.inventory-avatar-drop.drag-over { border-color:#71efbd; box-shadow:0 0 0 4px rgba(113,239,189,.1),0 0 30px rgba(113,239,189,.18); transform:scale(1.015); }
.inventory-avatar-drop .avatar-card,
.inventory-avatar-drop .avatar-card svg { width:100%; max-height:225px; background:transparent; }
.inventory-avatar-drop > b { font-size:.9rem; }
.inventory-avatar-drop > small { color:rgba(255,255,255,.62); font-size:.62rem; text-align:center; }
.inventory-drop-label { position:absolute; top:7px; left:7px; right:7px; color:#71efbd; font-size:.58rem; font-weight:900; text-align:center; }
.inventory-storage-column { padding:10px; }
.inventory-toolbar-modern { display:grid; grid-template-columns:auto minmax(220px,1fr); gap:10px; align-items:center; margin-bottom:7px; }
.inventory-toolbar-modern > div { display:grid; gap:2px; }
.inventory-toolbar-modern strong { color:#f0cf5d; font-size:.86rem; }
.inventory-toolbar-modern small { color:rgba(255,255,255,.6); font-size:.58rem; }
.inventory-toolbar-modern label { display:flex; align-items:center; gap:7px; min-width:0; padding:8px 10px; border:1px solid rgba(116,238,192,.24); border-radius:11px; background:rgba(0,0,0,.22); }
.inventory-toolbar-modern input { min-width:0; width:100%; border:0; padding:0; background:transparent; color:#fff; outline:0; }
.inventory-search-presets { grid-template-columns:repeat(6,minmax(0,1fr)); margin:7px 0 9px; }
.inventory-search-presets button { min-width:0; font-size:.62rem; }
.inventory-slot-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(82px,1fr));
  gap:7px;
  max-height:520px;
  overflow:auto;
  padding:3px 3px 10px;
  scrollbar-width:thin;
}
.inventory-slot {
  position:relative;
  min-width:0;
  min-height:83px;
  display:grid;
  grid-template-rows:34px 1fr;
  align-items:center;
  justify-items:center;
  gap:4px;
  padding:7px 5px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  color:rgba(255,255,255,.78);
  background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(0,0,0,.18));
  content-visibility:auto;
  contain-intrinsic-size:83px;
}
button.inventory-slot { cursor:grab; }
button.inventory-slot:active { cursor:grabbing; }
.inventory-slot.occupied:hover,
.inventory-slot.occupied.selected { border-color:rgba(240,207,93,.62); box-shadow:0 0 0 2px rgba(240,207,93,.08),0 9px 20px rgba(0,0,0,.22); transform:translateY(-1px); }
.inventory-slot > span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(116,238,192,.09); font-size:1.25rem; }
.inventory-slot > b { width:100%; overflow:hidden; font-size:.58rem; line-height:1.18; text-align:center; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.inventory-slot > em { position:absolute; top:4px; right:4px; padding:2px 4px; border-radius:999px; color:#08120e; background:#f0cf5d; font-size:.52rem; font-style:normal; font-weight:1000; }
.inventory-slot.empty { opacity:.34; border-style:dashed; background:rgba(255,255,255,.018); }
.inventory-slot.empty i { color:rgba(255,255,255,.25); font-size:.54rem; font-style:normal; }
.inventory-search-empty { padding:20px; color:rgba(255,255,255,.55); text-align:center; }
.inventory-detail-column { position:sticky; top:70px; padding:10px; }
.inventory-selected-card,.inventory-selected-empty { min-height:260px; display:grid; align-content:start; justify-items:center; gap:8px; text-align:center; }
.inventory-selected-icon,.inventory-selected-empty > span { width:68px; height:68px; display:grid; place-items:center; border:1px solid rgba(240,207,93,.2); border-radius:18px; background:rgba(240,207,93,.08); font-size:2rem; }
.inventory-selected-card h3 { margin:2px 0 0; font-size:.92rem; }
.inventory-selected-card p,.inventory-selected-empty small { margin:0; color:rgba(255,255,255,.62); font-size:.64rem; line-height:1.45; }
.inventory-selected-actions { width:100%; display:grid; gap:7px; margin-top:5px; }
.inventory-selected-actions button { width:100%; min-height:38px; }

.staff-role-actions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.staff-role-actions .danger { grid-column:1 / -1; }

/* Gleich große Figuren auf der Hauptseite */
.portrait-avatar-wrap.with-partner {
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  min-height:125px;
  align-items:end;
}
.portrait-avatar-wrap.with-partner .portrait-player-avatar,
.portrait-avatar-wrap.with-partner .portrait-partner-quick {
  position:relative;
  inset:auto;
  z-index:2;
  width:100%;
  height:125px;
  margin:0;
  display:grid;
  grid-template-rows:96px auto;
  align-items:end;
  justify-items:center;
  overflow:visible;
  border-radius:10px;
}
.portrait-avatar-wrap.with-partner .portrait-partner-quick { border:1px solid transparent; }
.portrait-avatar-wrap.with-partner .portrait-partner-quick:hover,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus-visible { border-color:rgba(255,138,167,.72); outline:0; }
.portrait-person-figure,
.portrait-person-figure .avatar-card,
.portrait-person-figure .finder-avatar,
.portrait-person-figure svg { width:100%; height:96px; max-height:96px !important; background:transparent !important; }
.portrait-avatar-wrap.with-partner .portrait-player-avatar > small,
.portrait-avatar-wrap.with-partner .portrait-partner-quick > small {
  position:relative;
  inset:auto;
  width:100%;
  display:grid;
  gap:1px;
  padding:2px 2px 0;
  color:#fff;
  background:transparent;
  font-size:.46rem;
  line-height:1.05;
  text-align:center;
}
.portrait-avatar-wrap.with-partner small em { color:rgba(255,255,255,.55); font-size:.4rem; font-style:normal; }

@media (max-width:900px) {
  .inventory-game-layout { grid-template-columns:175px minmax(300px,1fr); }
  .inventory-detail-column { grid-column:1 / -1; position:static; }
  .inventory-selected-card,.inventory-selected-empty { min-height:0; }
  .inventory-search-presets { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .character-dialog.inventory-dialog { width:min(98vw,620px); padding:12px; }
  .inventory-game-layout { grid-template-columns:1fr; }
  .inventory-character-column,.inventory-detail-column { position:static; }
  .inventory-character-column { display:grid; grid-template-columns:145px minmax(0,1fr); gap:8px; }
  .inventory-needs-panel.is-vertical { margin:0; }
  .inventory-avatar-drop { min-height:260px; }
  .inventory-toolbar-modern { grid-template-columns:1fr; }
  .inventory-search-presets { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .inventory-slot-grid { max-height:430px; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); }
  .character-hub-nav,.character-overview-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.inventory-slot .item-id { position:absolute; right:3px; bottom:3px; left:3px; margin:0; padding:2px 3px; border-radius:5px; background:rgba(0,0,0,.78); font-size:.42rem; line-height:1.1; z-index:3; }
body.mod-item-ids-visible .inventory-slot { padding-bottom:24px; }
.inventory-slot[hidden] { display: none !important; }


/* Arbeitshelfer, Logistikzentrum, Flughafen-Lesbarkeit und kompakte Casino-Auswahl · 2026-07-21 */
.work-skill-tree { align-items: stretch; }
.work-skill-branch {
  height: 100%;
  grid-template-rows: auto auto auto auto minmax(58px, auto) minmax(42px, auto) auto;
}
.work-skill-branch > button { align-self: end; width: 100%; min-height: 48px; }
.work-helper-entry,.logistics-entry-card { min-height: 124px; }
.work-helper-entry { border-color: rgba(244,200,79,.36); background: radial-gradient(circle at 95% 10%,rgba(244,200,79,.12),transparent 36%),linear-gradient(145deg,rgba(244,200,79,.07),rgba(255,255,255,.025)); }
.logistics-entry-card { border-color: rgba(86,164,255,.38); background: radial-gradient(circle at 90% 10%,rgba(86,164,255,.15),transparent 38%),linear-gradient(145deg,rgba(31,93,141,.12),rgba(255,255,255,.025)); }
.work-helper-entry .eyebrow,.logistics-entry-card .eyebrow { margin:0 0 3px;font-size:.58rem;letter-spacing:.12em;color:var(--gold);font-weight:1000; }
.work-helper-hub { display:grid;gap:10px; }
.work-helper-hub > article { display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); }
.work-helper-hub > article > span { display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(244,200,79,.11);font-size:1.35rem; }
.work-helper-hub h3,.work-helper-hub p { margin:0; }
.work-helper-hub h3 { font-size:.86rem; }
.work-helper-hub p { margin-top:3px;font-size:.66rem;color:var(--muted);line-height:1.42; }

.logistics-game { display:grid;gap:12px;min-width:0; }
.logistics-topbar { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px; }
.logistics-topbar article { min-width:0;padding:9px;border:1px solid rgba(98,180,255,.18);border-radius:12px;background:linear-gradient(145deg,rgba(38,111,164,.17),rgba(255,255,255,.025)); }
.logistics-topbar small,.logistics-topbar b { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.logistics-topbar small { color:#92aabe;font-size:.52rem;font-weight:1000;letter-spacing:.08em; }
.logistics-topbar b { margin-top:3px;color:#fff;font-size:.78rem; }
.logistics-main-grid { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(170px,.65fr);gap:10px;align-items:start; }
.logistics-operation { min-width:0;display:grid;gap:9px; }
.logistics-warehouse { position:relative;min-height:280px;overflow:hidden;border:1px solid rgba(102,185,255,.24);border-radius:17px;background:linear-gradient(180deg,#203746 0 18%,#59636a 18% 22%,#182329 22% 100%);box-shadow:inset 0 0 45px rgba(0,0,0,.42); }
.logistics-warehouse::before { content:"";position:absolute;inset:22% 0 0;background:repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,255,255,.025) 11% 12%),repeating-linear-gradient(0deg,transparent 0 17%,rgba(255,255,255,.025) 17% 18%);pointer-events:none; }
.logistics-building-label { position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:4;padding:5px 11px;border-radius:7px;background:#0c151a;color:#ffd96c;font-size:.64rem;font-weight:1000;letter-spacing:.12em;box-shadow:0 6px 18px rgba(0,0,0,.35); }
.logistics-truck { position:absolute;z-index:5;display:grid;justify-items:center;gap:1px;transition:transform .8s ease,opacity .4s ease; }
.logistics-truck span { font-size:2.55rem;filter:drop-shadow(0 6px 5px rgba(0,0,0,.4)); }
.logistics-truck small,.logistics-station small { padding:2px 5px;border-radius:5px;background:rgba(5,10,12,.8);color:#d9ebf5;font-size:.45rem;font-weight:1000;letter-spacing:.08em; }
.logistics-truck.inbound { left:2%;top:31%;transform:translateX(-125%); }
.logistics-truck.outbound { right:2%;bottom:9%;transform:translateX(130%); }
.stage-incoming .logistics-truck.inbound { animation:logisticsTruckIn 2.4s ease-in-out infinite alternate; }
.stage-delivery-ready .logistics-truck.inbound,.stage-receiving .logistics-truck.inbound { transform:translateX(0); }
.stage-shipping .logistics-truck.outbound,.stage-payment .logistics-truck.outbound { animation:logisticsTruckOut 2.6s ease-in-out infinite alternate; }
.stage-shipping-ready .logistics-truck.outbound { transform:translateX(0); }
.logistics-belt { position:absolute;z-index:2;height:34px;border:2px solid #7c8a91;border-radius:8px;background:repeating-linear-gradient(90deg,#303b40 0 15px,#59656a 15px 19px);box-shadow:inset 0 0 0 4px #11191c,0 5px 12px rgba(0,0,0,.32);overflow:hidden; }
.logistics-belt::after { content:"";position:absolute;inset:8px 0;background:repeating-linear-gradient(90deg,#b8c1c6 0 9px,#566168 9px 18px);opacity:.7; }
.logistics-belt.belt-a { left:14%;top:38%;width:31%; }
.logistics-belt.belt-b { left:43%;top:54%;width:27%;transform:rotate(11deg); }
.logistics-belt.belt-c { left:67%;bottom:22%;width:22%; }
.logistics-package { position:relative;z-index:3;display:inline-block;margin:2px 4px;font-size:1.15rem;opacity:0; }
.stage-receiving .belt-a .logistics-package,.stage-inspecting .belt-a .logistics-package { opacity:1;animation:logisticsBoxA 2s linear infinite; }
.stage-storing .belt-b .logistics-package { opacity:1;animation:logisticsBoxB 2.2s linear infinite; }
.stage-packing .belt-c .logistics-package,.stage-shipping-ready .belt-c .logistics-package,.stage-shipping .belt-c .logistics-package { opacity:1;animation:logisticsBoxC 2s linear infinite; }
.logistics-station { position:absolute;z-index:4;display:grid;justify-items:center;gap:2px;width:70px;padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(145deg,#25353c,#0d1518);box-shadow:0 8px 18px rgba(0,0,0,.35); }
.logistics-station span { font-size:1.65rem; }
.logistics-station.inspect { left:40%;top:29%; }
.logistics-station.storage { left:61%;top:48%; }
.logistics-station.packing { right:8%;bottom:29%; }
.stage-inspecting .logistics-station.inspect,.stage-storing .logistics-station.storage,.stage-packing .logistics-station.packing { border-color:#ffd96c;box-shadow:0 0 22px rgba(255,217,108,.28);animation:logisticsStationPulse 1s ease-in-out infinite alternate; }
.logistics-workers { position:absolute;left:4%;bottom:4%;z-index:5;display:flex;align-items:center;gap:2px;max-width:55%;padding:5px 7px;border-radius:9px;background:rgba(5,10,12,.76); }
.logistics-workers i { font-style:normal;font-size:.8rem; }
.logistics-workers b { margin-left:5px;color:#d9ebf5;font-size:.52rem;white-space:nowrap; }
.logistics-stage-card { display:grid;gap:9px;padding:12px;border:1px solid rgba(98,180,255,.2);border-radius:15px;background:linear-gradient(145deg,rgba(24,61,83,.34),rgba(255,255,255,.025)); }
.logistics-stage-card > div:first-child { display:flex;gap:10px;align-items:flex-start; }
.logistics-stage-card > div:first-child > span { display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:rgba(83,164,220,.18);font-size:1.35rem; }
.logistics-stage-card small,.logistics-stage-card h3,.logistics-stage-card p { display:block;margin:0; }
.logistics-stage-card small { color:#8fb0c4;font-size:.53rem;font-weight:1000;letter-spacing:.1em; }
.logistics-stage-card h3 { font-size:.92rem; }
.logistics-stage-card p { margin-top:3px;color:var(--muted);font-size:.65rem;line-height:1.4; }
.logistics-order-progress { height:8px!important;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden; }
.logistics-order-progress i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#55a9e0,#65e1b2,#ffd96c);transition:width .35s linear; }
.logistics-buy-panel { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px; }
.logistics-buy-panel label { display:grid;gap:4px;color:var(--muted);font-size:.6rem;font-weight:900; }
.logistics-buy-panel select { min-height:42px;padding:7px 9px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#111d22;color:#fff; }
.logistics-inventory-panel { display:grid;gap:9px;padding:11px;border:1px solid rgba(255,217,108,.18);border-radius:15px;background:linear-gradient(150deg,rgba(88,68,23,.17),rgba(255,255,255,.025)); }
.logistics-inventory-panel h3 { margin:0;font-size:.88rem; }
.logistics-inventory-stats { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
.logistics-inventory-stats span { min-width:0;padding:8px;border-radius:10px;background:rgba(255,255,255,.05); }
.logistics-inventory-stats small,.logistics-inventory-stats b { display:block;overflow:hidden;text-overflow:ellipsis; }
.logistics-inventory-stats small { color:var(--muted);font-size:.5rem; }
.logistics-inventory-stats b { margin-top:2px;color:#ffd96c;font-size:.7rem;white-space:nowrap; }
.logistics-staff-card { display:grid;gap:7px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08); }
.logistics-staff-card small,.logistics-staff-card b,.logistics-staff-card p { display:block;margin:0; }
.logistics-staff-card small { color:#8fb0c4;font-size:.52rem;font-weight:1000; }
.logistics-staff-card p { color:var(--muted);font-size:.58rem;line-height:1.35; }
.logistics-skill-head { display:flex;justify-content:space-between;gap:10px;align-items:end;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.03); }
.logistics-skill-head small,.logistics-skill-head h3,.logistics-skill-head p { margin:0; }
.logistics-skill-head small { color:#ffd96c;font-size:.54rem;font-weight:1000;letter-spacing:.1em; }
.logistics-skill-head h3 { font-size:.83rem; }
.logistics-skill-head p { max-width:260px;color:var(--muted);font-size:.58rem;text-align:right; }
.logistics-skill-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px; }
.logistics-skill-grid article { display:grid;grid-template-rows:auto auto auto auto minmax(48px,auto) auto auto;gap:6px;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.018));text-align:center; }
.logistics-skill-grid article > span { font-size:1.35rem; }
.logistics-skill-grid h4,.logistics-skill-grid p,.logistics-skill-grid small { margin:0; }
.logistics-skill-grid h4 { font-size:.72rem; }
.logistics-skill-grid article > b { font-size:.9rem; }
.logistics-skill-grid article > div { height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden; }
.logistics-skill-grid article > div i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#55a9e0,#ffd96c); }
.logistics-skill-grid p,.logistics-skill-grid small { color:var(--muted);font-size:.53rem;line-height:1.35; }
.logistics-skill-grid button { align-self:end;white-space:normal; }
.logistics-log { padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025); }
.logistics-log summary { cursor:pointer;color:#d9ebf5;font-size:.65rem;font-weight:900; }
.logistics-log p { display:grid;grid-template-columns:auto 1fr;gap:8px;margin:7px 0 0;padding-top:7px;border-top:1px solid rgba(255,255,255,.06);font-size:.58rem;line-height:1.35; }
.logistics-log p span { color:#ffd96c; }
@keyframes logisticsTruckIn { from { transform:translateX(-120%); } to { transform:translateX(0); } }
@keyframes logisticsTruckOut { from { transform:translateX(0); } to { transform:translateX(145%); } }
@keyframes logisticsBoxA { from { transform:translateX(-25px); } to { transform:translateX(125px); } }
@keyframes logisticsBoxB { from { transform:translateX(-20px); } to { transform:translateX(105px); } }
@keyframes logisticsBoxC { from { transform:translateX(-20px); } to { transform:translateX(80px); } }
@keyframes logisticsStationPulse { from { transform:translateY(0); } to { transform:translateY(-3px); } }

.travel-destination-list { max-height:min(58vh,620px);padding:4px 6px 12px 2px;scroll-padding-block:10px; }
.travel-destination-list > .airport-destination-card { content-visibility:visible!important;contain:none!important;contain-intrinsic-size:auto!important;min-height:82px!important;overflow:visible!important;grid-template-columns:minmax(0,1fr) minmax(88px,auto)!important;align-items:center!important;padding:13px 12px!important; }
.airport-destination-card h3 { margin:0 0 5px!important;font-size:.9rem!important;line-height:1.2!important;overflow:visible!important;color:#fff!important; }
.airport-destination-card p { margin:0!important;font-size:.67rem!important;line-height:1.48!important;color:rgba(255,255,255,.75)!important;overflow:visible!important; }
.airport-destination-card button { min-width:88px;min-height:42px;padding:8px 10px;white-space:normal;line-height:1.15; }
.airport-search-field input { font-size:.82rem; }

.casino-chip-dropdown,.blackjack-deck-dropdown { margin:8px 0;border:1px solid rgba(242,211,112,.2);border-radius:13px;background:rgba(255,255,255,.035);overflow:hidden; }
.casino-chip-dropdown summary,.blackjack-deck-dropdown summary { display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:9px 11px;cursor:pointer;list-style:none; }
.casino-chip-dropdown summary::-webkit-details-marker,.blackjack-deck-dropdown summary::-webkit-details-marker { display:none; }
.casino-chip-dropdown summary > span,.blackjack-deck-dropdown summary > span { display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:7px; }
.casino-chip-dropdown summary i { grid-row:1/3;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c7,#d6a83e 64%,#725018);box-shadow:0 0 0 2px rgba(0,0,0,.24); }
.casino-chip-dropdown summary small,.blackjack-deck-dropdown summary small { color:#aeb6b0;font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase; }
.casino-chip-dropdown summary b,.blackjack-deck-dropdown summary b { color:#f2d370;font-size:.86rem; }
.casino-chip-dropdown summary em,.blackjack-deck-dropdown summary em { color:#aeb6b0;font-size:.62rem;font-style:normal;font-weight:900; }
.casino-chip-menu { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:190px;overflow-y:auto;padding:8px;border-top:1px solid rgba(255,255,255,.08); }
.casino-chip-menu .chip { display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;min-height:42px;padding:7px 9px;text-align:left; }
.casino-chip-menu .chip i { grid-row:1/3; }
.casino-chip-menu .chip span { font-weight:900; }
.casino-chip-menu .chip small { color:#f2d370;font-size:.48rem; }
.casino-chip-dropdown[data-locked] summary,.blackjack-deck-dropdown[data-locked] summary { cursor:default; }
.blackjack-deck-dropdown > div { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:180px;overflow:auto;padding:8px;border-top:1px solid rgba(255,255,255,.08); }
.blackjack-deck-dropdown .casino-deck-option { min-height:58px; }

@media (max-width:620px) {
  .logistics-topbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .logistics-main-grid { grid-template-columns:1fr; }
  .logistics-warehouse { min-height:250px; }
  .logistics-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-helper-hub > article { grid-template-columns:38px minmax(0,1fr); }
  .work-helper-hub > article > button { grid-column:1/-1;width:100%; }
}
@media (max-width:390px) {
  .logistics-skill-grid { grid-template-columns:1fr; }
  .logistics-inventory-stats { grid-template-columns:1fr 1fr; }
  .casino-chip-menu,.blackjack-deck-dropdown > div { grid-template-columns:1fr; }
}

/* Flughafen-Zielkarten: kein Abschneiden auf schmalen Dialogen */
.travel-destination-list > .airport-destination-card {
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:9px!important;
  min-height:118px!important;
  align-items:start!important;
  padding:14px!important;
}
.airport-destination-card > div { min-width:0!important;overflow:visible!important; }
.airport-destination-card h3 { font-size:1rem!important;line-height:1.28!important;white-space:normal!important;text-overflow:clip!important; }
.airport-destination-card p { font-size:.73rem!important;line-height:1.55!important;white-space:normal!important;text-overflow:clip!important; }
.airport-destination-card > button { width:100%!important;min-height:44px!important;font-size:.72rem!important; }

/* Arbeits-Skillkarten: Investieren-Buttons exakt auf einer Linie */
.work-skill-branch { display:flex!important; flex-direction:column!important; align-items:stretch!important; }
.work-skill-branch > button { margin-top:auto!important; align-self:stretch!important; }

/* Inventar-Sortierung, Suche und Mobile-Layout · 2026-07-21 */
.character-dialog.inventory-dialog {
  width: min(1040px, 97vw);
}
.character-dialog.inventory-dialog .character-hub {
  width: 100%;
  max-width: none;
  overflow: visible;
}
.character-dialog.inventory-dialog .character-hub-content {
  width: 100%;
  max-height: calc(100dvh - 190px);
  padding-right: 5px;
}

/* Auf der Hauptseite ist Ninas Rahmen unsichtbar und erscheint nur bei Interaktion. */
.portrait-partner-outline {
  border-color: transparent !important;
  box-shadow: none !important;
}
.portrait-partner-quick:hover .portrait-partner-outline,
.portrait-partner-quick:focus-visible .portrait-partner-outline,
.portrait-partner-quick:active .portrait-partner-outline {
  border-color: rgba(255,145,174,.95) !important;
  box-shadow: 0 0 0 2px rgba(255,145,174,.18), 0 0 20px rgba(255,98,139,.28) !important;
}

.inventory-game-layout {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  grid-template-areas:
    "character storage"
    "character detail";
  gap: 12px;
  align-items: start;
  min-height: 0;
}
.inventory-character-column { grid-area: character; }
.inventory-storage-column { grid-area: storage; }
.inventory-detail-column { grid-area: detail; }

.inventory-character-column {
  position: sticky;
  top: 0;
  padding: 10px;
}
.inventory-avatar-drop {
  min-height: 438px;
  padding-top: 30px;
  touch-action: pan-y;
}
.inventory-avatar-drop .avatar-card,
.inventory-avatar-drop .avatar-card svg {
  max-height: 330px;
}
.inventory-storage-column {
  padding: 11px;
}
.inventory-needs-panel.is-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.inventory-needs-panel.is-grid article {
  min-height: 57px;
  padding: 9px 10px;
}
.inventory-needs-panel.is-grid .need-health {
  grid-column: 1 / -1;
  width: calc(50% - 4px);
  justify-self: center;
}
.inventory-toolbar-modern {
  grid-template-columns: minmax(155px, auto) minmax(260px, 1fr);
  margin-bottom: 6px;
}
.inventory-toolbar-modern label:focus-within {
  border-color: rgba(116,238,192,.75);
  box-shadow: 0 0 0 3px rgba(116,238,192,.1);
}
.inventory-sort-hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 2px 8px;
  color: rgba(255,255,255,.5);
  font-size: .55rem;
  line-height: 1.35;
}
.inventory-slot-grid {
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  max-height: 410px;
  overscroll-behavior: contain;
}
.inventory-slot {
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, opacity .14s ease;
}
.inventory-slot.drag-sort-target {
  border-color: #71efbd !important;
  box-shadow: 0 0 0 3px rgba(113,239,189,.14), 0 10px 24px rgba(0,0,0,.28) !important;
  transform: translateY(-3px) scale(1.025) !important;
}
.inventory-slot.touch-dragging {
  z-index: 20;
  opacity: .62;
  border-color: #f0cf5d !important;
  box-shadow: 0 0 0 3px rgba(240,207,93,.16), 0 14px 30px rgba(0,0,0,.36) !important;
  transform: scale(1.045) !important;
}
.inventory-touch-sorting,
.inventory-touch-sorting * {
  cursor: grabbing !important;
}
.inventory-touch-sorting .inventory-slot {
  touch-action: none;
}
.inventory-search-empty {
  margin: 8px 0 0;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}
.inventory-detail-column {
  position: static;
  min-height: 0;
  padding: 10px;
}
.inventory-selected-card {
  min-height: 128px;
  grid-template-columns: 72px minmax(0, 1fr) minmax(190px, 225px);
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: stretch;
  gap: 6px 12px;
  text-align: left;
}
.inventory-selected-icon {
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
}
.inventory-selected-card h3 {
  align-self: end;
  margin: 0;
}
.inventory-selected-card p {
  align-self: start;
}
.inventory-selected-actions {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
  align-content: end;
  margin-top: 0;
}
.inventory-selected-empty {
  min-height: 112px;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: start;
  text-align: left;
}
.inventory-selected-empty > span {
  grid-row: 1 / 3;
}

@media (max-width: 820px) {
  .character-dialog.inventory-dialog {
    width: min(98vw, 720px);
  }
  .inventory-game-layout {
    grid-template-columns: 175px minmax(0, 1fr);
  }
  .inventory-avatar-drop {
    min-height: 360px;
  }
  .inventory-toolbar-modern {
    grid-template-columns: 1fr;
  }
  .inventory-slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  }
  .inventory-selected-card {
    grid-template-columns: 62px minmax(0, 1fr) minmax(165px, 200px);
  }
}

@media (max-width: 620px) {
  .character-dialog.inventory-dialog {
    width: min(100vw - 10px, 620px);
    max-height: 96dvh;
    padding: 10px;
  }
  .character-dialog.inventory-dialog .character-hub-content {
    max-height: calc(100dvh - 165px);
    padding-right: 1px;
  }
  .inventory-game-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "character"
      "storage"
      "detail";
    gap: 9px;
  }
  .inventory-character-column {
    position: static;
    padding: 8px;
  }
  .inventory-avatar-drop {
    min-height: 245px;
    grid-template-rows: 1fr auto auto;
    padding: 25px 8px 8px;
  }
  .inventory-avatar-drop .avatar-card,
  .inventory-avatar-drop .avatar-card svg {
    max-height: 185px;
  }
  .inventory-needs-panel.is-grid {
    gap: 6px;
  }
  .inventory-needs-panel.is-grid article {
    min-height: 53px;
    padding: 8px;
  }
  .inventory-toolbar-modern {
    gap: 7px;
  }
  .inventory-sort-hint {
    display: grid;
    justify-content: stretch;
    font-size: .57rem;
  }
  .inventory-sort-hint span:first-child {
    display: none;
  }
  .inventory-slot-grid {
    max-height: 390px;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
  }
  .inventory-slot {
    min-height: 78px;
  }
  .inventory-detail-column {
    position: sticky;
    bottom: 0;
    z-index: 9;
    padding: 8px;
    border-color: rgba(240,207,93,.22);
    box-shadow: 0 -12px 30px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.025);
  }
  .inventory-selected-card {
    min-height: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 4px 9px;
  }
  .inventory-selected-icon {
    grid-row: 1 / 3;
    width: 50px;
    height: 50px;
    font-size: 1.45rem;
  }
  .inventory-selected-card h3,
  .inventory-selected-card p {
    grid-column: 2;
  }
  .inventory-selected-card p {
    max-height: 36px;
    overflow: hidden;
  }
  .inventory-selected-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 4px;
  }
  .inventory-selected-actions button:only-child {
    grid-column: 1 / -1;
  }
  .inventory-selected-empty {
    min-height: 74px;
  }
  .character-hub-nav,
  .character-overview-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .inventory-needs-panel.is-grid article > div {
    font-size: .57rem;
  }
  .inventory-slot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .character-hub-nav,
  .character-overview-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Feinschliff: Verkaufsbereich sichtbar und mobile Charakterkarte kompakt */
@media (min-width: 621px) {
  .inventory-slot-grid { max-height: 245px; }
}
@media (max-width: 620px) {
  .inventory-avatar-drop {
    min-height: 158px;
    grid-template-columns: 116px minmax(0,1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 3px 10px;
    padding: 24px 10px 9px;
  }
  .inventory-avatar-drop > .avatar-card {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: end;
  }
  .inventory-avatar-drop .avatar-card,
  .inventory-avatar-drop .avatar-card svg {
    max-height: 132px;
  }
  .inventory-avatar-drop > b {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 1rem;
  }
  .inventory-avatar-drop > small {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .inventory-drop-label {
    left: 126px;
    text-align: left;
  }
  .inventory-slot-grid { max-height: 300px; }
}

/* Desktop: Inventar und Verkaufsbereich bleiben gleichzeitig sichtbar. */
@media (min-width: 621px) {
  .inventory-game-layout {
    height: clamp(460px, calc(100dvh - 320px), 570px);
    grid-template-rows: minmax(0, 1fr) 138px;
    align-items: stretch;
  }
  .inventory-character-column,
  .inventory-storage-column,
  .inventory-detail-column {
    height: 100%;
  }
  .inventory-avatar-drop {
    height: 100%;
    min-height: 0;
  }
  .inventory-storage-column {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    overflow: hidden;
  }
  .inventory-slot-grid {
    min-height: 0;
    max-height: none;
  }
  .inventory-detail-column {
    overflow: hidden;
  }
  .inventory-selected-card,
  .inventory-selected-empty {
    height: 100%;
  }
}
@media (max-width: 620px) {
  .inventory-game-layout {
    height: auto;
    grid-template-rows: none;
  }
  .inventory-character-column,
  .inventory-storage-column,
  .inventory-detail-column {
    height: auto;
  }
  .inventory-storage-column {
    display: block;
    overflow: visible;
  }
}
.character-dialog.inventory-dialog .character-hub {
  max-height: none;
}
@media (max-width: 620px) {
  .inventory-character-column {
    display: block;
    grid-template-columns: none;
  }
}
@media (max-width: 620px) {
  .character-dialog.inventory-dialog #dialogTitle {
    padding-right: 92px;
    font-size: 1.22rem;
  }
  .inventory-avatar-drop > .avatar-card.large {
    min-height: 0;
    height: 132px;
  }
}
@media (max-width: 620px) {
  .inventory-avatar-drop > .avatar-card.large .avatar-svg {
    width: auto;
    height: 100%;
    max-height: 132px;
  }
}

/* Arbeitskarten- und Logistikzentrum-Update · 2026-07-21 */
dialog.logistics-dialog {
  width: min(1180px, 98vw);
}

dialog.logistics-dialog #dialogTitle {
  font-size: 2rem;
}

dialog.logistics-dialog #dialogText {
  max-width: none;
  font-size: .84rem;
  line-height: 1.55;
}

.work-helper-entry,
.logistics-entry-card {
  min-height: 142px;
}

.work-helper-entry .eyebrow,
.logistics-entry-card .eyebrow {
  margin: 0 0 7px;
  font-size: .72rem;
  line-height: 1.2;
}

.work-helper-entry h3,
.logistics-entry-card h3 {
  font-size: 1.18rem;
  line-height: 1.24;
}

.work-helper-entry p,
.logistics-entry-card p {
  font-size: .84rem;
  line-height: 1.58;
}

.work-helper-entry button,
.logistics-entry-card button {
  min-width: 126px;
  min-height: 48px;
  font-size: .82rem;
}

.logistics-game {
  gap: 14px;
}

.logistics-topbar {
  gap: 10px;
}

.logistics-topbar article {
  padding: 12px;
  border-radius: 14px;
}

.logistics-topbar small {
  font-size: .6rem;
}

.logistics-topbar b {
  margin-top: 4px;
  font-size: .9rem;
}

.logistics-main-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.logistics-operation {
  gap: 12px;
}

.logistics-warehouse {
  min-height: 390px;
  border-radius: 20px;
  background: linear-gradient(180deg, #244154 0 18%, #65727a 18% 22%, #18242b 22% 100%);
}

.logistics-building-label {
  top: 10px;
  padding: 6px 14px;
  border-radius: 9px;
  font-size: .72rem;
}

.logistics-truck span {
  font-size: 3.05rem;
}

.logistics-truck small,
.logistics-station small {
  padding: 3px 6px;
  font-size: .52rem;
}

.logistics-truck.inbound {
  left: 3%;
  top: 27%;
}

.logistics-truck.outbound {
  right: 3%;
  bottom: 13%;
}

.logistics-belt {
  height: 38px;
  border-radius: 10px;
}

.logistics-belt.belt-a {
  left: 15%;
  top: 37%;
  width: 27%;
}

.logistics-belt.belt-b {
  left: 46%;
  top: 53%;
  width: 23%;
  transform: rotate(9deg);
}

.logistics-belt.belt-c {
  left: 69%;
  bottom: 23%;
  width: 18%;
}

.logistics-package {
  margin: 4px 5px;
  font-size: 1.18rem;
}

.logistics-station {
  width: 96px;
  padding: 9px 7px;
  border-radius: 14px;
}

.logistics-station span {
  font-size: 1.82rem;
}

.logistics-station.inspect {
  left: 39%;
  top: 23%;
}

.logistics-station.storage {
  left: 59%;
  top: 43%;
}

.logistics-station.packing {
  right: 7%;
  bottom: 25%;
}

.logistics-workers {
  left: 4%;
  bottom: 5%;
  gap: 3px;
  padding: 7px 9px;
}

.logistics-workers i {
  font-size: .88rem;
}

.logistics-workers b {
  font-size: .6rem;
}

.logistics-stage-card,
.logistics-inventory-panel {
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
}

.logistics-stage-card > div:first-child > span {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  font-size: 1.45rem;
}

.logistics-stage-card small,
.logistics-staff-card small,
.logistics-skill-head small,
.logistics-inventory-stats small {
  font-size: .58rem;
}

.logistics-stage-card h3,
.logistics-inventory-panel h3,
.logistics-skill-head h3 {
  font-size: 1rem;
}

.logistics-stage-card p,
.logistics-staff-card p,
.logistics-skill-head p,
.logistics-log p {
  font-size: .68rem;
  line-height: 1.48;
}

.logistics-buy-panel {
  align-items: end;
}

.logistics-buy-panel label {
  font-size: .68rem;
}

.logistics-buy-panel select,
.logistics-stage-action {
  min-height: 46px;
}

.logistics-inventory-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.logistics-inventory-stats span {
  padding: 10px;
}

.logistics-inventory-stats b {
  font-size: .78rem;
}

.logistics-staff-card {
  gap: 9px;
}

.logistics-staff-card b {
  font-size: 1rem;
}

.logistics-skill-head {
  padding: 12px;
}

.logistics-skill-grid {
  gap: 9px;
}

.logistics-skill-grid article {
  gap: 7px;
  padding: 12px;
}

.logistics-skill-grid h4 {
  font-size: .78rem;
}

.logistics-skill-grid p,
.logistics-skill-grid small {
  font-size: .58rem;
  line-height: 1.4;
}

@media (max-width: 760px) {
  dialog.logistics-dialog {
    width: min(100vw - 10px, 1000px);
  }

  dialog.logistics-dialog #dialogTitle {
    font-size: 1.6rem;
  }

  dialog.logistics-dialog #dialogText {
    font-size: .76rem;
  }

  .work-helper-entry,
  .logistics-entry-card {
    min-height: 152px;
  }

  .work-helper-entry .eyebrow,
  .logistics-entry-card .eyebrow {
    font-size: .78rem;
  }

  .work-helper-entry h3,
  .logistics-entry-card h3 {
    font-size: 1.08rem;
  }

  .work-helper-entry p,
  .logistics-entry-card p {
    font-size: .8rem;
  }

  .logistics-topbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logistics-warehouse {
    min-height: 330px;
  }

  .logistics-station {
    width: 84px;
    padding: 8px 6px;
  }

  .logistics-station span {
    font-size: 1.56rem;
  }

  .logistics-station.inspect {
    left: 39%;
    top: 24%;
  }

  .logistics-station.storage {
    left: 58%;
    top: 45%;
  }

  .logistics-station.packing {
    right: 6%;
    bottom: 23%;
  }

  .logistics-belt.belt-a {
    left: 14%;
    width: 28%;
  }

  .logistics-belt.belt-b {
    left: 45%;
    width: 24%;
  }

  .logistics-belt.belt-c {
    left: 68%;
    width: 17%;
  }

  .logistics-inventory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logistics-skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .logistics-buy-panel {
    grid-template-columns: 1fr;
  }

  .work-helper-entry,
  .logistics-entry-card {
    min-height: 0;
  }

  .work-helper-entry button,
  .logistics-entry-card button {
    width: 100%;
  }

  .logistics-warehouse {
    min-height: 292px;
  }

  .logistics-building-label {
    font-size: .64rem;
  }

  .logistics-truck span {
    font-size: 2.6rem;
  }

  .logistics-belt {
    height: 34px;
  }

  .logistics-station {
    width: 74px;
    border-radius: 12px;
  }

  .logistics-station span {
    font-size: 1.36rem;
  }

  .logistics-truck small,
  .logistics-station small,
  .logistics-workers b,
  .logistics-stage-card small,
  .logistics-staff-card small,
  .logistics-skill-head small,
  .logistics-inventory-stats small {
    font-size: .5rem;
  }

  .logistics-stage-card h3,
  .logistics-inventory-panel h3,
  .logistics-skill-head h3 {
    font-size: .9rem;
  }
}

/* Arbeitszentrale- und Logistikzentrum-Layout-Fix · 2026-07-21 */
.work-helper-entry .eyebrow,
.logistics-entry-card .eyebrow {
  font-size: .88rem !important;
  line-height: 1.25 !important;
  letter-spacing: .085em !important;
  font-weight: 1000 !important;
  text-shadow: 0 1px 10px rgba(244, 200, 79, .18);
}

.work-helper-entry,
.logistics-entry-card {
  padding-block: 16px !important;
}

.work-helper-entry h3,
.logistics-entry-card h3 {
  margin-top: 2px !important;
}

dialog.logistics-dialog {
  width: min(1260px, calc(100vw - 12px)) !important;
  max-width: none !important;
  padding: 24px !important;
  border-radius: 18px !important;
  overflow-x: hidden !important;
}

dialog.logistics-dialog.has-dialog-back {
  padding-top: 64px !important;
}

dialog.logistics-dialog #dialogTitle {
  font-size: clamp(1.65rem, 3vw, 2.35rem) !important;
  line-height: 1.1 !important;
}

dialog.logistics-dialog #dialogText {
  margin-bottom: 18px !important;
  font-size: .92rem !important;
  line-height: 1.58 !important;
}

.logistics-game {
  gap: 16px !important;
}

.logistics-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.logistics-map-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(102, 185, 255, .24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 4%, rgba(82, 176, 255, .13), transparent 34%),
    linear-gradient(150deg, rgba(19, 55, 75, .32), rgba(255, 255, 255, .025));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}

.logistics-map-head,
.logistics-inventory-title,
.logistics-team-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logistics-map-head small,
.logistics-inventory-title small {
  display: block;
  margin: 0 0 3px;
  color: #8fb8d4;
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .11em;
}

.logistics-map-head h3,
.logistics-inventory-title h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.2;
}

.logistics-speed-badge,
.logistics-inventory-title > b {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(100, 227, 181, .24);
  border-radius: 999px;
  background: rgba(57, 164, 127, .1);
  color: #79edc4;
  font-size: .67rem;
  font-weight: 1000;
  white-space: nowrap;
}

.logistics-warehouse {
  container-type: inline-size;
  width: 100% !important;
  min-height: clamp(390px, 48vw, 540px) !important;
  aspect-ratio: 16 / 8.4;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(42, 81, 105, .98) 0 17%, rgba(112, 127, 136, .96) 17% 21%, rgba(20, 34, 41, .98) 21% 100%) !important;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 15px 34px rgba(0, 0, 0, .22) !important;
}

.logistics-map-grid {
  position: absolute;
  z-index: 0;
  inset: 21% 0 0;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(100, 199, 255, .08) 50%, transparent 50.4%),
    linear-gradient(0deg, transparent 49.6%, rgba(100, 199, 255, .06) 50%, transparent 50.4%),
    repeating-linear-gradient(90deg, transparent 0 9.5%, rgba(255, 255, 255, .028) 9.5% 10%),
    repeating-linear-gradient(0deg, transparent 0 14.5%, rgba(255, 255, 255, .028) 14.5% 15%);
  pointer-events: none;
}

.logistics-warehouse::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 25% 4% 6%;
  border: 1px dashed rgba(123, 204, 255, .09);
  border-radius: 18px;
  pointer-events: none;
}

.logistics-building-label {
  top: 12px !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-size: .82rem !important;
  letter-spacing: .13em !important;
}

.logistics-flow-label {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(6, 13, 17, .72);
  color: #c9dce7;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
}

.logistics-flow-label span {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(98, 180, 255, .18);
  color: #83cfff;
  font-size: .54rem;
  font-weight: 1000;
}

.logistics-flow-label b {
  font-size: .57rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.logistics-flow-label.flow-in {
  left: 3%;
  top: 23%;
}

.logistics-flow-label.flow-out {
  right: 3%;
  bottom: 4%;
}

.logistics-truck span {
  font-size: clamp(2.9rem, 5.2vw, 4rem) !important;
}

.logistics-truck small,
.logistics-station small {
  padding: 4px 7px !important;
  font-size: .59rem !important;
  line-height: 1.05;
}

.logistics-truck.inbound {
  left: 4% !important;
  top: 34% !important;
}

.logistics-truck.outbound {
  right: 3% !important;
  bottom: 10% !important;
}

.logistics-belt {
  height: 44px !important;
  border-radius: 12px !important;
}

.logistics-belt.belt-a {
  left: 17% !important;
  top: 43% !important;
  width: 28% !important;
}

.logistics-belt.belt-b {
  left: 47% !important;
  top: 56% !important;
  width: 22% !important;
  transform: rotate(12deg) !important;
}

.logistics-belt.belt-c {
  left: 69% !important;
  bottom: 22% !important;
  width: 18% !important;
}

.logistics-station {
  width: clamp(92px, 10vw, 122px) !important;
  min-height: 96px;
  padding: 13px 10px 10px !important;
  border-radius: 18px !important;
}

.logistics-station em {
  position: absolute;
  top: 7px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(98, 180, 255, .15);
  color: #80cfff;
  font-size: .55rem;
  font-style: normal;
  font-weight: 1000;
}

.logistics-station span {
  font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
}

.logistics-station.inspect {
  left: 39% !important;
  top: 24% !important;
}

.logistics-station.storage {
  left: 57% !important;
  top: 47% !important;
}

.logistics-station.packing {
  right: 8% !important;
  bottom: 23% !important;
}

.logistics-workers {
  left: 4% !important;
  bottom: 5% !important;
  max-width: 62% !important;
  gap: 4px !important;
  padding: 8px 10px !important;
}

.logistics-workers i {
  font-size: 1rem !important;
}

.logistics-workers b {
  font-size: .7rem !important;
}

.logistics-stage-card,
.logistics-inventory-panel {
  width: 100%;
  padding: 16px !important;
  border-radius: 18px !important;
}

.logistics-stage-card {
  grid-template-columns: minmax(0, 1fr);
}

.logistics-stage-card > div:first-child {
  align-items: center !important;
}

.logistics-stage-card h3,
.logistics-inventory-panel h3 {
  font-size: 1.08rem !important;
}

.logistics-stage-card p,
.logistics-staff-card p {
  font-size: .76rem !important;
  line-height: 1.55 !important;
}

.logistics-inventory-panel {
  gap: 12px !important;
  border-color: rgba(255, 217, 108, .24) !important;
  background:
    radial-gradient(circle at 95% 0, rgba(255, 217, 108, .1), transparent 28%),
    linear-gradient(150deg, rgba(88, 68, 23, .2), rgba(255, 255, 255, .025)) !important;
}

.logistics-inventory-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.logistics-inventory-stats span {
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, .055);
}

.logistics-inventory-stats small {
  font-size: .62rem !important;
}

.logistics-inventory-stats b {
  margin-top: 4px !important;
  font-size: .9rem !important;
}

.logistics-staff-card {
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

.logistics-team-summary > div small,
.logistics-team-summary > div b {
  display: block;
}

.logistics-team-summary > div small {
  color: #8fb0c4;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .1em;
}

.logistics-team-summary > div b {
  margin-top: 3px;
  font-size: 1rem;
}

.logistics-team-summary > strong {
  color: #79edc4;
  font-size: .78rem;
  text-align: right;
}

.logistics-team-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.logistics-team-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5aa9e6, #65e1b2, #ffd96c);
  box-shadow: 0 0 14px rgba(101, 225, 178, .26);
}

.logistics-staff-card > button {
  width: 100%;
  min-height: 48px;
  font-size: .8rem;
}

@container (max-width: 620px) {
  .logistics-flow-label {
    display: none;
  }

  .logistics-building-label {
    font-size: .7rem !important;
  }

  .logistics-truck span {
    font-size: 2.8rem !important;
  }

  .logistics-truck.inbound {
    left: 2% !important;
    top: 30% !important;
  }

  .logistics-truck.outbound {
    right: 1% !important;
    bottom: 4% !important;
  }

  .logistics-belt.belt-a {
    left: 16% !important;
    top: 39% !important;
    width: 27% !important;
  }

  .logistics-belt.belt-b {
    left: 39% !important;
    top: 52% !important;
    width: 25% !important;
    transform: rotate(28deg) !important;
  }

  .logistics-belt.belt-c {
    left: 53% !important;
    bottom: 25% !important;
    width: 25% !important;
  }

  .logistics-station {
    width: 82px !important;
    min-height: 83px;
    padding: 12px 6px 8px !important;
  }

  .logistics-station span {
    font-size: 1.55rem !important;
  }

  .logistics-station small {
    font-size: .5rem !important;
  }

  .logistics-station.inspect {
    left: 42% !important;
    top: 21% !important;
  }

  .logistics-station.storage {
    left: 29% !important;
    top: 54% !important;
  }

  .logistics-station.packing {
    right: 7% !important;
    bottom: 24% !important;
  }

  .logistics-workers {
    max-width: 66% !important;
  }
}

@media (max-width: 760px) {
  .work-helper-entry .eyebrow,
  .logistics-entry-card .eyebrow {
    font-size: .94rem !important;
    letter-spacing: .06em !important;
  }

  dialog.logistics-dialog {
    width: calc(100vw - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    padding: 18px !important;
    border-radius: 15px !important;
  }

  dialog.logistics-dialog.has-dialog-back {
    padding-top: 60px !important;
  }

  dialog.logistics-dialog #dialogText {
    font-size: .82rem !important;
  }

  .logistics-topbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .logistics-map-panel {
    padding: 10px;
    border-radius: 16px;
  }

  .logistics-map-head,
  .logistics-inventory-title,
  .logistics-team-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .logistics-speed-badge,
  .logistics-inventory-title > b {
    white-space: normal;
  }

  .logistics-warehouse {
    min-height: 360px !important;
    aspect-ratio: auto;
  }

  .logistics-inventory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .logistics-team-summary > strong {
    text-align: left;
  }
}

@media (max-width: 430px) {
  .work-helper-entry .eyebrow,
  .logistics-entry-card .eyebrow {
    font-size: .9rem !important;
  }

  dialog.logistics-dialog {
    padding: 14px !important;
  }

  .logistics-topbar article {
    padding: 10px !important;
  }

  .logistics-topbar small {
    font-size: .57rem !important;
  }

  .logistics-topbar b {
    font-size: .82rem !important;
  }

  .logistics-warehouse {
    min-height: 340px !important;
  }

  .logistics-belt {
    height: 36px !important;
  }

  .logistics-station {
    width: 74px !important;
    min-height: 77px;
  }

  .logistics-station em {
    width: 17px;
    height: 17px;
    font-size: .48rem;
  }

  .logistics-truck span {
    font-size: 2.45rem !important;
  }

  .logistics-workers i:nth-of-type(n + 7) {
    display: none;
  }

  .logistics-inventory-stats span {
    padding: 10px !important;
  }

  .logistics-skill-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Im Bereitschaftszustand stehen noch keine Lkw in der Karte. */
.logistics-warehouse.stage-idle .logistics-truck {
  opacity: 0 !important;
  pointer-events: none;
}

/* Inventar-Touch-Bugfix, Partnerrahmen & kompakte Beschriftungen · 2026-07-21 */
/* Ninas innere Umrandung ist vollständig entfernt. Nur der äußere Hauptkarten-Rahmen reagiert weiter. */
.portrait-avatar-wrap.with-partner .portrait-partner-quick,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:hover,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus-visible,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:active {
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.portrait-partner-outline,
.portrait-partner-quick:hover .portrait-partner-outline,
.portrait-partner-quick:focus-visible .portrait-partner-outline,
.portrait-partner-quick:active .portrait-partner-outline {
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
}
.portrait-partner-quick:hover,
.portrait-partner-quick:focus-visible,
.portrait-partner-quick:active {
  transform: translateY(-1px) !important;
  filter: none !important;
}

/* Das permanente Benutzen-/Verkaufen-Feld entfällt. Aktionen erscheinen direkt auf dem angetippten Slot. */
.inventory-game-layout {
  grid-template-columns: 205px minmax(0, 1fr) !important;
  grid-template-areas: "character storage" !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
.inventory-detail-column {
  display: none !important;
}
.inventory-slot[draggable="true"] {
  cursor: grab;
}
.inventory-slot[draggable="true"]:active {
  cursor: grabbing;
}
.inventory-slot:focus-visible {
  outline: 2px solid rgba(240,207,93,.78);
  outline-offset: 2px;
}
.inventory-slot.actions-open {
  border-color: rgba(240,207,93,.8) !important;
  box-shadow: 0 0 0 3px rgba(240,207,93,.12), 0 12px 25px rgba(0,0,0,.32) !important;
  transform: translateY(-2px) !important;
}
.inventory-slot-actions {
  position: absolute;
  inset: 4px;
  z-index: 12;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(240,207,93,.34);
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(10,25,20,.98), rgba(3,10,8,.98));
  box-shadow: 0 12px 28px rgba(0,0,0,.42);
  cursor: default;
}
.inventory-slot-actions[hidden] {
  display: none !important;
}
.inventory-slot-actions button {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 5px 4px;
  border-radius: 7px;
  font-size: .54rem;
  line-height: 1.08;
  white-space: normal;
  touch-action: manipulation;
}
.inventory-slot-only {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 6px;
  border-radius: 8px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  font-size: .54rem;
  font-weight: 900;
  text-align: center;
}
.inventory-touch-sorting .inventory-slot-actions {
  pointer-events: none;
}
.inventory-touch-sorting .character-hub-content {
  overscroll-behavior: contain;
  scroll-behavior: auto;
}

/* Kurze Statusbegriffe passen auch auf schmale Handy-Displays. */
.partner-mini-meters span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

@media (max-width: 820px) {
  .inventory-game-layout {
    grid-template-columns: 175px minmax(0, 1fr) !important;
  }
}

@media (max-width: 620px) {
  .inventory-game-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "character"
      "storage" !important;
    grid-template-rows: none !important;
    height: auto !important;
  }
  .inventory-character-column,
  .inventory-storage-column {
    height: auto !important;
  }
  .inventory-slot-actions {
    inset: 3px;
    gap: 4px;
    padding: 4px;
  }
  .inventory-slot-actions button {
    min-height: 30px;
    font-size: .58rem;
  }
  .character-hub-nav .mini-button,
  .character-overview-nav .mini-button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Die kurzen Partnerwerte bleiben vollständig sichtbar statt abgeschnitten zu werden. */
.portrait-partner-quick small em {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.02 !important;
}
.portrait-partner-quick small em span {
  display: block;
  overflow: visible;
  white-space: nowrap;
}
.character-partner-card .partner-mini-meters {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.character-partner-card .partner-mini-meters span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap !important;
  font-size: .5rem;
}

/* Immobilienverkauf, freie Inventarplätze und Mengenbenutzung · 2026-07-21 */
.inventory-slot.empty {
  cursor: default;
  touch-action: pan-y;
}
.inventory-slot.empty.drag-sort-target {
  opacity: 1;
  border-style: solid;
  background: linear-gradient(150deg, rgba(113,239,189,.15), rgba(0,0,0,.2));
}
.inventory-drag-amount-indicator {
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: max(14px, env(safe-area-inset-top));
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  padding: 9px 14px;
  border: 1px solid rgba(240,207,93,.58);
  border-radius: 999px;
  color: #fff4b8;
  background: rgba(7,18,14,.96);
  box-shadow: 0 12px 32px rgba(0,0,0,.42), 0 0 0 3px rgba(240,207,93,.1);
  font-size: .72rem;
  font-weight: 1000;
  text-align: center;
  pointer-events: none;
}
.inventory-use-choice-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(7px);
}
.inventory-use-choice-card {
  width: min(360px, 100%);
  display: grid;
  gap: 9px;
  padding: 18px;
  border: 1px solid rgba(113,239,189,.3);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(24,51,42,.99), rgba(5,14,11,.99));
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
  text-align: center;
}
.inventory-use-choice-card h3,
.inventory-use-choice-card p {
  margin: 0;
}
.inventory-use-choice-card p {
  color: rgba(255,255,255,.68);
  font-size: .76rem;
  line-height: 1.45;
}
.inventory-use-choice-card button {
  width: 100%;
  min-height: 44px;
}
.inventory-use-choice-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(240,207,93,.28);
  border-radius: 18px;
  background: rgba(240,207,93,.08);
  font-size: 2rem;
}
.property-sale-actions {
  display: grid !important;
  grid-template-columns: 44px minmax(96px, 1fr);
  gap: 7px;
  align-items: stretch;
}
.property-sale-actions button {
  min-width: 0;
}
@media (max-width: 620px) {
  .inventory-use-choice-card {
    padding: 15px;
    border-radius: 17px;
  }
  .inventory-use-choice-card button {
    min-height: 48px;
    font-size: .82rem;
  }
  .property-home-actions {
    grid-template-columns: 1fr;
  }
  .property-sale-actions {
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr);
  }
}
.owned-property-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: min(260px, 100%);
}
.owned-property-actions button {
  min-width: 0;
}
@media (max-width: 620px) {
  .owned-property-card {
    grid-template-columns: 1fr !important;
  }
  .owned-property-actions {
    width: 100%;
  }
}


/* Partner-Umrandung endgültig bereinigt · 2026-07-21 */
.portrait-partner-outline,
.portrait-partner-quick:hover .portrait-partner-outline,
.portrait-partner-quick:focus-visible .portrait-partner-outline,
.character-partner-outline,
.character-partner-card:hover .character-partner-outline,
.character-partner-card:focus-visible .character-partner-outline {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.character-partner-card {
  background: transparent !important;
  box-shadow: none !important;
}

/* Eigener Shop, Gefahr und Online-Marktplatz · 2026-07-21 */
.player-shop-dialog {
  width: min(1040px, 96vw);
  max-height: min(920px, 94vh);
}
.player-shop-root { display: grid; gap: 12px; }
.player-shop-nav {
  position: static;
  top: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(8,24,19,.96);
  backdrop-filter: blur(12px);
}
.player-shop-nav button { min-height: 42px; white-space: normal; }
.player-shop-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.player-shop-status-grid > article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,.055), rgba(0,0,0,.18));
}
.player-shop-status-grid small,
.player-shop-section-head small,
.player-shop-listing small,
.player-shop-stock-card small,
.player-shop-online-card small,
.player-shop-create small,
.player-shop-listing-form > small {
  color: #ffe478;
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .07em;
}
.player-shop-status-grid strong { overflow: hidden; font-size: 1.02rem; text-overflow: ellipsis; }
.player-shop-status-grid span { color: var(--muted); font-size: .66rem; line-height: 1.35; }
.player-shop-online-state.online strong { color: #78efbc; }
.player-shop-online-state.error strong { color: #ff887d; }
.player-shop-danger-card { grid-column: 1 / -1; }
.player-shop-danger-card > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.player-shop-danger-track {
  height: 15px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
}
.player-shop-danger-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54d889, #e7cb58 52%, #ef675f 78%, #c52a42);
  box-shadow: 0 0 18px rgba(239,103,95,.25);
}
.player-shop-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 3px 2px;
}
.player-shop-section-head h2,
.player-shop-section-head p,
.player-shop-create h2,
.player-shop-create p,
.player-shop-listing h3,
.player-shop-listing p,
.player-shop-stock-card h3,
.player-shop-stock-card p,
.player-shop-online-card h3,
.player-shop-online-card p,
.player-shop-empty h3,
.player-shop-empty p { margin: 0; }
.player-shop-section-head p,
.player-shop-create p,
.player-shop-listing p,
.player-shop-stock-card p,
.player-shop-online-card p,
.player-shop-empty p { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.player-shop-listings,
.player-shop-online-grid { display: grid; gap: 9px; }
.player-shop-listing,
.player-shop-online-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(116,238,192,.18);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(116,238,192,.065), rgba(0,0,0,.17));
}
.player-shop-listing.illegal,
.player-shop-online-card.illegal,
.player-shop-stock-card.illegal {
  border-color: rgba(239,103,95,.32);
  background: linear-gradient(145deg, rgba(239,103,95,.095), rgba(42,6,13,.28));
}
.player-shop-item-icon,
.player-shop-listing > span,
.player-shop-online-card > span,
.player-shop-stock-card > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  font-size: 1.45rem;
}
.player-shop-listing-meta,
.player-shop-online-card > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.player-shop-listing-meta b,
.player-shop-online-card > div > div b,
.player-shop-online-card > div > div strong {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  font-size: .65rem;
}
.player-shop-stock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.player-shop-stock-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
.player-shop-stock-card button { grid-column: 1 / -1; width: 100%; }
.player-shop-empty {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 190px;
  padding: 22px;
  border: 1px dashed rgba(255,255,255,.17);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  text-align: center;
}
.player-shop-empty > span { font-size: 2.3rem; }
.player-shop-create { display: grid; gap: 13px; }
.player-shop-create-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(255,220,91,.24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,220,91,.1), rgba(116,238,192,.07));
}
.player-shop-create-hero > span { font-size: 3rem; }
.player-shop-create > label,
.player-shop-listing-form label { display: grid; gap: 6px; font-weight: 850; }
.player-shop-create input,
.player-shop-listing-form input[type="number"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 11px;
  color: var(--text);
  background: rgba(0,0,0,.25);
  font: inherit;
}
.player-shop-create-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.player-shop-create-rules span {
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  font-size: .72rem;
  font-weight: 800;
}
.player-shop-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(1,5,4,.82);
  backdrop-filter: blur(9px);
}
.player-shop-listing-form {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(430px, 96vw);
  max-height: 92vh;
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  background: linear-gradient(155deg, #193128, #0a1511 70%);
  box-shadow: 0 25px 80px rgba(0,0,0,.62);
}
.player-shop-form-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.1);
  font-size: 1.4rem;
  cursor: pointer;
}
.player-shop-form-icon { font-size: 2.5rem; }
.player-shop-listing-form h3,
.player-shop-listing-form p { margin: 0; }
.player-shop-online-toggle { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.player-shop-online-toggle input { width: 20px; height: 20px; }
.player-shop-risk-warning,
.player-shop-good-warning {
  padding: 10px;
  border: 1px solid rgba(239,103,95,.24);
  border-radius: 11px;
  color: #ffb1aa;
  background: rgba(239,103,95,.08);
  font-size: .69rem;
  line-height: 1.45;
}
.player-shop-good-warning { border-color: rgba(116,238,192,.22); color: #9ff0cf; background: rgba(116,238,192,.07); }
.player-shop-entry-card { border-color: rgba(126,182,255,.2); }
.player-shop-entry-card.is-created { border-color: rgba(116,238,192,.22); }

@media (max-width: 760px) {
  .player-shop-dialog { width: min(100vw - 10px, 720px); padding: 12px; }
  .player-shop-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-shop-stock-grid { grid-template-columns: 1fr; }
  .player-shop-listing,
  .player-shop-online-card { grid-template-columns: auto minmax(0, 1fr); }
  .player-shop-listing > button,
  .player-shop-online-card > button { grid-column: 1 / -1; width: 100%; min-height: 42px; }
}
@media (max-width: 460px) {
  .player-shop-nav { gap: 4px; padding: 5px; }
  .player-shop-nav button { min-height: 45px; padding: 6px 3px; font-size: .66rem; }
  .player-shop-status-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .player-shop-status-grid > article { padding: 9px; }
  .player-shop-danger-card { grid-column: 1 / -1; }
  .player-shop-section-head { align-items: stretch; flex-direction: column; }
  .player-shop-section-head > button { width: 100%; }
  .player-shop-create-rules { grid-template-columns: 1fr; }
  .player-shop-listing,
  .player-shop-online-card,
  .player-shop-stock-card { gap: 7px; padding: 9px; }
  .player-shop-listing > span,
  .player-shop-online-card > span,
  .player-shop-stock-card > span { width: 40px; height: 40px; font-size: 1.2rem; }
}


/* Inventar-, Trading- und Handy-Raster-Bugfix · 2026-07-21 */
@media (min-width: 621px) {
  .inventory-avatar-drop {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    align-items: start !important;
    padding-top: 26px !important;
  }
  .inventory-avatar-drop > .avatar-card {
    align-self: start !important;
    margin-top: 4px;
  }
  .inventory-avatar-drop > b,
  .inventory-avatar-drop > small {
    align-self: start !important;
  }
}

@media (max-width: 620px) {
  .inventory-avatar-drop > .avatar-card {
    align-self: start !important;
  }
}

.trading-history-head {
  margin-top: 8px;
}

.device-finance-card .trading-history-remove {
  min-width: 34px;
  width: 34px;
  padding: 6px;
  font-size: 1rem;
  line-height: 1;
}

/* Shop-Kosten, Großhandel, Lager und endgültiger Nina-Rahmen-Fix · 2026-07-21 */
/* Nina besitzt auf dem Standardbildschirm keinerlei eigenen Rahmen oder Innen-Layer. */
.portrait-avatar-wrap.with-partner .portrait-partner-quick,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:hover,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus-visible,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:active,
.portrait-avatar-wrap.with-partner .portrait-partner-figure,
.portrait-avatar-wrap.with-partner .portrait-partner-figure:hover,
.portrait-avatar-wrap.with-partner .portrait-partner-figure:focus,
.portrait-avatar-wrap.with-partner .portrait-person-figure,
.portrait-avatar-wrap.with-partner .portrait-person-figure::before,
.portrait-avatar-wrap.with-partner .portrait-person-figure::after {
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
}
.portrait-avatar-wrap.with-partner .portrait-partner-quick {
  isolation: auto !important;
  overflow: visible !important;
}

/* Die Navigation bleibt am Anfang des Inhalts und folgt beim Scrollen nicht mehr mit. */
.player-shop-nav {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  backdrop-filter: none;
}

.player-shop-wholesale-quick,
.player-shop-wholesale-summary {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(255, 220, 91, .23);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 220, 91, .08), rgba(116, 238, 192, .055));
}
.player-shop-wholesale-quick {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.player-shop-wholesale-quick h2,
.player-shop-wholesale-quick p,
.player-shop-wholesale-summary p,
.player-shop-wholesale-card h3,
.player-shop-wholesale-card p,
.player-shop-warehouse-stock p {
  margin: 0;
}
.player-shop-wholesale-quick small,
.player-shop-wholesale-summary small,
.player-shop-wholesale-card small,
.player-shop-warehouse-stock small {
  color: #ffe478;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .06em;
}
.player-shop-wholesale-quick p,
.player-shop-wholesale-summary span,
.player-shop-wholesale-card p,
.player-shop-warehouse-stock p {
  color: var(--muted);
  font-size: .71rem;
  line-height: 1.45;
}
.player-shop-wholesale-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.player-shop-wholesale-summary > article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(0,0,0,.16);
}
.player-shop-wholesale-summary > button {
  grid-column: 1 / -1;
  width: 100%;
}
.player-shop-storage-track {
  height: 11px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
}
.player-shop-storage-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #74eec0, #ffe478);
}
.player-shop-wholesale-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.player-shop-wholesale-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.16));
}
.player-shop-wholesale-card > span {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  font-size: 1.35rem;
}
.player-shop-wholesale-card > label {
  display: grid;
  gap: 5px;
  font-size: .69rem;
  font-weight: 900;
}
.player-shop-wholesale-card input {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: var(--text);
  background: rgba(0,0,0,.24);
  font: inherit;
}
.player-shop-wholesale-price {
  display: grid;
  gap: 3px;
  align-content: center;
}
.player-shop-wholesale-price b {
  color: #9ef5d0;
  font-size: .76rem;
}
.player-shop-wholesale-price strong {
  color: #ffe478;
  font-size: 1.02rem;
}
.player-shop-wholesale-card > button {
  grid-column: 1 / -1;
  width: 100%;
}
.player-shop-warehouse-stock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.player-shop-warehouse-stock article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(116,238,192,.16);
  border-radius: 13px;
  background: rgba(116,238,192,.045);
}
.player-shop-warehouse-stock article > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  font-size: 1.2rem;
}
.player-shop-warehouse-stock strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-shop-empty.compact {
  min-height: 120px;
}

@media (max-width: 760px) {
  .player-shop-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .player-shop-wholesale-summary,
  .player-shop-wholesale-grid,
  .player-shop-warehouse-stock {
    grid-template-columns: 1fr;
  }
  .player-shop-wholesale-quick {
    grid-template-columns: 1fr;
  }
  .player-shop-wholesale-quick > button {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .player-shop-nav button {
    min-height: 44px;
    font-size: .65rem;
  }
  .player-shop-wholesale-card {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 9px;
  }
  .player-shop-wholesale-card > span {
    width: 40px;
    height: 40px;
  }
}

/* Zusätzliche Absicherung gegen den alten, über die ganze Portraitspalte gezogenen Partnerrahmen. */
.portrait-avatar-wrap.with-partner .portrait-partner-quick {
  align-self: end !important;
  min-height: 0 !important;
  height: 125px !important;
  max-height: 125px !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.portrait-avatar-wrap.with-partner .portrait-partner-quick::before,
.portrait-avatar-wrap.with-partner .portrait-partner-quick::after,
.portrait-avatar-wrap.with-partner .portrait-partner-figure::before,
.portrait-avatar-wrap.with-partner .portrait-partner-figure::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: none !important;
}
@media (max-width: 560px) {
  .portrait-avatar-wrap.with-partner .portrait-partner-quick {
    height: 112px !important;
    max-height: 112px !important;
  }
}

/* Event-App, Firebase-Login und Online-Status · 2026-07-21 */
.online-account-badge {
  width:min(440px,calc(100% - 28px));
  margin:12px auto 0;
  min-height:46px;
  display:grid;
  grid-template-columns:12px auto 1fr;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:8px 12px;
  background:rgba(9,25,19,.82);
  color:var(--text);
  text-align:left;
}
.online-account-badge > span { width:10px; height:10px; border-radius:50%; background:#d9974d; box-shadow:0 0 0 4px rgba(217,151,77,.12); }
.online-account-badge.online > span { background:#71efbd; box-shadow:0 0 0 4px rgba(113,239,189,.13); }
.online-account-badge b { font-size:.82rem; }
.online-account-badge small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.online-auth-overlay {
  position:fixed;
  inset:0;
  z-index:100100;
  display:none;
  place-items:center;
  padding:18px;
  background:rgba(0,8,6,.82);
  backdrop-filter:blur(10px);
}
.online-auth-overlay.show { display:grid; }
.online-auth-card {
  position:relative;
  width:min(470px,100%);
  max-height:min(760px,calc(100dvh - 24px));
  overflow:auto;
  display:grid;
  gap:13px;
  padding:24px;
  border:1px solid rgba(113,239,189,.24);
  border-radius:22px;
  background:linear-gradient(180deg,#14271f,#0c1c16);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.online-auth-card h2,.online-auth-card p { margin:0; }
.online-auth-copy { color:var(--muted); line-height:1.55; }
.online-auth-close { position:absolute; right:14px; top:14px; }
.online-auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:5px; border-radius:13px; background:rgba(0,0,0,.24); }
.online-auth-tabs button { min-height:42px; border-radius:10px; background:transparent; }
.online-auth-tabs button.active { background:#f6dc7c; color:#1a1609; }
.online-auth-card label { display:grid; gap:6px; color:#dce9e2; font-weight:800; }
.online-auth-card input { min-height:48px; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:0 13px; background:rgba(0,0,0,.25); color:var(--text); font:inherit; }
.online-auth-message { min-height:22px; color:#f4d66e; font-weight:750; }
.online-auth-actions { display:grid; gap:8px; }
.online-auth-card > small { color:var(--muted); line-height:1.45; }
.app-store-icon.app-event { background:linear-gradient(145deg,#48e0aa,#167b68); color:#061a14; }
.device-app-grid [data-device-app="event"] > span { background:linear-gradient(145deg,#4de1ad,#18816c); color:#051812; }
.event-app-empty,.event-app-live { display:grid; gap:12px; }
.event-app-empty { text-align:center; justify-items:center; padding:14px 4px; }
.event-app-logo { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg,#54e6b4,#187a67); color:#061812; font-size:1.55rem; font-weight:1000; box-shadow:0 12px 30px rgba(26,190,145,.2); }
.event-app-empty h4,.event-app-live h4,.event-app-live h5 { margin:0; }
.event-app-empty p,.event-app-live p { margin:0; }
.event-app-feature-grid { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.event-app-feature-grid span { padding:9px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(255,255,255,.035); font-size:.72rem; }
.event-app-live > header { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px; border:1px solid rgba(113,239,189,.17); border-radius:15px; background:rgba(113,239,189,.06); }
.event-app-live > header > b { align-self:start; padding:5px 8px; border-radius:999px; background:rgba(244,214,110,.14); color:#f4d66e; font-size:.68rem; }
.event-app-description { color:var(--muted); line-height:1.5; }
.event-app-task,.event-app-rewards,.event-app-progress,.event-app-winners { display:grid; gap:8px; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(0,0,0,.18); }
.event-app-task small { color:#71efbd; font-weight:900; letter-spacing:.08em; }
.event-app-task strong { line-height:1.45; }
.event-app-task p { color:var(--muted); }
.event-app-rewards > div { display:grid; gap:6px; }
.event-app-rewards span,.event-app-winners span { display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:9px; background:rgba(255,255,255,.045); }
.event-app-rewards > small { color:var(--muted); }
.event-app-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.event-app-meta span { display:grid; gap:3px; padding:9px; border:1px solid rgba(255,255,255,.07); border-radius:11px; text-align:center; }
.event-app-meta small { color:var(--muted); font-size:.62rem; }
.event-app-meta b { font-size:.84rem; }
.event-app-progress textarea { min-height:82px; resize:vertical; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:9px; background:rgba(0,0,0,.24); color:var(--text); font:inherit; }
.event-join-button { min-height:48px; }
@media (max-width:520px) {
  .online-auth-card { padding:18px 14px; border-radius:18px; }
  .event-app-live > header { grid-template-columns:46px minmax(0,1fr); }
  .event-app-live > header > b { grid-column:1/-1; justify-self:start; }
  .event-app-feature-grid { grid-template-columns:1fr; }
}

/* Shop-Kategorien, Fahrzeuge, Immobilien und heiße Ware · 2026-07-21 */
.player-shop-stock-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:10px;padding:8px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(7,22,17,.72)}
.player-shop-stock-filters button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:5px;min-height:42px;padding:7px 9px;font-size:.69rem;line-height:1.15;white-space:normal}
.player-shop-stock-filters button>span{font-size:1rem}.player-shop-stock-filters button>b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.09);font-size:.65rem}.player-shop-listing-meta{flex-wrap:wrap}
.station-hot-goods-root{display:grid;gap:12px}.station-hot-goods-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:14px;border:1px solid rgba(255,82,105,.2);border-radius:17px;background:linear-gradient(145deg,rgba(36,8,14,.93),rgba(7,20,17,.93))}.station-hot-goods-head>span{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:rgba(255,82,105,.1);font-size:1.7rem}.station-hot-goods-head small,.station-hot-good-card small{color:#ffca67;font-weight:950;letter-spacing:.08em}.station-hot-goods-head h2,.station-hot-goods-head p,.station-hot-good-card h3,.station-hot-good-card p{margin:0}.station-hot-goods-head p,.station-hot-good-card p{color:var(--muted);font-size:.72rem;line-height:1.4}.station-hot-goods-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.station-hot-good-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;padding:11px;border:1px solid rgba(255,82,105,.16);border-radius:15px;background:rgba(15,22,19,.92)}.station-hot-good-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,82,105,.09);font-size:1.25rem}.station-hot-good-card>button{min-width:94px}.station-hot-risk{height:5px;margin-top:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}.station-hot-risk i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f3bd55,#ff5269)}
@media(max-width:760px){.player-shop-stock-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:6px}.player-shop-stock-filters button{min-height:44px;padding:6px;font-size:.66rem}.station-hot-goods-grid{grid-template-columns:1fr}.station-hot-good-card{grid-template-columns:auto minmax(0,1fr)}.station-hot-good-card>button{grid-column:1/-1;width:100%;min-height:42px}}

/* Tägliche Geschenke & tägliche Quests */
.daily-app {
  display: grid;
  gap: 12px;
  width: 100%;
}

.daily-app-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.1);
}

.daily-app-hero > span {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  height: 54px;
  border-radius: 17px;
  font-size: 26px;
  font-weight: 900;
  background: rgba(255,255,255,.12);
}

.daily-app-hero.gifts > span {
  background: linear-gradient(145deg, #ffdc67, #df9220);
  color: #221506;
}

.daily-app-hero.quests > span {
  background: linear-gradient(145deg, #5ff0a4, #198c5d);
  color: #061d13;
}

.daily-app-hero h4,
.daily-app-hero p,
.daily-app-hero small {
  margin: 0;
}

.daily-app-hero h4 {
  font-size: clamp(1.05rem, 4.4vw, 1.45rem);
  line-height: 1.1;
}

.daily-app-hero small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.68);
  line-height: 1.35;
}

.daily-streak-panel {
  display: grid;
  gap: 8px;
  padding: 13px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(12,14,26,.72);
}

.daily-streak-panel.active {
  border-color: rgba(84,232,158,.48);
  box-shadow: 0 0 0 1px rgba(84,232,158,.08) inset;
}

.daily-streak-panel.broken {
  border-color: rgba(255,106,106,.44);
}

.daily-streak-panel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.daily-streak-panel small,
.daily-streak-panel p,
.daily-streak-panel strong {
  margin: 0;
}

.daily-streak-panel p {
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  line-height: 1.45;
}

.daily-streak-panel > strong {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #ffd967;
  font-size: .86rem;
}

.daily-gift-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.daily-gift-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
}

.daily-gift-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.daily-gift-card header b {
  font-size: .68rem;
}

.daily-gift-card header span {
  font-size: 1rem;
}

.daily-gift-card > strong {
  min-height: 2.25em;
  font-size: .69rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.daily-gift-card.today {
  border-color: rgba(255,211,87,.72);
  box-shadow: 0 0 18px rgba(255,194,59,.12);
}

.daily-gift-card.claimed {
  opacity: .68;
  background: rgba(65,193,127,.08);
  border-color: rgba(65,193,127,.27);
}

.daily-gift-card.future {
  opacity: .48;
}

.daily-gift-card.missed {
  border-color: rgba(255,104,104,.28);
}

.daily-gift-card.special {
  grid-column: 1 / -1;
  background: linear-gradient(145deg, rgba(255,203,76,.18), rgba(154,91,255,.13));
  border-color: rgba(255,209,84,.48);
}

.daily-gift-card.special > strong {
  min-height: 0;
  font-size: .9rem;
  color: #ffe59b;
}

.daily-gift-card .mini-button {
  min-height: 30px;
  padding: 5px 4px;
  font-size: .64rem;
}

.daily-quest-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.daily-quest-summary > div {
  min-width: 0;
  padding: 9px 7px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}

.daily-quest-summary small,
.daily-quest-summary b {
  display: block;
}

.daily-quest-summary small {
  color: rgba(255,255,255,.58);
  font-size: .62rem;
  letter-spacing: .08em;
}

.daily-quest-summary b {
  margin-top: 3px;
  font-size: .76rem;
}

.daily-quest-list {
  display: grid;
  gap: 10px;
}

.daily-quest-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

.daily-quest-card.complete {
  border-color: rgba(70,220,145,.5);
  background: rgba(47,178,111,.09);
}

.daily-quest-card.claimed {
  opacity: .72;
}

.daily-quest-card header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.daily-quest-card header > span {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  font-weight: 900;
}

.daily-quest-card h5,
.daily-quest-card header small {
  margin: 0;
}

.daily-quest-card h5 {
  font-size: .95rem;
}

.daily-quest-card header small {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.67);
  line-height: 1.4;
}

.daily-quest-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
}

.daily-quest-progress i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #3bd68e, #abff87);
  transition: width .25s ease;
}

.daily-quest-meta {
  display: grid;
  gap: 3px;
}

.daily-quest-meta b {
  font-size: .83rem;
}

.daily-quest-meta small {
  color: #ffd97a;
  line-height: 1.35;
}

.app-store-icon.app-dailygifts {
  background: linear-gradient(145deg, #ffe47b, #e68b1f);
  color: #241300;
}

.app-store-icon.app-dailyquests {
  background: linear-gradient(145deg, #68f1ae, #16895a);
  color: #041c12;
}

.device-app-grid [data-device-app="dailygifts"] > span {
  background: linear-gradient(145deg, #ffe47b, #e68b1f);
  color: #241300;
}

.device-app-grid [data-device-app="dailyquests"] > span {
  background: linear-gradient(145deg, #68f1ae, #16895a);
  color: #041c12;
}

.device-app-grid [data-device-app="dailygifts"] b,
.device-app-grid [data-device-app="dailyquests"] b {
  font-size: .68rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

@media (min-width: 520px) {
  .daily-gift-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 340px) {
  .daily-gift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .daily-app-hero {
    padding: 11px;
  }
  .daily-app-hero > span {
    flex-basis: 46px;
    height: 46px;
  }
  .daily-gift-card {
    padding: 6px;
  }
  .daily-quest-summary {
    grid-template-columns: 1fr;
  }
  .daily-quest-summary > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .daily-quest-summary b {
    margin-top: 0;
  }
}

/* PWA / Home-Screen-App: sichere Vollbildfläche ohne Safari-Webseitenleisten. */
html {
  width: 100%;
  min-height: 100%;
  background: #07100d;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

button,
[role="button"],
a {
  touch-action: manipulation;
}

@media (display-mode: standalone) {
  html,
  body {
    background: #07100d;
  }

  body {
    min-height: 100dvh;
  }

  .app-shell {
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    box-shadow: none;
  }
}

/* Mobile iPhone 16 Pro / GitHub PWA Fix · 2026-07-22 */
:root{--mobile-vh:1vh}
html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
body{touch-action:pan-y pinch-zoom;-webkit-text-size-adjust:100%}
button,a,input,select,textarea,[role="button"]{touch-action:manipulation}
.mobile-label{display:none}

@media (max-width: 600px){
  html{width:100%;overflow-x:hidden}
  body{width:100%;min-width:0;margin:0;overflow-x:hidden}
  #app,.app-shell,.setup-screen,.game-screen{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
  .desktop-label{display:none!important}.mobile-label{display:inline!important}

  .topbar{box-sizing:border-box;width:100%;max-width:100%;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;gap:10px;overflow:hidden}
  .topbar>div:first-child{min-width:0;flex:1}.topbar h1{font-size:clamp(2rem,11vw,3rem);line-height:1.02;overflow-wrap:anywhere}
  .topbar-actions{flex:0 0 auto;gap:8px}.topbar-text-button{font-size:.88rem;padding:11px 13px;max-width:150px;white-space:normal;line-height:1.05}.topbar .icon-button{width:48px;height:48px}

  .dashboard{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:14px;grid-template-columns:minmax(0,1fr);overflow:visible}
  .status-panel{box-sizing:border-box;width:100%;max-width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1.38fr) minmax(84px,.9fr);gap:8px;padding:0;overflow:visible}
  .portrait,.meters,.phone-shortcut{min-width:0;max-width:100%}
  .portrait{padding:8px}.portrait-job strong{font-size:.85rem;overflow-wrap:anywhere}.portrait-meta{gap:5px}.portrait-badge{min-width:0;padding:7px 4px}.portrait-badge b{font-size:1.35rem}
  .portrait-avatar-wrap{min-height:185px}.portrait-person-figure{max-width:100%}.portrait-avatar-wrap small{font-size:.66rem}
  .health-panel.mini,.portrait-debt{padding:8px}.health-label{gap:4px;font-size:.72rem}
  .meters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;align-content:start}
  .meter,.mini-stat,.home-shortcut{box-sizing:border-box;min-width:0;width:100%;padding:9px 8px}
  .meter>span{display:block;max-width:100%;font-size:clamp(.92rem,4.8vw,1.18rem);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:clip}
  .mini-stat span,.home-shortcut span{font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-stat strong{font-size:1rem}
  .home-shortcut{min-height:96px}.home-shortcut .mobile-label{font-size:.72rem}.home-shortcut b{font-size:1.65rem}
  .phone-shortcut{padding:8px 5px}.phone-shortcut>span,.phone-shortcut strong{font-size:.72rem}.phone-shortcut .phone-shape{max-width:72px}
  .dashboard-tabs{width:100%;grid-template-columns:1fr 1fr;gap:8px}.dashboard-tab{min-width:0;padding:14px 8px}
  .quick-actions{display:flex;flex-wrap:wrap;gap:8px}.quick-actions>*{min-width:0;font-size:.78rem;padding:10px 12px}
  .tab-panel,.daily-list,.feed-list{min-width:0;max-width:100%}

  dialog.character-dialog,dialog.inventory-dialog,#detailDialog.character-dialog,#detailDialog.inventory-dialog{box-sizing:border-box;width:calc(100vw - 18px)!important;max-width:calc(100vw - 18px)!important;max-height:calc(100dvh - 24px)!important;margin:auto;padding:14px!important;overflow-y:auto!important;overflow-x:hidden!important;border-radius:18px}
  .character-dialog .dialog-head,.inventory-dialog .dialog-head{gap:8px;padding-right:80px}.character-dialog .dialog-head h2,.inventory-dialog .dialog-head h2{font-size:1.45rem;line-height:1.1}
  .character-floating-info{right:55px!important;top:12px!important}.character-dialog .dialog-close,.inventory-dialog .dialog-close{right:10px!important;top:10px!important}
  .character-hub{width:100%;max-width:100%;min-width:0;overflow:visible!important}
  .character-overview-card{box-sizing:border-box;width:100%;max-width:100%;padding:14px;overflow:hidden}
  .character-overview-head{display:grid;grid-template-columns:1fr;gap:4px}.character-overview-head h3{font-size:1.2rem}.character-overview-head span{font-size:.9rem}
  .meta-strip.compact{display:flex;flex-wrap:wrap;gap:7px}.meta-strip.compact span{font-size:.72rem;padding:7px 9px}
  .character-overview-body{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;align-items:start}
  .character-avatar-stack{order:2;width:100%;max-width:100%}.character-couple{display:flex;justify-content:center;gap:8px;width:100%}
  .character-person-card{min-width:0;max-width:48%;height:auto!important;min-height:300px;padding:8px}.character-person-figure{display:flex;justify-content:center;max-height:240px;overflow:hidden}.character-person-figure svg,.character-person-figure img{max-height:235px!important;width:auto!important;max-width:100%!important}
  .character-overview-nav,.character-hub-nav{order:1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;width:100%;max-width:100%}
  .character-overview-nav .mini-button,.character-hub-nav .mini-button{min-width:0;width:100%;padding:10px 4px;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .character-hub-content{width:100%;max-width:100%;min-width:0;overflow:visible!important}
  .health-panel{max-width:100%}

  .setup-screen{box-sizing:border-box;padding:0 14px calc(18px + env(safe-area-inset-bottom))}.compact-hero{max-height:42dvh}.start-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%}.start-actions button{width:100%}
  .setup-view,.setup-form{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.field-row{grid-template-columns:1fr!important}

  .support-ticket-card{width:calc(100vw - 18px)!important;max-width:calc(100vw - 18px)!important;max-height:calc(100dvh - 18px)!important}
}

@media (max-width: 390px){
  .dashboard{padding:10px}.status-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 80px;gap:6px}
  .meter>span{font-size:.9rem}.mini-stat strong{font-size:.9rem}.topbar h1{font-size:2.1rem}
  .character-overview-nav,.character-hub-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width: 600px) and (orientation: landscape){
  dialog.character-dialog,dialog.inventory-dialog,#detailDialog.character-dialog,#detailDialog.inventory-dialog{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 14px)!important}
  .character-overview-body{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr)!important}.character-avatar-stack{order:1}.character-overview-nav{order:2;grid-template-columns:repeat(3,minmax(0,1fr))!important}
}


/* 2026-07-22: larger, clearer local map on desktop and mobile */
#world .city-map,
.city-map {
  height: clamp(430px, 62vw, 540px);
  min-height: 430px;
  overflow: hidden;
}
.map-road {
  height: 5px;
  opacity: .92;
}
.map-pin {
  width: 50px;
  height: 50px;
  font-size: 1.08rem;
}
.map-pin span {
  top: 53px;
  padding: 5px 9px;
  font-size: .76rem;
  line-height: 1.05;
  max-width: 135px;
  text-align: center;
}

@media (max-width: 700px) {
  #world .city-map,
  .city-map {
    height: 455px !important;
    min-height: 455px !important;
    margin-inline: 0;
  }
  .map-pin {
    width: 46px;
    height: 46px;
    font-size: 1rem;
  }
  .map-pin span {
    top: 49px;
    font-size: .68rem;
    padding: 4px 7px;
    max-width: 112px;
  }
  .map-road { height: 4px; }

  /* Safari/iPhone: dialogs are always fully inside the visible viewport. */
  #detailDialog,
  dialog:not(.snake-modal) {
    position: fixed !important;
    inset: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #detailDialog::backdrop,
  dialog::backdrop { position: fixed; inset: 0; }
}

@media (max-width: 700px) and (orientation: landscape) {
  #world .city-map,
  .city-map {
    height: min(78dvh, 500px) !important;
    min-height: 350px !important;
  }
}

/* Charakter-/Inventar-Dialog: sofortige, stabile iPhone-Scrollfläche · 2026-07-22 */
@media (max-width: 700px) {
  /* Der Dialog selbst bleibt fest im sichtbaren Bereich. Nur der Inhaltsbereich scrollt. */
  #detailDialog.character-dialog[open],
  #detailDialog.inventory-dialog[open] {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  #detailDialog.character-dialog > #dialogTitle,
  #detailDialog.inventory-dialog > #dialogTitle {
    flex: 0 0 auto;
    margin: 0 0 12px !important;
  }

  #detailDialog.character-dialog > .character-hub,
  #detailDialog.inventory-dialog > .character-hub {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #detailDialog.character-dialog .character-hub-nav,
  #detailDialog.inventory-dialog .character-hub-nav {
    position: relative;
    z-index: 4;
    flex: 0 0 auto !important;
  }

  #detailDialog.character-dialog .character-hub-content,
  #detailDialog.inventory-dialog .character-hub-content {
    display: grid !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    padding: 2px 3px max(22px, env(safe-area-inset-bottom)) 0 !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: auto !important;
    scroll-padding-top: 8px;
    scrollbar-gutter: stable;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-anchor: none;
  }

  /* Safari berechnete wegen content-visibility die Scrollhöhe erst verspätet.
     Im Charakterfenster wird deshalb alles sofort ausgemessen und gezeichnet. */
  #detailDialog.character-dialog .character-hub-content .item-card,
  #detailDialog.character-dialog .character-hub-content .action-card,
  #detailDialog.character-dialog .character-hub-content .market-card,
  #detailDialog.character-dialog .character-hub-content .skill-node,
  #detailDialog.character-dialog .character-hub-content .inventory-slot,
  #detailDialog.inventory-dialog .character-hub-content .item-card,
  #detailDialog.inventory-dialog .character-hub-content .action-card,
  #detailDialog.inventory-dialog .character-hub-content .market-card,
  #detailDialog.inventory-dialog .character-hub-content .skill-node,
  #detailDialog.inventory-dialog .character-hub-content .inventory-slot {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: auto !important;
  }

  /* Keine zweite, verzögert berechnete Scrollfläche im Inventar. */
  #detailDialog.inventory-dialog .inventory-slot-grid {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
  #detailDialog.inventory-dialog .inventory-detail-column {
    position: static !important;
    bottom: auto !important;
  }

  /* Karten und ihre Aktionsbuttons dürfen am unteren Rand nicht abgeschnitten werden. */
  #detailDialog.character-dialog .character-hub-content > :last-child,
  #detailDialog.inventory-dialog .character-hub-content > :last-child {
    margin-bottom: 8px !important;
  }
  #detailDialog.character-dialog .character-hub-content .item-card,
  #detailDialog.inventory-dialog .character-hub-content .item-card {
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Tattoo-Startansicht kompakter: Figur und Auswahl sind sofort gemeinsam erreichbar. */
  #detailDialog.character-dialog .character-studio.tattoo-studio {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }
  #detailDialog.character-dialog .tattoo-studio .avatar-card,
  #detailDialog.character-dialog .tattoo-studio .avatar-card.large {
    min-height: 158px !important;
    height: 158px !important;
  }
  #detailDialog.character-dialog .tattoo-studio .avatar-svg,
  #detailDialog.character-dialog .tattoo-studio svg {
    width: auto !important;
    max-width: 100% !important;
    height: 150px !important;
    max-height: 150px !important;
  }

  /* Berührungen werden direkt an die Scrollfläche gegeben, nicht an den Hintergrund. */
  #detailDialog.character-dialog .character-hub-content *,
  #detailDialog.inventory-dialog .character-hub-content * {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 370px) {
  #detailDialog.character-dialog .character-studio.tattoo-studio {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }
  #detailDialog.character-dialog .tattoo-studio .avatar-card,
  #detailDialog.character-dialog .tattoo-studio .avatar-card.large {
    height: 140px !important;
    min-height: 140px !important;
  }
  #detailDialog.character-dialog .tattoo-studio .avatar-svg,
  #detailDialog.character-dialog .tattoo-studio svg {
    height: 132px !important;
    max-height: 132px !important;
  }
}

/* Handy-Apps & Games: kompakte iPhone-Ansicht, Touch-Steuerung und stabile Scrollbereiche · 2026-07-22 */
@media (max-width: 700px) {
  /* Der Hintergrund bleibt gesperrt, aber echte Scrollflächen in Spiele-Menüs dürfen reagieren. */
  body.snake-open {
    overflow: hidden !important;
    touch-action: manipulation !important;
  }

  .snake-modal {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    touch-action: manipulation !important;
  }

  .snake-canvas,
  .snake-controls,
  .racer-controls {
    touch-action: none !important;
  }

  /* Smartphone-Inhalt darf niemals seitlich aus dem Display laufen. */
  .device-phone .device-frame,
  .device-phone .device-screen,
  .device-phone .device-app-view,
  .device-phone .daily-app {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .device-phone .device-app-view {
    padding: 8px;
  }

  /* Tägliche Geschenke: gleiche 3er-Kalenderoptik, nur enger für das iPhone. */
  .device-phone .daily-gifts-app {
    gap: 8px;
  }

  .device-phone .daily-app-hero {
    gap: 8px;
    padding: 9px;
    border-radius: 15px;
  }

  .device-phone .daily-app-hero > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 1.2rem;
  }

  .device-phone .daily-app-hero h4 {
    font-size: .98rem;
    line-height: 1.05;
  }

  .device-phone .daily-app-hero .eyebrow {
    font-size: .58rem;
  }

  .device-phone .daily-app-hero small {
    font-size: .66rem;
    line-height: 1.24;
  }

  .device-phone .daily-streak-panel {
    gap: 5px;
    padding: 9px;
    border-radius: 13px;
  }

  .device-phone .daily-streak-panel > div {
    gap: 5px;
  }

  .device-phone .daily-streak-panel small,
  .device-phone .daily-streak-panel b,
  .device-phone .daily-streak-panel strong {
    font-size: .64rem;
  }

  .device-phone .daily-streak-panel p {
    font-size: .62rem;
    line-height: 1.3;
  }

  .device-phone .daily-gift-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100%;
    min-width: 0;
  }

  .device-phone .daily-gift-card {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    gap: 4px;
    padding: 5px;
    border-radius: 10px;
    overflow: hidden;
  }

  .device-phone .daily-gift-card header {
    min-width: 0;
    gap: 2px;
  }

  .device-phone .daily-gift-card header b {
    min-width: 0;
    font-size: .57rem;
    line-height: 1;
    white-space: nowrap;
  }

  .device-phone .daily-gift-card header span {
    flex: 0 0 auto;
    font-size: .72rem;
    line-height: 1;
  }

  .device-phone .daily-gift-card > strong {
    min-width: 0;
    min-height: 2.35em;
    font-size: .56rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .device-phone .daily-gift-card .mini-button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0 !important;
    min-height: 26px;
    padding: 4px 1px;
    border-radius: 8px;
    font-size: .54rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .device-phone .daily-gift-card.special {
    grid-column: 1 / -1;
  }

  /* Tägliche Quests: kompakte Kopfzeile und lesbare Karten ohne Überlauf. */
  .device-phone .daily-quests-app {
    gap: 8px;
  }

  .device-phone .daily-quest-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px;
  }

  .device-phone .daily-quest-summary > div {
    display: grid !important;
    place-items: center;
    min-width: 0;
    padding: 7px 3px;
    border-radius: 11px;
  }

  .device-phone .daily-quest-summary small {
    font-size: .52rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  .device-phone .daily-quest-summary b {
    margin-top: 2px !important;
    font-size: .65rem;
    line-height: 1.05;
    white-space: nowrap;
  }

  .device-phone .daily-quest-list {
    gap: 7px;
  }

  .device-phone .daily-quest-card {
    gap: 7px;
    padding: 10px;
    border-radius: 14px;
  }

  .device-phone .daily-quest-card header {
    gap: 8px;
  }

  .device-phone .daily-quest-card header > span {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: .72rem;
  }

  .device-phone .daily-quest-card h5 {
    font-size: .8rem;
    line-height: 1.15;
  }

  .device-phone .daily-quest-card header small {
    font-size: .66rem;
    line-height: 1.25;
  }

  .device-phone .daily-quest-progress {
    height: 7px;
  }

  .device-phone .daily-quest-meta b {
    font-size: .7rem;
  }

  .device-phone .daily-quest-meta small {
    font-size: .64rem;
    line-height: 1.22;
  }

  .device-phone .daily-quest-card .mini-button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 6px;
    font-size: .7rem;
  }

  /* Icon-Man: Auswahl/Shop ist sofort und flüssig scrollbar. */
  .iconman-window {
    display: flex !important;
    flex-direction: column;
    width: min(100%, 620px);
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    min-height: 0;
    overflow: hidden !important;
  }

  .iconman-window > .snake-head,
  .iconman-window > .iconman-stats,
  .iconman-window > .snake-message {
    flex: 0 0 auto;
  }

  .iconman-menu {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 1px 3px max(18px, env(safe-area-inset-bottom)) 0;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    scrollbar-gutter: stable;
  }

  .iconman-panel {
    min-width: 0;
    padding: 8px;
  }

  .iconman-levels,
  .iconman-shop,
  .iconman-upgrades {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .iconman-levels button,
  .iconman-shop button,
  .iconman-upgrades button {
    min-width: 0;
  }

  .iconman-canvas:not(.hidden) {
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 245px);
    aspect-ratio: 570 / 630;
  }

  .iconman-controls:not(.hidden) {
    flex: 0 0 auto;
  }

  .iconman-skin-box {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Street Racer: große Auswahl auf dem Handy einklappbar, Spielfeld bleibt sichtbar. */
  .racer-window {
    display: flex !important;
    flex-direction: column;
    width: min(100%, 520px);
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    min-height: 0;
    overflow: hidden !important;
  }

  .racer-options-toggle {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(126,182,255,.32);
    border-radius: 9px;
    background: rgba(126,182,255,.13);
    color: var(--text);
    font-size: .78rem;
    font-weight: 950;
  }

  .racer-options-panel {
    display: grid;
    flex: 0 0 auto;
    gap: 7px;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 2px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
  }

  .racer-options-panel.collapsed {
    display: none !important;
  }

  .racer-color-select,
  .racer-designs {
    flex: 0 0 auto;
  }

  .racer-designs button {
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px;
    font-size: .67rem;
  }

  .racer-stats {
    flex: 0 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px;
  }

  .racer-stats span {
    padding: 5px 2px;
    font-size: .58rem;
  }

  .racer-stats b {
    font-size: .68rem;
  }

  .racer-canvas {
    flex: 1 1 auto;
    min-height: 210px;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: calc(100dvh - 300px);
    aspect-ratio: 3 / 4;
    align-self: center;
  }

  .racer-controls {
    flex: 0 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px;
  }

  .racer-controls button {
    min-width: 0;
    min-height: 36px;
    padding: 3px;
    font-size: .62rem;
  }

  .racer-window > .snake-message {
    flex: 0 0 auto;
    min-height: 0;
    padding: 6px 8px;
    font-size: .67rem;
  }
}

@media (max-width: 370px) {
  .device-phone .daily-gift-grid {
    gap: 3px !important;
  }
  .device-phone .daily-gift-card {
    padding: 4px;
  }
  .device-phone .daily-gift-card header b,
  .device-phone .daily-gift-card > strong,
  .device-phone .daily-gift-card .mini-button {
    font-size: .5rem;
  }
  .racer-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 701px) {
  .racer-options-toggle {
    display: none;
  }
  .racer-options-panel {
    display: contents;
  }
}

@media (max-width: 700px) {
  /* Vier App-Symbole bleiben vollständig lesbar – auch beim Basic Phone. */
  .device-phone .device-app-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .device-phone .device-app-grid button {
    box-sizing: border-box;
    grid-template-rows: 27px minmax(13px, auto) 10px;
    min-width: 0;
    min-height: 64px;
    max-height: none;
    padding: 6px 2px;
    gap: 3px;
    border-radius: 13px;
  }
  .device-phone .device-app-grid button span {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    font-size: .68rem;
  }
  .device-phone .device-app-grid button b {
    max-width: 100%;
    font-size: .56rem;
    line-height: 1.02;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .device-phone .device-app-grid button small {
    max-width: 100%;
    min-height: 9px;
    font-size: .45rem;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* Finale Mobile-/Online-Stabilisierung · 2026-07-22 */
html, body { max-width: 100%; }
@media (max-width: 700px) {
  html, body { touch-action: pan-y; overflow-x: hidden !important; }
  html.life-overlay-locked, body.life-overlay-locked { overflow: hidden !important; overscroll-behavior: none !important; }
  body.life-overlay-locked { position: fixed !important; left: 0; right: 0; width: 100%; }
  dialog[open], .online-auth-overlay.show, .snake-modal:not(.hidden) { touch-action: none; }
  dialog[open] .character-hub-content,
  dialog[open] .wardrobe-list,
  dialog[open] .device-screen,
  dialog[open] .device-app-view,
  dialog[open] .casino-world-panel-scroll,
  dialog[open] .market-list,
  dialog[open] .dialog-scroll { touch-action: pan-y !important; }
}

/* Dialogbedienung bleibt immer vor dem Inhalt. */
#detailDialog > #closeDialog,
#detailDialog > #dialogBack {
  z-index: 10020 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Freigeschaltete Dashboard-Badges werden nicht mehr angezeigt. */
.shortcut-lock[hidden], .shortcut-lock.unlocked { display: none !important; }

/* Bank ist nicht mehr Teil der Charakter-Navigation: 8 Felder als sauberes Raster. */
.character-hub-nav,
.character-overview-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .character-hub-nav,
  .character-overview-nav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Erfolge: eigenständige vertikale Karten ohne Überlagerungen. */
.achievement-list-clean,
.barber-service-list-clean {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  align-content: start;
}
.achievement-card-clean,
.barber-service-card-clean {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  border: 1px solid rgba(198, 224, 210, .17);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(38, 58, 49, .94), rgba(22, 39, 32, .98));
  overflow: visible;
}
.achievement-card-clean.ready { border-color: rgba(255, 215, 92, .6); box-shadow: inset 0 0 0 1px rgba(255,215,92,.12); }
.achievement-card-clean.claimed { opacity: .72; }
.achievement-copy-clean { min-width: 0; }
.achievement-card-clean h3,
.barber-service-card-clean h3 { margin: 0 0 6px; line-height: 1.15; overflow-wrap: anywhere; }
.achievement-card-clean p,
.barber-service-card-clean p { margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.achievement-card-clean button,
.barber-service-card-clean button { position: static !important; width: auto !important; min-width: 130px; align-self: center; }
@media (max-width: 700px) {
  .achievement-card-clean,
  .barber-service-card-clean { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .achievement-card-clean button,
  .barber-service-card-clean button { width: 100% !important; min-width: 0; margin: 0 !important; }
}

/* Friseur: Titel/Preis und Buchen-Button niemals übereinander. */
.barber-service-card-clean > div { min-width: 0; }

/* Kleiderschrank: Vorschau bleibt fest, ausschließlich die Kleidungsliste scrollt. */
#detailDialog.wardrobe-dialog[open] { overflow: hidden !important; display: flex !important; flex-direction: column; }
#detailDialog.wardrobe-dialog .wardrobe-closet { flex: 1 1 auto; min-height: 0; overflow: hidden !important; }
#detailDialog.wardrobe-dialog .wardrobe-preview { overflow: hidden !important; overscroll-behavior: none; }
#detailDialog.wardrobe-dialog .wardrobe-list { min-height: 0; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  #detailDialog.wardrobe-dialog .wardrobe-closet { display: flex !important; flex-direction: column; gap: 10px; }
  #detailDialog.wardrobe-dialog .wardrobe-preview { flex: 0 0 auto; position: static !important; max-height: 44dvh; }
  #detailDialog.wardrobe-dialog .wardrobe-preview .avatar-svg,
  #detailDialog.wardrobe-dialog .wardrobe-preview svg { max-height: 36dvh !important; height: 36dvh !important; }
  #detailDialog.wardrobe-dialog .wardrobe-list { flex: 1 1 auto; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* Tutorial wieder als kompakte Karte in der Bildschirmmitte. */
#detailDialog.intro-dialog[open] {
  width: min(420px, calc(100vw - 28px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(72dvh, 600px) !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  padding: 22px !important;
  overflow-y: auto !important;
  border-radius: 20px !important;
}
#detailDialog.intro-dialog > .primary-button,
#detailDialog.intro-dialog > .mini-button { display: inline-flex; width: auto; min-width: 110px; margin: 12px 8px 0 0; }

/* Casino-Standorte: der innere Bereich ist auf dem iPhone vollständig scrollbar. */
.casino-world-panel { min-height: 0 !important; }
.casino-world-panel-scroll {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}
@media (max-width: 700px) {
  .casino-world-shell { height: min(78dvh, 740px) !important; min-height: 520px !important; overflow: hidden !important; }
  .casino-world-stage { height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
  .casino-world-panel { inset: 8px !important; height: auto !important; max-height: calc(100% - 16px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
  .casino-world-panel-scroll { flex: 1 1 auto !important; height: auto !important; max-height: none !important; padding-bottom: max(24px, env(safe-area-inset-bottom)) !important; }
}

/* Anmeldung: versteckte Felder bleiben wirklich versteckt. */
.online-auth-card [hidden], .online-auth-name[hidden] { display: none !important; }

/* ========================================================================== */
/* Level, Geburtstag, Leben und stabiler Mobile-Sync · 2026-07-22             */
/* ========================================================================== */

/* Safe-Area nur einmal verwenden: vorher wurde der iPhone-Abstand am Body
   und zusätzlich am Header addiert. */
@media (max-width: 700px) {
  body {
    padding-top: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
  .game-screen {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .topbar {
    top: 0 !important;
    padding-top: max(4px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 10px !important;
  }
  .standalone-app .topbar {
    padding-top: max(2px, env(safe-area-inset-top, 0px)) !important;
  }
}

/* Auf Geräten ohne Notch bleibt ein kompakter, normaler Abstand. */
@supports not (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 700px) {
    .topbar { padding-top: 8px !important; }
  }
}

.portrait-badge[data-open-level-info],
.portrait-badge[data-open-age-info],
.health-panel[data-open-life-info],
.portrait-job {
  cursor: pointer;
}
.portrait-badge[data-open-level-info]:active,
.portrait-badge[data-open-age-info]:active,
.health-panel[data-open-life-info]:active,
.portrait-job:active {
  transform: scale(.98);
}

/* Große Geldwerte bleiben in einer Zeile und werden im Dashboard abgekürzt. */
.mini-stat strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
}
@media (max-width: 700px) {
  .mini-stat strong { font-size: clamp(.78rem, 3.8vw, 1rem) !important; }
  .mini-stat span { text-overflow: ellipsis !important; }
}

/* Level-, Alters-, Lebens- und Stimmungsinfos sind eigenständig scrollbar. */
.profile-info-scroll,
.mood-info-panel,
.life-info-panel,
.level-info-panel,
.age-info-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  min-height: 0;
  max-height: min(68dvh, 680px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  padding: 2px 2px max(18px, env(safe-area-inset-bottom, 0px));
}
.profile-info-card {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(127, 228, 180, .2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(31, 57, 46, .95), rgba(14, 30, 24, .98));
}
.profile-info-card > small,
.profile-info-card div > small {
  color: #83e6b5;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
}
.profile-info-card > strong,
.profile-info-card div > strong {
  color: #fff;
  font-size: 1.18rem;
}
.profile-info-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.profile-info-card.birthday { grid-template-columns: auto 1fr; align-items: center; }
.profile-info-card.birthday > span { font-size: 2.4rem; }
.profile-info-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.profile-info-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #57dca0, #d9f56d);
}
.profile-info-bar.life i { background: linear-gradient(90deg, #ff5674, #ff8f69); }
.profile-tip-list { display: grid; gap: 8px; }
.profile-tip-list h3 { margin: 0 0 2px; }
.profile-tip-list article {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}
.profile-tip-list article > span { color: #6ee3a8; font-weight: 1000; }
.profile-tip-list article div { display: grid; gap: 3px; }
.profile-tip-list article small { color: var(--muted); line-height: 1.4; }

@media (max-width: 700px) {
  #detailDialog:has(.profile-info-scroll),
  #detailDialog:has(.mood-info-panel) {
    overflow: hidden !important;
  }
  .profile-info-scroll,
  .mood-info-panel {
    max-height: calc(100dvh - 190px) !important;
  }
}

/* Smartphone: Business, Trading und Börse zeigen die konkrete Level-Sperre. */
.device-app-grid button small {
  white-space: nowrap;
}
.device-app-grid button.locked small {
  color: #f0c963;
  font-weight: 900;
}

/* Synchronisierungs-Checks dürfen keinen sichtbaren Layoutsprung auslösen. */
html, body, .dashboard, .tab-panel, #detailDialog {
  overflow-anchor: none;
}

/* Stimmungsdialog erhält einen echten internen Scrollbereich. */
.mood-info-panel { padding-right: 4px; }

/* Level-/Alter-Felder bleiben auf PC und Handy eindeutig antippbar. */
.portrait-badge:focus-visible,
.health-panel[data-open-life-info]:focus-visible,
.portrait-job:focus-visible {
  outline: 2px solid #6ee3a8;
  outline-offset: 2px;
}


/* Gesamtfix Scroll, Finster.KL, Dashboard und Kleidung · Version 2026-07-23.2 */
html:not(.life-overlay-locked),
body:not(.life-overlay-locked) {
  overflow-y: auto !important;
  min-height: 100%;
}
.game-screen,
.dashboard,
.tab-panel {
  overflow: visible;
}

#detailDialog[open] {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  scrollbar-gutter: stable;
}
#detailDialog[open]:not(.device-dialog) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#detailDialog[open] > .profile-info-scroll,
#detailDialog[open] > .life-info-panel,
#detailDialog[open] > .mood-info-panel,
#detailDialog[open] > .work-helper-hub,
#detailDialog[open] > .work-info-dashboard,
#detailDialog[open] > .logistics-game {
  max-height: none !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}
dialog.logistics-dialog[open],
dialog.character-dialog[open],
dialog.wardrobe-dialog[open] {
  overflow-y: auto !important;
  touch-action: pan-y !important;
}
dialog.logistics-dialog[open] .logistics-game,
dialog.logistics-dialog[open] [data-logistics-root],
dialog.character-dialog[open] .character-hub,
dialog.character-dialog[open] .character-hub-content {
  max-height: none !important;
  overflow: visible !important;
}

#detailDialog > #closeDialog,
#detailDialog > .character-floating-info {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  line-height: 1 !important;
}
#detailDialog > .character-floating-info {
  right: 70px !important;
}

.device-screen:has(> .device-app-view .finster-app),
.device-screen.finster-host-screen {
  overflow: hidden !important;
  padding: 0 !important;
  touch-action: none !important;
}
.device-app-view:has(> .finster-app) {
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden !important;
}
.device-app-view > .finster-app {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 22px;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.finster-topbar,
.finster-nav {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
}
.finster-content {
  min-height: 0 !important;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-padding-top: 8px;
  scroll-padding-bottom: 12px;
}
.finster-nav {
  position: sticky;
  bottom: 0;
  min-height: 50px;
  padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(0,0,0,.42);
}
.finster-empty {
  min-height: 240px;
  align-content: center;
}

@media (max-width: 700px) {
  .meters .meter > span {
    width: 100%;
    font-size: clamp(.78rem, 3.65vw, .96rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em;
    text-align: left;
  }
  .meters .meter {
    padding-inline: 7px !important;
  }
  .meters .meter progress {
    width: 100%;
  }
  #detailDialog[open] {
    inset: max(6px, env(safe-area-inset-top)) 7px max(6px, env(safe-area-inset-bottom)) 7px !important;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #detailDialog > #closeDialog,
  #detailDialog > .character-floating-info {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
  #detailDialog > .character-floating-info {
    right: 62px !important;
  }
  .device-app-view > .finster-app {
    border-radius: 18px;
  }
}

.avatar-svg .cloth,
.avatar-svg .jacket,
.avatar-svg .shoe {
  stroke-width: 1.6px !important;
  stroke: rgba(5,8,7,.22) !important;
  stroke-linejoin: round;
}
.avatar-svg .jacket {
  stroke-width: 1.8px !important;
}

@media (min-width: 701px) {
  #detailDialog[open]:not(.device-dialog) {
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
  }
  dialog.logistics-dialog[open] {
    max-height: calc(100dvh - 22px) !important;
  }
}


/* Feinschliff Lebenskarte und vollständig abgedeckte Avatar-Kleidung · 2026-07-23.3 */
.profile-info-card.life > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "state value";
  align-items: end;
  gap: 4px 12px;
  min-width: 0;
}
.profile-info-card.life > div:first-child > small { grid-area: label; }
.profile-info-card.life > div:first-child > strong {
  grid-area: state;
  min-width: 0;
  overflow-wrap: anywhere;
}
.profile-info-card.life > div:first-child > b {
  grid-area: value;
  color: #fff;
  font-size: clamp(1.25rem, 5vw, 1.65rem);
  line-height: 1;
  white-space: nowrap;
}
.avatar-svg .cloth,
.avatar-svg .jacket,
.avatar-svg .shoe {
  paint-order: stroke fill;
}


/* ==========================================================================
   JK.Games Shop, Kleidung & Finder Online Fix · Cache 20260723-shop-finder-3
   ========================================================================== */

/* Kaufdialoge bleiben kompakte, mittige Karten statt den gesamten Bildschirm
   mit einer leeren Fläche zu blockieren. */
#detailDialog.purchase-dialog[open] {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: min(560px, calc(100vw - 28px)) !important;
  max-width: min(560px, calc(100vw - 28px)) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: min(78dvh, 690px) !important;
  margin: 0 !important;
  padding: 22px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 22px !important;
}
#detailDialog.purchase-dialog > #dialogTitle {
  margin: 0 72px 2px 0 !important;
  font-size: clamp(1.65rem, 6vw, 2.2rem) !important;
  line-height: 1.08 !important;
}
#detailDialog.purchase-dialog > #dialogText {
  margin: 0 !important;
  max-width: none !important;
  font-size: clamp(.98rem, 3.8vw, 1.16rem) !important;
  line-height: 1.42 !important;
}
#detailDialog.purchase-dialog > .quantity-field {
  display: grid !important;
  grid-template-columns: auto minmax(88px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}
#detailDialog.purchase-dialog > .quantity-field input {
  width: 100% !important;
  min-width: 0 !important;
}
#detailDialog.purchase-dialog > button:not(#closeDialog):not(.dialog-back) {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
#detailDialog.purchase-dialog.device-replacement-dialog {
  max-width: 520px !important;
}
.replacement-device-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid rgba(113, 220, 173, .25);
  border-radius: 18px;
  background: rgba(21, 45, 36, .7);
}
.replacement-device-card strong { font-size: 1.12rem; }
.replacement-device-card span { color: var(--muted, #b9c3bd); }

/* Kleidungslisten: Text, Farbpunkte und Auswahlknopf erhalten getrennte,
   stabile Bereiche und können sich nicht mehr überlagern. */
.clothing-model-card,
.clothing-variant-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}
.clothing-model-card > div,
.clothing-variant-card > div {
  min-width: 0 !important;
}
.clothing-model-card > button,
.clothing-variant-card > button {
  position: static !important;
  align-self: center !important;
  width: auto !important;
  min-width: 112px !important;
  margin: 0 !important;
}
.clothing-swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 9px !important;
}
.clothing-swatches i {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
}

/* Charakter-Startseite: kompletter Körper bis zu den Füßen sichtbar, ohne
   innerhalb der Übersicht nach unten scrollen zu müssen. */
#detailDialog.character-dialog.character-overview-mode[open] {
  overflow: hidden !important;
}
#detailDialog.character-dialog.character-overview-mode .character-hub,
#detailDialog.character-dialog.character-overview-mode .character-hub-content {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
#detailDialog.character-dialog.character-overview-mode .character-overview-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 12px !important;
}
#detailDialog.character-dialog.character-overview-mode .character-overview-head {
  margin: 0 !important;
}
#detailDialog.character-dialog.character-overview-mode .meta-strip.compact {
  margin: 0 !important;
}
#detailDialog.character-dialog.character-overview-mode .character-overview-body {
  min-height: 0 !important;
  height: 100% !important;
  align-content: start !important;
}
#detailDialog.character-dialog.character-overview-mode .character-avatar-stack,
#detailDialog.character-dialog.character-overview-mode .character-couple {
  min-height: 0 !important;
  height: 100% !important;
}
#detailDialog.character-dialog.character-overview-mode .character-person-card {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}
#detailDialog.character-dialog.character-overview-mode .character-person-figure {
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  overflow: hidden !important;
}
#detailDialog.character-dialog.character-overview-mode .character-person-figure .avatar-card,
#detailDialog.character-dialog.character-overview-mode .character-person-figure svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Kleiderschrank: Vorschau bleibt fest, nur die Liste mit vorhandener Kleidung
   scrollt. Dadurch bleibt die Figur vollständig sichtbar. */
#detailDialog.wardrobe-dialog[open] {
  overflow: hidden !important;
}
#detailDialog.wardrobe-dialog .wardrobe-closet {
  display: grid !important;
  grid-template-columns: minmax(250px, .82fr) minmax(300px, 1.18fr) !important;
  gap: 16px !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
#detailDialog.wardrobe-dialog .wardrobe-preview {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
#detailDialog.wardrobe-dialog .wardrobe-preview .avatar-card,
#detailDialog.wardrobe-dialog .wardrobe-preview .avatar-svg {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
#detailDialog.wardrobe-dialog .wardrobe-list {
  min-height: 0 !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding-right: 4px !important;
}

/* Finder.KL Online */
.finder-source-badge {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(7, 13, 11, .84);
  color: #f2c95e;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 5px 16px rgba(0,0,0,.3);
}
.finder-source-badge.player {
  color: #6fe0ac;
  border-color: rgba(111,224,172,.45);
}
.finder-profile-card,
.finder-full-profile {
  position: relative;
}
.finder-online-card {
  border-color: rgba(111,224,172,.35) !important;
}
.finder-online-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.finder-online-state {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(126, 136, 131, .16);
  font-size: .72rem;
  font-weight: 900;
}
.finder-online-state.online { color: #6fe0ac; background: rgba(54,188,127,.15); }
.finder-online-state.offline { color: #adb8b2; }
.finder-online-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.finder-online-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.finder-online-form .wide { grid-column: 1 / -1; }
.finder-online-form input,
.finder-online-form select,
.finder-online-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.finder-online-form textarea {
  min-height: 92px;
  resize: vertical;
}
.finder-online-check {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center;
}
.finder-online-check input { width: auto !important; }
.finder-online-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Käppi ist auf allen Avatargrößen sichtbar und wird nicht abgeschnitten. */
.avatar-svg .hat,
.avatar-svg .hat-brim {
  vector-effect: non-scaling-stroke;
}
.character-person-figure,
.wardrobe-preview,
.avatar-card {
  overflow: visible;
}

/* Mobile Feinschliff */
@media (max-width: 700px) {
  #detailDialog.purchase-dialog[open] {
    inset: 50% auto auto 50% !important;
    width: min(92vw, 520px) !important;
    max-width: min(92vw, 520px) !important;
    max-height: min(74dvh, 620px) !important;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .clothing-model-card,
  .clothing-variant-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .clothing-model-card > button,
  .clothing-variant-card > button {
    width: 100% !important;
    min-width: 0 !important;
  }

  #detailDialog.character-dialog.character-overview-mode[open] {
    padding-top: 10px !important;
  }
  #detailDialog.character-dialog.character-overview-mode > #dialogTitle {
    margin-bottom: 5px !important;
    font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-hub {
    gap: 4px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-overview-card {
    padding: 10px !important;
    gap: 6px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-overview-head h3 {
    font-size: 1.06rem !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-overview-head span {
    font-size: .78rem !important;
  }
  #detailDialog.character-dialog.character-overview-mode .meta-strip.compact {
    gap: 5px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .meta-strip.compact span {
    padding: 5px 7px !important;
    font-size: .64rem !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-overview-nav {
    gap: 5px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-overview-nav .mini-button {
    padding: 8px 3px !important;
    min-height: 42px !important;
    font-size: .63rem !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-overview-body {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 6px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-avatar-stack {
    min-height: 0 !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-person-card {
    min-height: 0 !important;
    max-width: 100% !important;
    padding: 4px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-couple {
    gap: 5px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-person-figure {
    min-height: 180px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .health-panel {
    display: none !important;
  }

  #detailDialog.wardrobe-dialog[open] {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-closet {
    flex: 1 1 auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(220px, 42dvh) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-preview {
    min-height: 0 !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-list {
    min-height: 120px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .finder-online-form {
    grid-template-columns: 1fr;
  }
  .finder-online-form .wide { grid-column: auto; }
  .finder-online-card > header {
    align-items: flex-start;
  }
}

@media (max-width: 390px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-person-figure {
    min-height: 155px !important;
  }
}


/* Einstellungen, Mausrad, mobile Statuswerte und Finster.KL · 2026-07-23 */
.finster-topbar span.online { color:#7ee0a6; }
.finster-topbar span.offline { color:#ff8d88; }

.device-shell.device-active-finster .device-screen,
.device-shell.device-active-finster .device-screen.finster-host-screen {
  display:grid !important;
  grid-template-rows:minmax(0,1fr) !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  touch-action:pan-y !important;
}
.device-shell.device-active-finster .device-wallpaper,
.device-shell.device-active-finster .device-app-grid,
.device-shell.device-active-finster .device-app-view > h3,
.device-shell.device-active-finster .device-app-view > p,
.device-shell.device-active-finster .device-app-view > .device-hint {
  display:none !important;
}
.device-shell.device-active-finster .device-app-view {
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:0 !important;
}
.device-shell.device-active-finster .device-app-view > .finster-app {
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
}
.device-shell.device-active-finster .finster-content {
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  touch-action:pan-y !important;
  overscroll-behavior-y:contain !important;
  -webkit-overflow-scrolling:touch !important;
}

@media (max-width:700px) {
  .meters > .meter:nth-child(-n+3) {
    justify-items:center !important;
    text-align:center !important;
  }
  .meters > .meter:nth-child(-n+3) > span {
    width:100% !important;
    text-align:center !important;
  }
  .meters > .meter:nth-child(-n+3) progress {
    width:100% !important;
    margin-inline:auto !important;
  }

  #settingsView {
    width:100% !important;
    max-width:100% !important;
    min-height:100dvh !important;
    box-sizing:border-box !important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(18px + env(safe-area-inset-bottom,0px)) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #settingsView .setup-head {
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
    padding:6px 0 10px !important;
    background:linear-gradient(180deg,rgba(6,18,14,.98) 75%,rgba(6,18,14,0)) !important;
  }
  #settingsView .settings-panel {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding:14px !important;
  }
  #settingsView .settings-panel label,
  #settingsView .settings-wide {
    grid-column:1 !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  #settingsView input:not([type="range"]),
  #settingsView select,
  #settingsView button {
    min-height:46px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    font-size:16px !important;
  }
  #settingsView .settings-music-actions {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  #settingsView .custom-music-player,
  #settingsView .custom-music-player iframe {
    width:100% !important;
    max-width:100% !important;
  }
}

.finder-own-profile-shortcut{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;margin:8px 0 10px;border:1px solid rgba(84,231,153,.32);border-radius:15px;background:linear-gradient(135deg,rgba(30,92,62,.7),rgba(10,36,27,.9));color:inherit;text-align:left}.finder-own-profile-shortcut>span{width:44px;height:44px;display:grid;place-items:center;overflow:hidden}.finder-own-profile-shortcut .finder-avatar{transform:scale(.55);transform-origin:center}.finder-own-profile-shortcut div{display:grid;gap:2px}.finder-own-profile-shortcut small{color:#5ce697;font-weight:900}.finder-own-profile-shortcut em{font-style:normal;opacity:.72;font-size:.78rem}.finder-own-profile-shortcut i{font-size:1.5rem}.finder-swipe-actions{position:sticky;bottom:4px;z-index:4;background:linear-gradient(transparent,rgba(5,18,13,.96) 28%);padding-top:18px;margin-top:-8px}


/* Finder-Profil-Popup, Kommunikationsanzeigen und Klingeltöne · 2026-07-23 */
.finder-app { position: relative; }

:root {
  --communication-toast-offset: 0px;
  --purchase-toast-offset: 0px;
}

.communication-toast-layer {
  position: fixed;
  z-index: 2147483647;
  top: max(10px, env(safe-area-inset-top));
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(470px, calc(100vw - 20px));
  max-width: none;
  max-height: calc(100dvh - 20px);
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 9px;
  overflow: visible;
  background: transparent;
  color: inherit;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Popover legt Anruf und SMS in die echte Browser-Top-Layer. Dadurch bleibt
   der Banner über Handy-, Inventar- und anderen geöffneten Dialogen sichtbar. */
.communication-toast-layer[popover]::backdrop { display: none; }

.communication-toast-layer > div {
  display: grid;
  gap: 9px;
}

.communication-toast {
  width: 100%;
  min-height: 84px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(111, 239, 189, .34);
  border-radius: 17px;
  background:
    radial-gradient(circle at 10% 12%, rgba(111,239,189,.16), transparent 32%),
    linear-gradient(145deg, rgba(13, 35, 29, .99), rgba(4, 12, 9, .99));
  box-shadow: 0 22px 60px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.07);
  color: #f7fff9;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .24s ease, transform .28s ease;
  pointer-events: auto;
  backdrop-filter: blur(18px);
}

.communication-sms-toast {
  opacity: 0;
  transform: translateY(-15px) scale(.96);
}

.communication-sms-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.communication-toast.hide {
  opacity: 0;
  transform: translateY(-12px) scale(.97);
}

.communication-toast-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(111,239,189,.35);
  border-radius: 15px;
  background: rgba(111,239,189,.1);
  font-size: 1.35rem;
}

.communication-call-toast .communication-toast-icon {
  animation: communication-ring 1.15s ease-in-out infinite;
}

.communication-toast-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.communication-toast-copy small {
  color: #71efbd;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
}

.communication-toast-copy strong,
.communication-toast-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-toast-copy strong { font-size: .94rem; }
.communication-toast-copy span { color: rgba(234,255,244,.7); font-size: .7rem; }

.communication-toast-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.communication-toast-actions.compact {
  grid-template-columns: auto 34px;
}

.communication-toast-actions button {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  font-size: .65rem;
  font-weight: 900;
  cursor: pointer;
}

.communication-toast-actions .accept { background: #efc95c; color: #161103; }
.communication-toast-actions .reject { background: #ff7d70; color: #210805; }
.communication-toast-actions .neutral { background: rgba(255,255,255,.08); color: #fff; }

@keyframes communication-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg); }
  40% { transform: rotate(7deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(4deg); }
}

.purchase-toast-layer {
  top: calc(max(18px, env(safe-area-inset-top)) + var(--communication-toast-offset));
}

.game-xp-toast-layer,
.game-xp-toast-layer.below-purchase-toast {
  top: calc(max(18px, env(safe-area-inset-top)) + var(--communication-toast-offset) + var(--purchase-toast-offset));
}

.phone-tone-settings {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(239,201,92,.18);
  border-radius: 14px;
  background: rgba(0,0,0,.13);
}

.phone-tone-settings header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: end;
}

.phone-tone-settings header div { display: grid; gap: 2px; }
.phone-tone-settings header small { color: #71efbd; font-size: .56rem; font-weight: 950; }
.phone-tone-settings header b { font-size: .78rem; }
.phone-tone-settings header span { color: rgba(255,255,255,.5); font-size: .57rem; }

.phone-tone-settings label {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.74);
  font-size: .64rem;
  font-weight: 850;
}

.phone-tone-settings select {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  background: rgba(0,0,0,.25);
  color: #fff;
}

.finder-own-profile-overlay {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(1, 5, 4, .78);
  backdrop-filter: blur(8px);
  overflow: auto;
}

.finder-own-profile-modal {
  width: min(100%, 520px);
  max-height: min(720px, calc(100dvh - 70px));
  overflow: auto;
  padding: 13px;
  border: 1px solid rgba(255,95,120,.32);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(28,28,36,.99), rgba(7,11,14,.99));
  box-shadow: 0 28px 80px rgba(0,0,0,.65);
}

.finder-own-profile-modal > header {
  position: sticky;
  z-index: 2;
  top: -13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: -13px -13px 12px;
  padding: 12px 13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(11,13,17,.96);
}

.finder-own-profile-modal > header div { display: grid; gap: 2px; }
.finder-own-profile-modal > header small { color: #ff8ba0; font-size: .58rem; font-weight: 950; }
.finder-own-profile-modal > header h3 { margin: 0; font-size: 1rem; }
.finder-own-profile-modal > header button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 1.15rem;
}

.finder-own-profile-locked {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}

.finder-own-profile-locked > span { font-size: 2.2rem; }
.finder-own-profile-locked h4 { margin: 0; }
.finder-own-profile-locked p { max-width: 390px; margin: 0; color: rgba(255,255,255,.65); line-height: 1.5; }

@media (max-width: 520px) {
  .communication-toast-layer {
    top: max(7px, env(safe-area-inset-top));
    width: calc(100vw - 12px);
  }
  .communication-toast {
    min-height: 76px;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 8px;
    padding: 9px;
  }
  .communication-toast-icon { width: 42px; height: 42px; }
  .communication-toast-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
  .communication-toast-actions.compact { grid-template-columns: 1fr 38px; }
  .purchase-toast-layer {
    top: calc(max(10px, env(safe-area-inset-top)) + var(--communication-toast-offset));
  }
  .game-xp-toast-layer,
  .game-xp-toast-layer.below-purchase-toast {
    top: calc(max(10px, env(safe-area-inset-top)) + var(--communication-toast-offset) + var(--purchase-toast-offset));
  }
  .phone-tone-settings label {
    grid-template-columns: 45px minmax(0,1fr);
  }
  .phone-tone-settings label button {
    grid-column: 1 / -1;
  }
  .finder-own-profile-overlay { padding: 6px; }
  .finder-own-profile-modal { max-height: calc(100dvh - 24px); border-radius: 15px; }
}


/* Finalfix 2026-07-24: Einstellungen, Business-Weed und tägliche Geschenke */
@media (max-width: 700px) {
  #settingsView .setup-head {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }
  #settingsView .setup-head .icon-button {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    font-size: 1.25rem !important;
  }
  #settingsView .setup-head > div { min-width: 0 !important; }
  #settingsView .setup-head h2 { font-size: 1.35rem !important; }
}

.business-main-actions {
  grid-template-columns: minmax(72px,.65fr) minmax(112px,1fr) minmax(112px,1fr) !important;
}
.business-main-actions .business-weed-button {
  border-color: rgba(92,231,151,.38) !important;
  background: linear-gradient(145deg,rgba(45,137,88,.34),rgba(9,46,29,.88)) !important;
  color: #a2ffd0 !important;
  font-size: .68rem !important;
}
.business-weed-entry {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(91,231,151,.22);
  border-radius: 16px;
  background: radial-gradient(circle at 10% 30%,rgba(91,231,151,.14),transparent 35%),rgba(7,28,18,.86);
}
.business-weed-entry > span { display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(91,231,151,.12);font-size:1.55rem; }
.business-weed-entry div { min-width:0;display:grid;gap:3px; }
.business-weed-entry small { color:#75efb0;font-size:.58rem;font-weight:950;letter-spacing:.08em; }
.business-weed-entry b { font-size:.82rem; }
.business-weed-entry p { margin:0;color:var(--muted);font-size:.65rem;line-height:1.35; }
.business-weed-entry button { min-height:38px;padding:7px 10px;border:1px solid rgba(91,231,151,.3);border-radius:11px;background:#5be797;color:#07170e;font-weight:950; }
@media(max-width:560px){
  .business-main-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  .business-main-actions button{min-width:0!important;padding:6px 4px!important;font-size:.58rem!important;white-space:normal!important}
  .business-weed-entry{grid-template-columns:42px minmax(0,1fr);padding:9px;gap:8px}
  .business-weed-entry>span{width:40px;height:40px;border-radius:11px;font-size:1.25rem}
  .business-weed-entry>button{grid-column:1/-1;width:100%;min-height:40px}
}

/* PC/Tablet-Kalender: jede Belohnung bleibt vollständig in ihrer Karte. Handy-Regeln bleiben unberührt. */
@media (min-width: 701px) {
  .device-shell.device-tablet.device-active-dailygifts .daily-gifts-app { max-width: 980px; margin-inline: auto; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 9px !important; align-items: stretch; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card { min-height: 128px; grid-template-rows:auto minmax(2.4em,1fr) auto; gap:8px; padding:10px; overflow:hidden; border-radius:15px; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card header { min-width:0; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card header b { font-size:.72rem; white-space:nowrap; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card header span { width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;background:rgba(255,255,255,.08);font-size:1.05rem;overflow:hidden; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card > strong { min-height:0;font-size:.72rem;line-height:1.25;overflow-wrap:anywhere; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card .mini-button { width:100%;min-height:34px;font-size:.68rem; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card.special { grid-column:1/-1;min-height:92px;grid-template-columns:auto minmax(0,1fr) 160px;grid-template-rows:auto;align-items:center; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card.special header { min-width:110px; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card.special .mini-button { max-width:160px;justify-self:end; }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-grid { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
}

/* Business-App reduziert: nur Weed Business und Business Map */
.business-phone-view.business-choice-only { min-height: 100%; align-content: start; padding-top: 8px; }
.business-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.business-choice-card {
  min-height: 118px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(20,39,31,.96), rgba(5,14,10,.98));
  color: #f3fff8;
  text-align: left;
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
}
.business-choice-card.weed { border-color: rgba(91,231,151,.28); }
.business-choice-card.map { border-color: rgba(83,151,255,.28); }
.business-choice-card > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; font-size: 1.45rem; background: rgba(255,255,255,.07); }
.business-choice-card.weed > span { background: rgba(91,231,151,.12); }
.business-choice-card.map > span { background: rgba(83,151,255,.12); color: #80b5ff; }
.business-choice-card div { display: grid; gap: 4px; min-width: 0; }
.business-choice-card small { color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .09em; }
.business-choice-card b { font-size: .94rem; }
.business-choice-card i { font-style: normal; font-size: 1.5rem; color: var(--accent); }
.business-choice-card:hover { transform: translateY(-1px); border-color: rgba(91,231,151,.55); }
.business-choice-card div em { color: var(--muted); font-size: .58rem; font-style: normal; line-height: 1.25; }
.business-choice-card.locked { opacity: .68; cursor: not-allowed; border-style: dashed; }
.business-choice-card.locked:hover { transform: none; border-color: rgba(255,255,255,.14); }
.business-choice-card.locked > span { background: rgba(255,255,255,.06); }
@media (max-width:700px) {
  .business-choice-grid { grid-template-columns: 1fr; gap: 9px; }
  .business-choice-card { min-height: 88px; padding: 12px; border-radius: 15px; }
  .business-choice-card > span { width: 44px; height: 44px; border-radius: 12px; font-size: 1.2rem; }
}

/* 2026-07-24: bezahlbarer Cops-Schutz statt täglichem Verfall */
.business-bribe-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.business-bribe-package {
  min-width: 0;
  min-height: 104px;
  padding: 12px;
  border: 1px solid rgba(239,201,92,.28);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(239,201,92,.13), rgba(255,255,255,.035));
  color: #f8f4df;
  display: grid;
  align-content: center;
  gap: 5px;
  text-align: left;
}
.business-bribe-package span { font-size: .78rem; color: rgba(255,255,255,.72); }
.business-bribe-package b { font-size: 1.25rem; color: #efc95c; }
.business-bribe-package small { font-size: .7rem; color: rgba(255,255,255,.58); }
.business-bribe-package:disabled { opacity: .38; filter: grayscale(.35); }
.communication-outgoing-call { border-color: rgba(87,224,164,.38); box-shadow: 0 16px 46px rgba(0,0,0,.45), 0 0 26px rgba(87,224,164,.12); }
.communication-outgoing-call .communication-toast-icon { background: rgba(87,224,164,.18); color: #74f2bb; }

@media (max-width: 720px) {
  .business-bribe-packages { grid-template-columns: 1fr; }
  .business-bribe-package { min-height: 78px; grid-template-columns: 1fr auto; align-items: center; }
  .business-bribe-package small { grid-column: 1 / -1; }
}

/* ========================================================================== 
   JK.Games V15 · Charakter, Skills, Finder und Bahnhof
   ========================================================================== */

/* Skills: identisches Informationsdesign wie Leben/Stimmung */
.skill-info-panel-v15{display:grid;gap:12px;width:min(720px,100%);margin-inline:auto}
.profile-info-card.skill{background:linear-gradient(145deg,rgba(18,42,32,.96),rgba(12,25,20,.96));border-color:rgba(110,227,168,.24)}
.profile-info-card.skill>div:first-child{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "state value";align-items:end;gap:4px 12px}
.profile-info-card.skill small{grid-area:label}.profile-info-card.skill strong{grid-area:state}.profile-info-card.skill b{grid-area:value;color:#fff;font-size:1.35rem;white-space:nowrap}
.profile-info-bar.skill i{background:linear-gradient(90deg,#4fd295,#9be46f)}

/* Charakterübersicht: einheitliches, hochwertiges Spielkarten-Design */
.character-overview-card.character-overview-v15{display:grid;gap:14px;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.character-profile-header-v15{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;border:1px solid rgba(111,226,169,.2);border-radius:19px;background:linear-gradient(145deg,rgba(13,35,27,.97),rgba(9,22,18,.97));box-shadow:0 14px 34px rgba(0,0,0,.2)}
.character-profile-header-v15>div{min-width:0}.character-profile-header-v15 small{display:block;color:#85dab0;font-size:.66rem;font-weight:950;letter-spacing:.15em}.character-profile-header-v15 h3{margin:3px 0 1px;font-size:clamp(1.32rem,3vw,1.9rem);line-height:1.05}.character-profile-header-v15 p{margin:0;color:var(--muted);font-size:.78rem}
.character-profile-status-v15{flex:0 0 auto;padding:8px 12px;border:1px solid rgba(240,204,94,.2);border-radius:999px;background:rgba(91,67,14,.22);color:#f0d26c;font-size:.68rem;font-weight:950;letter-spacing:.08em}
.character-overview-body-v15{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;align-items:stretch!important}
.character-stage-v15{position:relative;isolation:isolate;min-height:330px;padding:20px;border:1px solid rgba(122,231,179,.17);border-radius:24px;background:radial-gradient(circle at 50% 25%,rgba(72,156,113,.18),transparent 42%),linear-gradient(155deg,rgba(10,31,24,.97),rgba(7,17,14,.98));overflow:hidden}
.character-stage-v15:before{content:"";position:absolute;inset:auto 8% 12px;height:42%;border-radius:50%;background:radial-gradient(ellipse,rgba(75,173,121,.16),transparent 68%);z-index:-1}
.character-stage-glow-v15{position:absolute;inset:12% 20% auto;height:150px;border-radius:50%;background:rgba(79,202,139,.08);filter:blur(35px);z-index:-1}
.character-couple.character-couple-v15{position:relative;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(680px,100%);margin:0 auto;align-items:stretch}
.character-stage-v15.solo .character-couple-v15{grid-template-columns:minmax(220px,360px) minmax(190px,300px);justify-content:center}
.character-person-card.character-person-card-v15{position:relative;display:grid!important;grid-template-rows:auto minmax(190px,1fr) auto auto;place-items:center;gap:5px;min-width:0;min-height:285px;padding:13px 12px 14px!important;border:1px solid rgba(122,231,179,.18)!important;border-radius:21px!important;background:linear-gradient(170deg,rgba(25,56,43,.72),rgba(10,24,19,.9))!important;box-shadow:inset 0 1px rgba(255,255,255,.03),0 12px 30px rgba(0,0,0,.18)!important;overflow:hidden}
.character-person-card-v15.partner{border-color:rgba(239,194,95,.19)!important;background:linear-gradient(170deg,rgba(61,49,23,.5),rgba(20,25,19,.9))!important}
.character-person-card-v15:hover{transform:translateY(-2px);border-color:rgba(126,241,188,.38)!important}
.character-card-label-v15{justify-self:start;padding:5px 8px;border-radius:999px;background:rgba(100,222,164,.11);color:#8de0b5;font-size:.59rem;font-weight:950;letter-spacing:.16em}
.character-person-card-v15.partner .character-card-label-v15{background:rgba(238,196,94,.11);color:#efcd71}
.character-person-card-v15 .character-person-figure{display:grid;place-items:end center;width:100%;height:100%;min-height:190px;overflow:hidden}
.character-person-card-v15 .avatar-svg,.character-person-card-v15 .finder-avatar{max-width:100%;max-height:215px}
.character-card-name-v15{font-size:1.02rem;font-weight:950;color:#fff}.character-card-action-v15{color:#8fd8b2;font-size:.68rem;font-weight:850}
.partner-mini-meters-v15{display:grid!important;width:100%;gap:7px;margin-top:2px}.partner-mini-meters-v15>span{position:relative;display:block!important;height:22px;padding:4px 7px;border-radius:8px;background:rgba(255,255,255,.055);overflow:hidden}.partner-mini-meters-v15 i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(230,91,133,.25),rgba(241,203,91,.18));z-index:0}.partner-mini-meters-v15 b{position:relative;z-index:1;font-size:.61rem;color:#ede8d8}
.character-empty-partner-v15{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;align-items:center;gap:13px;min-height:285px;padding:18px;border:1px dashed rgba(240,199,91,.22);border-radius:21px;background:rgba(45,35,14,.16)}.character-empty-partner-v15>span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:rgba(225,83,122,.12);color:#e3789c;font-size:1.4rem}.character-empty-partner-v15 small{display:block;color:#d9b95f;font-size:.62rem;font-weight:950;letter-spacing:.13em}.character-empty-partner-v15 b{display:block;margin:3px 0;font-size:.94rem}.character-empty-partner-v15 p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.4}
.character-overview-v15 .health-panel.character-health-v15{margin:0!important;padding:13px 15px!important;border:1px solid rgba(110,227,168,.2)!important;border-radius:17px!important;background:linear-gradient(145deg,rgba(14,36,27,.96),rgba(9,23,18,.96))!important}
.character-tools-v15{display:grid;gap:10px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:19px;background:rgba(9,21,17,.9)}.character-tools-v15>div:first-child small{color:#83d6ac;font-size:.63rem;font-weight:950;letter-spacing:.14em}.character-tools-v15 h4{margin:2px 0 0;font-size:1rem}
.character-overview-nav-v15{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}.character-overview-nav-v15 .mini-button{min-height:44px;padding:8px 6px;border-radius:12px;font-size:.7rem;white-space:normal}
.character-overview-v15 .lbpet-character-selector{order:2;margin:0!important}
.character-couple-v15{position:relative}.character-overview-v15 .character-pet-chip{bottom:58px;left:calc(25% + 27px)}.character-stage-v15.solo .character-pet-chip{left:calc(31% + 28px)}.character-overview-v15 .character-partner-pet-chip{left:calc(75% + 22px)}

/* Finder.KL: echter privater Chat zwischen Online-Matches */
.finder-online-chat-head{position:relative}.finder-live-dot{margin-left:auto;width:10px;height:10px;border-radius:50%;background:#68736e;box-shadow:0 0 0 4px rgba(104,115,110,.12)}.finder-live-dot.online{background:#5ee59d;box-shadow:0 0 0 4px rgba(94,229,157,.14)}
.finder-online-chat-thread{min-height:220px;max-height:390px;border:1px solid rgba(103,221,161,.13);border-radius:16px;background:linear-gradient(180deg,rgba(7,22,17,.88),rgba(6,15,12,.94))}
.finder-online-chat-thread .finder-empty{min-height:190px;display:grid;place-content:center;text-align:center}

/* Bahnhof: stabil in jeder Dialogbreite, keine zerfallenden Zweispaltenkarten */
#detailDialog:has(.station-hot-goods-root){width:min(960px,calc(100vw - 24px))!important}
.station-hot-goods-root{container-type:inline-size}
.station-hot-goods-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr))!important}
.station-hot-good-card{grid-template-columns:auto minmax(0,1fr) auto!important;overflow:hidden}.station-hot-good-card>div{min-width:0}.station-hot-good-card h3,.station-hot-good-card p,.station-hot-good-card small{overflow-wrap:normal!important;word-break:normal!important;hyphens:auto}.station-hot-good-card>button{align-self:center;white-space:nowrap}
.station-license-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px;border:1px solid rgba(244,198,86,.22);border-radius:16px;background:linear-gradient(145deg,rgba(66,46,10,.34),rgba(12,26,20,.94))}.station-license-card>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(244,198,86,.1);font-size:1.3rem}.station-license-card>div{min-width:0}.station-license-card small{color:#f0c85e;font-size:.62rem;font-weight:950;letter-spacing:.12em}.station-license-card h3,.station-license-card p{margin:0}.station-license-card p{color:var(--muted);font-size:.73rem;line-height:1.4}.station-license-card.owned{border-color:rgba(96,221,156,.23)}
@container (max-width:620px){.station-hot-good-card,.station-license-card{grid-template-columns:auto minmax(0,1fr)!important}.station-hot-good-card>button,.station-license-card>button{grid-column:1/-1;width:100%;min-height:42px}}

@media(max-width:760px){
  .character-profile-header-v15{align-items:flex-start;padding:13px}.character-profile-status-v15{padding:6px 8px;font-size:.58rem}
  .character-stage-v15{min-height:0;padding:12px}.character-couple.character-couple-v15,.character-stage-v15.solo .character-couple-v15{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .character-person-card.character-person-card-v15,.character-empty-partner-v15{min-height:230px;padding:9px!important}.character-person-card-v15 .character-person-figure{min-height:145px}.character-person-card-v15 .avatar-svg,.character-person-card-v15 .finder-avatar{max-height:165px}
  .character-empty-partner-v15{grid-template-columns:1fr;text-align:center;place-items:center}.character-empty-partner-v15 p{display:none}
  .character-overview-nav-v15{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .character-card-action-v15{font-size:.6rem}.partner-mini-meters-v15 b{font-size:.54rem}
  .character-overview-v15 .character-pet-chip{bottom:47px;left:calc(25% + 15px);width:42px;min-width:42px;height:42px}.character-overview-v15 .character-partner-pet-chip{left:calc(75% + 10px)}.character-overview-v15 .character-pet-chip .character-pet-emoji{font-size:31px}
  .finder-online-chat-thread{min-height:180px;max-height:calc(100dvh - 430px)}
  .station-hot-good-card,.station-license-card{grid-template-columns:auto minmax(0,1fr)!important}.station-hot-good-card>button,.station-license-card>button{grid-column:1/-1;width:100%;min-height:42px}
}

/* JK.Games Professional V18 · Screenshot-Fixes 2026-07-25 */

/* Das Handy behält sein eigenes kompaktes Layout – unabhängig von der Browserbreite. */
.device-shell.device-phone.device-active-dailygifts .daily-gifts-app { gap:8px; }
.device-shell.device-phone.device-active-dailygifts .daily-app-hero {
  gap:8px;
  padding:9px;
  border-radius:15px;
}
.device-shell.device-phone.device-active-dailygifts .daily-app-hero > span {
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:13px;
  font-size:1.2rem;
}
.device-shell.device-phone.device-active-dailygifts .daily-app-hero h4 { font-size:.98rem;line-height:1.05; }
.device-shell.device-phone.device-active-dailygifts .daily-app-hero .eyebrow { font-size:.58rem; }
.device-shell.device-phone.device-active-dailygifts .daily-app-hero small { font-size:.66rem;line-height:1.24; }
.device-shell.device-phone.device-active-dailygifts .daily-streak-panel {
  gap:5px;
  padding:9px;
  border-radius:13px;
}
.device-shell.device-phone.device-active-dailygifts .daily-streak-panel > div { gap:5px; }
.device-shell.device-phone.device-active-dailygifts .daily-streak-panel small,
.device-shell.device-phone.device-active-dailygifts .daily-streak-panel b,
.device-shell.device-phone.device-active-dailygifts .daily-streak-panel strong { font-size:.64rem; }
.device-shell.device-phone.device-active-dailygifts .daily-streak-panel p { font-size:.62rem;line-height:1.3; }
.device-shell.device-phone.device-active-dailygifts .daily-gift-grid {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:4px !important;
  width:100%;
  min-width:0;
}
.device-shell.device-phone.device-active-dailygifts .daily-gift-card {
  box-sizing:border-box;
  min-width:0;
  width:100%;
  min-height:0;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(2.35em,auto) auto;
  gap:4px;
  padding:5px;
  border-radius:10px;
  overflow:hidden;
}
.device-shell.device-phone.device-active-dailygifts .daily-gift-card header { min-width:0;gap:2px; }
.device-shell.device-phone.device-active-dailygifts .daily-gift-card header b { min-width:0;font-size:.57rem;line-height:1;white-space:nowrap; }
.device-shell.device-phone.device-active-dailygifts .daily-gift-card header span { flex:0 0 auto;width:auto;height:auto;background:transparent;font-size:.72rem;line-height:1; }
.device-shell.device-phone.device-active-dailygifts .daily-gift-card > strong {
  min-width:0;
  min-height:2.35em;
  font-size:.56rem;
  line-height:1.12;
  overflow-wrap:anywhere;
  word-break:normal;
}
.device-shell.device-phone.device-active-dailygifts .daily-gift-card .mini-button {
  box-sizing:border-box;
  width:100%;
  max-width:none;
  min-width:0 !important;
  min-height:26px;
  padding:4px 1px;
  border-radius:8px;
  font-size:.54rem;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.device-shell.device-phone.device-active-dailygifts .daily-gift-card.special {
  grid-column:1 / -1;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  align-items:stretch;
}
.device-shell.device-phone.device-active-dailygifts .daily-gift-card.special header { min-width:0; }
.device-shell.device-phone.device-active-dailygifts .daily-gift-card.special .mini-button { justify-self:stretch;max-width:none; }

/* Charakterfenster: feste Dialoghülle, allein der Inhalt scrollt. */
#detailDialog.character-dialog[open] {
  display:flex !important;
  flex-direction:column !important;
  max-height:calc(100dvh - 24px) !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
#detailDialog.character-dialog[open] > #dialogTitle { flex:0 0 auto; }
#detailDialog.character-dialog[open] > .character-hub {
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}
#detailDialog.character-dialog[open] .character-hub-content {
  display:grid !important;
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch !important;
  padding:2px 4px 20px 0 !important;
  scrollbar-gutter:stable;
}
#detailDialog.character-dialog.character-overview-mode .character-overview-card {
  height:auto !important;
  min-height:0 !important;
  grid-template-rows:auto auto !important;
}
#detailDialog.character-dialog.character-overview-mode .character-overview-body,
#detailDialog.character-dialog.character-overview-mode .character-couple {
  height:auto !important;
}
.character-tools-v15 { margin-top:0; }

/* Haustiere sitzen als kleine Figuren an den Füßen, ohne die Charakterkarten zu vergrößern. */
.character-overview-v15 .character-pet-chip {
  bottom:54px;
  z-index:20;
}
.character-overview-v15 .character-partner-pet-chip { bottom:70px; }

/* Größerer Kleiderschrank mit deutlich mehr Platz für die Kleidungsliste. */
#detailDialog.wardrobe-dialog[open] {
  width:min(960px,calc(100vw - 28px)) !important;
  max-width:min(960px,calc(100vw - 28px)) !important;
  max-height:calc(100dvh - 24px) !important;
}
#detailDialog.wardrobe-dialog .wardrobe-closet {
  grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr) !important;
}
#detailDialog.wardrobe-dialog .wardrobe-list {
  grid-template-columns:minmax(0,1fr) !important;
  align-content:start;
}
#detailDialog.wardrobe-dialog .wardrobe-list > .item-card:only-child {
  min-height:180px;
  align-content:center;
  padding:24px;
}

/* Erfolge verwenden dasselbe klare Informationsdesign wie die Skills. */
.achievement-dashboard-v18 {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
}
.profile-info-card.achievement {
  background:linear-gradient(145deg,rgba(38,49,24,.97),rgba(15,28,21,.97));
  border-color:rgba(238,202,91,.28);
}
.profile-info-card.achievement > div:first-child {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"label label" "state value";
  align-items:end;
  gap:4px 12px;
}
.profile-info-card.achievement small { grid-area:label; }
.profile-info-card.achievement strong { grid-area:state; }
.profile-info-card.achievement b { grid-area:value;color:#f0d369;font-size:1.35rem;white-space:nowrap; }
.profile-info-card.achievement p { margin:8px 0 0;color:var(--muted);font-size:.72rem; }
.profile-info-bar.achievement i { background:linear-gradient(90deg,#d7ae3e,#f5dd76); }
.achievement-info-button-v18 {
  display:grid;
  place-items:center;
  width:46px;
  min-width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(239,203,94,.36);
  border-radius:50%;
  background:rgba(239,203,94,.1);
  color:#f2d471;
  font-size:1.15rem;
  font-weight:1000;
}
.achievement-info-button-v18:hover,
.achievement-info-button-v18:focus-visible { border-color:#f2d471;box-shadow:0 0 0 3px rgba(242,212,113,.12);outline:0; }
.achievement-progress-clean { display:grid;gap:5px;margin-top:10px; }
.achievement-progress-clean > span { display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.68rem; }
.achievement-progress-clean em { color:#f1d272;font-style:normal;font-weight:900;text-align:right; }
.achievement-progress-clean > i { display:block;height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden; }
.achievement-progress-clean > i > u { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#59d79a,#f0cf64);text-decoration:none; }
.achievement-progress-clean > small { color:var(--muted);font-size:.64rem; }
.achievement-info-panel-v18 { display:grid;gap:12px;width:min(720px,100%);margin-inline:auto; }

@media (max-width:760px) {
  #detailDialog.wardrobe-dialog .wardrobe-closet {
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(220px,42dvh) minmax(180px,1fr) !important;
  }
  .achievement-dashboard-v18 { grid-template-columns:minmax(0,1fr) 42px; }
  .achievement-info-button-v18 { width:42px;min-width:42px;height:42px; }
  .character-overview-v15 .character-pet-chip { bottom:44px; }
  .character-overview-v15 .character-partner-pet-chip { bottom:58px; }
}

@media (max-width:800px) {
  #detailDialog.wardrobe-dialog .wardrobe-closet {
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(220px,42dvh) minmax(180px,1fr) !important;
  }
}

@media (max-width:800px) and (max-height:700px) {
  #detailDialog.wardrobe-dialog .wardrobe-closet {
    grid-template-rows:minmax(150px,34dvh) minmax(120px,1fr) !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-preview {
    padding:8px !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-preview .avatar-card,
  #detailDialog.wardrobe-dialog .wardrobe-preview .avatar-svg {
    max-height:calc(34dvh - 50px) !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-list {
    min-height:0 !important;
  }
}

/* V19: Geräte-Dialoge ändern ihre Höhe beim Ziehen des Browserfensters stetig.
   Dadurch wird das Handy beim Kürzerziehen nicht mehr plötzlich größer. */
#detailDialog.device-dialog[open] .device-frame {
  height:clamp(300px,calc(100dvh - 138px),690px) !important;
  min-height:0 !important;
}

/* Tablets erhalten die für ihre 620-Pixel-Gerätefläche notwendige Dialogbreite.
   Ein Smartphone behält weiterhin das kompakte 460-Pixel-Dialoglimit. */
#detailDialog.device-dialog[open]:has(.device-shell.device-tablet) {
  width:min(680px,calc(100vw - 24px)) !important;
  max-width:min(680px,calc(100vw - 24px)) !important;
}

/* Eine einzige Tablet-Spaltenzahl ersetzt die ältere widersprüchliche
   3-/5-Spalten-Kaskade. Der Monatspreis bleibt bei wenig Platz lesbar. */
.device-shell.device-tablet.device-active-dailygifts .daily-gift-grid {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

@media (max-width:600px) {
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card.special {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    align-items:stretch !important;
  }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card.special header {
    min-width:0 !important;
  }
  .device-shell.device-tablet.device-active-dailygifts .daily-gift-card.special .mini-button {
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
  }
}


/* JK.Games Professional V20 · Charakter-/Bonitäts-Screenshot-Fix 2026-07-25 */

/* Leben im kleinen Dashboard-Feld wieder sauber mittig ausrichten. */
.portrait > .health-panel.mini .health-label {
  justify-content:center !important;
  gap:6px !important;
  text-align:center !important;
}
.portrait > .health-panel.mini .health-label span,
.portrait > .health-panel.mini .health-label b {
  flex:0 0 auto;
  white-space:nowrap;
}

/* Reihenfolge: Bearbeitung oben, Menschen in der Mitte, Haustierauswahl unten. */
.character-overview-body-v15 > .character-tools-v15 { order:1 !important; }
.character-overview-body-v15 > .character-stage-v15 { order:2 !important; }
.character-overview-body-v15 > .lbpet-character-selector { order:3 !important; }

/* Ohne Beziehung steht der eigene Charakter mittig statt neben einer leeren Karte. */
.character-stage-v15.solo .character-couple-v15 {
  grid-template-columns:minmax(230px,330px) !important;
  justify-content:center !important;
}
.character-stage-v15.solo .character-empty-partner-v15 { display:none !important; }

/* Beide Menschen vollständig und mit sichtbaren Füßen darstellen. */
.character-stage-v15 {
  min-height:390px !important;
  padding:18px !important;
}
.character-couple.character-couple-v15 {
  align-items:stretch !important;
  width:min(720px,100%) !important;
}
.character-person-card.character-person-card-v15 {
  grid-template-rows:auto minmax(255px,1fr) auto auto !important;
  min-height:350px !important;
  overflow:hidden !important;
}
.character-person-card-v15 .character-person-figure {
  min-height:255px !important;
  overflow:visible !important;
  align-self:stretch !important;
}
.character-person-card-v15 .character-person-figure > .avatar-card,
.character-person-card-v15 .character-person-figure > .finder-avatar,
.character-person-card-v15 .character-person-figure .avatar-svg,
.character-person-card-v15 .character-person-figure svg,
.character-partner-card .finder-avatar.character,
.character-partner-card .finder-avatar.character svg {
  width:100% !important;
  height:100% !important;
  max-height:285px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

/* Das Haustier bleibt ausschließlich in der Auswahl unter den Charakteren.
   Dadurch verdeckt kein Tier mehr Füße oder die zweite Person. */
.character-overview-v15 .character-pet-chip { display:none !important; }
.character-overview-v15 .lbpet-character-selector {
  margin:0 !important;
  width:100% !important;
}

@media (max-width:760px) {
  .character-stage-v15 { min-height:345px !important;padding:10px !important; }
  .character-couple.character-couple-v15 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .character-stage-v15.solo .character-couple-v15 {
    grid-template-columns:minmax(210px,290px) !important;
  }
  .character-person-card.character-person-card-v15 {
    grid-template-rows:auto minmax(220px,1fr) auto auto !important;
    min-height:310px !important;
    padding:9px !important;
  }
  .character-person-card-v15 .character-person-figure { min-height:220px !important; }
  .character-person-card-v15 .character-person-figure > .avatar-card,
  .character-person-card-v15 .character-person-figure > .finder-avatar,
  .character-person-card-v15 .character-person-figure .avatar-svg,
  .character-person-card-v15 .character-person-figure svg,
  .character-partner-card .finder-avatar.character,
  .character-partner-card .finder-avatar.character svg { max-height:245px !important; }
}

@media (max-width:430px) {
  .character-person-card.character-person-card-v15 {
    grid-template-rows:auto minmax(195px,1fr) auto auto !important;
    min-height:285px !important;
  }
  .character-person-card-v15 .character-person-figure { min-height:195px !important; }
  .character-person-card-v15 .character-person-figure > .avatar-card,
  .character-person-card-v15 .character-person-figure > .finder-avatar,
  .character-person-card-v15 .character-person-figure .avatar-svg,
  .character-person-card-v15 .character-person-figure svg,
  .character-partner-card .finder-avatar.character,
  .character-partner-card .finder-avatar.character svg { max-height:220px !important; }
}


/* JK.Games Professional V21 · Charakter-Layout-Korrektur 2026-07-25 */
/* Die Reihenfolge bleibt: Werkzeuge oben, Charakterbereich darunter, Haustierbereich unten.
   Gleichzeitig bleibt die zweite Partnerfläche sichtbar und die Figuren werden nicht mehr gezoomt. */
.character-overview-body-v15 > .character-tools-v15 { order:1 !important; }
.character-overview-body-v15 > .character-stage-v15 { order:2 !important; }
.character-overview-body-v15 > .lbpet-character-selector { order:3 !important; }

/* Im Solo-Zustand soll die rechte Partnerfläche weiterhin sichtbar bleiben,
   damit das Layout wie gewünscht zweispaltig bleibt. */
.character-stage-v15.solo .character-couple-v15 {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  justify-content:stretch !important;
}
.character-stage-v15.solo .character-empty-partner-v15 {
  display:grid !important;
}

/* Die Charaktere wieder vollständig statt gezoomt darstellen. */
.character-stage-v15 {
  min-height:330px !important;
  padding:20px !important;
}
.character-couple.character-couple-v15 {
  width:min(680px,100%) !important;
  gap:16px !important;
  align-items:stretch !important;
}
.character-person-card.character-person-card-v15 {
  grid-template-rows:auto minmax(190px,1fr) auto auto !important;
  min-height:285px !important;
  padding:13px 12px 14px !important;
}
.character-person-card-v15 .character-person-figure {
  display:grid !important;
  place-items:end center !important;
  width:100% !important;
  height:100% !important;
  min-height:190px !important;
  overflow:hidden !important;
}
.character-person-card-v15 .avatar-card,
.character-person-card-v15 .avatar-svg,
.character-person-card-v15 .finder-avatar,
.character-person-card-v15 .finder-avatar svg,
.character-person-card-v15 .avatar-svg svg {
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:215px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}
.character-empty-partner-v15 {
  min-height:285px !important;
}

/* Das Haustier bleibt ausschließlich im unteren Haustierbereich. */
.character-overview-v15 .character-pet-chip {
  display:none !important;
}
.character-overview-v15 .lbpet-character-selector {
  margin:0 !important;
  width:100% !important;
}

@media (max-width:760px) {
  .character-stage-v15 {
    min-height:0 !important;
    padding:12px !important;
  }
  .character-couple.character-couple-v15,
  .character-stage-v15.solo .character-couple-v15 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .character-person-card.character-person-card-v15,
  .character-empty-partner-v15 {
    min-height:230px !important;
    padding:9px !important;
  }
  .character-person-card-v15 .character-person-figure {
    min-height:145px !important;
  }
  .character-person-card-v15 .avatar-card,
  .character-person-card-v15 .avatar-svg,
  .character-person-card-v15 .finder-avatar,
  .character-person-card-v15 .finder-avatar svg,
  .character-person-card-v15 .avatar-svg svg {
    max-height:165px !important;
  }
  .character-empty-partner-v15 {
    grid-template-columns:1fr !important;
    text-align:center !important;
    place-items:center !important;
  }
  .character-empty-partner-v15 p {
    display:none !important;
  }
}


/* JK.Games Professional V22 · Sichtbare Kartenumrandung 2026-07-25 */
/* Beide inneren Kästchen sollen unten klar abgeschlossen aussehen. */
.character-person-card.character-person-card-v15,
.character-empty-partner-v15 {
  position:relative !important;
  overflow:hidden !important;
  border-width:1px !important;
  border-style:solid !important;
  border-color:rgba(122,231,179,.22) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 12px 30px rgba(0,0,0,.18) !important;
}
.character-person-card.character-person-card-v15.partner {
  border-color:rgba(239,194,95,.24) !important;
}
.character-person-card.character-person-card-v15::after,
.character-empty-partner-v15::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(10,24,19,.22);
}
.character-person-card.character-person-card-v15 .character-card-name-v15,
.character-person-card.character-person-card-v15 .character-card-action-v15,
.character-empty-partner-v15 > div {
  position:relative;
  z-index:1;
}


/* JK.Games Professional V23 · Charakter-Karten höher setzen 2026-07-25 */
/* Die beiden Innenkästchen werden etwas höher platziert,
   damit die untere Umrandung sauber sichtbar und optisch abgeschlossen bleibt. */
.character-stage-v15 {
  padding:18px 18px 30px !important;
}
.character-couple.character-couple-v15 {
  position:relative !important;
  top:-8px !important;
  margin-bottom:10px !important;
}
.character-person-card.character-person-card-v15,
.character-empty-partner-v15 {
  align-self:start !important;
}

@media (max-width:760px) {
  .character-stage-v15 {
    padding:12px 12px 22px !important;
  }
  .character-couple.character-couple-v15,
  .character-stage-v15.solo .character-couple-v15 {
    top:-6px !important;
    margin-bottom:8px !important;
  }
}


/* JK.Games Professional V24 · Figuren ohne Einzelkästchen 2026-07-25 */
/* Der gemeinsame Charakterbereich bleibt erhalten. Die einzelnen Personen stehen
   darin frei, ohne eigene Karten, Rahmen oder farbige Hintergründe. */
.character-person-card.character-person-card-v15,
.character-person-card.character-person-card-v15.partner,
.character-empty-partner-v15 {
  border:0 !important;
  border-color:transparent !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.character-person-card.character-person-card-v15::after,
.character-empty-partner-v15::after {
  content:none !important;
  display:none !important;
  box-shadow:none !important;
}
.character-person-card.character-person-card-v15:hover,
.character-person-card.character-person-card-v15:focus-visible {
  transform:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Auch der zusätzliche Hintergrund direkt hinter der eigenen Figur entfällt. */
.character-person-card-v15 .avatar-card,
.character-person-card-v15 .avatar-card.large,
.character-person-card-v15 .finder-avatar {
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* Beschriftungen bleiben lesbar, schweben aber frei bei den Figuren. */
.character-card-label-v15,
.character-card-name-v15,
.character-card-action-v15,
.partner-mini-meters-v15 {
  position:relative !important;
  z-index:2 !important;
}

/* JK.Games Professional V34 · Casino-Handyansicht mit horizontalem und vertikalem Drag · 2026-07-26 */
.casino-map-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0d1110;
}
.casino-map-drag-hint {
  display: none;
}

@media (max-width: 760px) {
  .casino-world-floor {
    width: 100%;
    max-width: 100%;
    padding: 6px !important;
    overflow: hidden;
  }
  .casino-map-pro-head {
    gap: 10px;
  }
  .casino-map-live-stats {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
  .casino-map-live-stats > span:last-child {
    grid-column: 1 / -1;
  }
  .casino-world-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    border-radius: 16px;
  }
  .casino-map-viewport {
    width: 100%;
    height: clamp(360px, 58dvh, 560px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: none;
    cursor: grab;
    scrollbar-width: none;
    scroll-behavior: auto;
  }
  .casino-map-viewport::-webkit-scrollbar {
    display: none;
  }
  .casino-map-viewport.is-panning {
    cursor: grabbing;
  }
  .casino-world-stage {
    width: clamp(660px, 180vw, 820px) !important;
    min-width: clamp(660px, 180vw, 820px) !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    touch-action: auto !important;
    cursor: inherit;
  }
  .casino-world-stage > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .casino-map-drag-hint {
    display: block;
    padding: 8px 10px;
    border-top: 1px solid rgba(230,197,101,.22);
    border-bottom: 1px solid rgba(230,197,101,.22);
    background: rgba(230,197,101,.08);
    color: #ead987;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
  }

  /* Auf dem Handy liegt der geöffnete Casino-Bereich nicht mehr als zu breites
     Fenster über der Karte, sondern vollständig lesbar unter der Karte. */
  .casino-world-panel {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    animation: none !important;
  }
  .casino-world-panel-head {
    position: sticky;
    top: 0;
    z-index: 12;
    min-height: 54px;
    padding: 8px 10px;
    background: rgba(8,8,12,.98);
    backdrop-filter: blur(14px);
  }
  .casino-world-panel-scroll {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 9px !important;
    contain: none !important;
  }
  .casino-world-panel-scroll *,
  .casino-world-panel-scroll *::before,
  .casino-world-panel-scroll *::after {
    box-sizing: border-box;
    min-width: 0;
  }
  .casino-world-panel .casino-table,
  .casino-world-panel .casino-upgrade,
  .casino-world-panel .device-finance-summary,
  .casino-world-panel .device-finance-card,
  .casino-world-panel .casino-service-card,
  .casino-world-panel .casino-pro-game,
  .casino-world-panel .slots-machine-frame {
    width: 100%;
    max-width: 100%;
  }

  .casino-pro-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .casino-pro-wallet {
    width: 100%;
    text-align: left;
  }
  .casino-pro-stats,
  .casino-kpi-row {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    overflow: visible !important;
  }
  .casino-pro-stats > span:last-child,
  .casino-kpi-row > span:last-child {
    grid-column: 1 / -1;
  }
  .casino-game-banner {
    align-items: flex-start;
  }
  .casino-game-banner > div {
    min-width: 0;
  }
  .casino-game-banner h3,
  .casino-game-banner p,
  .casino-game-banner small,
  .slot-machine .table-head h3,
  .slot-machine .table-head strong {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .slot-machine .table-head {
    display: grid;
    gap: 4px;
  }
  .slot-picker {
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 7px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .slot-picker::-webkit-scrollbar {
    display: none;
  }
  .slot-picker .casino-nav {
    flex: 0 0 auto;
    max-width: 180px;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .slots-machine-frame {
    padding: 7px !important;
  }
  .slot-machine {
    padding: 9px !important;
  }
  .reels {
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    gap: 5px;
    padding: 6px;
  }
  .reel {
    gap: 5px;
    padding: 4px;
  }
  .reel span {
    min-height: 46px;
    font-size: 1.3rem;
  }
  .casino-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .casino-actions > button,
  .casino-actions > a {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  .casino-choice-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .casino-balance-grid,
  .casino-quick-grid,
  .casino-tour-grid {
    grid-template-columns: 1fr !important;
  }
  .casino-tier-card {
    grid-template-columns: auto minmax(0,1fr);
  }
  .casino-tier-card > strong {
    grid-column: 1 / -1;
  }
  .casino-map-status {
    margin: 8px 0 0 !important;
    padding: 10px !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .casino-map-viewport {
    height: clamp(340px, 55dvh, 500px);
  }
  .casino-world-stage {
    width: clamp(640px, 184vw, 760px) !important;
    min-width: clamp(640px, 184vw, 760px) !important;
  }
  .casino-world-panel-scroll {
    padding: 7px !important;
  }
  .casino-game-banner {
    padding: 9px;
    gap: 8px;
  }
  .casino-game-banner > span {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
  .casino-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) and (max-height: 560px) {
  .casino-map-viewport {
    height: 280px;
  }
}


/* V34 Zusatz: vertikales und horizontales Ziehen der Casino-Map auf dem Handy */
@media (max-width: 760px) {
  .casino-map-viewport {
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none;
  }
  .casino-map-viewport.is-panning {
    cursor: grabbing;
  }
  .casino-map-drag-hint {
    text-align: center;
  }
}


/* JK.Games Professional V35 · Casino-Map XY-Drag + vollständiger Handy-Seitenscroll · 2026-07-26 */
@media (max-width: 760px) {
  /* Frühere feste Casino-Höhen würden den Spielbereich unter der Karte abschneiden.
     Der gesamte Casino-Inhalt nimmt deshalb wieder seine natürliche Dokumenthöhe ein. */
  #casino.tab-panel.active,
  #casinoList,
  .casino-world-floor,
  .casino-world-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    contain: none !important;
    touch-action: pan-y !important;
  }

  #casinoList {
    display: block !important;
    padding-bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 90px)) !important;
  }

  /* Nur die Karte selbst fängt den Finger ab. Innerhalb dieses Fensters kann
     sie in alle vier Richtungen bewegt werden. */
  .casino-map-viewport {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: clamp(340px, 56dvh, 540px) !important;
    min-height: 340px !important;
    max-height: 540px !important;
    overflow-x: scroll !important;
    overflow-y: scroll !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: none !important;
    scrollbar-width: none !important;
  }

  .casino-map-viewport::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .casino-world-stage {
    display: block !important;
    width: max(720px, 184vw) !important;
    min-width: max(720px, 184vw) !important;
    max-width: none !important;
    height: auto !important;
    min-height: max(720px, 184vw) !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    overflow: visible !important;
    touch-action: none !important;
  }

  .casino-world-stage > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  /* Der ausgewählte Standort und das Spiel liegen normal unter der Karte.
     Dadurch scrollt die komplette Seite bis zum letzten Spielknopf. */
  .casino-world-panel {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .casino-world-panel-head {
    position: relative !important;
    top: auto !important;
  }

  .casino-world-panel-scroll {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding-bottom: max(90px, calc(env(safe-area-inset-bottom, 0px) + 70px)) !important;
  }

  .casino-world-panel-scroll button,
  .casino-world-panel-scroll input,
  .casino-world-panel-scroll select,
  .casino-world-panel-scroll summary,
  .casino-world-panel-scroll [role="button"] {
    touch-action: manipulation !important;
  }

  .casino-map-drag-hint {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
  }
}

@media (max-width: 420px) {
  .casino-map-viewport {
    height: clamp(330px, 53dvh, 500px) !important;
    min-height: 330px !important;
  }
  .casino-world-stage {
    width: max(700px, 188vw) !important;
    min-width: max(700px, 188vw) !important;
    min-height: max(700px, 188vw) !important;
  }
}

/* JK.Games Professional V37 · Casino-Map echtes XY-Ziehen + feste Spiel-Fenster · 2026-07-26 */
.casino-location-modal {
  position: fixed;
  inset: 0;
  z-index: 45000;
  display: grid;
  place-items: center;
  padding:
    max(14px, calc(env(safe-area-inset-top, 0px) + 8px))
    max(14px, calc(env(safe-area-inset-right, 0px) + 8px))
    max(14px, calc(env(safe-area-inset-bottom, 0px) + 8px))
    max(14px, calc(env(safe-area-inset-left, 0px) + 8px));
  background: rgba(0, 0, 0, .76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overscroll-behavior: none;
  touch-action: none;
}

.casino-location-modal .casino-world-panel {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(760px, 100%) !important;
  height: min(880px, 100%) !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  border: 1px solid rgba(230, 197, 101, .52) !important;
  border-radius: 22px !important;
  background: linear-gradient(165deg, rgba(19, 16, 24, .995), rgba(6, 8, 9, .995)) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .82), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  animation: casinoLocationModalIn .2s ease both !important;
  touch-action: auto !important;
}

.casino-location-modal .casino-world-panel-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  flex: 0 0 auto !important;
  min-height: 64px !important;
  padding: 10px 12px !important;
  background: linear-gradient(180deg, rgba(45, 34, 18, .99), rgba(10, 10, 14, .99)) !important;
  border-bottom: 1px solid rgba(230, 197, 101, .26) !important;
}

.casino-location-modal .casino-world-panel-head .icon-button {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}

.casino-location-modal .casino-world-panel-scroll {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding: 12px 12px max(40px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
  contain: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(230,197,101,.5) transparent;
}

.casino-location-modal .casino-world-panel-scroll::-webkit-scrollbar {
  display: block !important;
  width: 5px !important;
}
.casino-location-modal .casino-world-panel-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(230,197,101,.5);
}

@keyframes casinoLocationModalIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  /* Die Karte wird nicht mehr über Browser-Scrollwerte bewegt, sondern direkt
     per transform. Dadurch funktioniert das Ziehen zuverlässig in X und Y. */
  .casino-map-viewport {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: clamp(340px, 56dvh, 540px) !important;
    min-height: 340px !important;
    max-height: 540px !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: none !important;
    cursor: grab !important;
  }

  .casino-map-viewport.is-panning {
    cursor: grabbing !important;
  }

  .casino-world-stage {
    position: relative !important;
    display: block !important;
    width: max(720px, 188vw) !important;
    min-width: max(720px, 188vw) !important;
    max-width: none !important;
    height: max(720px, 188vw) !important;
    min-height: max(720px, 188vw) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    transform: translate3d(0, 0, 0);
    transform-origin: 0 0;
    will-change: transform;
    touch-action: none !important;
  }

  .casino-world-stage > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important;
  }

  .casino-location-modal {
    place-items: stretch;
    padding:
      max(54px, calc(env(safe-area-inset-top, 0px) + 10px))
      max(7px, env(safe-area-inset-right, 0px))
      max(7px, env(safe-area-inset-bottom, 0px))
      max(7px, env(safe-area-inset-left, 0px));
  }

  .casino-location-modal .casino-world-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 20px 20px 14px 14px !important;
  }

  .casino-location-modal .casino-world-panel-scroll {
    padding: 10px 9px max(70px, calc(env(safe-area-inset-bottom, 0px) + 48px)) !important;
  }

  .casino-location-modal .casino-game-stable-root,
  .casino-location-modal .casino-table,
  .casino-location-modal .casino-service-card,
  .casino-location-modal .slots-machine-frame,
  .casino-location-modal .slot-machine {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  .casino-map-viewport {
    height: clamp(330px, 53dvh, 500px) !important;
    min-height: 330px !important;
  }
  .casino-world-stage {
    width: max(700px, 192vw) !important;
    min-width: max(700px, 192vw) !important;
    height: max(700px, 192vw) !important;
    min-height: max(700px, 192vw) !important;
  }
}

/* JK.Games PRO V38 · Online-/Finster-Verbindungsreparatur */
.finster-empty.finster-loading,
.finster-empty.finster-error {
  min-height:180px;
  display:grid;
  place-content:center;
  gap:8px;
  text-align:center;
}
.finster-empty.finster-loading::before {
  content:"";
  width:34px;
  height:34px;
  margin:0 auto 6px;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:#72d6a3;
  border-radius:50%;
  animation:finster-online-spin .8s linear infinite;
}
.finster-empty.finster-error {
  border:1px solid rgba(239,119,109,.28);
  background:rgba(74,20,20,.18);
}
.finster-empty.finster-error p {
  max-width:34rem;
  overflow-wrap:anywhere;
}
.finster-post img[data-finster-broken="1"],
.finster-profile-grid img[data-finster-broken="1"] {
  object-fit:cover;
  opacity:.78;
  filter:saturate(.55);
}
@keyframes finster-online-spin { to { transform:rotate(360deg); } }

/* JK.Games PRO V40 · Cloud-Spielstand Schutz und Wiederherstellung */
.cloud-load-gate,
.cloud-conflict-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  display: none;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(2, 9, 7, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cloud-load-gate.show,
.cloud-conflict-overlay { display: grid; }
.cloud-load-gate > section,
.cloud-conflict-overlay > section {
  width: min(560px, 100%);
  max-height: min(780px, calc(100dvh - 36px));
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(111, 225, 169, .25);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(20, 43, 34, .99), rgba(6, 17, 13, .99));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
.cloud-load-gate h2,
.cloud-conflict-overlay h2 { margin: 8px 0 10px; }
.cloud-load-gate p,
.cloud-conflict-overlay p { color: var(--muted); line-height: 1.55; }
.cloud-load-gate > section > div,
.cloud-conflict-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cloud-load-spinner {
  display: block;
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,.10);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cloud-load-spin .8s linear infinite;
}
@keyframes cloud-load-spin { to { transform: rotate(360deg); } }
.cloud-conflict-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.cloud-conflict-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.cloud-conflict-grid small { color: var(--accent); font-weight: 900; letter-spacing: .12em; }
.cloud-conflict-grid b { overflow-wrap: anywhere; }
.cloud-conflict-grid span { color: var(--muted); font-size: .78rem; line-height: 1.4; }
@media (max-width: 560px) {
  .cloud-load-gate,
  .cloud-conflict-overlay { padding-inline: 10px; }
  .cloud-load-gate > section,
  .cloud-conflict-overlay > section { padding: 18px 14px; border-radius: 20px; }
  .cloud-conflict-grid { grid-template-columns: 1fr; }
  .cloud-conflict-actions > button,
  .cloud-load-gate > section > div > button { width: 100%; }
}

/* JK.Games V41 · Finster/Finder Netzwerk- und Scrollstabilität */
html body .device-shell.device-active-finster .device-screen,
html body .device-shell.device-active-finster .device-screen.finster-host-screen {
  overflow: hidden !important;
  touch-action: auto !important;
  overscroll-behavior: none !important;
  padding: 0 !important;
}

html body .device-shell.device-active-finster .device-app-view,
html body .device-shell.device-active-finster .device-app-view > .finster-app {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body .device-shell.device-active-finster .finster-content {
  position: relative !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
}

html body .device-shell.device-active-finster .finster-nav {
  position: relative !important;
  bottom: auto !important;
}

.finster-post,
.finster-user-grid > article {
  contain: layout paint style;
}

.finster-image-button,
.finster-image-button img,
.finster-profile-grid img {
  min-height: 1px;
  background: #101a16;
}

@supports (content-visibility: auto) {
  .finster-feed > .finster-post {
    content-visibility: auto;
    contain-intrinsic-size: 620px;
  }
}

/* JK.Games Professional V42 · Finster Bildansicht + Haustier/Firebase-Shop-Fix · 2026-07-26 */
/* Finster.KL: Feed-Bilder werden vollständig in einer ruhigen 4:5-Fläche gezeigt.
   Dadurch werden Hochkant- und Querformatbilder nicht mehr stark herangezoomt. */
.finster-image-button {
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  aspect-ratio:4 / 5 !important;
  overflow:hidden !important;
  background:#080b0e !important;
}
.finster-image-button img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#080b0e !important;
}
.finster-post-detail .finster-image-button {
  aspect-ratio:auto !important;
  min-height:320px !important;
  max-height:min(72vh, 620px) !important;
}
.finster-post-detail .finster-image-button img,
.finster-post-detail img[data-finster-image-id] {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.finster-upload-preview img {
  object-fit:contain !important;
  object-position:center center !important;
  background:#080b0e !important;
}
.finster-profile-grid img {
  object-position:center center !important;
}

/* Haustier im Charakter-anpassen-Menü wieder direkt bei der Figur anzeigen. */
.character-overview-v15 .character-couple-v15 {
  position:relative !important;
  padding-bottom:58px !important;
}
.character-overview-v15 .character-pet-chip {
  display:grid !important;
  place-items:center !important;
  position:absolute !important;
  left:18px !important;
  bottom:4px !important;
  width:50px !important;
  min-width:50px !important;
  height:50px !important;
  padding:0 !important;
  border-radius:17px !important;
  border:1px solid rgba(122,231,179,.34) !important;
  background:linear-gradient(180deg,rgba(17,39,30,.98),rgba(8,19,15,.98)) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07) !important;
  z-index:40 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.character-overview-v15 .character-pet-chip .character-pet-emoji {
  display:block !important;
  font-size:32px !important;
  line-height:1 !important;
}
.character-overview-v15 .character-partner-pet-chip {
  left:auto !important;
  right:18px !important;
}
.character-person-card.character-person-card-v15.main,
.character-partner-card.character-person-card-v15.partner,
.character-empty-partner-v15 {
  position:relative !important;
}

.player-shop-online-state.connecting {
  border-color:rgba(126,182,255,.38) !important;
}
.player-shop-online-state.connecting strong {
  color:#b9d8ff !important;
}

@media (max-width:760px) {
  .finster-image-button {
    aspect-ratio:4 / 5 !important;
  }
  .finster-post-detail .finster-image-button {
    min-height:260px !important;
    max-height:65dvh !important;
  }
  .character-overview-v15 .character-couple-v15 {
    padding-bottom:52px !important;
  }
  .character-overview-v15 .character-pet-chip {
    left:10px !important;
    bottom:3px !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    border-radius:15px !important;
  }
  .character-overview-v15 .character-pet-chip .character-pet-emoji {
    font-size:28px !important;
  }
  .character-overview-v15 .character-partner-pet-chip {
    right:10px !important;
  }
}

/* Finder.KL V43 · direkte Match-Anfragen und Online-Chat */
.finder-nav button{position:relative}.finder-nav button em{position:absolute;right:5px;top:4px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#f06aa9;color:#fff;font-size:.62rem;font-style:normal;font-weight:1000;box-shadow:0 0 0 2px rgba(8,18,14,.78)}
.finder-incoming-v43{display:grid;gap:10px;margin:12px 0;padding:13px;border:1px solid rgba(240,106,169,.34);border-radius:18px;background:linear-gradient(145deg,rgba(91,25,62,.28),rgba(20,23,33,.92));box-shadow:0 12px 30px rgba(0,0,0,.18)}
.finder-incoming-v43>header{display:flex;align-items:center;justify-content:space-between;gap:10px}.finder-incoming-v43>header small{display:block;color:#f7a5ca;font-size:.62rem;font-weight:950;letter-spacing:.13em}.finder-incoming-v43>header h4{margin:2px 0 0;font-size:1rem}.finder-incoming-v43>header>span{display:grid;place-items:center;min-width:30px;height:30px;border-radius:999px;background:#f06aa9;color:#fff;font-weight:1000}.finder-incoming-v43>p{margin:0;color:var(--muted);font-size:.75rem;line-height:1.4}
.finder-incoming-v43>div{display:grid;gap:8px}.finder-incoming-v43 article{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(6,13,11,.7)}.finder-incoming-v43 .finder-avatar{width:58px;height:72px}.finder-incoming-v43 article section{min-width:0}.finder-incoming-v43 article b,.finder-incoming-v43 article small{display:block}.finder-incoming-v43 article small{margin-top:3px;color:var(--muted);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){.finder-incoming-v43 article{grid-template-columns:52px minmax(0,1fr)}.finder-incoming-v43 .finder-avatar{width:52px;height:66px}.finder-incoming-v43 article .mini-button{grid-column:1/-1;width:100%;min-height:38px}}


/* JK.Games V45 · Brand-, Icon- und Cottbus-Ladescreen */
.jk-loading-card {
  width:min(100%,760px) !important;
  padding:0 !important;
  gap:0 !important;
  overflow:hidden;
  border-color:rgba(230,197,101,.48) !important;
  border-radius:20px !important;
  background:#06100d !important;
  box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 0 1px rgba(105,210,160,.08) inset !important;
}
.jk-loading-scene {
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  min-height:320px;
  overflow:hidden;
  background:#06100d;
}
.jk-loading-scene > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.01);
}
.jk-loading-shade {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 55%,rgba(5,25,22,.12),rgba(3,12,10,.70) 72%),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.58));
  pointer-events:none;
}
.jk-loading-center {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:24px;
  text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.95);
}
.jk-loading-center .eyebrow {
  margin:0;
  color:#f0d47a;
  letter-spacing:.16em;
  font-weight:900;
}
.jk-loading-center h2 {
  margin:0;
  color:#fff9e8;
  font-size:clamp(1.3rem,4vw,2rem);
}
.jk-loading-center strong {
  color:#fff3b5 !important;
  font-size:1.1rem !important;
}
.jk-loading-spinner {
  width:76px;
  height:76px;
  margin-bottom:6px;
  border-radius:50%;
  border:6px solid rgba(255,255,255,.22);
  border-top-color:#e6c565;
  border-right-color:#69d2a0;
  box-shadow:0 0 28px rgba(230,197,101,.25),inset 0 0 18px rgba(0,0,0,.42);
  animation:jkGamesLoadingSpin .9s linear infinite;
}
.jk-loading-footer {
  display:grid;
  gap:10px;
  padding:16px 20px 20px;
  background:linear-gradient(180deg,#0b1814,#06100d);
}
.jk-loading-footer p {
  margin:0;
  text-align:center;
  color:#b9c6bc;
  font-size:.86rem;
}
@keyframes jkGamesLoadingSpin { to { transform:rotate(360deg); } }
@media (max-width:620px) {
  .loading-view { padding:10px; }
  .jk-loading-card { border-radius:16px !important; }
  .jk-loading-scene { min-height:0; aspect-ratio:4/3; }
  .jk-loading-spinner { width:62px; height:62px; border-width:5px; }
  .jk-loading-center { padding:16px; }
  .jk-loading-footer { padding:12px 14px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .jk-loading-spinner { animation-duration:1.8s; }
}


/* JK.Games PRO V47 · Startbild bei jedem Öffnen + stabile mobile Charaktergröße */
body.jk-booting {
  overflow:hidden !important;
  touch-action:none !important;
}
.jk-boot-splash {
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:100dvh;
  overflow:hidden;
  background:#030806;
  opacity:1;
  transition:opacity .38s ease, visibility .38s ease;
}
.jk-boot-splash.is-leaving {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.jk-boot-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.015);
}
.jk-boot-shade {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 53%,rgba(2,15,12,.12) 0,rgba(2,12,10,.42) 48%,rgba(1,7,6,.86) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.56));
  backdrop-filter:saturate(1.08);
  -webkit-backdrop-filter:saturate(1.08);
}
.jk-boot-center {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(520px,calc(100vw - 34px));
  padding:max(20px,env(safe-area-inset-top,0px)) 22px max(20px,env(safe-area-inset-bottom,0px));
  text-align:center;
  color:#fff8df;
  text-shadow:0 3px 18px rgba(0,0,0,.96);
}
.jk-boot-center p {
  margin:14px 0 2px;
  color:#f0d47a;
  font-size:.78rem;
  font-weight:1000;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.jk-boot-center h1 {
  margin:0 0 17px;
  color:#fffaf0;
  font-size:clamp(1.45rem,5vw,2.35rem);
  line-height:1.06;
}
.jk-boot-center strong {
  min-height:2.6em;
  margin-top:12px;
  color:#e5ece7;
  font-size:clamp(.76rem,2.6vw,.94rem);
  line-height:1.35;
}
.jk-boot-spinner {
  width:72px;
  height:72px;
  border:6px solid rgba(255,255,255,.20);
  border-top-color:#e6c565;
  border-right-color:#69d2a0;
  border-radius:50%;
  box-shadow:0 0 32px rgba(230,197,101,.28),inset 0 0 18px rgba(0,0,0,.45);
  animation:jkBootSpin .86s linear infinite;
}
.jk-boot-progress {
  width:min(360px,82vw);
  height:11px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(0,0,0,.48);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.58),0 4px 20px rgba(0,0,0,.24);
}
.jk-boot-progress span {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#69d2a0,#e6c565 64%,#fff2ae);
  box-shadow:0 0 18px rgba(230,197,101,.52);
  animation:jkBootProgress 4.2s linear forwards;
}
@keyframes jkBootSpin { to { transform:rotate(360deg); } }
@keyframes jkBootProgress { from { width:0; } to { width:100%; } }

/* Die Charakterübersicht darf auf kleinen Fenstern nicht mehr auf wenige Pixel
   zusammengestaucht werden. Der Dialog scrollt stattdessen, während die Figur
   mit einer festen, responsiven Mindesthöhe vollständig sichtbar bleibt. */
#detailDialog.character-dialog.character-overview-mode[open] {
  overflow:hidden !important;
}
#detailDialog.character-dialog.character-overview-mode .character-hub-content {
  overflow-y:auto !important;
  overflow-x:hidden !important;
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch !important;
}
#detailDialog.character-dialog.character-overview-mode .character-overview-card,
#detailDialog.character-dialog.character-overview-mode .character-overview-body-v15,
#detailDialog.character-dialog.character-overview-mode .character-stage-v15,
#detailDialog.character-dialog.character-overview-mode .character-couple-v15 {
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
#detailDialog.character-dialog.character-overview-mode .character-stage-v15 {
  min-height:360px !important;
  padding:14px 14px 24px !important;
  overflow:visible !important;
}
#detailDialog.character-dialog.character-overview-mode .character-couple.character-couple-v15,
#detailDialog.character-dialog.character-overview-mode .character-stage-v15.solo .character-couple-v15 {
  top:0 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start !important;
  width:100% !important;
  min-height:320px !important;
  margin:0 !important;
  gap:12px !important;
}
#detailDialog.character-dialog.character-overview-mode .character-person-card.character-person-card-v15,
#detailDialog.character-dialog.character-overview-mode .character-empty-partner-v15 {
  display:grid !important;
  grid-template-rows:auto 245px auto auto !important;
  align-self:start !important;
  width:100% !important;
  min-width:0 !important;
  min-height:315px !important;
  height:auto !important;
  max-height:none !important;
  padding:6px !important;
  overflow:visible !important;
}
#detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure {
  display:grid !important;
  place-items:end center !important;
  width:100% !important;
  min-width:0 !important;
  height:245px !important;
  min-height:245px !important;
  max-height:245px !important;
  overflow:visible !important;
}
#detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .avatar-card,
#detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .finder-avatar,
#detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure .avatar-svg,
#detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure svg {
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:245px !important;
  min-height:245px !important;
  max-height:245px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  overflow:visible !important;
}
#detailDialog.character-dialog.character-overview-mode .character-card-label-v15,
#detailDialog.character-dialog.character-overview-mode .character-card-name-v15,
#detailDialog.character-dialog.character-overview-mode .character-card-action-v15 {
  visibility:visible !important;
  opacity:1 !important;
}

@media (max-width:760px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-body-v15 {
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-tools-v15 { order:1 !important; }
  #detailDialog.character-dialog.character-overview-mode .character-stage-v15 { order:2 !important;min-height:338px !important;padding:10px 8px 20px !important; }
  #detailDialog.character-dialog.character-overview-mode .lbpet-character-selector { order:3 !important; }
  #detailDialog.character-dialog.character-overview-mode .character-couple.character-couple-v15,
  #detailDialog.character-dialog.character-overview-mode .character-stage-v15.solo .character-couple-v15 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    min-height:300px !important;
    gap:6px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-person-card.character-person-card-v15,
  #detailDialog.character-dialog.character-overview-mode .character-empty-partner-v15 {
    grid-template-rows:auto 225px auto auto !important;
    min-height:288px !important;
    padding:3px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .avatar-card,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .finder-avatar,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure .avatar-svg,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure svg {
    height:225px !important;
    min-height:225px !important;
    max-height:225px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-card-name-v15 { font-size:.82rem !important; }
  #detailDialog.character-dialog.character-overview-mode .character-card-action-v15 { font-size:.58rem !important; }
}
@media (max-width:390px) {
  #detailDialog.character-dialog.character-overview-mode .character-stage-v15 { min-height:310px !important; }
  #detailDialog.character-dialog.character-overview-mode .character-couple.character-couple-v15,
  #detailDialog.character-dialog.character-overview-mode .character-stage-v15.solo .character-couple-v15 { min-height:278px !important; }
  #detailDialog.character-dialog.character-overview-mode .character-person-card.character-person-card-v15,
  #detailDialog.character-dialog.character-overview-mode .character-empty-partner-v15 {
    grid-template-rows:auto 205px auto auto !important;
    min-height:265px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .avatar-card,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .finder-avatar,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure .avatar-svg,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure svg {
    height:205px !important;
    min-height:205px !important;
    max-height:205px !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .jk-boot-spinner { animation-duration:1.7s; }
}

/* JK.Games Professional V48 · Haustier-Icon in den Charakterbereich verschieben · 2026-07-26 */
/* Der untere Haustier-Kasten im Charakter-anpassen-Fenster entfällt.
   Stattdessen erscheint das aktive Haustier als klickbares Icon direkt beim Charakter. */
#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .lbpet-character-selector,
.character-overview-v15 .lbpet-character-selector {
  display:none !important;
}

#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-couple-v15,
.character-overview-v15 .character-couple-v15 {
  position:relative !important;
}

#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
.character-overview-v15 .character-pet-chip {
  display:flex !important;
  position:absolute !important;
  left:46% !important;
  bottom:56px !important;
  transform:translateX(-50%) !important;
  width:52px !important;
  min-width:52px !important;
  height:52px !important;
  border-radius:16px !important;
  border:1px solid rgba(239,205,113,.32) !important;
  background:linear-gradient(180deg,rgba(30,58,45,.94),rgba(12,26,20,.96)) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:9 !important;
  pointer-events:auto !important;
}

#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip:hover,
#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip:focus-visible,
.character-overview-v15 .character-pet-chip:hover,
.character-overview-v15 .character-pet-chip:focus-visible {
  transform:translateX(-50%) translateY(-2px) !important;
  border-color:rgba(239,205,113,.58) !important;
  outline:none !important;
}

#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip .character-pet-emoji,
.character-overview-v15 .character-pet-chip .character-pet-emoji {
  font-size:34px !important;
  line-height:1 !important;
}

#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-partner-pet-chip,
.character-overview-v15 .character-partner-pet-chip {
  left:74% !important;
}

@media (max-width:760px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    left:47% !important;
    bottom:50px !important;
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip .character-pet-emoji,
  .character-overview-v15 .character-pet-chip .character-pet-emoji {
    font-size:31px !important;
  }
}

@media (max-width:430px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    left:48% !important;
    bottom:44px !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
  }
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip .character-pet-emoji,
  .character-overview-v15 .character-pet-chip .character-pet-emoji {
    font-size:28px !important;
  }
}


/* JK.Games Professional V49 · Haustierposition und Gewerbe-Verwaltung · 2026-07-26 */
#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
.character-overview-v15 .character-pet-chip {
  left:38% !important;
  bottom:70px !important;
}

.business-license-fee-hint {
  margin:0;
  padding:12px 14px;
  border:1px solid rgba(230,197,101,.24);
  border-radius:14px;
  background:rgba(230,197,101,.08);
  color:#f0d77d;
  font-weight:800;
}
.business-license-manager .checkbox-card.is-owned {
  opacity:.74;
  border-color:rgba(105,210,160,.3);
  background:rgba(105,210,160,.06);
}
.business-license-manager .checkbox-card.is-owned input {
  accent-color:#69d2a0;
}

@media (max-width:760px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    left:38% !important;
    bottom:62px !important;
  }
}
@media (max-width:430px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    left:37% !important;
    bottom:58px !important;
  }
}

/* JK.Games Professional V50 · iPhone-artiges Telefon und Nachrichten · 2026-07-26 */
.ios-phone-app,
.ios-messages-app {
  display:grid;
  gap:10px;
  color:#f5f7f5;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ios-app-header {
  position:sticky;
  z-index:5;
  top:-10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:-10px -10px 0;
  padding:13px 14px 11px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(7,13,11,.94);
  backdrop-filter:blur(16px);
}
.ios-app-header div{display:grid;gap:1px}.ios-app-header small{color:#75e9b4;font-size:.55rem;font-weight:950;letter-spacing:.14em}.ios-app-header h3{margin:0;font-size:1.25rem;line-height:1.05}
.ios-online-dot{display:inline-flex;align-items:center;gap:5px;color:#72eeb7;font-size:.62rem;font-weight:900}.ios-online-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#42e697;box-shadow:0 0 10px rgba(66,230,151,.65)}

.ios-my-number {
  display:grid;
  gap:3px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
}
.ios-my-number span{color:rgba(255,255,255,.56);font-size:.6rem;font-weight:850;text-transform:uppercase;letter-spacing:.09em}.ios-my-number b{font-size:1rem}.ios-my-number small{color:#efce73;font-size:.66rem;line-height:1.35}

.ios-incoming-stack{display:grid;gap:8px}.ios-incoming-call{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:10px;border:1px solid rgba(78,237,151,.34);border-radius:17px;background:rgba(23,61,43,.76);box-shadow:0 0 22px rgba(53,219,138,.11)}.ios-incoming-call>div{display:grid;gap:1px}.ios-incoming-call small{color:#65efa8;font-size:.52rem;font-weight:950}.ios-incoming-call b{font-size:.8rem}.ios-incoming-call span{color:rgba(255,255,255,.58);font-size:.62rem}.ios-incoming-call button{min-height:36px;padding:0 10px;border:0;border-radius:999px;font-weight:900;font-size:.62rem}.ios-incoming-call .accept{background:#36d878;color:#031108}.ios-incoming-call .reject{background:#ff5f57;color:white}

.ios-dialer-card {
  display:grid;
  gap:11px;
  padding:13px;
  border-radius:22px;
  background:linear-gradient(155deg,rgba(20,31,27,.98),rgba(4,8,7,.98));
  border:1px solid rgba(255,255,255,.08);
}
.ios-dialer-card>input{width:100%;min-height:42px;border:0;border-bottom:1px solid rgba(255,255,255,.1);background:transparent;color:#fff;text-align:center;font-size:1.05rem;letter-spacing:.04em;outline:none}.ios-dialer-card>input::placeholder{color:rgba(255,255,255,.36)}
.ios-keypad{display:grid;grid-template-columns:repeat(3,58px);justify-content:center;gap:9px 18px}.ios-keypad button{display:grid;place-items:center;align-content:center;width:58px;height:58px;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:50%;background:rgba(255,255,255,.105);color:white;box-shadow:inset 0 1px rgba(255,255,255,.06)}.ios-keypad button:active{background:rgba(255,255,255,.23);transform:scale(.96)}.ios-keypad b{font-size:1.16rem;line-height:1}.ios-keypad small{min-height:8px;margin-top:2px;color:rgba(255,255,255,.62);font-size:.42rem;letter-spacing:.12em}
.ios-dial-actions{position:relative;display:grid;place-items:center}.ios-call-main{display:grid;place-items:center;width:58px;height:58px;border:0;border-radius:50%;background:#34c759;color:white;font-size:1.45rem;box-shadow:0 8px 20px rgba(52,199,89,.25)}.ios-key-delete{position:absolute;right:17%;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.72);font-size:1.05rem}

.ios-section{display:grid;gap:7px}.ios-section>header{display:flex;align-items:center;justify-content:space-between;padding:0 3px}.ios-section h4{margin:0;font-size:.86rem}.ios-section>header button{border:0;background:transparent;color:#64e4ad;font-size:.64rem;font-weight:850}
.ios-contact-list{display:grid;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(0,0,0,.18)}
.ios-contact-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.07)}.ios-contact-row:last-child{border-bottom:0}.ios-contact-row>div:nth-child(2){display:grid;gap:2px;min-width:0}.ios-contact-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}.ios-contact-row small{color:rgba(255,255,255,.5);font-size:.59rem}
.ios-contact-avatar{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:linear-gradient(145deg,hsl(var(--contact-hue) 72% 62%),hsl(var(--contact-hue) 65% 38%));color:white;font-size:.82rem;font-weight:950;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.ios-contact-actions{display:flex;gap:5px}.ios-round-action{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;font-size:.82rem}.ios-round-action.call{background:rgba(52,199,89,.18);color:#61e789}.ios-round-action.message{background:rgba(10,132,255,.18);color:#5db0ff}.ios-round-action.delete{background:rgba(255,69,58,.14);color:#ff6c64}
.ios-settings-fold{border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.035);overflow:hidden}.ios-settings-fold summary{padding:11px 13px;color:rgba(255,255,255,.82);font-size:.68rem;font-weight:850;cursor:pointer}.ios-settings-fold[open] summary{border-bottom:1px solid rgba(255,255,255,.07)}.ios-settings-fold>.phone-tone-settings,.ios-settings-fold>.phone-contact-form{margin:9px}.ios-end-call{min-height:44px;border:0;border-radius:14px;background:#ff453a;color:white;font-weight:950}

.ios-compose-new{display:grid;place-items:center;width:35px;height:35px;border:0;border-radius:50%;background:rgba(10,132,255,.18);color:#5ab0ff;font-size:1.05rem}
.ios-new-message{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.ios-new-message input{min-width:0;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.06);color:white;font:inherit;font-size:.68rem}.ios-new-message button{padding:0 13px;border:0;border-radius:14px;background:#0a84ff;color:white;font-weight:900;font-size:.63rem}
.ios-message-list{display:grid;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(0,0,0,.2);max-height:230px;overflow-y:auto;scrollbar-width:none}.ios-message-list::-webkit-scrollbar{display:none}.ios-message-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:10px;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:white;text-align:left}.ios-message-row:last-child{border-bottom:0}.ios-message-row.active{background:linear-gradient(90deg,rgba(10,132,255,.22),rgba(10,132,255,.06));box-shadow:inset 3px 0 #0a84ff}.ios-message-copy{display:grid;gap:3px;min-width:0}.ios-message-copy>span{display:flex;align-items:center;justify-content:space-between;gap:7px}.ios-message-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem}.ios-message-copy time{color:rgba(255,255,255,.42);font-size:.55rem}.ios-message-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.53);font-size:.6rem}.ios-message-row>em{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#0a84ff;color:#fff;font-size:.55rem;font-style:normal;font-weight:950}.ios-message-row>i{color:rgba(255,255,255,.28);font-size:1rem;font-style:normal}

.ios-chat-thread{display:grid;grid-template-rows:auto minmax(210px,1fr) auto;min-height:390px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:#050807}.ios-chat-thread>header{display:grid;grid-template-columns:30px 36px minmax(0,1fr) 34px;align-items:center;gap:7px;padding:9px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(17,22,20,.96)}.ios-chat-thread>header>button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(10,132,255,.15);color:#5ab0ff;font-size:1.45rem}.ios-chat-thread>header .ios-contact-avatar{width:36px;height:36px;flex-basis:36px;font-size:.72rem}.ios-chat-thread>header>div{display:grid;gap:1px;min-width:0}.ios-chat-thread>header b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}.ios-chat-thread>header small{color:rgba(255,255,255,.48);font-size:.54rem}.ios-chat-thread>header .ios-chat-call{font-size:.86rem;color:#63e790;background:rgba(52,199,89,.15)}
.ios-chat-bubbles{display:flex;flex-direction:column;gap:6px;min-height:210px;max-height:360px;padding:10px;overflow-y:auto;scrollbar-width:none}.ios-chat-bubbles::-webkit-scrollbar{display:none}.ios-chat-bubble{display:grid;gap:2px;align-self:flex-start;max-width:82%;padding:7px 10px;border-radius:16px 16px 16px 5px;background:#2b2d2c;color:white;font-size:.68rem;line-height:1.35;overflow-wrap:anywhere}.ios-chat-bubble.mine{align-self:flex-end;border-radius:16px 16px 5px 16px;background:#0a84ff}.ios-chat-bubble small{justify-self:end;color:rgba(255,255,255,.58);font-size:.46rem}.ios-chat-compose{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:end;gap:7px;padding:8px;border-top:1px solid rgba(255,255,255,.08);background:rgba(17,22,20,.96)}.ios-chat-compose textarea{width:100%;min-height:36px;max-height:90px;resize:none;padding:9px 11px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.07);color:white;font:inherit;font-size:.68rem}.ios-chat-compose button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#0a84ff;color:white;font-size:1rem;font-weight:950}
.ios-empty-state{display:grid;place-items:center;align-content:center;gap:4px;min-height:125px;padding:18px;text-align:center;color:rgba(255,255,255,.8)}.ios-empty-state span{font-size:1.65rem}.ios-empty-state b{font-size:.76rem}.ios-empty-state small{max-width:260px;color:rgba(255,255,255,.46);font-size:.58rem;line-height:1.4}.ios-empty-state.compact{min-height:95px}.ios-empty-state.large{min-height:250px}

@media (max-width:430px){
  .ios-keypad{grid-template-columns:repeat(3,54px);gap:8px 16px}.ios-keypad button{width:54px;height:54px}.ios-call-main{width:54px;height:54px}.ios-incoming-call{grid-template-columns:42px minmax(0,1fr);}.ios-incoming-call .accept,.ios-incoming-call .reject{grid-row:2;}.ios-incoming-call .accept{grid-column:1}.ios-incoming-call .reject{grid-column:2}.ios-chat-thread{min-height:360px}.ios-message-list{max-height:205px}
}


/* JK.Games Professional V51 · Haustier-Icon neben die Fuesse anheben · 2026-07-26 */
#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
.character-overview-v15 .character-pet-chip {
  left:43% !important;
  bottom:96px !important;
}

@media (max-width:760px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    left:43% !important;
    bottom:88px !important;
  }
}

@media (max-width:430px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    left:42% !important;
    bottom:80px !important;
  }
}

/* ========================================================================== 
   JK.Games Professional V52 · kompakte Kommunikation, Startbild, Haustier
   ========================================================================== */

/* Der technische Beschreibungskopf oberhalb der echten Telefon-App entfällt. */
.device-active-phone .device-app-view > h3,
.device-active-phone .device-app-view > p,
.phone-diagnostics,
[data-phone-diagnostics] {
  display:none !important;
}
.device-active-phone .device-app-view { padding-top:8px !important; }

/* Anrufe und SMS erscheinen ausschließlich als kompakter Banner ganz oben. */
.communication-toast-layer {
  top:max(7px, env(safe-area-inset-top)) !important;
  width:min(430px, calc(100vw - 14px)) !important;
  max-height:112px !important;
  gap:5px !important;
}
.communication-toast-layer > div { gap:5px !important; }
.communication-toast.v52-compact {
  width:100% !important;
  min-height:58px !important;
  max-height:70px !important;
  grid-template-columns:38px minmax(0,1fr) auto !important;
  gap:8px !important;
  padding:7px 9px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  cursor:pointer !important;
}
.communication-toast.v52-compact .communication-toast-icon {
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  padding:0 !important;
  border-radius:12px !important;
  font-size:1.02rem !important;
}
.communication-toast.v52-compact .communication-toast-copy { gap:1px !important; }
.communication-toast.v52-compact .communication-toast-copy small { font-size:.52rem !important; }
.communication-toast.v52-compact .communication-toast-copy strong { font-size:.78rem !important; }
.communication-toast.v52-compact .communication-toast-copy span { font-size:.61rem !important; }
.communication-toast.v52-compact .communication-toast-actions {
  display:flex !important;
  grid-column:auto !important;
  gap:5px !important;
}
.communication-toast.v52-compact .communication-toast-actions button {
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  font-size:.8rem !important;
}
.communication-toast-chevron {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:rgba(255,255,255,.72);
  font-size:1.4rem;
}

/* Aufgeklapptes Anruffenster – nur nach Tippen auf den oberen Banner. */
.jk-call-control-layer-v52 {
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:grid;
  place-items:center;
  padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));
  background:rgba(0,6,4,.68);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.jk-call-control-v52 {
  position:relative;
  display:grid;
  justify-items:center;
  gap:8px;
  width:min(360px,100%);
  padding:28px 18px 22px;
  border:1px solid rgba(97,232,169,.34);
  border-radius:28px;
  background:radial-gradient(circle at 50% 0,rgba(69,191,133,.22),transparent 38%),linear-gradient(165deg,#10261e,#04100c);
  box-shadow:0 28px 90px rgba(0,0,0,.7);
  color:#fff;
  text-align:center;
}
.jk-call-minimize-v52 {
  position:absolute;
  top:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:1.2rem;
}
.jk-call-avatar-v52 {
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border:1px solid rgba(112,238,183,.35);
  border-radius:24px;
  background:rgba(86,224,161,.13);
  font-size:2rem;
}
.jk-call-control-v52 > small { color:#70eeb7;font-size:.62rem;font-weight:950;letter-spacing:.13em; }
.jk-call-control-v52 h2 { margin:0;font-size:1.55rem; }
.jk-call-control-v52 p { min-height:1.4em;margin:0 0 10px;color:rgba(255,255,255,.66);font-size:.82rem; }
.jk-call-tools-v52 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:100%; }
.jk-call-tools-v52 button,
.jk-call-ringing-actions-v52 button {
  display:grid;
  place-items:center;
  gap:5px;
  min-height:82px;
  padding:10px 7px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:19px;
  background:rgba(255,255,255,.06);
  color:#fff;
}
.jk-call-tools-v52 button.active { background:rgba(101,226,166,.17);border-color:rgba(101,226,166,.35); }
.jk-call-tools-v52 button:disabled { opacity:.38; }
.jk-call-tools-v52 span,
.jk-call-ringing-actions-v52 span { font-size:1.35rem; }
.jk-call-tools-v52 small,
.jk-call-ringing-actions-v52 small { font-size:.58rem;font-weight:850; }
.jk-call-ringing-actions-v52 { display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%; }
.jk-call-ringing-actions-v52 .accept { background:rgba(52,211,112,.2);border-color:rgba(52,211,112,.44); }
.jk-call-ringing-actions-v52 .reject { background:rgba(255,91,83,.18);border-color:rgba(255,91,83,.4); }
.jk-call-end-v52 {
  display:grid;
  place-items:center;
  gap:4px;
  width:84px;
  height:84px;
  margin-top:10px;
  border:0;
  border-radius:50%;
  background:#ff5f57;
  color:#fff;
  box-shadow:0 12px 30px rgba(255,95,87,.24);
}
.jk-call-end-v52 span { font-size:1.45rem;transform:rotate(135deg); }
.jk-call-end-v52 small { font-size:.58rem;font-weight:900; }

/* SMS bleibt bei jeder Nachricht und jedem Firebase-Update an derselben Stelle. */
.device-active-sms .device-screen,
.ios-messages-app,
.ios-chat-thread,
.ios-chat-bubbles { overflow-anchor:none !important; }
.ios-chat-compose { position:sticky;bottom:0;z-index:3; }

/* Das Startbild zeigt die vollständige Cottbus-Tafel statt sie abzuschneiden. */
.jk-boot-splash::before {
  content:"";
  position:absolute;
  inset:-28px;
  background:url("assets/jk-games-loading-cottbus-v53.png") center/cover no-repeat;
  filter:blur(18px) brightness(.42) saturate(.9);
  transform:scale(1.08);
}
.jk-boot-image {
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:scale(.90) !important;
  z-index:1;
}
.jk-boot-shade { z-index:1; }
.jk-boot-center { z-index:2; }

/* Haustier-Icon: Unterkante bündig mit dem Fuß-/Schattenende, direkt daneben. */
#detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
.character-overview-v15 .character-pet-chip {
  left:45% !important;
  bottom:134px !important;
}
@media (max-width:760px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    left:45% !important;
    bottom:132px !important;
  }
}
@media (max-width:430px) {
  .communication-toast-layer { width:calc(100vw - 10px) !important; }
  .communication-toast.v52-compact { min-height:56px !important;max-height:66px !important;padding:6px 7px !important; }
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    left:46% !important;
    bottom:159px !important;
  }
  .jk-boot-image { transform:scale(.88) !important; }
}

/* JK.Games Professional V53 · Ladebild bestätigt + Haustier mobil 1 cm tiefer · 2026-07-26 */
/* Das Desktop-Layout bleibt unverändert. Auf Handy/Tablet wird das klickbare
   Haustier-Icon etwa 1 cm nach unten verschoben und bleibt neben den Füßen. */
@media (max-width:760px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    bottom:94px !important;
  }
}
@media (max-width:430px) {
  #detailDialog.character-dialog.character-overview-mode .character-overview-v15 .character-pet-chip,
  .character-overview-v15 .character-pet-chip {
    bottom:121px !important;
  }
}

/* JK.Games Professional V54 · Hochformat-Ladebild auf dem Handy bildschirmfüllend · 2026-07-27 */
/* Das bereitgestellte Hochformatbild füllt auf Smartphones die komplette sichtbare
   Fläche. Die frühere kleine, mittige Kartenansicht wird dort vollständig entfernt. */
@media (max-width:760px) {
  .jk-boot-splash {
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    padding:0 !important;
    background:#020604 !important;
  }
  .jk-boot-splash::before {
    content:none !important;
    display:none !important;
  }
  .jk-boot-image {
    position:absolute !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center top !important;
    transform:none !important;
    border:0 !important;
    border-radius:0 !important;
  }
  .jk-boot-shade {
    inset:0 !important;
    background:
      linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.12) 32%,rgba(0,0,0,.48) 100%),
      radial-gradient(circle at 50% 58%,rgba(1,10,8,.03),rgba(1,8,6,.32) 72%,rgba(0,0,0,.58) 100%) !important;
  }
  .jk-boot-center {
    width:min(94vw,520px) !important;
    padding-top:max(22px,env(safe-area-inset-top,0px)) !important;
    padding-bottom:max(24px,env(safe-area-inset-bottom,0px)) !important;
  }
}

@media (max-width:430px) and (orientation:portrait) {
  .jk-boot-image {
    width:100vw !important;
    height:100dvh !important;
    object-fit:cover !important;
    object-position:50% 0% !important;
    transform:none !important;
  }
}

/* JK.Games Professional V55 · Business Map auf iPhone mit XY-Verschiebung · 2026-07-27 */
.business-map-viewport {
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#0a150e;
  overscroll-behavior:contain;
}

.business-map-viewport.is-panning {
  cursor:grabbing;
}

@media (max-width:720px) {
  body.business-map-open {
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  .business-map-overlay {
    place-items:stretch !important;
    padding:
      max(44px, env(safe-area-inset-top, 0px))
      env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px) !important;
    background:#07100b !important;
  }

  .business-map-shell {
    width:100% !important;
    height:calc(100dvh - max(44px, env(safe-area-inset-top, 0px)) - env(safe-area-inset-bottom, 0px)) !important;
    min-height:0 !important;
    border-radius:0 !important;
    grid-template-rows:auto auto minmax(0,1fr) !important;
  }

  .business-map-toolbar {
    min-height:64px !important;
    padding:10px 12px 9px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
  }

  .business-map-toolbar > div {
    min-width:0 !important;
  }

  .business-map-toolbar strong {
    font-size:1.08rem !important;
    line-height:1.1 !important;
  }

  .business-map-toolbar small {
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .business-map-toolbar .icon-button {
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    align-self:center !important;
  }

  .business-map-status-strip {
    flex:none !important;
  }

  .business-map-viewport {
    width:100% !important;
    height:100% !important;
    overflow:auto !important;
    place-items:start !important;
    touch-action:none !important;
    cursor:grab;
    -webkit-overflow-scrolling:auto;
    scrollbar-width:none;
  }

  .business-map-viewport::-webkit-scrollbar {
    display:none;
  }

  .business-map-stage {
    flex:0 0 auto !important;
    width:clamp(820px,220vw,940px) !important;
    min-width:clamp(820px,220vw,940px) !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
    margin:0 !important;
    cursor:inherit !important;
    touch-action:none !important;
  }

  .business-map-stage > img {
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    image-rendering:auto !important;
  }

  .business-map-panel {
    left:max(8px, env(safe-area-inset-left, 0px)) !important;
    right:max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom:max(8px, env(safe-area-inset-bottom, 0px)) !important;
    height:min(64dvh,580px) !important;
  }
}

@media (min-width:721px) {
  .business-map-viewport {
    overflow:hidden;
  }

  .business-map-viewport .business-map-stage {
    width:min(100%,calc(100vh - 150px));
  }
}

/* ========================================================================== 
   JK.Games Professional V56 · eigene Fenster für Telefon, SMS und Notizen
   ========================================================================== */
.device-native-window-host-v56 .device-frame {
  position:relative !important;
}
.device-native-window-host-v56 .device-native-screen-v56 {
  position:relative !important;
  overflow:hidden !important;
  padding:0 !important;
}
.device-native-app-window-v56 {
  position:absolute !important;
  inset:4px !important;
  z-index:40 !important;
  display:block !important;
  margin:0 !important;
  padding:0 10px 14px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:23px !important;
  background:linear-gradient(180deg,#0c1512 0%,#050907 100%) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.04) !important;
  scrollbar-width:none !important;
}
.device-native-app-window-v56::-webkit-scrollbar { display:none !important; }
.device-native-app-window-v56 > h3,
.device-native-app-window-v56 > p,
.device-native-app-window-v56 > .device-hint {
  display:none !important;
}
.device-native-window-header-v56 {
  position:sticky !important;
  top:0 !important;
  z-index:60 !important;
  display:grid !important;
  grid-template-columns:40px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
  min-height:58px !important;
  margin:0 -10px 10px !important;
  padding:8px 10px !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
  background:rgba(10,16,14,.94) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
.device-native-close-v56,
.device-native-done-v56 {
  border:0 !important;
  color:#63adff !important;
  background:transparent !important;
  font-weight:850 !important;
}
.device-native-close-v56 {
  display:grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  background:rgba(10,132,255,.13) !important;
  font-size:1.8rem !important;
  line-height:1 !important;
}
.device-native-done-v56 {
  padding:8px 3px !important;
  font-size:.7rem !important;
}
.device-native-window-title-v56 {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-width:0 !important;
  text-align:center !important;
}
.device-native-window-title-v56 > span {
  display:grid !important;
  place-items:center !important;
  width:31px !important;
  height:31px !important;
  border-radius:10px !important;
  background:linear-gradient(145deg,#f1d660,#50d79e) !important;
  color:#07100d !important;
  font-size:.88rem !important;
}
.device-native-window-title-v56 > div { min-width:0 !important; }
.device-native-window-title-v56 small {
  display:block !important;
  color:rgba(255,255,255,.48) !important;
  font-size:.48rem !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
}
.device-native-window-title-v56 b {
  display:block !important;
  overflow:hidden !important;
  color:#fff !important;
  font-size:.75rem !important;
  line-height:1.2 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.device-native-app-window-v56 .ios-phone-app,
.device-native-app-window-v56 .ios-messages-app {
  min-height:calc(100% - 68px) !important;
  margin:0 !important;
  padding:0 0 10px !important;
  border:0 !important;
  background:transparent !important;
}
.device-native-notes-v56 .device-notes {
  margin-top:4px !important;
}
.device-native-notes-v56 .device-notes textarea {
  min-height:180px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.055) !important;
}
.device-native-notes-v56 .device-notes-list {
  max-height:none !important;
  overflow:visible !important;
}
.device-home-bar-active-v56 {
  cursor:pointer !important;
}

/* Innerhalb der drei System-Apps wird nicht mehr zur App-Liste zurückgescrollt. */
.device-active-phone .device-screen,
.device-active-sms .device-screen,
.device-active-notes .device-screen {
  overflow:hidden !important;
  touch-action:pan-y !important;
}

@media (max-width:430px) {
  .device-native-app-window-v56 {
    inset:2px !important;
    border-radius:21px !important;
  }
  .device-native-window-header-v56 {
    min-height:54px !important;
    margin-bottom:7px !important;
  }
  .device-native-app-window-v56 .ios-keypad {
    gap:7px 15px !important;
  }
}

/* ========================================================================== 
   JK.Games Professional V57 · Charakterbereich oben, Bearbeitung darunter
   ========================================================================== */
/* Der Charakterbereich steht direkt unter dem Profil. Die Auswahl der
   Bearbeitungsbereiche folgt darunter. Das Haustier bleibt Bestandteil der
   Charakterbühne und wandert deshalb gemeinsam mit der Figur nach oben. */
#detailDialog.character-dialog.character-overview-mode .character-overview-body-v15,
.character-overview-v15 .character-overview-body-v15 {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
}

#detailDialog.character-dialog.character-overview-mode .character-overview-body-v15 > .character-stage-v15,
.character-overview-v15 .character-overview-body-v15 > .character-stage-v15 {
  order:1 !important;
}

#detailDialog.character-dialog.character-overview-mode .character-overview-body-v15 > .character-tools-v15,
.character-overview-v15 .character-overview-body-v15 > .character-tools-v15 {
  order:2 !important;
}

#detailDialog.character-dialog.character-overview-mode .character-overview-body-v15 > .lbpet-character-selector,
.character-overview-v15 .character-overview-body-v15 > .lbpet-character-selector {
  order:3 !important;
}

/* Auf kleinen Bildschirmen wird nichts zusammengestaucht. Der Dialog scrollt
   nach unten zu den Werkzeugen, während Figur, Füße und Haustier vollständig
   innerhalb der Charakterbühne bleiben. */
#detailDialog.character-dialog.character-overview-mode .character-hub-content {
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-top:8px !important;
}

@media (max-width:760px) {
  #detailDialog.character-dialog.character-overview-mode .character-stage-v15 {
    min-height:350px !important;
    padding:10px 8px 22px !important;
  }

  #detailDialog.character-dialog.character-overview-mode .character-couple.character-couple-v15,
  #detailDialog.character-dialog.character-overview-mode .character-stage-v15.solo .character-couple-v15 {
    min-height:305px !important;
  }

  #detailDialog.character-dialog.character-overview-mode .character-person-card.character-person-card-v15,
  #detailDialog.character-dialog.character-overview-mode .character-empty-partner-v15 {
    grid-template-rows:auto 228px auto auto !important;
    min-height:292px !important;
  }

  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .avatar-card,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .finder-avatar,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure .avatar-svg,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure svg {
    height:228px !important;
    min-height:228px !important;
    max-height:228px !important;
  }
}

@media (max-width:390px) {
  #detailDialog.character-dialog.character-overview-mode .character-stage-v15 {
    min-height:326px !important;
  }

  #detailDialog.character-dialog.character-overview-mode .character-couple.character-couple-v15,
  #detailDialog.character-dialog.character-overview-mode .character-stage-v15.solo .character-couple-v15 {
    min-height:282px !important;
  }

  #detailDialog.character-dialog.character-overview-mode .character-person-card.character-person-card-v15,
  #detailDialog.character-dialog.character-overview-mode .character-empty-partner-v15 {
    grid-template-rows:auto 207px auto auto !important;
    min-height:269px !important;
  }

  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .avatar-card,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure > .finder-avatar,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure .avatar-svg,
  #detailDialog.character-dialog.character-overview-mode .character-person-card-v15 .character-person-figure svg {
    height:207px !important;
    min-height:207px !important;
    max-height:207px !important;
  }
}

/* ========================================================================== 
   JK.Games Professional V58 · Premium-Bank-App
   ========================================================================== */
.device-active-bank .device-screen {
  overflow:hidden !important;
  touch-action:pan-y !important;
}
.device-native-bank-v58 {
  padding:0 0 18px !important;
  border-color:rgba(85,143,255,.24) !important;
  background:#06100e !important;
}
.device-native-bank-v58 > h3,
.device-native-bank-v58 > p,
.device-native-bank-v58 > .device-hint {
  display:none !important;
}
.device-native-bank-header-v58 {
  margin:0 !important;
  background:rgba(4,12,22,.96) !important;
  border-bottom-color:rgba(83,137,255,.25) !important;
}
.device-native-bank-header-v58 .device-native-window-title-v56 > span {
  background:linear-gradient(145deg,#1769e0,#58b6ff) !important;
  color:#fff !important;
}
.jk-bank-app-v58 {
  --bank-blue:#135dd7;
  --bank-deep:#101f70;
  --bank-night:#071349;
  --bank-ink:#06100e;
  position:relative;
  display:grid;
  gap:11px;
  min-height:calc(100% - 58px);
  padding:0 9px 76px;
  color:#f8fbff;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.jk-bank-hero-v58 {
  position:relative;
  overflow:hidden;
  margin:0 -9px;
  padding:20px 18px 22px;
  border-radius:0 0 29px 29px;
  background:
    radial-gradient(circle at 22% 24%,rgba(55,120,255,.42),transparent 27%),
    radial-gradient(circle at 82% 58%,rgba(69,50,174,.42),transparent 34%),
    linear-gradient(145deg,#173997 0%,#101f70 52%,#0a1249 100%);
  box-shadow:0 18px 32px rgba(0,0,0,.34);
}
.jk-bank-hero-v58::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 35%,rgba(255,255,255,.025));
}
.jk-bank-hero-top-v58 {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:19px;
  font-size:.61rem;
  font-weight:850;
}
.jk-bank-hero-top-v58 i {
  color:#78e7ae;
  font-style:normal;
}
.jk-bank-hero-v58 > small {
  position:relative;
  z-index:1;
  display:block;
  color:rgba(255,255,255,.68);
  font-size:.62rem;
  letter-spacing:.08em;
}
.jk-bank-hero-v58 > h2 {
  position:relative;
  z-index:1;
  margin:3px 0 1px;
  color:#fff;
  font-size:clamp(2rem,10vw,3.05rem);
  line-height:1;
  letter-spacing:-.055em;
}
.jk-bank-hero-v58 > p {
  position:relative;
  z-index:1;
  margin:8px 0 15px;
  color:rgba(255,255,255,.64);
  font-size:.58rem;
}
.jk-bank-chart-v58 {
  position:relative;
  z-index:1;
  padding:9px 0 2px;
}
.jk-bank-chart-v58 svg {
  display:block;
  width:100%;
  height:112px;
  overflow:visible;
}
.jk-bank-chart-v58 > div {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:-2px;
}
.jk-bank-chart-v58 > div span {
  display:grid;
  gap:2px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(2,10,45,.32);
}
.jk-bank-chart-v58 small {
  color:rgba(255,255,255,.56);
  font-size:.48rem;
}
.jk-bank-chart-v58 b {
  font-size:.7rem;
}
.jk-bank-quick-v58 {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:13px;
}
.jk-bank-quick-v58 button {
  display:grid;
  place-items:center;
  gap:5px;
  min-width:0;
  padding:0;
  border:0;
  color:#fff;
  background:transparent;
}
.jk-bank-quick-v58 button span {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:rgba(255,255,255,.055);
  font-size:1.35rem;
}
.jk-bank-quick-v58 button b {
  font-size:.57rem;
}
.jk-bank-white-card-v58 {
  overflow:hidden;
  border:1px solid rgba(124,160,191,.16);
  border-radius:19px;
  background:linear-gradient(160deg,rgba(18,33,31,.98),rgba(8,17,16,.98));
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.jk-bank-white-card-v58 > header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 9px;
}
.jk-bank-white-card-v58 > header small {
  display:block;
  color:#6ea3ff;
  font-size:.47rem;
  font-weight:900;
  letter-spacing:.13em;
}
.jk-bank-white-card-v58 > header h3 {
  margin:2px 0 0;
  font-size:.93rem;
}
.jk-bank-white-card-v58 > header button {
  min-width:34px;
  min-height:34px;
  padding:6px 9px;
  border:0;
  border-radius:12px;
  color:#6daaff;
  background:rgba(20,94,211,.14);
  font-weight:900;
}
.jk-bank-account-row-v58 {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  padding:12px 14px 15px;
  border:0;
  color:#fff;
  background:transparent;
  text-align:left;
}
.jk-bank-account-row-v58 > span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:12px;
  color:#77b4ff;
  background:rgba(19,93,215,.15);
}
.jk-bank-account-row-v58 > div {
  display:grid;
  gap:2px;
  min-width:0;
}
.jk-bank-account-row-v58 b {font-size:.74rem}
.jk-bank-account-row-v58 small {
  overflow:hidden;
  color:rgba(255,255,255,.45);
  font-size:.47rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.jk-bank-account-row-v58 strong {
  font-size:.78rem;
}
.jk-bank-stat-grid-v58 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.055);
}
.jk-bank-stat-grid-v58 article {
  display:grid;
  gap:3px;
  padding:11px 13px;
  background:#0c1816;
}
.jk-bank-stat-grid-v58 small {color:rgba(255,255,255,.45);font-size:.48rem}
.jk-bank-stat-grid-v58 b {font-size:.7rem}
.jk-bank-activity-list-v58 {display:grid}
.jk-bank-activity-list-v58.compact .jk-bank-activity-row-v58:nth-child(n+5) {display:none}
.jk-bank-activity-row-v58 {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border-top:1px solid rgba(255,255,255,.065);
}
.jk-bank-activity-row-v58 > span {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  font-weight:950;
}
.jk-bank-activity-row-v58.incoming > span {color:#73e4a7;background:rgba(52,199,89,.13)}
.jk-bank-activity-row-v58.outgoing > span {color:#78afff;background:rgba(10,132,255,.13)}
.jk-bank-activity-row-v58 > div {display:grid;gap:2px;min-width:0}
.jk-bank-activity-row-v58 b {overflow:hidden;font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}
.jk-bank-activity-row-v58 small {overflow:hidden;color:rgba(255,255,255,.42);font-size:.47rem;text-overflow:ellipsis;white-space:nowrap}
.jk-bank-activity-row-v58 strong {font-size:.62rem;white-space:nowrap}
.jk-bank-activity-row-v58.incoming strong {color:#73e4a7}
.jk-bank-activity-row-v58.outgoing strong {color:#fff}
.jk-bank-bottom-nav-v58 {
  position:sticky;
  bottom:-18px;
  z-index:50;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  margin:4px -9px -18px;
  padding:8px 7px calc(11px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(255,255,255,.09);
  background:rgba(5,11,10,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.jk-bank-bottom-nav-v58 button {
  display:grid;
  place-items:center;
  gap:2px;
  min-width:0;
  padding:4px 1px;
  border:0;
  color:rgba(255,255,255,.42);
  background:transparent;
}
.jk-bank-bottom-nav-v58 button span {font-size:1.1rem;line-height:1}
.jk-bank-bottom-nav-v58 button b {font-size:.43rem}
.jk-bank-bottom-nav-v58 button.active {color:#5da8ff}
.jk-bank-light-page-v58 {
  padding-top:4px;
  color:#f7fbff;
  background:linear-gradient(180deg,#07110f,#050908);
}
.jk-bank-page-head-v58 {
  position:relative;
  display:grid;
  gap:4px;
  padding:12px 7px 10px;
}
.jk-bank-page-head-v58 > small {color:#6ea9ff;font-size:.5rem;font-weight:950;letter-spacing:.14em}
.jk-bank-page-head-v58 h2 {margin:0;font-size:1.55rem;letter-spacing:-.035em}
.jk-bank-page-head-v58 p {margin:2px 0 0;color:rgba(255,255,255,.58);font-size:.62rem;line-height:1.48}
.jk-bank-page-head-v58 p b {color:#fff}
.jk-bank-inline-back-v58 {
  position:absolute;
  top:4px;
  right:3px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  color:#68aaff;
  background:rgba(19,93,215,.14);
  font-size:1.55rem;
}
.jk-bank-transfer-choice-v58,.jk-bank-service-list-v58 {display:grid;gap:10px}
.jk-bank-transfer-choice-v58 > button,.jk-bank-service-list-v58 > button {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  width:100%;
  padding:14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  color:#fff;
  background:linear-gradient(145deg,rgba(20,35,32,.97),rgba(8,17,15,.98));
  text-align:left;
}
.jk-bank-transfer-choice-v58 > button.primary {border-color:rgba(72,140,255,.35);background:linear-gradient(145deg,#135dd7,#153b9c)}
.jk-bank-transfer-choice-v58 > button > span,.jk-bank-service-list-v58 > button > span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  color:#72b2ff;
  background:rgba(19,93,215,.14);
  font-size:1.25rem;
}
.jk-bank-transfer-choice-v58 > button.primary > span {color:#fff;background:rgba(255,255,255,.15)}
.jk-bank-transfer-choice-v58 button div,.jk-bank-service-list-v58 button div {display:grid;gap:3px;min-width:0}
.jk-bank-transfer-choice-v58 b,.jk-bank-service-list-v58 b {font-size:.72rem}
.jk-bank-transfer-choice-v58 small,.jk-bank-service-list-v58 small {color:rgba(255,255,255,.48);font-size:.52rem;line-height:1.35}
.jk-bank-transfer-choice-v58 i,.jk-bank-service-list-v58 i {color:#66a9ff;font-size:1.2rem;font-style:normal}
.jk-bank-service-list-v58 button:disabled {opacity:.42}
.jk-bank-info-v58 {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  padding:13px;
  border:1px solid rgba(62,168,208,.2);
  border-radius:17px;
  background:rgba(31,127,160,.1);
}
.jk-bank-info-v58 > span {display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#71d7ef;background:rgba(74,184,216,.18);font-weight:950}
.jk-bank-info-v58 b {font-size:.67rem}
.jk-bank-info-v58 p {margin:4px 0 0;color:rgba(255,255,255,.58);font-size:.53rem;line-height:1.45}
.jk-bank-transfer-form-v58 {display:grid;gap:12px;padding:4px 1px}
.jk-bank-transfer-form-v58 > label {display:grid;gap:6px}
.jk-bank-transfer-form-v58 > label > span,.jk-bank-transfer-form-v58 legend {color:rgba(255,255,255,.56);font-size:.54rem;font-weight:850}
.jk-bank-transfer-form-v58 select,.jk-bank-transfer-form-v58 input[type="text"],.jk-bank-transfer-form-v58 input[type="number"] {
  width:100%;
  min-height:47px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  color:#fff;
  background:#101c1a;
  font:inherit;
  font-size:.7rem;
}
.jk-bank-transfer-form-v58 select option {color:#111;background:#fff}
.jk-bank-money-input-v58 {position:relative}
.jk-bank-money-input-v58 input {padding-right:42px !important;font-size:1.25rem !important;font-weight:900 !important}
.jk-bank-money-input-v58 > b {position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1rem}
.jk-bank-reload-players-v58 {
  justify-self:start;
  margin-top:-5px;
  padding:6px 9px;
  border:0;
  border-radius:10px;
  color:#67a9ff;
  background:rgba(19,93,215,.12);
  font-size:.5rem;
  font-weight:850;
}
.jk-bank-transfer-form-v58 fieldset {display:grid;gap:8px;margin:0;padding:0;border:0}
.jk-bank-transfer-type-v58 {
  display:grid !important;
  grid-template-columns:18px 38px minmax(0,1fr) !important;
  align-items:center;
  gap:9px !important;
  padding:12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:#0d1917;
}
.jk-bank-transfer-type-v58.active {border-color:#3f8dff;background:rgba(19,93,215,.12)}
.jk-bank-transfer-type-v58 input {accent-color:#347eea}
.jk-bank-transfer-type-v58 > span {display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#72b1ff;background:rgba(19,93,215,.14)}
.jk-bank-transfer-type-v58 > div {display:grid;gap:2px}
.jk-bank-transfer-type-v58 b {font-size:.66rem}
.jk-bank-transfer-type-v58 small {color:rgba(255,255,255,.45);font-size:.5rem}
.jk-bank-online-state-v58 {margin:0;padding:9px 11px;border-radius:12px;color:#75e6aa;background:rgba(52,199,89,.1);font-size:.54rem;font-weight:800}
.jk-bank-online-state-v58.error {color:#ff8e88;background:rgba(255,69,58,.1)}
.jk-bank-send-v58 {
  min-height:49px;
  border:0;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(135deg,#1767df,#1347aa);
  box-shadow:0 10px 24px rgba(14,78,189,.28);
  font-size:.75rem;
  font-weight:950;
}
.jk-bank-filter-row-v58 {display:flex;gap:7px}
.jk-bank-filter-row-v58 button {padding:8px 12px;border:1px solid rgba(255,255,255,.09);border-radius:999px;color:#72adff;background:rgba(19,93,215,.1);font-size:.53rem;font-weight:850}
.jk-bank-filter-row-v58 button.active {color:#fff;background:#155dd3}
.jk-bank-empty-v58 {display:grid;place-items:center;gap:5px;min-height:170px;padding:22px;text-align:center}
.jk-bank-empty-v58 span {font-size:1.7rem;color:#6aaaff}
.jk-bank-empty-v58 b {font-size:.72rem}
.jk-bank-empty-v58 small {max-width:230px;color:rgba(255,255,255,.44);font-size:.52rem;line-height:1.4}
.jk-bank-locked-v58 {place-items:center;align-content:center;min-height:380px;text-align:center}
.jk-bank-locked-v58 > span {display:grid;place-items:center;width:66px;height:66px;border-radius:20px;color:#74b2ff;background:rgba(19,93,215,.14);font-size:1.8rem}
.jk-bank-locked-v58 h2 {margin:8px 0 0;font-size:1.2rem}
.jk-bank-locked-v58 p {max-width:260px;margin:0;color:rgba(255,255,255,.53);font-size:.62rem;line-height:1.5}
.fc-bank-panel.locked {opacity:.72;border-style:dashed !important}
.fc-bank-panel.locked .primary-button:disabled {opacity:.55;cursor:not-allowed}

@media (max-width:430px) {
  .jk-bank-app-v58 {padding-left:7px;padding-right:7px}
  .jk-bank-hero-v58 {margin-left:-7px;margin-right:-7px;padding:17px 14px 20px}
  .jk-bank-chart-v58 svg {height:96px}
  .jk-bank-quick-v58 button span {width:47px;height:47px}
  .jk-bank-bottom-nav-v58 {margin-left:-7px;margin-right:-7px}
}


/* ========================================================================== 
   JK.Games Professional V59 · Empfängersuche, Bankkontakte und Button-Effekt
   ========================================================================== */
.jk-bank-recipient-search-v59,
.jk-bank-saved-contacts-v59 {
  display:grid;
  gap:9px;
  padding:12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:linear-gradient(155deg,rgba(17,31,29,.98),rgba(7,15,14,.99));
}
.jk-bank-recipient-search-v59 label {display:grid;gap:6px}
.jk-bank-recipient-search-v59 label>span {color:rgba(255,255,255,.62);font-size:.56rem;font-weight:900}
.jk-bank-recipient-search-v59 label>div {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
.jk-bank-recipient-search-v59 input[type="search"] {
  width:100%;min-height:45px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  color:#fff;background:#101c1a;font:inherit;font-size:.68rem;outline:none;
}
.jk-bank-recipient-search-v59 input[type="search"]:focus {border-color:#4b93ff;box-shadow:0 0 0 3px rgba(47,126,246,.13)}
.jk-bank-recipient-search-v59 [data-jk-bank-search] {
  min-width:68px;border:0;border-radius:14px;color:#fff;background:#1768df;font-size:.58rem;font-weight:950;
}
.jk-bank-search-results-v59 {display:grid;gap:7px}
.jk-bank-search-empty-v59 {display:grid;place-items:center;gap:4px;min-height:72px;padding:10px;text-align:center;color:rgba(255,255,255,.72)}
.jk-bank-search-empty-v59.compact {min-height:62px}
.jk-bank-search-empty-v59 b {font-size:.62rem}
.jk-bank-search-empty-v59 small {color:rgba(255,255,255,.44);font-size:.49rem;line-height:1.4}
.jk-bank-search-result-v59 {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:1px solid rgba(90,151,255,.16);border-radius:14px;background:rgba(16,32,30,.88)}
.jk-bank-search-result-v59>div {display:grid;gap:2px;min-width:0}
.jk-bank-search-result-v59 b {overflow:hidden;font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}
.jk-bank-search-result-v59 small {overflow:hidden;color:rgba(255,255,255,.44);font-size:.46rem;text-overflow:ellipsis;white-space:nowrap}
.jk-bank-search-result-v59 button {padding:8px 10px;border:0;border-radius:11px;color:#fff;background:#1768df;font-size:.5rem;font-weight:900}
.jk-bank-search-result-v59 button:disabled {color:#76e4ac;background:rgba(52,199,89,.13)}
.jk-bank-saved-contacts-v59>header {display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.jk-bank-saved-contacts-v59>header small {color:#6faaff;font-size:.45rem;font-weight:950;letter-spacing:.12em}
.jk-bank-saved-contacts-v59>header h3 {margin:2px 0 0;font-size:.82rem}
.jk-bank-saved-contacts-v59>header>span {max-width:48%;color:rgba(255,255,255,.45);font-size:.44rem;text-align:right;overflow-wrap:anywhere}
.jk-bank-saved-contacts-v59>div {display:grid;gap:6px}
.jk-bank-contact-v59 {display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:stretch;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#0c1816}
.jk-bank-contact-v59.active {border-color:#438cff;background:rgba(22,92,203,.13);box-shadow:inset 3px 0 #438cff}
.jk-bank-contact-v59>button:first-child {display:grid;grid-template-columns:22px minmax(0,1fr) 18px;align-items:center;gap:7px;padding:10px;border:0;color:#fff;background:transparent;text-align:left}
.jk-bank-contact-v59>button:first-child>span {color:#68dfa1;font-size:.65rem}
.jk-bank-contact-v59>button:first-child>div {display:grid;gap:2px;min-width:0}
.jk-bank-contact-v59 b {font-size:.62rem}
.jk-bank-contact-v59 small {overflow:hidden;color:rgba(255,255,255,.43);font-size:.45rem;text-overflow:ellipsis;white-space:nowrap}
.jk-bank-contact-v59 i {color:#69aaff;font-style:normal}
.jk-bank-contact-v59 .remove {border:0;border-left:1px solid rgba(255,255,255,.07);color:#ff817b;background:rgba(255,69,58,.07);font-size:1rem}
.jk-bank-instant-fee-v59 {display:none;margin-top:3px;color:#ffd36d;font-size:.48rem;font-style:normal;font-weight:900}
.jk-bank-transfer-type-v58.active .jk-bank-instant-fee-v59 {display:block}
.jk-bank-send-v58:disabled {opacity:.45;box-shadow:none}

/* Weiße Lichtspur von links nach rechts für Bank-Aktionen. */
.jk-bank-app-v58 button {position:relative;isolation:isolate;overflow:hidden}
.jk-bank-app-v58 button::after {
  content:"";position:absolute;z-index:8;top:-35%;bottom:-35%;left:-55%;width:28%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
  transform:skewX(-18deg) translateX(-260%);opacity:0;
}
.jk-bank-app-v58 button.jk-bank-action-flash-v59::after {animation:jkBankActionFlashV59 .58s ease-out}
@keyframes jkBankActionFlashV59 {
  0%{transform:skewX(-18deg) translateX(-260%);opacity:0}
  12%{opacity:.88}
  100%{transform:skewX(-18deg) translateX(720%);opacity:0}
}

@media (max-width:430px) {
  .jk-bank-recipient-search-v59,.jk-bank-saved-contacts-v59 {padding:10px}
  .jk-bank-recipient-search-v59 label>div {grid-template-columns:minmax(0,1fr) 62px}
}

/* JK.Games Professional V61 · Grafik-Ladebild, kompakte Statusfelder · 2026-07-27 */
/* Beim Wechsel der Grafikstufe wird auf Mobilgeräten derselbe bildschirmfüllende
   Hochformat-Ladescreen wie beim regulären App-Start verwendet. */
@media (max-width:760px) {
  #setupScreen .loading-view:not(.hidden) {
    position:fixed !important;
    inset:0 !important;
    z-index:2147483600 !important;
    display:block !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#020604 !important;
  }
  #setupScreen .loading-view.hidden { display:none !important; }
  #setupScreen .loading-view .jk-loading-card {
    position:relative !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#020604 !important;
  }
  #setupScreen .loading-view .jk-loading-scene {
    position:absolute !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    aspect-ratio:auto !important;
  }
  #setupScreen .loading-view .jk-loading-scene > img {
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center top !important;
    transform:none !important;
  }
  #setupScreen .loading-view .jk-loading-center {
    inset:0 !important;
    padding:max(24px,env(safe-area-inset-top,0px)) 18px max(120px,calc(96px + env(safe-area-inset-bottom,0px))) !important;
  }
  #setupScreen .loading-view .jk-loading-footer {
    position:absolute !important;
    left:5vw !important;
    right:5vw !important;
    bottom:max(28px,calc(18px + env(safe-area-inset-bottom,0px))) !important;
    z-index:4 !important;
    padding:12px 10px !important;
    border-radius:18px !important;
    background:rgba(3,12,10,.56) !important;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
}

/* Kleine, sauber zentrierte Statusbeschriftungen im mobilen Dashboard. */
@media (max-width:600px) {
  .meters .meter.status-action {
    min-height:43px !important;
    padding:7px 5px !important;
    align-content:center !important;
    justify-items:center !important;
    text-align:center !important;
    gap:5px !important;
  }
  .meters .meter.status-action > span,
  .meters .meter.status-action > span > span,
  .meters .dashboard-shortcut.upcoming > span {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    color:var(--muted) !important;
    font-size:clamp(.58rem,2.65vw,.72rem) !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    letter-spacing:.01em !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .meters .meter.status-action progress {
    display:block !important;
    width:92% !important;
    margin:0 auto !important;
  }
  .meters .dashboard-shortcut.upcoming {
    justify-items:center !important;
    text-align:center !important;
    padding:6px 4px !important;
  }
}


/* JK.Games Professional V62 · Einstellungen und iPhone-Smartphone 2026-07-27 */
.settings-v62-view{width:min(980px,100%);margin-inline:auto}.settings-v62-head{align-items:flex-start!important;padding:18px 20px!important;border:1px solid rgba(116,238,192,.16);border-radius:24px;background:radial-gradient(circle at 85% 0%,rgba(93,173,255,.15),transparent 32%),linear-gradient(145deg,rgba(14,37,29,.98),rgba(6,16,12,.98));box-shadow:0 20px 54px rgba(0,0,0,.28)}.settings-v62-head>div span{display:block;margin-top:5px;color:var(--muted);font-size:.77rem}.settings-v62-panel{display:grid!important;grid-template-columns:1fr!important;gap:13px!important;margin-top:14px!important;padding:0!important;background:transparent!important;border:0!important}.settings-v62-hero{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:14px;padding:18px;border:1px solid rgba(116,238,192,.2);border-radius:22px;background:linear-gradient(135deg,rgba(75,190,139,.15),rgba(93,153,255,.08),rgba(242,209,107,.08));box-shadow:0 14px 38px rgba(0,0,0,.2)}.settings-v62-logo{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#69e6b1,#3c8cff);color:#07110d;font-size:1.55rem;box-shadow:0 10px 24px rgba(62,163,132,.22)}.settings-v62-hero small{color:#77edbb;font-weight:950;letter-spacing:.14em}.settings-v62-hero h3{margin:2px 0;font-size:1.18rem}.settings-v62-hero p{margin:0;color:var(--muted);font-size:.76rem}.settings-v62-group{overflow:hidden;border:1px solid rgba(255,255,255,.085);border-radius:22px;background:linear-gradient(180deg,rgba(16,37,29,.97),rgba(8,20,15,.98));box-shadow:0 14px 36px rgba(0,0,0,.18)}.settings-v62-group>header{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}.settings-v62-group>header>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(111,239,188,.12);color:#7ceebc;font-size:1.1rem}.settings-v62-group>header b,.settings-v62-group>header small{display:block}.settings-v62-group>header b{font-size:.93rem}.settings-v62-group>header small{margin-top:2px;color:var(--muted);font-size:.66rem}.settings-v62-row,.settings-v62-slider-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(170px,.72fr);align-items:center;gap:14px;margin:0!important;padding:14px 16px!important;border-bottom:1px solid rgba(255,255,255,.065);color:#effff6!important;background:transparent!important}.settings-v62-row>span b,.settings-v62-row>span small,.settings-v62-slider-row>span b,.settings-v62-slider-row>span small{display:block}.settings-v62-row>span small,.settings-v62-slider-row>span small{margin-top:3px;color:var(--muted);font-size:.65rem}.settings-v62-row input,.settings-v62-row select{width:100%;min-height:44px;padding:9px 11px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#08140f;color:#fff}.settings-v62-slider-row input{width:100%;accent-color:#69e2ae}.settings-v62-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}.settings-v62-actions button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px}.settings-v62-actions button span{font-size:1rem}.online-mod-settings-card{margin:0!important;border-radius:22px!important;background:linear-gradient(135deg,rgba(76,153,255,.12),rgba(113,239,189,.07))!important}

/* moderner schwarzer iPhone-Rahmen; die Größe der bisherigen Geräte bleibt erhalten */
.device-phone .device-frame{border:5px solid #080a09!important;border-radius:42px!important;padding:8px!important;background:linear-gradient(145deg,#050606,#242827 48%,#050606)!important;box-shadow:0 30px 70px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.13)!important}.device-status{grid-template-columns:minmax(62px,1fr) auto 68px 30px minmax(34px,.55fr)!important;padding:8px 10px 10px!important}.device-quick-settings{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:inherit;font-size:.78rem;justify-self:center}.device-quick-settings:hover,.device-quick-settings:focus-visible{outline:2px solid rgba(72,156,255,.55);background:rgba(72,156,255,.16)}.device-screen{filter:brightness(var(--phone-brightness,1));transition:filter .18s ease,background .18s ease,color .18s ease}.phone-theme-dark .device-screen{--phone-surface:#111514;--phone-surface-2:#1b211f;--phone-label:#f5faf7;--phone-muted:#8e9893;background:linear-gradient(180deg,#141a18,#050807 70%)!important;color:var(--phone-label)}.phone-theme-light .device-status{color:#f6fbf8}.phone-theme-light .device-screen{--phone-surface:#fff;--phone-surface-2:#f0f1f6;--phone-label:#111;--phone-muted:#74777b;background:#f2f2f7!important;color:#111}.phone-theme-light .device-wallpaper{color:#111;background:linear-gradient(145deg,#fff,#e9e9ef)!important}.phone-theme-light .device-wallpaper>div{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.08)}.phone-theme-light .device-app-grid button{background:rgba(255,255,255,.84);border-color:rgba(0,0,0,.08);color:#171817;box-shadow:0 4px 14px rgba(0,0,0,.06)}.phone-theme-light .device-app-view{background:rgba(255,255,255,.74);border-color:rgba(0,0,0,.08);color:#111}.phone-theme-light .device-app-view p,.phone-theme-light .device-hint{color:#6e7176}.phone-text-compact .device-screen{font-size:.91em}.phone-text-large .device-screen{font-size:1.08em}.phone-battery-saver .device-screen *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.device-app-grid button[data-device-app="settings"] span{background:linear-gradient(145deg,#a9adb3,#5c6269)!important;color:white!important}

/* Die Handy-Einstellungen öffnen als eigenständige App statt unter dem App-Raster. */
.device-shell.device-active-settings .device-wallpaper,.device-shell.device-active-settings .device-app-grid,.device-shell.device-active-settings .device-app-view>h3,.device-shell.device-active-settings .device-app-view>p,.device-shell.device-active-settings .device-app-view>.device-hint{display:none!important}.device-shell.device-active-settings .device-app-view{min-height:100%;padding:0!important;border:0!important;border-radius:0!important;background:var(--phone-surface-2,#111)!important}.ios-settings-app{min-height:100%;padding:12px 10px 28px;color:var(--phone-label,#fff);background:var(--phone-surface-2,#111)}.ios-settings-title{padding:12px 8px 10px}.ios-settings-title small{color:#4e9cff;font-weight:850}.ios-settings-title h3{margin:3px 0 2px!important;font-size:1.65rem!important;letter-spacing:-.035em}.ios-settings-title p{margin:0!important;color:var(--phone-muted,#888)!important;font-size:.7rem}.ios-settings-section-label{margin:15px 9px 6px;color:var(--phone-muted,#888);font-size:.62rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.ios-settings-group{overflow:hidden;margin:0 0 10px;border-radius:14px;background:var(--phone-surface,#1a1d1c);box-shadow:0 1px 0 rgba(255,255,255,.04),0 4px 16px rgba(0,0,0,.08)}.phone-theme-light .ios-settings-group{box-shadow:0 1px 0 rgba(0,0,0,.05),0 4px 15px rgba(0,0,0,.04)}.ios-settings-row{position:relative;display:grid;grid-template-columns:35px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:55px;padding:8px 11px;border:0;border-bottom:1px solid color-mix(in srgb,var(--phone-muted,#888) 22%,transparent);background:transparent;color:inherit;text-align:left}.ios-settings-row:last-child{border-bottom:0}.ios-settings-row>span:nth-child(2){min-width:0}.ios-settings-row b,.ios-settings-row small{display:block}.ios-settings-row b{font-size:.75rem}.ios-settings-row small{margin-top:2px;color:var(--phone-muted,#888);font-size:.58rem;line-height:1.25}.ios-settings-row em{color:var(--phone-muted,#888);font-size:1.25rem;font-style:normal}.ios-settings-row>strong{font-size:.72rem}.ios-settings-icon{display:grid!important;place-items:center;width:32px;height:32px;border-radius:9px;background:#8e8e93;color:#fff!important;font-size:.82rem;font-weight:900}.ios-settings-icon.blue{background:#0a84ff}.ios-settings-icon.indigo{background:#5856d6}.ios-settings-icon.yellow{background:#ff9f0a}.ios-settings-icon.green{background:#34c759}.ios-settings-icon.teal{background:#30b0c7}.ios-settings-icon.red{background:#ff453a}.ios-settings-choice-row{grid-template-columns:35px minmax(80px,1fr) minmax(130px,auto)}.ios-settings-segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px;border-radius:9px;background:color-mix(in srgb,var(--phone-muted,#888) 20%,transparent)}.ios-settings-segmented.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.ios-settings-segmented button{min-height:29px;padding:4px 7px;border:0;border-radius:7px;background:transparent;color:inherit;font-size:.56rem;font-weight:850}.ios-settings-segmented button.active{background:var(--phone-surface,#222);box-shadow:0 1px 5px rgba(0,0,0,.16);color:#0a84ff}.phone-theme-light .ios-settings-segmented button.active{background:#fff}.ios-settings-range{grid-template-columns:35px minmax(80px,1fr) minmax(105px,.8fr)}.ios-settings-range input{width:100%;accent-color:#0a84ff}.ios-settings-toggle{grid-template-columns:35px minmax(0,1fr) 48px}.ios-settings-toggle input{position:absolute;opacity:0;pointer-events:none}.ios-settings-toggle i{position:relative;width:44px;height:26px;border-radius:999px;background:#555;transition:.18s}.ios-settings-toggle i:after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:white;box-shadow:0 1px 5px rgba(0,0,0,.25);transition:.18s}.ios-settings-toggle input:checked+i{background:#34c759}.ios-settings-toggle input:checked+i:after{left:20px}.ios-settings-footer-group{margin-top:18px}.ios-settings-row.danger b{color:#ff453a}

@media(max-width:460px){.settings-v62-head{padding:14px!important}.settings-v62-hero{grid-template-columns:48px minmax(0,1fr);padding:14px}.settings-v62-logo{width:48px;height:48px}.settings-v62-row,.settings-v62-slider-row{grid-template-columns:1fr!important;gap:8px!important}.settings-v62-actions{grid-template-columns:1fr}.device-status{grid-template-columns:minmax(50px,1fr) auto 58px 27px minmax(31px,.5fr)!important;gap:4px!important}.device-status .device-island{width:58px!important}.device-quick-settings{width:26px;height:26px}.ios-settings-choice-row{grid-template-columns:32px minmax(0,1fr)!important}.ios-settings-choice-row .ios-settings-segmented{grid-column:2;margin-top:3px}.ios-settings-range{grid-template-columns:32px minmax(0,1fr)!important}.ios-settings-range input{grid-column:2}.ios-settings-toggle{grid-template-columns:32px minmax(0,1fr) 45px!important}}

/* ========================================================================== 
   JK.Games Professional V63 · festes iPhone und drei Home-Bildschirme
   ========================================================================== */
html.phone-v63-open,
body.phone-v63-open {
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

#detailDialog.device-dialog-v63[open] {
  box-sizing:border-box !important;
  width:min(510px,calc(100vw - 8px)) !important;
  max-width:min(510px,calc(100vw - 8px)) !important;
  height:calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  max-height:calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin:auto !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#detailDialog.device-dialog-v63 > #closeDialog,
#detailDialog.device-dialog-v63 > #dialogBack,
#detailDialog.device-dialog-v63 > #dialogTitle,
#detailDialog.device-dialog-v63 > #dialogText {
  display:none !important;
}

#detailDialog.device-dialog-v63 .device-shell-v63 {
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  align-items:stretch !important;
}

#detailDialog.device-dialog-v63 .device-shell-v63 .device-frame {
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  padding:9px 9px 6px !important;
  border-width:5px !important;
  border-radius:46px !important;
  grid-template-rows:auto minmax(0,1fr) 24px !important;
}

#detailDialog.device-dialog-v63 .device-shell-v63 .device-status {
  min-height:44px !important;
  flex:0 0 auto !important;
}

#detailDialog.device-dialog-v63 .device-shell-v63 .device-screen {
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:30px !important;
  overscroll-behavior:contain !important;
}

#detailDialog.device-dialog-v63 .device-shell-v63 .device-home-bar-v63 {
  position:relative !important;
  z-index:50 !important;
  width:42% !important;
  height:6px !important;
  margin:9px auto 3px !important;
  cursor:pointer !important;
  background:rgba(255,255,255,.66) !important;
  box-shadow:0 0 0 10px transparent !important;
  touch-action:manipulation !important;
}

#detailDialog.device-dialog-v63 .device-shell-v63 .device-home-bar-v63:focus-visible {
  outline:2px solid #0a84ff !important;
  outline-offset:5px !important;
}

.device-home-v63 .device-home-shell-v63 {
  display:grid;
  grid-template-rows:46px minmax(0,1fr) 28px;
  width:100%;
  height:100%;
  min-height:0;
  padding:8px 10px 4px;
  color:var(--phone-label,#fff);
  background:
    radial-gradient(circle at 14% 10%,rgba(64,210,153,.28),transparent 34%),
    radial-gradient(circle at 88% 24%,rgba(230,197,101,.18),transparent 32%),
    linear-gradient(160deg,#10221c,#050807 70%);
}

.phone-theme-light.device-home-v63 .device-home-shell-v63 {
  background:
    radial-gradient(circle at 14% 10%,rgba(62,173,255,.16),transparent 34%),
    radial-gradient(circle at 88% 24%,rgba(230,197,101,.16),transparent 30%),
    linear-gradient(160deg,#f8f8fb,#e9eaf0 72%);
}

.device-home-nav-v63 {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:center;
  gap:8px;
  min-height:42px;
}

.device-home-nav-v63 > button {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(0,0,0,.22);
  color:inherit;
  font-size:1.55rem;
  line-height:1;
  touch-action:manipulation;
}

.phone-theme-light .device-home-nav-v63 > button {
  border-color:rgba(0,0,0,.08);
  background:rgba(255,255,255,.72);
}

.device-home-page-copy-v63 {
  display:grid;
  place-items:center;
  gap:4px;
}

.device-home-page-copy-v63 > b {
  font-size:.72rem;
  letter-spacing:.04em;
}

.device-home-page-copy-v63 > span {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.device-home-page-copy-v63 i {
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.28);
}

.phone-theme-light .device-home-page-copy-v63 i {
  background:rgba(0,0,0,.22);
}

.device-home-page-copy-v63 i.active {
  width:13px;
  border-radius:99px;
  background:#0a84ff;
}

.device-home-pages-v63 {
  min-height:0;
  height:100%;
  touch-action:pan-y;
}

.device-home-v63 .device-home-page-v63.device-app-grid {
  display:grid !important;
  margin:0 !important;
}

.device-home-page-v63 {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(88px,1fr));
  gap:12px 9px;
  align-content:start;
  width:100%;
  height:100%;
  min-height:0;
  padding:10px 1px;
}

.device-home-v63 .device-home-page-v63.device-app-grid[hidden] {
  display:none !important;
}

.device-home-page-v63 > button[data-device-app] {
  position:relative;
  display:grid !important;
  grid-template-rows:48px auto !important;
  place-items:center !important;
  align-content:center !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:88px !important;
  max-height:none !important;
  padding:8px 3px !important;
  border:0 !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.055) !important;
  color:var(--phone-label,#fff) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.08) !important;
  overflow:visible !important;
  touch-action:manipulation !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

.phone-theme-light .device-home-page-v63 > button[data-device-app] {
  background:rgba(255,255,255,.74) !important;
  color:#151716 !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.055),0 8px 18px rgba(0,0,0,.055) !important;
}

.device-home-page-v63 > button[data-device-app] > span {
  width:48px !important;
  height:48px !important;
  border-radius:14px !important;
  font-size:1rem !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}

.device-home-page-v63 > button[data-device-app] > b {
  display:block !important;
  width:100% !important;
  overflow:hidden !important;
  color:inherit !important;
  font-size:.64rem !important;
  line-height:1.12 !important;
  text-align:center !important;
  text-overflow:ellipsis !important;
  white-space:normal !important;
}

.device-home-page-v63 > button[data-device-app] > small {
  display:none !important;
}

.device-home-page-v63 > button[data-device-app].locked::after {
  content:"";
  position:absolute;
  top:10px;
  right:10px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff9f0a;
  box-shadow:0 0 0 3px rgba(255,159,10,.15);
}

.device-home-page-v63 > button[data-device-app].selected {
  transform:scale(.94) rotate(-1.5deg) !important;
  outline:3px solid #0a84ff !important;
  outline-offset:1px !important;
  animation:phone-app-wiggle-v63 .18s ease-in-out infinite alternate !important;
}

@keyframes phone-app-wiggle-v63 {
  from { transform:scale(.94) rotate(-1.4deg); }
  to { transform:scale(.94) rotate(1.4deg); }
}

.device-home-empty-v63 {
  min-height:88px;
  border:1px dashed transparent;
  border-radius:18px;
  background:transparent;
}

.device-home-shell-v63.is-arranging .device-home-empty-v63 {
  border-color:rgba(10,132,255,.38);
  background:rgba(10,132,255,.055);
}

.device-home-edit-hint-v63 {
  align-self:center;
  overflow:hidden;
  color:rgba(255,255,255,.48);
  font-size:.52rem;
  font-weight:750;
  line-height:1.15;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.phone-theme-light .device-home-edit-hint-v63 {
  color:rgba(0,0,0,.46);
}

.device-home-shell-v63.is-arranging .device-home-edit-hint-v63 {
  color:#58aaff;
}

/* Bei geöffneter App bleibt das Gerät fest. Nur der eigentliche App-Inhalt scrollt. */
.device-app-open-v63 .device-screen {
  display:block !important;
  overflow:hidden !important;
  background:var(--phone-surface-2,#080b0a) !important;
}

.device-app-open-v63 .device-screen > .device-wallpaper,
.device-app-open-v63 .device-screen > .device-app-grid {
  display:none !important;
}

.device-app-open-v63 .device-app-window-v63 {
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--phone-surface-2,#080b0a) !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  scrollbar-width:none !important;
}

.device-app-open-v63 .device-app-window-v63::-webkit-scrollbar {
  display:none !important;
}

.device-app-open-v63 .device-app-window-v63 > h3,
.device-app-open-v63 .device-app-window-v63 > p,
.device-app-open-v63 .device-app-window-v63 > .device-hint {
  margin-inline:12px !important;
}

.device-app-open-v63 .device-app-window-v63 > h3:first-child {
  padding-top:14px !important;
}

.device-app-open-v63.device-active-settings .device-app-window-v63 {
  overflow-y:auto !important;
}

@media (max-width:540px) {
  #detailDialog.device-dialog-v63[open] {
    width:calc(100vw - 4px) !important;
    max-width:calc(100vw - 4px) !important;
    height:calc(100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height:calc(100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  #detailDialog.device-dialog-v63 .device-shell-v63 .device-frame {
    border-radius:42px !important;
    padding:7px 7px 5px !important;
  }
  .device-home-page-v63 {
    gap:9px 7px;
    padding:8px 0;
  }
  .device-home-page-v63 > button[data-device-app] {
    min-height:82px !important;
  }
  .device-home-page-v63 > button[data-device-app] > span {
    width:45px !important;
    height:45px !important;
  }
}

@media (max-height:700px) {
  .device-home-page-v63 {
    grid-template-rows:repeat(2,minmax(72px,1fr));
    gap:6px;
    padding:4px 0;
  }
  .device-home-page-v63 > button[data-device-app],
  .device-home-empty-v63 {
    min-height:70px !important;
  }
  .device-home-page-v63 > button[data-device-app] {
    grid-template-rows:38px auto !important;
    gap:4px !important;
  }
  .device-home-page-v63 > button[data-device-app] > span {
    width:38px !important;
    height:38px !important;
    border-radius:12px !important;
  }
  .device-home-nav-v63 {
    min-height:36px;
  }
  .device-home-nav-v63 > button {
    width:32px;
    height:32px;
  }
}

/* ========================================================================== 
   JK.Games Professional V64 · iOS-Homescreen und unveränderliche Gerätegröße
   ========================================================================== */
html.phone-v64-open,
body.phone-v64-open {
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

#detailDialog.device-dialog-v64[open] {
  box-sizing:border-box !important;
  width:min(478px,calc(100vw - 10px)) !important;
  min-width:min(478px,calc(100vw - 10px)) !important;
  max-width:min(478px,calc(100vw - 10px)) !important;
  height:min(900px,calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  min-height:min(900px,calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  max-height:min(900px,calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  margin:auto !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  resize:none !important;
}

#detailDialog.device-dialog-v64 > #closeDialog,
#detailDialog.device-dialog-v64 > #dialogBack,
#detailDialog.device-dialog-v64 > #dialogTitle,
#detailDialog.device-dialog-v64 > #dialogText {
  display:none !important;
}

#detailDialog.device-dialog-v64 .device-shell-v64 {
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

#detailDialog.device-dialog-v64 .device-shell-v64 .device-frame {
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-rows:50px minmax(0,1fr) 28px !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:8px 8px 5px !important;
  overflow:hidden !important;
  border:5px solid #050606 !important;
  border-radius:48px !important;
  background:linear-gradient(145deg,#030404,#242827 48%,#050606) !important;
  box-shadow:0 30px 75px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.14) !important;
}

#detailDialog.device-dialog-v64 .device-shell-v64 .device-status {
  box-sizing:border-box !important;
  height:50px !important;
  min-height:50px !important;
  max-height:50px !important;
  padding:8px 11px 9px !important;
}

#detailDialog.device-dialog-v64 .device-shell-v64 .device-screen {
  box-sizing:border-box !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:31px !important;
  background:#10131a !important;
  contain:layout paint !important;
  overscroll-behavior:contain !important;
}

#detailDialog.device-dialog-v64 .device-shell-v64 .device-home-bar-v64 {
  position:relative !important;
  z-index:80 !important;
  width:40% !important;
  height:6px !important;
  margin:10px auto 4px !important;
  cursor:pointer !important;
  border-radius:99px !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 0 0 10px transparent !important;
  touch-action:manipulation !important;
}

#detailDialog.device-dialog-v64 .device-shell-v64 .device-home-bar-v64:focus-visible {
  outline:2px solid #0a84ff !important;
  outline-offset:5px !important;
}

/* Homescreen mit farbigem iOS-Wallpaper. */
.device-home-v64 .device-home-shell-v64 {
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-rows:42px minmax(0,1fr) 16px 84px;
  width:100%;
  height:100%;
  min-height:0;
  padding:4px 11px 10px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 10% 7%,rgba(20,30,80,.7),transparent 32%),
    radial-gradient(circle at 82% 15%,rgba(255,34,68,.95),transparent 36%),
    radial-gradient(circle at 18% 74%,rgba(177,41,225,.93),transparent 43%),
    radial-gradient(circle at 80% 80%,rgba(22,211,244,.88),transparent 42%),
    linear-gradient(150deg,#061744 0%,#d61342 31%,#ff7a19 48%,#a92bd7 68%,#16c9ed 100%);
}

.device-home-v64 .device-home-shell-v64::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(120deg,transparent 36%,rgba(255,255,255,.14) 37%,transparent 56%),
    linear-gradient(25deg,transparent 48%,rgba(255,255,255,.08) 49%,transparent 72%);
  opacity:.8;
  pointer-events:none;
}

.phone-theme-light.device-home-v64 .device-home-shell-v64 {
  color:#fff;
  background:
    radial-gradient(circle at 10% 7%,rgba(26,75,167,.82),transparent 32%),
    radial-gradient(circle at 82% 15%,rgba(255,46,75,.94),transparent 36%),
    radial-gradient(circle at 18% 74%,rgba(175,48,224,.9),transparent 43%),
    radial-gradient(circle at 80% 80%,rgba(25,205,235,.88),transparent 42%),
    linear-gradient(150deg,#0c45a0 0%,#e21d46 31%,#ff8d20 48%,#b52ee0 68%,#18ccea 100%);
}

.ios-home-toolbar-v64 {
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto 36px;
  align-items:center;
  gap:5px;
  min-height:38px;
}

.ios-home-toolbar-v64 > button {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:18px;
  background:rgba(255,255,255,.2);
  color:#fff;
  font-size:1.4rem;
  font-weight:850;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.1);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.ios-home-toolbar-v64 [data-phone-edit-done] {
  display:none;
  width:auto;
  min-width:58px;
  padding:0 13px;
  font-size:.65rem;
}

.ios-home-toolbar-v64 [data-phone-edit-done].visible {
  display:grid;
}

.ios-home-edit-title-v64 {
  overflow:hidden;
  font-size:.63rem;
  font-weight:850;
  text-align:center;
  text-shadow:0 1px 5px rgba(0,0,0,.5);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.device-home-pages-v64 {
  min-height:0;
  height:100%;
  overflow:hidden;
  touch-action:pan-y;
}

.device-home-page-v64 {
  box-sizing:border-box;
  display:grid;
  grid-template-rows:minmax(0,1fr);
  width:100%;
  height:100%;
  min-height:0;
  padding:4px 0 2px;
  overflow:hidden;
}

.device-home-page-v64.has-widgets {
  grid-template-rows:118px minmax(0,1fr);
  gap:8px;
}

.device-home-page-v64[hidden] {
  display:none !important;
}

.ios-widgets-row-v64 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  min-height:0;
}

.ios-widget-v64 {
  box-sizing:border-box;
  min-width:0;
  height:118px;
  padding:12px;
  overflow:hidden;
  border-radius:22px;
  background:rgba(15,29,59,.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 25px rgba(0,0,0,.18);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}

.ios-widget-v64 small,
.ios-widget-v64 b,
.ios-widget-v64 span {
  display:block;
}

.ios-widget-v64 small {
  overflow:hidden;
  color:rgba(255,255,255,.82);
  font-size:.58rem;
  font-weight:850;
  text-overflow:ellipsis;
  text-transform:capitalize;
  white-space:nowrap;
}

.ios-status-widget-v64 b {
  margin:3px 0 9px;
  overflow:hidden;
  font-size:1rem;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ios-status-widget-v64 span {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-size:.5rem;
  font-weight:750;
}

.ios-status-widget-v64 span i {
  position:relative;
  display:block;
  width:38px;
  height:5px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.2);
}

.ios-status-widget-v64 span i::after {
  content:"";
  display:block;
  width:var(--value,50%);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#65e5ad,#cce769);
}

.ios-calendar-widget-v64 {
  background:rgba(255,255,255,.91);
  color:#171719;
}

.ios-calendar-widget-v64 small {
  color:#ff3b30;
  text-transform:uppercase;
}

.ios-calendar-widget-v64 b {
  margin:3px 0 2px;
  font-size:2.6rem;
  font-weight:420;
  line-height:.95;
}

.ios-calendar-widget-v64 span {
  color:#707077;
  font-size:.55rem;
}

.ios-icons-grid-v64 {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  align-content:start;
  gap:8px 6px;
  width:100%;
  height:100%;
  min-height:0;
  padding:2px 0;
}

.device-home-page-v64.has-widgets .ios-icons-grid-v64 {
  grid-template-rows:repeat(2,minmax(0,1fr));
}

.ios-app-icon-v64 {
  position:relative !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-rows:52px auto !important;
  place-items:center !important;
  align-content:center !important;
  gap:5px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:none !important;
  padding:2px 2px 3px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
  text-shadow:0 1px 4px rgba(0,0,0,.7) !important;
  touch-action:manipulation !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

.ios-app-icon-v64 > span {
  display:grid !important;
  place-items:center !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  border-radius:13px !important;
  font-size:1.02rem !important;
  box-shadow:0 7px 17px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.14) !important;
}

.ios-app-icon-v64 > b {
  display:block !important;
  width:100% !important;
  max-width:82px !important;
  overflow:hidden !important;
  color:#fff !important;
  font-size:.53rem !important;
  font-weight:760 !important;
  line-height:1.12 !important;
  text-align:center !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.ios-app-icon-v64 > small {
  display:none !important;
}

.ios-app-icon-v64.locked::after {
  content:"🔒";
  position:absolute;
  top:2px;
  right:8px;
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:rgba(25,25,28,.82);
  font-size:.48rem;
  text-shadow:none;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

.device-home-shell-v64.is-arranging .ios-app-icon-v64:not(.ios-dock-app-v64) {
  animation:phone-app-wiggle-v64 .17s ease-in-out infinite alternate !important;
}

.device-home-shell-v64.is-arranging .ios-app-icon-v64:not(.ios-dock-app-v64)::before {
  content:"−";
  position:absolute;
  z-index:3;
  top:0;
  left:6px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#e6e6eb;
  color:#555;
  font-size:.75rem;
  font-weight:900;
  text-shadow:none;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
}

.ios-app-icon-v64.selected > span {
  outline:3px solid #0a84ff !important;
  outline-offset:2px !important;
}

@keyframes phone-app-wiggle-v64 {
  from { transform:rotate(-1.4deg); }
  to { transform:rotate(1.4deg); }
}

.device-home-empty-v64 {
  min-width:0;
  min-height:0;
  border:1px dashed transparent;
  border-radius:14px;
  background:transparent;
}

.device-home-shell-v64.is-arranging .device-home-empty-v64 {
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.07);
}

.ios-page-dots-v64 {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:16px;
}

.ios-page-dots-v64 button {
  width:6px;
  height:6px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.42);
}

.ios-page-dots-v64 button.active {
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}

.ios-dock-v64 {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  gap:7px;
  min-height:78px;
  padding:7px 9px 5px;
  border-radius:24px;
  background:rgba(235,239,248,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 12px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(22px) saturate(1.45);
  -webkit-backdrop-filter:blur(22px) saturate(1.45);
}

.ios-dock-v64 .ios-app-icon-v64 {
  grid-template-rows:55px !important;
  gap:0 !important;
}

.ios-dock-v64 .ios-app-icon-v64 > span {
  width:55px !important;
  height:55px !important;
  min-width:55px !important;
  min-height:55px !important;
  border-radius:14px !important;
}

.ios-dock-v64 .ios-app-icon-v64 > b {
  display:none !important;
}

/* Das Gerät behält bei Apps und Einstellungen exakt dieselbe Größe. */
.device-app-open-v64 .device-screen {
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:var(--phone-surface-2,#080b0a) !important;
}

.device-app-open-v64 .device-screen > .device-wallpaper,
.device-app-open-v64 .device-screen > .device-app-grid {
  display:none !important;
}

.device-app-open-v64 .device-app-window-v64 {
  box-sizing:border-box !important;
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--phone-surface-2,#080b0a) !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  scrollbar-width:none !important;
}

.device-app-open-v64 .device-app-window-v64::-webkit-scrollbar {
  display:none !important;
}

.device-app-open-v64 .device-app-window-v64 > h3,
.device-app-open-v64 .device-app-window-v64 > p,
.device-app-open-v64 .device-app-window-v64 > .device-hint {
  margin-inline:12px !important;
}

.device-app-open-v64 .device-app-window-v64 > h3:first-child {
  padding-top:14px !important;
}

.device-app-open-v64.device-active-settings .device-app-window-v64 {
  overflow-y:auto !important;
}

@media (max-width:540px) {
  #detailDialog.device-dialog-v64[open] {
    width:calc(100vw - 4px) !important;
    min-width:calc(100vw - 4px) !important;
    max-width:calc(100vw - 4px) !important;
    height:calc(100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height:calc(100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height:calc(100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  #detailDialog.device-dialog-v64 .device-shell-v64 .device-frame {
    border-radius:43px !important;
    padding:7px 7px 5px !important;
  }

  .device-home-v64 .device-home-shell-v64 {
    padding-inline:8px;
  }

  .ios-app-icon-v64 > span {
    width:49px !important;
    height:49px !important;
    min-width:49px !important;
    min-height:49px !important;
  }

  .ios-dock-v64 .ios-app-icon-v64 > span {
    width:53px !important;
    height:53px !important;
    min-width:53px !important;
    min-height:53px !important;
  }
}

@media (max-height:730px) {
  .device-home-v64 .device-home-shell-v64 {
    grid-template-rows:36px minmax(0,1fr) 13px 70px;
    padding-bottom:6px;
  }

  .ios-home-toolbar-v64 {
    min-height:34px;
  }

  .ios-home-toolbar-v64 > button {
    width:30px;
    height:30px;
  }

  .device-home-page-v64.has-widgets {
    grid-template-rows:96px minmax(0,1fr);
    gap:5px;
  }

  .ios-widget-v64 {
    height:96px;
    padding:9px;
    border-radius:18px;
  }

  .ios-calendar-widget-v64 b {
    font-size:2rem;
  }

  .ios-status-widget-v64 b {
    margin-bottom:5px;
  }

  .ios-status-widget-v64 span {
    margin-top:4px;
  }

  .ios-icons-grid-v64 {
    gap:4px 5px;
  }

  .ios-app-icon-v64 {
    grid-template-rows:43px auto !important;
    gap:3px !important;
  }

  .ios-app-icon-v64 > span {
    width:43px !important;
    height:43px !important;
    min-width:43px !important;
    min-height:43px !important;
    border-radius:12px !important;
  }

  .ios-dock-v64 {
    min-height:66px;
    padding:5px 8px;
  }

  .ios-dock-v64 .ios-app-icon-v64 {
    grid-template-rows:45px !important;
  }

  .ios-dock-v64 .ios-app-icon-v64 > span {
    width:45px !important;
    height:45px !important;
    min-width:45px !important;
    min-height:45px !important;
  }
}

/* ========================================================================== 
   JK.Games Professional V65 · altes Smartphone-Chrome vollständig entfernen
   ========================================================================== */
html.phone-v65-open,
body.phone-v65-open {
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

/* Auch bei einem kurzzeitig alten Renderpfad bleibt nur der feste iPhone-Rahmen sichtbar. */
#detailDialog.device-dialog-v65[open],
#detailDialog:has(.device-shell.device-phone)[open] {
  box-sizing:border-box !important;
  width:min(478px,calc(100vw - 10px)) !important;
  min-width:min(478px,calc(100vw - 10px)) !important;
  max-width:min(478px,calc(100vw - 10px)) !important;
  height:min(900px,calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  min-height:min(900px,calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  max-height:min(900px,calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  margin:auto !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  resize:none !important;
}

#detailDialog.device-dialog-v65 > #closeDialog,
#detailDialog.device-dialog-v65 > #dialogBack,
#detailDialog.device-dialog-v65 > #dialogTitle,
#detailDialog.device-dialog-v65 > #dialogText,
#detailDialog:has(.device-shell.device-phone) > #closeDialog,
#detailDialog:has(.device-shell.device-phone) > #dialogBack,
#detailDialog:has(.device-shell.device-phone) > #dialogTitle,
#detailDialog:has(.device-shell.device-phone) > #dialogText {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#detailDialog.device-dialog-v65 .device-shell-v65,
#detailDialog:has(.device-shell.device-phone) .device-shell.device-phone {
  box-sizing:border-box !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Keine alte Zurück-/Fertig-Zeile mehr in Telefon, SMS, Notizen oder Bank. */
.device-shell-v65 .device-native-window-header-v56,
.device-shell-v65 .device-native-bank-header-v58,
.device-shell-v65 [data-native-app-header-v56],
.device-shell-v65 [data-native-app-header-v58] {
  display:none !important;
}

.device-shell-v65 .device-app-window-v64 {
  padding-top:0 !important;
}

.device-shell-v65 .device-home-bar-v65 {
  cursor:pointer !important;
  pointer-events:auto !important;
}

/* V65: Hitbox endet direkt unter der App-Beschriftung und füllt nicht mehr das ganze Rasterfeld. */
.device-home-v64 .ios-icons-grid-v64 {
  justify-items:center !important;
  align-items:start !important;
}

.device-home-v64 .ios-app-icon-v64:not(.ios-dock-app-v64) {
  width:72px !important;
  min-width:72px !important;
  max-width:72px !important;
  height:75px !important;
  min-height:75px !important;
  max-height:75px !important;
  padding:0 !important;
  align-self:start !important;
  justify-self:center !important;
}

.device-home-v64 .ios-dock-v64 .ios-app-icon-v64 {
  width:58px !important;
  min-width:58px !important;
  max-width:58px !important;
  height:58px !important;
  min-height:58px !important;
  max-height:58px !important;
  padding:0 !important;
}

@media (max-width:540px) {
  #detailDialog.device-dialog-v65[open],
  #detailDialog:has(.device-shell.device-phone)[open] {
    width:calc(100vw - 4px) !important;
    min-width:calc(100vw - 4px) !important;
    max-width:calc(100vw - 4px) !important;
    height:calc(100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height:calc(100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height:calc(100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  .device-home-v64 .ios-app-icon-v64:not(.ios-dock-app-v64) {
    width:66px !important;
    min-width:66px !important;
    max-width:66px !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
  }
}

/* ========================================================================== 
   JK.Games Professional V66 · freie Homescreen-Plätze, fester SMS-Chat,
   bündige Bank-Navigation und stabile Dialog-Schließen-Schaltfläche
   ========================================================================== */

/* Obere Pfeile entfallen vollständig: Seitenwechsel erfolgt per Wischen/Ziehen. */
.ios-home-toolbar-v64 {
  grid-template-columns:minmax(0,1fr) auto !important;
  padding-inline:5px !important;
}

.ios-home-edit-title-v64 {
  justify-self:center !important;
  width:100% !important;
  padding-left:58px !important;
  text-align:center !important;
}

.ios-home-toolbar-v64 [data-phone-edit-done] {
  grid-column:2 !important;
  grid-row:1 !important;
}

/* Erste Seite: drei vollständige App-Reihen unter den Widgets. Weitere Seiten:
   vier Reihen. Dadurch sind auch die bisher unbenutzbaren unteren Plätze echt. */
.ios-icons-grid-v64 {
  grid-template-rows:repeat(4,minmax(72px,1fr)) !important;
}

.device-home-page-v64.has-widgets .ios-icons-grid-v64 {
  grid-template-rows:repeat(3,minmax(72px,1fr)) !important;
}

.device-home-empty-v64 {
  width:100% !important;
  height:100% !important;
  min-height:68px !important;
  border:1px dashed transparent !important;
}

.device-home-shell-v64.is-arranging .device-home-empty-v64 {
  border-color:rgba(255,255,255,.46) !important;
  background:rgba(255,255,255,.095) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

.device-home-shell-v64.is-arranging .device-home-empty-v64::after {
  content:"+";
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:rgba(255,255,255,.72);
  font-size:1.05rem;
  font-weight:900;
}

/* Die beiden oberen Widgets lassen sich per langem Druck + Antippen oder Drag
   vertauschen und zeigen im Bearbeitungsmodus ebenfalls echte Zielmarkierungen. */
.ios-widget-slot-v64 {
  position:relative;
  min-width:0;
  min-height:0;
  border:1px dashed transparent;
  border-radius:22px;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}

.ios-widget-slot-v64 > .ios-widget-v64 {
  width:100%;
  height:100%;
}

.device-home-shell-v64.is-arranging .ios-widget-slot-v64 {
  border-color:rgba(255,255,255,.48);
  background:rgba(255,255,255,.08);
}

.device-home-shell-v64.is-arranging .ios-widget-slot-v64 > .ios-widget-v64 {
  animation:phone-app-wiggle-v64 .17s ease-in-out infinite alternate !important;
}

.ios-widget-slot-v64.selected {
  outline:3px solid #0a84ff;
  outline-offset:2px;
}

/* Nachrichten: Die App selbst scrollt nicht mehr. Kopf, Chatliste und Eingabe
   bleiben sichtbar; ausschließlich die Nachrichtenblasen scrollen. */
.device-shell-v65.device-active-sms .device-app-window-v64,
.device-shell-v65.device-active-sms .device-native-app-window-v56 {
  overflow:hidden !important;
  padding:0 !important;
}

.device-shell-v65.device-active-sms .ios-messages-app {
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-rows:auto auto minmax(72px,112px) minmax(0,1fr) !important;
  gap:7px !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  padding:7px 8px 8px !important;
  overflow:hidden !important;
}

.device-shell-v65.device-active-sms .ios-app-header {
  position:relative !important;
  top:auto !important;
  margin:-7px -8px 0 !important;
  padding:10px 12px 9px !important;
  flex:none !important;
}

.device-shell-v65.device-active-sms .ios-new-message {
  min-height:0 !important;
}

.device-shell-v65.device-active-sms .ios-message-list {
  width:100% !important;
  height:100% !important;
  min-height:72px !important;
  max-height:112px !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
}

.device-shell-v65.device-active-sms .ios-message-row {
  padding:7px 9px !important;
}

.device-shell-v65.device-active-sms .ios-chat-thread {
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  border-radius:17px !important;
}

.device-shell-v65.device-active-sms .ios-chat-bubbles {
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
}

.device-shell-v65.device-active-sms .ios-chat-compose {
  position:relative !important;
  inset:auto !important;
  flex:none !important;
  padding-bottom:max(8px,env(safe-area-inset-bottom,0px)) !important;
}

/* Bank: Die untere Navigation sitzt bündig an der Display-Unterkante und bleibt
   beim Scrollen dort. Der bisherige negative Versatz und Leerraum entfallen. */
.device-shell-v65.device-active-bank .device-native-bank-v58,
.device-shell-v65.device-active-bank .device-app-window-v64 {
  padding:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scroll-padding-bottom:64px !important;
}

.device-shell-v65.device-active-bank .jk-bank-app-v58 {
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  gap:11px !important;
  width:100% !important;
  min-height:100% !important;
  padding:0 9px 0 !important;
}

.device-shell-v65.device-active-bank .jk-bank-bottom-nav-v58 {
  position:sticky !important;
  bottom:0 !important;
  z-index:80 !important;
  flex:0 0 auto !important;
  margin:4px -9px 0 !important;
  padding:8px 7px max(9px,env(safe-area-inset-bottom,0px)) !important;
}

@media (max-height:730px) {
  .device-home-page-v64.has-widgets {
    grid-template-rows:92px minmax(0,1fr) !important;
  }

  .ios-widget-v64 {
    height:92px !important;
    padding:8px !important;
  }

  .device-home-page-v64.has-widgets .ios-icons-grid-v64 {
    grid-template-rows:repeat(3,minmax(61px,1fr)) !important;
  }

  .ios-icons-grid-v64 {
    grid-template-rows:repeat(4,minmax(61px,1fr)) !important;
  }

  .device-shell-v65.device-active-sms .ios-messages-app {
    grid-template-rows:auto auto minmax(58px,86px) minmax(0,1fr) !important;
    gap:5px !important;
  }

  .device-shell-v65.device-active-sms .ios-message-list {
    min-height:58px !important;
    max-height:86px !important;
  }
}

/* V66: Auch das untere Dock ist vollständig belegbar und umsortierbar. */
.device-home-shell-v64.is-arranging .ios-dock-v64 .ios-app-icon-v64 {
  animation:phone-app-wiggle-v64 .17s ease-in-out infinite alternate !important;
}

.ios-dock-v64 .device-dock-empty-v66 {
  width:58px !important;
  min-width:58px !important;
  max-width:58px !important;
  height:58px !important;
  min-height:58px !important;
  max-height:58px !important;
  justify-self:center !important;
  align-self:center !important;
  border-radius:14px !important;
}

.device-home-shell-v64.is-arranging .ios-dock-v64 .device-dock-empty-v66 {
  border-color:rgba(255,255,255,.52) !important;
  background:rgba(255,255,255,.12) !important;
}

/* Titel bleibt ohne Bearbeitungsbutton exakt mittig; erst im Bearbeitungsmodus
   wird der Platz des rechten Fertig-Buttons ausgeglichen. */
.ios-home-edit-title-v64 { padding-left:0 !important; }
.device-home-shell-v64.is-arranging .ios-home-edit-title-v64 { padding-left:58px !important; }

/* In einem geöffneten Gespräch bleibt nur der aktive Chat-Eintrag sichtbar.
   Damit scrollt tatsächlich ausschließlich der Nachrichtenverlauf. */
.device-shell-v65.device-active-sms .ios-messages-app:has(.ios-chat-thread) .ios-message-list {
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
}

.device-shell-v65.device-active-sms .ios-messages-app:has(.ios-chat-thread) .ios-message-row:not(.active) {
  display:none !important;
}


/* ==========================================================================
   JK.Games V86 · E-Ladestation mit 5-Sekunden-Animation
   ========================================================================== */
.ev-charge-overlay-v86 {
  position: fixed;
  inset: 0;
  z-index: 500000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 10, 14, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ev-charge-card-v86 {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  padding: 28px 24px 24px;
  border: 1px solid rgba(108, 255, 198, .3);
  border-radius: 28px;
  color: #ecfff8;
  text-align: center;
  background:
    radial-gradient(circle at 50% 15%, rgba(45, 255, 173, .18), transparent 36%),
    linear-gradient(155deg, rgba(11, 34, 37, .98), rgba(4, 16, 22, .99));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ev-charge-card-v86 > button {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .09);
  font-size: 24px;
}

.ev-charge-card-v86 > small {
  display: block;
  margin-bottom: 4px;
  color: #64f7bd;
  font-weight: 900;
  letter-spacing: .15em;
}

.ev-charge-card-v86 h3 {
  margin: 0 0 18px;
  font-size: clamp(22px, 6vw, 32px);
}

.ev-charge-scene-v86 {
  position: relative;
  height: 150px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.01)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(92,255,194,.05) 40px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
}

.ev-charge-car-v86 {
  position: absolute;
  left: 28px;
  bottom: 31px;
  font-size: 64px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  animation: ev-car-pulse-v86 1.2s ease-in-out infinite;
}

.ev-charge-cable-v86 {
  position: absolute;
  left: 112px;
  right: 112px;
  bottom: 51px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1c805e, #52f7b2, #1c805e);
  box-shadow: 0 0 16px rgba(82,247,178,.55);
}

.ev-charge-bolt-v86 {
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translateX(-50%);
  font-size: 40px;
  animation: ev-bolt-v86 .72s steps(2, end) infinite;
}

.ev-charge-battery-v86 {
  position: absolute;
  right: 30px;
  bottom: 35px;
  width: 88px;
  height: 50px;
  padding: 5px;
  border: 4px solid #dfffee;
  border-radius: 9px;
  box-shadow: 0 0 22px rgba(82,247,178,.28);
}

.ev-charge-battery-v86::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 13px;
  width: 8px;
  height: 20px;
  border-radius: 0 4px 4px 0;
  background: #dfffee;
}

.ev-charge-battery-v86 b {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #24d678, #9effcb);
  box-shadow: 0 0 16px rgba(55,255,151,.6);
  transition: width .12s linear;
}

.ev-charge-card-v86 > strong {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
}

.ev-charge-progress-v86 {
  height: 12px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.ev-charge-progress-v86 i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1ed876, #67ffd0);
  box-shadow: 0 0 20px rgba(63,255,179,.6);
}

.ev-charge-card-v86 p {
  margin: 0;
  color: rgba(235,255,247,.72);
}

.ev-charge-card-v86.is-complete {
  animation: ev-complete-v86 .55s ease both;
}

@keyframes ev-car-pulse-v86 {
  50% { transform: translateY(-3px); filter: drop-shadow(0 14px 22px rgba(38,255,154,.24)); }
}

@keyframes ev-bolt-v86 {
  50% { opacity: .35; transform: translateX(-50%) scale(.88); }
}

@keyframes ev-complete-v86 {
  50% { box-shadow: 0 0 0 5px rgba(67,255,169,.18), 0 28px 80px rgba(0,0,0,.55); }
}


/* V108 · Partner-UI-Bugfix
   Nur die Partneranzeige wird angepasst. Karten-, Figuren- und Haustierpositionen bleiben unverändert. */
.portrait-partner-quick small em,
.partner-mini-meters-v15 {
  display: none !important;
}

/* Partner bleibt vollständig anklickbar, besitzt aber niemals eine sichtbare Umrandung. */
.portrait-partner-quick,
.portrait-avatar-wrap.with-partner .portrait-partner-quick,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:hover,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus-visible,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:active,
.character-partner-card.character-person-card.character-person-card-v15.partner,
.character-partner-card.character-person-card.character-person-card-v15.partner:hover,
.character-partner-card.character-person-card.character-person-card-v15.partner:focus,
.character-partner-card.character-person-card.character-person-card-v15.partner:focus-visible,
.character-partner-card.character-person-card.character-person-card-v15.partner:active {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.portrait-partner-outline,
.portrait-partner-figure,
.character-partner-outline,
.portrait-partner-quick:hover .portrait-partner-outline,
.portrait-partner-quick:focus-visible .portrait-partner-outline,
.character-partner-card:hover .character-partner-outline,
.character-partner-card:focus-visible .character-partner-outline {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}
.portrait-partner-quick small {
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}
.portrait-partner-quick small b {
  margin: 0 !important;
}

/* Zwei schmale, rein visuelle Statusleisten verlaufen direkt neben den Armen.
   100 % füllt die gesamte Leiste, kleinere Werte sinken von oben nach unten ab. */
.character-partner-card {
  position: relative !important;
}
.character-partner-card .character-person-figure {
  position: relative !important;
  z-index: 2;
}
.character-partner-card .character-card-name-v15 {
  position: relative;
  z-index: 4;
  margin-top: 4px !important;
}
.partner-arm-meters-v108 {
  position: absolute;
  left: 50%;
  top: 83px;
  width: 150px;
  height: 126px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.partner-arm-meter-v108 {
  position: absolute;
  bottom: 0;
  width: 9px;
  height: 112px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.partner-arm-meter-v108.left {
  left: 19px;
}
.partner-arm-meter-v108.right {
  right: 19px;
}
.partner-arm-meter-v108 i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 2px;
  border-radius: inherit;
}
.partner-arm-meter-v108.left i {
  background: linear-gradient(180deg, #ff9fbe 0%, #d63f76 100%);
}
.partner-arm-meter-v108.right i {
  background: linear-gradient(180deg, #9ff0c5 0%, #37b47a 100%);
}

/* Die Haustierumrandung bleibt ausdrücklich unverändert. */
@media (max-width: 640px) {
  .partner-arm-meters-v108 {
    top: 74px;
    width: 132px;
    height: 112px;
  }
  .partner-arm-meter-v108 {
    height: 100px;
    width: 8px;
  }
  .partner-arm-meter-v108.left {
    left: 17px;
  }
  .partner-arm-meter-v108.right {
    right: 17px;
  }
}

/* V110 · Hauptscreen: Freundin vollständig rahmenlos, Klickfläche bleibt erhalten */
.portrait-avatar-wrap.with-partner .portrait-partner-quick,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:hover,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus-visible,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:active,
.portrait-avatar-wrap.with-partner .portrait-partner-figure,
.portrait-avatar-wrap.with-partner .portrait-partner-figure:hover,
.portrait-avatar-wrap.with-partner .portrait-partner-figure:focus,
.portrait-avatar-wrap.with-partner .portrait-partner-quick .finder-avatar,
.portrait-avatar-wrap.with-partner .portrait-partner-quick .finder-avatar:hover,
.portrait-avatar-wrap.with-partner .portrait-partner-quick .finder-avatar:focus,
.portrait-avatar-wrap.with-partner .portrait-partner-quick .finder-avatar svg,
.portrait-avatar-wrap.with-partner .portrait-partner-quick .finder-avatar svg:hover {
  border:0!important;
  border-color:transparent!important;
  outline:0!important;
  outline-offset:0!important;
  box-shadow:none!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  filter:none!important;
}
.portrait-avatar-wrap.with-partner .portrait-partner-quick::before,
.portrait-avatar-wrap.with-partner .portrait-partner-quick::after,
.portrait-avatar-wrap.with-partner .portrait-partner-figure::before,
.portrait-avatar-wrap.with-partner .portrait-partner-figure::after,
.portrait-avatar-wrap.with-partner .portrait-partner-quick .finder-avatar::before,
.portrait-avatar-wrap.with-partner .portrait-partner-quick .finder-avatar::after {
  content:none!important;
  display:none!important;
}
.portrait-avatar-wrap.with-partner .portrait-partner-quick{
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* V111 · Hauptscreen: Partnerfigur und Name wieder exakt auf Spielerhöhe.
   Nur die sichtbare Partnergruppe wird verschoben; Raster und Klickfunktion bleiben unverändert. */
.portrait-avatar-wrap.with-partner .portrait-partner-quick,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:hover,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:focus-visible,
.portrait-avatar-wrap.with-partner .portrait-partner-quick:active {
  transform: translateY(-7px) !important;
}
@media (max-width:560px) {
  .portrait-avatar-wrap.with-partner .portrait-partner-quick,
  .portrait-avatar-wrap.with-partner .portrait-partner-quick:hover,
  .portrait-avatar-wrap.with-partner .portrait-partner-quick:focus,
  .portrait-avatar-wrap.with-partner .portrait-partner-quick:focus-visible,
  .portrait-avatar-wrap.with-partner .portrait-partner-quick:active {
    transform: translateY(-6px) !important;
  }
}


/* JK.Games V180 · Account Reset / Pre-Beta */
.jk-reset-prebeta-banner{margin:14px auto 22px;max-width:980px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:18px;border:1px solid rgba(255,190,67,.42);border-radius:20px;background:linear-gradient(135deg,rgba(63,35,8,.94),rgba(15,20,29,.96));box-shadow:0 16px 40px rgba(0,0,0,.28)}
.jk-reset-prebeta-banner>span{padding:8px 10px;border-radius:10px;background:#ffbd43;color:#221400;font-weight:900;letter-spacing:.12em;font-size:.72rem}.jk-reset-prebeta-banner small{color:#ffca63;font-weight:800;letter-spacing:.12em}.jk-reset-prebeta-banner h2{margin:3px 0 6px}.jk-reset-prebeta-banner p{margin:0;color:#d7dee8}.jk-reset-prebeta-banner ul{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}.jk-reset-prebeta-banner li{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.07);font-size:.82rem}.setup-bank-hint{margin:-3px 0 8px;padding:10px 12px;border-left:3px solid #ffbd43;border-radius:8px;background:rgba(255,189,67,.08);color:#d8e0ea;font-size:.86rem;line-height:1.45}
@media(max-width:620px){.jk-reset-prebeta-banner{grid-template-columns:1fr;margin:10px 8px 18px;padding:14px}.jk-reset-prebeta-banner>span{justify-self:start}.jk-reset-prebeta-banner ul{display:grid;grid-template-columns:1fr}.jk-reset-prebeta-banner li{border-radius:10px}}


/* V185 · Shop-Kategorien auf Handy und PC vollständig erreichbar */
#shopList { min-width: 0; }
.shop-category-nav-shell {
  position: sticky;
  top: 128px;
  z-index: 20;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(11, 20, 17, .96);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
  backdrop-filter: blur(12px);
}
.shop-category-nav {
  display: flex;
  min-width: 0;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
}
.shop-category-nav:active,
.shop-category-nav.dragging { cursor: grabbing; user-select: none; }
.shop-category-nav button {
  flex: 0 0 auto;
  min-height: 36px;
  max-width: 210px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
  scroll-snap-align: center;
}
.shop-category-nav button.active {
  color: #08110d;
  border-color: rgba(230,255,241,.42);
  background: linear-gradient(180deg, #80e3b4, var(--accent));
}
.shop-category-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.065);
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  touch-action: manipulation;
}
.shop-section { scroll-margin-top: 188px; }
@media (max-width: 700px) {
  .shop-category-nav-shell { top: 116px; grid-template-columns: 32px minmax(0,1fr) 32px; margin-inline: -2px; }
  .shop-category-arrow { width: 32px; }
  .shop-category-nav button { min-height: 34px; font-size: .66rem; }
  .shop-section { scroll-margin-top: 174px; }
}

/* V186 · Geführter Smartphone-Start */
.beginner-phone-tutorial {
  position: fixed;
  z-index: 2147483000;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  width: min(520px, calc(100vw - 28px));
  transform: translateX(-50%);
  padding: 16px 18px 17px;
  border: 1px solid rgba(255, 213, 89, .72);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(14, 20, 28, .98), rgba(25, 31, 41, .97));
  box-shadow: 0 18px 55px rgba(0, 0, 0, .42), 0 0 0 3px rgba(255, 207, 63, .12);
  color: #fff;
  pointer-events: none;
  text-align: left;
}
.beginner-phone-tutorial-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.beginner-phone-tutorial-progress span { font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #ffd75d; }
.beginner-phone-tutorial-progress button { border: 0; background: rgba(255,255,255,.09); color: #e9edf2; border-radius: 999px; padding: 7px 11px; font-weight: 800; cursor: pointer; pointer-events: auto; }
.beginner-phone-tutorial > small { display: block; color: #8fdcff; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.beginner-phone-tutorial h3 { margin: 4px 0 5px; color: #fff; font-size: clamp(18px, 3.6vw, 24px); }
.beginner-phone-tutorial p { margin: 0; color: #d9e1e9; line-height: 1.45; font-size: 14px; }
.jk-beginner-highlight {
  position: relative;
  z-index: 2147482000 !important;
  outline: 4px solid #ffd23f !important;
  outline-offset: 5px !important;
  box-shadow: 0 0 0 8px rgba(255, 210, 63, .20), 0 0 28px rgba(255, 210, 63, .82) !important;
  animation: jkBeginnerPulse 1.05s ease-in-out infinite alternate !important;
  scroll-margin: 150px 24px 80px;
}
@keyframes jkBeginnerPulse {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(1.16); transform: scale(1.025); }
}
@media (max-width: 600px) {
  .beginner-phone-tutorial { top: max(8px, env(safe-area-inset-top)); width: calc(100vw - 16px); padding: 13px 14px 14px; border-radius: 15px; }
  .beginner-phone-tutorial p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .jk-beginner-highlight { animation: none !important; }
}