/* /jogo — immersive daily puzzle */

.site-main:has(.game-page){padding:0}
/* Override widgets.css legacy .game-page{max-width:640px} */
.game-page{
  max-width:none!important;width:100%;padding-top:0!important;
  background:var(--forest-3,#001d16);color:#eef3ee;
}

.game-hero{
  --archive-hero-h:250px;
  background-image:
    linear-gradient(100deg,#002a1f 0%,rgba(0,35,26,.95) 34%,rgba(0,34,26,.35) 70%,rgba(0,29,22,.55) 100%),
    url('../img/proto/hero-game.webp');
  background-position:center,center 48%;
  position:relative;
}
.game-hero-badge{
  position:absolute;right:clamp(24px,4vw,64px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  color:#e8f0ea;z-index:2;text-align:right;
}
.game-hero-badge span:first-child{
  font-size:10px;font-weight:800;letter-spacing:.16em;
}
.game-hero-badge strong{
  font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.03em;
}
.game-hero-badge [data-icon]{font-size:22px;opacity:.85}

.game-board{
  padding:32px clamp(16px,3vw,48px) 36px;
  margin-top:0!important;position:relative;z-index:1;
  background:var(--forest-3,#001d16);
}
.game-console{
  border:1px solid #385d4b;
  background:linear-gradient(135deg,#00271df2 0%,#042c20f0 55%,#001d16f5 100%);
  backdrop-filter:blur(8px);
  border-radius:18px;
  display:grid;
  grid-template-columns:200px minmax(0,1fr) minmax(0,1.05fr);
  gap:22px;
  min-height:520px;
  padding:24px;
  color:#fff;
  box-shadow:0 22px 50px rgba(0,0,0,.35);
  animation:game-console-in .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes game-console-in{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

.game-side{
  border-right:1px solid #476355;padding-right:14px;
  display:flex;flex-direction:column;gap:6px;
}
.game-side-link{
  background:transparent;color:#e5f0e8;border:0;cursor:pointer;
  display:flex;align-items:center;gap:12px;text-align:left;
  border-radius:11px;padding:12px 10px;font-weight:650;font-size:12px;
  text-decoration:none;font:inherit;width:100%;
  transition:background .15s ease,color .15s ease;
}
.game-side-link>[data-icon]:first-child{
  border:1px solid #b5c6b9;border-radius:50%;width:28px;height:28px;
  font-size:16px;display:grid;place-items:center;flex:none;
}
.game-side-link>[data-icon]:last-child:not(:first-child){margin-left:auto;font-size:13px;opacity:.55}
.game-side-link:hover{background:#0a3d2c}
.game-side-link.active{background:var(--lime);color:var(--forest-3,#001d16)}
.game-side-link.active>[data-icon]:first-child{border-color:var(--forest)}

.mystery-visual{
  min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.mystery-shirt-wrap{
  position:relative;width:min(100%,300px);aspect-ratio:.78;
  border-radius:16px;overflow:hidden;
  background:radial-gradient(#286746,#012b20);
  display:grid;place-items:center;
  box-shadow:0 16px 40px rgba(0,0,0,.35),inset 0 0 0 1px rgba(177,238,120,.15);
  transition:box-shadow .35s ease;
}
.mystery-shirt-wrap.is-hot{box-shadow:0 0 0 2px var(--lime),0 16px 40px rgba(0,0,0,.35)}
.game-dna{
  position:absolute;inset:0;width:100%;height:100%;
  filter:blur(22px) saturate(1.1) brightness(.88);
  transform:scale(1.18);
  transition:filter .55s cubic-bezier(.22,1,.36,1),transform .55s ease;
}
.mystery-shirt-wrap.is-done .game-dna{
  filter:blur(0) saturate(1) brightness(1);
  transform:scale(1);
}
.mystery-question{
  position:relative;z-index:2;
  font-family:var(--serif);font-size:clamp(72px,14vw,108px);font-weight:700;
  text-shadow:0 4px 28px #0008;line-height:1;
  transition:opacity .4s ease,transform .4s ease;
}
.mystery-shirt-wrap.is-done .mystery-question{opacity:0;transform:scale(.6)}
.mystery-reveal-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,transparent 20%,rgba(0,20,14,.45) 100%);
  transition:opacity .45s ease;
}
.mystery-shirt-wrap.is-done .mystery-reveal-veil{opacity:0}
.mystery-meter{
  margin-top:12px;font-size:11px;color:#9fb5a6;letter-spacing:.06em;
}
.mystery-meter span{color:var(--lime);font-weight:800;font-variant-numeric:tabular-nums}
.mystery-caption{font-size:11px;color:#c9ded0;text-align:center;margin-top:6px}

.game-play{position:relative;padding-top:4px;min-width:0}
.game-play h2{font-size:clamp(1.35rem,2vw,1.7rem);margin:8px 0 14px;letter-spacing:-.02em;padding-right:5.5rem}
.attempt-count{
  position:absolute;right:0;top:0;z-index:1;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  margin:0;line-height:1.1;pointer-events:none;
}
.attempt-count>span{font-size:10px;letter-spacing:.12em;color:#8ca99b;font-weight:700}
.attempt-count strong{font-family:var(--serif);font-size:28px}
.attempt-dots{display:flex;gap:6px;margin-top:4px}
.attempt-dots b{
  display:block;width:10px;height:10px;border:1.5px solid #a0bdad;border-radius:50%;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.attempt-dots b.filled{background:var(--lime);border-color:var(--lime);transform:scale(1.1)}
.attempt-dots b.miss{background:#e85d5d;border-color:#e85d5d}
.attempt-dots b.hit{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 3px rgba(177,238,120,.3)}

.game-clues{
  list-style:none;margin:0 0 12px;padding:0;
  display:flex;flex-direction:column;gap:6px;min-height:0;
}
.game-clue{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:9px;
  background:rgba(177,238,120,.08);border:1px solid rgba(177,238,120,.22);
  font-size:12px;animation:game-clue-in .35s ease both;
}
@keyframes game-clue-in{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:none}
}
.game-clue .k{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lime);min-width:4.5rem;
}
.game-clue .v{font-weight:650;color:#f0f6f1}

.game-guesses{
  list-style:none;margin:0 0 12px;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.game-guess{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;font-size:12px;font-weight:650;
}
.game-guess.is-wrong{background:#3a1f1f;color:#f0c4c4;border:1px solid #8a3d3d}
.game-guess.is-right{background:#1a3d28;color:#c8f0a8;border:1px solid #4a9160}
.game-guess .g-mark{font-weight:900}

.guess-input{
  height:48px;display:flex;align-items:center;gap:9px;
  border:1px solid #87b59c;background:#0f3d2c;border-radius:12px;
  padding:0 12px;margin-bottom:10px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.guess-input:focus-within{
  border-color:var(--lime);box-shadow:0 0 0 3px rgba(177,238,120,.2);
}
.guess-input [data-icon]{font-size:20px;color:#b5cfc0}
.guess-input input{
  border:0;outline:0;background:transparent;color:#fff;flex:1;min-width:0;font-size:14px;
}
.guess-input input::placeholder{color:#bbcec2}
.guess-input input.shake{animation:game-shake .4s ease}
@keyframes game-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

.game-suggest{
  list-style:none;margin:0 0 10px;padding:4px;
  background:#0a2f22;border:1px solid #3d6a52;border-radius:10px;
  max-height:200px;overflow:auto;
}
.game-sug{
  padding:9px 11px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;
}
.game-sug:hover,.game-sug.active{background:#134832;color:var(--lime)}

.button.full-width{width:100%;justify-content:center}
.game-feedback{min-height:22px;margin:8px 0;color:var(--lime);font-size:12px;font-weight:600}
.game-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.game-actions[hidden],
.game-result[hidden],
.game-stats-panel[hidden],
.game-suggest[hidden]{display:none!important}

.game-result{margin-top:10px}
.game-verdict{font-family:var(--serif);font-size:1.35rem;margin:0 0 12px}
.game-verdict.is-win{color:var(--lime)}
.game-verdict.is-lose{color:#f0c4c4}
.game-reveal{
  display:flex;gap:14px;align-items:center;
  padding:12px;border-radius:12px;background:#083526;border:1px solid #2e6a4e;
  text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease;
}
.game-reveal:hover{border-color:var(--lime);transform:translateY(-2px)}
.game-reveal img{width:72px;height:72px;object-fit:cover;border-radius:10px}
.game-reveal-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.game-reveal-meta strong{font-size:16px}
.game-reveal-meta span{font-size:12px;color:#a8c0b2}
.game-reveal-cta{color:var(--lime)!important;font-weight:700}

.game-stats-panel{
  margin-top:16px;padding:16px;border-radius:12px;
  border:1px solid #2b5b44;background:rgba(0,20,14,.35);
}
.game-stats-panel h2{font-size:1.2rem;margin:0 0 12px}
.game-stats-panel h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9fb5a6;margin:14px 0 8px}
.gs-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gs-kpis strong{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1.1}
.gs-kpis span{font-size:10px;color:#9fb5a6}
.gs-dist{display:flex;flex-direction:column;gap:5px}
.gs-row{display:flex;align-items:center;gap:8px;font-size:11px}
.gs-n{width:14px;color:#9fb5a6;font-weight:700}
.gs-bar{
  display:block;min-width:18px;padding:3px 6px;border-radius:4px;
  background:#1b563f;color:#fff;font-weight:700;text-align:right;
  transition:width .4s ease;
}
.gs-bar.here{background:var(--lime);color:var(--forest)}

.stadium-ribbon{
  min-height:200px;
  background-image:linear-gradient(90deg,rgba(0,29,22,.55),rgba(0,29,22,.15) 44%,#00271edd),url('../img/proto/hero-game.webp');
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:flex-end;
  padding:28px clamp(24px,6vw,95px);
}
.stadium-ribbon>div{
  font-size:13px;letter-spacing:.2em;line-height:2;color:#eaf1eb;max-width:340px;
}

/* —— Archive / day (shared shell) —— */
.game-console--archive,
.game-console--day{
  grid-template-columns:200px minmax(0,1fr);
  min-height:0;
}
.game-archive-panel,
.game-day-panel{min-width:0}
.game-archive-head{margin:0 0 20px}
.game-archive-head h2{
  margin:6px 0 8px;font-size:clamp(1.35rem,2.4vw,1.75rem);
  letter-spacing:-.03em;color:#fff;
}
.game-archive-head p{margin:0;font-size:13px;color:#9fb5a6;max-width:46ch;line-height:1.45}
.game-archive-empty{
  padding:36px 16px;text-align:center;color:#9fb5a6;font-size:14px;
}
.game-archive-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;
}
.game-day-card{
  display:flex;flex-direction:column;gap:6px;
  padding:16px 14px 14px;border-radius:14px;text-decoration:none;color:#eef3ee;
  background:rgba(8,53,38,.45);border:1px solid #2e6a4e;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
  position:relative;min-height:96px;
  animation:game-console-in .45s cubic-bezier(.22,1,.36,1) both;
}
.game-day-card:nth-child(n){animation-delay:calc(var(--i,0) * 20ms)}
.game-day-card:hover{
  transform:translateY(-3px);border-color:var(--lime);
  background:rgba(10,61,44,.7);box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.game-day-card-n{
  font-family:var(--serif);font-size:1.45rem;font-weight:700;
  letter-spacing:-.03em;line-height:1;color:#fff;
}
.game-day-card-date{font-size:12px;color:#9fb5a6;font-weight:650}
.game-day-card-go{
  position:absolute;right:12px;bottom:12px;font-size:16px;opacity:.45;color:var(--lime);
  transition:opacity .2s ease,transform .2s ease;
}
.game-day-card:hover .game-day-card-go{opacity:1;transform:translateX(2px)}

.game-day-reveal{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:24px;align-items:center;
}
.game-day-dna-wrap{
  position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:radial-gradient(#286746,#012b20);
  box-shadow:0 16px 40px rgba(0,0,0,.35),inset 0 0 0 1px rgba(177,238,120,.15);
}
.game-day-dna{display:block;width:100%;height:100%}
.game-day-answer{min-width:0}
.game-day-answer h2{
  margin:8px 0 8px;font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:-.03em;color:#fff;
}
.game-day-meta{margin:0 0 14px;font-size:14px;color:#b7caba;line-height:1.4}
.game-day-thumb{
  display:inline-block;border-radius:14px;overflow:hidden;
  border:1px solid #2e6a4e;background:#083526;
  transition:border-color .2s ease,transform .2s ease;
}
.game-day-thumb:hover{border-color:var(--lime);transform:translateY(-2px)}
.game-day-thumb img{display:block;width:min(180px,40vw);height:auto}

@media(max-width:1100px){
  .game-console{grid-template-columns:160px minmax(0,1fr) minmax(0,1.1fr);gap:16px;padding:18px}
  .game-console--archive,
  .game-console--day{grid-template-columns:160px minmax(0,1fr)}
  .game-hero-badge{display:none}
}
@media(max-width:850px){
  .game-board{margin-top:0;padding:20px 14px 28px}
  .game-console,
  .game-console--archive,
  .game-console--day{grid-template-columns:1fr;gap:16px}
  .game-side{
    flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid #476355;
    padding:0 0 12px;gap:4px;
  }
  .game-side-link{white-space:nowrap;flex:none}
  .mystery-shirt-wrap{width:min(100%,240px)}
  .gs-kpis{grid-template-columns:repeat(2,1fr)}
  .game-day-reveal{grid-template-columns:1fr;gap:18px}
  .game-day-dna-wrap{max-width:280px;margin:0 auto}
}
@media(max-width:590px){
  .game-hero{--archive-hero-h:220px}
  .attempt-count{align-items:flex-start}
  .game-side{
    gap:6px;padding-bottom:14px;
    scroll-snap-type:x proximity;
  }
  .game-side-link{
    font-size:12px;padding:10px 12px;min-height:44px;
    scroll-snap-align:start;
  }
  .game-side-link>[data-icon]:last-child:not(:first-child){display:none}
  .game-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs-guess-row,.game-guess-row{flex-wrap:wrap}
  .gs-guess-row .button,.game-guess-row .button{width:100%;justify-content:center}
}