/* Living botanical world. Shared presentation for exploration, care and creation. */
:root {
  --paper:#091b21; --paper-2:#112c31; --ink:#f6f1e4; --muted:#b2c6c4;
  --panel:rgba(14,36,40,.96); --panel-2:#19393c; --line:rgba(196,219,202,.20);
  --accent:#f0cb86; --accent-ink:#292719;
}
body { --panel-2:#1b393c; --field:#102b30; --green-1:#c1d9ad; }
#topbar {
  top:14px; left:18px; right:18px; min-height:62px; padding:12px 20px;
  border:1px solid rgba(208,224,207,.22); border-radius:20px;
  background:linear-gradient(120deg,rgba(16,37,40,.96),rgba(13,27,36,.91));
  box-shadow:0 12px 38px #04151938,inset 0 1px #f5f0d90a;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
#homeBtn { font-size:23px; letter-spacing:-.045em; }
#homeBtn::before { width:29px; height:29px; margin-right:10px; }
#crumb { color:#afc3bd; padding-left:14px; border-left:1px solid var(--line); }
#topActions { gap:8px; }
#topActions button { min-height:38px; border-radius:12px; }
#topActions .ghost { background:transparent; border-color:transparent; }
#topActions .ghost:hover { background:#e6efd812; border-color:#d4dec732; }
button.primary, .primary {
  background:linear-gradient(155deg,#f8dfaa,#e8bd71);
  color:#292619; border:1px solid #f5dba3;
  box-shadow:inset 0 1px #fff4d6a0,0 3px 10px #091b2120;
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
  outline:2px solid #f6d99c; outline-offset:4px;
}
#spaceBtn { top:94px; left:22px; background:rgba(17,43,45,.90); border-radius:12px; }
.panel { top:94px; right:18px; bottom:18px; border-radius:22px; }
body .panel,body #createModal,body .gmPicker,body .gmEnding,body .gmHud {
  background:radial-gradient(ellipse at 0 0,#3e605238,transparent 55%),linear-gradient(145deg,#173338fa,#10262dfa);
  border-color:#c8d9c52e;
}
.regionHead h2 { font-size:38px; font-weight:500; letter-spacing:-.04em; }
.regionKind { color:#edce93; }
.villageRow { background:#c3d5b90a; border:1px solid #bfd4c214; padding:15px; }
.villageRow:hover { border-color:#e5ca9360; background:#ead59b10; }
#liveHud,#interactBar,.bmHeader,.bmCatalog,.bmToolbar,#lotBar {
  background:linear-gradient(135deg,#1a373bee,#102830f5);
  border-color:#bdcfc32e; box-shadow:0 12px 32px #06191e28,inset 0 1px #f7eed60a;
}
#interactBar { border-radius:20px; }
#liveHud { border-radius:20px; }
.bmItem,.gmCard { background:linear-gradient(150deg,#cad8bd0d,#aacbd104); border-color:#bfd1c425; }
.bmItem:hover,.gmCard:hover { border-color:#e6cd9766; }
#stageHint { background:#102a2dd9; border-color:#ced9c524; font-size:10px; }
#welcomeCard { width:380px; left:5vw; bottom:16vh; padding:28px 0; }
#welcomeTitle { font-size:clamp(42px,4.4vw,68px); font-weight:400; line-height:1.03; letter-spacing:-.055em; margin-bottom:24px; text-wrap:balance; }
#welcomeCard p { max-width:300px; font-size:14px; color:#b8ccce; line-height:1.8; }
.welcomeEyebrow { color:#e8d29d; letter-spacing:.18em; font-size:9px; margin-bottom:24px; }
.welcomeActions { gap:12px; }
.welcomeActions button { min-height:48px; padding:0 18px; border-radius:14px; }
.welcomeFoot { color:#99b2b5; font-size:10px; margin-top:20px; }
#loading { background:radial-gradient(ellipse at 50% 38%,#244851,#0c202b 52%,#07131d); }
.loadMark { font-weight:400; letter-spacing:-.04em; }
.loadTag { color:#b5c9c4; }
body .plLabelLayer .plLabel { background:#102a2ee6; border-color:#d0ddbe38; }
body .plLabelLayer .plLabel-region { font-weight:500; padding:8px 15px 8px 11px; }
@media (max-width:1100px) {
  #welcomeCard { width:290px; left:28px; bottom:12vh; }
  #welcomeTitle { font-size:43px; }
  #crumb { display:none; }
  #topbar { padding:10px 14px; }
}
@media (max-width:720px) {
  #topbar { top:8px; left:8px; right:8px; min-height:54px; border-radius:16px; padding:9px 11px; gap:8px; }
  #homeBtn { font-size:18px; }
  #homeBtn::before { width:22px; height:22px; margin-right:6px; }
  #topActions { gap:3px; }
  #topActions button { min-height:36px; padding:6px 9px; font-size:11px; }
  #spaceBtn { top:calc(var(--clTopbarH,96px) + 22px); left:12px; }
  .panel { top:auto; right:0; bottom:0; max-height:calc(100dvh - var(--clTopbarH,96px) - 28px); border-radius:22px 22px 0 0; }
  #welcomeCard { left:14px; right:14px; bottom:58px; width:auto; padding:20px; background:linear-gradient(140deg,#183a3ded,#102830f5); border-color:#d0d7bd30; border-radius:22px; }
  #welcomeTitle { font-size:35px; margin-bottom:18px; }
  .welcomeEyebrow { margin-bottom:12px; font-size:8px; }
  .welcomeActions button { min-height:44px; padding:0 14px; }
  .welcomeFoot { font-size:9px; margin-top:14px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; }
  #welcomeCard,.panel,button { transition:none!important; }
}


#connectionStatus { font:500 11px/1.3 Inter,system-ui; padding:6px 10px; border:1px solid #ecd29b55; border-radius:20px; color:#f6deb1; background:#173a3b; }
#connectionStatus[hidden] { display:none; }
@media(max-width:750px) { #connectionStatus { position:fixed; top:calc(var(--clTopbarH,100px) + 8px); left:14px; right:14px; text-align:center; z-index:80; } }

/* Clearer native-size controls without an automatic full-screen pet card. */
body .hudNeedLabel { font-size:10px; letter-spacing:.015em; }
body .hudStage,body .hudWant { font-size:11px; }
body .hudRelBtn { min-height:24px; }
body .hudNotifBtn { width:36px; height:36px; }
body .interactLabel { font-size:11px; }
.bpHelp { font-size:12px; color:var(--muted); margin:6px 0; max-width:560px; }
.bpHelp summary { cursor:pointer; min-height:28px; color:var(--ink); }
.bpHelp p { margin:8px 0; line-height:1.5; }
@media(max-width:720px) {
  body #topbar { flex-wrap:wrap; }
  body #brand { width:100%; flex:1 1 100%; gap:8px; align-items:center; }
  body #homeBtn { font-size:17px; flex:1; min-width:0; white-space:nowrap; }
  body #myPetBtn { min-width:0; max-width:43%; padding:5px 8px; }
  body .myPetName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body #topActions { width:100%; flex:1 1 100%; flex-wrap:nowrap; gap:6px; }
  body #topActions > button { min-height:44px; font-size:12px; }
  body #accountBtn { flex:1; min-width:0; max-width:none; overflow:hidden; text-overflow:ellipsis; }
  body #menuBtn { flex:0 0 60px; }
  body #siteMenu { width:min(300px,calc(100vw - 40px)); max-height:65dvh; overflow:auto; }
  .mobileMenuActions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; border-bottom:1px solid var(--line); }
  .mobileMenuActions button { min-height:44px!important; font-size:13px!important; }
  .mobileMenuActions #audioPanel { position:static; grid-column:1/-1; width:auto; }
  body #spaceBtn { top:calc(var(--clTopbarH,106px) + 20px); }
  body .hudNeedLabel { font-size:9px; }
  body .hudNeedCell { min-height:44px; }
  body .hudNotifBtn { width:44px; height:44px; }
}

body #quickActionsBar { gap:6px; }
body .qaBtn { flex-direction:row; gap:6px; padding:7px 10px; min-height:44px; background:#153437ed; border:1px solid #c7d5bc40; border-radius:12px; }
body .qaCircle { width:24px; height:24px; border:0; box-shadow:none; background:none; }
body .qaCircle .cli { width:22px; height:22px; }
body .qaLabel { font-size:11px; letter-spacing:0; text-transform:none; }
@media(max-width:390px) { body .qaBtn { padding:6px 8px; gap:4px; } }

body:has(.overlay:not([hidden])) #cinema { visibility:hidden; }
body #quickActionsBar { flex-direction:column-reverse; align-items:center; bottom:calc(140px + var(--clHudLift,0px)); left:calc(50% + 83px); }
body #streetHomeBtn { left:calc(50% - 83px); min-height:44px; }
.qaToggle { pointer-events:auto; min-height:44px; padding:7px 12px; color:var(--ink); background:#153437ed; border:1px solid #c7d5bc40; border-radius:12px; white-space:nowrap; }
.qaCommandList { display:flex; gap:6px; pointer-events:auto; padding:8px; background:#153437f5; border:1px solid var(--line); border-radius:14px; transform:translateX(-83px); }
body #quickActionsBar .qaCircle { width:24px; height:24px; min-width:24px; border:0; box-shadow:none; background:none; }
body #quickActionsBar .qaCircle .cli { width:22px; height:22px; }
@media(max-width:720px) {
  body #liveHud { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px; }
  body #liveHud .hudPortraitCol { min-width:0; gap:8px; grid-column:1; grid-row:1; }
  body #liveHud .hudPortraitWrap { width:44px; height:44px; }
  body #liveHud .hudNameRow { font-size:13px; max-width:130px; }
  body #liveHud .hudRightCol { grid-column:2; grid-row:1; padding:0; gap:5px; border:0; margin:0; }
  body #liveHud .hudWeather { display:none; }
  body #liveHud .hudClock { font-size:12px; }
  body #liveHud .hudNeedsCol { grid-column:1/-1; grid-row:2; }
  body #liveHud .hudQueueCol { grid-column:1/-1; grid-row:3; }
  body #liveHud .hudQueueCol:not(:has(.hudQueueSlot)) { display:none; }
  body #liveHud .hudQueueEmpty { display:none; }
  body #liveHud .hudNeedLabel { display:block; font-size:8px; opacity:1; }
  body #liveHud .hudNeedCell { min-height:40px; }
  body #quickActionsBar .qaBtn { padding:6px; flex-direction:column; min-width:58px; }
  body #quickActionsBar .qaCommandList { max-width:calc(100vw - 24px); }
  body #stageHint { display:none; }
}

body #hudName { background:none; border:0; color:inherit; font:inherit; padding:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }