/* ============================================================
   Zaguate Records
   UI sobre fondo pre-renderizado (técnica estilo N64)
   ============================================================ */

:root{
  --neon:        #ff6a12;
  --neon-soft:   #ffa14a;
  --neon-glow:   rgba(255,106,18,.45);
  --ink:         #0d0906;
  --panel:       rgba(18,12,8,.93);
  --panel-edge:  rgba(255,138,48,.42);
  --text:        #f3e6d8;
  --text-dim:    #bda995;
  /* Logotipo: Archivo (geométrica/técnica, Google Fonts).
     ZAGUATE = SemiBold (600) · RECORDS = Medium (500). */
  --brand-font:  "Archivo","Avenir Next","Segoe UI",system-ui,sans-serif;
  --ui-font:     "Archivo","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --tb-font:     Georgia,"Iowan Old Style","Times New Roman",serif;
  --safe-t:      max(16px, env(safe-area-inset-top));
  --safe-b:      max(16px, env(safe-area-inset-bottom));
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--ui-font);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}

#stage{ position:fixed; inset:0; }

#gl{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  touch-action:none;
  cursor:crosshair;
}
#gl.is-over-zone{ cursor:pointer; }

/* ---------- HUD ---------- */
.hud{
  position:absolute; inset:0;
  padding:var(--safe-t) 16px var(--safe-b);
  pointer-events:none;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex; align-items:baseline; gap:8px;
  padding:9px 14px;
  background:linear-gradient(180deg, rgba(20,13,8,.82), rgba(20,13,8,.62));
  border:1px solid var(--panel-edge);
  border-radius:4px;
  backdrop-filter:blur(3px);
  box-shadow:0 0 18px rgba(0,0,0,.6), inset 0 0 22px rgba(255,106,18,.07);
}
.brand-mark{ color:var(--neon); font-size:10px; transform:translateY(-2px); }
.brand-name{
  font-family:var(--brand-font);
  font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--neon-soft); text-shadow:0 0 12px var(--neon-glow);
}
.brand-name .bn-sub{ font-weight:500; letter-spacing:.2em; opacity:.75; }
.brand-sub{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim);
}

.tracker{
  display:flex; align-items:center; gap:3px;
  padding:9px 14px;
  font-variant-numeric:tabular-nums;
  font-size:13px; letter-spacing:.08em; color:var(--text-dim);
  background:linear-gradient(180deg, rgba(20,13,8,.82), rgba(20,13,8,.62));
  border:1px solid var(--panel-edge);
  border-radius:4px;
  backdrop-filter:blur(3px);
}
.tracker .paw{ margin-right:5px; filter:saturate(.6); }
#tracker-count{ color:var(--neon-soft); font-weight:700; }
.tracker-sep{ opacity:.45; }
.tracker.is-bump{ animation:bump .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.14)} 100%{transform:scale(1)} }

/* ---------- Menú de zonas (offcanvas) ---------- */
.hud-right{ display:flex; align-items:flex-start; gap:8px; }

.menu-btn{
  pointer-events:auto;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  width:44px; height:38px; padding:0 11px;
  background:linear-gradient(180deg, rgba(20,13,8,.82), rgba(20,13,8,.62));
  border:1px solid var(--panel-edge); border-radius:4px;
  cursor:pointer; backdrop-filter:blur(3px);
  transition:border-color .16s ease;
}
.menu-btn:hover{ border-color:var(--neon); }
.menu-btn span{
  display:block; height:2px; border-radius:2px; background:var(--neon-soft);
  transition:transform .22s ease, opacity .16s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.zone-menu-scrim{
  position:absolute; inset:0; z-index:35;
  background:rgba(6,4,2,.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .24s ease;
}
.zone-menu-scrim[hidden]{ display:none; }
.zone-menu-scrim.is-in{ opacity:1; }

.zone-menu{
  position:absolute; top:0; right:0; bottom:0; z-index:36;
  width:min(340px, 88vw);
  display:flex; flex-direction:column;
  background:linear-gradient(190deg, rgba(30,19,11,.98), rgba(13,8,5,.99));
  border-left:1px solid var(--panel-edge);
  box-shadow:-24px 0 60px rgba(0,0,0,.7);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.zone-menu[hidden]{ display:none; }
.zone-menu.is-in{ transform:none; }

.zone-menu-head{
  display:flex; align-items:center; gap:10px;
  padding:calc(var(--safe-t) + 2px) 12px 13px 20px;
  border-bottom:1px solid rgba(255,138,48,.18);
  background:linear-gradient(180deg, rgba(255,106,18,.10), transparent);
}
.zone-menu-title{
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--neon); text-shadow:0 0 14px var(--neon-glow);
}
.zone-menu-close{
  margin-left:auto;
  width:32px; height:32px;
  font-size:14px; line-height:1;
  color:var(--text-dim); background:transparent;
  border:1px solid transparent; border-radius:4px;
  cursor:pointer; transition:color .16s ease, border-color .16s ease;
}
.zone-menu-close:hover{ color:var(--neon); border-color:var(--panel-edge); }

.zone-menu-list{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  list-style:none; padding:10px 8px calc(var(--safe-b) + 16px);
}
.zone-item{
  width:100%;
  display:flex; flex-direction:column; gap:3px;
  padding:12px 14px;
  text-align:left; font:inherit; color:var(--text);
  background:transparent; border:1px solid transparent; border-radius:6px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.zone-item:hover,.zone-item:focus-visible{
  background:rgba(255,106,18,.10); border-color:rgba(255,138,48,.32);
}
.zone-item-kicker{
  font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--neon);
}
.zone-item-row{ display:flex; align-items:center; gap:8px; }
.zone-item-name{ font-size:15px; font-weight:600; }
.zone-item-mark{
  margin-left:auto; font-size:11px; color:var(--neon-soft); opacity:0;
  transition:opacity .2s ease;
}
.zone-item.is-visited .zone-item-mark{ opacity:.85; }

/* ---------- Caja de texto (guiño a los textboxes de 64 bits) ---------- */
.textbox{
  position:absolute;
  left:50%; bottom:calc(var(--safe-b) + 54px);
  transform:translateX(-50%) translateY(14px);
  width:min(560px, calc(100vw - 32px));
  display:flex; align-items:stretch; gap:10px;
  opacity:0; transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.textbox[hidden]{ display:none; }
.textbox.is-in{ opacity:1; transform:translateX(-50%) translateY(0); }

.textbox-inner{
  flex:1;
  padding:14px 18px 15px;
  background:
    linear-gradient(180deg, rgba(26,17,10,.95), rgba(14,9,6,.95));
  border:1px solid var(--panel-edge);
  border-radius:6px;
  box-shadow:
    0 12px 34px rgba(0,0,0,.65),
    inset 0 0 40px rgba(255,106,18,.06);
  backdrop-filter:blur(4px);
}
#tb-title{
  font-family:var(--ui-font);
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--neon); margin-bottom:6px;
  text-shadow:0 0 14px var(--neon-glow);
}
#tb-body{
  font-family:var(--tb-font);
  font-size:15px; line-height:1.5; color:var(--text);
  min-height:2.9em;
}
#tb-body::after{
  content:"▌"; margin-left:2px; color:var(--neon);
  animation:caret 1s steps(2) infinite; opacity:0;
}
#tb-body.is-typing::after{ opacity:1; }
@keyframes caret{ 50%{opacity:0} }

.action-btn{
  flex:0 0 auto; width:74px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:linear-gradient(180deg, rgba(38,22,10,.95), rgba(20,11,6,.95));
  border:1px solid var(--neon); border-radius:6px;
  color:var(--neon-soft); cursor:pointer;
  pointer-events:auto;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 0 18px rgba(255,106,18,.22), inset 0 0 18px rgba(255,106,18,.08);
}
.action-btn:hover{ background:linear-gradient(180deg,#3a2110,#24130a); transform:translateY(-2px); }
.action-btn:active{ transform:translateY(0) scale(.97); }
.action-key{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--neon); color:#160c05;
  font-weight:800; font-size:15px;
  box-shadow:0 0 16px var(--neon-glow);
  animation:pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 12px var(--neon-glow) } 50%{ box-shadow:0 0 26px var(--neon) } }
.action-label{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; }

/* ---------- Pistas y ajustes ---------- */
.hint{
  position:absolute; left:16px; bottom:var(--safe-b);
  display:flex; flex-direction:column; gap:5px;
  font-size:11px; color:var(--text-dim);
  pointer-events:none;
  opacity:.75; transition:opacity .4s ease;
}
.hint.is-faded{ opacity:0; }
.hint-row{ display:flex; align-items:center; gap:5px; }
.hint-touch{ opacity:.6; }
@media (hover: hover){ .hint-touch{ display:none; } }
kbd{
  display:inline-grid; place-items:center;
  min-width:19px; height:19px; padding:0 5px;
  font:inherit; font-size:10px; font-weight:700;
  background:rgba(22,14,9,.85);
  border:1px solid rgba(255,138,48,.32);
  border-bottom-width:2px;
  border-radius:3px; color:var(--neon-soft);
}

.settings{
  position:absolute; right:16px; bottom:var(--safe-b);
  display:flex; gap:7px;
}
.set-btn{
  padding:7px 11px; min-width:38px;
  font:inherit; font-size:10px; font-weight:700; letter-spacing:.14em;
  color:var(--text-dim);
  background:rgba(20,13,8,.8);
  border:1px solid rgba(255,138,48,.28); border-radius:4px;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.set-btn:hover{ color:var(--neon-soft); border-color:var(--neon); }
.set-btn.is-off{ opacity:.42; }
.set-btn.is-playing{ color:var(--neon); border-color:var(--panel-edge); }

/* ---------- Panel de contenido ---------- */
.panel{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:24px 16px;
  background:rgba(6,4,2,.74);
  backdrop-filter:blur(7px);
  opacity:0; transition:opacity .26s ease;
  z-index:20;
}
.panel[hidden]{ display:none; }
.panel.is-in{ opacity:1; }

.panel-card{
  position:relative;
  width:min(620px, 100%);
  max-height:min(78vh, 640px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:34px 34px 30px;
  background:linear-gradient(170deg, rgba(30,19,11,.97), rgba(13,8,5,.98));
  border:1px solid var(--panel-edge);
  border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.8), inset 0 0 70px rgba(255,106,18,.05);
  transform:translateY(16px) scale(.98);
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.panel.is-in .panel-card{ transform:none; }

.panel-close{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px;
  font-size:14px; line-height:1;
  color:var(--text-dim); background:transparent;
  border:1px solid transparent; border-radius:4px;
  cursor:pointer; transition:color .16s ease, border-color .16s ease;
}
.panel-close:hover{ color:var(--neon); border-color:var(--panel-edge); }

.panel-kicker{
  font-size:10px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--neon); margin-bottom:9px;
}
.panel-title{
  font-size:clamp(24px, 4.4vw, 34px); line-height:1.1; font-weight:700;
  letter-spacing:-.01em; margin-bottom:16px;
  color:#fff;
}
.panel-body{ font-size:15px; line-height:1.65; color:var(--text-dim); }
.panel-body p + p{ margin-top:12px; }
.panel-body strong{ color:var(--text); font-weight:600; }
.panel-body ul{ margin:14px 0 0; padding:0; list-style:none; }
.panel-body li{
  position:relative; padding:7px 0 7px 20px;
  border-top:1px solid rgba(255,138,48,.12);
  color:var(--text);
}
.panel-body li::before{
  content:"▸"; position:absolute; left:0; color:var(--neon); font-size:11px; top:9px;
}
.panel-body li span{ color:var(--text-dim); }

/* ---------- panel: agenda (flyers de los próximos eventos) ---------- */
.panel-flyers{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  margin-top:16px;
}
.flyer{
  display:flex; flex-direction:column; text-decoration:none;
  background:rgba(255,106,18,.05);
  border:1px solid var(--panel-edge); border-radius:6px; overflow:hidden;
  transition:transform .14s ease, border-color .14s ease;
}
.flyer:hover{ transform:translateY(-2px); border-color:var(--neon); }
.flyer img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
.flyer-txt{ padding:9px 10px 11px; }
.flyer-txt b{ display:block; font-size:13px; line-height:1.25; color:var(--text); }
.flyer-txt i{
  display:block; margin-top:3px; font-style:normal;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
}
.flyers-note{ font-size:14px; color:var(--text-dim); }
.flyers-note a{ color:var(--neon-soft); }

.panel-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.panel-actions a{
  padding:11px 20px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-radius:4px;
  transition:transform .14s ease, box-shadow .2s ease;
}
.panel-actions a.primary{
  background:var(--neon); color:#160c05;
  box-shadow:0 0 22px rgba(255,106,18,.32);
}
.panel-actions a.ghost{
  color:var(--neon-soft); border:1px solid var(--panel-edge);
}
.panel-actions a:hover{ transform:translateY(-2px); }

/* ---------- Fundido de transición al mini-juego ---------- */
.fade{
  position:absolute; inset:0; z-index:60;
  background:#050302;
  opacity:0; pointer-events:none;
  transition:opacity .38s ease;
}
.fade.is-on{ opacity:1; pointer-events:auto; }

/* ---------- Modal del reproductor (tocadiscos) ---------- */
.player-modal{
  position:absolute; inset:0; z-index:25;
  display:grid; place-items:center;
  padding:clamp(10px, 2.6vw, 34px);
  background:rgba(6,4,2,.78);
  backdrop-filter:blur(7px);
  opacity:0; transition:opacity .26s ease;
}
.player-modal[hidden]{ display:none; }
.player-modal.is-in{ opacity:1; }

.player-shell{
  width:min(700px, 100%);
  height:min(88vh, 820px);
  display:flex; flex-direction:column;
  overflow:hidden;
  background:linear-gradient(170deg, rgba(30,19,11,.97), rgba(13,8,5,.98));
  border:1px solid var(--panel-edge);
  border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.8), inset 0 0 70px rgba(255,106,18,.05);
  transform:translateY(16px) scale(.98);
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.player-modal.is-in .player-shell{ transform:none; }

.player-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px 10px 18px;
  border-bottom:1px solid rgba(255,138,48,.18);
  background:linear-gradient(180deg, rgba(255,106,18,.10), transparent);
}
.player-kicker{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--neon);
}
.player-name{
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--neon-soft); text-shadow:0 0 12px var(--neon-glow);
}
.player-close{
  margin-left:auto;
  width:32px; height:32px;
  font-size:14px; line-height:1;
  color:var(--text-dim); background:transparent;
  border:1px solid transparent; border-radius:4px;
  cursor:pointer; transition:color .16s ease, border-color .16s ease;
}
.player-close:hover{ color:var(--neon); border-color:var(--panel-edge); }

.player-iframe{
  flex:1; width:100%; border:0; display:block;
  background:#08080c;
}

/* ---------- Portada ---------- */
.intro{
  position:absolute; inset:0; z-index:30;
  display:grid; place-items:center;
  padding:24px;
  background:radial-gradient(ellipse at 50% 42%, #1c1009 0%, #0a0604 62%, #050302 100%);
  transition:opacity .7s ease, visibility .7s;
}
.intro.is-out{ opacity:0; visibility:hidden; pointer-events:none; }

.intro-card{ max-width:520px; text-align:center; }
.intro-kicker{
  margin-top:16px;
  font-family:var(--brand-font);
  font-size:clamp(15px, 2.8vw, 22px);
  font-weight:500; letter-spacing:.4em; text-indent:.4em; text-transform:uppercase;
  color:var(--neon);
  text-shadow:
    0 0 8px var(--neon),
    0 0 24px var(--neon-glow),
    0 0 54px rgba(255,106,18,.35);
  animation:neon-blink 3.2s infinite;
}
@keyframes neon-blink{
  0%, 40%, 100%{ opacity:1 }
  45%, 55%{ opacity:.32 }
  50%{ opacity:.85 }
  73%{ opacity:.5 }
  76%{ opacity:1 }
}
.intro-title{
  font-family:var(--brand-font);
  font-size:clamp(52px, 15vw, 108px);
  font-weight:600; letter-spacing:.09em; text-indent:.09em; line-height:.92;
  color:var(--neon-soft);
  text-shadow:
    0 0 10px var(--neon),
    0 0 34px var(--neon-glow),
    0 0 90px rgba(255,106,18,.28);
  animation:flicker 5.5s infinite;
}
@keyframes flicker{
  0%,96%,100%{ opacity:1 }
  96.6%{ opacity:.55 }
  97.2%{ opacity:1 }
  97.8%{ opacity:.7 }
}
.intro-lead{
  margin:20px auto 28px; max-width:420px;
  font-size:15px; line-height:1.65; color:var(--text-dim);
}
.intro-btn{
  padding:15px 34px;
  font:inherit; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#160c05; background:var(--neon);
  border:0; border-radius:4px; cursor:pointer;
  box-shadow:0 0 30px rgba(255,106,18,.4);
  transition:transform .16s ease, box-shadow .24s ease;
}
.intro-btn:hover{ transform:translateY(-2px); box-shadow:0 0 46px rgba(255,106,18,.6); }
.intro-btn:disabled{ opacity:.45; cursor:progress; transform:none; }
.intro-actions{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}
.intro-agenda{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--neon-soft); text-decoration:none;
  padding:14px 20px; border:1px solid var(--panel-edge); border-radius:4px;
  transition:border-color .16s ease, color .16s ease;
}
.intro-agenda:hover{ border-color:var(--neon); color:var(--neon); }
.intro-foot{
  margin-top:26px; font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(189,169,149,.45);
}

/* ---------- Banda inferior (pantallas verticales) ----------
   Cuando el viewport es más angosto que la foto queda una franja abajo:
   en vez de dejarla negra, lleva la marca y la instrucción. */
.scene-caption{
  position:absolute; left:0; right:0; bottom:0;
  display:none;
  padding:0 24px calc(var(--safe-b) + 58px);
  text-align:center;
  pointer-events:none;
}
.cap-word{
  font-family:var(--brand-font);
  font-size:clamp(34px, 12vw, 58px); font-weight:600; letter-spacing:.09em; text-indent:.09em; line-height:1;
  color:var(--neon-soft);
  text-shadow:0 0 10px var(--neon), 0 0 36px var(--neon-glow);
}
.cap-sub{
  margin-top:8px;
  font-family:var(--brand-font);
  font-size:11px; font-weight:500; letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase; color:var(--text-dim);
}
.cap-hint{
  margin-top:16px;
  font-size:13px; line-height:1.6; color:var(--text-dim);
}
.cap-cta{
  display:inline-block; margin-top:18px; padding:12px 26px;
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:#160c05; background:var(--neon); border-radius:4px; text-decoration:none;
  box-shadow:0 0 24px rgba(255,106,18,.32);
  pointer-events:auto;
}
.cap-agenda{
  display:block; margin-top:12px;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--neon-soft); text-decoration:none; pointer-events:auto;
}
.cap-agenda:hover{ color:var(--neon); }

/* La banda sólo existe cuando el viewport es bastante más alto que ancho. */
@media (max-aspect-ratio: 9/10){
  .scene-caption{ display:block; }
  /* con la caja de texto abierta el bloque estorba */
  .scene-caption.is-hidden{ display:none; }
}

/* ---------- Calibración (dev) ---------- */
.calib{
  position:absolute; top:60px; right:16px; z-index:40;
  width:230px; padding:14px;
  font-size:11px; color:#cfe;
  background:rgba(4,10,14,.92);
  border:1px solid #2b6; border-radius:5px;
  max-height:74vh; overflow-y:auto;
}
.calib h3{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#5f9; margin-bottom:9px; }
.calib label{ display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:5px; }
.calib label span{ flex:0 0 70px; color:#8bd; }
.calib input[type=range]{ flex:1; min-width:0; accent-color:#2b6; }
.calib output{ flex:0 0 46px; text-align:right; font-variant-numeric:tabular-nums; color:#cfe; }
.calib .calib-sep{ margin:11px 0 7px; border-top:1px solid #1a4; padding-top:9px; }
.calib button{
  width:100%; margin-top:9px; padding:8px;
  font:inherit; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#040; background:#3d8; border:0; border-radius:3px; cursor:pointer;
}
.calib select{
  flex:1; min-width:0; font:inherit; font-size:11px;
  background:#062; color:#cfe; border:1px solid #2b6; border-radius:3px; padding:3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 680px){
  .hint{ display:none; }
  .brand-sub{ display:none; }
  .textbox{ bottom:calc(var(--safe-b) + 48px); }
  #tb-body{ font-size:14px; }
  .panel-card{ padding:28px 22px 24px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.08s !important; }
}