:root {
  --cream: #fff8ec;
  --cream-2: #f6ead5;
  --ink: #3b2d22;
  --ink-soft: #7a6553;
  --green: #4f8f45;
  --green-2: #7bc26a;
  --terra: #c96f4a;
  --blue: #3f7fa6;
  --red: #d2564c;
  --shadow: 0 6px 24px rgba(60, 40, 20, 0.18);
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #9fc9e6;
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: var(--cream-2);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 14px;
  transition: transform .08s, background .15s, opacity .15s;
}
button:hover:not(:disabled) { background: #efdcbc; }
button:active:not(:disabled) { transform: scale(.95); }
button:disabled { opacity: .4; cursor: default; }

.panel {
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 2px solid #ead9bd;
}
.hidden { display: none !important; }

/* HUD ------------------------------------------------------------------ */
#hud {
  position: fixed; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}
#hud > * { pointer-events: auto; }
.hud-clock { padding: 8px 12px; }
.clock-main { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.speed { display: flex; gap: 4px; flex-wrap: wrap; }
.speed button { padding: 4px 8px; }
.speed button.active { background: var(--green); color: white; }
#btn-sleep { margin-left: 4px; }

.hud-verdor { padding: 8px 14px; min-width: 240px; flex: 0 1 340px; }
.verdor-label { font-weight: 600; font-size: 15px; margin-bottom: 6px; display: flex; justify-content: space-between; }
.verdor-bar { height: 14px; background: #e5d8c0; border-radius: 8px; overflow: hidden; }
#verdor-fill { height: 100%; width: 0; background: linear-gradient(90deg, #8fcf6a, #3f9a4a); border-radius: 8px; transition: width .8s ease; }

.hud-inv { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
#inv { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font-size: 14px; }
#inv .chip { background: var(--cream-2); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.hud-buttons { display: flex; gap: 4px; }

/* Etiquetas flotantes ---------------------------------------------------- */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.flabel {
  position: absolute; transform: translate(-50%, -100%);
  background: rgba(255, 248, 236, .92);
  border-radius: 999px; padding: 2px 8px;
  font-size: 15px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(60, 40, 20, .2);
  transition: opacity .2s;
}
.flabel.name { font-size: 13px; font-weight: 600; background: rgba(59, 45, 34, .85); color: #fff8ec; }
.flabel.door { font-weight: 600; animation: bob 0.9s ease-in-out infinite; }
.flabel.spot { font-size: 12px; font-weight: 600; }
.flabel.spot.ok { background: #e3f5d8; color: #2f6a28; }
.flabel.spot.bad { background: #fbe1dc; color: #9a3b2f; }
@keyframes bob { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, -125%); } }

/* Toasts ----------------------------------------------------------------- */
#toasts { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 20; pointer-events: none; width: min(560px, 92vw); }
.toast {
  background: rgba(59, 45, 34, .92); color: #fff8ec;
  padding: 8px 16px; border-radius: 999px; font-size: 15px; text-align: center;
  animation: toastIn .25s ease-out;
  box-shadow: var(--shadow);
}
.toast.out { opacity: 0; transform: translateY(-6px); transition: all .4s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

/* Tarjeta de planta ------------------------------------------------------ */
#plant-card {
  position: fixed; left: 12px; bottom: 12px; width: 330px; padding: 12px 14px 12px;
  z-index: 10;
}
.pc-close { position: absolute; right: 8px; top: 8px; padding: 2px 8px; background: transparent; }
.pc-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.pc-mood { font-size: 34px; }
.pc-nick { font-size: 22px; font-weight: 700; line-height: 1.1; }
.pc-sub { font-size: 13px; color: var(--ink-soft); }
.pc-bars { display: flex; flex-direction: column; gap: 5px; }
.bar-row { display: grid; grid-template-columns: 78px 1fr; align-items: center; font-size: 13px; }
.bar { position: relative; height: 12px; background: #eadcc5; border-radius: 6px; overflow: hidden; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width .3s; }
.bar .ideal { position: absolute; top: 0; bottom: 0; background: rgba(79, 143, 69, .28); border-left: 2px solid rgba(79, 143, 69, .6); border-right: 2px solid rgba(79, 143, 69, .6); z-index: 1; }
.bar .mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); left: 50%; z-index: 2; opacity: .5; }
#bar-water .fill { background: #5ea9e0; }
#bar-health .fill { background: #e0675a; }
#bar-growth .fill { background: #6dbb56; }
#bar-happy .fill { background: #f0b847; }
.pc-info { font-size: 13px; margin: 8px 0; line-height: 1.4; color: var(--ink-soft); }
.pc-info b { color: var(--ink); }
.pc-info .fit-ok { color: var(--green); font-weight: 600; }
.pc-info .fit-bad { color: var(--red); font-weight: 600; }
.pc-issues { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pc-issues span { background: #fbe1dc; color: #9a3b2f; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 500; }
.pc-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pc-actions button { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 18px; padding: 6px 2px; }
.pc-actions button span { font-size: 11.5px; font-weight: 500; }
.pc-actions button.hint { background: #dff1d4; box-shadow: inset 0 0 0 2px #8fcf6a; }

/* Mover ----------------------------------------------------------------- */
#move-hint { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 10px 14px; z-index: 12; display: flex; gap: 12px; align-items: center; font-weight: 500; white-space: nowrap; }
#move-hint .legend { font-size: 13px; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; white-space: nowrap; }
#move-hint i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
#move-hint i.ok { background: #6dcf5a; }
#move-hint i.bad { background: #e86a5a; }

/* Diálogo ---------------------------------------------------------------- */
#dialog {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(680px, calc(100vw - 24px));
  background: var(--cream); border-radius: 18px; border: 3px solid #e2cba6;
  box-shadow: 0 10px 40px rgba(60, 40, 20, .3);
  padding: 14px 20px 12px; z-index: 30; cursor: pointer;
}
.dlg-name {
  position: absolute; top: -16px; left: 18px;
  background: var(--terra); color: white; font-weight: 600;
  padding: 3px 14px; border-radius: 999px; font-size: 15px;
}
.dlg-text { font-size: 18px; line-height: 1.45; min-height: 52px; margin-top: 4px; }
.dlg-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dlg-choices button { text-align: left; font-size: 16px; padding: 8px 12px; background: #f3e4c9; }
.dlg-choices button:hover { background: #e8d2ab; }
.dlg-hint { text-align: right; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* Modal ------------------------------------------------------------------ */
#modal { position: fixed; inset: 0; background: rgba(40, 28, 18, .45); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; }
.modal-box { position: relative; width: min(640px, 100%); max-height: 86vh; overflow: auto; padding: 18px 22px; }
.modal-close { position: absolute; top: 10px; right: 10px; }
.modal-box h2 { margin: 0 0 10px; }
.modal-box h3 { margin: 16px 0 6px; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button.active { background: var(--green); color: white; }
.entry { background: var(--cream-2); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font-size: 15px; line-height: 1.4; }
.entry.done { opacity: .65; }
.entry .tag { font-size: 12px; border-radius: 999px; padding: 1px 8px; margin-left: 6px; background: #e5d8c0; }
.entry .tag.ok { background: #dff1d4; color: #2f6a28; }
.entry .tag.wait { background: #fff0c9; color: #8a6420; }
.guide-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 14px; }
.modal-box ul { padding-left: 20px; line-height: 1.6; }
.empty { color: var(--ink-soft); font-style: italic; }

/* Intro ----------------------------------------------------------------- */
#intro {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(255, 248, 236, .25), rgba(60, 40, 20, .45));
}
.intro-box { width: min(520px, 100%); padding: 26px 30px; text-align: center; }
.intro-box h1 { margin: 4px 0 0; font-size: 36px; color: var(--green); }
.intro-leaves { font-size: 40px; }
.intro-sub { margin: 0 0 14px; color: var(--terra); font-weight: 600; }
.intro-box p { line-height: 1.5; }
.intro-buttons { display: flex; gap: 10px; justify-content: center; margin: 18px 0 8px; flex-wrap: wrap; }
.intro-buttons button { font-size: 18px; padding: 10px 20px; background: var(--green); color: white; font-weight: 600; }
.intro-buttons button.secondary { background: var(--cream-2); color: var(--ink); }
.intro-small { font-size: 13px; color: var(--ink-soft); }

#fade { position: fixed; inset: 0; background: #141a30; opacity: 0; pointer-events: none; transition: opacity .9s; z-index: 45; }
#fade.on { opacity: 1; pointer-events: auto; }

#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; background: #9fc9e6; z-index: 60; }

/* Celular en vertical ----------------------------------------------------- */
@media (max-width: 600px) {
  #hud { top: 8px; left: 8px; right: 8px; gap: 6px; flex-wrap: wrap; }
  .hud-clock { padding: 6px 8px; flex: 1 1 auto; }
  .clock-main { font-size: 15px; margin-bottom: 4px; }
  .speed { gap: 3px; }
  .speed button { padding: 3px 7px; font-size: 13px; }
  #btn-sleep { margin-left: 0; }
  .hud-inv { padding: 6px 8px; gap: 4px; }
  #inv { font-size: 12px; gap: 4px; }
  #inv .chip { padding: 2px 7px; }
  .hud-buttons button { padding: 4px 8px; }
  #btn-journal .lbl { display: none; }
  .hud-verdor { order: 3; flex: 1 1 100%; min-width: 0; padding: 6px 10px; }
  .verdor-label { font-size: 13px; margin-bottom: 4px; }
  .verdor-bar { height: 10px; }
  #toasts { top: 132px; }
  .toast { font-size: 13px; padding: 6px 12px; border-radius: 14px; }
  #plant-card { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 10px 12px; max-height: 50vh; overflow-y: auto; }
  .pc-close { top: 4px; right: 4px; }
  .pc-head { margin-bottom: 4px; }
  .pc-mood { font-size: 26px; }
  .pc-nick { font-size: 18px; }
  .pc-sub { font-size: 12px; }
  .pc-bars { gap: 3px; }
  .bar { height: 10px; }
  .bar-row { font-size: 12px; grid-template-columns: 70px 1fr; }
  .pc-info { font-size: 12px; margin: 6px 0; }
  .pc-actions { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .pc-actions button { font-size: 17px; padding: 5px 0; }
  .pc-actions button span { font-size: 9.5px; }
  #dialog { bottom: 8px; padding: 14px 14px 8px; width: calc(100vw - 16px); }
  .dlg-text { font-size: 15px; min-height: 40px; }
  .dlg-choices button { font-size: 14px; padding: 7px 10px; }
  #move-hint { left: 8px; right: 8px; bottom: 8px; transform: none; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 10px; font-size: 14px; text-align: center; white-space: normal; }
  .modal-box { padding: 16px 14px; }
  .guide-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Celular en horizontal (pantalla bajita) ---------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  #hud { top: 6px; left: 8px; right: 8px; gap: 6px; flex-wrap: nowrap; align-items: stretch; }
  .hud-clock { padding: 4px 8px; display: flex; align-items: center; gap: 8px; }
  .clock-main { font-size: 14px; margin: 0; white-space: nowrap; }
  .speed { gap: 3px; flex-wrap: nowrap; }
  .speed button { padding: 2px 6px; font-size: 12px; }
  #btn-sleep { margin-left: 0; white-space: nowrap; }
  .hud-verdor { padding: 4px 10px; min-width: 120px; flex: 1 1 200px; display: flex; flex-direction: column; justify-content: center; }
  .verdor-label { font-size: 12px; margin-bottom: 3px; }
  .verdor-bar { height: 8px; }
  .hud-inv { padding: 4px 8px; flex-direction: row; align-items: center; gap: 6px; }
  #inv { font-size: 12px; gap: 4px; flex-wrap: nowrap; }
  #inv .chip { padding: 2px 7px; }
  .hud-buttons button { padding: 3px 7px; font-size: 13px; }
  #btn-journal .lbl { display: none; }
  #toasts { top: 50px; }
  .toast { font-size: 13px; padding: 5px 12px; border-radius: 14px; }
  #plant-card { top: 50px; bottom: 8px; left: 8px; width: 300px; padding: 8px 10px; overflow-y: auto; }
  .pc-close { top: 4px; right: 4px; }
  .pc-head { margin-bottom: 4px; }
  .pc-mood { font-size: 24px; }
  .pc-nick { font-size: 17px; }
  .pc-sub { font-size: 11.5px; }
  .pc-bars { gap: 3px; }
  .bar { height: 9px; }
  .bar-row { font-size: 12px; grid-template-columns: 70px 1fr; }
  .pc-info { font-size: 11.5px; margin: 5px 0; line-height: 1.3; }
  .pc-actions { gap: 4px; }
  .pc-actions button { font-size: 15px; padding: 3px 0; }
  .pc-actions button span { font-size: 10px; }
  #dialog { bottom: 6px; padding: 12px 16px 6px; width: min(620px, calc(100vw - 16px)); }
  .dlg-name { top: -14px; font-size: 13px; }
  .dlg-text { font-size: 15px; min-height: 36px; }
  .dlg-choices { gap: 4px; margin-top: 6px; }
  .dlg-choices button { font-size: 14px; padding: 5px 10px; }
  .modal-box { max-height: 92vh; padding: 12px 16px; }
  #modal { padding: 8px; }
  .intro-box { padding: 12px 20px; max-height: 94vh; overflow-y: auto; }
  .intro-box h1 { font-size: 26px; }
  .intro-leaves { font-size: 24px; }
  .intro-sub { margin-bottom: 6px; }
  .intro-box p { margin: 6px 0; font-size: 14px; }
  .intro-buttons { margin: 8px 0 4px; }
  .intro-buttons button { font-size: 16px; padding: 8px 18px; }
  #move-hint { bottom: 6px; padding: 6px 10px; font-size: 13px; }
}