#spaceboyPlaza {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  overflow: hidden;
  background: #08182b;
  color: #fff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  touch-action: none;
}
body.plaza-active #spaceboyPlaza { display: block; }
body.plaza-active > .bouncer,
body.plaza-active > #jumpscare,
body.plaza-active > #ghostFace,
body.plaza-active > #blackout,
body.plaza-active > #noiseOverlay,
body.plaza-active > #flashText,
body.plaza-active > #statusHint,
body.plaza-active > #arcadeMenuButton,
body.plaza-active > #clickerToggle { visibility: hidden; pointer-events: none; }
body.archive-mode #spaceboyPlaza { display: none; }
body.archive-mode > .bouncer,
body.archive-mode > #arcadeMenuButton,
body.archive-mode > #clickerToggle { visibility: visible; pointer-events: auto; }

#plazaCanvas { width: 100%; height: 100%; display: block; image-rendering: auto; }
#plazaHud { position:absolute; inset:0; pointer-events:none; }
#plazaTopbar {
  position:absolute; left:12px; right:12px; top:max(10px, env(safe-area-inset-top));
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; pointer-events:none;
}
#plazaIdentity, #plazaServerStatus {
  background:rgba(4,10,19,.82); border:2px solid rgba(255,255,255,.18); border-radius:16px;
  padding:9px 12px; box-shadow:0 8px 24px rgba(0,0,0,.28); backdrop-filter:blur(8px);
}
#plazaIdentity strong { display:block; font-size:15px; letter-spacing:.03em; }
#plazaIdentity span, #plazaServerStatus { font-size:12px; color:#b9d9ef; }
#plazaServerStatus.online { border-color:rgba(99,255,169,.45); color:#a9ffd0; }
#plazaServerStatus.offline { border-color:rgba(255,190,86,.45); color:#ffd18a; }
#plazaServerStatus.connecting { color:#bcd9ff; }

.plazaHudButton {
  pointer-events:auto; min-width:46px; min-height:46px; border:2px solid rgba(255,255,255,.23); border-radius:15px;
  background:rgba(8,18,32,.9); color:#fff; font:900 13px/1 "Trebuchet MS",Arial,sans-serif;
  box-shadow:0 8px 20px rgba(0,0,0,.28); cursor:pointer; touch-action:manipulation;
}
.plazaHudButton:active { transform:scale(.96); }
#spacePhoneButton { position:absolute; right:12px; bottom:max(14px, env(safe-area-inset-bottom)); width:58px; height:58px; font-size:25px; }
#plazaChatButton { position:absolute; right:80px; bottom:max(14px, env(safe-area-inset-bottom)); width:58px; height:58px; font-size:22px; }
#plazaEmoteButton { position:absolute; right:148px; bottom:max(14px, env(safe-area-inset-bottom)); width:58px; height:58px; font-size:22px; }
#plazaInteract {
  position:absolute; left:50%; bottom:max(18px, calc(env(safe-area-inset-bottom) + 4px)); transform:translateX(-50%);
  pointer-events:auto; border:0; border-radius:18px; padding:13px 20px; min-height:48px; max-width:min(78vw,560px);
  color:#111; background:#fff27a; font:900 14px/1.15 "Trebuchet MS",Arial,sans-serif; box-shadow:0 8px 26px rgba(0,0,0,.38);
  display:none; cursor:pointer;
}
#plazaInteract.active { display:block; animation:plazaPrompt .18s ease-out; }
@keyframes plazaPrompt { from{transform:translateX(-50%) translateY(8px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }

#plazaChatLog {
  position:absolute; left:12px; bottom:max(16px, env(safe-area-inset-bottom)); width:min(360px,58vw); max-height:160px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px; pointer-events:none; overflow:hidden;
}
.plazaChatLine { align-self:flex-start; background:rgba(3,8,15,.72); border-radius:10px; padding:6px 9px; font-size:12px; color:#e9f7ff; text-shadow:0 1px 2px #000; }
.plazaChatLine.system { color:#fff195; border:1px solid rgba(255,241,149,.28); }

#plazaJoystick {
  position:absolute; left:18px; bottom:max(20px, calc(env(safe-area-inset-bottom) + 6px)); width:128px; height:128px;
  border-radius:50%; border:3px solid rgba(255,255,255,.2); background:rgba(5,12,22,.3); pointer-events:auto; display:none; touch-action:none;
}
#plazaJoystickKnob { position:absolute; left:42px; top:42px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.82); box-shadow:0 0 20px rgba(100,220,255,.35); }
@media (pointer:coarse), (max-width:800px) {
  #plazaJoystick { display:block; }
  #plazaChatLog { left:12px; bottom:160px; width:min(320px,74vw); }
  #plazaInteract { bottom:92px; }
  #plazaIdentity { max-width:55vw; }
}

.plazaPanel {
  position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(0,5,12,.66); backdrop-filter:blur(9px); pointer-events:auto; overflow:auto;
}
.plazaPanel.active { display:flex; }
.plazaPanelCard {
  width:min(920px,96vw); max-height:min(820px,92vh); overflow:auto; border-radius:24px;
  background:linear-gradient(145deg,#10243b,#07121f 60%,#110d2a); border:2px solid rgba(255,255,255,.18);
  box-shadow:0 22px 65px rgba(0,0,0,.55); padding:20px; box-sizing:border-box;
}
.plazaPanelHeader { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.plazaPanelHeader h2 { margin:0; font-size:clamp(22px,5vw,38px); }
.plazaClose { border:0; border-radius:13px; min-width:44px; min-height:44px; background:#ff6074; color:#fff; font:900 20px Arial; cursor:pointer; }
.plazaTabs { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 14px; }
.plazaTab { border:1px solid rgba(255,255,255,.2); background:#142b43; color:#dceeff; border-radius:13px; padding:10px 13px; font-weight:900; cursor:pointer; }
.plazaTab.active { background:#fff36f; color:#111; }
.plazaTabPage { display:none; }
.plazaTabPage.active { display:block; }
.plazaGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:10px; }
.plazaCard { border:1px solid rgba(255,255,255,.15); border-radius:17px; padding:13px; background:rgba(255,255,255,.06); color:#fff; text-align:left; min-height:112px; cursor:pointer; }
.plazaCard:hover { background:rgba(255,255,255,.1); }
.plazaCard strong { display:block; font-size:15px; margin-bottom:4px; }
.plazaCard small { color:#aac9df; line-height:1.35; }
.plazaCard .pill { display:inline-block; margin-top:8px; padding:4px 8px; border-radius:999px; background:#172f4b; color:#8fe7ff; font-size:10px; font-weight:900; }
.plazaSettingRow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.plazaSettingRow input[type="text"], .plazaSettingRow select { width:min(430px,58vw); min-height:42px; border-radius:10px; border:1px solid #42617c; background:#06101b; color:#fff; padding:0 10px; font-size:16px; }
.plazaAction { border:0; border-radius:12px; min-height:44px; padding:10px 14px; background:#65e5ff; color:#06111b; font-weight:900; cursor:pointer; }
.plazaAction.secondary { background:#253d55; color:#e8f6ff; }

#plazaQuickChat, #plazaEmotePicker { align-items:flex-end; justify-content:flex-end; padding:0 12px 82px; background:transparent; backdrop-filter:none; pointer-events:none; }
#plazaQuickChat .plazaPanelCard, #plazaEmotePicker .plazaPanelCard { width:min(380px,92vw); max-height:58vh; pointer-events:auto; padding:14px; background:rgba(5,15,26,.95); }
.quickGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.quickGrid button { min-height:45px; border:0; border-radius:11px; background:#15324e; color:#fff; font-weight:800; cursor:pointer; }

#plazaWelcome { z-index:50; background:radial-gradient(circle at 50% 25%,rgba(66,177,255,.2),rgba(1,4,10,.96) 66%); }
#plazaWelcome .plazaPanelCard { width:min(720px,95vw); text-align:center; }
#plazaWelcome h1 { font-size:clamp(32px,8vw,64px); margin:0 0 6px; }
#plazaWelcome p { color:#bbd6e8; line-height:1.5; }
.avatarChoices { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:15px 0; }
.avatarChoice { width:86px; height:86px; border:3px solid transparent; border-radius:18px; background:#11243a; padding:5px; cursor:pointer; }
.avatarChoice.selected { border-color:#fff36d; background:#253959; }
.avatarChoice img { width:100%; height:100%; object-fit:contain; }
#plazaName { width:min(360px,80vw); min-height:48px; border-radius:13px; border:2px solid #4b6f8e; background:#050c15; color:#fff; padding:0 13px; font-size:18px; text-align:center; }
.welcomeActions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
#plazaWelcomeStatus { min-height:24px; color:#ffe881; font-weight:800; font-size:13px; }

#archiveReturn {
  position:fixed; z-index:10000; top:12px; left:50%; transform:translateX(-50%); display:none; min-height:46px; padding:0 16px;
  border:0; border-radius:15px; background:#fff36c; color:#111; font-weight:1000; cursor:pointer; box-shadow:0 7px 24px rgba(0,0,0,.5);
}
body.archive-mode #archiveReturn { display:block; }

#plazaEventBanner {
  position:absolute; left:50%; top:84px; transform:translateX(-50%) translateY(-15px); opacity:0; pointer-events:none;
  padding:13px 19px; max-width:min(720px,86vw); border-radius:16px; background:rgba(25,4,12,.92); border:2px solid #ff526f;
  color:#fff; font:1000 clamp(15px,3.5vw,23px)/1.15 "Trebuchet MS",Arial,sans-serif; text-align:center; box-shadow:0 12px 34px rgba(0,0,0,.45); transition:.25s;
}
#plazaEventBanner.active { opacity:1; transform:translateX(-50%) translateY(0); }

body.plaza-game-running #spaceboyPlaza { visibility:hidden; pointer-events:none; }

@media (prefers-reduced-motion:reduce) {
  #plazaInteract.active { animation:none; }
}

/* v12 accounts, friends, free chat */
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#plazaFreeChatForm{position:absolute;left:12px;bottom:max(16px,env(safe-area-inset-bottom));width:min(430px,48vw);display:flex;gap:6px;pointer-events:auto;z-index:4}
#plazaFreeChatForm input{min-width:0;flex:1;height:42px;border:2px solid rgba(142,220,255,.32);border-radius:13px;background:rgba(3,10,18,.91);color:#fff;padding:0 12px;font:700 14px/1 "Trebuchet MS",Arial,sans-serif;box-shadow:0 7px 18px rgba(0,0,0,.25)}
#plazaFreeChatForm input:disabled{opacity:.55;color:#aab7c2}
#plazaFreeChatForm button{min-width:65px;border:0;border-radius:12px;background:#71e7ff;color:#07131d;font:1000 12px/1 "Trebuchet MS",Arial,sans-serif;cursor:pointer}
#plazaFreeChatForm button:disabled{opacity:.45;cursor:not-allowed}
#plazaChatLog{bottom:max(66px,calc(env(safe-area-inset-bottom) + 50px));}
.accountSummary{border:1px solid rgba(119,228,255,.28);background:linear-gradient(135deg,rgba(30,88,112,.30),rgba(122,70,171,.16));border-radius:16px;padding:14px;margin:8px 0 12px}
.accountSummary strong{display:block;font-size:17px;color:#a9efff;margin-bottom:3px}.accountSummary small{display:block;color:#bad0df;line-height:1.4}
.accountActions,.friendSearch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.accountActions input,.friendSearch input,.plazaAuthFields input{flex:1;min-width:190px;min-height:44px;border-radius:12px;border:1px solid #43627a;background:#050e18;color:#fff;padding:0 11px;font-size:16px;box-sizing:border-box}
.phoneSectionTitle{margin:18px 0 8px;font-size:14px;letter-spacing:.10em;color:#b6e9ff}
.friendStack{display:grid;gap:8px}.friendCard{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.055);padding:10px 12px}.friendCard .friendInfo{min-width:0;flex:1}.friendCard strong,.friendCard small{display:block}.friendCard small{color:#9fbcd0;white-space:normal}.friendButtons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.friendButtons button{min-height:36px;border:0;border-radius:10px;padding:7px 10px;background:#25435d;color:#fff;font-weight:900;cursor:pointer}.friendButtons button.primary{background:#68e3ff;color:#07131c}.friendButtons button.warn{background:#8b3547}.friendButtons button:disabled{opacity:.45;cursor:not-allowed}.presenceDot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#607483;margin-right:5px}.presenceDot.online{background:#67efa2;box-shadow:0 0 9px rgba(103,239,162,.45)}
.socialSafetyNote{color:#9fc2d9;line-height:1.5;padding:10px 0;margin:6px 0}.plazaAuthBox{margin:15px auto 8px;padding:14px;border:1px solid rgba(126,224,255,.24);border-radius:18px;background:rgba(3,11,19,.52);text-align:left;max-width:610px}.plazaAuthTitle{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:9px}.plazaAuthTitle strong{font-size:16px;color:#9cecff}.plazaAuthTitle span{font-size:11px;color:#97b5c9}.plazaAuthFields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.authStatus{font-size:12px;color:#a9bfd0;text-align:center;margin-top:8px;min-height:18px}.authStatus.good{color:#83f4b1}.authStatus.bad{color:#ff9d9d}
.plazaCard .socialButtons{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.plazaCard .socialButtons button{border:0;border-radius:8px;padding:6px 8px;background:#23425e;color:#fff;font-size:10px;font-weight:900;cursor:pointer}.plazaCard .socialButtons button.warn{background:#7c3445}
@media (pointer:coarse),(max-width:800px){#plazaFreeChatForm{left:156px;right:10px;bottom:max(20px,calc(env(safe-area-inset-bottom) + 6px));width:auto}#plazaFreeChatForm input{height:46px}#plazaChatLog{left:12px;bottom:164px;width:min(340px,83vw)}#spacePhoneButton{bottom:76px}#plazaChatButton{bottom:76px}#plazaEmoteButton{bottom:76px}.plazaAuthFields{grid-template-columns:1fr}.friendCard{align-items:flex-start;flex-direction:column}.friendButtons{justify-content:flex-start}.accountActions input,.friendSearch input{min-width:min(100%,250px)}}
@media(max-width:430px){#plazaFreeChatForm{left:150px}#plazaFreeChatForm button{min-width:54px;padding:0 7px}.plazaPanelCard{padding:14px}.friendSearch{align-items:stretch}.friendSearch input{width:100%}.plazaAuthBox{padding:11px}}