/* Tokens de cor, tipografia e o fundo de azulejo da tasca. */

:root {
    --azulejo-deep: #123a5e;
    --azulejo-mid: #1f5c8a;
    --tijolo: #c1442e;
    --tijolo-dark: #9c3423;
    --rosa: #c1467e;
    --rosa-dark: #9c3564;
    --massa: #f6ecd9;
    --massa-card: #fffaf0;
    --tinta: #23211d;
    --ok: #4c8c4a;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Altura do ecrã, não do viewport.
 *
 * Numa app afixada em iOS o viewport de layout é mais curto do que o ecrã pela
 * altura da barra de estado, e o que sobra em baixo ficava uma faixa lisa — aqui
 * nunca se deu por ela porque tem a cor do conteúdo. O `--viewport-gap`
 * (lib/arcade/standalone-fit.js) é essa folga, e é 0 em todo o lado menos aí.
 *
 * Não pode haver `overflow: hidden` nem `overflow-x: hidden` aqui: o overflow da
 * raiz manda no viewport (e, se a raiz for `visible`, manda o do body), e um par
 * com `hidden` faz do viewport um contentor de scroll, que recorta no fim dele e
 * traz a faixa de volta. O `clip` abaixo corta na horizontal sem nada disso.
 *
 * Quem trava o arrasto é o `touch-action: none`, como nos outros jogos: sem ele
 * o dedo arrastava a página inteira de lado — no menu, nas janelas e também em
 * jogo — e a borracha do Safari deixava à vista a faixa lisa ao lado da tasca.
 * O `overscroll-behavior: none` é a rede para o que o `touch-action` não apanha:
 * não se herda, por isso as caixas de scroll cá dentro (a fila, a bancada, as
 * grelhas das janelas) levam a sua própria contenção nas folhas respetivas. */
html, body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100dvh + var(--viewport-gap, 0px));
    margin: 0;
    padding: 0;
    touch-action: none;
    overscroll-behavior: none;
}

body {
    font-family: 'Nunito', system-ui, sans-serif;
    background: var(--massa);
    color: var(--tinta);
    overflow-x: clip;
    /* O `-webkit-` é o que conta em iOS: o Safari só há pouco aceita esta
       propriedade sem prefixo, e é lá que o toque demorado abre a lupa. */
    -webkit-user-select: none;
    user-select: none;
}

/* O texto do campo do nome tem de poder ser selecionado para se editar. */
input {
    -webkit-user-select: text;
    user-select: text;
}

.azulejo-bg {
    background-color: var(--azulejo-deep);
    background-image: radial-gradient(circle at 10px 10px, rgba(255,255,255,0.10) 2.5px, transparent 3px), radial-gradient(circle at 30px 30px, rgba(255,255,255,0.10) 2.5px, transparent 3px), linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
    flex: 0 0 auto;
}

#app {
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    height: 100vh;
    height: calc(100dvh + var(--viewport-gap, 0px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}