/*******************************************************************************
*                                                                              *
*                                 GardenPlanet                                 *
*                                                                              *
*******************************************************************************/

canvas { display:block; width:100%; height:100%; cursor:grab }
#Canvas  { position:relative; z-index:1; }
canvas.dragging { cursor:grabbing }
canvas.hovering { cursor:pointer }

#ToolTip {
  position:        fixed;
  bottom:          28px;
  left:            50%;
  transform:       translateX(-50%);
  background:      rgba(10, 18, 34, 0.90);
  border:          1px solid rgba(120,180,255,0.32);
  border-radius:   13px;
  padding:         14px 24px;
  color:           #e8f4ff;
  font:            14px/1.55 system-ui, sans-serif;
  max-width:       320px;
  text-align:      center;
  cursor:          pointer;
  user-select:     none;
  display:         none;
  box-shadow:      0 6px 30px rgba(0,0,0,0.55);
  backdrop-filter: blur(7px);
  z-index:         10;
}
#ToolTip.visible { display:block }
#ToolTip strong {
  display:       block;
  font-size:     15px;
  font-weight:   700;
  margin-bottom: 5px;
  color:         #ffe082;
}
#ToolTip .Hint {
  display:    block;
  margin-top: 7px;
  font-size:  11px;
  opacity:    0.55;
  color:      #aaddc8;
}

#LoadingOverlay {
  position:       fixed;
  bottom:         22px;
  left:           50%;
  transform:      translateX(-50%);
  background:     rgba(10, 18, 34, 0.82);
  border:         1px solid rgba(120,180,255,0.25);
  color:          #c8e8d8;
  padding:        7px 20px;
  border-radius:  20px;
  font:           600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  z-index:        20;
  pointer-events: none;
  animation:      loadingPulse 1.3s ease-in-out infinite;
}
@keyframes loadingPulse {
  0%, 100% { opacity: 0.95; }
  50%       { opacity: 0.35; }
}

#EditButton {
  position:        fixed;
  top:             12px;
  right:           12px;
  width:           38px;
  height:          38px;
  background:      rgba(10,18,34,0.85);
  border:          1px solid rgba(120,180,255,0.35);
  border-radius:   10px;
  color:           #e8f4ff;
  font-size:       17px;
  cursor:          pointer;
  z-index:         20;
  display:         flex;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(6px);
  box-shadow:      0 3px 12px rgba(0,0,0,0.4);
}
#EditButton:hover { background: rgba(30,50,80,0.92) }

#LayoutPanel {
  position:        fixed;
  top:             12px;
  right:           12px;
  width:           380px;
  background:      rgba(10,18,34,0.93);
  border:          1px solid rgba(120,180,255,0.32);
  border-radius:   13px;
  color:           #e8f4ff;
  font:            13px/1.5 system-ui, sans-serif;
  z-index:         20;
  display:         none;
  backdrop-filter: blur(8px);
  box-shadow:      0 6px 30px rgba(0,0,0,0.55);
}
#LayoutPanel.visible { display: block }

#LayoutHeader {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         9px 13px 8px;
  border-bottom:   1px solid rgba(120,180,255,0.18);
  font-weight:     600;
  font-size:       13px;
  color:           #aaddc8;
  letter-spacing:  0.03em;
}
#CloseButton {
  background: none;
  border:     none;
  color:      #e8f4ff;
  font-size:  18px;
  cursor:     pointer;
  padding:    0 2px;
  opacity:    0.7;
  line-height: 1;
}
#CloseButton:hover { opacity: 1 }

#LayoutToolbar {
  display:       flex;
  gap:           5px;
  padding:       9px 12px;
  border-bottom: 1px solid rgba(120,180,255,0.12);
  position:      relative;
}
#LayoutToolbar button,
#LayoutToolbar label {
  flex:            0 0 auto;
  width:           34px;
  height:          32px;
  background:      rgba(255,255,255,0.08);
  border:          1px solid rgba(120,180,255,0.22);
  border-radius:   7px;
  color:           #e8f4ff;
  font-size:       17px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  user-select:     none;
}
#LayoutToolbar button:hover,
#LayoutToolbar label:hover  { background: rgba(255,255,255,0.16) }
#LayoutToolbar button:disabled {
  opacity: 0.35;
  cursor: default;
}
#LAddWrap { position: relative }

#CreationDropdown {
  position:    absolute;
  top:         38px;
  left:        0;
  min-width:   140px;
  background:  rgba(10,18,34,0.97);
  border:      1px solid rgba(120,180,255,0.30);
  border-radius: 9px;
  box-shadow:  0 6px 20px rgba(0,0,0,0.55);
  z-index:     30;
  display:     none;
  overflow:    hidden;
}
#CreationDropdown.visible { display: block }
#CreationDropdown button {
  display:    block;
  width:      100%;
  background: none;
  border:     none;
  color:      #e8f4ff;
  font:       13px/1 system-ui, sans-serif;
  padding:    9px 14px;
  text-align: left;
  cursor:     pointer;
  border-radius: 0;
  height:     auto;
  flex:       none;
}
#CreationDropdown button:hover { background: rgba(255,255,255,0.1) }

#LayoutProps {
  padding:    10px 14px 14px;
  max-height: 390px;
  overflow-y: auto;
}
#noSelectionMessage {
  color:      rgba(200,220,255,0.45);
  font-style: italic;
  font-size:  12px;
  text-align: center;
  margin:     8px 0;
}
.prop-kind {
  font-size:    12px;
  color:        #aaddc8;
  margin-bottom:8px;
  display:      flex;
  justify-content: space-between;
}
.prop-kind strong { color: #ffe082 }
.prop-row {
  display:       grid;
  grid-template-columns: 100px 1fr;
  align-items:   center;
  gap:           6px;
  margin-bottom: 6px;
}
.prop-row span {
  font-size:  12px;
  color:      rgba(200,220,255,0.75);
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}
.prop-row input {
  background:   rgba(255,255,255,0.09);
  border:       1px solid rgba(120,180,255,0.25);
  border-radius:5px;
  color:        #e8f4ff;
  font:         12px system-ui, sans-serif;
  padding:      4px 7px;
  width:        100%;
}
.prop-row input:focus {
  outline: none;
  border-color: rgba(120,180,255,0.6);
}
.prop-row.has-slider {
  grid-template-columns: 100px 1fr 62px;
}
.prop-row.has-slider input[type=range] {
  padding:      0;
  height:       18px;
  background:   transparent;
  border:       none;
  border-radius:0;
  accent-color: rgba(120,180,255,0.9);
  cursor:       pointer;
  width:        100%;
}
.prop-row.has-slider input[type=number] {
  padding: 4px 5px;
}
.prop-row input[type=checkbox] {
  width:        18px;
  height:       18px;
  padding:      0;
  background:   transparent;
  border:       none;
  cursor:       pointer;
  accent-color: rgba(120,180,255,0.9);
  justify-self: start;
}
.prop-row input[type=color] {
  padding:       2px 3px;
  height:        28px;
  width:         100%;
  cursor:        pointer;
  border-radius: 5px;
}
.prop-row select {
  background:    rgba(255,255,255,0.09);
  border:        1px solid rgba(120,180,255,0.25);
  border-radius: 5px;
  color:         #e8f4ff;
  font:          12px system-ui, sans-serif;
  padding:       4px 7px;
  width:         100%;
  cursor:        pointer;
}
.prop-row select:focus { outline:none; border-color:rgba(120,180,255,0.6) }
.prop-locale-head {
  font-size:      11px;
  color:          rgba(120,180,255,0.65);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin:         10px 0 4px;
  padding-bottom: 3px;
  border-bottom:  1px solid rgba(120,180,255,0.15);
}