/* Soft cotton, enamel and honey-coloured wood, shared by all game panels. */
:root {
  --cream: #fff9e9; --cream-2: #f0e7cd; --ink: #625b46; --ink-soft: #92907a;
  --leaf: #8eb794; --leaf-dark: #688e70; --sea: #91bdb6; --coral: #dcaa83; --gold: #e3c578;
  --shadow: 0 3px 0 rgba(103,96,68,.12), 0 8px 26px rgba(59,77,47,.12);
}
html, body { background: #b3cf94; }
#world3d { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#game { image-rendering: auto; }
.graphics-3d .cell img, .graphics-3d .row img, .graphics-3d .letter .from img, .graphics-3d #catch img { image-rendering: auto; }
.graphics-3d #look-preview { image-rendering: auto; background: #eef0d9; }
.graphics-3d img[src^="data:image/"] { image-rendering: auto !important; }
.panel { border: 2px solid #fffdf3; border-radius: 24px; box-shadow: var(--shadow); }
button { background: var(--leaf); box-shadow: 0 3px 0 #739778; letter-spacing: .1px; transition: transform .15s, background .15s; }
button:hover { filter: brightness(1.035); }
button:focus-visible, input:focus-visible { outline: 3px solid #e9bc6a; outline-offset: 4px; }
button.alt { box-shadow: 0 3px 0 #d5c9a6; }
button.warm { box-shadow: 0 3px 0 #bc906e; }
button:disabled { filter: grayscale(.25); }
#hud-top { top: calc(16px + var(--st)); left: calc(16px + var(--sl)); right: calc(16px + var(--sr)); }
.hud-left { gap: 8px; }
.hud-row { gap: 8px; }
.pill { min-height: 42px; padding: 7px 15px; font-size: 15px; }
#lvl { min-width: 100px; padding: 7px 14px 8px; }
#lvl b { color: #6b8f70; font-size: 13px; }
#lvl .bar { height: 5px; background: #e7e2c9; }
#lvl .bar i { border-radius: 10px; background: #ddbd71; }
#coins { color: #a08b54; gap: 8px; }
#mats { padding: 5px 12px; color: #7b7b62; background: rgba(255,249,233,.94); }
#quest { background: rgba(255,249,233,.94); padding: 8px 12px; border-radius: 16px; font-size: 12px; line-height: 1.5; }
#quest b { color: #b99664; }
.hud-right { gap: 7px; }
.icon-btn { width: 40px; height: 40px; border: 2px solid #fffdf3; box-shadow: 0 3px 0 rgba(107,105,75,.13); background-color: #fff9e9; }
#btn-chat, #btn-sound, #btn-full { font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 23px; }
#btn-chat { background-image: url('../icons/ui/chat.svg'); }
#btn-sound { background-image: url('../icons/ui/sound.svg'); }
#btn-sound.muted { opacity: .65; background-size: 18px; }
#btn-sound.muted::after { content: ''; display: block; width: 24px; height: 2px; background: #9c8a72; transform: rotate(-45deg); }
#btn-full { background-image: url('../icons/ui/expand.svg'); }
#menu { bottom: calc(15px + var(--sb)); left: calc(13px + var(--sl)); right: calc(13px + var(--sr)); max-width: 480px; padding: 6px 8px; gap: 0; border-radius: 25px; background: rgba(255,250,234,.97); box-shadow: 0 4px 0 rgba(102,102,71,.12), 0 10px 30px rgba(64,81,47,.17); }
#menu button { font-size: 10px; color: #777761; gap: 4px; padding: 6px 1px 5px; }
#menu button span { display: block; width: 34px; height: 31px; font-size: 0; background-size: contain; background-position: center; background-repeat: no-repeat; transition: transform .18s; }
#menu button:hover span { transform: translateY(-2px); }
#m-map span { background-image: url('../icons/ui/map.svg'); }
#m-bag span { background-image: url('../icons/ui/bag.svg'); }
#m-camp span { background-image: url('../icons/ui/camp.svg'); }
#m-animals span { background-image: url('../icons/ui/friends.svg'); }
#m-goals span { background-image: url('../icons/ui/goals.svg'); }
#menu .dot { background: #d99b7e; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; right: calc(50% - 24px); top: 0; border: 1px solid #fff9e7; }
#zone-name { color: #6c8c64; font-size: 21px; border-radius: 20px; letter-spacing: .2px; padding: 12px 25px; }
#chat { bottom: calc(103px + var(--sb)); }
#chat-log div { font-size: 12px; padding: 5px 11px; color: #7c7b61; background: rgba(255,249,233,.83); }
#chat-log b { color: #b69065; }
#toast { top: calc(136px + var(--st)); }
#toast div { border-radius: 16px; font-size: 13px; padding: 10px 17px; }
#placebar { bottom: calc(105px + var(--sb)); font-size: 13px; width: min(500px,calc(100vw - 26px)); max-width: calc(100vw - 16px); white-space: normal; gap: 8px; }
#placebar > span { flex: 1; min-width: 0; }
#placebar button { flex-shrink: 0; padding: 9px 15px; }
#reel { font-size: 17px; padding: 12px 26px; background: #9bb5aa; box-shadow: 0 3px 0 #7e9b8d; }
#reel.biting { background: #dfa37e; box-shadow: 0 3px 0 #bb825e; animation: reel-ready .35s ease-in-out infinite alternate; }
@keyframes reel-ready { to { filter: brightness(1.12); } }
.modal { background: rgba(74,88,61,.24); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal > .panel { border-radius: 28px; background: #fff9e9; }
.modal header { border-bottom: 2px dashed #e5dcc2; padding-bottom: 14px; }
.modal header h2 { color: #748e6b; font-size: 21px; }
.tabs { gap: 7px; }
.tabs button { border-radius: 14px; font-size: 12px; }
.tabs button.sel { background: #8eb794; }
.cell, .row, .zbtn { border-radius: 17px; }
.cell { background: #f5efd9; border-color: #ebe2c7; }
.cell.sel, .zbtn.here { border-color: #9fbe8d; }
.zbtn { background: #f3edd8; box-shadow: 0 3px 0 #ded4b7; color: #6d7056; }
.zbtn.here { background: #e5edcf; }
.zbtn small { color: #8e9077; }
#dialog { bottom: calc(100px + var(--sb)); }
#dialog .panel { padding: 28px 25px 17px; border-radius: 28px; min-height: 125px; background: #fff9e9; }
#dlg-name { position: absolute; left: 23px; top: -15px; padding: 7px 20px; border-radius: 14px; background: #9ebc8b; color: #fffdf2; box-shadow: 0 3px 0 rgba(105,134,87,.15); font-size: 14px; }
#dlg-text { font-size: 17px; line-height: 1.65; color: #6c674e; }
#dlg-opts button { background: #e7c986; color: #77633e; box-shadow: 0 3px 0 #c9ad70; }
#catch .panel { border-radius: 28px; padding: 22px 35px; }
#login { background: linear-gradient(90deg,rgba(233,239,210,.68),rgba(233,239,210,.12) 60%,rgba(233,239,210,.06)); place-items: center start; padding-left: max(7vw,22px); }
#login .panel { width: min(350px,100%); padding: 28px 27px 26px; background: rgba(255,250,233,.96); border: 2px solid #fffdf4; box-shadow: 0 6px 0 rgba(114,119,80,.12),0 20px 60px rgba(70,90,50,.12); border-radius: 32px; }
#login .tent { display: block; width: 64px; height: 64px; margin: 0 auto 8px; background: url('../icons/ui/camp.svg') center / contain no-repeat; font-size: 0; }
#login h1 { font-size: 42px; color: #718f65; letter-spacing: -1.5px; line-height: 1.1; }
#login h1::after { content: 'UN PEQUEÑO LUGAR PARA DESCONECTAR'; display: block; font-size: 8px; letter-spacing: 1.9px; color: #aba27e; margin-top: 12px; font-weight: 900; }
#login p { font-size: 13px; line-height: 1.5; margin: 15px 0 22px; color: #929077; }
#login input[type=text] { border: 2px solid #e8dec0; font-size: 17px; padding: 12px 14px; border-radius: 16px; background: #fffdf3; }
#login input::placeholder { color: #b3aa8e; }
.colors { gap: 9px; margin: 20px 0 25px; }
.colors div { width: 27px; height: 27px; border: 3px solid #fffdf3; box-shadow: 0 2px 0 #ded5b9; }
.colors div.sel { outline: 2px solid #8c9271; outline-offset: 3px; }
#login #play { font-size: 16px !important; padding: 13px 29px !important; width: 100%; background: #8bad82; box-shadow: 0 4px 0 #718d69; }
#login .install-hint { font-size: 11px; color: #859276; }
@media (max-width:600px) {
  #hud-top { top: calc(12px + var(--st)); left: calc(10px + var(--sl)); right: calc(10px + var(--sr)); }
  .hud-right { gap: 5px; }
  .icon-btn { width: 34px; height: 34px; background-size: 19px !important; }
  .pill { min-height: 35px; padding: 5px 10px; font-size: 13px; }
  #lvl { min-width: 85px; padding: 5px 10px 7px; }
  #lvl b { font-size: 11px; }
  #mats { font-size: 12px; padding: 4px 9px; }
  #mats img { width: 19px; height: 19px; }
  #quest { font-size: 11px; max-width: min(250px,calc(100vw - 45px)); }
  #login { place-items: end center; padding: 20px 22px calc(28px + var(--sb)); background: linear-gradient(0deg,rgba(224,231,194,.75),transparent 85%); }
  #login .panel { padding: 19px 24px 22px; width: min(340px,100%); }
  #login .tent { width: 43px; height: 43px; margin: 0 auto 5px; }
  #login h1 { font-size: 34px; }
  #login h1::after { font-size: 7px; letter-spacing: 1.4px; margin-top: 7px; }
  #login p { margin: 10px 0 14px; font-size: 12px; }
  .colors { gap: 8px; margin: 17px 0 20px; }
  .colors div { width: 24px; height: 24px; }
  #dlg-text { font-size: 15px; }
}
@media (max-height:550px) and (min-width:601px) {
  #login .panel { padding: 17px 24px; width: 320px; }
  #login .tent { width: 36px; height: 36px; }
  #login h1 { font-size: 32px; }
  #login p { margin: 10px 0 12px; }
  .colors { margin: 14px 0 17px; }
}
@media (prefers-reduced-motion:reduce) { button, #menu button span { transition: none; } }