/* world.css — style specyficzne dla świata +
   fallback dla .actor/.bubble/.label (app.css.php może nie dotrzeć) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === ACTOR / SPRITE / BUBBLE / LABEL (identyczne z app.css sklepgra) === */
.actor{box-sizing:content-box;position:absolute;left:0;top:0;width:38px;height:56px;will-change:transform;transform-origin:50% 100%;pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:none;}
.actor,.actor *{outline:none !important;}
.sprite{box-sizing:content-box;width:38px;height:56px;background-image:url('/img/sprites.png');background-repeat:no-repeat;background-position:0 0;transform-origin:50% 100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;}
.label{box-sizing:content-box;position:absolute;left:50%;top:60px;-webkit-transform:translateX(-50%);transform:translateX(-50%);font:11px Verdana,Geneva,sans-serif;color:#222;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:6px;border:1px solid #ddd;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;pointer-events:none;}
.me .label{border-color:#7ab8ff;}
.bubble{box-sizing:content-box;position:absolute;left:50%;bottom:67px;-webkit-transform:translateX(-50%);transform:translateX(-50%);min-width:28px;max-width:260px;font:13px/1.35 Verdana,Geneva,sans-serif;color:#000;background:#fff;border:1px solid #222;border-radius:12px;padding:6px 10px;box-shadow:0 2px 6px rgba(0,0,0,.15);display:none;z-index:1000;pointer-events:auto;}
.bubble::before{box-sizing:content-box;content:"";position:absolute;left:50%;bottom:-5px;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #222;width:0;height:0;}
.bubble::after{box-sizing:content-box;content:"";position:absolute;left:50%;bottom:-3px;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;width:0;height:0;}
.bubble.show{display:block;}.bubble.editing{display:block;}
.bubble-view{box-sizing:content-box;white-space:pre-wrap;word-wrap:break-word;}
.bubble-editor{box-sizing:content-box;display:none;min-height:1.5em;outline:none;white-space:pre-wrap;word-wrap:break-word;-webkit-user-select:text;user-select:text;}
.bubble-editor.empty:not(:focus)::after{content:"|";display:inline-block;margin-left:1px;animation:caretBlink 1s steps(1) infinite;color:#000;}
@keyframes caretBlink{50%{opacity:0;}}
.bubble.editing .bubble-view{display:none;}.bubble.editing .bubble-editor{display:block;}
.bubble-send{display:none;}
.actor-typing{position:absolute;top:-20px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);font:11px Verdana,Geneva,sans-serif;letter-spacing:2px;display:none;white-space:nowrap;}
.actor-typing.show{display:block;}.actor-typing span{opacity:0;}
.actor-typing span:nth-child(1){animation:tdot1 1.2s step-end infinite;}
.actor-typing span:nth-child(2){animation:tdot2 1.2s step-end infinite;}
.actor-typing span:nth-child(3){animation:tdot3 1.2s step-end infinite;}
@keyframes tdot1{0%{opacity:1;}75%{opacity:0;}}
@keyframes tdot2{0%{opacity:0;}25%{opacity:1;}100%{opacity:0;}}
@keyframes tdot3{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
.actor-zzz{position:absolute;top:-28px;right:-6px;width:34px;height:26px;display:none;animation:zzz-sway 2s steps(8) infinite;}
.actor-zzz.show{display:block;}
.actor-zzz span{box-sizing:content-box;position:absolute;font-weight:bold;font-family:Verdana,Geneva,sans-serif;color:#333;line-height:1;}
.actor-zzz span:nth-child(1){font-size:10px;left:0;bottom:0;}
.actor-zzz span:nth-child(2){font-size:10px;left:9px;bottom:2px;}
.actor-zzz span:nth-child(3){font-size:10px;left:18px;bottom:4px;}
@keyframes zzz-sway{0%{-webkit-transform:translateX(0);transform:translateX(0);}50%{-webkit-transform:translateX(4px);transform:translateX(4px);}}
/* === KONIEC ACTOR STYLES === */

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #fff;
  font-family: sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* ===================== STAGE — nadpisuje app.css dla pełnoekranowego world ===================== */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#stage-wrap {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: #fff;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

#stage-area {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
}

#stage-scale {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: hidden;
  -webkit-transform: none !important;
  transform: none !important;
}

#stage {
  position: absolute;
  top: 0; left: 0;
  /* width, height i background ustawiane przez JS (world.js → renderStreetBackground) */
  -webkit-transform: none !important;
  transform: none !important;
}

/* ===================== WEJŚCIA DO SKLEPÓW ===================== */
.shop-entrance {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}

/* Aktor zawsze nad budynkami */
.actor { z-index: 10 !important; }

.shop-entrance-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  pointer-events: none;
}

/* ===================== INFO PANEL ===================== */
#world-info-panel,
#paint-join-panel {
  display: none;
  position: fixed;
  z-index: 1200;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 0;
  width: 320px;
  max-width: 90vw;
  overflow: hidden;
  /* desktop: lewy górny róg */
  top: 16px;
  left: 16px;
}

#world-info-panel .world-info-header,
#paint-join-panel .world-info-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #eee;
}

#world-info-title {
  font: bold 15px Verdana, sans-serif;
  color: #111;
}

#world-info-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  color: #555;
}

#world-info-body {
  padding: 14px 16px;
  font: 13px/1.6 Verdana, sans-serif;
  overflow-y: auto;
  max-height: 60vh;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#paint-join-body {
  padding: 14px 16px;
  font: 13px/1.6 Verdana, sans-serif;
}
.pb-subtitle {
  display: block;
  margin: 0 0 10px;
}
.pb-bullets {
  margin: 0 0 14px 16px;
  padding: 0;
  list-style: disc;
}
.pb-bullets li {
  margin-bottom: 10px;
}
.pb-bullets li:last-child {
  margin-bottom: 0;
}
.pb-btn {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px 12px;
  font: 13px Verdana, sans-serif;
  cursor: pointer;
  margin-bottom: 21px;
  color: #111;
}
.pb-btn:last-child { margin-bottom: 0; }

/* mobile: dół ekranu */
@media (max-width: 600px) {
  #world-info-panel,
  #paint-join-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 200px;
    border-radius: 12px 12px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  #world-info-body,
  #paint-join-body {
    max-height: 150px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Identity button (nazwa ludzika) */
#world-identity-btn {
  position: fixed;
  top: 12px;
  right: 58px;
  z-index: 1500;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0 10px;
  height: 30px;
  line-height: 28px;
  cursor: pointer;
  font: 13px Verdana, Geneva, sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Write tip hint */
#write-tip-hint {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 200;
  font: 12px/1.3 Verdana, Geneva, sans-serif;
  color: #000;
  text-shadow: 0 1px 2px rgba(255,255,255,.8);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Paint ranking — lewy dolny róg */
#pb-ranking {
  display: none;
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 200;
  font: 12px/1.4 Verdana, Geneva, sans-serif;
  color: #000;
  text-shadow: 0 1px 2px rgba(255,255,255,.8);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.pb-rank-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}
.pb-rank-pos  { min-width: 16px; color: #888; }
.pb-rank-name { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.pb-rank-hits { font-weight: bold; }

/* Join overlay — style z app.css (sklepgra), tu nie duplikujemy */