:root{
  --color-base:#4b156d;
  --color-brand:#9b2ce1;
  --color-border:#6a2491;
  --container-max:1100px;
}

/* Reset + travar scroll vertical do body */
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
html{font-size:16px}
body{
  font-family:'Gotham Book',sans-serif;
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--color-base); color:#333; line-height:1.6; transition:background-color .25s ease;
}

/* ====== CONTAINER ====== */
.container{
  background:#fff; width:clamp(320px, 96vw, var(--container-max));
  height: calc(100vh - 36px);
  margin:18px auto; padding:22px; border-radius:16px; border:2px solid var(--color-border);
  box-shadow:0 8px 20px rgba(0,0,0,.15); display:flex; flex-direction:column; align-items:center;
  /* antes: overflow:hidden; — substituído para evitar cortes dos controles */
  overflow: auto;
}

/* Topo */
.header-logos{display:flex; justify-content:center; align-items:center; gap:18px; margin-bottom:10px}
.header-logos .logo{max-height:64px; object-fit:contain}

/* Títulos / botões grandes */
h1,.category-button,.action-buttons button,.action-button{
  font-family:'Wicked Mouse','Mouse Memoirs',cursive; color:var(--color-brand);
  text-shadow:1px 1px 2px rgba(0,0,0,.08);
}
.center{text-align:center}
h1{margin:6px 0 14px; font-size:2.2rem; text-align:center}
h2{font-family:'Gotham Bold',sans-serif; color:#6a2491; margin:8px 0 6px}
.subtitle{font-family:'Gotham Bold',sans-serif; color:#6a2491; margin:-6px 0 10px}

/* Telas */
.selection-screen{display:none; flex-direction:column; align-items:center; gap:14px; width:100%; height:100%; overflow:auto;}
.selection-screen.active{display:flex}

/* Categorias */
.category-buttons{
  display:grid; gap:14px; width:100%;
  grid-template-columns: repeat(3, minmax(180px,1fr));
  justify-items:center;
  max-width:820px;
  margin-inline:auto;
}
.category-button{
  width:100%; padding:12px 18px; border-radius:10px; border:2px solid #ccc;
  background:#f0f0f0; color:#4b156d; cursor:pointer; transition:.2s;
  display:flex; justify-content:center; align-items:center; gap:8px; font-size:1.15rem
}
.category-button:hover{transform:translateY(-3px); box-shadow:0 6px 12px rgba(0,0,0,.15)}
.category-button[data-category="amor"]{background:#e12c2c;color:#fff;border-color:#c02020}
.category-button[data-category="amizade"]{background:#ffc73a;color:#fff;border-color:#e0ac2c}
.category-button[data-category="coragem"]{background:#3a97ff;color:#fff;border-color:#2c7ac0}
.category-button[data-category="aventura"]{background:#38b947;color:#fff;border-color:#2c9a3a}
.category-button[data-category="forca"]{background:#9b2ce1;color:#fff;border-color:#7b20c0}
/* Bella */
.category-button[data-category="bella"]{
  background:#ff5fb0;   /* rosa do botão */
  color:#fff;           /* letras brancas */
  border-color:#e04f9f; /* borda um tom mais escuro */
}


/* Thumbs */
.image-thumbnails{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:16px; width:100%; max-width:820px; justify-items:center;
}
.thumbnail-box{
  background:#f9f9f9; border:2px solid #d8a7f7; border-radius:12px; padding:12px; cursor:pointer; transition:.2s; box-shadow:0 4px 10px rgba(0,0,0,.08); display:flex; flex-direction:column; align-items:center; width:100%
}
.thumbnail-box:hover{border-color:var(--color-brand); transform:translateY(-3px) scale(1.02)}
.thumbnail-box img{width:100%; height:110px; object-fit:contain; background:#fff; border-radius:8px; padding:4px; margin-bottom:8px}
.thumbnail-box p{font-family:'Gotham Bold'; color:#6a2491; margin:0}

/* ====== TELA DE PINTURA ====== */
.paint-screen{display:none; width:100%; height:100%;}
.paint-screen.active{display:block}

/* GRID adaptável com centralização garantida */
.paint-mobile-wrap{
  display:grid; grid-template-columns:1fr; gap:12px; width:100%;
  height: calc(100% - 20px);
  align-content:start;
  justify-items:center;              /* centraliza tudo no grid */
}

/* Canvas centrado (ficará abaixo dos controles por z-index) */
.canvas-wrapper{
  position: relative;
  z-index: 1;              /* canvas abaixo */
  border:3px dashed var(--color-brand); border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center; width:100%;
  aspect-ratio:4/3; overflow:hidden; margin-inline:auto;
  max-width: 900px;
}
#paintCanvas{
  width:100%; height:100%; object-fit:contain; max-width:800px; max-height:600px;
  display:block; margin:0 auto;
  touch-action:none;                 /* recebe gestos sem arrastar a página */
}

/* botão desfazer — sempre por cima do canvas */
.undo-btn{
  position:absolute; top:8px; right:8px;
  background:#000; border:2px solid #000; color:#fff;
  padding:6px 10px; border-radius:8px; font-family:'Gotham Bold'; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  z-index: 3;                        /* garante clique acima do canvas */
}
.undo-btn:hover{ background:#111; border-color:#111; }

/* Controles — acima do canvas por z-index */
.controls-panel{
  position: relative;
  z-index: 2;              /* controles acima */
  display:grid; grid-template-columns:1fr; gap:10px; padding-top:8px; width:100%;
  max-width:900px;
}
.brush-settings,.color-palette,.action-buttons{
  background:#f9f9f9; border-radius:10px; box-shadow:0 2px 5px rgba(0,0,0,.05);
  padding:10px; display:flex; flex-direction:column; gap:10px; align-items:center
}
.control-label{font-family:'Gotham Bold'; color:#6a2491; display:flex; align-items:center; gap:8px}
.px-badge{font-family:'Gotham Bold'; color:#6a2491; background:#fff; border:1px solid #e7d9f7; padding:2px 8px; border-radius:999px}
.control-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; width:100%}

/* Range */
input[type="range"]{width:100%; -webkit-appearance:none; height:10px; background:#d8a7f7; border-radius:5px; outline:none; touch-action: pan-y;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--color-brand); border:2px solid #fff; cursor:grab}
input[type="range"]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:var(--color-brand); border:2px solid #fff; cursor:grab}

/* Paleta */
.color-palette{width:100%}
.colors-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:6px; width:100%; justify-items:center}
.color-box{width:34px; height:34px; border-radius:50%; border:3px solid transparent; box-shadow:0 2px 4px rgba(0,0,0,.1); cursor:pointer}
.color-box:hover{border-color:var(--color-brand)}
.color-box.active{border-color:#4b156d; transform:scale(1.06)}

/* Ações */
.action-buttons{gap:10px}
.action-buttons button,.action-button{
  width:100%; padding:12px 18px; border:none; border-radius:10px; background:var(--color-brand); color:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,.1); cursor:pointer; transition:.2s; font-family:'Gotham Bold'
}
.action-buttons button:hover,.action-button:hover{background:#6a2491; transform:translateY(-2px)}

/* Toggle ferramenta */
.tool-toggle{display:flex; gap:8px; align-items:center; justify-content:flex-start}
.tool-btn{
  border:2px solid #e7d9f7; background:#fff; color:#6a2491; border-radius:10px;
  padding:8px 12px; cursor:pointer; font-family:'Gotham Bold';
  box-shadow:0 2px 4px rgba(0,0,0,.06); transition:.2s;
}
.tool-btn:hover{transform:translateY(-1px)}
.tool-btn.active{background:var(--color-brand); color:#fff; border-color:var(--color-brand)}

/* Cursor quando estiver em modo preencher (aplicado apenas ao canvas) */
.canvas-wrapper.fill-mode #paintCanvas{
  cursor: url('data:image/svg+xml;utf8,<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M8 4l10 10-6 6L2 10l6-6zm14 14a4 4 0 118 0 4 4 0 01-8 0z" fill="black"/></svg>') 4 4, crosshair;
}

/* Rodapé */
.footer{
  margin-top:auto; background:#310c4a; color:#fff; text-align:center; padding:10px;
  height: 36px; display:flex; align-items:center; justify-content:center;
}

/* ====== DESKTOP ====== */
@media (min-width: 1024px){
  h1{font-size:2.4rem}
  .paint-mobile-wrap{
    grid-template-columns: 1.2fr .8fr;
    grid-auto-rows: min-content;
  }
}

/* ====== MOBILE ====== */
@media (max-width: 768px){
  .container{padding:16px}
  h1{font-size:1.9rem}

  /* Grid em duas linhas: 1) canvas  2) controles — tudo centralizado */
  .paint-mobile-wrap{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap:12px;
    width:100%;
    height:auto;               /* evita esmagar e sobrepor itens */
    place-items: center;       /* centraliza canvas e controles */
    align-content: start;
  }

  /* Canvas estável e centralizado */
  .canvas-wrapper{
    max-width: 100%;
    width: 100%;
    max-height: 48vh;          /* mais confortável para sobrar espaço aos controles */
    margin: 0 auto;
  }

  #paintCanvas{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    margin:0 auto;
    touch-action:none;
  }

  .controls-panel{
    width:100%;
    max-width: 900px;
  }

  .colors-grid{grid-template-columns:repeat(8,1fr)}
  .color-box{width:28px; height:28px}

  .category-buttons{grid-template-columns: repeat(2, minmax(140px,1fr))}
}

/* Muito pequeno */
@media (max-width: 420px){
  .colors-grid{grid-template-columns:repeat(7,1fr)}
  .category-buttons{grid-template-columns: 1fr}
}