:root{--bg: #fff8e1;--bar: #ffe082;--ink: #3e2723;--btn: #ffffff;--sel: #3e2723}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}#app{height:100%;display:flex;flex-direction:column}.inicio{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px}.inicio h1{font-size:3rem;margin:0}.iniciar{font-size:2.2rem;font-weight:800;padding:24px 56px;border-radius:48px;border:6px solid var(--ink);background:var(--bar);color:var(--ink);cursor:pointer;box-shadow:0 6px 0 var(--ink)}.iniciar:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}.galeria{padding:16px;overflow-y:auto;touch-action:pan-y;height:100%}.galeria h1{text-align:center;font-size:2rem;margin:8px 0 16px}.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.cartao{background:var(--btn);border:4px solid var(--bar);border-radius:24px;padding:8px;display:flex;flex-direction:column;align-items:center;cursor:pointer}.cartao:active{transform:scale(.96)}.cartao canvas{width:100%;aspect-ratio:1}.cartao span{font-weight:700;font-size:1.1rem;margin-top:4px}.jogo{display:flex;flex-direction:column;height:100%}.topo{display:flex;gap:12px;padding:8px 12px;background:var(--bar);align-items:center}.topo .titulo{flex:1;font-weight:800;font-size:1.4rem;text-align:center}.botao{width:64px;height:64px;border-radius:50%;border:4px solid var(--ink);background:var(--btn);font-size:2rem;display:grid;place-items:center;cursor:pointer}.botao:active{transform:scale(.92)}.area{flex:1;display:grid;place-items:center;padding:8px;min-height:0}.area canvas{max-width:100%;max-height:100%;background:#fff;border-radius:16px;box-shadow:0 4px 16px #00000026;touch-action:none}.paleta{display:flex;flex-wrap:wrap;gap:12px;padding:12px 16px;background:var(--bar);justify-content:center}.cor{flex:0 0 auto;width:64px;height:64px;border-radius:50%;border:5px solid #fff;box-shadow:0 2px 6px #0000004d;cursor:pointer;transition:transform .1s}.cor.ativa{border-color:var(--sel);transform:scale(1.2)}@media(orientation:landscape)and (max-height:600px){.botao{width:52px;height:52px;font-size:1.6rem}.cor{width:52px;height:52px}}