.termo-shell{
  width:min(760px,100%);
  padding-top:10px;
}

.termo-brand-mark{
  width:42px;height:42px;flex:0 0 42px;border-radius:9px;
  display:grid;place-items:center;background:var(--green);color:#fff;
  font-size:24px;font-weight:1000;box-shadow:0 2px 0 var(--shadow)
}

.termo-card{
  padding-bottom:8px;
  background:transparent;
}

.termo-card .game-title{
  margin-bottom:9px;
}

.termo-info{
  width:min(430px,100%);
  margin:0 auto 8px;
}

.termo-legend{
  display:flex;justify-content:center;gap:13px;flex-wrap:wrap;
  margin:2px 0 12px;color:var(--muted);font-size:9px;font-weight:800
}
.termo-legend span{display:flex;align-items:center;gap:5px}
.termo-legend i{width:12px;height:12px;border-radius:2px;border:1px solid var(--line)}
.legend-correct{background:#538d4e}
.legend-present{background:#b59f3b}
.legend-absent{background:#657187}

.termo-board{
  width:min(430px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-rows:repeat(6,1fr);
  gap:5px
}
.termo-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px
}
.termo-cell{
  aspect-ratio:1/1;
  border:2px solid var(--line);
  border-radius:6px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb,var(--surface-2) 94%,transparent);
  color:var(--text);
  font-size:clamp(25px,6vw,38px);
  line-height:1;
  font-weight:1000;
  text-transform:uppercase;
  transition:transform .12s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease
}
.termo-cell.filled{
  border-color:color-mix(in srgb,var(--text) 36%,var(--line));
  transform:scale(1.015)
}
.termo-cell.correct{background:#538d4e;border-color:#538d4e;color:#fff}
.termo-cell.present{background:#b59f3b;border-color:#b59f3b;color:#fff}
.termo-cell.absent{background:#657187;border-color:#657187;color:#fff}
.termo-cell.editable{cursor:pointer}
.termo-cell.editable:hover{border-color:color-mix(in srgb,var(--green) 58%,var(--line))}
.termo-cell.editing{
  border-color:var(--green);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent);
  transform:scale(1.035)
}
.termo-cell.editable:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.termo-row.shake{animation:termShake .32s ease}
@keyframes termShake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

.termo-message{
  min-height:20px;
  margin:8px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  font-weight:800
}
.termo-message.error{color:var(--red)}
.termo-message.success{color:var(--green)}

.termo-keyboard{
  display:grid;
  gap:5px;
  width:min(560px,100%);
  margin:clamp(20px,6vh,64px) auto 0
}
.termo-key-row{
  display:flex;
  justify-content:center;
  gap:4px
}
.termo-key{
  height:50px;
  min-width:0;
  flex:1;
  padding:0 3px;
  border:1px solid color-mix(in srgb,var(--line) 78%,transparent);
  border-radius:6px;
  background:var(--pill);
  color:var(--text);
  font-size:15px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:none;
  transition:transform .08s ease,background .15s ease
}
.termo-key.wide{flex:1.55;font-size:18px}
.termo-key.correct{background:#538d4e;border-color:#538d4e;color:#fff}
.termo-key.present{background:#b59f3b;border-color:#b59f3b;color:#fff}
.termo-key.absent{background:#657187;border-color:#657187;color:#fff}
.termo-key:active{transform:translateY(1px)}

.termo-submit{
  width:min(560px,100%);
  min-height:52px;
  margin:6px auto 0;
  display:block;
  border:2px solid color-mix(in srgb,var(--line) 85%,var(--text) 15%);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text);
  font-size:15px;
  font-weight:1000;
  letter-spacing:.02em;
  cursor:pointer
}
.termo-submit:hover{background:var(--pill-active)}

.termo-reset-test{
  display:block;
  margin:9px auto 0;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  cursor:pointer
}
.termo-reset-test:hover{color:var(--text);background:var(--surface-2)}

.termo-result{
  width:min(560px,100%);
  margin:14px auto 0;
  padding:16px 14px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 12px 40px var(--shadow)
}
.termo-result h2{margin:4px 0 14px;font-size:30px;letter-spacing:.12em}
.termo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 13px}
.termo-stats div{padding:9px 4px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.termo-stats strong{display:block;font-size:18px}
.termo-stats span{display:block;margin-top:3px;color:var(--muted);font-size:8px;font-weight:800}

/* Paleta inspirada no visual enviado pelo usuário. */
body[data-theme="grafite"] .termo-card .game-title{color:#f3f3f3}
body[data-theme="grafite"] .termo-info{
  background:#202428;
  border-color:#333a40;
  box-shadow:none
}
body[data-theme="grafite"] .termo-legend{display:none}
body[data-theme="grafite"] .termo-cell{
  background:#191d21;
  border-color:#252b30;
  color:#f5f5f5
}
body[data-theme="grafite"] .termo-cell.filled{border-color:#3d454c}
body[data-theme="grafite"] .termo-cell.correct{background:#2f6f2d;border-color:#2f6f2d}
body[data-theme="grafite"] .termo-cell.present{background:#c39b0b;border-color:#c39b0b}
body[data-theme="grafite"] .termo-cell.absent{background:#171b1f;border-color:#171b1f}
body[data-theme="grafite"] .termo-key{
  background:#12161a;
  border-color:#20262b;
  color:#fff
}
body[data-theme="grafite"] .termo-key.correct{background:#2f6f2d;border-color:#2f6f2d}
body[data-theme="grafite"] .termo-key.present{background:#c39b0b;border-color:#c39b0b}
body[data-theme="grafite"] .termo-key.absent{background:#2f353a;border-color:#2f353a}
body[data-theme="grafite"] .termo-submit{
  background:#171b1f;
  border-color:#515960;
  color:#fff
}
body[data-theme="grafite"] .termo-submit:hover{background:#1d2227}
body[data-theme="grafite"] .termo-result{
  background:#181c20;
  border-color:#333a40
}

@media(max-width:600px){
  .termo-shell{padding-left:12px;padding-right:12px}
  .termo-board{width:min(390px,94vw)}
  .termo-keyboard{margin-top:28px}
}

@media(max-width:420px){
  .termo-board{width:min(350px,94vw);gap:4px}
  .termo-row{gap:4px}
  .termo-cell{border-radius:5px;font-size:clamp(23px,8vw,32px)}
  .termo-keyboard{gap:4px}
  .termo-key-row{gap:3px}
  .termo-key{height:46px;padding:0 2px;font-size:13px;border-radius:5px}
  .termo-key.wide{font-size:16px}
  .termo-submit{min-height:49px}
  .termo-legend{gap:8px}
}


/* Layout responsivo sem scroll: todo o Termo cabe na viewport. */
html,body{
  height:100%;
  overflow:hidden;
}

.termo-shell{
  --term-cell:min(
    66px,
    calc((100vw - 46px)/5),
    calc((100dvh - 345px)/6)
  );
  width:min(760px,100%);
  height:100dvh;
  min-height:0;
  padding:5px 12px 6px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.termo-shell .game-switcher{
  flex:0 0 auto;
  min-height:27px;
  margin:0 auto 2px;
}

.termo-shell .game-switcher-link{
  min-height:26px;
  padding:0 9px;
  font-size:9px;
}

.termo-shell .topbar{
  flex:0 0 auto;
  min-height:45px;
  margin:0 0 1px;
  grid-template-columns:36px 1fr 36px;
}

.termo-shell .theme-toggle,
.termo-shell .day-chip{
  width:34px;
  height:34px;
}

.termo-shell .palette-icon{transform:scale(.88)}

.termo-shell .termo-brand-mark{
  width:34px;
  height:34px;
  flex-basis:34px;
  font-size:20px;
}

.termo-shell .brand{gap:7px}
.termo-shell .brand h1{font-size:19px}
.termo-shell .brand p{margin-top:2px;font-size:8px}

.termo-card{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.termo-card .game-title{
  flex:0 0 auto;
  margin:0 0 4px;
  font-size:14px;
}

.termo-info{
  flex:0 0 auto;
  width:min(430px,100%);
  margin:0 auto 4px;
  padding:5px 6px;
  border-radius:8px;
}

.termo-info .info-item span{
  margin-bottom:1px;
  font-size:7px;
}
.termo-info .info-item strong{font-size:10px}

.termo-legend{
  flex:0 0 auto;
  margin:0 0 4px;
  font-size:8px;
}

.termo-board{
  flex:0 0 auto;
  width:calc(var(--term-cell)*5 + 16px);
  margin:0 auto;
  gap:4px;
}

.termo-row{
  grid-template-columns:repeat(5,var(--term-cell));
  gap:4px;
}

.termo-cell{
  width:var(--term-cell);
  height:var(--term-cell);
  aspect-ratio:auto;
  border-radius:5px;
  font-size:clamp(20px,calc(var(--term-cell)*.50),34px);
}

.termo-message{
  flex:0 0 auto;
  min-height:14px;
  margin:2px 0 0;
  line-height:14px;
  font-size:8px;
}

.termo-keyboard{
  flex:0 0 auto;
  width:min(540px,100%);
  gap:3px;
  margin:auto auto 0;
}

.termo-key-row{gap:3px}

.termo-key{
  height:clamp(34px,4.5dvh,46px);
  border-radius:5px;
  padding:0 2px;
  font-size:13px;
}

.termo-key.wide{flex:1.45}

.termo-key.delete-key{
  display:grid;
  place-items:center;
  padding:0;
}

.termo-key.delete-key svg{
  width:21px;
  height:21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.termo-submit{
  flex:0 0 auto;
  width:min(540px,100%);
  height:clamp(38px,4.8dvh,46px);
  min-height:0;
  margin:4px auto 0;
  border-radius:5px;
  font-size:13px;
}

.termo-reset-test{
  flex:0 0 auto;
  margin:4px auto 0;
  padding:3px 9px;
  font-size:8px;
  line-height:1.2;
}

.termo-shell .footer-note{display:none}

body.termo-finished .termo-keyboard,
body.termo-finished .termo-submit{
  display:none;
}

body.termo-finished .termo-result{
  margin:6px auto auto;
  padding:10px 12px;
}

body.termo-finished .termo-result h2{
  margin:2px 0 7px;
  font-size:24px;
}

body.termo-finished .termo-stats{margin-bottom:7px}

/* Celulares baixos: comprime cabeçalho e tabuleiro automaticamente. */
@media(max-width:600px){
  .termo-shell{
    --term-cell:min(
      60px,
      calc((100vw - 34px)/5),
      calc((100dvh - 315px)/6)
    );
    padding:3px 8px 5px;
  }
  .termo-shell .game-switcher{min-height:24px;margin-bottom:1px}
  .termo-shell .game-switcher-link{min-height:23px;font-size:8px;padding:0 8px}
  .termo-shell .topbar{min-height:40px;grid-template-columns:31px 1fr 31px}
  .termo-shell .theme-toggle,
  .termo-shell .day-chip{width:30px;height:30px}
  .termo-shell .termo-brand-mark{width:30px;height:30px;flex-basis:30px;font-size:18px}
  .termo-shell .brand h1{font-size:17px}
  .termo-shell .brand p{font-size:7px}
  .termo-card .game-title{font-size:12px;margin-bottom:3px}
  .termo-info{padding:4px 5px;margin-bottom:3px}
  .termo-info .info-item span{font-size:6.5px}
  .termo-info .info-item strong{font-size:9px}
  .termo-legend{display:none}
  .termo-board{gap:3px;width:calc(var(--term-cell)*5 + 12px)}
  .termo-row{gap:3px}
  .termo-message{min-height:12px;line-height:12px;font-size:7.5px;margin-top:1px}
  .termo-keyboard{gap:3px}
  .termo-key{height:clamp(32px,4.4dvh,42px);font-size:12px}
  .termo-submit{height:clamp(36px,4.6dvh,42px);font-size:12px;margin-top:3px}
  .termo-reset-test{margin-top:3px;padding:2px 8px;font-size:7px}
}

@media(max-height:650px){
  .termo-shell{
    --term-cell:min(
      52px,
      calc((100vw - 34px)/5),
      calc((100dvh - 285px)/6)
    );
  }
  .termo-shell .topbar{min-height:36px}
  .termo-shell .brand p{display:none}
  .termo-card .game-title{font-size:11px}
  .termo-info{padding:3px 5px}
  .termo-message{display:none}
  .termo-key{height:30px}
  .termo-submit{height:34px}
}


/* Ajustes finais de interação e proporção. */
body[data-theme] .termo-cell.filled{
  border-color:color-mix(in srgb,var(--text) 36%,var(--line));
}

body[data-theme="grafite"] .termo-cell.filled{
  border-color:#3d454c;
}

body[data-theme] .termo-cell.editing{
  border-color:var(--green);
  border-width:3px;
  box-shadow:none;
  transform:none;
}

body[data-theme] .termo-cell.editable:focus-visible{
  outline:none;
}

.termo-cell.correct,
.termo-cell.present,
.termo-cell.absent{
  pointer-events:none;
  cursor:default;
}

/* No desktop, o topo fica mais presente e o conjunto mais centralizado. */
@media(min-width:601px){
  body{
    display:grid;
    place-items:center;
  }

  .termo-shell{
    width:min(820px,100%);
    height:min(920px,100dvh);
    padding:10px 18px 10px;
  }

  .termo-shell .game-switcher{
    min-height:34px;
    margin-bottom:5px;
  }

  .termo-shell .game-switcher-link{
    min-height:32px;
    padding:0 12px;
    font-size:10.5px;
  }

  .termo-shell .topbar{
    min-height:58px;
    margin-bottom:3px;
    grid-template-columns:44px 1fr 44px;
  }

  .termo-shell .theme-toggle,
  .termo-shell .day-chip{
    width:42px;
    height:42px;
  }

  .termo-shell .palette-icon{transform:none}

  .termo-shell .termo-brand-mark{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:24px;
  }

  .termo-shell .brand{gap:9px}
  .termo-shell .brand h1{font-size:24px}
  .termo-shell .brand p{margin-top:3px;font-size:10px}

  .termo-card .game-title{
    margin-bottom:6px;
    font-size:16px;
  }

  .termo-info{
    width:min(460px,100%);
    margin-bottom:6px;
    padding:7px 8px;
    border-radius:10px;
  }

  .termo-info .info-item span{
    margin-bottom:2px;
    font-size:8px;
  }

  .termo-info .info-item strong{
    font-size:12px;
  }

  .termo-legend{
    margin-bottom:6px;
    font-size:9px;
  }

  .termo-board{
    margin-left:auto;
    margin-right:auto;
  }

  .termo-keyboard,
  .termo-submit{
    width:min(570px,100%);
  }
}


/* Mantém o cabeçalho na mesma posição do Música do Dia para uma troca harmoniosa. */
@media(min-width:601px){
  .termo-shell{
    width:min(600px,100%);
    height:100dvh;
    padding:14px 18px 10px;
  }

  .termo-shell .game-switcher{
    min-height:0;
    margin:0 auto 5px;
  }

  .termo-shell .game-switcher-link{
    min-height:30px;
    padding:0 11px;
    font-size:11px;
  }

  .termo-shell .topbar{
    min-height:60px;
    margin-bottom:4px;
    grid-template-columns:42px 1fr 42px;
  }

  .termo-shell .theme-toggle,
  .termo-shell .day-chip{
    width:42px;
    height:42px;
  }

  .termo-shell .palette-icon{transform:none}

  .termo-shell .termo-brand-mark{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:24px;
  }

  .termo-shell .brand{
    gap:8px;
  }

  .termo-shell .brand h1{
    font-size:24px;
  }

  .termo-shell .brand p{
    margin-top:4px;
    font-size:10.5px;
  }

  .termo-shell{
    --term-cell:min(
      66px,
      calc((100vw - 46px)/5),
      calc((100dvh - 370px)/6)
    );
  }
}


/* Digitação: pequeno "pop" ao colocar/trocar uma letra, como no Termooo. */
.termo-cell.letter-pop{
  animation:termLetterPop .16s cubic-bezier(.2,.8,.25,1);
}
@keyframes termLetterPop{
  0%{transform:scale(.88)}
  65%{transform:scale(1.09)}
  100%{transform:scale(1.015)}
}

/* Mobile: barra de informações mais legível e teclado maior/confortável. */
@media(max-width:600px){
  .termo-shell{
    --term-cell:min(
      55px,
      calc((100vw - 34px)/5),
      calc((100dvh - 382px)/6)
    );
  }

  .termo-card .game-title{
    font-size:14px;
    margin-bottom:5px;
  }

  .termo-info{
    min-height:52px;
    padding:7px 7px;
    margin-bottom:5px;
    align-items:center;
  }

  .termo-info .info-item{
    display:grid;
    align-content:center;
  }

  .termo-info .info-item span{
    font-size:8.5px;
    line-height:1.05;
    margin-bottom:3px;
  }

  .termo-info .info-item strong{
    font-size:11.5px;
    line-height:1.1;
  }

  .termo-message{
    min-height:16px;
    line-height:16px;
    font-size:9px;
    margin-top:3px;
  }

  .termo-keyboard{
    width:100%;
    max-width:560px;
    gap:5px;
    margin-top:auto;
  }

  .termo-key-row{
    gap:4px;
  }

  .termo-key{
    height:52px;
    min-height:52px;
    border-radius:7px;
    padding:0 3px;
    font-size:15px;
  }

  .termo-key.wide{
    font-size:20px;
  }

  .termo-key.delete-key svg{
    width:24px;
    height:24px;
  }

  .termo-submit{
    width:100%;
    max-width:560px;
    height:48px;
    min-height:48px;
    margin-top:5px;
    font-size:14px;
  }

  .termo-reset-test{
    margin-top:4px;
  }
}

@media(max-width:380px){
  .termo-key{
    height:48px;
    min-height:48px;
    font-size:14px;
  }

  .termo-submit{
    height:45px;
    min-height:45px;
  }
}


/* Teclado maior e mais confortável em todas as telas. */
.termo-keyboard{
  width:min(630px,100%);
  gap:7px;
}

.termo-key-row{
  gap:6px;
}

.termo-key{
  height:60px;
  min-height:60px;
  border-radius:9px;
  padding:0 4px;
  font-size:17px;
}

.termo-key.wide{
  font-size:22px;
}

.termo-key.delete-key svg{
  width:28px;
  height:28px;
}

.termo-submit{
  width:min(630px,100%);
  height:52px;
  min-height:52px;
  font-size:15px;
}

@media(min-width:601px){
  .termo-shell{
    --term-cell:min(
      61px,
      calc((100vw - 46px)/5),
      calc((100dvh - 430px)/6)
    );
  }

  .termo-keyboard,
  .termo-submit{
    width:min(630px,100%);
  }
}

@media(max-width:600px){
  .termo-shell{
    --term-cell:min(
      52px,
      calc((100vw - 34px)/5),
      calc((100dvh - 420px)/6)
    );
  }

  .termo-keyboard{
    width:100%;
    gap:6px;
  }

  .termo-key-row{
    gap:5px;
  }

  .termo-key{
    height:58px;
    min-height:58px;
    border-radius:8px;
    font-size:16px;
  }

  .termo-key.wide{
    font-size:22px;
  }

  .termo-key.delete-key svg{
    width:27px;
    height:27px;
  }

  .termo-submit{
    width:100%;
    height:50px;
    min-height:50px;
    font-size:15px;
  }
}

@media(max-width:380px){
  .termo-key{
    height:54px;
    min-height:54px;
    font-size:15px;
  }

  .termo-submit{
    height:48px;
    min-height:48px;
  }
}


/* Layout simplificado: tabuleiro mais centralizado após remover título e barra de informações. */
.termo-card{
  padding-top:6px;
}

.termo-board{
  margin-top:clamp(6px,1.6vh,16px);
}

@media(max-width:600px){
  .termo-card{padding-top:4px}
  .termo-board{margin-top:5px}
}


/* Centraliza o jogo e aumenta um pouco o tabuleiro, sem empurrar o teclado para o rodapé. */
@media(max-width:600px){
  .termo-card{
    justify-content:center;
    gap:0;
    padding-top:0;
  }

  .termo-board{
    --mobile-board-size:min(
      58px,
      calc((100vw - 34px)/5),
      calc((100dvh - 390px)/6)
    );
    width:calc(var(--mobile-board-size)*5 + 16px);
    margin:0 auto;
    gap:4px;
  }

  .termo-row{
    grid-template-columns:repeat(5,var(--mobile-board-size));
    gap:4px;
  }

  .termo-cell{
    width:var(--mobile-board-size);
    height:var(--mobile-board-size);
    font-size:clamp(22px,calc(var(--mobile-board-size)*.52),34px);
  }

  .termo-message{
    margin:7px 0 10px;
  }

  .termo-keyboard{
    margin:12px auto 0;
  }

  .termo-submit{
    margin-top:6px;
  }

  .termo-reset-test{
    margin-top:5px;
  }
}

@media(min-width:601px){
  .termo-card{
    justify-content:center;
  }

  .termo-board{
    --desktop-board-size:min(
      66px,
      calc((100vw - 60px)/5),
      calc((100dvh - 430px)/6)
    );
    width:calc(var(--desktop-board-size)*5 + 20px);
    margin:4px auto 0;
    gap:5px;
  }

  .termo-row{
    grid-template-columns:repeat(5,var(--desktop-board-size));
    gap:5px;
  }

  .termo-cell{
    width:var(--desktop-board-size);
    height:var(--desktop-board-size);
    font-size:clamp(24px,calc(var(--desktop-board-size)*.52),36px);
  }

  .termo-message{
    margin:7px 0 12px;
  }

  .termo-keyboard{
    margin:12px auto 0;
  }
}


/* Centralização exata do ícone de paleta no Termo. */
.termo-shell .theme-toggle{
  padding:0;
  display:grid;
  place-items:center;
  line-height:0;
}

.termo-shell .palette-icon{
  width:19px;
  height:19px;
  display:grid;
  grid-template-columns:repeat(2,8px);
  grid-template-rows:repeat(2,8px);
  gap:3px;
  place-content:center;
  align-self:center;
  justify-self:center;
  margin:0;
  transform:none;
  transform-origin:center;
}

.termo-shell .palette-icon i{
  width:8px;
  height:8px;
  margin:0;
}


/* Mobile: evita o conteúdo subir e ser recortado quando o conjunto fica alto. */
@media(max-width:600px){
  .termo-card{
    justify-content:flex-start;
    padding-top:5px;
  }

  .termo-board{
    --mobile-board-size:min(
      58px,
      calc((100vw - 34px)/5),
      calc((100dvh - 395px)/6)
    );
    margin:4px auto 0;
  }

  .termo-message{
    margin:6px 0 8px;
  }

  .termo-keyboard{
    margin:10px auto 0;
  }
}

/* Em celulares com pouca altura, comprime só o necessário sem cortar o topo. */
@media(max-width:600px) and (max-height:720px){
  .termo-shell .game-switcher{
    min-height:22px;
    margin-bottom:0;
  }

  .termo-shell .game-switcher-link{
    min-height:22px;
  }

  .termo-shell .topbar{
    min-height:38px;
    margin-bottom:0;
  }

  .termo-board{
    --mobile-board-size:min(
      52px,
      calc((100vw - 34px)/5),
      calc((100dvh - 345px)/6)
    );
  }

  .termo-key{
    height:50px;
    min-height:50px;
  }

  .termo-submit{
    height:46px;
    min-height:46px;
  }

  .termo-message{
    margin:4px 0 6px;
  }

  .termo-keyboard{
    margin-top:7px;
  }
}


/* Cabeçalho do Termo com a mesma geometria do Música do Dia. */
@media(max-width:600px){
  .termo-shell .topbar{
    min-height:56px;
    grid-template-columns:40px 1fr 40px;
    gap:7px;
    margin-bottom:3px;
  }

  .termo-shell .theme-toggle,
  .termo-shell .day-chip{
    width:40px;
    height:40px;
  }

  .termo-shell .theme-toggle{
    padding:0;
  }

  .termo-shell .palette-icon{
    width:21px;
    height:21px;
    grid-template-columns:repeat(2,8px);
    grid-template-rows:repeat(2,8px);
    gap:3px;
    place-content:center;
    margin:0;
    transform:none;
  }

  .termo-shell .termo-brand-mark{
    width:39px;
    height:39px;
    flex-basis:39px;
    border-radius:9px;
    font-size:22px;
  }

  .termo-shell .brand{
    gap:7px;
  }

  .termo-shell .brand h1{
    font-size:22px;
    line-height:1;
  }

  .termo-shell .day-chip{
    font-size:12px;
  }
}

/* Desktop também segue exatamente o tamanho dos ícones do Música do Dia. */
@media(min-width:601px){
  .termo-shell .topbar{
    min-height:60px;
    grid-template-columns:42px 1fr 42px;
    gap:8px;
    margin-bottom:4px;
  }

  .termo-shell .theme-toggle,
  .termo-shell .day-chip{
    width:42px;
    height:42px;
  }

  .termo-shell .palette-icon{
    width:21px;
    height:21px;
    grid-template-columns:repeat(2,8px);
    grid-template-rows:repeat(2,8px);
    gap:3px;
    place-content:center;
    margin:0;
    transform:none;
  }

  .termo-shell .termo-brand-mark{
    width:42px;
    height:42px;
    flex-basis:42px;
    border-radius:9px;
    font-size:24px;
  }

  .termo-shell .brand{
    gap:8px;
  }

  .termo-shell .brand h1{
    font-size:24px;
    line-height:1;
  }

  .termo-shell .day-chip{
    font-size:11px;
  }
}