/* Marcador Mete Na Mesa — menu CSS-only, paleta neutra v2.12 / v3.9.18 */
@font-face{font-family:'ConfigRounded';src:url('../fonts/ConfigRounded-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'ConfigRounded';src:url('../fonts/ConfigRounded-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --bg:#fff;
  --text:#1a1a1a;
  --muted:#686868;
  --surface:#ededed;
  --mode-bg:#f1f1f1;
  --mode-border:#ccc;
  --scoreboard-bg:#666;
  --shadow:0 5px 5px rgba(0,0,0,.5);
  --overlay-btn:rgba(255,255,255,.84);
}
html[data-theme="dark"]{
  --bg:#2b2b2b;
  --text:#f4f4f4;
  --muted:#c8c8c8;
  --surface:#3d3d3d;
  --mode-bg:#333;
  --mode-border:#505050;
  --scoreboard-bg:#6b6b6b;
  --overlay-btn:rgba(30,30,30,.82);
}
@media(prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --bg:#2b2b2b;
    --text:#f4f4f4;
    --muted:#c8c8c8;
    --surface:#3d3d3d;
    --mode-bg:#333;
    --mode-border:#505050;
    --scoreboard-bg:#6b6b6b;
    --overlay-btn:rgba(30,30,30,.82);
  }
}

*{box-sizing:border-box;-webkit-user-select:none;-ms-user-select:none;user-select:none}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:'ConfigRounded',sans-serif}
body{overflow:hidden}
button{font:inherit;color:inherit}
.view{position:fixed;inset:0;display:none;background:var(--bg)}
.view.is-active{display:flex}

/* Menu principal — mantém as proporções e composição do mock-up fornecido. */
.home-view{
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:max(24px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
}
.menu-shell{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.header{margin:0 auto;text-align:center}
.head-logo{
  width:128px;
  height:128px;
  margin:0 auto;
  background:url("../images/logo.png") no-repeat 50% 50%/128px 128px;
}
.head-title{margin:0;text-align:center;font-size:38px;line-height:1.08;font-weight:700;color:var(--text)}
.marcadores{
  display:grid;
  grid-template-columns:repeat(3,150px);
  gap:40px;
  margin-top:40px;
}
.mode-choice{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  margin:0;
  padding:0;
  width:150px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.mode{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  gap:5px;
  width:150px;
  height:220px;
  padding:10px 0;
  border:1px solid var(--mode-border);
  border-radius:10px;
  background:var(--mode-bg);
  box-shadow:var(--shadow);
  transition:transform .1s ease;
}
@media(hover:hover) and (pointer:fine){.mode-choice:hover .mode{transform:translateY(-5px)}}
.mode-choice:active .mode{transform:translateY(-2px)}
.menus{display:flex;gap:2px;flex:none}
.menu-button{display:block;width:10px;height:10px;background:var(--scoreboard-bg);border-radius:2px}
.scoreboard{display:block;width:90%;height:auto;min-height:0;flex:1 1 0;margin:1px 0;background:var(--scoreboard-bg);border-radius:5px}
.nome-modo{display:flex;flex-direction:column;align-items:center;margin-top:20px;padding:0;font-size:1.4em;line-height:1.05;text-align:center}
.nome-modo strong{font-weight:700}

/* O botão mantém o círculo visual do desenho original, com uma área de toque de 44px. */
.info-btn{
  position:absolute;
  z-index:20;
  left:calc(13px + env(safe-area-inset-left));
  top:calc(13px + env(safe-area-inset-top));
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.info-glyph{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:2px solid currentColor;
  border-radius:999px;
  font-size:18px;
  line-height:1;
  font-weight:700;
}
.info-btn:active .info-glyph{background:var(--surface)}

/* Escala apenas quando necessário; em desktop mantém 150×220, 40px de separação e título de 38px. */
@media(max-width:600px){
  .home-view{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .head-logo{width:104px;height:104px;background-size:104px 104px}
  .head-title{font-size:30px}
  .marcadores{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(8px,3.2vw,14px);
    margin-top:28px;
  }
  .mode-choice{width:100%;min-width:0}
  .mode{width:100%;height:auto;aspect-ratio:150/220;padding:clamp(6px,1.8vw,10px) 0;gap:clamp(2px,1vw,5px);border-radius:clamp(7px,2.2vw,10px)}
  .menus{gap:clamp(1px,.55vw,2px)}
  .menu-button{width:clamp(6px,2.1vw,10px);height:clamp(6px,2.1vw,10px);border-radius:clamp(1px,.5vw,2px)}
  .scoreboard{border-radius:clamp(3px,1.3vw,5px)}
  .nome-modo{margin-top:clamp(10px,3vw,15px);font-size:clamp(.86rem,3.8vw,1.16rem)}
}
@media(max-width:360px){
  .head-logo{width:88px;height:88px;background-size:88px 88px}
  .head-title{font-size:27px}
  .marcadores{margin-top:22px;gap:7px}
  .nome-modo{font-size:clamp(.76rem,3.7vw,.92rem)}
}
@media(max-height:620px){
  .home-view{align-items:center;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .head-logo{width:78px;height:78px;background-size:78px 78px}
  .head-title{font-size:26px}
  .marcadores{margin-top:18px}
  .nome-modo{margin-top:8px}
}

/* Informação — conserva o comportamento e aspeto da versão anterior. */
.info-view{align-items:center;justify-content:center;padding:28px;overflow:auto}
.info-card{width:min(100%,430px);text-align:center;padding:24px}
.info-logo{width:112px;height:112px;object-fit:contain}
.info-card h2{font-size:25px;margin:14px 0 10px}
.info-card p{margin:8px 0;color:var(--muted);line-height:1.4}
.info-small{font-size:14px}
.version{font-size:15px}
.info-card .info-social-title{margin:22px 0 0;color:var(--text);font-size:16px}
.info-card .social-row{display:flex;justify-content:center;gap:3px;margin:12px 0 18px;align-items:center}
.social-link{width:clamp(36px,10vw,43px);height:43px;display:inline-flex;align-items:center;justify-content:center;color:var(--text);border-radius:10px;text-decoration:none;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.social-link:active{background:var(--surface)}
.social-icon{display:block;width:32px;height:32px;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.social-email-svg{display:block;width:32px;height:32px;flex:none;color:inherit;overflow:visible}
.web-info-back{position:fixed;z-index:30;left:calc(14px + env(safe-area-inset-left));top:calc(14px + env(safe-area-inset-top));width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer}
.web-info-back .mnm-icon{width:20px;height:20px}
.back-home,.mnm-home-button{display:none!important}

@media(max-width:380px){
  .info-view{padding:20px 10px}
  .info-card{padding:18px 6px}
  .info-logo{width:96px;height:96px}
  .info-card h2{font-size:22px}
  .info-card .social-row{gap:1px}
  .social-link{width:clamp(34px,14vw,41px)}
}
/* Dice Roller Lite attribution: intentionally discreet in the Information page. */
.info-dice-credit{margin:12px auto 0;max-width:360px;color:var(--muted);font-size:11px;line-height:1.4}
.info-dice-credit summary{display:inline-block;cursor:pointer;list-style:none;opacity:.72;text-decoration:none}
.info-dice-credit summary::-webkit-details-marker{display:none}
.info-dice-credit[open] summary{opacity:.9}
.info-card .info-dice-credit p{margin:7px 0 0;font-size:11px;color:var(--muted)}