/* GILOA FIRST-RUN TUTORIAL */

#controls .record-loc-btn {
  border: 1px solid rgba(79, 195, 247, 0.55);
  background: rgba(26, 32, 53, 0.94);
}

.record-loc-btn .loc-record-icon {
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #4fc3f7;
  box-shadow: 0 0 0 5px rgba(79,195,247,.14), 0 0 15px rgba(79,195,247,.72);
}
.record-loc-btn.recording .loc-record-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ff4444;
  box-shadow: 0 0 0 5px rgba(255,68,68,.13), 0 0 12px rgba(255,68,68,.7);
}

.gft {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 7000;
  display: none;
  overflow: hidden;
  pointer-events: none;
  color: #fff;
  font-family: inherit;
}
.gft.active { display: block; }
.gft-blackout,
.gft-map-softener,
.gft-dim,
.gft-eyelids { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
.gft-blackout { z-index: 1; background: #000; opacity: 0; }
.gft-map-softener { z-index: 2; background: rgba(0,0,0,.18); backdrop-filter: blur(5px); opacity: 0; }
.gft-dim { z-index: 3; background: rgba(3,7,14,.48); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.gft-eyelids { z-index: 4; pointer-events: none; }
.gft-eyelids i { position: absolute; left: -4%; width: 108%; height: 51%; background: #000; }
.gft-eyelids i:first-child { top: 0; transform-origin: top; }
.gft-eyelids i:last-child { bottom: 0; transform-origin: bottom; }

.gft.phase-black .gft-blackout { opacity: 1; }
.gft.phase-blink .gft-blackout { opacity: 0; }
.gft.phase-blink .gft-eyelids i:first-child { animation: gft-top-lid 1.85s ease-in-out both; }
.gft.phase-blink .gft-eyelids i:last-child { animation: gft-bottom-lid 1.85s ease-in-out both; }
.gft.phase-map .gft-map-softener { opacity: 1; animation: gft-map-focus 1s ease-out both; }
.gft.phase-dialogue .gft-dim,
.gft.phase-action .gft-dim { opacity: 1; pointer-events: auto; }
.gft.phase-walk .gft-dim,
.gft.phase-success .gft-dim { opacity: .16; pointer-events: none; }

@keyframes gft-top-lid {
  0% { transform: translateY(0); }
  15% { transform: translateY(-88%); }
  28% { transform: translateY(0); }
  50% { transform: translateY(-62%); }
  62% { transform: translateY(0); }
  100% { transform: translateY(-104%); }
}
@keyframes gft-bottom-lid {
  0% { transform: translateY(0); }
  15% { transform: translateY(88%); }
  28% { transform: translateY(0); }
  50% { transform: translateY(62%); }
  62% { transform: translateY(0); }
  100% { transform: translateY(104%); }
}
@keyframes gft-map-focus {
  from { opacity: 1; backdrop-filter: blur(6px); background: rgba(0,0,0,.34); }
  to { opacity: 0; backdrop-filter: blur(0); background: transparent; }
}

.gft-skip {
  position: absolute;
  z-index: 9;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  display: none;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  background: rgba(26,32,53,.76);
  backdrop-filter: blur(12px);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
}
.gft.skip-ready .gft-skip { display: block; }

.gft-guide {
  position: absolute;
  z-index: 8;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: none;
  grid-template-columns: minmax(90px, 150px) minmax(190px, 380px);
  align-items: end;
  width: min(550px, calc(100vw - 28px));
  pointer-events: none;
}
.gft.show-guide .gft-guide { display: grid; animation: gft-guide-enter .48s cubic-bezier(.2,.75,.25,1) both; }
.gft-character-wrap { position: relative; min-height: 190px; }
.gft-character {
  position: absolute;
  left: -10px;
  bottom: -4px;
  z-index: 2;
  width: 172px;
  max-height: 220px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.5));
}
.gft-character-placeholder {
  position: absolute;
  left: 10px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 1px dashed rgba(79,195,247,.45);
  border-radius: 50%;
  color: #4fc3f7;
  background: rgba(26,32,53,.72);
  font-size: 12px;
  font-weight: 900;
}
.gft-bubble {
  position: relative;
  margin-left: -4px;
  padding: 19px 20px 16px;
  border: 1px solid rgba(79,195,247,.34);
  border-radius: 20px 20px 20px 6px;
  background: rgba(17,24,43,.94);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.gft-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 31px;
  width: 16px;
  height: 16px;
  border-left: 1px solid rgba(79,195,247,.34);
  border-bottom: 1px solid rgba(79,195,247,.34);
  background: rgba(17,24,43,.94);
  transform: rotate(45deg);
}
.gft-copy { position: relative; z-index: 1; min-height: 48px; margin: 0; color: #fff; font-size: 16px; font-weight: 760; line-height: 1.58; white-space: pre-line; }
.gft-copy.emphasis { color: #4fc3f7; font-size: 20px; font-weight: 900; }
.gft-next {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 88px;
  min-height: 42px;
  margin: 13px 0 0 auto;
  padding: 0 17px;
  border: 1px solid #4fc3f7;
  border-radius: 12px;
  color: #07111e;
  background: #4fc3f7;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.gft-next[hidden] { display: none; }

@keyframes gft-guide-enter {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  70% { opacity: 1; transform: translateY(-3px) scale(1); }
  to { opacity: 1; transform: none; }
}

.gft-target-parent { z-index: 7005 !important; }
.gft-target-parent > * { pointer-events: auto !important; }
.gft-target-parent > .gft-target { pointer-events: auto !important; }
.gft-target {
  z-index: 7006 !important;
  isolation: isolate;
  outline: 3px solid rgba(79,195,247,.92) !important;
  outline-offset: 5px;
  box-shadow: 0 0 0 9px rgba(79,195,247,.15), 0 0 30px rgba(79,195,247,.9) !important;
  animation: gft-target-pulse 1.25s ease-in-out infinite !important;
}
#help-btn.gft-target {
  position: absolute !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@keyframes gft-target-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.gft.phase-success .gft-character { width: 196px; }
.gft-confirm { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.68); pointer-events: auto; }
.gft-confirm[hidden] { display: none; }
.gft-confirm-card { width: min(390px, 100%); padding: 24px; border: 1px solid rgba(79,195,247,.32); border-radius: 20px; background: #151c30; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.gft-confirm-card h2 { margin: 0; font-size: 21px; }
.gft-confirm-card p { margin: 11px 0 20px; color: rgba(255,255,255,.7); line-height: 1.6; white-space: pre-line; }
.gft-confirm-card div { display: flex; justify-content: flex-end; gap: 9px; }
.gft-confirm-card button { min-height: 42px; padding: 0 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: #fff; background: rgba(255,255,255,.07); font: inherit; font-weight: 800; cursor: pointer; }
.gft-confirm-card button:last-child { color: #07111e; border-color: #4fc3f7; background: #4fc3f7; }

@media (max-width: 600px) {
  .gft-guide { grid-template-columns: 92px minmax(0, 1fr); bottom: calc(82px + env(safe-area-inset-bottom)); }
  .gft-character-wrap { min-height: 142px; }
  .gft-character { left: -16px; width: 124px; max-height: 160px; }
  .gft-character-placeholder { left: 0; width: 82px; height: 82px; }
  .gft-bubble { padding: 15px 15px 13px; }
  .gft-copy { min-height: 42px; font-size: 14px; }
  .gft-copy.emphasis { font-size: 17px; }
  .gft-next { min-height: 39px; margin-top: 10px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .gft-guide { left: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); grid-template-columns: 82px minmax(210px, 360px); width: min(470px, calc(100vw - 100px)); }
  .gft-character-wrap { min-height: 118px; }
  .gft-character { width: 105px; max-height: 130px; }
  .gft-bubble { padding: 12px 14px 11px; }
  .gft-copy { min-height: 36px; font-size: 13px; }
  .gft-next { min-height: 34px; margin-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .gft *, .gft *::before, .gft *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .gft.phase-blink .gft-eyelids { display: none; }
  .gft.phase-blink .gft-blackout { animation: gft-simple-fade 1.2s linear both; }
  @keyframes gft-simple-fade { from { opacity: 1; } to { opacity: 0; } }
}

/* v2 live-map tutorial overrides */
.gft { z-index:7000; }
.gft-blackout,.gft-map-softener,.gft-dim,.gft-eyelids { transition:opacity .45s ease,visibility .45s ease; }
.gft.phase-black .gft-blackout { opacity:1;visibility:visible; }
.gft.phase-black .gft-eyelids,.gft.phase-black .gft-map-softener,.gft.phase-black .gft-dim { opacity:0;visibility:hidden; }
.gft.phase-blink .gft-blackout { opacity:0;visibility:hidden; }
.gft.phase-blink .gft-map-softener { opacity:1;visibility:visible;background:rgba(2,6,14,.22);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); }
.gft.phase-map .gft-blackout,.gft.phase-map .gft-eyelids,.gft.phase-map .gft-dim { opacity:0;visibility:hidden; }
.gft.phase-map .gft-map-softener { animation:gft-map-focus 1s ease-out both;pointer-events:none; }
.gft.phase-dim .gft-blackout,.gft.phase-dim .gft-eyelids,.gft.phase-dim .gft-map-softener,
.gft.phase-error .gft-blackout,.gft.phase-error .gft-eyelids,.gft.phase-error .gft-map-softener { opacity:0;visibility:hidden; }
.gft.phase-dim .gft-dim,.gft.phase-error .gft-dim { opacity:0;visibility:hidden; }
.gft.phase-clear .gft-blackout,.gft.phase-clear .gft-eyelids,.gft.phase-clear .gft-map-softener,.gft.phase-clear .gft-dim { opacity:0;visibility:hidden;pointer-events:none; }
body.gft-active .gft-dim { pointer-events:none !important; }
.gft-spotlight { position:fixed;z-index:5;display:none;pointer-events:none;border:2px solid rgba(116,211,255,.96);box-shadow:0 0 0 9999px rgba(3,7,14,.48),0 0 0 7px rgba(79,195,247,.15),0 0 28px rgba(79,195,247,.85);transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease; }
.gft-spotlight.show { display:block; }
.gft-guide { z-index:8; }
.gft.gft-guide-right .gft-guide { left:auto;right:max(14px,env(safe-area-inset-right));grid-template-columns:minmax(0,1fr) 112px; }
.gft.gft-guide-right .gft-character-wrap { grid-column:2;grid-row:1; }
.gft.gft-guide-right .gft-character { left:auto;right:-10px; }
.gft.gft-guide-right .gft-bubble { grid-column:1;grid-row:1;margin-right:-4px;margin-left:0;border-radius:20px 20px 5px 20px; }
.gft.gft-guide-right .gft-bubble::before { left:auto;right:-9px;transform:rotate(225deg); }
.gft-actions { position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px; }
.gft-actions .gft-next { margin:0; }
.gft-secondary { min-height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.25);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;font:800 12px inherit;cursor:pointer; }
.gft-secondary[hidden],.gft-error-detail[hidden] { display:none; }
.gft-error-detail { margin-top:9px;padding:9px 11px;border-radius:10px;background:rgba(255,119,119,.1);color:#ffd4d4;font-size:12px;font-weight:650;line-height:1.45; }
.gft-next:disabled { opacity:.68;cursor:wait; }
.gft.phase-error .gft-bubble { border-color:rgba(255,119,119,.55); }

@media (max-width:600px) and (orientation:portrait) {
  .gft-guide { left:max(8px,env(safe-area-inset-left));right:auto;bottom:calc(14px + env(safe-area-inset-bottom));grid-template-columns:64px minmax(0,1fr);width:calc(100vw - 108px);max-width:304px;align-items:end; }
  .gft-character-wrap { min-height:104px; }
  .gft-character { left:-12px;bottom:-2px;width:86px;max-height:112px; }
  .gft-character-placeholder { left:0;bottom:7px;width:58px;height:58px;font-size:9px; }
  .gft-bubble { margin-left:0;padding:12px 12px 11px;border-radius:16px 16px 16px 5px; }
  .gft-bubble::before { bottom:25px; }
  .gft-copy { min-height:0;font-size:13px;line-height:1.48; }
  .gft-actions { flex-wrap:wrap;gap:6px;margin-top:9px; }
  .gft-next,.gft-secondary { min-width:0;min-height:36px;padding:0 10px;font-size:11px; }
  .gft-error-detail { font-size:10px;padding:7px 8px; }
  .gft-skip { top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));min-height:36px;padding:0 12px;font-size:11px; }
  .gft.gft-guide-right .gft-guide { left:auto;right:max(8px,env(safe-area-inset-right));width:calc(100vw - 92px);grid-template-columns:minmax(0,1fr) 64px; }
  .gft.gft-guide-right .gft-character { left:auto;right:-12px; }
}

@media (min-width:601px) {
  .gft-guide { bottom:calc(24px + env(safe-area-inset-bottom)); }
}