/* everywheeeere */

@font-face{
  font-family: "Deer Diary";
  src: url("fonts/deer-diary.ttf") format("truetype");
  font-display: swap;
}

:root{
  --ink: #000; 
  --paper: #fff; 
  --muted: #555;
}

body{
  color:var(--ink);
  font-family: "Deer Diary", "Courier New", monospace;
  font-size: .65rem;   
  margin: 0; 
  padding: 2.5rem;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
  overflow: hidden;
}



/* garden — js renderField(), panBy() */

#viewport{ 
  position:fixed; 
  inset:0; 
  z-index:0; 
  overflow:auto; 
}

#field{ 
  position:relative; 
}

#patternLayer{ 
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%; 
  pointer-events:none; 
}



/* hot soil spots — js hotSpotPositions(), occupiedBoxes(), seedOccupiedBoxes(), nearestHotSpot() */

.hoversquare{
  position:absolute;
  width:140px;
  height:140px;
  border:1px solid #000;
  transform:translate(-50%,-50%);
  pointer-events:none;
  display:none;
}



/* cursor trail — js spawnTrailDot() */

.traildot{
  position:absolute; 
  top:0; 
  left:0;
  font-size:1.2rem; 
  line-height:1; 
  white-space:nowrap;
  pointer-events:none;
  -webkit-background-clip:text; 
  background-clip:text; 
  color:transparent;
  animation: trailFade 1.8s ease-out forwards;
}

@keyframes trailFade{
  0%{ opacity:.7; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(.5); }
}



/* top left - nav buttons — js showBuilder()/hideBuilder(), showSeedList()/hideSeedList() */

.navstack{ 
  position: fixed; 
  top: 2.5rem; 
  left: 2.5rem; 
  z-index: 3; 
  display: flex; 
  flex-direction: column; 
  gap: .6rem; 
}

.navbtn{
  width:2.3rem; 
  height:2.3rem; 
  border:1px solid #000;
  background:var(--paper); 
  color:var(--ink); 
  padding:0;
  display:flex; 
  align-items:center; 
  justify-content:center;
  cursor:pointer; 
  font-family:inherit; 
  font-size:inherit; 
  text-align:center;
  appearance:none; 
  -webkit-appearance:none; 
  outline:none; 
  box-shadow:none;
}

.navbtn:active{ 
  background:#000; 
  color:var(--paper); 
}

.navbtn[data-open="true"]{ 
  background:#000; 
  color:var(--paper); 
}

#navToggleBtn{ 
  font-size:1.6rem; 
}

#seedListToggleBtn{ 
  font-size:1.6rem; 
}



/* top center - clickable tags — js renderTagDisplay(), pressTag()/checkTagPresses() */

.tagdisplay{
  position: fixed; 
  top: 2.5rem; 
  left: 50%; 
  transform: translateX(-50%); 
  z-index: 3;
  display: flex; 
  gap: .5rem;
}

.tagdisplay span{
  display: inline-block; 
  border: 1px solid #000; 
  border-radius: 999px; 
  background: var(--paper); 
  color: var(--ink);
  padding: .5rem .9rem;
  font-family: inherit;
  font-size: inherit;
}

.tagdisplay span:hover{ 
  box-shadow: 0 0 10px 3px var(--glow, transparent); 
}



/* top right - visitor counter — js renderVisitorCount() */

.visitorcount{
  position: fixed;
  top: 2.5rem;
  right: 2.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid #000;
  background: var(--paper);
  color: var(--ink);
  padding: .5rem .8rem;
  cursor: pointer;
}

.visitorcount .dot{ 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: #3ab704; 
  flex-shrink: 0; 
}



/* bottom left - toggle bar — js applyViewToggles(), toggleView() */

.viewtoggles{
  position:fixed; 
  bottom:2.5rem; 
  left:2.5rem; 
  z-index:3;
  display:flex; 
  gap:2.2rem; 
  align-items:center;
}

@media (max-width:768px){
  .viewtoggles{ 
    flex-direction:column; 
    align-items:flex-start; 
    gap:.6rem; 
  }
}

.toggle{
  display:flex; 
  align-items:center; 
  gap:.5rem; 
  border:none; 
  background:none;
  cursor:pointer; 
  font-family:inherit; 
  font-size:inherit; 
  color:var(--ink); 
  padding:0;
}

.toggle .switch{
  position:relative; 
  width:24px; 
  height:12px; 
  border-radius:999px;
  border:1px solid #000; 
  background:#000; 
  flex-shrink:0;
}

.toggle .knob{ 
  position:absolute; 
  top:1px; 
  left:1px; 
  width:10px; 
  height:10px; 
  border-radius:50%; 
  background:var(--paper); 
}

.toggle[data-on="true"] .switch{ 
  background:var(--paper); 
}

.toggle[data-on="true"] .knob{ 
  left:12px; 
  background:#000; 
}



/* bottom right - volume meter + teleporation hint — js updateVolumeMeter() */

.volumemeter{
  position:fixed;
  bottom:2.5rem;
  right:2.5rem;
  z-index:3;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  justify-content:space-between;
  width:1.225rem;
  height:7.2rem;
  padding:.2rem;
  border:1px solid #000;
  background:var(--paper);
  box-sizing:border-box;
}

.volumemeterhint{
  position:absolute;
  bottom:.2rem;
  right:100%;
  margin-right:1.6rem;
  white-space:nowrap;
  color:var(--soil-color, transparent);
  text-shadow:
    0 0 4px var(--glow, transparent),
    0 0 8px var(--glow, transparent);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease-out, visibility .15s;
}

.volumemeter:hover .volumemeterhint{
  opacity:1;
  visibility:visible;
}

.volumemeter .bar{
  flex:0 0 .3rem;
  width:100%;
  background:#000;
  opacity:.15;
  transition: opacity .12s ease-out;
}

.volumemeter .bar[data-active="true"]{
  opacity:1;
}



/* seed slots — js renderSeedSlots() */

#seedSlots{ 
  position:absolute; 
  inset:0; 
  pointer-events:none; 
}

.seedslot{ 
  position:absolute; 
  width:10px; 
  height:10px; 
  transform:translate(-50%,-50%); 
  pointer-events:auto; 
  cursor:pointer; }

.seedslot:hover{ 
  filter: 
    drop-shadow(0 0 6px var(--glow, transparent)); 
}

.seedslot .dot{ 
  position:absolute; 
  inset:0; 
  border-radius:50%; 
  border:1px 
    solid #000; 
}

.seedslot .txt{
  position:absolute;
  left:.975rem;
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
}

@keyframes seedTextPulse{ 0%,100%{ transform:translateY(-50%) scale(1);} 50%{transform:translateY(-50%) scale(1.1); } }
@keyframes seedGradientPulse{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }

.seedslot.empty .txt{
  background:linear-gradient(90deg, var(--text-color,#fff) 0%, var(--soil-color,#fff) 50%, var(--text-color,#fff) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: seedTextPulse 1.6s ease-in-out infinite, seedGradientPulse 2.4s linear infinite;
}



/* roots — js renderConnections() */

#connectionsLayer{ 
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%; 
  pointer-events:none; 
}



/* plant slots — js renderPlantSlots(), canvasPos()/redrawPaths() */

#plantSlots{ 
  position:absolute; 
  inset:0; pointer-events:none; 
}

.plantmark{
  position:absolute; 
  width:140px; 
  height:140px; 
  transform:translate(-50%,-50%);
  cursor:grab; 
  pointer-events:auto;
}

.plantmark:active{
  cursor:grabbing;
}

.plantmark:hover .labeldot,
.plantmark:hover .txt{
  filter: drop-shadow(0 0 6px var(--glow, transparent));
}

.plantmark svg{ 
  width:100%; 
  height:100%; 
  overflow:visible; 
}

.plantmark .labeldot{
  position:absolute; 
  top:50%; 
  left:100%; 
  transform:translateY(-50%);
  margin-left:.4rem; 
  width:10px; 
  height:10px; 
  border-radius:50%; 
  border:1px solid #000;
  box-sizing:border-box;
}

.plantmark .txt{
  position:absolute;
  top:50%;
  left:100%;
  transform:translateY(-50%);
  margin-left:1.375rem;
  white-space:nowrap; pointer-events:none;
}

.plantmark.playing .txt{
  background:linear-gradient(90deg, var(--text-color,#fff) 0%, var(--seed-color,#fff) 50%, var(--text-color,#fff) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: seedTextPulse 1.6s ease-in-out infinite, seedGradientPulse 2.4s linear infinite;
}

@keyframes plantPinPulse{
  0%,100%{ background:var(--seed-color,currentColor); }
  50%{ background:var(--dot-color,currentColor); }
}

.plantmark.pinned .labeldot{
  animation:plantPinPulse 2s ease-in-out infinite;
}



/* modal styling — js (hideBuilder, hideSeedList, hidePlantModal, hideSeedModal, hideGardenInfo, hideConfirmDialog) */

.modal{
  width:100%; 
  max-width:480px; 
  max-height:85vh; 
  overflow:auto;
  background:var(--paper); 
  color:var(--ink); 
  border:2px solid #000; 
  border-radius:0;
}

.modal .cardbody{ 
  padding: 1.6rem; 
}

.modal h2{ 
  margin: 0 0 .2rem; 
  font-size: inherit; 
}

.modal .sub{ 
  margin-bottom: 1.2rem; 
}

.modal .actions{ 
  margin-top:1.5rem; 
  justify-content:flex-end; 
}

.titlebar{
  height:18px; 
  border-bottom:2px solid #000; 
  display:flex; 
  align-items:center; 
  gap:.4rem; 
  padding:0 6px;
  background-image: repeating-linear-gradient(#000 0 1px, transparent 1px 3px);
}

.titlebar .closebox{ 
  width:9px; 
  height:9px; 
  border:1px solid #000; 
  background:var(--paper); 
  flex-shrink:0; 
}

.cardbody{ 
  padding:.8rem .9rem; 
}

.sub{ 
  color:var(--muted); 
  margin:0 0 1.6rem; 
  line-height:1.4; 
}

label{ 
  display:block; 
  color:var(--muted); 
  margin-bottom:.3rem; 
}

.cardtitle{ 
  color:var(--ink); 
  margin-bottom:.5rem; 
}

.row{ 
  margin-bottom:.8rem; 
}

input[type="text"], select{
  width:100%; 
  padding:.4rem .5rem; 
  border-radius:0; 
  border:1px solid #000;
  background:var(--paper); 
  color:var(--ink); 
  font-family:inherit; 
  font-size:inherit;
  box-sizing:border-box;
}



/* save and cancel buttons — js (pSaveBtn/pCancelBtn, sSaveBtn/sCancelBtn, confirmOkBtn/confirmCancelBtn) */

button.primary{
  padding:.45rem 1rem; 
  border-radius:999px; 
  border:1px solid #000; 
  background:#000; 
  color:var(--paper);
  font-family:inherit; 
  font-size:inherit; 
  cursor:pointer; 
  font-weight:600;
}

button.primary:active{ 
  background:var(--paper); 
  color:#000; 
}
button.primary:disabled{ 
  opacity:.35; 
  cursor:not-allowed; 
}

button.ghost{
  background:none; 
  border:1px solid #000; 
  color:var(--ink); 
  border-radius:999px;
  padding:.3rem .8rem; 
  cursor:pointer; 
  font-size:inherit; 
  font-family:inherit;
}

button.ghost:disabled{ 
  opacity:.35; 
  cursor:not-allowed; 
}

button.easteregg{
  background:none; 
  border:0px solid #000; 
  color:var(--ink); 
  border-radius:999px;
  padding:.3rem .8rem; 
  cursor:pointer; 
  font-size:inherit; 
  font-family:inherit;
}



/* loading scrim — js preloadGardenAudio() */

.scrim{
  display:none; 
  position:fixed; 
  inset:0;
  align-items:center; 
  justify-content:center; 
  padding:1.5rem; 
  z-index:2;
}

.scrim.open{
  display:flex;
}

#entryScrim{
  z-index:10;
}

.entryprogress{
  border:1px solid #000;
  height:.6rem;
  overflow:hidden;
}

.entryprogressbar{
  height:100%;
  width:0%;
  background:#000;
  transition:width .15s ease-out;
}



/* season settings + seed list — js renderTagBank(), applyColors(), renderPatternBank(), renderSeedList() */

.card{
  position:fixed;
  top:2.5rem;
  left:5.4rem;
  z-index:2;
  width:100%;
  max-width:250px;
  background:var(--paper);
  color:var(--ink);
  border:2px solid #000;
  border-radius:0;
}

#seedListCard{
  top:5.4rem;
}

#seedListItems{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  max-height:400px;
  overflow-y:auto;
}

.seedlistitem{
  position:relative;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:.5rem;
  border:1px solid #000;
  padding:.4rem .5rem;
}

.seedlistprogress{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background:rgba(0,0,0,.08);
  pointer-events:none;
}

.seedlistitem span{ 
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap; 
  flex:1; 
}

.seedlistitem a{
  color:var(--ink);
  flex-shrink:0;
  text-decoration:none;
  font-size:1.3em;
  line-height:1;
}

.seedlistplay,
.seedlistdelete{
  border:none;
  background:none;
  padding:0;
  margin:0;
  flex-shrink:0;
  cursor:pointer;
  font-size:inherit;
  line-height:1;
}



/* tags — js renderTagBank() (settings), renderSampledFromBank() (plant modal) */

.tagbank{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:.3rem; 
  margin-bottom:.5rem; 
}

.tag{
  padding: .3rem .8rem; 
  border-radius: 999px; 
  border: 1px solid #000;
  background: var(--paper); 
  color: var(--ink); 
  font-family: inherit; 
  font-size: inherit; 
  cursor: pointer;
}

.tag[data-selected="true"]{ 
  background:#000; 
  color:var(--paper); 
}

.tag:disabled{ 
  opacity:.35; 
  cursor:not-allowed; 
}

.tagcustom{ 
  display:flex; 
  gap:.4rem; 
  align-items:stretch; 
}

.tagcustom input{ 
  flex:1; 
}

.tagcustom button{
  padding:.4rem .7rem; 
  border-radius:999px; 
  border:1px solid #000; 
  background:var(--paper); 
  color:var(--ink);
  font-family:inherit; 
  font-size:inherit; 
  cursor:pointer;
}



/* colors — js applyColors() */

.colorgrid{ 
  display:grid; 
  grid-template-columns:1fr; 
  gap:.5rem; 
}

.colorpick span{ 
  color:var(--muted); 
}

.colorpick{ 
  display:flex; 
  flex-direction:column; 
  align-items:flex-start; 
  gap:.25rem; 
}

.colorpick input[type="color"]{
  width:100%; 
  height:24px; 
  border:1px solid #000; 
  border-radius:0; 
  background:none; 
  padding:2px; 
  cursor:pointer;
}



/* field pattern picker — js renderPatternBank() */

.patternbank{ 
  display:flex; 
  gap:.35rem; 
  margin-bottom:.7rem; 
}

.patternbtn{
  flex:1; 
  padding:.4rem .3rem; 
  border:1px solid #000; 
  background:var(--paper); 
  color:var(--ink);
  font-family:inherit; 
  font-size:inherit; 
  cursor:pointer; 
  text-align:center; 
  border-radius:0;
}

.patternbtn[data-selected="true"]{ 
  background:#000; 
  color:var(--paper); 
}



/* scale slider — js fieldScale */

.scalerow{ 
  display:flex; 
  align-items:center; 
  gap:.5rem; 
}

.scalerow input[type="range"]{ 
  flex:1; 
  accent-color:#000; 
}
.scalerow span{ 
  color:var(--muted); 
  width:2.4rem; 
  text-align:right; 
}

.actions{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  margin-top:1rem;
}

.copyrow{
  display:flex;
  gap:.4rem;
  align-items:stretch;
  margin-bottom:1.6rem;
}
.copyrow input{
  flex:1;
  min-width:0;
}
.copyrow button{
  white-space:nowrap;
}



/* visitor info — js showGardenInfo()/hideGardenInfo() */

.card.right{
  left:auto;
  right:2.5rem;
  top:5.4rem;
}

#gardenInfoCard .cardbody{
  max-height:70vh;
  overflow-y:auto;
}



/* file label — js validateSeed(), validatePlant() */

.filelabel{
  display:flex; 
  align-items:center; 
  gap:.5rem; 
  padding:.5rem .7rem;
  border:1px dashed #000; 
  cursor:pointer; 
  font-size:inherit; 
  color:var(--muted); 
  margin-bottom:.2rem;
}

.filelabel input{ 
  display:none; 
}

.filelabel.has-file{ 
  color:#000; 
}



/* plant drawing space — js openPlantModal()/openPlantEditModal() */

#pCanvas{ 
  border:2px solid #000; 
  cursor:crosshair; 
  touch-action:none; 
  background:var(--paper); 
}