@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Fredoka:wght@600;700&display=swap');

:root {
  --ink: #173f43;
  --ink-soft: #547479;
  --cream: #fff7de;
  --paper: #fffdf1;
  --teal: #0b7f83;
  --teal-deep: #075d64;
  --aqua: #65d9cf;
  --sun: #ffc95c;
  --coral: #f26f55;
  --leaf: #4f9e59;
  --shadow: 0 15px 40px rgba(17, 62, 64, .18);
  --radius: 22px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.32), transparent 22%),
    linear-gradient(155deg, #77dddc 0%, #42bfc1 43%, #219eae 100%);
  overscroll-behavior: none;
}

button { font: inherit; }
button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 3px; }

#app { min-height: 100vh; min-height: 100dvh; padding-bottom: 86px; }

.topbar {
  height: 72px;
  padding: 8px max(16px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
  background: rgba(5, 70, 78, .92);
  border-bottom: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 7px 24px rgba(2, 52, 59, .22);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: white;
  background: none;
  border: 0;
  padding: 2px 8px 2px 0;
  cursor: pointer;
  text-align: left;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #9d540d;
  font-size: 24px;
  background: var(--sun);
  box-shadow: inset 0 -4px rgba(194, 101, 14, .18);
}

.brand strong { display: block; font: 700 19px/1 "Fredoka", sans-serif; letter-spacing: .08em; }
.brand small { display: block; margin-top: 3px; font-size: 10px; opacity: .72; letter-spacing: .06em; }

.resources { display: flex; gap: 10px; margin-left: auto; }
.resource {
  min-width: 92px;
  height: 44px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  border-radius: 15px;
  color: #173f43;
  background: var(--paper);
  box-shadow: inset 0 -3px rgba(5, 70, 78, .08);
}
.resource > span { font-size: 19px; }
.resource strong { font-size: 17px; }
.resource small { color: var(--ink-soft); font-size: 10px; }
.resource.energy { padding-bottom: 10px; }
.resource.energy.overcharged { border-color: #fff0a0; background: linear-gradient(145deg,rgba(255,224,103,.98),rgba(255,143,77,.96)); box-shadow: 0 0 0 3px rgba(255,239,142,.3),0 7px 18px rgba(129,64,29,.3); }
.resource.energy.overcharged .energy-bar { background: linear-gradient(90deg,#fff5a8,#ff9d58); box-shadow: 0 0 8px rgba(255,224,104,.9); }
.resource-bar { position: absolute; left: 11px; right: 11px; bottom: 6px; height: 4px; overflow: hidden; border-radius: 9px; background: #d8e1d8; }
.resource-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f5a93c, #ffd95e); transition: width .25s; }

.icon-button, .soft-button, .primary-button {
  border: 0;
  cursor: pointer;
  transition: transform .14s, filter .14s, box-shadow .14s;
}
.icon-button:hover, .soft-button:hover, .primary-button:hover { transform: none; filter: brightness(1.04); }
.icon-button:active, .soft-button:active, .primary-button:active { transform: translateY(1px); }
.icon-button { width: 44px; height: 44px; border-radius: 15px; background: rgba(255,255,255,.14); color: white; font-size: 20px; }
.soft-button { padding: 10px 16px; border-radius: 13px; color: var(--teal-deep); background: rgba(255,255,255,.78); box-shadow: 0 5px 16px rgba(15,84,86,.12); font-weight: 700; }
.primary-button { padding: 12px 20px; border-radius: 14px; color: white; background: linear-gradient(#f58b58, #e45c43); box-shadow: 0 6px 0 #b84231, 0 10px 22px rgba(142,62,45,.22); font-weight: 800; }
.primary-button:active { box-shadow: 0 2px 0 #b84231, 0 5px 12px rgba(142,62,45,.18); }
.primary-button:disabled { filter: grayscale(.6); opacity: .6; cursor: not-allowed; transform: none; }
.primary-button small { margin-left: 6px; color: #ffe3b7; }
.wide { width: 100%; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 24px 34px; }
.view { display: none; animation: viewIn .25s ease-out; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }

.scene-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; color: white; text-shadow: 0 2px 8px rgba(5,77,84,.22); }
.scene-head h1 { margin: 2px 0 1px; font: 700 clamp(28px, 4vw, 42px)/1.05 "Fredoka", sans-serif; }
.scene-head p { margin: 5px 0 0; opacity: .9; }
.eyebrow { display: inline-block; color: #eab14d; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.scene-head .eyebrow { color: #fff1a6; }
.scene-actions { display: flex; align-items: center; gap: 9px; }.event-teaser { padding: 9px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 13px; color: #fff5c4; background: rgba(22,91,90,.6); font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); }

.island-stage {
  --tile-w: 110px;
  --tile-h: calc(var(--tile-w) * .667);
  --row-step: calc(var(--tile-w) * .245);
  aspect-ratio: 16 / 9;
  min-height: 640px;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.3) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 68%, rgba(130,245,235,.34) 0 3px, transparent 4px),
    repeating-radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.08) 0 2px, transparent 3px 25px),
    linear-gradient(145deg,#20b9ca,#087f9d 55%,#075f80);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.35);
}

.island-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2,55,67,.16), transparent 28% 72%, rgba(3,54,54,.3));
}

.island-viewport { position: absolute; z-index: 3; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.island-viewport.dragging { cursor: grabbing; }
.island-world { position: absolute; left: 0; top: 0; width: calc(var(--tile-w) * 19); height: calc(var(--tile-w) * 11); will-change: transform; }
.island-world.camera-animate { transition: transform .38s cubic-bezier(.2,.78,.28,1); }
.island-grid {
  width: calc(var(--tile-w) * 17);
  height: calc(var(--row-step) * 32 + var(--tile-h));
  position: absolute;
  left: var(--tile-w);
  top: calc(var(--tile-w) * 1.15);
  z-index: 3;
  filter: drop-shadow(0 18px 18px rgba(31,73,38,.22));
}

.tile {
  width: var(--tile-w);
  height: var(--tile-h);
  position: absolute;
  left: calc(var(--iso-x) * var(--tile-w) / 2);
  top: calc(var(--iso-y) * var(--row-step));
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: none;
  overflow: visible;
  background: transparent;
  transition: transform .18s, filter .18s, opacity .25s;
}
.tile::before {
  content: "";
  position: absolute;
  z-index: 7;
  left: 7%;
  right: 7%;
  top: 4%;
  height: 61%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  pointer-events: auto;
  cursor: pointer;
}
.tile.water { background: transparent; box-shadow: none; cursor: default; pointer-events: none; }
.tile.water::before { display: none; }
.tile.fishing { cursor: pointer; pointer-events: auto; }
.tile.fishing::before { display: block; pointer-events: auto; background: rgba(121,249,244,.08); }
.tile.fishing.spent { opacity: .28; pointer-events: none; }
.tile-sprite {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: saturate(.96);
  transition: transform .18s, filter .18s;
}
.tile.available { animation: tilePulse 1.8s infinite; }
.tile.available:hover { transform: scale(1.012); filter: brightness(1.1); }
.tool-mode .tile.available:not(.action-ready) { opacity: .67; filter: saturate(.75); }
.tile.action-ready { animation: digReady 1.15s ease-in-out infinite; }
.tile.action-ready::before { background: rgba(147,255,117,.13); filter: drop-shadow(0 0 7px #a9ff8a); }
.tile.ready-axe::before { background: rgba(255,200,92,.17); filter: drop-shadow(0 0 8px #ffd56a); }
.tile.ready-pickaxe::before { background: rgba(187,192,255,.17); filter: drop-shadow(0 0 8px #bec8ff); }
.tile.ready-rod::before { background: rgba(111,238,255,.22); filter: drop-shadow(0 0 10px #7cf4ff); }
.tile.action-ready:hover { transform: scale(1.018); filter: brightness(1.17) drop-shadow(0 0 8px rgba(152,255,124,.72)); }
.tile.selected { transform: scale(1.02); filter: brightness(1.12) drop-shadow(0 0 8px rgba(255,235,103,.9)); }
.tile.selected::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 15%;
  right: 15%;
  top: 17%;
  height: 43%;
  border: 3px solid rgba(255,245,139,.95);
  border-radius: 50%;
  transform: rotate(-1deg);
  box-shadow: 0 0 8px rgba(255,227,76,.72), inset 0 0 9px rgba(255,244,157,.45);
  pointer-events: none;
}
.tile.revealed .tile-sprite { animation: revealSurface .5s both; }
.tile .tile-deco {
  width: 80%;
  height: 110%;
  position: absolute;
  z-index: 4;
  left: 10%;
  bottom: 25%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 3px rgba(20,70,42,.34));
}
.tile .tile-deco-tree { width: 145%; height: 210%; left: -22%; bottom: 22%; }
.tile .tile-deco-palm { width: 120%; height: 220%; left: -10%; bottom: 20%; }
.tile .tile-deco-rock { width: 115%; height: 155%; left: -8%; bottom: 20%; }
.tile .tile-deco-thicket { width: 112%; height: 125%; left: -6%; bottom: 22%; }
.tile .tile-deco-guardian { width: 112%; height: 185%; left: -6%; bottom: 18%; }
.tile .tile-deco-camp { width: 102%; height: 145%; left: -1%; bottom: 16%; }
.tile .tile-deco-ruin { width: 190%; height: 205%; left: -45%; bottom: 8%; }
.tile .obstacle { animation: obstacleBreathe 2.2s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.tile.action-ready .obstacle { animation-duration: .8s; }
.fishing-spot-sprite { position: absolute; z-index: 5; left: -24%; bottom: -2%; width: 148%; height: 150%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 5px rgba(3,71,92,.28)); animation: fishRipple 1.8s ease-in-out infinite; }
@keyframes obstacleBreathe { to { transform: translateY(-2px) scale(1.015); } }
@keyframes fishRipple { 50% { transform: scale(1.045); filter: brightness(1.12) drop-shadow(0 0 9px rgba(115,244,255,.7)); } }
.tile .step-hint { position: absolute; width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; }
@keyframes tilePulse { 50% { filter: brightness(1.18) drop-shadow(0 0 8px rgba(255,242,137,.5)); } }
@keyframes digReady { 50% { filter: brightness(1.22) drop-shadow(0 0 11px rgba(143,255,112,.86)); } }
@keyframes revealSurface { from { transform: translateY(8px) scale(.88); filter: brightness(.7); } 65% { transform: translateY(-4px) scale(1.03); filter: brightness(1.18); } }

.tile.just-dug .tile-sprite { animation: digGround .7s ease-out both; }
.dig-particles { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.dig-particles i { position: absolute; left: 47%; top: 45%; width: 8px; height: 8px; border-radius: 45% 55% 48% 52%; background: #9a6037; box-shadow: inset 1px 1px rgba(255,213,143,.25); animation: dirtFly .68s ease-out both; }
.dig-particles i:nth-child(2) { animation-delay: .06s; --fly-x: -24px; --fly-y: -31px; transform: scale(.72); }
.dig-particles i:nth-child(3) { animation-delay: .1s; --fly-x: 27px; --fly-y: -24px; transform: scale(.55); }
.dig-progress { position: absolute; z-index: 30; left: 50%; bottom: 86%; width: 112px; transform: translateX(-50%); padding: 7px 9px; border: 2px solid rgba(255,255,255,.82); border-radius: 11px; color: white; background: rgba(18,74,68,.94); box-shadow: 0 6px 14px rgba(20,50,36,.3); pointer-events: none; text-align: center; }
.dig-progress strong { display: block; margin-bottom: 5px; font-size: 10px; white-space: nowrap; }
.dig-progress > i { display: block; height: 6px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.22); }
.dig-progress b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,#ffe36b,#72e38e); animation: digFill 1.02s linear forwards; }
.find-float { position: absolute; z-index: 40; left: 50%; bottom: 92%; width: max-content; max-width: 190px; padding: 5px 9px; transform: translateX(-50%); border-radius: 12px; color: #fffde4; background: rgba(21,102,78,.92); box-shadow: 0 5px 14px rgba(10,54,40,.25); font-size: 11px; font-weight: 900; pointer-events: none; animation: findFloat .8s ease-out both; }
@keyframes digGround { 0% { transform: translateY(-5px); } 35% { transform: translateY(7px) scale(.94); filter: brightness(.78); } 72% { transform: translateY(-3px) scale(1.02); } }
@keyframes dirtFly { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--fly-x, 20px), var(--fly-y, -34px)) rotate(120deg) scale(.8); } }
@keyframes digFill { to { width: 100%; } }
@keyframes findFloat { 0% { opacity: 0; transform: translate(-50%,12px) scale(.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-42px) scale(1.03); } }

.player { position: absolute; z-index: 150; width: var(--tile-w); height: var(--tile-h); display: grid; place-items: center; pointer-events: none; transition: left .38s cubic-bezier(.2,.85,.35,1.2), top .38s cubic-bezier(.2,.85,.35,1.2); }
.player-body { position: absolute; z-index: 2; width: calc(var(--tile-w) * .82); height: calc(var(--tile-w) * 1.18); bottom: 25%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 3px rgba(35,57,26,.3)); animation: bob 1.6s ease-in-out infinite; }
.player-shadow { position: absolute; bottom: 5%; width: 72%; height: 20%; border-radius: 50%; background: rgba(31,59,34,.34); filter: blur(3px); }
@keyframes bob { 50% { transform: translateY(-4px); } }
.player.digging .player-body { animation: playerDig .72s ease-in-out both; transform-origin: 50% 90%; }
@keyframes playerDig { 0%, 100% { transform: translateY(0) rotate(0); } 34% { transform: translateY(-4px) rotate(-7deg); } 58% { transform: translateY(4px) rotate(8deg) scaleY(.96); } }

.cloud { position: absolute; z-index: 8; width: 150px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.2); filter: blur(2px); pointer-events: none; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 65px; height: 65px; left: 28px; bottom: 4px; }
.cloud::after { width: 80px; height: 72px; right: 18px; bottom: 1px; }
.cloud-a { left: -45px; top: 40px; animation: drift 15s ease-in-out infinite alternate; }
.cloud-b { right: -55px; bottom: 65px; transform: scale(.8); animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { translate: 45px 8px; } }
.sea-sparkle { position: absolute; z-index: 2; color: rgba(255,255,255,.75); font-size: 34px; animation: shimmer 2.5s ease-in-out infinite; }
.sparkle-a { left: 9%; bottom: 25%; }.sparkle-b { right: 11%; top: 23%; animation-delay: 1s; }
@keyframes shimmer { 50% { opacity: .25; transform: scale(.65) rotate(30deg); } }

.adventure-rail { position: absolute; z-index: 13; left: 16px; top: 18%; display: grid; gap: 9px; }
.adventure-rail button { width: 67px; min-height: 66px; padding: 7px 5px; border: 3px solid rgba(255,255,255,.8); border-radius: 18px; color: white; background: linear-gradient(145deg, rgba(18,116,115,.94), rgba(8,74,80,.96)); box-shadow: 0 5px 0 rgba(4,55,58,.7), 0 10px 20px rgba(3,47,51,.2); cursor: pointer; }
.adventure-rail button:hover { transform: none; filter: brightness(1.1); }
.adventure-rail span, .adventure-rail small { display: block; }
.adventure-rail span { font-size: 25px; }.adventure-rail small { margin-top: 2px; font-size: 9px; font-weight: 800; }
.tool-dock { position: absolute; z-index: 18; right: 13px; top: 8%; max-height: 82%; display: grid; gap: 6px; overflow-y: auto; padding: 3px 5px 9px; scrollbar-width: none; }
.tool-button { width: 62px; min-height: 58px; padding: 5px 3px; border: 3px solid rgba(255,255,255,.86); border-radius: 18px; color: #20545a; background: linear-gradient(#fff8d7,#e9dca9); box-shadow: 0 5px 0 #ad8d4f, 0 9px 18px rgba(16,59,56,.22); cursor: pointer; transition: transform .16s,filter .16s,box-shadow .16s; }
.tool-button:hover { transform: none; filter: brightness(1.06); }
.tool-button span,.tool-button small { display: block; }
.tool-button span { font-size: 25px; }.tool-button small { margin-top: 1px; font-size: 8px; font-weight: 900; }
.tool-button.active { color: white; border-color: #eaffc9; background: linear-gradient(#62c668,#309358); box-shadow: 0 5px 0 #176e43, 0 0 0 5px rgba(178,255,132,.28), 0 12px 24px rgba(16,82,46,.35); }
.tool-button.needs-attention { animation: toolNudge .48s ease-in-out 2; }
@keyframes toolNudge { 25% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(8deg) scale(1.08); } }
.tool-hint { position: absolute; z-index: 17; left: 50%; bottom: 14px; translate: -50% 0; min-width: 360px; padding: 9px 14px; display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; border: 2px solid rgba(255,255,255,.78); border-radius: 17px; color: #244d4b; background: rgba(255,250,221,.94); box-shadow: 0 7px 20px rgba(12,60,54,.24); backdrop-filter: blur(8px); }
.tool-hint > span { grid-row: 1 / span 2; align-self: center; font-size: 25px; }.tool-hint strong,.tool-hint small { display: block; }.tool-hint strong { font-size: 12px; }.tool-hint small { color: #58706c; font-size: 10px; }
.tool-hint.active { color: #145b39; border-color: rgba(202,255,177,.9); background: rgba(226,255,205,.95); }
.island-objective { position: absolute; z-index: 12; right: 18px; bottom: 19px; max-width: 255px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border: 2px solid rgba(255,255,255,.75); border-radius: 17px; color: var(--ink); background: rgba(255,253,235,.93); box-shadow: 0 7px 22px rgba(17,66,54,.25); backdrop-filter: blur(7px); }
.island-objective > span { font-size: 25px; }.island-objective small, .island-objective strong { display: block; }.island-objective small { color: #b07a25; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.island-objective strong { margin-top: 2px; font-size: 12px; }
.camera-pad { position: absolute; z-index: 20; left: 50%; bottom: 62px; translate: -50% 0; display: flex; gap: 4px; padding: 5px; border: 1px solid rgba(255,255,255,.6); border-radius: 16px; background: rgba(8,83,91,.72); backdrop-filter: blur(9px); }
.camera-pad button { width: 31px; height: 29px; border: 0; border-radius: 10px; color: white; background: rgba(255,255,255,.15); cursor: pointer; font-size: 11px; }.camera-pad button:hover { background: rgba(255,255,255,.28); }.camera-pad #cameraCenterButton { color: #ffe67c; }

.selection-card {
  max-width: 560px;
  margin: -48px auto 0;
  padding: 14px 15px 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  z-index: 12;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow);
  animation: cardUp .24s ease-out;
}
.selection-card.hidden { display: none; }
.selection-copy { display: flex; align-items: center; gap: 12px; }
.selection-icon { font-size: 28px; }
.selection-copy strong, .selection-copy small { display: block; }
.selection-copy small { margin-top: 3px; color: var(--ink-soft); }
@keyframes cardUp { from { opacity: 0; transform: translateY(16px); } }

.friends-bar { position: relative; z-index: 14; margin: -20px 38px 16px; padding: 12px 14px; display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 12px; align-items: center; border: 2px solid rgba(255,255,255,.66); border-radius: 24px; background: rgba(255,250,225,.95); box-shadow: 0 12px 30px rgba(9,70,69,.25); backdrop-filter: blur(12px); }
.friends-heading { display: flex; align-items: center; gap: 9px; color: var(--ink); }.friends-heading > span { font-size: 26px; }.friends-heading strong,.friends-heading small { display: block; }.friends-heading strong { font: 700 15px "Fredoka",sans-serif; }.friends-heading small { margin-top: 2px; color: var(--ink-soft); font-size: 9px; line-height: 1.25; }
.friends-list { min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 7px; scrollbar-color: #79b6a4 transparent; }
.friend-card { min-width: 150px; height: 60px; padding: 5px 8px 5px 5px; display: grid; grid-template-columns: 49px 1fr auto; align-items: center; gap: 7px; border: 2px solid #d6c48a; border-radius: 17px; color: var(--ink); background: linear-gradient(#fffdf0,#eee4be); box-shadow: 0 4px 0 #b6a162; cursor: pointer; text-align: left; }
.friend-card:hover { transform: none; filter: brightness(1.03); }.friend-card.visited { filter: saturate(.65); opacity: .82; }.friend-card > span:nth-child(2) strong,.friend-card > span:nth-child(2) small { display: block; white-space: nowrap; }.friend-card > span:nth-child(2) strong { font-size: 12px; }.friend-card > span:nth-child(2) small { color: var(--ink-soft); font-size: 9px; }.friend-card > i { color: #31945a; font-size: 10px; font-style: normal; font-weight: 900; white-space: nowrap; }
.friend-avatar { width: 49px; height: 49px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: linear-gradient(#77d0c6,#d7efba); }.friend-avatar img { width: 120%; height: 120%; object-fit: contain; object-position: center top; }.add-friend .friend-avatar { color: white; background: linear-gradient(#ef9b62,#df6548); font-size: 27px; }

.home-layout, .journal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
.home-layout > *, .journal-layout > * { min-width: 0; }
.home-stage {
  min-height: 570px;
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 32px;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 62%, rgba(116,243,235,.26) 0 3px, transparent 4px),
    repeating-radial-gradient(ellipse at 35% 45%, rgba(255,255,255,.07) 0 2px, transparent 3px 29px),
    linear-gradient(145deg,#27bfd0,#087f9d 58%,#075f80);
  box-shadow: var(--shadow), inset 0 0 38px rgba(2,61,79,.22);
  scrollbar-color: rgba(255,238,156,.75) rgba(4,88,102,.35);
}
.home-world { width: 1540px; height: 900px; position: relative; margin: auto; }
.home-grid {
  --home-tile-w: 94px;
  --home-tile-h: 63px;
  --home-row-step: 23.5px;
  width: 1540px;
  height: 900px;
  position: absolute;
  inset: 0;
  transform-origin: left top;
  filter: drop-shadow(0 20px 18px rgba(15,69,43,.24));
}
.home-cell {
  width: var(--home-tile-w);
  height: var(--home-tile-h);
  padding: 0;
  position: absolute;
  left: calc(var(--iso-x) * var(--home-tile-w) / 2);
  top: calc(var(--iso-y) * var(--home-row-step) + 92px);
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform .16s, filter .16s, opacity .2s;
}
.home-cell img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; user-select: none; }
.home-cell.unlocked:hover { z-index: 200 !important; transform: scale(1.012); filter: brightness(1.11); }
.home-cell.locked { opacity: .42; filter: grayscale(.45) brightness(.75); }
.home-cell.locked:hover { opacity: .64; filter: grayscale(.15) brightness(.9); }
.home-cell.valid::after,.home-cell.blocked::after {
  content: "";
  position: absolute;
  inset: 9% 8% 27%;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  pointer-events: none;
}
.home-cell.valid::after { background: rgba(148,255,101,.34); filter: drop-shadow(0 0 8px #baff83); animation: homeBuildPulse 1.2s ease-in-out infinite; }
.home-cell.blocked::after { background: rgba(244,102,74,.12); }
@keyframes homeBuildPulse { 50% { opacity: .45; transform: scale(.86); } }
.home-placement {
  position: absolute;
  left: calc(var(--iso-min) * var(--home-tile-w) / 2);
  top: calc(var(--iso-y) * var(--home-row-step) + 92px);
  width: calc(var(--foot-span) * var(--home-tile-w) / 2);
  height: calc(var(--foot-rows) * var(--home-row-step) + var(--home-tile-h));
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.home-placement::before { content: ""; position: absolute; inset: 17% 5% 9%; border: 2px dashed transparent; border-radius: 50%; transition: border-color .15s,background .15s; }
.home-placement:hover::before { border-color: rgba(255,248,153,.9); background: rgba(255,239,114,.12); }
.home-building-art { width: 155%; height: 270px; position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); object-fit: contain; object-position: center bottom; pointer-events: none; filter: drop-shadow(0 11px 6px rgba(23,60,38,.34)); }
.home-placement.rotated .home-building-art { transform: translateX(-50%) scaleX(-1); }
.home-placement.asset-decoration .home-building-art { width: 175%; height: 235px; bottom: 8%; }
.home-placement.asset-decoration.footprint-2x2 .home-building-art { width: 168%; height: 255px; bottom: 5%; }
.home-placement[data-item-id="coralLighthouse"] .home-building-art { width: 155%; height: 390px; bottom: 3%; }
.home-placement[data-item-id="hibiscusArch"] .home-building-art { width: 185%; height: 275px; bottom: 2%; }
.home-placement[data-item-id="gardenFootbridge"] .home-building-art { width: 205%; height: 235px; bottom: 5%; }
.home-placement.footprint-2x2 .home-building-art { width: 170%; height: 235px; }
.home-placement.footprint-4x2 .home-building-art { width: 155%; height: 290px; bottom: 10%; }
.home-decoration-art { position: absolute; left: 50%; bottom: 32%; translate: -50% 0; font-size: 48px; line-height: 1; filter: drop-shadow(0 7px 4px rgba(28,55,35,.34)); pointer-events: none; }
.placement-store-hint { position: absolute; z-index: 3; left: 50%; bottom: 0; translate: -50% 0; padding: 4px 7px; border-radius: 9px; color: white; background: rgba(20,86,72,.9); box-shadow: 0 4px 9px rgba(14,58,51,.22); font-size: 8px; font-weight: 900; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.home-placement:hover .placement-store-hint,.home-placement:focus-visible .placement-store-hint { opacity: 1; }
.home-zoom { position: sticky; z-index: 500; left: 14px; bottom: 14px; width: max-content; display: flex; gap: 4px; padding: 5px; border: 1px solid rgba(255,255,255,.58); border-radius: 15px; background: rgba(7,83,91,.84); box-shadow: 0 7px 18px rgba(3,47,51,.2); backdrop-filter: blur(9px); }
.home-zoom button { min-width: 34px; height: 31px; padding: 0 8px; border: 0; border-radius: 10px; color: white; background: rgba(255,255,255,.14); cursor: pointer; font-size: 13px; font-weight: 900; }
.home-zoom button:hover { background: rgba(255,255,255,.27); }.home-zoom button:disabled { opacity: .4; cursor: default; }
.home-selection-hint { position: sticky; z-index: 490; left: 180px; bottom: 68px; width: min(62%,560px); margin: -52px 15px 14px auto; padding: 9px 13px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px; color: #315653; background: rgba(255,250,222,.93); box-shadow: 0 7px 18px rgba(5,59,56,.2); font-size: 10px; font-weight: 800; text-align: center; backdrop-filter: blur(7px); }
.home-actions { flex-wrap: wrap; justify-content: flex-end; }
.home-actions .primary-button { padding: 10px 15px; box-shadow: 0 4px 0 #b84231,0 7px 16px rgba(142,62,45,.2); font-size: 12px; }
.shop-panel, .paper-card { padding: 25px; border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); }
.shop-panel h2, .paper-card h2 { margin: 5px 0 6px; font: 700 24px/1.15 "Fredoka", sans-serif; }
.shop-panel > p { color: var(--ink-soft); font-size: 14px; }
.shop-items { display: grid; gap: 9px; margin-top: 18px; max-height: min(55vh,500px); overflow-y: auto; padding-right: 4px; }
.shop-item { width: 100%; padding: 10px 12px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; overflow: hidden; border: 2px solid transparent; border-radius: 15px; color: var(--ink); background: #f2eedc; cursor: pointer; text-align: left; }
.shop-item:hover { background: #e8f3df; }
.shop-item.selected { border-color: var(--teal); background: #dff2e5; }
.shop-item > span { font-size: 27px; text-align: center; }
.shop-item .shop-item-art { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: #e2ebcd; }
.shop-item .shop-item-art img { width: 135%; height: 135%; object-fit: contain; }
.shop-item > span:nth-child(2) { min-width: 0; overflow: hidden; }
.shop-item > span:nth-child(2) strong,.shop-item > span:nth-child(2) small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-item strong, .shop-item small { display: block; }
.shop-item small { color: var(--ink-soft); font-size: 11px; }
.shop-item b { font-size: 13px; color: #a06d18; }

.journal-layout { grid-template-columns: 360px minmax(0,1fr); align-items: start; }
.paper-card { position: relative; min-height: 300px; }
.paper-pin { position: absolute; right: 22px; top: 18px; color: var(--coral); font-size: 28px; }
.quest-list { display: grid; gap: 14px; margin-top: 20px; }
.quest { padding: 14px; border-radius: 15px; background: #f4f0dd; }
.quest-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.quest-head strong { font-size: 14px; }
.quest-head span { color: var(--teal); font-size: 12px; font-weight: 800; }
.quest-track { height: 8px; overflow: hidden; border-radius: 8px; background: #d9dccb; }
.quest-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4dbba5, #78cf8c); }
.quest-reward { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 11px; }
.quest.done { background: #e1f2dc; }
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.relic { min-height: 120px; display: grid; place-items: center; padding: 12px; border-radius: 18px; background: #eee9d5; border: 2px dashed #d5cdb2; text-align: center; }
.relic.found { background: linear-gradient(145deg, #fff5bf, #f6e7a0); border: 2px solid #e8c468; box-shadow: inset 0 0 22px rgba(255,255,255,.7); }
.relic-icon { font-size: 40px; filter: grayscale(1); opacity: .18; }
.relic.found .relic-icon { filter: none; opacity: 1; animation: relicIn .45s both; }
.relic strong { font-size: 11px; margin-top: 3px; }
.relic:not(.found) strong { color: transparent; background: #d6d0bc; border-radius: 8px; user-select: none; }
@keyframes relicIn { from { transform: rotate(-18deg) scale(.4); } }
.collection-bonus { margin: 20px 0 0; padding: 12px; color: #8c6627; background: #fff4c9; border-radius: 13px; font-size: 13px; }

.bottom-nav {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(13px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 22px;
  background: rgba(255,253,241,.93);
  box-shadow: 0 12px 35px rgba(4,66,73,.28);
  backdrop-filter: blur(14px);
}
.nav-button { min-width: 112px; padding: 7px 15px; position: relative; border: 0; border-radius: 16px; color: #698286; background: transparent; cursor: pointer; }
.nav-button > span, .nav-button > strong { display: block; }
.nav-button > span { font-size: 22px; }
.nav-button > strong { margin-top: 2px; font-size: 11px; }
.nav-button.active { color: white; background: var(--teal); box-shadow: inset 0 -3px rgba(0,60,63,.2); }
.badge { position: absolute; right: 15px; top: 5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: white; background: var(--coral); font-size: 10px; font-style: normal; }
.hidden { display: none !important; }

.game-dialog { width: min(92vw, 520px); padding: 0; overflow: hidden; border: 0; border-radius: 28px; color: var(--ink); background: var(--paper); box-shadow: 0 25px 80px rgba(2,49,54,.38); }
.game-dialog::backdrop { background: rgba(3,48,53,.64); backdrop-filter: blur(5px); }
.dialog-art { height: 205px; display: grid; place-items: center; position: relative; overflow: hidden; background: #56c8c5 url("assets/art/emerald-bay-v2.png") center 54% / cover no-repeat; }
.dialog-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,89,91,.18), transparent 55%); }
.dialog-art .sun { position: absolute; top: 22px; right: 58px; width: 65px; height: 65px; border-radius: 50%; background: #ffdb70; box-shadow: 0 0 0 14px rgba(255,226,130,.18); }
.welcome-mira { position: absolute; z-index: 2; right: 8%; bottom: -45%; width: 37%; height: 165%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 5px rgba(2,48,45,.28)); }
.dialog-content { padding: 28px 34px 32px; }
.dialog-content h2, .discovery-dialog h2, .menu-dialog h2 { margin: 5px 0 8px; font: 700 29px/1.1 "Fredoka", sans-serif; }
.dialog-content p, .discovery-dialog p, .menu-dialog p { color: var(--ink-soft); line-height: 1.55; }
.dialog-content ul { margin: 19px 0 24px; padding: 0; list-style: none; display: grid; gap: 9px; }
.dialog-content li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.dialog-content li span { font-size: 21px; }
.dialog-close { position: absolute; right: 16px; top: 13px; width: 36px; height: 36px; z-index: 2; border: 0; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.72); cursor: pointer; font-size: 25px; }
.discovery-dialog, .menu-dialog { padding: 35px; text-align: center; overflow: visible; }
.discovery-glow { width: 125px; height: 125px; margin: -80px auto 23px; display: grid; place-items: center; border: 7px solid var(--paper); border-radius: 50%; background: radial-gradient(circle, #fff8bd, #ffd96f); box-shadow: 0 0 45px rgba(255,211,78,.5); }
.discovery-icon { font-size: 64px; animation: prize 1.3s ease-in-out infinite alternate; }
@keyframes prize { to { transform: translateY(-5px) rotate(5deg); } }
.reward-row { display: flex; justify-content: center; gap: 9px; margin: 18px 0 24px; }
.reward-chip { padding: 7px 12px; border-radius: 20px; background: #edf1dc; font-weight: 800; font-size: 13px; }
.menu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }
.menu-stats div { padding: 13px 6px; border-radius: 15px; background: #f1eedc; }
.menu-stats span, .menu-stats strong, .menu-stats small { display: block; }
.menu-stats span { font-size: 24px; }.menu-stats strong { margin: 4px 0 1px; font-size: 20px; }.menu-stats small { color: var(--ink-soft); }
.menu-dialog .soft-button { margin-top: 12px; background: #e8ecdc; }

.store-dialog { width: min(94vw, 900px); padding: 29px; overflow: visible; }
.store-head { display: flex; justify-content: space-between; gap: 24px; padding-right: 38px; }.store-head h2 { margin: 4px 0; font: 700 29px/1.1 "Fredoka",sans-serif; }.store-head p { margin: 0; color: var(--ink-soft); }.store-balance { min-width: 110px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid #dec06d; border-radius: 17px; background: #fff1ad; font-size: 18px; }
.store-tabs { margin: 22px 0 16px; display: flex; gap: 8px; border-bottom: 2px solid #dcd8c2; }.store-tab { padding: 10px 17px; border: 0; border-radius: 12px 12px 0 0; color: var(--ink-soft); background: transparent; cursor: pointer; font-weight: 800; }.store-tab.active { color: white; background: var(--teal); }
.store-grid { max-height: min(55vh,520px); overflow-y: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 2px 5px 5px 2px; }
.store-item { min-width: 0; padding: 12px; display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 2px solid #ded6b8; border-radius: 19px; background: linear-gradient(145deg,#fffdf1,#eee7cb); }.store-item-art { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 17px; background: #dcedc8; font-size: 38px; }.store-item strong,.store-item small { display: block; }.store-item strong { font-size: 14px; }.store-item small { margin-top: 2px; color: #318265; font-size: 10px; font-weight: 800; }.store-item p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; }.store-buy { min-width: 72px; padding: 9px 10px; border: 0; border-radius: 12px; color: #634311; background: linear-gradient(#ffe98d,#efc957); box-shadow: 0 4px 0 #bc932e; cursor: pointer; font-size: 11px; font-weight: 900; }.store-buy:disabled { box-shadow: none; filter: grayscale(.8); opacity: .55; cursor: not-allowed; }

/* Valoria-Handel: verkäufliche Funde aus Schatzkisten */
.trade-dialog { width:min(94vw,820px); max-height:min(92dvh,760px); padding:28px; overflow:hidden; background:linear-gradient(155deg,#fff9dc,#eee3bd); }
.trade-head { padding-right:42px; display:grid; grid-template-columns:68px minmax(0,1fr) auto; align-items:center; gap:14px; }
.trade-head h2 { margin:3px 0 4px; font:700 29px/1.05 "Fredoka",sans-serif; }.trade-head p { margin:0; color:var(--ink-soft); font-size:11px; line-height:1.45; }
.trade-merchant { width:62px; height:62px; display:grid; place-items:center; border:3px solid #bd873c; border-radius:20px; color:#66431e; background:linear-gradient(145deg,#ffe69a,#d99b43); box-shadow:inset 0 -6px rgba(115,65,23,.14); font-size:34px; }
.trade-wallet { min-width:92px; padding:10px 13px; display:flex; justify-content:center; align-items:center; gap:7px; border:2px solid #d4ad57; border-radius:15px; background:#fff0a8; font-size:17px; }
.trade-goods-list { min-height:190px; max-height:min(52dvh,430px); margin:20px 0 14px; padding-right:5px; display:grid; align-content:start; gap:9px; overflow-y:auto; }
.trade-good { padding:11px; display:grid; grid-template-columns:58px minmax(0,1fr) 116px; align-items:center; gap:11px; border:2px solid #d9c896; border-radius:17px; background:rgba(255,253,238,.82); }
.trade-good.highlighted { border-color:#d5953d; box-shadow:0 0 0 4px rgba(239,190,85,.2); }
.trade-good-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:15px; background:#e3edce; font-size:32px; }.trade-good strong,.trade-good small { display:block; }.trade-good strong { font-size:13px; }.trade-good small { margin-top:2px; color:#71806d; font-size:8px; }.trade-good p { margin:5px 0 0; color:#62706a; font-size:9px; line-height:1.35; }
.trade-good-price { text-align:right; }.trade-good-price b { display:block; color:#806020; font-size:14px; }.trade-good-price button { margin-top:7px; padding:8px 9px; border:0; border-radius:10px; color:white; background:#418665; cursor:pointer; font-size:9px; font-weight:900; }
.trade-empty { min-height:190px; display:grid; place-items:center; align-content:center; gap:5px; color:#768171; text-align:center; }.trade-empty span { font-size:48px; }.trade-empty strong { color:#466157; }.trade-empty small { max-width:360px; line-height:1.45; }
.trade-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:13px; border-top:2px solid rgba(145,113,48,.17); }.trade-footer span { color:#617069; font-size:10px; font-weight:800; }.trade-footer button { flex:0 0 auto; }.trade-footer button:disabled { opacity:.45; cursor:not-allowed; }

.friend-dialog { width: min(92vw,480px); padding: 0 30px 30px; overflow: visible; text-align: center; }.friend-scene { height: 220px; margin: 0 -30px 24px; overflow: hidden; border-radius: 28px 28px 50% 50% / 28px 28px 28px 28px; background: #40b9bd url("assets/art/emerald-bay-v2.png") center 60% / cover no-repeat; }.friend-scene img { width: 54%; height: 116%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 5px rgba(9,56,48,.3)); }.friend-dialog h2 { margin: 5px 0 3px; font: 700 31px/1 "Fredoka",sans-serif; }.friend-dialog > p { margin: 0; color: var(--ink-soft); }.friend-message { margin: 18px 0; padding: 13px; border-radius: 15px; color: #326254; background: #e4f0d5; font-size: 13px; line-height: 1.45; }

/* Valoria: große, begehbare Hauptstadtkarte */
body[data-island-theme="valoria"] .topbar { background: linear-gradient(90deg,#173e55,#245e76 52%,#7c5f2a); }
.valoria-stage { background: radial-gradient(circle at 50% 22%,rgba(255,218,112,.26),transparent 28%),linear-gradient(155deg,#4ca9c0,#153f5d 66%,#102d46); }
.valoria-stage::after { z-index: 4; background: linear-gradient(180deg,rgba(7,35,53,.22),transparent 22% 75%,rgba(4,25,42,.38)); }
.valoria-stage .cloud,.valoria-stage .sea-sparkle,.valoria-stage #coopButton,.valoria-stage .sponsor-placement,.valoria-stage .tool-dock [data-tool] { display: none; }
.valoria-stage + .friends-bar { border-color:rgba(235,199,105,.72); background:linear-gradient(145deg,rgba(255,250,225,.97),rgba(226,241,222,.96)); box-shadow:0 12px 30px rgba(5,42,61,.32); }
.valoria-world { width: calc(var(--tile-w) * 22); height: calc(var(--tile-w) * 14); overflow: visible; border: 5px solid rgba(255,231,151,.45); border-radius: 42px; background: #5a9cb3 url("assets/art/valoria/valoria-city-v1.png") center / 100% 100% no-repeat; box-shadow: 0 30px 75px rgba(1,25,43,.55),inset 0 0 80px rgba(255,235,162,.18); }
.valoria-world::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; border-radius:inherit; background: linear-gradient(180deg,rgba(255,226,136,.08),transparent 32% 74%,rgba(5,38,60,.14)); }
.valoria-grid { width:100%; height:100%; left:0; top:0 !important; z-index:8; filter:none; }
.valoria-location { min-width:0; padding:0; display:flex; align-items:center; gap:8px; position:absolute; z-index:20; transform:translate(-50%,-50%); border:0; color:white; background:transparent; cursor:pointer; filter:drop-shadow(0 5px 8px rgba(7,31,48,.42)); transition:transform .2s,filter .2s; }
.valoria-location:hover,.valoria-location:focus-visible { z-index:35; transform:translate(-50%,-50%) scale(1.015); filter:brightness(1.1) drop-shadow(0 7px 10px rgba(7,31,48,.46)); outline:none; }
.valoria-pin { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; position:relative; border:3px solid #fff4be; border-radius:50% 50% 50% 12px; transform:rotate(-45deg); color:#183b50; background:linear-gradient(145deg,#fffbe0,#e7b957); box-shadow:0 0 0 5px rgba(22,82,104,.45),0 7px 15px rgba(8,35,51,.42); }
.valoria-pin i { transform:rotate(45deg); font-size:23px; font-style:normal; }
.valoria-pin b { width:18px; height:18px; display:grid; place-items:center; position:absolute; right:-7px; top:-6px; transform:rotate(45deg); border:2px solid white; border-radius:50%; color:white; background:#3aa56f; font-size:10px; }
.valoria-label { max-width:190px; padding:8px 11px; display:block; border:2px solid rgba(255,239,178,.85); border-radius:13px; color:#fff9da; background:linear-gradient(145deg,rgba(18,62,82,.94),rgba(24,45,70,.93)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); text-align:left; backdrop-filter:blur(6px); }
.valoria-label small,.valoria-label strong { display:block; white-space:nowrap; }
.valoria-label small { color:#f2cd71; font-size:7px; font-weight:900; letter-spacing:.1em; }
.valoria-label strong { margin-top:2px; font:700 12px/1.05 "Fredoka",sans-serif; }
.valoria-location.visited .valoria-pin { background:linear-gradient(145deg,#e9fff1,#72cea0); }
.valoria-location.current .valoria-pin { animation:valoriaCurrent 1.35s ease-in-out infinite alternate; }
@keyframes valoriaCurrent { to { box-shadow:0 0 0 8px rgba(255,224,116,.42),0 0 28px #ffe38b; } }
.valoria-ambient { position:absolute; z-index:5; pointer-events:none; color:#ffedac; text-shadow:0 0 10px #fff6bd; font-size:22px; animation:valoriaFloat 2.4s ease-in-out infinite alternate; }
.valoria-ambient.ambient-1 { color:#90e7ff; animation-delay:-.8s; }.valoria-ambient.ambient-2 { animation-delay:-1.6s; }
@keyframes valoriaFloat { to { transform:translateY(-10px); opacity:.5; } }
.valoria-world .player { z-index:70; width:calc(var(--tile-w) * .54); height:calc(var(--tile-h) * .54); transform:none; }
.valoria-world .player-body { width:calc(var(--tile-w) * .48); height:calc(var(--tile-w) * .72); bottom:12%; filter:drop-shadow(0 7px 5px rgba(8,33,44,.48)); }
.valoria-world .player-shadow { bottom:0; }
.valoria-stage .tool-hint { left:50%; right:auto; max-width:min(520px,54vw); transform:translateX(-50%); color:#fff4c8; border-color:rgba(255,232,157,.76); background:rgba(15,50,70,.9); }
.map-island.city { width:245px; }.map-island.city .map-island-art img { object-fit:cover; border:3px solid rgba(255,238,167,.8); border-radius:22px; box-shadow:0 8px 20px rgba(3,56,77,.32); }

.city-dialog { width:min(94vw,920px); max-height:min(92dvh,740px); display:none; grid-template-columns:minmax(280px,42%) minmax(0,58%); overflow:hidden; border:3px solid #d8b568; color:#f8efd6; background:linear-gradient(145deg,#173f53,#102b42 64%,#342e3e); }
.city-dialog[open] { display:grid; }
.city-dialog .dialog-close { color:white; background:rgba(12,38,54,.72); }
.city-dialog-portrait { min-height:560px; position:relative; overflow:hidden; background:linear-gradient(#5bb8cf,#174d68); }
.city-dialog-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(10,34,49,.42)); }
.city-dialog-portrait img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.city-dialog-copy { padding:clamp(27px,4vw,54px); align-self:center; }
.city-dialog-copy .eyebrow { color:#e6bf69; }
.city-dialog-copy h2 { margin:7px 0 13px; color:#fff7d7; font:700 clamp(29px,4vw,43px)/1.02 "Fredoka",sans-serif; }
.city-dialog-copy > p { margin:0; color:#d6e9e9; font-size:14px; line-height:1.6; }
.city-people { margin:18px 0 0; padding:9px 12px; border:1px solid rgba(232,195,106,.42); border-radius:12px; color:#f2cf7b; background:rgba(255,255,255,.06); font-size:10px; font-weight:900; letter-spacing:.04em; }
.city-dialog-copy blockquote { margin:18px 0 22px; padding:14px 17px; border-left:4px solid #deb65d; border-radius:0 14px 14px 0; color:#fff1b7; background:rgba(222,182,93,.1); font:italic 600 14px/1.5 Georgia,serif; }
.city-dialog-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:10px; }
.city-dialog-actions .soft-button { margin:0; color:#e7f3ef; background:rgba(255,255,255,.12); }

.world-map-dialog { width: min(97vw,1120px); padding: 25px; overflow: visible; background: linear-gradient(160deg,#fff9dc,#dff1d1); }.world-map-head { padding-right: 42px; }.world-map-head h2 { margin: 4px 0 5px; font: 700 31px/1.1 "Fredoka",sans-serif; }.world-map-head p { margin: 0; color: var(--ink-soft); }.archipelago-frame { height: min(62vh,590px); min-height: 480px; margin-top: 16px; position: relative; overflow: hidden; border: 4px solid rgba(255,255,255,.83); border-radius: 31px; background: radial-gradient(ellipse at 28% 32%,rgba(124,245,235,.85),transparent 27%),radial-gradient(ellipse at 72% 64%,rgba(61,211,220,.72),transparent 31%),repeating-radial-gradient(ellipse at 40% 60%,rgba(255,255,255,.1) 0 2px,transparent 3px 24px),linear-gradient(145deg,#13c5d3,#087fa9 58%,#075d8e); box-shadow: inset 0 0 38px rgba(1,64,104,.32),0 13px 28px rgba(14,79,84,.24); }.archipelago-frame::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.32; background-image:radial-gradient(circle at 12% 18%,#fff 0 2px,transparent 3px),radial-gradient(circle at 63% 27%,#fff 0 1px,transparent 2px),radial-gradient(circle at 78% 82%,#fff 0 2px,transparent 3px); background-size:180px 150px,140px 130px,210px 170px; }.island-map-grid { width:100%; height:100%; position:absolute; inset:0; z-index:3; }.archipelago-routes { position:absolute; z-index:2; inset:5% 3%; width:94%; height:90%; overflow:visible; filter:drop-shadow(0 2px 0 rgba(0,71,109,.26)); }.archipelago-routes path { fill:none; stroke:#ffd85d; stroke-width:7; stroke-linecap:round; stroke-dasharray:2 19; animation:mapRouteFlow 10s linear infinite; }.archipelago-routes path:nth-child(2) { stroke:#fff3a6; animation-direction:reverse; }.map-island { width:210px; height:160px; padding:0; position:absolute; left:var(--map-x); top:var(--map-y); transform:translate(-50%,-50%) rotate(var(--map-rotate)); border:0; color:#174c4c; background:transparent; cursor:pointer; text-align:center; filter:drop-shadow(0 9px 7px rgba(3,63,82,.34)); transition:transform .2s,filter .2s; }.map-island:hover { transform:translate(-50%,-54%) rotate(var(--map-rotate)) scale(1.05); filter:brightness(1.08) drop-shadow(0 13px 10px rgba(3,63,82,.38)); }.map-island-art { width:100%; height:112px; display:block; position:relative; }.map-island-art img { width:100%; height:100%; object-fit:contain; transform:scale(var(--map-scale)); transform-origin:center bottom; pointer-events:none; }.map-island-art em { width:31px; height:31px; display:grid; place-items:center; position:absolute; right:14px; top:2px; border:2px solid white; border-radius:50%; background:#186c7c; box-shadow:0 4px 9px rgba(2,57,73,.35); font-size:17px; font-style:normal; }.map-island-copy { min-width:155px; max-width:205px; padding:7px 10px 8px; display:block; position:absolute; left:50%; bottom:0; transform:translateX(-50%); border:2px solid rgba(255,255,255,.82); border-radius:14px; background:rgba(255,251,218,.94); box-shadow:0 5px 0 rgba(22,98,89,.55); backdrop-filter:blur(7px); }.map-island strong,.map-island small,.map-island i,.map-island b { display:block; }.map-island strong { color:#185b58; font:700 14px "Fredoka",sans-serif; }.map-island small { margin-top:1px; overflow:hidden; color:#49806e; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.map-island i { margin-top:3px; color:#9a6a24; font-size:8px; font-style:normal; font-weight:900; }.map-island b { margin-top:3px; color:#207b55; font-size:8px; }.map-island.locked { filter:saturate(.45) drop-shadow(0 8px 6px rgba(3,63,82,.3)); }.map-island.locked .map-island-copy { background:rgba(229,237,219,.93); }.map-island.event .map-island-copy { border-color:#e9c8ff; background:rgba(248,229,255,.94); }.map-island.active { z-index:5; }.map-island.active .map-island-copy { outline:4px solid rgba(255,227,90,.72); box-shadow:0 6px 0 #c98c2f,0 0 20px rgba(255,235,95,.62); }.map-compass { width:66px; height:66px; position:absolute; z-index:4; left:18px; top:17px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.54); border-radius:50%; color:#fff0a1; background:rgba(4,93,123,.38); font-size:37px; }.map-compass b { position:absolute; top:2px; font-size:10px; }.map-legend { position:absolute; z-index:6; right:13px; bottom:11px; padding:7px 10px; display:flex; gap:10px; border-radius:13px; color:white; background:rgba(3,79,103,.68); backdrop-filter:blur(7px); font-size:8px; font-weight:800; }.map-legend span { display:flex; align-items:center; gap:4px; }.route-dot { width:8px; height:8px; border:2px solid white; border-radius:50%; background:#57c66a; }.route-dot.event { background:#a568cf; }.route-dot.locked { background:#849a9a; }.crew-preview { margin-top:12px; padding:9px 13px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; border-radius:15px; color:#46635d; background:rgba(255,255,255,.55); font-size:10px; }.crew-preview strong { padding:5px 9px; border-radius:13px; color:white; background:#287f79; } @keyframes mapRouteFlow { to { stroke-dashoffset:-210; } }

.toast-region { position: fixed; z-index: 60; top: 88px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 280px; padding: 12px 18px; border-radius: 14px; color: white; background: rgba(15,72,74,.95); box-shadow: var(--shadow); text-align: center; animation: toastIn .3s both; }
.toast.good { background: rgba(58,131,79,.96); }
.toast.warning { background: rgba(181,103,45,.96); }
.toast.out { animation: toastOut .28s both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.94); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 780px) {
  .topbar { height: auto; min-height: 62px; padding: 7px 10px; gap: 7px; }
  .brand small { display: none; }.brand strong { font-size: 15px; }.brand-mark { width: 35px; font-size: 20px; }
  .resource { min-width: 64px; height: 40px; padding: 5px 8px; gap: 3px; }
  .resource > span { font-size: 16px; }.resource strong { font-size: 14px; }.resource small { display: none; }
  .icon-button { width: 39px; height: 39px; border-radius: 13px; }
  main { padding: 17px 10px 28px; }
  .scene-head { padding: 0 5px; }.scene-head h1 { font-size: 27px; }.scene-head p { font-size: 13px; }.event-teaser { display: none; }
  .scene-head .soft-button { padding: 8px 10px; font-size: 12px; }
  .island-stage { --tile-w: min(18vw, 72px); min-height: 620px; aspect-ratio: auto; padding: 0; border-radius: 25px; }
  .island-grid { transform: none; }
  .adventure-rail { left: 8px; top: 14px; display: flex; gap: 5px; }.adventure-rail button { width: 48px; min-height: 46px; padding: 4px; border-width: 2px; border-radius: 13px; box-shadow: 0 3px 0 rgba(4,55,58,.7), 0 6px 12px rgba(3,47,51,.16); }.adventure-rail span { font-size: 19px; }.adventure-rail small { display: none; }
  .tool-dock { left: 8px; right: 8px; top: 66px; max-height: none; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 3px 3px 7px; }.tool-button { flex: 0 0 43px; width: 43px; min-height: 43px; padding: 2px; border-width: 2px; border-radius: 13px; box-shadow: 0 3px 0 #ad8d4f,0 6px 12px rgba(16,59,56,.2); }.tool-button span { font-size: 19px; }.tool-button small { display: none; }.tool-button.active { box-shadow: 0 3px 0 #176e43,0 0 0 3px rgba(178,255,132,.28); }
  .tool-hint { bottom: 112px; left: 8px; right: 8px; translate: 0; min-width: 0; padding: 8px 10px; grid-template-columns: 27px 1fr; }.tool-hint > span { font-size: 21px; }
  .island-objective { right: 9px; bottom: 11px; max-width: 210px; padding: 8px 10px; }.island-objective > span { font-size: 20px; }.island-objective strong { font-size: 10px; }
  .island-objective { display: none; }
  .camera-pad { bottom: 66px; }.camera-pad button { width: 28px; }
  .selection-card { position: fixed; left: 9px; right: 9px; bottom: max(91px, calc(env(safe-area-inset-bottom) + 82px)); margin: 0; padding: 11px; gap: 8px; z-index: 29; }.selection-copy small { max-width: 170px; font-size: 11px; }.selection-icon { display: none; }.primary-button { padding: 11px 14px; white-space: nowrap; }
  .home-layout, .journal-layout { grid-template-columns: 1fr; }
  .home-stage { width: 100%; min-width: 0; min-height: 470px; justify-content: start; overflow: auto; }
  .home-grid { --home-cell: 52px; margin: auto; }
  .shop-panel { width: 100%; min-width: 0; order: -1; }.shop-items { grid-template-columns: 1fr; }.shop-item { grid-template-columns: 32px 1fr auto; padding: 8px; }.shop-item b { grid-column: auto; }
  .collection-grid { gap: 8px; }.relic { min-height: 100px; padding: 6px; }.relic-icon { font-size: 34px; }
  .friends-bar { margin: -16px 6px 92px; padding: 9px; display: block; border-radius: 19px; }.friends-heading { margin-bottom: 7px; }.friends-heading small { display: none; }.friends-list { padding-bottom: 6px; }.friend-card { min-width: 140px; height: 56px; grid-template-columns: 45px 1fr auto; }.friend-avatar { width: 45px; height: 45px; }
  .bottom-nav { width: calc(100% - 18px); bottom: max(7px, env(safe-area-inset-bottom)); }
  .nav-button { flex: 1; min-width: 0; padding: 6px 8px; }
  .dialog-content { padding: 23px 23px 26px; }.dialog-art { height: 165px; }.welcome-mira { width: 44%; right: 3%; }
  .store-dialog { width: calc(100vw - 18px); padding: 22px 15px; }.store-head { padding-right: 30px; }.store-head p { display: none; }.store-head h2 { font-size: 22px; }.store-balance { min-width: 85px; height: 40px; font-size: 14px; }.store-grid { grid-template-columns: 1fr; max-height: 58vh; }.store-item { grid-template-columns: 58px minmax(0,1fr) auto; padding: 9px; }.store-item-art { width: 54px; height: 54px; font-size: 31px; }.friend-scene { height: 180px; }
  .world-map-dialog { width: calc(100vw - 12px); padding: 18px 10px; }.world-map-head { padding-right:32px; }.world-map-head h2 { font-size:23px; }.world-map-head p { font-size:10px; }.archipelago-frame { min-height:430px; height:58vh; overflow:auto hidden; border-radius:21px; }.island-map-grid,.archipelago-routes { min-width:820px; }.archipelago-routes { left:0; width:820px; }.map-island { width:175px; height:140px; }.map-island-art { height:95px; }.map-island-copy { min-width:140px; max-width:170px; padding:5px 7px 6px; }.map-island strong { font-size:12px; }.map-island small { display:none; }.map-island i,.map-island b { font-size:7px; }.map-compass { position:sticky; left:8px; top:8px; }.map-legend { position:sticky; width:max-content; left:8px; bottom:8px; }.crew-preview { display:none; }
}

@media (max-width: 430px) {
  .brand strong { font-size: 0; }.brand strong::after { content: "CQ"; font-size: 15px; }
  .resources { gap: 4px; }.resource { min-width: 55px; }.resource.energy { min-width: 62px; }
  .island-stage { --tile-w: 18.4vw; min-height: 600px; }
  .selection-copy strong { font-size: 13px; }
}

/* Version 0.8.6: privater WLAN-Koop */
.coop-players-layer { position: absolute; inset: 0; z-index: 145; pointer-events: none; }
.coop-player { width: var(--tile-w); height: var(--tile-h); position: absolute; display: grid; place-items: center; transition: left .7s linear,top .7s linear; }
.coop-player-shadow { position: absolute; bottom: 3%; width: 58%; height: 16%; border-radius: 50%; background: rgba(23,54,37,.28); filter: blur(3px); }
.coop-player-body { width: calc(var(--tile-w) * .58); height: calc(var(--tile-w) * .86); position: absolute; z-index: 2; bottom: 18%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 3px rgba(35,57,26,.3)); animation: coopFriendBob 1.7s ease-in-out infinite alternate; }
.coop-player.outfit-teal .coop-player-body { filter: hue-rotate(78deg) saturate(.9) drop-shadow(0 5px 3px rgba(35,57,26,.3)); }
.coop-player.outfit-violet .coop-player-body { filter: hue-rotate(230deg) saturate(.88) drop-shadow(0 5px 3px rgba(35,57,26,.3)); }
.coop-player.outfit-sand .coop-player-body { filter: sepia(.45) saturate(.72) drop-shadow(0 5px 3px rgba(35,57,26,.3)); }
.coop-player-name { position: absolute; z-index: 4; left: 50%; bottom: 94%; translate: -50% 0; max-width: 110px; padding: 3px 7px; overflow: hidden; border: 2px solid rgba(255,255,255,.76); border-radius: 9px; color: white; background: rgba(24,102,89,.92); box-shadow: 0 4px 9px rgba(11,55,48,.2); font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
@keyframes coopFriendBob { to { transform: translateY(-3px); } }

.coop-room-pill { position: absolute; z-index: 24; right: 88px; top: 18px; min-width: 122px; padding: 7px 10px; display: grid; grid-template-columns: 28px 1fr auto; column-gap: 7px; align-items: center; border: 2px solid rgba(255,255,255,.82); border-radius: 15px; color: white; background: linear-gradient(145deg,rgba(80,159,107,.96),rgba(25,111,94,.97)); box-shadow: 0 5px 0 rgba(13,76,66,.72),0 10px 20px rgba(3,47,51,.2); cursor: pointer; text-align: left; }
.coop-room-pill > span { grid-row: 1 / span 2; font-size: 23px; }.coop-room-pill strong,.coop-room-pill small { display: block; }.coop-room-pill strong { font-size: 11px; letter-spacing: .12em; }.coop-room-pill small { color: #ddffd7; font-size: 8px; }
.coop-room-pill.connection-lost { background: linear-gradient(145deg,#a67d54,#77503b); }

.coop-dialog { width: min(94vw,760px); max-height: min(92dvh,760px); padding: 28px; overflow-y: auto; background: linear-gradient(155deg,#fffbe8,#e2f0d3); }
.coop-head { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 14px; padding-right: 36px; }.coop-emblem { width: 66px; height: 66px; display: grid; place-items: center; border: 4px solid white; border-radius: 22px; color: white; background: linear-gradient(145deg,#5fc27a,#227d70); box-shadow: 0 7px 0 #236653,0 12px 24px rgba(25,92,73,.2); font-size: 34px; }.coop-head h2 { margin: 3px 0; font: 700 28px/1.05 "Fredoka",sans-serif; }.coop-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; }
.coop-choice { margin-top: 21px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.coop-choice article { min-width: 0; padding: 18px; border: 2px solid #d8d8bb; border-radius: 20px; background: rgba(255,255,255,.68); }.coop-choice article > span { font-size: 38px; }.coop-choice h3 { margin: 7px 0 4px; font: 700 20px/1.1 "Fredoka",sans-serif; }.coop-choice p { min-height: 36px; margin: 0 0 13px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }.coop-choice input { width: 100%; height: 45px; margin-bottom: 9px; border: 3px solid #b8c9ae; border-radius: 12px; color: var(--teal-deep); background: white; font: 900 21px/1 "DM Sans",sans-serif; letter-spacing: .22em; text-align: center; text-transform: uppercase; }.coop-choice button:disabled { opacity: .45; cursor: not-allowed; }
.coop-note { margin: 13px 0 0; padding: 10px 12px; border-radius: 13px; color: #58706b; background: rgba(255,255,255,.56); font-size: 10px; line-height: 1.45; }
.coop-active { margin-top: 20px; }.coop-code-card { padding: 17px; border: 3px solid rgba(255,255,255,.78); border-radius: 21px; color: white; background: linear-gradient(145deg,#258e7e,#16675f); box-shadow: 0 7px 0 #14524c,0 12px 25px rgba(19,77,67,.2); text-align: center; }.coop-code-card span,.coop-code-card strong,.coop-code-card small { display: block; }.coop-code-card span { color: #d8ffc5; font-size: 9px; font-weight: 900; letter-spacing: .18em; }.coop-code-card strong { margin: 3px 0; font: 700 34px/1 "Fredoka",sans-serif; letter-spacing: .2em; }.coop-code-card small { color: #e1f4df; font-size: 9px; }
.coop-link-label { margin-top: 17px; display: grid; gap: 5px; color: #52706a; font-size: 10px; font-weight: 900; }.coop-link-label > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }.coop-link-label input { min-width: 0; padding: 10px 12px; border: 2px solid #c8d4bd; border-radius: 11px; color: #3c6159; background: white; font-size: 10px; }.coop-link-label button { padding: 8px 13px; border: 0; border-radius: 11px; color: white; background: #397e69; cursor: pointer; font-weight: 900; }.coop-share-button { margin-top: 9px; }
.coop-online-head { margin: 17px 0 8px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }.coop-online-head strong { font: 700 17px "Fredoka",sans-serif; }.coop-online-head span { padding: 4px 8px; border-radius: 10px; color: #277054; background: #d9edce; font-size: 9px; font-weight: 900; }.coop-online-head span.connection-lost { color: #8b542d; background: #f2d6af; }
.coop-player-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 15px; }.coop-player-card { min-width: 0; padding: 8px 10px; display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 8px; border: 2px solid #d4d7ba; border-radius: 14px; background: rgba(255,255,255,.72); }.coop-player-card img { width: 39px; height: 45px; object-fit: contain; object-position: center top; }.coop-player-card strong,.coop-player-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.coop-player-card strong { font-size: 11px; }.coop-player-card small { color: var(--ink-soft); font-size: 8px; }.coop-player-card b { color: #2d9463; font-size: 9px; }

/* Version 0.9.6: Social-HUD, Weltchat und Figurenidentitaet */
.player-identity,.coop-player-identity { width:max-content; max-width:190px; position:absolute; z-index:8; left:50%; bottom:96%; display:grid; justify-items:center; transform:translateX(-50%); pointer-events:none; text-align:center; filter:drop-shadow(0 3px 4px rgba(2,31,34,.42)); }
.player-identity strong,.coop-player-identity strong { max-width:190px; padding:3px 8px; overflow:hidden; border:1px solid rgba(255,247,194,.9); border-radius:8px; color:#fffcef; background:rgba(10,76,78,.93); font:900 10px/1.15 "DM Sans",sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.player-identity small,.coop-player-identity small { max-width:175px; margin-top:2px; overflow:hidden; color:#d9ffd2; font:800 8px/1.1 "DM Sans",sans-serif; text-shadow:0 1px 2px #063d45; text-overflow:ellipsis; white-space:nowrap; }
.player-identity small:empty,.coop-player-identity small:empty { display:none; }
.valoria-world .player-identity { bottom:94%; }.valoria-world .player-identity strong { font-size:8px; }.valoria-world .player-identity small { font-size:6px; }

.online-toggle,.chat-toggle { position:absolute; z-index:48; bottom:91px; min-height:43px; border:2px solid rgba(255,255,255,.86); border-radius:15px; color:white; background:linear-gradient(145deg,rgba(20,110,104,.97),rgba(8,72,79,.98)); box-shadow:0 5px 0 rgba(3,55,60,.72),0 9px 20px rgba(2,42,49,.24); cursor:pointer; }
.online-toggle { left:16px; min-width:105px; padding:7px 10px; display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:7px; }
.online-toggle > span,.presence-dot { width:9px; height:9px; display:inline-block; border:2px solid #e9ffe2; border-radius:50%; background:#69e27f; box-shadow:0 0 0 4px rgba(105,226,127,.16); }
.online-toggle strong,.chat-toggle strong { font-size:10px; }.online-toggle b { min-width:22px; padding:3px 6px; border-radius:8px; color:#165c4d; background:#dbffd8; font-size:9px; }
.chat-toggle { left:132px; min-width:104px; padding:7px 11px; display:flex; align-items:center; justify-content:center; gap:7px; }.chat-toggle > span { font-size:20px; }.chat-toggle b { min-width:19px; padding:2px 5px; border-radius:9px; color:#713843; background:#ffd16d; font-size:8px; font-style:normal; }

.online-panel,.chat-panel { position:absolute; z-index:70; bottom:141px; overflow:hidden; border:3px solid rgba(255,247,195,.94); border-radius:22px; color:#ecfff5; background:linear-gradient(160deg,rgba(13,79,82,.98),rgba(7,46,59,.99)); box-shadow:0 22px 54px rgba(1,32,42,.46); backdrop-filter:blur(14px); }
.online-panel { left:16px; width:min(260px,calc(100vw - 32px)); padding:13px; }
.online-panel > header,.chat-panel > header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.online-panel > header > div,.chat-panel > header > div { display:flex; align-items:center; gap:8px; }.online-panel header strong,.chat-panel header strong { font:700 15px "Fredoka",sans-serif; }.online-panel header button,.chat-panel header button { width:28px; height:28px; padding:0; border:0; border-radius:50%; color:white; background:rgba(255,255,255,.12); cursor:pointer; font-size:18px; }
.online-list { max-height:260px; margin:11px 0; display:grid; gap:6px; overflow-y:auto; }.online-list > p,.social-list > p { margin:6px; color:#9fc7bf; font-size:9px; text-align:center; }
.online-person { padding:7px 8px; display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:8px; border-radius:11px; background:rgba(255,255,255,.08); }.online-person > i { width:8px; height:8px; border-radius:50%; background:#67df7d; }.online-person strong,.online-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.online-person strong { font-size:10px; }.online-person small { margin-top:2px; color:#b9d8d0; font-size:7px; }.online-person b { color:#ffe38a; font-size:7px; }
.online-panel .soft-button { padding:8px 10px; color:#245b56; background:#eff8dc; box-shadow:none; font-size:9px; }

.chat-panel { left:16px; width:min(370px,calc(100vw - 32px)); height:min(470px,calc(100dvh - 225px)); padding:13px; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto; gap:9px; }
.chat-tabs { padding:3px; display:grid; grid-template-columns:1fr 1fr; border-radius:11px; background:rgba(255,255,255,.1); }.chat-tabs button { padding:7px; border:0; border-radius:9px; color:#b6d8d1; background:transparent; cursor:pointer; font-size:9px; font-weight:900; }.chat-tabs button.active { color:#214e49; background:#edfacd; }
.chat-tabs button:disabled { opacity:.38; cursor:not-allowed; }.chat-messages { min-height:0; padding:2px; display:flex; flex-direction:column; gap:7px; overflow-y:auto; }.chat-messages > p { margin:auto; color:#a8c8c2; font-size:9px; text-align:center; }
.chat-message { max-width:88%; padding:7px 9px; align-self:flex-start; border-radius:12px 12px 12px 4px; color:#31554f; background:#f5f3d9; }.chat-message.mine { align-self:flex-end; border-radius:12px 12px 4px 12px; background:#d8f3cf; }.chat-message header { display:flex; align-items:baseline; gap:5px; }.chat-message strong { max-width:170px; overflow:hidden; color:#176d66; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.chat-message time { color:#84928a; font-size:6px; }.chat-message p { margin:3px 0 0; overflow-wrap:anywhere; font-size:10px; line-height:1.35; }.chat-message small { display:block; margin-top:2px; color:#6d8b82; font-size:6px; }
.chat-form { display:grid; grid-template-columns:minmax(0,1fr) 39px; gap:6px; }.chat-form input { min-width:0; height:39px; padding:8px 10px; border:2px solid rgba(204,232,201,.75); border-radius:11px; color:#244e4a; background:#fffdf0; font-size:11px; }.chat-form button { border:0; border-radius:11px; color:white; background:#df7754; cursor:pointer; font-size:17px; }.chat-panel > small { color:#9fc6be; font-size:7px; text-align:center; }

.social-dialog { width:min(94vw,720px); max-height:min(92dvh,790px); padding:28px; overflow-y:auto; background:linear-gradient(155deg,#fff9df,#dfeeda); }.social-head { padding-right:34px; display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:13px; }.social-head > span { width:60px; height:60px; display:grid; place-items:center; border:4px solid white; border-radius:20px; color:white; background:linear-gradient(145deg,#4dbf85,#1c746a); box-shadow:0 6px 0 #176157; font-size:31px; }.social-head h2 { margin:3px 0; font:700 25px/1.08 "Fredoka",sans-serif; }.social-head p { margin:0; color:var(--ink-soft); font-size:10px; line-height:1.4; }
.friend-code-card { margin-top:19px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:3px solid rgba(255,255,255,.78); border-radius:18px; color:white; background:linear-gradient(145deg,#23867c,#155e60); }.friend-code-card small,.friend-code-card strong { display:block; }.friend-code-card small { color:#d6f5ca; font-size:8px; font-weight:900; letter-spacing:.1em; }.friend-code-card strong { margin-top:2px; font:700 24px "Fredoka",sans-serif; letter-spacing:.13em; }.friend-code-card button { padding:9px 11px; border:0; border-radius:11px; color:#225b54; background:#fff3b5; cursor:pointer; font-size:9px; font-weight:900; }
.friend-invite-form { margin:14px 0 4px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; }.friend-invite-form label { display:grid; gap:4px; color:#526f68; font-size:9px; font-weight:900; }.friend-invite-form input { height:42px; padding:8px 11px; border:2px solid #bfd0b5; border-radius:11px; color:#245b56; background:white; font:900 15px "DM Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase; }.friend-invite-form button { height:42px; padding:0 14px; }
.social-message { min-height:17px; margin:6px 0; color:#426d63; font-size:9px; text-align:center; }.social-message.warning { color:#9a542d; }.social-message.good { color:#267348; }.social-section-title { margin:13px 0 7px; display:flex; align-items:center; justify-content:space-between; }.social-section-title strong { font:700 16px "Fredoka",sans-serif; }.social-section-title span { min-width:24px; padding:3px 7px; border-radius:9px; color:#26704f; background:#d7edce; font-size:8px; text-align:center; }
.social-list { display:grid; gap:7px; }.social-person { padding:9px 10px; display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:9px; border:2px solid #d6d7b9; border-radius:13px; background:rgba(255,255,255,.68); }.social-person > i { width:8px; height:8px; border-radius:50%; background:#9aaea7; }.social-person.online > i { background:#55c976; box-shadow:0 0 0 3px rgba(85,201,118,.15); }.social-person strong,.social-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.social-person strong { font-size:10px; }.social-person small { margin-top:2px; color:#6f817b; font-size:8px; }.social-person-actions { display:flex; gap:5px; }.social-person-actions button { padding:6px 8px; border:0; border-radius:9px; cursor:pointer; font-size:8px; font-weight:900; }.social-accept { color:white; background:#318867; }.social-decline { color:#6f6150; background:#eee4cb; }

@media (max-width: 780px) {
  .coop-room-pill { right: 67px; top: 9px; min-width: 49px; width: 49px; height: 46px; padding: 3px; display: grid; place-items: center; border-radius: 13px; }.coop-room-pill > span { grid-row: auto; font-size: 24px; }.coop-room-pill strong,.coop-room-pill small { display: none; }
  .coop-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 22px 14px; }.coop-head { grid-template-columns: 51px 1fr; gap: 10px; }.coop-emblem { width: 48px; height: 48px; border-radius: 16px; font-size: 25px; }.coop-head h2 { font-size: 21px; }.coop-choice { grid-template-columns: 1fr; }.coop-choice article { padding: 13px; }.coop-choice article > span { float: left; margin-right: 10px; font-size: 29px; }.coop-choice h3 { font-size: 17px; }.coop-choice p { min-height: 0; }.coop-player-list { grid-template-columns: 1fr; }.coop-code-card strong { font-size: 28px; }
  .online-toggle,.chat-toggle { bottom:max(139px,calc(env(safe-area-inset-bottom) + 132px)); min-width:48px; width:48px; height:44px; padding:3px; display:grid; place-items:center; }.online-toggle { left:8px; grid-template-columns:1fr; }.online-toggle > span { width:11px; height:11px; }.online-toggle strong,.online-toggle b,.chat-toggle strong { display:none; }.chat-toggle { left:61px; }.chat-toggle > span { font-size:22px; }.chat-toggle b { position:absolute; right:-2px; top:-3px; }
  .online-panel,.chat-panel { left:6px; right:6px; bottom:max(190px,calc(env(safe-area-inset-bottom) + 183px)); width:auto; }.online-panel { max-height:52dvh; }.chat-panel { height:min(54dvh,480px); }
  .social-dialog { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); padding:21px 14px; }.social-head { grid-template-columns:48px 1fr; gap:9px; }.social-head > span { width:46px; height:46px; border-radius:15px; font-size:24px; }.social-head h2 { font-size:20px; }.friend-code-card { padding:11px; }.friend-code-card strong { font-size:19px; }.friend-code-card button { max-width:120px; }.friend-invite-form { grid-template-columns:1fr; }.friend-invite-form button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Version 0.7+: spielfuellende App-Huelle statt scrollender Webseite */
html, body { width: 100%; height: 100%; overflow: hidden; }
body { overscroll-behavior: none; }
#app { width: 100%; height: 100dvh; min-height: 0; padding: 0; display: grid; grid-template-rows: 68px minmax(0, 1fr); overflow: hidden; }
.topbar { height: 68px; min-height: 0; position: relative; padding-inline: clamp(10px, 2vw, 28px); }
main { width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.view { width: 100%; height: 100%; min-height: 0; overflow: auto; }
#exploreView { position: relative; overflow: hidden; }
#exploreView.active { display: block; }
#exploreView .scene-head { position: absolute; z-index: 16; left: 86px; top: 14px; margin: 0; pointer-events: none; }
#exploreView .scene-head h1 { font-size: clamp(23px, 2.6vw, 36px); }
#exploreView .scene-head p { margin-top: 2px; font-size: 11px; }
#exploreView .scene-actions { display: none; }
.island-stage { --tile-w: clamp(118px, 8.7vw, 142px); width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 0; }
.island-world { width: calc(var(--tile-w) * 19); height: calc(var(--tile-w) * 11); }
.island-grid { top: calc(var(--tile-w) * .72); }
.friends-bar { position: absolute; z-index: 22; left: 88px; right: 88px; bottom: max(12px, env(safe-area-inset-bottom)); margin: 0; padding: 8px 11px; grid-template-columns: 155px minmax(0,1fr); border-radius: 20px; }
.friends-heading > span { font-size: 21px; }.friends-heading strong { font-size: 12px; }.friends-heading small { display: none; }
.friend-card { min-width: 132px; height: 49px; grid-template-columns: 39px 1fr auto; border-radius: 14px; }
.friend-avatar { width: 39px; height: 39px; border-radius: 11px; }
.bottom-nav { bottom: max(84px, calc(env(safe-area-inset-bottom) + 78px)); padding: 5px; border-radius: 18px; }
.nav-button { min-width: 94px; padding: 5px 12px; }.nav-button > span { font-size: 18px; }.nav-button > strong { font-size: 9px; }
.tool-hint { bottom: 17px; }
.camera-pad { bottom: 73px; }
.island-objective { bottom: 84px; }
.player { width: calc(var(--tile-w) * .72); height: calc(var(--tile-h) * .72); transform: translate(calc(var(--tile-w) * .14), calc(var(--tile-h) * .13)); transition-timing-function: linear; transition-duration: var(--move-ms, .8s); }
.player-body { width: calc(var(--tile-w) * .58); height: calc(var(--tile-w) * .86); bottom: 18%; transition: filter .2s; }
.player-shadow { width: 58%; height: 16%; bottom: 2%; }
.player.walking .player-body { animation: playerWalk .48s ease-in-out infinite; }
.player.walking .player-shadow { animation: shadowWalk .48s ease-in-out infinite; }
.player.outfit-teal .player-body { filter: hue-rotate(78deg) saturate(.9) drop-shadow(0 5px 3px rgba(35,57,26,.3)); }
.player.outfit-violet .player-body { filter: hue-rotate(230deg) saturate(.88) drop-shadow(0 5px 3px rgba(35,57,26,.3)); }
.player.outfit-sand .player-body { filter: sepia(.45) saturate(.72) drop-shadow(0 5px 3px rgba(35,57,26,.3)); }
@keyframes playerWalk { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes shadowWalk { 50% { transform: scaleX(.82); opacity: .7; } }

.pearl-resource { border: 0; cursor: pointer; font: inherit; }
.pearl-resource:hover { transform: none; filter: brightness(1.05); }
.pearl-resource > span { font-size: 19px; }
.store-balances { display: flex; align-items: center; gap: 8px; }
.store-balance.pearl { border-color: #bca3df; color: #4d347a; background: #eee3ff; }
.store-notice { margin: -7px 0 13px; padding: 8px 12px; border-radius: 12px; color: #496963; background: #edf2df; font-size: 11px; }
.store-item.premium-card { background: linear-gradient(145deg,#f7efff,#e7d8ff); border-color: #cdb4ec; }
.store-item.sponsored-card { border-color: #efb56c; background: linear-gradient(145deg,#fff9db,#f4e6b9); }
.price-premium { color: white; background: linear-gradient(#9b72ca,#7450aa); box-shadow: 0 4px 0 #54367f; }
.demo-ribbon { display: inline-block; margin-top: 4px; padding: 3px 6px; border-radius: 8px; color: white !important; background: #7752aa; font-size: 8px !important; letter-spacing: .05em; }

.sponsor-placement { position: absolute; z-index: 19; left: 15px; bottom: 86px; min-width: 126px; padding: 8px 10px; display: grid; grid-template-columns: 32px 1fr; column-gap: 7px; align-items: center; border: 2px solid rgba(255,255,255,.82); border-radius: 16px; color: #275b55; background: linear-gradient(145deg,rgba(255,249,209,.95),rgba(233,243,203,.94)); box-shadow: 0 6px 0 rgba(100,118,56,.45),0 10px 24px rgba(8,62,58,.2); cursor: pointer; text-align: left; }
.sponsor-placement > span { grid-row: 1 / span 2; font-size: 29px; }.sponsor-placement strong,.sponsor-placement small { display: block; }.sponsor-placement strong { font-size: 10px; }.sponsor-placement small { color: #6d7b63; font-size: 7px; }
.sponsor-placement.claimed { opacity: .62; filter: grayscale(.5); }
.sponsor-dialog { padding: 34px; overflow: visible; text-align: center; }.sponsor-dialog h2 { margin: 5px 0; font: 700 28px/1.1 "Fredoka",sans-serif; }.sponsor-dialog p { color: var(--ink-soft); line-height: 1.5; }.sponsor-art { width: 108px; height: 108px; margin: -78px auto 22px; display: grid; place-items: center; border: 7px solid var(--paper); border-radius: 50%; background: linear-gradient(#fff3a5,#bfe78f); box-shadow: 0 12px 34px rgba(32,94,64,.24); font-size: 62px; }.demo-label { display: block; margin-top: 13px; color: #7d8a7c; font-size: 9px; }

/* CousinQuest Publishing – animierter Auftakt vor dem Titelbild */
.publisher-intro { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; overflow:hidden; color:#fffdf0; background:radial-gradient(circle at 50% 75%,rgba(255,208,96,.24),transparent 27%),linear-gradient(180deg,#071e39 0%,#0b4966 56%,#147f8e 78%,#0c596b 100%); opacity:1; visibility:visible; transition:opacity .58s ease,visibility 0s linear .58s; }
.publisher-intro.leaving { opacity:0; visibility:hidden; pointer-events:none; }
.publisher-intro.hidden { display:none; }
.publisher-intro::before { content:""; position:absolute; left:-10%; right:-10%; bottom:-18%; height:43%; opacity:.68; background:repeating-radial-gradient(ellipse at 50% 110%,transparent 0 34px,rgba(126,232,225,.18) 35px 38px,transparent 39px 61px); animation:publisherTide 4s ease-in-out infinite; }
.publisher-intro-sky { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.publisher-intro-sky::before { content:""; position:absolute; left:50%; bottom:16%; width:min(76vw,920px); height:min(42vw,510px); transform:translateX(-50%); border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 50% 100%,rgba(255,223,125,.28),transparent 63%); filter:blur(8px); }
.publisher-horizon { position:absolute; left:50%; bottom:19%; width:min(72vw,840px); height:2px; transform:translateX(-50%) scaleX(0); background:linear-gradient(90deg,transparent,#ffe8a3,transparent); box-shadow:0 0 24px 8px rgba(255,218,117,.23); animation:publisherHorizon 1.25s ease .55s forwards; }
.publisher-star { position:absolute; opacity:0; color:#fff2b6; text-shadow:0 0 14px rgba(255,239,172,.9); animation:publisherStar 1.4s ease-in-out infinite alternate; }
.star-one { left:18%; top:24%; font-size:18px; animation-delay:.4s; }.star-two { right:21%; top:18%; font-size:25px; animation-delay:.75s; }.star-three { right:14%; top:44%; font-size:13px; animation-delay:1.05s; }
.publisher-ident { position:relative; z-index:2; display:grid; justify-items:center; text-align:center; transform:translateY(105vh) scale(.84); opacity:.2; animation:publisherRise 1.25s cubic-bezier(.16,.86,.25,1) .18s forwards; }
.publisher-sun { width:clamp(74px,9vw,116px); height:clamp(74px,9vw,116px); margin-bottom:20px; display:grid; place-items:center; border:2px solid rgba(255,247,202,.8); border-radius:50%; color:#7c3f13; background:radial-gradient(circle,#ffe998 0 34%,#ffc94f 35% 100%); box-shadow:0 0 0 11px rgba(255,231,139,.1),0 0 56px 18px rgba(255,205,82,.28); font-size:clamp(42px,5vw,68px); animation:publisherSun 1.8s ease-in-out 1.2s infinite alternate; }
.publisher-ident strong,.publisher-ident em,.publisher-ident small { display:block; }
.publisher-ident strong { font:700 clamp(36px,7vw,84px)/.88 "Fredoka",sans-serif; letter-spacing:.075em; text-shadow:0 7px 26px rgba(0,22,35,.48); }
.publisher-ident em { margin-top:8px; color:#ffe589; font:normal 700 clamp(22px,4.2vw,48px)/1 "Fredoka",sans-serif; letter-spacing:.36em; text-indent:.36em; text-shadow:0 5px 18px rgba(1,28,38,.5); }
.publisher-ident small { margin-top:24px; opacity:0; color:rgba(255,255,244,.9); font-size:clamp(9px,1.1vw,13px); font-weight:900; letter-spacing:.42em; text-indent:.42em; animation:publisherCaption .45s ease 1.42s forwards; }
.publisher-intro-skip { position:absolute; z-index:3; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); padding:9px 14px; border:1px solid rgba(255,255,255,.38); border-radius:999px; color:rgba(255,255,255,.86); background:rgba(5,35,48,.32); cursor:pointer; font:800 10px/1 "Nunito",sans-serif; letter-spacing:.04em; backdrop-filter:blur(7px); }
.publisher-intro-skip:hover,.publisher-intro-skip:focus-visible { color:#fff; border-color:rgba(255,235,154,.9); background:rgba(6,52,64,.58); outline:none; }
@keyframes publisherRise { 0% { transform:translateY(105vh) scale(.84); opacity:.15; } 70% { transform:translateY(-2.5vh) scale(1.015); opacity:1; } 100% { transform:translateY(0) scale(1); opacity:1; } }
@keyframes publisherCaption { to { opacity:1; } }
@keyframes publisherHorizon { to { transform:translateX(-50%) scaleX(1); } }
@keyframes publisherStar { from { opacity:.14; transform:scale(.72) rotate(-8deg); } to { opacity:.8; transform:scale(1.14) rotate(8deg); } }
@keyframes publisherSun { to { box-shadow:0 0 0 15px rgba(255,231,139,.08),0 0 70px 24px rgba(255,205,82,.34); transform:scale(1.025); } }
@keyframes publisherTide { 50% { transform:translateY(-7px) scaleX(1.025); } }

/* Startbildschirm */
.start-screen { position: fixed; z-index: 100; inset: 0; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 460px); align-items: center; gap: 5vw; padding: clamp(24px,6vw,90px); overflow: hidden; background: #1a9fae url("assets/art/emerald-bay-v2.png") center / cover no-repeat; }
.start-screen.hidden { display: none; }
.start-screen-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(3,49,54,.22),rgba(3,44,47,.05) 46%,rgba(2,38,43,.55)); }
.start-logo,.start-card { position: relative; z-index: 1; }
.start-logo { color: white; text-shadow: 0 5px 18px rgba(4,49,47,.4); }.start-logo > span { width: 88px; height: 88px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 50%; color: #9a4c10; background: #ffd060; box-shadow: 0 0 0 12px rgba(255,235,144,.22); font-size: 51px; }.start-logo strong,.start-logo em,.start-logo small { display: block; }.start-logo strong { font: 700 clamp(42px,6vw,78px)/.9 "Fredoka",sans-serif; letter-spacing: .04em; }.start-logo em { color: #ffe481; font: normal 700 clamp(30px,4.5vw,60px)/1 "Fredoka",sans-serif; letter-spacing: .18em; }.start-logo small { margin-top: 14px; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.start-card { padding: 30px; border: 2px solid rgba(255,255,255,.7); border-radius: 28px; background: rgba(255,253,239,.94); box-shadow: 0 24px 80px rgba(0,43,45,.38); backdrop-filter: blur(14px); }.start-card p { margin: 0 0 19px; color: var(--ink); font: 700 21px/1.25 "Fredoka",sans-serif; }.start-card button { margin-top: 10px; }.start-card > small { display: block; margin-top: 17px; color: var(--ink-soft); text-align: center; font-size: 9px; }.text-button { border: 0; color: var(--teal); background: transparent; cursor: pointer; font-weight: 800; }
.account-summary { width:100%; margin:0 0 5px!important; padding:10px 12px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; border:2px solid #c8ddcf; border-radius:16px; color:var(--ink); background:linear-gradient(145deg,#f4f8e8,#e2f2d9); cursor:pointer; text-align:left; }.account-summary > span:first-child { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; color:white; background:linear-gradient(145deg,#35a595,#176c68); font-size:20px; }.account-summary strong,.account-summary small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-summary strong { font-size:12px; }.account-summary small { margin-top:2px; color:var(--ink-soft); font-size:8px; }.account-summary b { color:#5b8b7b; font-size:24px; }.account-summary.signed-in { border-color:#8fd3a0; background:linear-gradient(145deg,#edffe7,#d7f4d4); }.account-button.signed-in { color:#214f45; background:#a9e8b6; }

.account-dialog { width:min(94vw,620px); max-height:min(94dvh,790px); padding:29px; overflow-y:auto; background:linear-gradient(155deg,#fffbea,#e4f2dc); }.account-head { padding-right:34px; display:grid; grid-template-columns:68px minmax(0,1fr); align-items:center; gap:14px; }.account-emblem { width:64px; height:64px; display:grid; place-items:center; border:4px solid white; border-radius:21px; color:#9a4c10; background:#ffd060; box-shadow:0 7px 0 #d99536,0 12px 24px rgba(81,78,35,.18); font-size:35px; }.account-head h2 { margin:3px 0 4px; font:700 27px/1.04 "Fredoka",sans-serif; }.account-head p { margin:0; color:var(--ink-soft); font-size:10px; line-height:1.45; }.auth-tabs { margin:23px 0 15px; padding:4px; display:grid; grid-template-columns:1fr 1fr; border-radius:14px; background:#d8e7d2; }.auth-tabs button { padding:9px; border:0; border-radius:11px; color:#54746a; background:transparent; cursor:pointer; font-weight:900; }.auth-tabs button.active { color:white; background:#277f75; box-shadow:0 3px 0 #176057; }.auth-form { display:grid; gap:11px; }.auth-form label { display:grid; gap:5px; color:#49685f; font-size:10px; font-weight:900; }.auth-form input { width:100%; height:44px; padding:9px 12px; border:2px solid #bfd0b8; border-radius:12px; color:var(--ink); background:white; font:600 14px "DM Sans",sans-serif; }.auth-form input:focus { outline:3px solid rgba(255,201,92,.45); border-color:#d8a53e; }.auth-form .text-button { justify-self:center; padding:6px; }.auth-form > small { color:var(--ink-soft); font-size:9px; line-height:1.45; text-align:center; }.auth-form h3 { margin:2px 0; font:700 23px "Fredoka",sans-serif; }.account-profile { margin-top:22px; }.account-identity { padding:14px; display:grid; grid-template-columns:45px minmax(0,1fr) auto; align-items:center; gap:10px; border:2px solid #bcd8b9; border-radius:17px; background:rgba(255,255,255,.68); }.account-identity > span { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; color:white; background:#247b72; font-size:24px; }.account-identity strong,.account-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-identity small { margin-top:2px; color:var(--ink-soft); font-size:9px; }.account-identity b { padding:5px 8px; border-radius:10px; color:#24744f; background:#d6f0d0; font-size:8px; }.account-benefits { margin:14px 0; display:grid; gap:7px; }.account-benefits span { padding:9px 11px; border-radius:11px; color:#43685e; background:rgba(255,255,255,.53); font-size:10px; }.account-profile > p { min-height:18px; color:#52716b; font-size:10px; text-align:center; }.account-profile button { margin-top:9px; }.account-message { min-height:18px; margin:13px 0 0; padding:0 5px; color:#526f68; font-size:10px; line-height:1.45; text-align:center; }.account-message.good { color:#267348; }.account-message.warning { color:#9a542d; }

/* Rucksack */
.backpack-dialog { width: min(96vw,1080px); max-height: min(94dvh,820px); padding: 0; overflow: hidden; border-radius: 34px 34px 28px 28px; background: #f4e2b0; }
.backpack-dialog::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg,rgba(116,76,30,.055) 0 2px,transparent 2px 8px); }
.backpack-shell { padding: 26px; border: 11px solid #97643c; border-top-width: 18px; border-radius: inherit; box-shadow: inset 0 0 0 4px #d49a58; }
.backpack-head { display: flex; align-items: center; gap: 15px; padding-right: 45px; }.backpack-head h2 { margin: 2px 0; font: 700 28px/1.05 "Fredoka",sans-serif; }.backpack-head p { margin: 0; color: #6d6556; font-size: 12px; }.backpack-badge { width: 67px; height: 67px; display: grid; place-items: center; border: 4px solid #74472d; border-radius: 22px 22px 14px 14px; color: white; background: linear-gradient(#c47b43,#8d5534); box-shadow: inset 0 -7px rgba(82,42,25,.18); font-size: 36px; }
.inventory-layout { height: min(58dvh,510px); margin-top: 18px; display: grid; grid-template-columns: 145px minmax(0,1fr) 245px; gap: 12px; min-height: 0; }
.inventory-tabs { display: grid; align-content: start; gap: 6px; }.inventory-tabs button { padding: 10px 12px; border: 2px solid #c9975f; border-radius: 12px; color: #664329; background: rgba(255,248,218,.74); cursor: pointer; text-align: left; font-size: 11px; font-weight: 800; }.inventory-tabs button.active { color: white; border-color: #4a735a; background: #4f8b67; }
.inventory-grid { min-height: 0; padding: 9px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; gap: 9px; overflow-y: auto; border: 3px solid #c89458; border-radius: 18px; background: rgba(255,251,226,.68); }
.inventory-item { min-height: 108px; padding: 9px; position: relative; border: 2px solid transparent; border-radius: 15px; color: var(--ink); background: #fff9df; cursor: pointer; text-align: left; }.inventory-item:hover,.inventory-item.selected { border-color: #4f8b67; transform: none; }.inventory-item.empty { opacity: .48; }.inventory-item > span { display: block; font-size: 35px; }.inventory-item strong,.inventory-item small { display: block; }.inventory-item strong { margin-top: 4px; font-size: 11px; }.inventory-item small { margin-top: 3px; color: var(--ink-soft); font-size: 8px; }.item-count { position: absolute; right: 7px; top: 7px; min-width: 22px; padding: 3px 6px; border-radius: 10px; color: white; background: #8a5a37; font-size: 9px; font-weight: 900; text-align: center; }
.inventory-detail { min-height: 0; padding: 16px; overflow-y: auto; border: 3px solid #c89458; border-radius: 18px; background: rgba(255,253,237,.83); }.empty-detail { height: 100%; display: grid; place-items: center; align-content: center; gap: 6px; color: #817561; text-align: center; }.empty-detail span { font-size: 43px; }.empty-detail strong,.empty-detail small { display: block; }.inventory-detail-art { font-size: 55px; }.inventory-detail h3 { margin: 5px 0; font: 700 20px/1.1 "Fredoka",sans-serif; }.inventory-detail p { color: #64716c; font-size: 11px; line-height: 1.45; }.inventory-meta { display: flex; gap: 5px; flex-wrap: wrap; margin: 9px 0 14px; }.inventory-meta span { padding: 4px 7px; border-radius: 10px; color: #47645c; background: #e4edd7; font-size: 8px; font-weight: 800; }.inventory-action { width: 100%; margin-top: 7px; padding: 9px; border: 0; border-radius: 11px; color: white; background: #43825f; cursor: pointer; font-weight: 800; font-size: 11px; }.inventory-action.secondary { color: #654b2d; background: #f0d490; }.inventory-action:disabled { opacity: .45; cursor: not-allowed; }
.equipped-strip { margin-top: 12px; padding: 9px 12px; display: flex; align-items: center; gap: 12px; border-radius: 14px; color: #fff8d8; background: #765039; }.equipped-strip > strong { font-size: 10px; letter-spacing: .08em; }.equipped-strip > div { display: flex; gap: 6px; flex-wrap: wrap; }.equipped-chip { padding: 5px 8px; border-radius: 9px; background: rgba(255,255,255,.14); font-size: 9px; }

/* Charakter */
.character-dialog { width: min(94vw,850px); padding: 0; display: none; grid-template-columns: 43% 57%; overflow: hidden; }.character-dialog[open] { display: grid; }.character-preview { min-height: 570px; position: relative; overflow: hidden; display: grid; place-items: end center; background: #3bb4bd url("assets/art/emerald-bay-v2.png") center / cover no-repeat; }.character-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(6,68,59,.25)); }.character-preview img { position: relative; z-index: 2; width: 74%; height: 92%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 7px rgba(7,55,44,.32)); }.character-preview.outfit-teal img { filter: hue-rotate(78deg) saturate(.9) drop-shadow(0 12px 7px rgba(7,55,44,.32)); }.character-preview.outfit-violet img { filter: hue-rotate(230deg) saturate(.88) drop-shadow(0 12px 7px rgba(7,55,44,.32)); }.character-preview.outfit-sand img { filter: sepia(.45) saturate(.72) drop-shadow(0 12px 7px rgba(7,55,44,.32)); }.preview-sun { position: absolute; right: 30px; top: 32px; width: 65px; height: 65px; border-radius: 50%; background: #ffdf72; box-shadow: 0 0 0 14px rgba(255,231,137,.22); }
.character-equipment-preview { position: absolute; z-index: 4; left: 15px; bottom: 15px; min-height: 31px; padding: 6px 10px; border: 2px solid rgba(255,255,255,.62); border-radius: 13px; color: white; background: rgba(10,83,75,.7); box-shadow: 0 5px 16px rgba(5,48,43,.2); font-size: 17px; backdrop-filter: blur(7px); }
.character-equipment-preview:empty { display: none; }
.character-form { padding: 36px; overflow-y: auto; }.character-form h2 { margin: 5px 0 19px; font: 700 29px/1.1 "Fredoka",sans-serif; }.character-form > label { display: grid; gap: 6px; color: #59706e; font-size: 11px; font-weight: 800; }.character-form input[type="text"],.character-form > label input { padding: 11px 13px; border: 2px solid #cfd8c8; border-radius: 12px; color: var(--ink); background: white; }.character-form fieldset { margin: 18px 0; padding: 0; border: 0; }.character-form legend { margin-bottom: 8px; color: #59706e; font-size: 11px; font-weight: 800; }.choice-row,.color-row { display: flex; gap: 8px; }.choice-row label { flex: 1; }.choice-row input,.color-row input { position: absolute; opacity: 0; }.choice-row span { display: block; padding: 10px; border: 2px solid #d7daca; border-radius: 12px; cursor: pointer; text-align: center; font-size: 11px; font-weight: 800; }.choice-row input:checked + span { border-color: #43825f; color: #256144; background: #e0f0dc; }.color-swatch { width: 35px; height: 35px; display: block; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 2px #d1d5c5; cursor: pointer; }.color-row input:checked + .color-swatch { box-shadow: 0 0 0 3px #32765a; }.color-swatch.coral { background: #e66d55; }.color-swatch.teal { background: #278f8d; }.color-swatch.violet { background: #8e64aa; }.color-swatch.sand { background: #c6a46d; }.character-note { padding: 10px; border-radius: 11px; color: #65716e; background: #edf1e4; font-size: 10px; line-height: 1.45; }

@media (max-width: 780px) {
  #app { grid-template-rows: 58px minmax(0,1fr); }
  .topbar { height: 58px; min-height: 58px; padding: 6px 8px; }
  .resource { min-width: 52px; height: 38px; padding-inline: 6px; }.pearl-resource small { display: none; }
  #exploreView .scene-head { left: 62px; top: 10px; }.scene-head .eyebrow { font-size: 7px; }.scene-head h1 { font-size: 20px !important; }.scene-head p { display: none; }
  .island-stage { --tile-w: min(23vw,96px); min-height: 0; height: 100%; border-radius: 0; }
  .island-grid { top: calc(var(--tile-w) * 1.02); }
  .adventure-rail { top: 7px; }.tool-dock { top: 55px; }
  .friends-bar { left: 7px; right: 7px; bottom: max(7px,env(safe-area-inset-bottom)); padding: 6px; display: block; }.friends-heading { display: none; }.friend-card { min-width: 58px; width: 58px; height: 50px; padding: 4px; display: grid; grid-template-columns: 1fr; }.friend-card > span:nth-child(2),.friend-card > i { display: none; }.friend-avatar { width: 42px; height: 42px; margin: auto; }
  .bottom-nav { bottom: max(65px,calc(env(safe-area-inset-bottom) + 59px)); width: auto; }.nav-button { min-width: 65px; padding: 4px 7px; }.nav-button > strong { display: none; }
  .tool-hint { bottom: 120px; }.camera-pad { bottom: 64px; }.sponsor-placement { left: 8px; bottom: 181px; min-width: 46px; width: 46px; height: 46px; padding: 3px; display: grid; place-items: center; border-radius: 13px; }.sponsor-placement > span { grid-row: auto; font-size: 25px; }.sponsor-placement strong,.sponsor-placement small { display: none; }
  .start-screen { grid-template-columns: 1fr; align-content: end; padding: 20px 14px max(20px,env(safe-area-inset-bottom)); }.start-logo { align-self: center; }.start-logo > span { width: 54px; height: 54px; margin-bottom: 10px; font-size: 32px; }.start-logo strong { font-size: 38px; }.start-logo em { font-size: 27px; }.start-logo small { margin-top: 7px; font-size: 9px; }.start-card { padding: 19px; }.start-card p { margin-bottom: 10px; font-size: 17px; }.start-card button { margin-top: 7px; padding-block: 10px; }.account-summary { padding:7px 9px!important; }.account-dialog { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); padding:21px 14px; }.account-head { grid-template-columns:50px 1fr; gap:10px; }.account-emblem { width:48px; height:48px; border-radius:16px; font-size:27px; }.account-head h2 { font-size:21px; }.account-identity { grid-template-columns:40px minmax(0,1fr); }.account-identity b { grid-column:1 / -1; justify-self:start; }.auth-form { gap:8px; }
  .backpack-dialog { width: calc(100vw - 10px); max-height: calc(100dvh - 10px); }.backpack-shell { padding: 13px; border-width: 8px; border-top-width: 13px; }.backpack-head p { display: none; }.backpack-badge { width: 49px; height: 49px; font-size: 27px; }.backpack-head h2 { font-size: 21px; }.inventory-layout { height: calc(100dvh - 205px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) auto; }.inventory-tabs { display: flex; gap: 5px; overflow-x: auto; }.inventory-tabs button { flex: 0 0 auto; padding: 7px 9px; }.inventory-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.inventory-item { min-height: 92px; }.inventory-detail { max-height: 170px; }.equipped-strip { display: none; }
  .character-dialog[open] { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); grid-template-columns: 1fr; grid-template-rows: 190px minmax(0,1fr); }.character-preview { min-height: 190px; }.character-preview img { width: 46%; height: 150%; bottom: -48%; }.character-form { padding: 21px; }.character-form h2 { font-size: 23px; }
  .store-tabs { overflow-x: auto; }.store-tab { flex: 0 0 auto; padding-inline: 11px; }.store-balances { gap: 4px; }.store-balance { min-width: 68px !important; }
  .trade-dialog { width:calc(100vw - 10px); max-height:calc(100dvh - 10px); padding:18px; }.trade-head { padding-right:30px; grid-template-columns:48px minmax(0,1fr); }.trade-merchant { width:46px; height:46px; border-radius:14px; font-size:25px; }.trade-head h2 { font-size:21px; }.trade-head p { display:none; }.trade-wallet { grid-column:1 / -1; justify-self:start; min-width:78px; padding:7px 10px; }.trade-goods-list { max-height:calc(100dvh - 250px); margin-top:12px; }.trade-good { grid-template-columns:47px minmax(0,1fr); }.trade-good-icon { width:45px; height:45px; font-size:27px; }.trade-good p { display:none; }.trade-good-price { grid-column:1 / -1; display:flex; align-items:center; justify-content:flex-end; gap:8px; }.trade-good-price button { margin:0; }.trade-footer { align-items:stretch; flex-direction:column; }.trade-footer button { width:100%; }
  .valoria-world { width:calc(var(--tile-w) * 25); height:calc(var(--tile-w) * 16); border-width:3px; border-radius:24px; }
  .valoria-location { gap:5px; }.valoria-pin { width:40px; height:40px; flex-basis:40px; }.valoria-pin i { font-size:19px; }.valoria-label { max-width:135px; padding:6px 8px; }.valoria-label strong { max-width:122px; overflow:hidden; font-size:10px; text-overflow:ellipsis; }.valoria-label small { font-size:6px; }
  .valoria-stage .tool-dock { top:55px; }.valoria-stage .tool-hint { bottom:71px; max-width:72vw; }.valoria-stage .island-objective { bottom:64px; }
  .city-dialog[open] { width:calc(100vw - 10px); max-height:calc(100dvh - 10px); grid-template-columns:1fr; grid-template-rows:210px minmax(0,1fr); }
  .city-dialog-portrait { min-height:210px; }.city-dialog-copy { padding:21px; overflow-y:auto; }.city-dialog-copy h2 { font-size:27px; }.city-dialog-copy > p { font-size:12px; }.city-dialog-copy blockquote { margin:13px 0 16px; font-size:12px; }.city-dialog-actions { grid-template-columns:1fr; }
}

@media (max-width: 430px) {
  .brand-mark { width: 31px; }.resources { margin-left: auto; }.resource { min-width: 43px; }.resource.energy { min-width: 54px; }.pearl-resource { display: none; }
  .inventory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Version 0.8: nackte, erweiterbare Heimatinsel mit Mehrfeld-Gebäuden */
#app > main { height: auto; }
#homeView.active { padding: 16px clamp(14px,2vw,28px) 92px; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
#homeView .scene-head { margin-bottom: 12px; align-items: center; }
#homeView .home-layout { min-height: 0; grid-template-columns: minmax(0,1fr) minmax(290px,340px); }
#homeView .home-stage { min-height: 0; }
#homeView .shop-panel { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#homeView .shop-items { min-height: 0; max-height: none; flex: 1; grid-auto-rows: minmax(66px,auto); align-content: start; overflow-y: auto; }
.store-item-art img { width: 125%; height: 125%; object-fit: contain; }
.inventory-item > span { height: 43px; display: grid; place-items: center; }
.inventory-item > span img { width: 62px; height: 55px; object-fit: contain; }
.inventory-detail-art img { width: 135px; height: 105px; display: block; object-fit: contain; }

@media (max-width: 780px) {
  #homeView.active { padding: 8px 8px max(71px,calc(env(safe-area-inset-bottom) + 66px)); grid-template-rows: auto minmax(0,1fr); }
  #homeView .scene-head { min-height: 60px; margin: 0 2px 7px; padding: 0; gap: 8px; }
  #homeView .scene-head h1 { font-size: 22px !important; }
  #homeView .scene-head p { display: block; margin-top: 2px; font-size: 9px; }
  #homeView .home-actions { max-width: 190px; gap: 5px; }
  #homeView .home-actions .primary-button,#homeView .home-actions .soft-button { padding: 7px 8px; font-size: 9px; }
  #homeView .home-layout { grid-template-columns: 1fr; grid-template-rows: minmax(260px,1fr) auto; gap: 7px; }
  #homeView .home-stage { width: 100%; min-height: 0; justify-content: normal; overflow: auto; border-radius: 21px; }
  #homeView .home-world { margin: 0; }
  #homeView .shop-panel { width: 100%; max-height: 170px; order: 0; padding: 10px 12px; border-radius: 18px; overflow: hidden; }
  #homeView .shop-panel h2 { margin: 2px 0 5px; font-size: 16px; }
  #homeView .shop-panel > p { display: none; }
  #homeView .shop-items { margin-top: 5px; display: flex; gap: 6px; max-height: 108px; overflow-x: auto; overflow-y: hidden; }
  #homeView .shop-item { min-width: 178px; padding: 6px; grid-template-columns: 36px 1fr auto; gap: 6px; border-radius: 12px; }
  #homeView .shop-item .shop-item-art { width: 34px; height: 34px; }
  #homeView .shop-item strong { font-size: 9px; }
  #homeView .shop-item small { font-size: 7px; }
  #homeView .shop-item b { grid-column: auto; font-size: 9px; }
  .home-selection-hint { left: 128px; bottom: 56px; width: min(60%,440px); max-width: none; margin-bottom: 10px; padding: 7px 9px; font-size: 8px; }
  .home-zoom { left: 8px; bottom: 9px; padding: 3px; }
  .home-zoom button { min-width: 29px; height: 28px; padding-inline: 6px; font-size: 10px; }
}

@media (max-width: 430px) {
  #homeView .scene-head > div:first-child { min-width: 112px; }
  #homeView .home-actions { max-width: 155px; }
  #homeView .home-actions .primary-button { max-width: 155px; overflow: hidden; text-overflow: ellipsis; }
  #homeView .home-actions .soft-button { display: none; }
  #homeView .shop-panel { max-height: 148px; }
  #homeView .shop-panel .eyebrow { display: none; }
  #homeView .shop-items { max-height: 98px; }
}

/* Version 0.8.7: Minos Einstieg und Heimat-Werkmodus */
.tutorial-guide {
  position: fixed;
  z-index: 42;
  left: 50%;
  top: 82px;
  transform: translateX(-50%);
  width: min(390px,calc(100vw - 36px));
  min-height: 92px;
  padding: 11px 38px 11px 87px;
  border: 3px solid rgba(255,246,183,.94);
  border-radius: 24px 18px 24px 18px;
  color: white;
  background: linear-gradient(145deg,rgba(19,113,105,.97),rgba(12,76,77,.98));
  box-shadow: 0 13px 36px rgba(4,48,53,.3),inset 0 1px rgba(255,255,255,.2);
  animation: tutorialArrive .32s ease-out;
}
@keyframes tutorialArrive { from { opacity: 0; transform: translate(-50%,-10px) scale(.97); } }
.tutorial-portrait { width: 69px; height: 79px; position: absolute; left: 10px; bottom: 0; overflow: hidden; border-radius: 18px 18px 8px 8px; background: linear-gradient(#83d8c1,#dff0ad); }
.tutorial-portrait img { width: 112%; height: 128%; object-fit: contain; object-position: center top; }
.tutorial-copy span,.tutorial-copy strong,.tutorial-copy small { display: block; }
.tutorial-copy span { color: #ffe78c; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.tutorial-copy strong { margin-top: 3px; font: 700 16px/1.1 "Fredoka",sans-serif; }
.tutorial-copy small { margin-top: 5px; color: #e9f8e5; font-size: 10px; line-height: 1.35; }
.tutorial-guide > button { width: 25px; height: 25px; position: absolute; right: 8px; top: 8px; border: 0; border-radius: 50%; color: #dff3e6; background: rgba(255,255,255,.12); cursor: pointer; font-size: 17px; }

.home-placement.selected::before { border-color: #fff18e; background: rgba(255,231,86,.22); box-shadow: 0 0 0 5px rgba(255,239,117,.12); }
.home-placement.moving { opacity: .42; filter: saturate(.65); }
.home-placement.footprint-2x4 .home-building-art { width: 205%; height: 285px; bottom: 11%; }
.home-object-controls {
  position: sticky;
  z-index: 510;
  left: 12px;
  bottom: 12px;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  margin: -50px 12px 12px;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  border: 2px solid rgba(255,247,188,.9);
  border-radius: 16px;
  color: white;
  background: rgba(11,78,76,.94);
  box-shadow: 0 9px 24px rgba(4,45,48,.3);
  backdrop-filter: blur(9px);
}
.home-object-controls strong { max-width: 130px; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.home-object-controls button { height: 32px; padding: 0 10px; border: 0; border-radius: 10px; color: #24524d; background: #fff6cf; cursor: pointer; font-size: 9px; font-weight: 900; }
.home-object-controls button:hover,.home-object-controls button.active { color: white; background: #df7655; }
.home-object-controls button:disabled { opacity: .38; cursor: default; }
.home-object-controls #cancelHomeObject { width: 30px; padding: 0; color: white; background: rgba(255,255,255,.14); font-size: 16px; }

@media (max-width: 780px) {
  .tutorial-guide { top: 164px; width: min(280px,calc(100vw - 160px)); min-height: 70px; padding: 9px 31px 9px 10px; border-radius: 18px; }
  .tutorial-portrait { display: none; }
  .tutorial-copy strong { font-size: 13px; }
  .tutorial-copy small { font-size: 8px; }
  .home-object-controls { position: fixed; left: 50%; bottom: max(126px,calc(env(safe-area-inset-bottom) + 120px)); max-width: calc(100vw - 12px); margin: 0; padding: 5px; gap: 3px; transform: translateX(-50%); }
  .home-object-controls strong { display: none; }
  .home-object-controls button { height: 29px; padding: 0 7px; font-size: 8px; }
  .home-selection-hint:has(+ .home-object-controls:not(.hidden)) { display: none; }
}

/* Version 0.9: Charakter-Loadout, Archipelreisen und Inselstimmungen */
body[data-island-theme="moai"] .island-stage {
  background:
    radial-gradient(circle at 22% 28%,rgba(255,228,158,.22) 0 2px,transparent 3px),
    repeating-radial-gradient(ellipse at 70% 50%,rgba(49,30,28,.12) 0 2px,transparent 3px 31px),
    linear-gradient(145deg,#3994aa,#386a80 55%,#263e58);
}
body[data-island-theme="lagoon"] .island-stage {
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.42) 0 2px,transparent 3px),
    radial-gradient(circle at 76% 66%,rgba(255,145,178,.26) 0 4px,transparent 5px),
    repeating-radial-gradient(ellipse at 34% 42%,rgba(229,255,240,.12) 0 2px,transparent 3px 23px),
    linear-gradient(145deg,#4ed4cb,#178fae 56%,#126887);
}
.map-island b { display: inline-block; margin-top: 8px; padding: 4px 8px; border-radius: 9px; color: #295d53; background: #fff3a6; font-size: 9px; }
.map-island:hover,.map-island.playable:hover { transform:translate(-50%,-50%) rotate(var(--map-rotate)) scale(1.015); filter:brightness(1.07) drop-shadow(0 11px 9px rgba(3,63,82,.36)); }

.backpack-equipment-button { margin-left: auto; white-space: nowrap; }
.equipment-dialog { width: min(96vw,1180px); max-height: min(94dvh,850px); padding: 25px; overflow: hidden; color: #f8f0d5; border: 3px solid #d7ae66; border-radius: 28px; background: linear-gradient(155deg,#183f42,#102b34 58%,#15252f); box-shadow: 0 28px 90px rgba(2,21,25,.58),inset 0 0 0 1px rgba(255,245,194,.14); }
.equipment-dialog::backdrop { background: rgba(4,26,31,.72); backdrop-filter: blur(5px); }
.equipment-dialog .dialog-close { color: white; background: rgba(255,255,255,.11); }
.equipment-head { min-height: 64px; padding-right: 46px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.equipment-head h2 { margin: 3px 0; color: #fff9df; font: 700 30px/1 "Fredoka",sans-serif; }
.equipment-head p { margin: 5px 0 0; color: #a9ccc5; font-size: 11px; }
.equipment-head .soft-button { flex: 0 0 auto; }
.equipment-layout { height: min(68dvh,650px); margin-top: 17px; display: grid; grid-template-columns: minmax(410px,1.18fr) minmax(275px,.85fr) minmax(215px,.62fr); gap: 12px; min-height: 0; }
.loadout-stage,.equipment-bag,.equipment-stats { min-height: 0; border: 2px solid rgba(225,190,113,.35); border-radius: 20px; background: rgba(4,24,30,.4); box-shadow: inset 0 0 26px rgba(2,12,15,.26); }
.loadout-stage { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 32%,rgba(252,219,139,.18),transparent 43%),linear-gradient(180deg,rgba(31,98,93,.62),rgba(9,33,39,.78)); }
.loadout-stage::before { content: ""; position: absolute; left: 50%; bottom: 5%; width: 55%; height: 11%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse,rgba(2,11,13,.52),transparent 68%); }
.equipment-avatar { width: 49%; height: 86%; position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%); display: grid; place-items: end center; pointer-events: none; }
.equipment-avatar img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 16px 10px rgba(0,13,16,.5)); }
.equipment-avatar.outfit-teal img { filter: hue-rotate(78deg) saturate(.9) drop-shadow(0 16px 10px rgba(0,13,16,.5)); }
.equipment-avatar.outfit-violet img { filter: hue-rotate(230deg) saturate(.88) drop-shadow(0 16px 10px rgba(0,13,16,.5)); }
.equipment-avatar.outfit-sand img { filter: sepia(.45) saturate(.72) drop-shadow(0 16px 10px rgba(0,13,16,.5)); }
.equipment-avatar-icons { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); min-width: 70px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.36); border-radius: 12px; background: rgba(5,34,39,.8); text-align: center; font-size: 17px; white-space: nowrap; }
.equipment-slots-grid { position: absolute; inset: 13px; display: grid; grid-template-columns: minmax(118px,32%) 1fr minmax(118px,32%); grid-template-rows: repeat(3,1fr); gap: 10px; pointer-events: none; }
.equipment-slot { min-width: 0; padding: 9px; position: relative; z-index: 2; overflow: hidden; border: 2px solid rgba(225,190,113,.42); border-radius: 15px; color: #d8e9e0; background: linear-gradient(145deg,rgba(13,56,59,.91),rgba(7,35,41,.94)); cursor: pointer; text-align: left; pointer-events: auto; transition: transform .15s,border-color .15s,box-shadow .15s; }
.equipment-slot:nth-child(1),.equipment-slot:nth-child(3),.equipment-slot:nth-child(5) { grid-column: 1; }
.equipment-slot:nth-child(2),.equipment-slot:nth-child(4),.equipment-slot:nth-child(6) { grid-column: 3; }
.equipment-slot:nth-child(1),.equipment-slot:nth-child(2) { grid-row: 1; }
.equipment-slot:nth-child(3),.equipment-slot:nth-child(4) { grid-row: 2; }
.equipment-slot:nth-child(5),.equipment-slot:nth-child(6) { grid-row: 3; }
.equipment-slot:hover,.equipment-slot.drop-ready { transform: none; border-color: #ffe58d; box-shadow: 0 0 0 4px rgba(255,220,115,.12); }
.equipment-slot.filled { border-color: #6cd0a2; background: linear-gradient(145deg,rgba(29,99,79,.94),rgba(10,53,54,.96)); }
.equipment-slot span,.equipment-slot small,.equipment-slot strong,.equipment-slot i { display: block; }
.equipment-slot > span { float: left; margin-right: 7px; font-size: 28px; }
.equipment-slot small { color: #deb96e; font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.equipment-slot strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; white-space: nowrap; }
.equipment-slot i { clear: both; margin-top: 7px; color: #9dc5bd; font-size: 7px; font-style: normal; line-height: 1.25; }
.equipment-bag { padding: 13px; display: flex; flex-direction: column; overflow: hidden; }
.equipment-bag-head { padding: 2px 2px 10px; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.equipment-bag-head h3 { margin: 2px 0 0; color: white; font: 700 18px "Fredoka",sans-serif; }
.equipment-bag-head > small { color: #9fc3bb; font-size: 7px; }
.equipment-inventory { min-height: 0; padding-right: 4px; display: grid; align-content: start; gap: 7px; overflow-y: auto; }
.equipment-item { min-height: 76px; padding: 9px; display: grid; grid-template-columns: 48px 1fr; gap: 2px 8px; border: 2px solid rgba(205,177,117,.3); border-radius: 14px; color: #e8eee0; background: rgba(255,255,255,.055); cursor: grab; text-align: left; }
.equipment-item:hover { border-color: #e6c779; background: rgba(255,255,255,.1); }
.equipment-item.equipped { border-color: #5fd39e; background: rgba(43,151,112,.18); }
.equipment-item > span { grid-row: 1 / span 3; display: grid; place-items: center; border-radius: 11px; background: rgba(237,208,134,.12); font-size: 30px; }
.equipment-item strong { align-self: end; font-size: 10px; }
.equipment-item small { color: #9dc2ba; font-size: 7px; line-height: 1.35; }
.equipment-item b { color: #eac875; font-size: 7px; letter-spacing: .08em; }
.equipment-empty { padding: 28px 12px; display: grid; place-items: center; gap: 6px; color: #a9c6be; text-align: center; }
.equipment-empty span { font-size: 38px; }.equipment-empty strong { color: white; }.equipment-empty small { line-height: 1.4; }
.equipment-stats { padding: 15px; overflow-y: auto; }
.equipment-stats h3 { margin: 0 0 11px; color: #ffe491; font: 700 18px "Fredoka",sans-serif; }
.equipment-stats > div { padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.09); }
.equipment-stats span,.equipment-stats small { display: block; }.equipment-stats span { color: #d8e9e2; font-size: 9px; font-weight: 800; }.equipment-stats small { margin-top: 2px; color: #779e99; font-size: 7px; font-weight: 500; }.equipment-stats strong { color: #7ce2ae; font-size: 12px; white-space: nowrap; }
.equipment-stats p { margin: 15px 0 0; padding: 10px; border-radius: 11px; color: #bfd1c9; background: rgba(255,233,157,.08); font-size: 8px; line-height: 1.45; }

.boat-transition { position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; align-content: center; gap: 9px; color: white; background: radial-gradient(circle at 50% 44%,rgba(107,225,213,.24),transparent 28%),linear-gradient(145deg,rgba(6,90,111,.97),rgba(3,43,67,.98)); text-align: center; }
.boat-transition.hidden { display: none; }
.boat-transition strong { color: #fff2a3; font: 700 28px "Fredoka",sans-serif; }.boat-transition small { color: #cae8e5; }
.boat-route { width: min(520px,80vw); height: 120px; position: relative; overflow: hidden; }
.boat-wave { position: absolute; left: 0; right: 0; bottom: 8px; color: #79dfea; font: 700 54px/1 monospace; letter-spacing: 9px; white-space: nowrap; animation: boatWave .8s linear infinite alternate; }
.travel-boat { position: absolute; left: -15%; bottom: 38px; font-size: 72px; filter: drop-shadow(0 9px 6px rgba(1,26,40,.45)); animation: boatSail 1.38s ease-in-out forwards; }
@keyframes boatSail { from { left: -15%; transform: rotate(-3deg); } 50% { transform: rotate(4deg) translateY(-4px); } to { left: 88%; transform: rotate(-2deg); } }
@keyframes boatWave { from { transform: translateX(-8px); } to { transform: translateX(8px); } }

@media (max-width: 900px) {
  .equipment-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 14px; }
  .equipment-layout { height: calc(100dvh - 128px); grid-template-columns: minmax(330px,1fr) minmax(245px,.75fr); grid-template-rows: minmax(0,1fr) auto; }
  .equipment-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
  .equipment-stats h3,.equipment-stats p { display: none; }.equipment-stats > div { padding: 6px; border: 0; border-radius: 9px; background: rgba(255,255,255,.05); }
}

@media (max-width: 650px) {
  .backpack-equipment-button { padding: 8px 9px; font-size: 9px; }
  .equipment-head { min-height: 72px; align-items: start; }.equipment-head h2 { font-size: 22px; }.equipment-head p { max-width: 260px; font-size: 8px; }.equipment-head .soft-button { padding: 7px 9px; font-size: 8px; }
  .equipment-layout { height: calc(100dvh - 164px); margin-top: 7px; grid-template-columns: 1fr; grid-template-rows: minmax(250px,43%) minmax(160px,1fr) auto; gap: 6px; overflow-y: auto; }
  .loadout-stage { min-height: 250px; }
  .equipment-bag { min-height: 170px; padding: 8px; }.equipment-bag-head { padding-bottom: 6px; }.equipment-bag-head h3 { font-size: 15px; }
  .equipment-inventory { display: flex; overflow-x: auto; overflow-y: hidden; }
  .equipment-item { min-width: 190px; min-height: 68px; }
  .equipment-stats { grid-column: auto; grid-template-columns: repeat(2,1fr); }
  .equipment-avatar { width: 44%; }
  .equipment-slots-grid { inset: 7px; grid-template-columns: minmax(93px,34%) 1fr minmax(93px,34%); gap: 5px; }
  .equipment-slot { padding: 6px; }.equipment-slot > span { font-size: 22px; }.equipment-slot i { display: none; }.equipment-slot strong { font-size: 8px; }
  .boat-transition strong { font-size: 22px; }.travel-boat { font-size: 58px; }
}

/* Valoria-Kalibrierung: einheitliche 2:1-Isometrie, lesbarer Maßstab und große Graubox */
.valoria-stage {
  background:
    radial-gradient(ellipse at 52% 45%,rgba(255,246,206,.4),transparent 36%),
    radial-gradient(ellipse at 18% 16%,rgba(123,154,89,.34),transparent 28%),
    linear-gradient(150deg,#9dbb83 0%,#d9c99b 48%,#799b71 100%);
}
.valoria-stage::after { background:linear-gradient(180deg,rgba(46,68,47,.12),transparent 24% 72%,rgba(49,57,43,.24)); }
.valoria-stage .cloud,.valoria-stage .sea-sparkle { display:none; }
.valoria-stage .tool-dock { top:auto; right:12px; bottom:82px; left:auto; }
.valoria-stage .tool-dock .tool-button[data-tool] { display:none; }
.valoria-stage .tool-hint,.valoria-stage .sponsor-placement { display:none; }
.valoria-world {
  --city-tile-h: calc(var(--tile-w) * .5);
  --city-row-step: calc(var(--tile-w) * .25);
  width:calc(var(--tile-w) * 43);
  height:calc(var(--tile-w) * 22);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 51% 51%,rgba(255,243,203,.44),transparent 34%),
    repeating-radial-gradient(ellipse at 30% 42%,rgba(255,255,255,.07) 0 2px,transparent 3px 32px),
    linear-gradient(145deg,#759e6e,#b8b27a 52%,#648d69);
  box-shadow: none;
}
.valoria-world::before {
  content:"";
  position:absolute;
  inset:5% 4% 6%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:45%;
  background:radial-gradient(ellipse at 50% 47%,rgba(241,222,169,.3),transparent 62%);
  box-shadow:inset 0 0 120px rgba(58,78,51,.18);
  pointer-events:none;
}
.valoria-world::after { display:none; }
.valoria-grid { width:100%; height:100%; left:0; top:0 !important; overflow:visible; filter:drop-shadow(0 20px 16px rgba(45,54,38,.2)); }
.city-ground-tile {
  width:var(--tile-w);
  height:var(--city-tile-h);
  padding:0;
  position:absolute;
  left:calc(var(--city-iso-x) * var(--tile-w) / 2);
  top:calc(var(--city-iso-y) * var(--city-row-step));
  overflow:visible;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:filter .16s,transform .16s;
}
.city-ground-tile img { width:100%; height:100%; display:block; object-fit:fill; pointer-events:none; transition:filter .2s,opacity .2s; }
.city-ground-tile.variation-1 img { filter:brightness(.975) saturate(.93); }
.city-ground-tile.variation-2 img { filter:brightness(1.018) sepia(.025); }
.city-ground-tile.variation-3 img { filter:brightness(.99) saturate(1.035); }
.city-ground-tile::after { content:""; position:absolute; inset:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); pointer-events:none; }
.city-ground-tile.main-avenue::after { box-shadow:inset 0 0 0 2px rgba(71,111,139,.16); background:linear-gradient(90deg,transparent 43%,rgba(70,108,136,.1) 44% 46%,transparent 47% 53%,rgba(70,108,136,.1) 54% 56%,transparent 57%); }
.city-ground-tile.portal-plaza::after { background:radial-gradient(circle,rgba(111,103,184,.13),transparent 58%); box-shadow:inset 0 0 0 2px rgba(94,113,162,.11); }
.city-ground-tile.guild-street img { filter:brightness(.93) saturate(.82); }
.city-ground-tile.market-street img { filter:sepia(.1) saturate(.9); }
.city-ground-tile.garden-street img { filter:hue-rotate(5deg) saturate(.88) brightness(1.01); }
.city-ground-tile.old-street img { filter:grayscale(.12) brightness(.88) sepia(.08); }
.city-ground-tile:hover:not(.canal),.city-ground-tile:focus-visible:not(.canal) { z-index:110 !important; transform:none; filter:brightness(1.07) drop-shadow(0 3px 3px rgba(50,65,45,.2)); outline:none; }
.city-ground-tile.canal { pointer-events:none; }
.city-ground-tile.canal::before { content:""; position:absolute; inset:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); border:2px solid rgba(240,218,160,.7); background:radial-gradient(circle at 35% 38%,rgba(255,255,255,.55) 0 2px,transparent 3px),linear-gradient(145deg,#63d8dc,#2b8ead); box-shadow:inset 0 0 13px rgba(19,90,145,.32),0 4px 0 #b8a979; }
.city-ground-tile.canal img { display:none; }
.city-building,.city-prop {
  width:calc(var(--tile-w) * var(--city-size));
  height:calc(var(--tile-w) * var(--city-size) * .72);
  position:absolute;
  left:calc(var(--city-iso-x) * var(--tile-w) / 2 + var(--tile-w) / 2);
  top:calc(var(--city-iso-y) * var(--city-row-step) + var(--city-tile-h) * .5);
  display:grid;
  place-items:end center;
  transform:translate(-50%,var(--city-anchor-y));
  transform-origin:50% 82%;
}
.city-prop { pointer-events:none; filter:drop-shadow(0 7px 5px rgba(46,42,31,.2)); }
.city-prop.lamp { height:calc(var(--tile-w) * var(--city-size) * 1.25); }
.city-prop-image,.city-building-image { width:100%; height:100%; display:block; object-fit:contain; object-position:center bottom; pointer-events:none; }
.city-building { padding:0; overflow:visible; border:0; color:white; background:transparent; cursor:pointer; filter:drop-shadow(0 9px 7px rgba(44,40,30,.24)); transition:transform .2s,filter .2s; }
.city-building:hover,.city-building:focus-visible { z-index:170 !important; transform:translate(-50%,var(--city-anchor-y)) scale(1.01); filter:brightness(1.045) drop-shadow(0 11px 8px rgba(44,40,30,.28)); outline:none; }
.city-building.current { filter:drop-shadow(0 0 11px rgba(255,225,119,.9)) drop-shadow(0 9px 7px rgba(44,40,30,.24)); }
.city-building.visited .city-building-label b { display:grid; }
.city-blockout-building { opacity:.66; filter:saturate(.72) drop-shadow(0 8px 6px rgba(44,40,30,.18)); }
.city-blockout-volume { width:72%; height:64%; min-height:74px; display:grid; place-content:center; gap:3px; border:2px dashed rgba(255,255,255,.75); border-radius:16px 16px 8px 8px; color:white; background:linear-gradient(145deg,rgba(92,126,139,.8),rgba(58,90,100,.88)); box-shadow:inset 0 0 0 4px rgba(255,255,255,.1),0 9px 0 rgba(75,65,44,.28); text-shadow:0 2px 5px rgba(24,42,48,.42); }
.city-blockout-volume i { font-size:27px; font-style:normal; }.city-blockout-volume b { font-size:9px; letter-spacing:.08em; }
.city-blockout-volume.guild { background:linear-gradient(145deg,rgba(76,89,145,.83),rgba(52,61,111,.9)); }.city-blockout-volume.market { background:linear-gradient(145deg,rgba(175,120,77,.82),rgba(116,75,52,.9)); }.city-blockout-volume.garden { background:linear-gradient(145deg,rgba(91,141,92,.82),rgba(53,97,68,.9)); }.city-blockout-volume.warrior { background:linear-gradient(145deg,rgba(145,93,70,.84),rgba(97,58,50,.92)); }.city-blockout-volume.knowledge { background:linear-gradient(145deg,rgba(79,111,139,.84),rgba(54,74,111,.92)); }.city-blockout-volume.shadow { background:linear-gradient(145deg,rgba(100,75,124,.82),rgba(59,45,77,.92)); }
.city-building-label { min-width:42px; max-width:220px; padding:5px 7px; display:flex; align-items:center; gap:6px; position:absolute; z-index:4; left:50%; bottom:2%; transform:translate(-50%,58%); border:2px solid rgba(255,241,187,.88); border-radius:13px; color:#fff8d8; background:rgba(29,60,68,.94); box-shadow:0 4px 0 rgba(83,62,26,.3),0 8px 17px rgba(30,42,39,.25); backdrop-filter:blur(6px); white-space:nowrap; opacity:0; transition:opacity .16s,transform .16s; }
.city-building:hover .city-building-label,.city-building:focus-visible .city-building-label,.city-building.current .city-building-label { opacity:1; transform:translate(-50%,46%); }
.city-blockout-building .city-building-label { opacity:.78; }
.city-building-label > i { width:24px; height:24px; display:grid; place-items:center; flex:0 0 24px; border-radius:8px; background:#f2d477; font-size:14px; font-style:normal; }
.city-building-label span { min-width:0; display:block; text-align:left; }.city-building-label small,.city-building-label strong { display:block; }.city-building-label small { color:#e8c56d; font-size:6px; font-weight:900; letter-spacing:.08em; }.city-building-label strong { max-width:180px; overflow:hidden; font:700 10px "Fredoka",sans-serif; text-overflow:ellipsis; }
.city-building-label b { width:17px; height:17px; display:none; place-items:center; flex:0 0 17px; border:2px solid white; border-radius:50%; color:white; background:#3eae75; font-size:9px; }
.valoria-world .player { z-index:160; width:calc(var(--tile-w) * .46); height:calc(var(--city-tile-h) * .78); transform:none; }
.valoria-world .player-body { width:calc(var(--tile-w) * .34); height:calc(var(--tile-w) * .5); bottom:9%; }
.valoria-world .player-shadow { width:55%; height:15%; bottom:0; }
.valoria-world .player.walking .player-body { animation-duration:.62s; }
.valoria-world .city-online-player { width:calc(var(--tile-w) * .46); height:calc(var(--city-tile-h) * .78); transform:translateX(-50%); }
.valoria-world .city-online-player .coop-player-body { width:calc(var(--tile-w) * .34); height:calc(var(--tile-w) * .5); bottom:9%; }
.valoria-world .city-online-player .coop-player-shadow { width:55%; height:15%; bottom:0; }
.valoria-world .city-online-player .coop-player-identity { bottom:94%; }
.valoria-world .city-online-player .coop-player-identity strong { font-size:8px; }
.valoria-world .city-online-player .coop-player-identity small { font-size:6px; }

@media (max-width:780px) {
  .valoria-world { width:calc(var(--tile-w) * 43); height:calc(var(--tile-w) * 22); }
  .city-building-label { min-width:34px; padding:3px; border-radius:10px; }.city-building-label > i { width:25px; height:25px; flex-basis:25px; }.city-building-label span,.city-building-label b { display:none !important; }
  .city-building:hover,.city-building:focus-visible { transform:translate(-50%,var(--city-anchor-y)) scale(1.015); }
  .city-blockout-building .city-building-label { opacity:.62; }
}