/* Santiago, o guia (docs/SANTIAGO.md · docs/DESIGN.md › Santiago): a camada do tutorial por cima do jogo, a janela de
   dica, a seta, a janela de progresso, o baú em ba-outcome e o Santiago como NPC no ? do topo. */
.sg-layer [hidden]{display:none!important}
/* A janela aberta divide a tela com a dica: sobe para o topo e encolhe o espaço dela (--sg-reserve, em santiago.js). */
html.sg-reserve dialog[open]:modal{margin:8px auto auto;max-height:calc(100dvh - 16px - var(--sg-reserve,0px))!important}
html.sg-reserve #map-dialog[open]{height:calc(100dvh - 16px - var(--sg-reserve,0px))}
.sg-layer{position:fixed;inset:0;z-index:2147483000;pointer-events:none;font:11px/15px 'Tibia Pixel',Verdana,sans-serif}
.sg-block,.sg-dim{position:fixed;pointer-events:auto;background:none}
.sg-dim{inset:0;background:#000000a6}
.sg-hole{position:fixed;pointer-events:none;box-shadow:0 0 0 200vmax #000000a6;outline:2px solid #e8c547;outline-offset:2px;animation:sg-blink 1s steps(2) infinite}
.sg-hole2{position:fixed;pointer-events:none;outline:1px solid #c5b47c;outline-offset:1px}
@keyframes sg-blink{50%{outline-color:#f4d35e;outline-offset:4px}}
/* A seta do tutorial: pixel art dourada (assets/ui/santiago/arrow.png, 15 px) em 3×. */
.sg-arrow{position:fixed;width:45px;height:45px;background:url('/assets/ui/santiago/arrow.png') 0 0/45px 45px no-repeat;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 2px 0 #000);animation:sg-bob .7s steps(2) infinite}
.sg-arrow.is-up{transform:rotate(180deg);animation-name:sg-bob-up}
@keyframes sg-bob{50%{translate:0 6px}}
@keyframes sg-bob-up{50%{translate:0 -6px}}
.sg-hint{position:fixed;z-index:1;margin:0;display:grid;pointer-events:auto;max-width:calc(100vw - 16px);box-shadow:0 2px 6px #000a}
.sg-hint>.window-title{display:flex;align-items:center;gap:6px}
.sg-hint>.window-title small{margin-left:auto;color:#a9a9a9}
/* Minimizar (−) e a aba para voltar (+), com os botões das janelinhas do client (miniwindow_buttons.png, como no desk). */
.sg-layer .sg-hint .window-title .sg-min,.sg-tab i{flex:none;width:14px;height:14px;min-width:0;min-height:0;padding:0;border:0;border-image:none;box-shadow:none;background:url('/assets/ui/classic/miniwindow_buttons.png') 0 0 no-repeat;position:relative}
.sg-layer .sg-hint .window-title .sg-min:hover{background-position:0 -14px}
.sg-layer .sg-hint .window-title .sg-min::before{display:none}
.sg-layer .sg-hint .window-title .sg-min::after{content:'';position:absolute;inset:-10px}
.sg-tab i{display:block;background-position:-14px 0}
.sg-tab{position:fixed;display:none;align-items:center;gap:5px;min-height:22px;height:22px;padding:0 6px;pointer-events:auto;color:#e4ca78;box-shadow:0 2px 6px #000a}
.sg-tab b{font-weight:normal}
.sg-layer.is-mini .sg-hint{display:none}
.sg-layer.is-mini .sg-tab{display:inline-flex}
.sg-in{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;padding:8px}
.sg-portrait{display:block;width:70px;height:70px;background:#262626 url('/assets/ui/santiago/santiago.png') -60px -58px/128px 128px no-repeat;image-rendering:pixelated;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.sg-portrait.is-walk{background-image:url('/assets/ui/santiago/santiago-walk.png');background-size:1024px 128px;animation:sg-walk 1.1s steps(8) infinite}
@keyframes sg-walk{from{background-position:-60px -58px}to{background-position:-1084px -58px}}
.sg-say{display:grid;gap:6px;align-content:start;min-width:0}
.sg-say p{margin:0;color:#fff;overflow-wrap:anywhere}
.sg-say b,.sg-name{color:#e4ca78;font-weight:normal}
.sg-kw{color:#4b98da;text-decoration:underline dotted;text-underline-offset:2px}
.sg-replies{display:flex;flex-wrap:wrap;gap:4px}
.sg-replies button{color:#4b98da;min-height:24px}
.sg-ft{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 8px 8px}
.sg-ft .primary,.sg-ft .sg-todo{margin-left:auto}
.sg-ft button{min-height:24px}
.sg-todo{color:#e4ca78}
.sg-shake{animation:sg-shake .3s steps(3)}
@keyframes sg-shake{33%{translate:-4px 0}66%{translate:4px 0}}
.sg-toast{position:fixed;left:8px;right:8px;top:42%;margin:0;text-align:center;font:bold 13px 'Tibia Pixel',Verdana,sans-serif;color:#e4ca78;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000;pointer-events:none;animation:sg-fade 2.6s forwards}
@keyframes sg-fade{0%{opacity:0}10%{opacity:1}75%{opacity:1}100%{opacity:0}}
/* Progresso: no desktop, uma janela como as da barra (dk-mw) sobre a Sessão de caça; no celular, uma faixa. */
.sg-track{position:fixed;display:grid;grid-template-rows:19px minmax(0,1fr);background:#3d3d3d url('/assets/ui/classic/panel-texture.png');border:1px solid #111;box-shadow:1px 1px #6a6a6a,inset 1px 1px #6a6a6a;pointer-events:none}
.sg-track header{white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:6px;padding:0 5px;background:#2f2f2f;border-bottom:1px solid #111;color:#c0c0c0}
.sg-track header small{margin-left:auto;color:#f4d35e}
.sg-track ul{margin:0;padding:3px 5px;list-style:none;display:grid;align-content:start}
.sg-track li{display:flex;gap:5px;color:#6f6f6f;white-space:nowrap;overflow:hidden}
.sg-track li i{font-style:normal;width:10px}
.sg-track li.is-done{color:#5fc85f}
.sg-track li.is-cur{color:#fff}
.sg-track li.is-cur i{color:#f4d35e}
.sg-strip{position:fixed;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center;padding:0 6px;background:#2f2f2f;border:1px solid #111;box-shadow:1px 1px #6a6a6a;color:#c0c0c0;pointer-events:none}
.sg-strip i{height:6px;background:#1c1c1c;border:1px solid #000}
.sg-strip b{display:block;height:100%;background:#e8c547}
.sg-strip small{color:#f4d35e}
/* O baú do fim e a confirmação de pular: ba-outcome fixo na tela. */
.ba-outcome.sg-outcome{position:fixed;inset:0;z-index:2;padding:12px;pointer-events:auto}
.sg-outcome .ba-outcome-window{width:min(340px,100%);max-height:calc(100dvh - 24px);overflow:auto}
.sg-outcome .ba-outcome-banner small{white-space:normal;line-height:1.5;text-align:center}
.sg-outcome .ba-outcome-note{line-height:1.5;padding:0 6px}
.sg-chest-who{display:flex;justify-content:center;margin:0 0 6px}
.sg-ticket{display:block;width:32px;height:32px;background:url('/assets/tibia/effect-ticket-copper.png') 0 0/32px 320px no-repeat;image-rendering:pixelated}
/* O ? do topo e a conversa com o Santiago. */
.shell>header.app-top .sg-ask-btn{position:relative;height:28px;min-height:28px;padding:0 6px 0 4px;display:inline-flex;align-items:center;gap:3px}
.shell>header.app-top .sg-ask-btn b{font:bold 13px 'Tibia Pixel',Verdana,sans-serif;color:#f4d35e}
.sg-face{display:block;width:16px;height:16px;background:url('/assets/ui/santiago/santiago.png') -31px -30px/64px 64px no-repeat;image-rendering:pixelated}
dialog.window.sg-modal{width:min(460px,calc(100vw - 16px))}
.sg-ask{display:grid;gap:6px;padding:8px}
.sg-who{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;align-items:center}
.sg-who b{display:block;color:#e4ca78;font:bold 13px 'Tibia Pixel',Verdana,sans-serif}
.sg-who small{color:#a9a9a9}
.sg-chat{min-height:120px;max-height:min(38dvh,260px)}
.sg-chat .qj-line b{color:#e4ca78}
.sg-chat .qj-line.is-you{color:#c0c0c0}
.sg-say-kw{cursor:pointer}
.sg-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px}
.sg-form input{min-width:0}
.sg-keys{display:flex;flex-wrap:wrap;gap:4px}
.sg-keys button{color:#4b98da}
.sg-acts{display:flex;flex-wrap:wrap;gap:4px}
.sg-acts button{flex:1 1 auto}
@media (prefers-reduced-motion:reduce){.sg-hole,.sg-arrow,.sg-portrait.is-walk,.sg-toast,.sg-shake{animation:none}}