#chatPanel {
  position: fixed;
  z-index: 18;
  left: 50%;
  bottom: max(145px, calc(env(safe-area-inset-bottom) + 128px));
  transform: translateX(-50%);
  width: min(430px, calc(100% - 28px));
  padding: 18px;
  background: #fffdf5f7;
  border: 4px solid #fff;
  border-radius: 22px;
  box-shadow: 0 16px 50px #203b5870;
  pointer-events: auto;
  touch-action: pan-y;
}
#chatPanel[hidden] { display: none; }
#chatPanel h3 { margin: 0 34px 12px 0; color: #7a315e; font-size: 1.05rem; }
#chatClose { position: absolute; right: 9px; top: 5px; border: 0; background: transparent; color: #30445a; font-size: 1.8rem; line-height: 1; }
#chatClose[hidden] { display: none; }
body.quiz-locked #chatPanel { box-shadow: 0 0 0 100vmax #14263a99, 0 16px 50px #203b5870; }
body.quiz-locked .actions, body.quiz-locked #joystick { pointer-events: none; }
#chatChoices { display: grid; gap: 9px; }
#chatChoices button { min-height: 46px; padding: 10px 13px; border: 2px solid #d4b8d1; border-radius: 14px; background: #fff; color: #273b50; font-size: .9rem; font-weight: 800; text-align: left; box-shadow: 0 3px 0 #cda9c7; touch-action: manipulation; }
#chatChoices button:active { transform: translateY(2px); box-shadow: 0 1px 0 #cda9c7; }
.action.talk { background: #e8d9ff; }
.action.talk:disabled { opacity: .48; filter: grayscale(.35); }
@media (max-width: 520px) {
  .actions { width: 142px; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 6px; }
  .action { width: 61px; height: 61px; }
  .action.important { width: 70px; height: 70px; }
  #chatPanel { bottom: 164px; }
}

/* Conversation history and the two compact world shortcuts. */
.world-tools{position:fixed;right:12px;top:86px;display:flex;gap:6px;pointer-events:auto}
.world-tools button{min-width:44px;min-height:44px;border:2px solid white;border-radius:15px;background:#fff9eae8;box-shadow:0 3px 9px #233d4933;color:#503654;touch-action:manipulation}
#playerChatDialog{width:min(560px,calc(100vw - 20px));max-height:calc(100dvh - 24px);overflow:auto;touch-action:pan-y}
#playerChatPeers{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;touch-action:pan-x}
#playerChatPeers button{flex:0 0 auto;border:1px solid #b8b0cd;border-radius:12px;padding:8px 12px;min-height:44px;background:#eee7f7;color:#473654}
#playerChatPeers button.selected{background:#64417d;color:white}
#playerChatHistory{height:clamp(120px,28dvh,300px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:12px;background:#ebe6f1;border-radius:16px;touch-action:pan-y;overscroll-behavior:contain}
.chat-bubble{align-self:flex-start;max-width:85%;padding:9px 12px;background:#fff;border-radius:15px 15px 15px 3px;overflow-wrap:anywhere;flex-shrink:0;color:#342b42}
.chat-bubble.own{align-self:flex-end;background:#d1ebf4;border-radius:15px 15px 3px 15px}
.chat-bubble p{margin:4px 0;white-space:pre-wrap}.chat-bubble small{display:block;font-size:.72rem;color:#566074}
#playerChatMessage{font-size:.78rem;margin:7px 0;color:#605773}#playerChatQuick{display:flex;gap:5px;overflow-x:auto;touch-action:pan-x}
#playerChatQuick button{flex:0 0 150px;font-size:.78rem;min-height:44px}
#kiipeliPanel{position:fixed;z-index:19;left:50%;transform:translateX(-50%);bottom:max(145px,env(safe-area-inset-bottom));width:min(460px,calc(100vw - 24px));padding:12px;border:3px solid white;border-radius:20px;background:#fff8f4f5;box-shadow:0 8px 30px #303b5140;touch-action:manipulation;text-align:center}
#kiipeliPanel[hidden],#kiipeliBounce[hidden],#kiipeliClimb[hidden]{display:none}
#kiipeliPanel p{font-size:.82rem;min-height:2.4em;margin:5px 0}#kiipeliPanel progress{width:100%;height:8px;accent-color:#9765c3}
#kiipeliPanel button{min-height:44px;padding:7px 13px;border:2px solid #b49ccc;border-radius:12px;background:#eee2f6;color:#463453;font-weight:700;touch-action:manipulation}
#kiipeliPanel button.ready{background:#c4f7b3;border-color:#4c9b56}#kiipeliClimb{display:flex;justify-content:center;gap:6px}#kiipeliStop{margin-top:7px;font-size:.75rem}
#passportDialog{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 30px);overflow:auto;padding:22px;border:4px solid white;border-radius:24px;background:#fff8e9;touch-action:pan-y;color:#483f54}
#passportClose{float:right;border:0;background:none;font-size:1.7rem;min-width:44px;min-height:44px}#passportDialog h2{margin:7px 0}#passportDialog>p{font-size:.86rem}
#passportTasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pass-task{padding:11px;border:2px dashed #c8bccb;border-radius:14px;background:white}.pass-task.earned{border:2px solid #77ab77;background:#e9f4de}.pass-task p{font-size:.8rem;margin:6px 0 0}
#passportRewards{display:grid;gap:8px}#passportRewards button{padding:12px;border:2px solid #b9a3cb;border-radius:12px;background:#eee3f7;color:#483555;min-height:44px}#passportRewards button:disabled{opacity:.55}
@media(max-width:520px){.world-tools{top:98px;right:8px}.world-tools button{font-size:.9rem}#passportTasks{grid-template-columns:1fr}#kiipeliPanel{bottom:160px}#playerChatDialog{padding:14px}#playerChatHistory{height:25dvh}}
@media(max-height:540px){.world-tools{top:66px}#kiipeliPanel{bottom:12px;width:min(450px,calc(100vw - 300px));padding:8px}#kiipeliPanel p{font-size:.72rem;min-height:1em}#playerChatHistory{height:22dvh}#playerChatQuick{display:none}}

/* One compact toolbar and exactly two challenge rows, on every screen size. */
#hud .topbar{left:max(10px,env(safe-area-inset-left));right:auto;top:max(8px,env(safe-area-inset-top));width:min(440px,calc(100vw - 20px));display:flex;flex-direction:column;align-items:flex-start;gap:7px}
#hud .world-tools{position:static;display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
#hud .world-tools button{width:44px;height:44px;min-width:44px;padding:0;margin:0;font-size:19px;border-radius:14px}
#hud #online{font-size:0}#hud #online:before{content:attr(data-count);font-size:13px}
#hud #task{position:relative;top:auto;left:auto;display:flex;flex-direction:column;gap:5px;background:#ffffffb3;border:0;border-radius:12px;box-shadow:none;padding:7px 11px;width:100%;max-width:100%;text-align:left;pointer-events:none}
#hud #taskText{font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
#hud #sideTask{font-size:11px;line-height:1.2;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
#message{top:auto;bottom:235px;font-size:13px;max-width:min(520px,88vw)}
#help .egg-task{position:static;max-width:none;font-size:12px;background:transparent;padding:0}
@media(max-height:540px){#message{bottom:110px}.topbar #taskText{font-size:12px}}

/* Game instructions stay in the challenge rows; controls stay at the bottom edge. */
#kiipeliPanel{display:none!important}
#hud .world-tools button[hidden],#hud .actions button[hidden],#hud #kiipeliClimb[hidden]{display:none}
#hud #kiipeliClimb{display:flex;align-items:center;gap:9px}
#hud #kiipeliClimb button{width:62px;height:62px;border:3px solid white;border-radius:50%;font-size:26px;font-weight:900;box-shadow:0 5px 14px #31536a50;background:#e4d9fa;color:#493455;touch-action:manipulation}
#hud #kiipeliClimb button.ready{background:#ffe878;border-color:#fff9b2;box-shadow:0 0 0 4px #f5db6370,0 5px 14px #31536a50}
#hud .action.ready{background:#a4f483;box-shadow:0 0 0 5px #a4f48360}
.kiipeli-playing #joystick{display:none}.kiipeli-playing .actions{width:auto;flex-wrap:nowrap;right:20px;bottom:max(20px,env(safe-area-inset-bottom))}
.kiipeli-playing #prompt{display:none}
@media(max-width:380px){#hud .world-tools{gap:4px}#hud .world-tools button{width:42px;min-width:42px;height:42px}}

#geocacheDialog{width:min(90vw,520px);max-height:85dvh;overflow:auto;border:0;border-radius:20px;padding:22px;background:#fffbee;color:#294733}#geocacheEntries{max-height:35dvh;overflow:auto}#geocacheEntries article{border-bottom:1px solid #adc9a6;padding:10px}#geocacheDialog input{display:block;width:95%;padding:12px}#geocacheDialog button{margin:8px 4px;padding:12px}

#hud #task #kiipeliStop{position:absolute;right:0;top:0;pointer-events:auto}#hud #kiipeliStop[hidden]{display:none}.kiipeli-playing #hud #task{padding-right:52px}

/* Compact conversation: readable history and a single compose row. */
#playerChatDialog{padding:16px;border:0;border-radius:20px;background:#fffaf2;width:min(480px,calc(100vw - 24px));box-sizing:border-box;color:#342b42}
#playerChatDialog .chat-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
#playerChatTitle{font-size:1.1rem;margin:0}#playerChatClose{position:static;float:none;width:44px;height:44px;margin:0;border:0;background:transparent;font-size:28px;padding:0}
#playerChatPeers{display:none}#playerChatHistory{height:clamp(140px,42dvh,380px);padding:10px;gap:8px;background:#f0ebe6}
#playerChatQuick:empty,#playerChatMessage:empty,#playerChatBlock:empty,#playerChatStatus:empty{display:none}
#playerChatQuick{margin:6px 0}#playerChatQuick button{flex:0 1 auto;min-height:36px;padding:6px 10px;margin:0;font-size:.8rem}
#playerChatDialog .chat-compose{display:flex;align-items:center;gap:8px;margin-top:10px}
#playerChatInput{min-width:0;flex:1;width:auto;margin:0;box-sizing:border-box;min-height:46px;font-size:16px;border:1px solid #c6bcc9;border-radius:12px;padding:10px}
#playerChatSend{flex:0 0 auto;min-height:46px;padding:9px 14px;margin:0;border-radius:12px}
#playerChatDialog .chat-feedback{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:5px;font-size:.75rem;color:#64586c}
#playerChatCount{order:2;margin-left:auto;font-size:.7rem}#playerChatBlock,#playerChatStatus{margin:0;font-size:.75rem}
@media(max-height:540px){#playerChatHistory{height:32dvh;min-height:80px}#playerChatDialog{padding:10px}#playerChatDialog .chat-heading{margin:0}#playerChatQuick{display:flex}}

#playerChatSend{width:auto}#playerChatMessage{background:none;padding:0}
.passport-look{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;background:#fff8e9f5;border-bottom:1px solid #dccfca;padding:4px 0}.passport-look canvas{width:84px;height:72px;border-radius:12px}.passport-look p{font-size:.8rem}#rainbowPetReward{padding:12px;border-radius:12px;background:linear-gradient(110deg,#ffd5e1,#fff0ba,#d1f0db,#d9e5ff);font-size:.85rem;font-weight:700}