:root{
  font-size:16px;
  --cream:#fff4d8;
  --gold:#f2c261;
  --gold-dark:#b8691d;
  --brown:#4a2814;
  --brown-dark:#291309;
  --panel-top:rgba(75,40,20,.95);
  --panel-bottom:rgba(39,19,9,.98);
  --teal:#2ca3b1;
  --teal-dark:#176774;
  --green:#4ca65a;
  --red:#c94c43;
  --muted:#f0d0a0;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Trebuchet MS,Arial,sans-serif;color:var(--cream)}
body{background:#251207;overflow-x:hidden}
button{font:inherit}
.game{min-height:100dvh;position:relative;isolation:isolate}
.bg-lobby,.bg-play{
  position:fixed;inset:0;z-index:-3;background-size:cover;background-position:center;
  transition:opacity .4s ease
}
.bg-lobby{
  background-image:
    linear-gradient(90deg,rgba(45,21,8,.82),rgba(45,21,8,.5) 52%,rgba(45,21,8,.18)),
    url("/assets/game-background.webp")
}
.bg-play{
  opacity:0;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,203,89,.24),transparent 36%),
    linear-gradient(#173d49 0 44%,#5d3018 44% 100%)
}
.bg-play:after{
  content:"";position:absolute;inset:0;opacity:.25;
  background:
    radial-gradient(ellipse at 12% 58%,#101010 0 10%,transparent 11%),
    radial-gradient(ellipse at 88% 51%,#101010 0 12%,transparent 13%),
    repeating-linear-gradient(140deg,transparent 0 2.25rem,rgba(255,255,255,.025) 2.3rem 2.35rem)
}
body.playing .bg-lobby{opacity:0}
body.playing .bg-play{opacity:1}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 0 11rem rgba(28,11,3,.78)}

.stage{
  width:min(92vw,72rem);
  min-height:100dvh;
  margin:auto;
  padding:clamp(.65rem,1.5vh,1.15rem) clamp(.75rem,2vw,1.75rem);
  display:flex;
  flex-direction:column;
  gap:.75rem
}
.top{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem
}
.logo{display:flex;align-items:center;gap:.7rem}
.mascot{
  width:clamp(3rem,6.5vh,4.25rem);aspect-ratio:1;border-radius:50%;
  object-fit:cover;border:.25rem solid #f8ce73;
  box-shadow:0 .4rem 0 #6a3519,0 .75rem 1.4rem rgba(0,0,0,.32)
}
.logo-copy strong{font-size:1.05rem;text-shadow:0 .15rem #4b240e}
.logo-copy small{display:block;font-size:.65rem;letter-spacing:.12em;color:#ffe5a9;font-weight:900}
.hud{display:flex;gap:.45rem;align-items:center}
.hud-box{
  background:linear-gradient(#8c4e27,#572a16);
  border:.18rem solid #e4b568;border-bottom-width:.38rem;
  border-radius:.7rem;padding:.42rem .7rem;
  box-shadow:0 .32rem 0 #32170b;
  color:#fff;font-weight:1000;font-size:.8rem
}

.menu-wrap,.play-wrap{width:min(94vw,43rem);margin:auto}
.panel{
  padding:clamp(1rem,2.3vw,1.8rem);
  background:linear-gradient(var(--panel-top),var(--panel-bottom));
  border:.42rem solid #b49775;border-radius:1.6rem;
  box-shadow:0 0 0 .25rem #4b2714,0 .8rem 0 #291309,0 1.8rem 3.6rem rgba(0,0,0,.44);
  position:relative
}
.panel:before{
  content:"";position:absolute;inset:.55rem;border:.12rem dashed rgba(255,225,166,.15);
  border-radius:1rem;pointer-events:none
}
.screen{display:none;position:relative;z-index:1;animation:screenIn .22s ease both}
.screen.active{display:block}
@keyframes screenIn{from{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:none}}

.heading{text-align:center;margin-bottom:1rem}
.heading .chapter{
  font-size:.65rem;letter-spacing:.16em;color:#efbd63;font-weight:1000;text-transform:uppercase
}
.heading h1,.heading h2{
  font-size:clamp(1.65rem,4vw,2.55rem);line-height:1;margin:.35rem 0;
  text-shadow:0 .18rem #2a1309;letter-spacing:-.035em
}
.heading p{font-size:.84rem;color:var(--muted);margin:0;line-height:1.35}
.hero-icon{text-align:center;margin-bottom:.75rem}
.hero-icon img{
  width:clamp(6rem,16vh,8rem);aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:.35rem solid #e7b767;box-shadow:0 .45rem 0 #562b16,0 .9rem 1.6rem rgba(0,0,0,.35)
}

.menu-list{display:grid;gap:.6rem}
.menu-button{
  width:100%;min-height:4rem;display:grid;grid-template-columns:1fr 1.5rem;
  align-items:center;gap:.75rem;text-align:left;padding:.65rem .9rem;
  color:#fff;border:.22rem solid #e1b36b;border-bottom-width:.5rem;border-radius:1rem;
  background:linear-gradient(#a75e2d,#6d351a);box-shadow:0 .42rem 0 #32170b;
  cursor:pointer;transition:.14s
}
.menu-button:hover,.menu-button:focus-visible{
  outline:none;filter:brightness(1.14);transform:translateY(-.1rem);border-color:#ffe59c
}
.menu-button:active{transform:translateY(.3rem);box-shadow:0 .1rem #32170b}
.menu-button.selected{
  background:linear-gradient(var(--teal),var(--teal-dark));border-color:#9cf2ef;
  box-shadow:0 .42rem 0 #0c3540,0 0 1rem rgba(58,214,221,.3)
}
.menu-button strong{display:block;font-size:.98rem;text-shadow:0 .12rem rgba(0,0,0,.5)}
.menu-button small{display:block;font-size:.73rem;color:#ffe3ad;margin-top:.2rem;font-weight:800}
.arrow{font-size:1.65rem;font-weight:1000}
.main-play{min-height:4.8rem;text-align:center;grid-template-columns:1fr}
.main-play .arrow{display:none}
.main-play strong{font-size:1.25rem}

.actions{display:flex;gap:.65rem;margin-top:1rem}
.back,.confirm{
  flex:1;min-height:3.2rem;border:.2rem solid #dfb26c;border-bottom-width:.45rem;
  border-radius:.8rem;color:#fff;font-weight:1000;font-size:.82rem;box-shadow:0 .35rem #2d150a;cursor:pointer
}
.back{background:linear-gradient(#777,#444)}
.confirm{background:linear-gradient(#e8a62e,#ac6219)}
.confirm:disabled{filter:grayscale(.8);opacity:.5;cursor:not-allowed}
.back:active,.confirm:active{transform:translateY(.25rem);box-shadow:0 .1rem #2d150a}

.team-balance{color:#fff0b2!important;font-weight:1000}
.paused-note{color:#ffca78!important}
.info-banner{
  margin-bottom:.65rem;padding:.6rem .75rem;border:.18rem solid #d7a65f;border-radius:.75rem;
  background:#5b301a;color:#ffe3aa;font-size:.75rem;font-weight:800
}

/* boosts */
.boost-head{
  display:grid;grid-template-columns:5rem 1fr;gap:.9rem;align-items:center;
  padding:.7rem;margin-bottom:.7rem;border:.22rem solid #dfb16a;border-bottom-width:.45rem;
  border-radius:1rem;background:linear-gradient(#8b4d25,#572a15);box-shadow:0 .35rem #2c1409
}
.boost-total{
  width:5rem;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(#ffd667,#e78b26);color:#4a240d;font-size:1.8rem;font-weight:1000;
  border:.22rem solid #fff0b8;box-shadow:0 .3rem #7d4218
}
.boost-head h3{font-size:1.05rem;margin:0 0 .2rem}
.boost-head p{font-size:.72rem;color:#f7dba7;margin:0;line-height:1.35}
.boost-list{display:grid;gap:.55rem}
.boost-item{
  display:grid;grid-template-columns:1fr auto;gap:.7rem;align-items:start;padding:.65rem;
  border:.2rem solid #a77c50;border-bottom-width:.4rem;border-radius:.8rem;
  background:linear-gradient(#693a20,#452313);box-shadow:0 .28rem #251108
}
.boost-item.positive{border-color:#6db276}.boost-item.penalty{border-color:#cf6c62}
.boost-title{font-size:.82rem;font-weight:1000}
.boost-meta,.boost-condition{font-size:.68rem;color:#f4d19b;line-height:1.35;margin-top:.16rem}
.boost-effect{font-size:1.1rem;font-weight:1000;color:#ffd565;white-space:nowrap}
.boost-item.penalty .boost-effect{color:#ff9187}
.progress{
  height:.5rem;margin-top:.4rem;border:.12rem solid #2d160b;background:#241006;border-radius:999px;overflow:hidden
}
.progress span{display:block;height:100%;background:linear-gradient(90deg,#3aa7b2,#7ce0d7)}
.status{font-size:.62rem;font-weight:1000;letter-spacing:.05em;color:#d7f2ef;margin-top:.25rem}
.status.wait{color:#f1c485}

/* cards */
.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.reward-card{
  position:relative;aspect-ratio:1.6/2.6;border:.25rem solid #d4a45c;border-bottom-width:.48rem;
  border-radius:.9rem;overflow:hidden;background:#5a321b;box-shadow:0 .4rem 0 #2a1308
}
.reward-card img{width:100%;height:100%;object-fit:cover}
.reward-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 48%,rgba(0,0,0,.86))}
.reward-card.locked img{filter:grayscale(1) brightness(.46)}
.reward-card.active{box-shadow:0 .4rem 0 #7d4717,0 0 1.1rem rgba(255,202,74,.5);border-color:#ffd66d}
.card-lock{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  font-size:.8rem;font-weight:1000;color:#fff;background:rgba(0,0,0,.22)
}
.reward-card.active .card-lock{display:none}
.card-copy{position:absolute;left:.55rem;right:.55rem;bottom:.5rem;z-index:3;text-align:center}
.card-copy strong{font-size:.72rem;display:block;text-shadow:0 .12rem .2rem #000}
.card-copy small{font-size:.58rem;color:#ffe2a9;font-weight:900}
.card-state{
  display:inline-block;margin-top:.22rem;padding:.12rem .38rem;border-radius:999px;
  background:#e8a72d;color:#4a240e;font-size:.52rem;font-weight:1000
}
.reward-card.locked .card-state{background:#6e6e6e;color:#fff}

/* gameplay */
.play-wrap{display:none}
body.playing .menu-wrap{display:none}
body.playing .play-wrap{display:block}
.play-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.meter{
  flex:1;height:.95rem;background:#291309;border:.18rem solid #bc8b54;border-radius:999px;
  overflow:hidden;box-shadow:0 .28rem #160904
}
.meter span{display:block;height:100%;background:linear-gradient(90deg,#45b967,#e5c24e);transition:width .3s}
.boost-chip{
  background:linear-gradient(#e5a435,#a65f19);border:.18rem solid #ffe09a;border-bottom-width:.4rem;
  color:#4b240d;padding:.4rem .7rem;border-radius:.7rem;font-weight:1000;
  box-shadow:0 .3rem #51270e;font-size:.75rem
}
.question-box{
  background:linear-gradient(rgba(255,244,211,.98),rgba(234,198,132,.98));color:#452411;
  border:.38rem solid #765035;border-bottom-width:.75rem;border-radius:1.4rem;
  padding:clamp(1rem,2.5vw,1.7rem);box-shadow:0 .75rem #2a1309,0 1.6rem 2.8rem rgba(0,0,0,.4)
}
.world{font-size:.68rem;font-weight:1000;color:#855023;letter-spacing:.09em;text-transform:uppercase}
.question-box h2{font-size:clamp(1.35rem,3.8vw,2.35rem);line-height:1.05;margin:.55rem 0 1rem;letter-spacing:-.035em}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.answer{
  min-height:3.8rem;display:grid;grid-template-columns:2rem 1fr;align-items:center;gap:.55rem;text-align:left;
  padding:.5rem .7rem;border:.2rem solid #84512a;border-bottom-width:.45rem;border-radius:.8rem;
  background:linear-gradient(#fff3c6,#e3b465);color:#492611;font-weight:1000;font-size:.82rem;
  box-shadow:0 .32rem #40200f;cursor:pointer
}
.answer:hover:not(:disabled),.answer:focus-visible:not(:disabled){outline:none;filter:brightness(1.08);transform:translateY(-.1rem)}
.answer .keycap{
  width:1.9rem;height:1.9rem;display:grid;place-items:center;background:#70401e;color:#fff;
  border-radius:.48rem;border-bottom:.22rem solid #3c1c0c
}
.answer.correct{background:linear-gradient(#8ee798,#4ba65a);border-color:#285f33;color:#fff}
.answer.wrong{background:linear-gradient(#f58e83,#c8453e);border-color:#772823;color:#fff}
.answer.dim{opacity:.4}
.feedback{
  margin-top:.7rem;padding:.75rem;border-radius:.8rem;background:#fff7d8;border:.2rem solid #8a5b35;
  color:#4c2b17;display:none
}
.feedback.visible{display:block;animation:screenIn .2s ease}
.feedback h3{font-size:1rem;margin:0 0 .25rem}
.feedback p{font-size:.78rem;margin:0;line-height:1.35}
.next{
  display:block;width:100%;margin-top:.65rem;background:linear-gradient(#edac30,#ae641a);
  border:.2rem solid #734016;border-bottom-width:.42rem;color:#fff;padding:.65rem .8rem;
  border-radius:.65rem;font-weight:1000;cursor:pointer;box-shadow:0 .28rem #3c1b0b;font-size:.78rem
}

/* result */
.result{text-align:center}
.result .symbol{font-size:2.4rem;font-weight:1000;color:#ffd66d}
.calc{display:grid;gap:.45rem;margin:.7rem 0}
.calc-row{
  display:grid;grid-template-columns:1fr auto;gap:.55rem;padding:.55rem .75rem;
  border:.18rem solid #a67a4f;border-bottom-width:.35rem;border-radius:.65rem;
  background:linear-gradient(#6d3b20,#472312);box-shadow:0 .22rem #251108;text-align:left
}
.calc-row span{font-size:.72rem;color:#f4d09a;font-weight:800}
.calc-row strong{font-size:.85rem}
.calc-row.boost{border-color:#e0b24d;background:linear-gradient(#8a5220,#542f11)}
.calc-row.final{border-color:#64b874;background:linear-gradient(#3f824c,#285831)}
.no-coins{
  display:none;padding:.8rem;border:.22rem solid #d6aa67;border-bottom-width:.45rem;
  border-radius:.9rem;background:linear-gradient(#6c3b20,#472312);margin:.7rem 0
}
.no-coins h3{font-size:1.05rem;margin:0 0 .25rem}
.no-coins p{font-size:.75rem;color:#f4d09a;margin:0;line-height:1.35}
.updates{display:grid;gap:.35rem;margin-top:.6rem}
.update-item{padding:.42rem .55rem;background:#3c2113;border-radius:.55rem;font-size:.68rem;font-weight:900}

/* footer */
.footer{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:auto}
.footer button{
  min-height:2.45rem;padding:.35rem .7rem;border:.18rem solid #e1b36b;border-bottom-width:.32rem;
  border-radius:.65rem;background:linear-gradient(#85502a,#542a17);box-shadow:0 .25rem #281207;
  color:#fff;cursor:pointer;font-size:.68rem;font-weight:1000
}
.footer button:focus-visible{outline:none;filter:brightness(1.17);transform:translateY(-.1rem)}

.loading{
  position:fixed;inset:0;display:none;place-items:center;background:rgba(30,13,5,.8);
  z-index:20;backdrop-filter:blur(.3rem)
}
.loading.show{display:grid}
.loading-card{
  text-align:center;padding:1.5rem;border:.35rem solid #a98d72;border-radius:1.1rem;
  background:#4d2b18;box-shadow:0 .7rem #241006
}
.loading-mark{font-size:1.35rem;font-weight:1000;letter-spacing:.08em;color:#ffd670}

@media(max-width:720px){
  .stage{width:100%;padding:.55rem}.logo-copy{display:none}.hud-box:first-child{display:none}
  .panel{padding:.9rem}.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .answers{grid-template-columns:1fr}.play-top{flex-wrap:wrap}.meter{order:4;flex-basis:100%}
}

/* autenticação e navegação conectável ao BFF */
[hidden]{display:none!important}
.auth-pending .stage{visibility:hidden}
.stage[aria-hidden="true"]{display:none}
.login-shell{position:relative;z-index:5;min-height:100dvh;display:grid;place-items:center;padding:1rem}
.login-card{width:min(28rem,100%);text-align:center;padding:1.4rem 1.25rem 1.6rem;border:.38rem solid #a98d72;border-bottom-width:.75rem;border-radius:1.5rem;background:linear-gradient(#684127,#3a1d10);box-shadow:0 .75rem #241006,0 2rem 4rem #0008}
.login-mascot{width:7rem;height:7rem;object-fit:contain;filter:drop-shadow(0 .45rem .2rem #1d0b0588)}
.login-card h1{font-size:clamp(2rem,8vw,3.4rem);line-height:.92;margin:.45rem 0;color:#fff3c6;text-shadow:0 .25rem #2d1409}
.login-card>p{max-width:22rem;margin:.5rem auto 1rem;color:#f1d3a2;font-size:.86rem;line-height:1.45}
.login-card form{display:grid;gap:.65rem;text-align:left}
.login-card label{font-size:.66rem;font-weight:1000;text-transform:uppercase;letter-spacing:.12em;color:#ffd670}
.login-card input{width:100%;padding:.75rem;text-align:center;font:1000 1.8rem/1 system-ui;letter-spacing:.3em;text-indent:.3em;color:#4b2715;background:#fff5d8;border:.25rem solid #a36b38;border-bottom-width:.5rem;border-radius:.85rem;outline:none;text-transform:uppercase}
.login-card input:focus{border-color:#40d5db;box-shadow:0 0 0 .22rem #2bcbd155}
.login-card small{color:#e7c18d;font-size:.7rem;text-align:center}.login-card small strong{color:#fff}
.form-error{min-height:1.1rem;color:#ffb0a7;font-size:.72rem;font-weight:900;text-align:center}
.login-submit{width:100%}
.login-story{display:grid;gap:.45rem;margin-top:1.1rem;padding:1rem;border:.16rem solid #9e744e;border-radius:.85rem;background:#2a140b99;color:#eed2a3}
.login-story strong{color:#fff3c6;font-size:.88rem}.login-story span{font-size:.7rem;line-height:1.45}
.learn-more-link{justify-self:center;margin-top:.2rem;padding:.5rem .75rem;border:.14rem solid #dcb06c;border-bottom-width:.3rem;border-radius:.55rem;background:linear-gradient(#75502e,#482513);box-shadow:0 .2rem #1c0b06;color:#fff;font-size:.68rem;font-weight:1000;text-decoration:none}
.learn-more-link:hover,.learn-more-link:focus-visible{filter:brightness(1.15);transform:translateY(-.08rem);outline:none}
.session-button{padding:.45rem .65rem;border:.16rem solid #d7a46a;border-bottom-width:.3rem;border-radius:.55rem;background:#4b2817;color:#fff;font-size:.62rem;font-weight:1000;cursor:pointer}

/* ranking opcional por time */
.ranking-list{display:grid;gap:.55rem;margin-top:1rem}
.ranking-period{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin:1rem auto .2rem;padding:.3rem;border:.16rem solid #795034;border-radius:.75rem;background:#2b140b;max-width:23rem}
.ranking-period button{padding:.58rem .4rem;border:.14rem solid transparent;border-radius:.5rem;background:transparent;color:#d8b47d;font-size:.67rem;font-weight:1000;cursor:pointer}
.ranking-period button.active{border-color:#9ff9f3;background:linear-gradient(#28afb8,#11616c);box-shadow:0 .2rem #073a41;color:#fff}
.ranking-period button:hover,.ranking-period button:focus-visible{filter:brightness(1.15);outline:none}
.ranking-row{display:grid;grid-template-columns:3.1rem minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.75rem .85rem;border:.2rem solid #8d603c;border-bottom-width:.42rem;border-radius:.75rem;background:linear-gradient(#6a3a20,#40200f);box-shadow:0 .25rem #241006}
.ranking-row.current{border-color:#8ff5f1;background:linear-gradient(#218f98,#10555f);box-shadow:0 .25rem #073840,0 0 1rem #2bcbd144}
.ranking-position{width:2.35rem;height:2.35rem;display:grid;place-items:center;border-radius:50%;background:#e8a736;color:#41200e;font-weight:1000;border:.16rem solid #ffe3a1}
.ranking-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-row>span:last-child{color:#ffd670;font-size:.75rem;font-weight:1000}

@media(max-width:720px){
  .hud{gap:.3rem}.session-button{padding:.38rem .45rem}
  .login-card{padding:1rem}.login-mascot{width:5.5rem;height:5.5rem}
  .ranking-row{grid-template-columns:2.7rem minmax(0,1fr) auto;padding:.65rem .6rem;gap:.45rem}
}