/* Luciano Kikão — página Jogos e os 21 jogos */
.jgs { padding: clamp(40px, 6vw, 90px) var(--margem) clamp(56px, 7vw, 110px); }
.jgs__g { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 56px); line-height: 1; border-bottom: 2px solid var(--tinta); padding-bottom: 8px; margin: clamp(30px, 4vw, 56px) 0 16px; }
.jgs__g:first-child { margin-top: 0; }
.jgs__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.jgc { position: relative; display: grid; gap: 4px; text-align: left; background: var(--papel); color: var(--tinta); border: 2px solid var(--tinta); padding: 16px 16px 14px; cursor: pointer; box-shadow: 6px 6px 0 var(--c); transition: transform .25s var(--suave), box-shadow .25s var(--suave); font: inherit; }
.jgc:hover { transform: translate(-4px, -4px) rotate(-1deg); box-shadow: 10px 10px 0 var(--c); }
.jgc__ic { font-size: 40px; line-height: 1; }
.jgc b { font-family: var(--f-cartaz); font-variation-settings: "wdth" 70; font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 1; margin-top: 6px; }
.jgc i { font-style: normal; font-size: 14px; line-height: 1.3; }
.jgc small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--brasa-escura); margin-top: 6px; }
.jgchama { background: var(--sol); color: var(--tinta); padding: clamp(36px, 5vw, 70px) var(--margem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; border-block: 2px solid var(--tinta); }
.jgchama .olho { color: var(--brasa-escura); }
.jgchama p:not(.olho) { max-width: 30em; font-weight: 600; margin-top: 10px; }

/* casca */
.jg { position: fixed; inset: 0; z-index: 260; background: #14110f; color: var(--papel); display: grid; grid-template-rows: auto minmax(0, 1fr); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.jg[hidden] { display: none; }
.jg__topo { display: flex; align-items: center; gap: 14px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 2px solid var(--sol); background: #0b0908; }
.jg__topo b { flex: 1; min-width: 0; font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2.4vw, 30px); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg__placar { text-align: right; line-height: 1; }
.jg__placar small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; opacity: .6; }
.jg__placar i { font-style: normal; font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; font-size: 30px; color: var(--sol); font-variant-numeric: tabular-nums; }
.jg__topo button { background: none; border: 0; color: var(--papel); font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 8px 0 8px 8px; cursor: pointer; }
.jg__palco { position: relative; overflow: hidden; display: grid; place-items: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.jg__palco > * { width: min(560px, 100%); }
.jg__intro, .jg__fim > div { text-align: center; display: grid; gap: 12px; justify-items: center; }
.jg__intro h3, .jg__fim h3 { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 7vw, 64px); line-height: .95; text-wrap: balance; }
.jg__intro .olho { color: var(--sol); margin: 0; }
.jg__intro p { max-width: 30em; line-height: 1.45; }
.jg__mic { font-size: 13px; opacity: .7; }
.jg__rec { font-size: 13px; opacity: .65; }
.jg__fim { position: absolute; inset: 0; width: 100%; z-index: 20; background: rgba(11, 9, 8, .93); display: grid; place-items: center; padding: 20px; animation: aparece .3s; }
.jg__selo { font-family: var(--f-mao); color: var(--sol); font-size: 22px; transform: rotate(-2deg); }
.jg__pts b { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; font-size: 84px; line-height: .9; color: var(--sol); }
.jg__acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.jg__erro { text-align: center; max-width: 26em; }
.jg__vidas { position: absolute; left: 16px; top: 10px; width: auto; color: var(--brasa); font-size: 22px; letter-spacing: 2px; z-index: 5; }
.jg__msg { position: absolute; left: 50%; top: 12%; width: auto; translate: -50% 0; z-index: 6; font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 6vw, 48px); opacity: 0; pointer-events: none; white-space: nowrap; }
.jg__msg.on { animation: msgsobe .7s var(--suave); }
.jg__msg.bom { color: var(--sol); } .jg__msg.ruim { color: var(--brasa); }
@keyframes msgsobe { 0% { opacity: 0; scale: .6; } 20% { opacity: 1; scale: 1.1; } 100% { opacity: 0; translate: -50% -40px; } }
.treme { animation: jtreme .25s; }
@keyframes jtreme { 25% { translate: -8px 0; } 75% { translate: 8px 0; } }

/* fole */
.fole { display: grid; gap: 22px; justify-items: center; }
.fole__prox { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; font-size: 64px; line-height: 1; color: var(--sol); }
.fole__inst { display: flex; align-items: stretch; height: 210px; cursor: pointer; touch-action: none; }
.fole__inst span { width: 62px; background: repeating-linear-gradient(180deg, var(--papel) 0 12px, #14110f 12px 15px); border: 4px solid var(--papel); border-radius: 8px; }
.fole__inst span:last-child { background: radial-gradient(circle, var(--papel) 28%, transparent 30%) 0 0 / 16px 16px var(--brasa); }
.fole__inst i { width: 40px; background: repeating-linear-gradient(90deg, var(--brasa) 0 8px, #14110f 8px 12px, var(--sol) 12px 20px, #14110f 20px 24px); transition: width .16s var(--suave); }
.fole__inst.aberto i { width: 210px; }
.fole__tempo { width: 100%; height: 10px; background: var(--fio-claro); }
.fole__tempo i { display: block; height: 100%; background: var(--sol); transform-origin: left; }

/* desafio */
.desa { display: grid; gap: 18px; justify-items: center; }
.desa__vez { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; text-transform: uppercase; font-size: 44px; color: var(--sol); text-align: center; line-height: 1; }
.desa__pad { width: min(64vw, 260px); aspect-ratio: 1; border-radius: 50%; border: 8px solid var(--papel); background: var(--brasa); font-size: 90px; cursor: pointer; transition: scale .08s; touch-action: none; }
.desa__pad:disabled { opacity: .55; }
.desa__pad.bate, .desa__pad:active { scale: .93; background: var(--sol); }
.desa__dots { min-height: 1.4em; letter-spacing: 4px; color: var(--sol); }

/* trio */
.trio { display: grid; gap: 12px; height: 100%; max-height: 620px; grid-template-rows: repeat(3, 1fr); }
.trio__f { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; background: #1d1916; border: 3px solid var(--papel); color: var(--papel); padding: 14px 18px; cursor: pointer; font: inherit; text-align: left; touch-action: none; }
.trio__f span { font-size: 54px; grid-row: span 2; }
.trio__f b { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; text-transform: uppercase; font-size: 32px; }
.trio__f i { height: 14px; background: var(--fio-claro); }
.trio__f em { display: block; height: 100%; background: var(--sol); transform-origin: left; }
.trio__f.toca { background: var(--sol); color: #14110f; }
.trio__f.perigo { border-color: var(--brasa); animation: pisca .4s infinite; } .trio__f.perigo em { background: var(--brasa); }
@keyframes pisca { 50% { opacity: .6; } }

/* pistas */
.pst { display: flex; gap: 10px; height: 100%; max-height: 680px; }
.pst__l { position: relative; flex: 1; background: #1d1916; border: 3px solid var(--papel); overflow: hidden; cursor: pointer; touch-action: none; }
.pst__l > i { position: absolute; left: 50%; translate: -50% -50%; font-style: normal; font-size: 52px; line-height: 1; pointer-events: none; }
.pst__alvo { position: absolute; left: 0; right: 0; top: 80%; translate: 0 -50%; border-block: 4px dashed var(--sol); padding: 22px 0; text-align: center; font-weight: 800; font-size: 14px; letter-spacing: .1em; color: var(--sol); pointer-events: none; }
.pst--gelo .pst__alvo { border: 0; font-size: 84px; padding: 0; top: 84%; }
.pst__l.acerta { background: #3a300c; }

/* baixo */
.bx { display: grid; grid-template-columns: 1fr auto; gap: 16px 22px; align-items: center; }
.bx__cx { --g: 0; aspect-ratio: 1; background: #1d1916; border: 4px solid var(--papel); display: grid; place-items: center; }
.bx__cx span { width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #14110f 14%, #55504a 16% 30%, #26221e 32% 64%, #6b655d 66% 72%, #14110f 74%); scale: calc(1 + var(--g) * .18); }
.bx__cx.queima { background: var(--brasa); }
.bx__med { position: relative; width: 46px; height: 300px; border: 3px solid var(--papel); background: #0b0908; }
.bx__niv { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #1db954, var(--sol) 70%, var(--brasa)); }
.bx__alvo { position: absolute; left: -8px; right: -8px; background: rgba(246, 194, 26, .4); border-block: 3px solid var(--sol); z-index: 2; }
.bx__bt { grid-column: 1 / -1; background: var(--sol); color: #14110f; border: 0; padding: 22px; font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; font-size: 34px; cursor: pointer; touch-action: none; }
.bx__rod { grid-column: 1 / -1; text-align: center; opacity: .7; font-size: 14px; }

/* dj */
.dj { display: grid; gap: 18px; justify-items: center; }
.dj__faixa { font-weight: 700; text-align: center; min-height: 2.6em; }
.dj__discos { display: flex; gap: 18px; position: relative; }
.dj__discos::before, .dj__discos::after { content: "▼"; position: absolute; top: -22px; color: var(--sol); font-size: 18px; }
.dj__discos::before { left: 25%; translate: -50% 0; margin-left: -4px; } .dj__discos::after { left: 75%; translate: -50% 0; margin-left: 4px; }
.dj__d { width: min(38vw, 190px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #0b0908 0 3px, #2a2521 3px 6px); border: 3px solid var(--papel); position: relative; }
.dj__d i { position: absolute; left: 50%; top: 0; width: 14px; height: 30%; translate: -50% 0; background: var(--sol); }
.dj__pista { width: 100%; display: flex; align-items: center; gap: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.dj__pista i { flex: 1; height: 14px; background: var(--fio-claro); } .dj__pista em { display: block; height: 100%; background: var(--sol); transform-origin: left; }
.dj__bt { width: 100%; background: var(--brasa); color: var(--papel); border: 0; padding: 22px; font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; font-size: 40px; cursor: pointer; touch-action: none; }
.dj__bt:active { background: var(--sol); color: #14110f; }

/* microfone */
.grito, .nota, .palmas { display: grid; gap: 16px; justify-items: center; text-align: center; }
.grito__t, .nota__t { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; font-size: 96px; line-height: .9; color: var(--sol); font-variant-numeric: tabular-nums; }
.grito__gol { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; font-size: 44px; line-height: 1; word-break: break-all; }
.grito__niv { width: 100%; height: 16px; background: var(--fio-claro); } .grito__niv i { display: block; height: 100%; background: var(--brasa); transform-origin: left; transform: scaleX(0); }
.nota__faixa { position: relative; width: 100%; height: 70px; background: #1d1916; border: 3px solid var(--papel); }
.nota__faixa span { position: absolute; left: 27.5%; width: 45%; top: 0; bottom: 0; background: rgba(246, 194, 26, .3); border-inline: 3px solid var(--sol); }
.nota__faixa i { position: absolute; top: -8px; bottom: -8px; left: 50%; width: 8px; translate: -50% 0; background: var(--sol); transition: left .08s linear; }
.nota__faixa i.fora { background: var(--brasa); }
.palmas__luz { width: min(50vw, 200px); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--papel); background: #1d1916; transition: background .1s, scale .1s; }
.palmas__luz.on { background: var(--sol); scale: 1.12; }
.palmas__c { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; font-size: 52px; line-height: 1; }

/* quiz */
.qz { display: grid; gap: 14px; }
.qz__n { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--sol); }
.qz h3 { font-size: clamp(24px, 4.6vw, 38px); font-weight: 800; font-variation-settings: "wdth" 82; line-height: 1.1; text-wrap: balance; }
.qz__sub { opacity: .7; margin-top: -6px; }
.qz__ops { display: grid; gap: 10px; }
.qz__ops button { background: #1d1916; border: 2px solid var(--papel); color: var(--papel); padding: 15px 16px; font: inherit; font-weight: 700; font-size: 17px; text-align: left; cursor: pointer; line-height: 1.25; }
.qz__ops:not(.foi) button:hover { background: var(--papel); color: #14110f; }
.qz__ops button.certo { background: #1db954; border-color: #1db954; color: #0b0908; }
.qz__ops button.errado { background: var(--brasa); border-color: var(--brasa); }
.qz__exp { border-left: 4px solid var(--sol); padding-left: 12px; line-height: 1.4; }
.qz__prox { justify-self: start; }

/* luzes */
.luzes { display: grid; gap: 16px; justify-items: center; }
.luzes__st, .copos__st, .cabos__st, .qc__esc { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; text-transform: uppercase; font-size: 30px; color: var(--sol); text-align: center; line-height: 1; }
.luzes__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 400px); background: #0b0908; border: 4px solid var(--papel); padding: 10px; }
.luzes__grade button { aspect-ratio: 1.25; background: #1d1916; border: 2px solid #3a342e; display: grid; place-items: center; cursor: pointer; touch-action: none; }
.luzes__grade span { width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #14110f 16%, #55504a 18% 32%, #26221e 34% 66%, #6b655d 68% 74%, #14110f 76%); }
.luzes__grade button.on { background: var(--sol); } .luzes__grade button.on span { scale: 1.15; }

/* onde está */
.onde { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; width: min(900px, 100%); }
.onde__t { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.onde__t i { flex: 1; height: 10px; background: var(--fio-claro); } .onde__t em { display: block; height: 100%; background: var(--sol); transform-origin: left; }
.onde__cena { position: relative; background: linear-gradient(#2b2622, #14110f); border: 3px solid var(--papel); overflow: hidden; min-height: 300px; }
.onde .p { position: absolute; width: 30px; height: 44px; padding: 0; border: 0; background: none; }
.onde i.p::before { content: ""; position: absolute; left: 4px; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--pele); box-shadow: inset 0 9px 0 var(--cab); }
.onde i.p::after { content: ""; position: absolute; left: 0; top: 20px; width: 30px; height: 24px; border-radius: 10px 10px 0 0; background: var(--roupa); }
.onde i.p[data-longo]::before { box-shadow: inset 0 9px 0 var(--cab), -4px 6px 0 -1px var(--cab), 4px 6px 0 -1px var(--cab); }
.onde i.p[data-chapeu]::before { box-shadow: inset 0 7px 0 #b98b3e, 0 -2px 0 3px #b98b3e; }
.onde .p--k { cursor: pointer; }
.onde .p--k span { position: absolute; left: 3px; top: -2px; width: 24px; height: 46px; background: url(../img/k-sorriso.webp) 50% 0 / 118% auto no-repeat; }
.onde .p--k.achou { outline: 4px solid var(--sol); outline-offset: 4px; border-radius: 8px; scale: 1.6; z-index: 9999 !important; }

/* copinhos */
.copos { display: grid; gap: 30px; justify-items: center; }
.copos__mesa { display: flex; gap: 4%; width: min(100%, 420px); }
.copo { position: relative; flex: 1; aspect-ratio: .8; background: none; border: 0; cursor: pointer; transition: transform .4s var(--suave); touch-action: none; }
.copo__c { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(64px, 20vw, 100px); transition: translate .3s var(--suave); }
.copo__g { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 40px; opacity: 0; }
.copo.tem .copo__g { opacity: 1; }
.copo.abre .copo__c { translate: 0 -46%; }
.copo.certo .copo__c { filter: drop-shadow(0 0 12px var(--sol)); } .copo.errado .copo__c { filter: grayscale(1); }

/* quebra-cabeça */
.qc { display: grid; gap: 14px; justify-items: center; }
.qc__niv { display: grid; gap: 10px; width: 100%; }
.qc__niv button { background: #1d1916; border: 2px solid var(--papel); color: var(--papel); padding: 18px; font: inherit; font-weight: 800; font-size: 18px; cursor: pointer; }
.qc__niv button:hover { background: var(--sol); color: #14110f; }
.qc__grade { display: grid; gap: 3px; width: min(100%, 74vh, 520px); aspect-ratio: 1; background: #0b0908; border: 4px solid var(--papel); }
.qc__grade button { border: 0; padding: 0; cursor: pointer; background-repeat: no-repeat; }
.qc__grade button.sel { outline: 4px solid var(--sol); outline-offset: -4px; scale: .94; }
.qc__ver { background: none; border: 0; color: var(--sol); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.qc__ref { width: 150px; border: 3px solid var(--papel); }

/* cabos */
.cabos { display: grid; gap: 14px; justify-items: center; }
.cabos__grade { display: grid; gap: 3px; width: min(100%, 72vh, 520px); aspect-ratio: 1; }
.cabos__grade button { position: relative; background: #1d1916; border: 0; padding: 0; cursor: pointer; }
.cabos__grade i { position: absolute; background: #6b655d; }
.cabos__grade button.on i { background: var(--sol); }
.cabos__grade i.n { left: 41%; width: 18%; top: 0; height: 59%; } .cabos__grade i.s { left: 41%; width: 18%; bottom: 0; height: 59%; }
.cabos__grade i.e { top: 41%; height: 18%; right: 0; width: 59%; } .cabos__grade i.w { top: 41%; height: 18%; left: 0; width: 59%; }
.cabos__grade b { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(18px, 5vw, 30px); z-index: 2; }
.cabos__grade button.caixa:not(.on) b { filter: grayscale(1) brightness(.6); }
.cabos__grade button.fonte { background: #3a300c; }

@media (max-width: 560px) { .jgs__grade { grid-template-columns: 1fr 1fr; } .jgc { padding: 12px; } .jgc b { font-size: 20px; } .jgc i { font-size: 13px; } .bx__med { height: 240px; } }
.qc__ref[hidden] { display: none; }
.jg__topo button, .jg__placar { flex: none; white-space: nowrap; }
.jg [hidden] { display: none !important; }

/* ---------- jogos com a música tocando (jogos3.js) ---------- */
.jg__palco:has(.mt) { overflow-y: auto; place-items: start center; -webkit-overflow-scrolling: touch; }
.mt { display: grid; gap: 14px; padding-block: 6px 28px; }
.mt h3 { font-size: clamp(22px, 4.4vw, 34px); font-weight: 800; font-variation-settings: "wdth" 82; line-height: 1.12; text-wrap: balance; }
.mt__carrega { text-align: center; opacity: .75; padding: 40px 0; animation: mtpisca 1.1s ease-in-out infinite alternate; }
@keyframes mtpisca { to { opacity: .3; } }
.mt__disco { display: flex; align-items: center; gap: 14px; background: #1d1916; border: 2px solid var(--papel); color: var(--papel); padding: 10px 16px 10px 10px; font: inherit; cursor: pointer; text-align: left; }
.mt__disco b { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.mt__disco:disabled { cursor: default; opacity: .85; }
.mt__disco.toca { border-color: var(--sol); }
.mt__vinil { --n: 0; flex: none; width: 58px; height: 58px; border-radius: 50%; background: repeating-radial-gradient(circle, #0b0908 0 2px, #26211d 2px 4px); display: grid; place-items: center; scale: calc(1 + var(--n) * .22); box-shadow: 0 0 0 calc(var(--n) * 9px) rgba(246, 194, 26, .28); }
.mt__vinil i { width: 20px; height: 20px; border-radius: 50%; background: var(--brasa); border: 3px solid var(--sol); }
.mt__disco.toca .mt__vinil { animation: mtgira 1.6s linear infinite; }
@keyframes mtgira { to { rotate: 360deg; } }
.qz__ops--2 { grid-template-columns: 1fr 1fr; }
.qz__ops--2 button { text-align: center; }
.qz__ops button.sel { background: var(--sol); border-color: var(--sol); color: #14110f; }
.mt__capas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt__capas button { padding: 0; border: 3px solid var(--papel); background: #1d1916; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.mt__capas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt__capas button.certo { border-color: #1db954; outline: 4px solid #1db954; }
.mt__capas button.errado { border-color: var(--brasa); opacity: .55; }
.mt__campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mt__campo input { min-width: 0; background: var(--papel); color: #14110f; border: 2px solid var(--papel); padding: 13px 14px; font: inherit; font-size: 17px; font-weight: 700; user-select: text; -webkit-user-select: text; }
.mt__campo input.certo { background: #1db954; border-color: #1db954; }
.mt__campo input.errado { background: var(--brasa); border-color: var(--brasa); color: var(--papel); }
.mt__fala { display: grid; gap: 10px; justify-items: start; }
.mt__ouvi { line-height: 1.35; opacity: .85; min-height: 1.4em; }
.mt__link { background: none; border: 0; color: var(--papel); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 4px 0; opacity: .75; }
.par { display: grid; gap: 10px; }
.par__r { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--sol); }
.par__l { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.par__l button { --c: transparent; background: #1d1916; color: var(--papel); border: 2px solid var(--papel); box-shadow: inset 0 -10px 0 var(--c); font: inherit; font-size: 26px; font-weight: 900; padding: 18px 0 22px; cursor: pointer; }
.par__l button.sel { background: var(--papel); color: #14110f; }
.par__l button.certo { border-color: #1db954; outline: 3px solid #1db954; }
.par__l button.errado { border-color: var(--brasa); outline: 3px solid var(--brasa); }
.par [data-conf] { justify-self: start; }
.tro { display: grid; gap: 8px; }
.tro p { display: flex; flex-wrap: wrap; gap: 4px 6px; opacity: .45; transition: opacity .2s; border-left: 4px solid transparent; padding-left: 8px; }
.tro p.on { opacity: 1; border-left-color: var(--sol); }
.tro p.foi { opacity: .7; }
.tro button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--papel); font: inherit; font-size: clamp(17px, 4.4vw, 21px); font-weight: 700; padding: 3px 2px; cursor: pointer; }
.tro button.certo { background: #1db954; color: #0b0908; }
.tro button.errado { background: var(--brasa); }
.tro button.perdeu { border-bottom-color: var(--brasa); color: var(--sol); }
.tro s { opacity: .6; }
.tro__st { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--sol); }
.kar, .esc { display: grid; gap: 12px; }
.kar__ant { opacity: .6; font-size: 18px; line-height: 1.3; }
.kar__vez { font-size: clamp(22px, 5.4vw, 30px); font-weight: 800; line-height: 1.2; padding: 12px; border: 2px dashed var(--papel); text-wrap: balance; }
.kar__vez.on { border-style: solid; border-color: var(--sol); background: var(--sol); color: #14110f; }
.kar__barra, .kar__mic { height: 12px; background: #2a2420; overflow: hidden; }
.kar__barra i, .kar__mic i { display: block; height: 100%; background: var(--sol); transform-origin: left; transform: scaleX(0); }
.kar__mic { height: 6px; }
.kar__mic i { background: #1db954; }
.kar__d { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.esc { padding: 18px; border: 2px solid var(--papel); transition: background .25s, color .25s; }
.esc.apagou { background: #000; border-color: var(--brasa); }
.esc__t { font-family: var(--f-cartaz); font-variation-settings: "wdth" 62; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 8vw, 52px); line-height: 1; }
.esc.apagou .esc__t { color: var(--brasa); }
.esc__r { font-weight: 700; letter-spacing: .04em; }

/* ---------- Jogando Gelinho ---------- */
.jg--gelinho .jg__palco { padding: 8px; } .jg--gelinho .jg__palco > * { width: min(1100px, 100%); }
.gel { display: grid; gap: 8px; }
.gel__hud { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.gel__tempo { display: block; height: 14px; border: 2px solid var(--papel); } .gel__tempo i { display: block; height: 100%; background: #25d1da; transition: width .2s linear; } .gel__tempo i.pouco { background: #e3321c; }
.gel__hud b { font: 900 30px/1 var(--f-cartaz); font-variation-settings: "wdth" 62; min-width: 2ch; text-align: right; } .gel__hud em { font-style: normal; font-weight: 800; font-size: 13px; color: #f6c21a; text-transform: uppercase; letter-spacing: .06em; min-width: 7em; }
.gel canvas { display: block; width: min(100%, calc((100dvh - 190px) * 1.5)); height: auto; aspect-ratio: 3 / 2; margin: 0 auto; background: #0b0714; border: 3px solid var(--papel); box-shadow: 6px 6px 0 #25d1da; cursor: crosshair; touch-action: none; }
.gel__faixa { font-size: 12px; opacity: .7; text-align: center; }
@media (max-width: 640px) { .gel__hud em { display: none; } .gel__hud { grid-template-columns: minmax(0, 1fr) auto; } }