/*
 * Habblit Design System — "Y2K pixel": janelas de sistema dos anos 2000 (bordas em relevo, barra de título em
 * degradê azul, botões _ □ ×, barra de progresso em blocos, céu azul), mas com respiro e tipografia atuais.
 *   <link rel="stylesheet" href="/ds/ds.css">   +   <body class="ds">
 * Referência viva: /ds/   ·   Prefixo das classes: ds-   ·   Tokens: --ds-*
 * Ícones: pixelarticons (pixel art) pelo sprite /ds/icons.svg (nunca emoji). Títulos em Pixelify Sans, texto em Inter, código em VT323.
 */
@import url("/ext/fonts.googleapis.com/inter.css");
@import url("/ds/motion.css");
@font-face { font-family: "Pixelify Sans"; font-weight: 400; font-display: swap; src: url("/ds/fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-weight: 600; font-display: swap; src: url("/ds/fonts/pixelify-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-weight: 700; font-display: swap; src: url("/ds/fonts/pixelify-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url("/ds/fonts/vt323-latin-400-normal.woff2") format("woff2"); }

:root {
    /* Marca: azul de barra de título + verde-limão e rosa de destaque (Y2K) */
    --ds-brand: #1f4fd8;
    --ds-brand-hover: #173fb3;
    --ds-brand-strong: #0b2a8a;
    --ds-brand-soft: #e3ebff;
    --ds-accent: #ff4fa3;         /* rosa: destaques, "novo", ao vivo */
    --ds-lime: #b6ff3b;           /* verde-limão: brilho, seleção da marca */
    --ds-caution: #ffd23f;        /* amarelo "caution" */

    /* Ação principal ("Jogar") e estados */
    --ds-success: #2fbf3a;
    --ds-success-hover: #26a830;
    --ds-success-edge: #137a1c;
    --ds-danger: #d93a3a;
    --ds-danger-hover: #b72d2d;
    --ds-warning: #f5a400;
    --ds-info: #2d9cdb;

    /* Superfícies: "prata" das janelas, área de trabalho azul */
    --ds-page-bg: #cfe0f7;
    --ds-desktop: linear-gradient(180deg, #3d7be0 0%, #79b4f5 38%, #cfe0f7 78%);
    --ds-surface: #ffffff;
    --ds-surface-muted: #f1f0ec;  /* corpo das janelas */
    --ds-surface-alt: #e4e2db;
    --ds-dark: #0b1840;           /* contorno e textos fortes (azul-marinho quase preto) */
    --ds-dark-2: #1c2b5e;
    --ds-border: #9aa3b5;
    --ds-border-soft: #c9ccd4;
    --ds-text: #1d2433;
    --ds-text-strong: #0b1840;
    --ds-text-muted: #5d6578;
    --ds-text-faint: #8e95a6;
    --ds-text-inverse: #ffffff;

    /* Relevo (bevel) */
    --ds-bevel-light: #ffffff;
    --ds-bevel-mid: #d4d0c8;
    --ds-bevel-dark: #7b7f8c;
    --ds-raised: inset 1px 1px 0 var(--ds-bevel-light), inset -1px -1px 0 var(--ds-bevel-dark);
    --ds-sunken: inset 1px 1px 0 var(--ds-bevel-dark), inset -1px -1px 0 var(--ds-bevel-light);
    --ds-titlebar: linear-gradient(90deg, #0b2a8a 0%, #1f4fd8 55%, #5aa8ff 100%);
    --ds-titlebar-idle: linear-gradient(90deg, #6b7386 0%, #9aa3b5 100%);

    /* Forma: cantos quase retos (pixel), sombra "dura" deslocada */
    --ds-radius-sm: 3px;
    --ds-radius: 4px;
    --ds-radius-lg: 6px;
    --ds-outline: 0 0 0 1px var(--ds-dark);
    --ds-shadow: 3px 3px 0 #0b18402e;
    --ds-shadow-lg: 6px 6px 0 #0b184040;
    --ds-font: "Inter", "Segoe UI", system-ui, sans-serif;
    /* Fonte pixel só em texto grande (títulos de página, números, logo): pequena ela não fica nítida.
       Texto de interface (títulos de janela, botões, rótulos) usa Inter forte. */
    --ds-display: "Pixelify Sans", "Inter", sans-serif;
    --ds-pixel: "Inter", "Segoe UI", sans-serif;
    --ds-mono: "VT323", ui-monospace, Consolas, monospace;

    /* Layout */
    --ds-content-width: 64rem;
    --ds-gutter: 1rem;
    --ds-gap: 1rem;
    --ds-module-header-height: 2.25rem;
    --ds-module-title-size: .9375rem;
    --ds-module-subtitle-size: .6875rem;
    --ds-header-image: url("/assets/header-carnival-refined-20261001-r2-Db6pFpiD.png");
    --ds-logo: url("/habblit/logo-2x.png"); /* logo atual (PixelLab); o caminho antigo ficou no cache de 1 ano dos navegadores */
}

/* ---------- Base ---------- */
.ds, .ds * { box-sizing: border-box; }
body.ds {
    margin: 0; font: 14px/1.5 var(--ds-font); color: var(--ds-text); -webkit-font-smoothing: antialiased;
    background: var(--ds-desktop) top / 100% 34rem no-repeat, var(--ds-page-bg);
}
/* Grade de pixels bem leve sobre o "céu" */
body.ds::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 8px 8px; }
.ds a { color: var(--ds-brand); text-underline-offset: 2px; }
.ds h1, .ds h2 { color: var(--ds-text-strong); margin: 0; font-family: var(--ds-display); font-weight: 700; letter-spacing: .01em; }
.ds h3 { color: var(--ds-text-strong); margin: 0; font-weight: 800; }
.ds ::selection { background: var(--ds-brand-strong); color: #fff; }
.ds-muted { color: var(--ds-text-muted); }
.ds-mono { font-family: var(--ds-mono); font-size: 1.05em; }
.ds-pixel { font-family: var(--ds-display); }
[hidden] { display: none !important; }

/* ---------- Estrutura: cabeçalho (logo sobre o céu) + barra de navegação estilo barra de tarefas ---------- */
.ds-header { height: 8.5rem; position: relative; }
.ds-header .ds-container { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.ds-logo { width: 15rem; height: 5rem; background: var(--ds-logo) left center / contain no-repeat; display: block; image-rendering: auto; }
.ds-header-pill { background: var(--ds-surface-muted); color: var(--ds-text-strong); border-radius: var(--ds-radius-sm); padding: .35rem .7rem; font: 600 .8125rem var(--ds-pixel);
    box-shadow: var(--ds-outline), var(--ds-raised), var(--ds-shadow); display: inline-flex; gap: .45rem; align-items: center; }
.ds-nav { background: var(--ds-surface-muted); box-shadow: 0 -1px 0 var(--ds-bevel-light) inset, 0 1px 0 var(--ds-dark), 0 2px 0 #0b184026; }
.ds-nav .ds-container { display: flex; gap: .3rem; overflow-x: auto; padding-block: .35rem; }
.ds-nav a { color: var(--ds-text); font: 600 .875rem var(--ds-pixel); text-decoration: none; padding: .35rem .8rem; border-radius: var(--ds-radius-sm); white-space: nowrap; }
.ds-nav a:hover { background: #fff; box-shadow: var(--ds-raised), var(--ds-outline); }
.ds-nav a.is-active { background: #fff; box-shadow: var(--ds-sunken), var(--ds-outline); color: var(--ds-brand-strong); }
.ds-container { width: 100%; max-width: var(--ds-content-width); margin-inline: auto; padding-inline: var(--ds-gutter); }
.ds-page { padding-block: 1.25rem 2.5rem; display: flex; flex-direction: column; gap: var(--ds-gap); }
.ds-columns { display: grid; gap: var(--ds-gap); grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr); align-items: start; }
.ds-grid { display: grid; gap: var(--ds-gap); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-gap); }
.ds-span-all { grid-column: 1 / -1; }
@media (max-width: 800px) { .ds-columns { grid-template-columns: 1fr; } .ds-header { height: 6.5rem; } .ds-logo { width: 11rem; } }

/* ---------- Janela (ds-module): barra de título + corpo prata ---------- */
.ds-module { border-radius: var(--ds-radius); background: var(--ds-surface-muted); box-shadow: var(--ds-outline), var(--ds-raised), var(--ds-shadow); padding: 3px; }
.ds-module-header { min-height: var(--ds-module-header-height); display: flex; align-items: stretch; background: var(--ds-titlebar); border-radius: 2px; position: relative; }
/* Botões _ □ × decorativos no canto da barra */
.ds-module-header::after { content: ""; flex: 0 0 3.9rem; margin: .45rem .45rem .45rem 0; background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 16'%3E%3Cg shape-rendering='crispEdges'%3E%3Cg id='b'%3E%3Crect width='18' height='16' fill='%23f1f0ec'/%3E%3Cpath d='M0 0h18v1H1v15H0z' fill='%23fff'/%3E%3Cpath d='M17 1h1v15H0v-1h17z' fill='%230b1840'/%3E%3C/g%3E%3Cuse href='%23b' x='22'/%3E%3Cuse href='%23b' x='44'/%3E%3Cpath d='M5 11h7v2H5z' fill='%230b1840'/%3E%3Cpath d='M27 4h8v8h-8zM28 6v5h6V6z' fill='%230b1840'/%3E%3Cpath d='M49 4h2l1.5 2L54 4h2l-2.5 4 2.5 4h-2l-1.5-2-1.5 2h-2l2.5-4z' fill='%230b1840'/%3E%3C/g%3E%3C/svg%3E") right center / contain no-repeat; }
.ds-module-icon { width: var(--ds-module-header-height); flex: 0 0 var(--ds-module-header-height); display: flex; align-items: center; justify-content: center; color: #fff; }
.ds-module-heading { flex: auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem .6rem .3rem 0; }
.ds-module-title { font: 800 var(--ds-module-title-size)/1.1 var(--ds-pixel); color: #fff; letter-spacing: .01em; text-shadow: 1px 1px 0 #0b184080; }
.ds-module-subtitle { font-size: var(--ds-module-subtitle-size); color: #ffffffc2; font-weight: 500; line-height: 1.2; margin-top: .1rem; }
.ds-module-body { background: var(--ds-surface-muted); padding: .9rem .75rem .75rem; }
.ds-module-body.is-flush { padding: 3px 0 0; }
/* Variante clara: janela inativa (barra cinza) */
.ds-module.is-light .ds-module-header { background: var(--ds-titlebar-idle); }

/* ---------- Botões: relevo de sistema, primário em azul brilhante, "Jogar" em verde ---------- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: 600 .875rem/1 var(--ds-pixel); padding: .55rem 1rem; border: 0;
    border-radius: var(--ds-radius-sm); background: var(--ds-surface-muted); color: var(--ds-text-strong); cursor: pointer; text-decoration: none;
    box-shadow: var(--ds-outline), var(--ds-raised), 2px 2px 0 #0b184033; transition: filter .1s, transform .05s; }
.ds-btn:hover { filter: brightness(1.04); }
.ds-btn:active { box-shadow: var(--ds-outline), var(--ds-sunken); transform: translate(1px, 1px); }
.ds-btn:focus-visible { outline: 1px dotted var(--ds-dark); outline-offset: -5px; }
.ds-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: var(--ds-outline), var(--ds-raised); }
.ds-btn-primary { background: linear-gradient(180deg, #5d93ff 0%, #2a5fe6 48%, #1f4fd8 52%, #1a44c0 100%); color: #fff; text-shadow: 1px 1px 0 #0b184066; box-shadow: var(--ds-outline), inset 1px 1px 0 #ffffff80, inset -1px -1px 0 #0b2a8a, 2px 2px 0 #0b184033; }
.ds-btn-success { background: linear-gradient(180deg, #8cf06a 0%, #3fd14a 48%, #2fbf3a 52%, #24a52e 100%); color: #fff; text-transform: uppercase; letter-spacing: .04em; text-shadow: 1px 1px 0 #0b3a1080;
    box-shadow: var(--ds-outline), inset 1px 1px 0 #ffffff99, inset -1px -2px 0 var(--ds-success-edge), 2px 2px 0 #0b184033; }
.ds-btn-danger { background: linear-gradient(180deg, #ff7a7a 0%, #e04646 50%, #c73333 100%); color: #fff; box-shadow: var(--ds-outline), inset 1px 1px 0 #ffffff80, inset -1px -1px 0 #8a1c1c, 2px 2px 0 #0b184033; }
.ds-btn-dark { background: linear-gradient(180deg, #2c3d78, var(--ds-dark)); color: #fff; box-shadow: var(--ds-outline), inset 1px 1px 0 #ffffff40, 2px 2px 0 #0b184033; }
.ds-btn-sm { padding: .35rem .6rem; font-size: .75rem; }
.ds-btn-block { width: 100%; }

/* ---------- Formulários: campos "afundados" ---------- */
.ds-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; }
.ds-label { font: 600 .8125rem var(--ds-pixel); color: var(--ds-text-strong); }
.ds-input, .ds-select, .ds-textarea { width: 100%; font: 500 .875rem var(--ds-font); color: var(--ds-text); background: #fff; border: 0; border-radius: 2px; padding: .5rem .65rem;
    box-shadow: 0 0 0 1px var(--ds-border), var(--ds-sunken); transition: box-shadow .1s; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--ds-dark), var(--ds-sunken), 0 0 0 3px var(--ds-brand-soft); }
.ds-input.is-invalid { box-shadow: 0 0 0 1px var(--ds-danger), var(--ds-sunken), 0 0 0 3px #ffdcdc; }
.ds-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--ds-text); cursor: pointer; }
.ds-check input { accent-color: var(--ds-brand); width: 1rem; height: 1rem; }
.ds-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.ds-row > .ds-field { flex: 1; min-width: 7rem; }

/* ---------- Abas (na barra de título), selos, listas ---------- */
.ds-tabs { display: inline-flex; gap: 2px; }
.ds-tabs button { font: 600 .75rem var(--ds-pixel); border: 0; border-radius: 2px; padding: .25rem .55rem; color: #fff; background: #ffffff26; cursor: pointer; box-shadow: inset 1px 1px 0 #ffffff40; }
.ds-tabs button.is-active { background: var(--ds-surface-muted); color: var(--ds-text-strong); box-shadow: var(--ds-raised); }
.ds-badge { display: inline-flex; align-items: center; gap: .25rem; font: 600 .6875rem/1 var(--ds-pixel); padding: .22rem .45rem; border-radius: 2px; background: #fff; color: var(--ds-text-strong); box-shadow: 0 0 0 1px currentColor; }
.ds-badge.is-brand { color: var(--ds-brand); background: var(--ds-brand-soft); }
.ds-badge.is-success { color: #157a1d; background: #e3fbe1; } .ds-badge.is-danger { color: #b42323; background: #ffe4e4; }
.ds-badge.is-warning { color: #8a5a00; background: #fff4c7; } .ds-badge.is-live { color: #fff; background: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-dark); animation: ds-blink 1s steps(2, end) infinite; }
@keyframes ds-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .6; } }
.ds-list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px var(--ds-border), var(--ds-sunken); overflow: auto; max-height: 22rem; }
.ds-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 3rem; padding: .45rem .7rem; border-top: 1px dotted var(--ds-border-soft); }
.ds-list li:first-child { border-top: 0; }
.ds-list li:hover { background: var(--ds-brand-soft); }
.ds-list .ds-empty { justify-content: center; color: var(--ds-text-faint); font-size: .8125rem; }
.ds-list-title { font-weight: 700; font-size: .875rem; color: var(--ds-text-strong); }
.ds-list-sub { font-size: .75rem; color: var(--ds-text-muted); }

/* ---------- Números, avisos, avatar, código, progresso ---------- */
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem; }
.ds-stat { background: #fff; border-radius: 2px; padding: .55rem .7rem; box-shadow: 0 0 0 1px var(--ds-border), var(--ds-sunken); }
.ds-stat b { display: block; font: 700 1.6rem/1.05 var(--ds-display); color: var(--ds-brand-strong); }
.ds-stat span { font-size: .75rem; color: var(--ds-text-muted); font-weight: 500; }
/* Aviso = mensagem do sistema */
.ds-alert { display: block; border-radius: 2px; padding: .6rem .75rem; font-size: .875rem; background: #fff; color: var(--ds-text-strong);
    box-shadow: 0 0 0 1px var(--ds-dark), inset 4px 0 0 var(--ds-brand), 2px 2px 0 #0b184026; }
.ds-alert.is-success { box-shadow: 0 0 0 1px var(--ds-dark), inset 4px 0 0 var(--ds-success), 2px 2px 0 #0b184026; }
.ds-alert.is-danger { color: #8a1c1c; box-shadow: 0 0 0 1px var(--ds-dark), inset 4px 0 0 var(--ds-danger), 2px 2px 0 #0b184026; }
.ds-avatar { width: 3rem; height: 3rem; border-radius: 2px; background: linear-gradient(#bfe0ff, #e8f3ff); overflow: hidden; position: relative; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--ds-border), var(--ds-sunken); }
.ds-avatar img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); image-rendering: pixelated; }
.ds-code { font: 400 2.6rem/1 var(--ds-mono); letter-spacing: .35rem; text-align: center; color: var(--ds-lime); padding: .55rem; background: #0b1840; border-radius: 2px; box-shadow: 0 0 0 1px var(--ds-dark), var(--ds-sunken); text-shadow: 0 0 6px #b6ff3b66; }
/* Progresso em blocos ("Loading Design.PNG") */
.ds-meter { height: 1rem; padding: 2px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px var(--ds-border), var(--ds-sunken); overflow: hidden; }
.ds-meter > div { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--ds-brand-strong) 0 8px, transparent 8px 10px); transition: width .08s steps(6); }
.ds-dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .6rem 0 0; font-size: .875rem; }
.ds-dl dt { color: var(--ds-text-muted); font-weight: 600; } .ds-dl dd { margin: 0; font-family: var(--ds-mono); font-size: 1.1em; word-break: break-all; }
.ds-gate { max-width: 28rem; margin: 3rem auto; }

/* ---------- Tabela, menu lateral (estilo menu Iniciar), janela de diálogo ---------- */
.ds-table-wrap { overflow: auto; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px var(--ds-border), var(--ds-sunken); }
.ds-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ds-table th { text-align: left; font: 600 .75rem var(--ds-pixel); color: var(--ds-text-strong); background: var(--ds-surface-muted); padding: .45rem .7rem; box-shadow: var(--ds-raised); white-space: nowrap; }
.ds-table td { padding: .45rem .7rem; border-top: 1px dotted var(--ds-border-soft); vertical-align: middle; }
.ds-table tr:first-child td { border-top: 0; }
.ds-table tbody tr:hover { background: var(--ds-brand-soft); }
.ds-table tr.is-clickable { cursor: pointer; }
.ds-table .ds-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-side { display: grid; grid-template-columns: 13.5rem 1fr; gap: 1rem; align-items: start; }
.ds-sidenav { display: flex; flex-direction: column; gap: 2px; background: var(--ds-surface-muted); border-radius: var(--ds-radius); padding: 4px 4px 4px 2.1rem; position: sticky; top: .8rem;
    box-shadow: var(--ds-outline), var(--ds-raised), var(--ds-shadow); }
/* Faixa vertical da marca, como no menu Iniciar */
.ds-sidenav::before { content: "Habblit"; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1.6rem; background: linear-gradient(0deg, #0b2a8a, #1f4fd8 60%, #5aa8ff);
    color: #fff; font: 700 1rem var(--ds-display); writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: flex-start; padding-top: .5rem; border-radius: 2px; letter-spacing: .06em; }
.ds-sidenav { position: sticky; }
.ds-sidenav button, .ds-sidenav a { all: unset; cursor: pointer; display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 2px; color: var(--ds-text-strong); font: 600 .875rem var(--ds-pixel); }
.ds-sidenav button:hover, .ds-sidenav a:hover { background: var(--ds-brand); color: #fff; }
.ds-sidenav .is-active { background: var(--ds-brand-strong); color: #fff; }
.ds-pager { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .6rem; font-size: .8125rem; color: var(--ds-text-muted); }
.ds-modal { position: fixed; inset: 0; background: #0b184066; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; z-index: 50; overflow: auto;
    background-image: radial-gradient(#0b184033 1px, transparent 1px); background-size: 3px 3px; }
.ds-modal > .ds-module { width: min(44rem, 100%); box-shadow: var(--ds-outline), var(--ds-raised), var(--ds-shadow-lg); }
textarea.ds-input { min-height: 8rem; resize: vertical; font-family: var(--ds-mono); font-size: 1rem; }
@media (max-width: 760px) { .ds-side { grid-template-columns: 1fr; } .ds-sidenav { position: static; flex-direction: row; overflow-x: auto; padding-left: 4px; } .ds-sidenav::before { display: none; } }

/* ---------- Ícones (pixelarticons, sprite /ds/icons.svg — gerado por build-icons.mjs) ----------
   <svg class="ds-icon"><use href="/ds/icons.svg#nome"/></svg>   Nada de emoji: sempre ícone. */
.ds-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: inline-block; vertical-align: -.2em; color: inherit; }
.ds-module-icon .ds-icon { width: 1.15rem; height: 1.15rem; color: #fff; filter: drop-shadow(1px 1px 0 #0b184080); }
.ds-sidenav .ds-icon { width: 1.1rem; height: 1.1rem; }
.ds-btn .ds-icon { width: 1rem; height: 1rem; }

@media (prefers-reduced-motion: reduce) { html:not(.hb-motion-on) .ds-badge.is-live { animation: none; } html:not(.hb-motion-on) .ds-btn, html:not(.hb-motion-on) .ds-meter > div { transition: none; } }