/* =========================================================
   Canvas: viewport, mundo, título e janelas
   ========================================================= */
.viewport{
  position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none; /* arrastar não seleciona texto */
  background:transparent; /* a rede (canvas.net) fica atrás */
}
.net{position:fixed;inset:0;pointer-events:none;display:block}
.viewport::after{ /* vinheta suave para dar profundidade */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgb(3 20 90 / .38));
}
.viewport:focus-visible{box-shadow:inset 0 0 0 3px var(--yellow);border-radius:0}
.viewport.is-panning{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}

.headline{
  position:absolute;left:0;top:0;margin:0;
  font-weight:900;font-size:156px;line-height:.84;letter-spacing:-.058em;
  color:var(--yellow);white-space:nowrap;user-select:none;pointer-events:none;
}
.headline span{display:block}
.headline span:last-child{padding-left:.02em}

/* ---------- janela ---------- */
.win{
  --w:640px;--bg:#111;--fg:#fff;--accent:#fff;--bar:#222;
  position:absolute;left:0;top:0;width:var(--w);
  transform-origin:50% 50%;
  transition:transform .55s var(--ease-out),width .55s var(--ease-out);
  border-radius:14px;
}
.win.no-anim{transition:none}
.win-chrome{
  position:relative;border-radius:14px;overflow:hidden;background:var(--bar);
  box-shadow:var(--shadow-win);
  transition:box-shadow var(--t-med) var(--ease-out);
}
.win-chrome::after{ /* borda: neutra, laranja quando ativa */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08);
  transition:box-shadow var(--t-fast);
}
.win.is-active .win-chrome::after{box-shadow:inset 0 0 0 4px var(--orange)}
.win.is-active .win-chrome{box-shadow:var(--shadow-win),0 40px 80px -24px rgb(2 10 50 / .5)}
.win:focus-visible{box-shadow:none}
.win:focus-visible .win-chrome::after{box-shadow:inset 0 0 0 4px var(--yellow)}
.win.is-dragging .win-chrome{box-shadow:0 60px 120px -30px rgb(2 10 50 / .7),var(--shadow-win)}

.win-bar{
  height:40px;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;
  background:var(--bar);color:var(--fg);cursor:grab;user-select:none;touch-action:none;
  border-bottom:1px solid rgb(127 127 127 / .18);
}
.win.is-dragging .win-bar{cursor:grabbing}
.win-url{
  flex:1;min-width:0;height:24px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:7px;
  background:rgb(127 127 127 / .14);font-family:var(--mono);font-size:12px;opacity:.85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win-url svg{width:10px;height:10px;flex:none;opacity:.7}
.win-grip{
  width:30px;height:28px;display:grid;place-items:center;border-radius:7px;color:var(--fg);opacity:.7;flex:none;cursor:grab;
}
.win-grip:hover{opacity:1;background:rgb(127 127 127 / .18)}
.win-grip .ic{width:15px;height:15px}
.win-view{position:relative;aspect-ratio:16/10;background:var(--bg);cursor:pointer;overflow:hidden}
.win-view img{width:100%;height:100%;object-fit:cover;object-position:top center;user-select:none;-webkit-user-drag:none;pointer-events:none;
  transition:transform .8s var(--ease-out)}
.win:hover .win-view img{transform:scale(1.015)}

.win-cap{
  position:absolute;left:4px;top:calc(100% + 14px);margin:0;white-space:nowrap;
  font-size:17px;font-weight:500;color:var(--cream);opacity:.78;transition:opacity var(--t-fast);
}
.win-cap b{font-weight:700;color:var(--yellow)}
.win.is-active .win-cap{opacity:1}

.win-explore{
  position:absolute;right:-18px;bottom:-24px;height:50px;font-size:18px;padding:0 22px;
  transform:translateZ(0);
}
.win-explore:hover{transform:translateY(-2px)}
.win.is-active .win-explore{background:var(--orange);color:var(--ink)}

.drag-chip{
  position:absolute;top:-17px;left:22px;transform:rotate(-3deg);
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:10px;
  background:var(--orange);color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap;
  box-shadow:0 8px 20px -6px rgb(2 10 50 / .5);pointer-events:none;
  animation:chip-bob 2.4s var(--ease-out) infinite;
  transition:opacity var(--t-med);
}
.drag-chip .ic{width:14px;height:14px}
.drag-chip.is-gone{opacity:0}
@keyframes chip-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}

.win.is-hidden{visibility:hidden}
.win.is-flash .win-chrome::after{animation:flash 1.1s var(--ease-out) 2}
@keyframes flash{0%{box-shadow:inset 0 0 0 4px var(--orange)}50%{box-shadow:inset 0 0 0 10px var(--yellow)}100%{box-shadow:inset 0 0 0 4px var(--orange)}}

/* ---------- entrada ---------- */
.intro .win{animation:win-in .9s var(--ease-out) var(--d,0ms) both}
.intro .headline span{animation:head-in 1s var(--ease-out) both}
.intro .headline span:last-child{animation-delay:.08s}
.intro .dock{animation:dock-in .8s var(--ease-out) .45s both}
@keyframes win-in{from{opacity:0;translate:0 70px}to{opacity:1;translate:0 0}}
@keyframes head-in{from{opacity:0;translate:0 .25em}to{opacity:1;translate:0 0}}
@keyframes dock-in{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}

/* ---------- dica ---------- */
.hint{
  position:fixed;left:clamp(16px,2.2vw,32px);bottom:30px;z-index:20;margin:0;
  display:flex;align-items:center;gap:14px;max-width:290px;
  font-size:16px;line-height:1.3;color:var(--cream);opacity:.88;pointer-events:none;
}
.hint-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgb(246 239 224 / .55);flex:none}
.hint-ic .ic{width:22px;height:22px}
.hint-touch{display:none}

/* ---------- minimapa ---------- */
.minimap{
  position:fixed;right:clamp(16px,2.2vw,32px);bottom:24px;z-index:20;width:200px;height:128px;
  border:1.5px dashed rgb(246 239 224 / .45);border-radius:10px;background:rgb(6 34 122 / .35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:crosshair;touch-action:none;
}
.minimap:focus-visible{box-shadow:var(--focus)}
.mm-inner{position:absolute;inset:8px;overflow:hidden}
.mm-rect{position:absolute;border-radius:2px;background:rgb(246 239 224 / .35);border:1px solid rgb(246 239 224 / .55)}
.mm-rect.is-active{background:var(--orange);border-color:var(--orange)}
.mm-title{position:absolute;border-radius:2px;background:rgb(248 244 174 / .22)}
.mm-view{position:absolute;border:1.5px solid var(--cream);border-radius:3px;background:rgb(246 239 224 / .1);box-shadow:0 0 0 999px rgb(6 34 122 / .25)}
.mm-view::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--cream)}
.mm-fit{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--cream);background:rgb(6 34 122 / .5)}
.mm-fit:hover{background:var(--cobalt-ink)}

/* ---------- dock ---------- */
.dock{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:25;
  display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:22px;
  background:var(--cream);color:var(--ink);box-shadow:var(--shadow-ui),0 0 0 1px rgb(13 21 48 / .06);
}
.dock-projects{
  display:flex;gap:6px;list-style:none;margin:0;padding:0;
  /* com muitos projetos, o dock rola na horizontal em vez de estourar a tela */
  max-width:calc(100vw - 580px);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
}
.dock-projects::-webkit-scrollbar{display:none}
.dock-projects li{scroll-snap-align:start}
.dock-proj{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px;border-radius:13px;
  transition:background-color var(--t-fast),transform var(--t-fast) var(--ease-out);
}
.dock-proj:hover{background:var(--cream-2)}
.dock-proj:active{transform:scale(.95)}
.dock-thumb{
  width:82px;height:54px;border-radius:9px;overflow:hidden;background:var(--t-bg,#222);
  box-shadow:inset 0 0 0 1px rgb(13 21 48 / .12);position:relative;
  transition:transform var(--t-fast) var(--ease-spring);
}
.dock-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
.dock-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--orange);transition:box-shadow var(--t-fast)}
.dock-proj:hover .dock-thumb{transform:translateY(-3px)}
.dock-proj[aria-current="true"] .dock-thumb::after{box-shadow:inset 0 0 0 3px var(--orange)}
.dock-label{font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:uppercase;max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft)}
.dock-proj[aria-current="true"] .dock-label{color:var(--ink)}
.dock-sep{width:1px;align-self:stretch;margin:6px 8px;background:rgb(13 21 48 / .14)}
.dock-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  height:78px;min-width:96px;padding:0 12px;border-radius:13px;font-size:13px;font-weight:600;white-space:nowrap;
  transition:background-color var(--t-fast);
}
.dock-btn:hover{background:var(--cream-2)}
.dock-home{min-width:72px}
.dock-home:active,.dock-dice:active{transform:scale(.95)}
.dock-btn .ic{width:30px;height:30px}
.dock-dice.is-rolling .dice{animation:roll .7s var(--ease-out)}
@keyframes roll{0%{transform:rotate(0) scale(1)}40%{transform:rotate(200deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}
.zoom{display:flex;align-items:center;gap:2px;height:46px;padding:0 4px;border-radius:999px;border:1.5px solid rgb(13 21 48 / .16)}
.zoom-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;transition:background-color var(--t-fast)}
.zoom-btn:hover{background:var(--cream-2)}
.zoom-btn .ic{width:16px;height:16px}
.zoom-val{min-width:48px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;font-size:15px}
.dock :focus-visible,.minimap :focus-visible{box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--cobalt)}

/* sem espaço ao lado do dock: a dica vira uma etiqueta logo acima dele */
@media (max-width:1599px){
  .hint{
    left:50%;bottom:118px;transform:translateX(-50%);max-width:none;white-space:nowrap;
    gap:8px;padding:5px 14px 5px 6px;border-radius:999px;font-size:13.5px;
    background:rgb(6 34 122 / .55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .hint-ic{width:26px;height:26px;border:0}.hint-ic .ic{width:16px;height:16px}
}
@media (max-width:1439px){
  .minimap{width:140px;height:92px}
}
@media (max-width:920px){
  .minimap{bottom:112px}
}
@media (max-width:1100px){
  .hint{bottom:96px}
  .dock-label{display:none}
  .dock-proj[aria-current="true"] .dock-label{display:block}
  .dock-thumb{width:64px;height:44px}
  .dock-btn{height:62px;min-width:76px;font-size:12px}
}

/* =========================================================
   Modo celular: janelas grandes num trilho com swipe
   ========================================================= */
.rail,.m-headline{display:none}
.app[data-mode="mobile"]{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.app[data-mode="mobile"] .viewport,
.app[data-mode="mobile"] .minimap,
.app[data-mode="mobile"] .zoom,
.app[data-mode="mobile"] .dock-zoom-sep{display:none}
.app[data-mode="mobile"] .topbar{position:sticky;padding:12px 14px;gap:6px 10px;flex-wrap:wrap;background:linear-gradient(var(--cobalt) 70%,transparent)}
.app[data-mode="mobile"] .brand{font-size:16px;padding:6px 0}
.app[data-mode="mobile"] .top-actions{gap:4px;margin-left:auto}
.app[data-mode="mobile"] .link-btn{font-size:14px;padding:8px 6px;white-space:nowrap}
.app[data-mode="mobile"] .top-actions .pill{height:38px;padding:0 12px;font-size:13.5px;gap:.35em}
.app[data-mode="mobile"] main{flex:1;display:flex;flex-direction:column;padding-bottom:120px}
.app[data-mode="mobile"] .m-headline{
  display:block;margin:6px 16px 14px;font-weight:900;font-size:clamp(40px,11.6vw,64px);line-height:.86;letter-spacing:-.055em;color:var(--yellow);
}
.app[data-mode="mobile"] .m-headline span{display:block}
.app[data-mode="mobile"] .hint{position:static;transform:none;margin:0 16px 14px;padding:0;font-size:14px;max-width:none;white-space:normal;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.app[data-mode="mobile"] .hint-ic{border:1.5px solid rgb(246 239 224 / .55)}
.app[data-mode="mobile"] .hint-ic{width:32px;height:32px}
.app[data-mode="mobile"] .hint-ic .ic{width:17px;height:17px}
.app[data-mode="mobile"] .hint-desk{display:none}
.app[data-mode="mobile"] .hint-touch{display:inline}
.app[data-mode="mobile"] .rail{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 16px 56px;
  scroll-padding:0 16px;overscroll-behavior-x:contain;scrollbar-width:none;
}
.app[data-mode="mobile"] .rail::-webkit-scrollbar{display:none}
.app[data-mode="mobile"] .win{
  position:relative;flex:0 0 min(84vw,420px);transform:none!important;scroll-snap-align:start;transition:none;
}
.app[data-mode="mobile"] .win-view{aspect-ratio:1/1}
.app[data-mode="mobile"] .win-cap{position:static;margin-top:12px;font-size:15px;white-space:normal}
.app[data-mode="mobile"] .win-explore{position:static;margin-top:12px;width:100%;justify-content:center;height:48px;font-size:16px}
.app[data-mode="mobile"] .drag-chip{display:none}
.app[data-mode="mobile"] .win-grip{display:none}
/* no trilho, a barra da janela não é alça: o swipe tem que funcionar em qualquer ponto do card */
.app[data-mode="mobile"] .win-bar{cursor:default;touch-action:auto}
.app[data-mode="mobile"] .rail{touch-action:pan-x pan-y}
.app[data-mode="mobile"] .dock{bottom:max(12px,env(safe-area-inset-bottom));padding:7px 8px;gap:2px;max-width:calc(100vw - 24px)}
.app[data-mode="mobile"] .dock-thumb{width:52px;height:38px}
.app[data-mode="mobile"] .dock-proj{padding:3px}
.app[data-mode="mobile"] .dock-projects{max-width:calc(100vw - 210px)}
.app[data-mode="mobile"] .dock-label{display:none}
.app[data-mode="mobile"] .dock-sep{margin:6px 4px}
.app[data-mode="mobile"] .dock-btn{height:52px;min-width:0;padding:0 8px;font-size:11px;gap:3px}
.app[data-mode="mobile"] .dock-btn .ic{width:24px;height:24px}
/* celulares estreitos: botões do dock só com ícone (o texto continua para leitores de tela) */
@media (max-width:440px){
  .app[data-mode="mobile"] .dock-btn{width:44px;padding:0}
  .app[data-mode="mobile"] .dock-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .app[data-mode="mobile"] .dock-projects{max-width:calc(100vw - 150px)}
  .app[data-mode="mobile"] .dock-thumb{width:48px;height:36px}
  /* topo numa linha só */
  .app[data-mode="mobile"] .topbar{flex-wrap:nowrap;gap:6px}
  .app[data-mode="mobile"] .brand{font-size:15px}
  .app[data-mode="mobile"] .link-btn{padding:8px 4px;font-size:13.5px}
  .app[data-mode="mobile"] .top-actions .pill{padding:0 11px;font-size:13px}
  /* card + botão cabem acima do dock mesmo em telas baixas */
  .app[data-mode="mobile"] .win-view{aspect-ratio:auto;height:clamp(180px,calc(100svh - 490px),420px)}
}
/* tablets em pé: dois cards visíveis, dock com rótulos */
@media (min-width:600px){
  .app[data-mode="mobile"] .win{flex-basis:min(74vw,640px)}
  .app[data-mode="mobile"] .win-view{aspect-ratio:4/3}
  .app[data-mode="mobile"] .m-headline{font-size:clamp(56px,9vw,84px)}
  .app[data-mode="mobile"] .m-headline span{display:inline}
  .app[data-mode="mobile"] .m-headline span:first-child::after{content:" "}
  .app[data-mode="mobile"] .m-headline span:nth-child(2)::after{content:"\A";white-space:pre}
  .app[data-mode="mobile"] .dock-thumb{width:64px;height:44px}
  .app[data-mode="mobile"] .dock-label{display:block;font-size:10.5px;max-width:70px}
}
/* celular deitado e telas baixas: tudo cabe na altura */
@media (max-height:520px){
  .app[data-mode="mobile"] .topbar{padding:8px 14px}
  .app[data-mode="mobile"] .m-headline{font-size:clamp(30px,5vw,44px);margin:0 16px 8px}
  .app[data-mode="mobile"] .m-headline span{display:inline}
  .app[data-mode="mobile"] .m-headline span:not(:last-child)::after{content:" "}
  .app[data-mode="mobile"] .hint{display:none}
  .app[data-mode="mobile"] .win{flex-basis:calc(clamp(110px,100svh - 230px,320px) * 1.6)}
  .app[data-mode="mobile"] .win-view{aspect-ratio:auto;height:clamp(110px,100svh - 230px,320px)}
  .app[data-mode="mobile"] .win-explore{height:34px;width:auto;padding:0 14px;font-size:13px;margin-top:6px}
  .app[data-mode="mobile"] .win-cap{margin-top:8px;font-size:13px;white-space:nowrap}
  .app[data-mode="mobile"] .cap-role{display:none}
  .app[data-mode="mobile"] .dock-label{display:none}
  /* dock vira coluna na lateral direita para liberar a altura */
  .app[data-mode="mobile"] .dock{left:auto;right:max(10px,env(safe-area-inset-right));top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;padding:6px;max-width:none;max-height:calc(100svh - 20px)}
  .app[data-mode="mobile"] .dock-projects{flex-direction:column;max-width:none;max-height:calc(100svh - 150px);overflow-y:auto}
  .app[data-mode="mobile"] .dock-sep{width:auto;height:1px;margin:3px 6px}
  .app[data-mode="mobile"] .dock-btn{width:48px;height:42px;padding:0}
  .app[data-mode="mobile"] .dock-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .app[data-mode="mobile"] .dock-thumb{width:46px;height:32px}
  .app[data-mode="mobile"] .rail{padding-right:90px;scroll-padding-right:90px}
  .app[data-mode="mobile"] main{padding-bottom:16px}
}
.rail-dots{display:none}
.app[data-mode="mobile"] .rail-dots{display:flex;justify-content:center;gap:6px;margin-top:-40px;margin-bottom:20px}
.rail-dots i{width:7px;height:7px;border-radius:99px;background:rgb(246 239 224 / .4);transition:width var(--t-med) var(--ease-out),background-color var(--t-fast)}
.rail-dots i.on{width:22px;background:var(--orange)}