/* ---------- menu ---------- */
.menu { display: grid; grid-template-columns: minmax(380px, 520px) 1fr; grid-template-rows: auto 1fr auto; padding: 46px 54px 30px; gap: 18px; }
.menu-logo { grid-column: 1; }
.menu-logo .logo { font-family: "Bebas Neue", var(--font); font-size: clamp(76px, 9vw, 132px); line-height: .85; letter-spacing: .04em; color: #fff;
  text-shadow: 0 0 16px rgba(255,61,127,.95), 0 0 48px rgba(255,61,127,.55), 0 4px 0 #4a0f24; }
.menu-logo .tag { font-family: var(--mono); color: var(--cyan); letter-spacing: .18em; text-transform: uppercase; font-size: 14px; margin-top: 10px; text-shadow: 0 0 10px rgba(56,225,255,.6); }
.menu-cards { grid-column: 1; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.mcard { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: rgba(16,12,10,.78); border: 1px solid var(--line); cursor: pointer; backdrop-filter: blur(6px);
  transition: transform .1s, border-color .15s, background .15s; }
.mcard:hover { transform: translateX(8px) scale(1.02); border-color: rgba(255,179,92,.6); background: rgba(30,22,17,.9); }
.mcard:active { transform: scale(.97); }
.mcard .mi { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,179,92,.12); color: var(--amber); }
.mcard .mi svg { width: 26px; height: 26px; }
.mcard b { font-family: "Bebas Neue", var(--font); font-weight: 400; font-size: 30px; letter-spacing: .04em; line-height: 1; }
.mcard p { margin: 4px 0 0; color: var(--dim); font-size: 14px; line-height: 1.4; }
.mcard.hot { border-color: rgba(255,61,127,.55); background: linear-gradient(90deg, rgba(255,61,127,.16), rgba(16,12,10,.8)); }
.mcard.hot .mi { background: rgba(255,61,127,.2); color: #ff8fb6; }
.menu-foot { grid-column: 1 / -1; display: flex; gap: 10px; align-self: end; }
.menu-foot .rastro-aviso { margin-left: auto; align-self: center; font: 500 12px var(--mono); color: var(--dim); }
.keyhelp { font: 500 12px var(--mono); color: var(--dim); background: rgba(16,12,10,.6); padding: 6px 10px; border-radius: 8px; }

/* ---------- cartões / grades ---------- */
.dev-grid, .up-grid, .shop-grid, .order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 14px 0; }
.card { border-radius: 14px; padding: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: transform .1s, border-color .15s; }
.card:hover { transform: translateY(-3px); border-color: rgba(255,179,92,.5); }
.card b { font-size: 17px; } .card p { color: var(--dim); font-size: 13.5px; line-height: 1.4; margin: 6px 0 10px; }
.up { border-radius: 14px; padding: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); cursor: pointer; transition: transform .1s, border-color .15s; }
.up:hover { transform: scale(1.03); border-color: var(--amber); }
.up.own { opacity: .55; cursor: default; border-color: rgba(61,220,132,.4); }
.up p { color: var(--dim); font-size: 13px; margin: 6px 0 10px; line-height: 1.35; }
.up .cost { font: 700 15px var(--mono); color: #ffd76a; }
.up.shake, .shake { animation: shk .3s; }
@keyframes shk { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.rep-head { font-size: 18px; margin-bottom: 4px; } .rep-head b { color: #ffd76a; font-family: var(--mono); }
.modal.wide { width: min(980px, 94vw); }
.modal.narrow { width: 360px; }
.col { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.col .btn { justify-content: center; }
.credits p { color: var(--txt); }

/* ---------- ajustes ---------- */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: min(520px, 80vw); }
.set-row span { font-weight: 600; }
.set-row input[type=range] { width: 260px; accent-color: var(--amber); }
.seg { display: flex; gap: 4px; background: rgba(255,255,255,.05); padding: 4px; border-radius: 10px; }
.seg-b { font: 600 13px var(--font); color: var(--dim); background: transparent; border: 0; padding: 7px 12px; border-radius: 7px; cursor: pointer; }
.seg-b.on { background: var(--amber); color: #2a1606; }

/* ---------- aprenda ---------- */
.learn { margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(56,225,255,.06); border: 1px solid rgba(56,225,255,.2); }
.learn .lk { font: 700 11px var(--mono); color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.learn p { margin: 6px 0; line-height: 1.5; font-size: 14px; }
.badge { font: 700 10.5px var(--mono); padding: 2px 6px; border-radius: 5px; }
.badge.bad { background: rgba(255,90,78,.18); color: var(--red); }

/* ---------- intro (história) ---------- */
.intro { display: flex; align-items: flex-end; justify-content: center; padding: 0 0 70px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 45%); }
.intro-box { max-width: 820px; width: 88vw; text-align: center; }
.intro-box .ln { font: 500 clamp(20px, 2.2vw, 28px) var(--font); line-height: 1.45; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); min-height: 3em; }
.intro-box .ln em { color: var(--amber); font-style: normal; }
.intro-box .hint { margin-top: 14px; font: 600 12px var(--mono); color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
.intro-skip { position: absolute; right: 20px; top: 18px; }
.cine-bars::before, .cine-bars::after { content: ''; position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 1; }
.cine-bars::before { top: 0; } .cine-bars::after { bottom: 0; }
/* fim da campanha: créditos subindo por cima da oficina */
.ending-roll { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: flex; justify-content: center; background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.2) 70%); }
.ending-roll .roll { position: absolute; top: 100%; width: min(640px, 86vw); text-align: center; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.85); animation: endroll 30s linear forwards; }
@keyframes endroll { to { transform: translateY(calc(-100% - 100vh)); } }
.roll .logo-end { font: 400 clamp(76px, 10vw, 140px) "Bebas Neue", var(--font); line-height: .9; letter-spacing: .04em; text-shadow: 0 0 16px rgba(255,61,127,.95), 0 0 48px rgba(255,61,127,.55), 0 4px 0 #4a0f24; }
.roll .tag-end { font: 600 14px var(--mono); color: var(--cyan); letter-spacing: .18em; text-transform: uppercase; margin: 10px 0 70px; }
.roll h4 { font: 700 12px var(--mono); color: var(--amber); letter-spacing: .16em; text-transform: uppercase; margin: 38px 0 6px; }
.roll p { margin: 4px 0; font-size: 19px; line-height: 1.4; }
.roll .thanks { margin-top: 90px; font: 400 44px "Caveat", cursive; color: var(--amber); }
.order.boss { background: #fff4cf; outline: 3px solid #d4a017; outline-offset: -3px; }
.order.boss .pay { color: #8a5a00; font-size: 15px; }
.lvl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0; }
.lvl-card { cursor: pointer; } .lvl-card:hover { border-color: rgba(255,179,92,.6); background: rgba(255,179,92,.06); }
.lvl-card .lv { font: 400 34px "Bebas Neue", var(--font); color: var(--amber); line-height: 1; }
.lvl-card.locked { opacity: .35; pointer-events: none; }
.unlock { margin: 10px 0; padding: 10px 14px; border-radius: 10px; background: rgba(255,179,92,.12); border: 1px solid rgba(255,179,92,.45); }

/* ---------- campanha ---------- */
.order { border-radius: 8px; background: var(--paper); color: var(--ink); padding: 14px; cursor: default; position: relative; box-shadow: 0 10px 24px rgba(0,0,0,.45); transform: rotate(var(--r, 0deg)); transition: transform .12s; }
.order:hover { transform: rotate(0) scale(1.03); }
.order .who { display: flex; gap: 10px; align-items: center; }
.order .av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 18px var(--font); color: #fff; flex: none; }
.order .nm { font: 700 15px var(--font); } .order .tp { font: 700 10px var(--mono); color: #7a6b55; letter-spacing: .1em; }
.order .q { font-family: "Caveat", cursive; font-size: 24px; line-height: 1.05; color: #23367d; margin: 8px 0; }
.order .meta { display: flex; justify-content: space-between; align-items: center; font: 700 13px var(--mono); margin-top: 8px; }
.order .pay { color: #b3261e; font-size: 19px; }
.order .diff { color: #6b5e4c; }
.order .gl { font-size: 12.5px; color: #4a4235; margin: 4px 0; }
.order.taken { opacity: .45; }
.order .btn { margin-top: 10px; width: 100%; justify-content: center; }
.paper-modal { background: #f4efe3; color: var(--ink); }
.paper-modal h2 { color: var(--ink); }
.bill-big { margin: 10px auto; width: min(520px, 80vw); border-radius: 6px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.5); position: relative; }
.bill-big canvas, .bill-big img { width: 100%; display: block; }
.stamp { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%) rotate(-14deg) scale(2.2); opacity: 0; font: 400 86px "Bebas Neue", var(--font); color: rgba(25,140,70,.92); border: 7px solid rgba(25,140,70,.92); padding: 0 20px; border-radius: 8px; transition: all .18s cubic-bezier(.3,1.6,.5,1); }
.stamp.on { opacity: 1; transform: translate(-50%,-50%) rotate(-14deg) scale(1); }
.stamp.red { color: rgba(200,30,30,.92); border-color: rgba(200,30,30,.92); }
.stats-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; font-size: 15px; margin: 12px 0; }
.stats-grid b { font-family: var(--mono); text-align: right; }
.perk { border-radius: 14px; padding: 14px; background: linear-gradient(180deg, rgba(255,61,127,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,61,127,.35); }
.perk b { color: #ffb3cd; }
.item-card { border-radius: 14px; padding: 13px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.item-card .pr { font: 700 16px var(--mono); color: #ffd76a; }
.item-card p { color: var(--dim); font-size: 13px; margin: 0; line-height: 1.35; flex: 1; }
.item-card.sold { opacity: .4; }
.item-card .tag { font: 700 10px var(--mono); color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; }
.clock { font-family: var(--mono); }
.clock.late b { color: var(--red); }
.stam { display: flex; flex-direction: column; gap: 5px; min-width: 200px; }
.big-center { position: absolute; left: 50%; top: 22%; transform: translate(-50%,-50%); font: 400 clamp(54px, 8vw, 110px) "Bebas Neue", var(--font); letter-spacing: .05em; color: #fff; text-shadow: 0 0 22px rgba(255,61,127,.9), 0 6px 0 #000; pointer-events: none; animation: bigin .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes bigin { from { transform: translate(-50%,-50%) scale(2.2); opacity: 0; } }
.inv-row { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-row .chip { font-size: 13px; padding: 6px 10px; }
.binlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.binlist .btn { font-size: 12px; padding: 6px 9px; }
.test-panel { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); min-width: 360px; padding: 14px 18px; border-radius: 16px; background: rgba(16,12,10,.88); border: 1px solid var(--line); text-align: center; }
.test-panel .res { font: 400 44px "Bebas Neue", var(--font); letter-spacing: .05em; }
.res.perfect, .res.works { color: var(--green); } .res.unstable { color: var(--amber); } .res.fire, .res.dead { color: var(--red); }
.help-grid { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 14.5px; margin: 12px 0; max-width: 760px; line-height: 1.4; }
.scrap-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.scrap-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.scrap-row .muted { color: var(--dim); font-size: 13px; margin-top: 2px; }
/* balcão: painel de pedidos à direita, cliente na porta à esquerda */
.counter-on .sidebtns, .counter-on .side, .counter-on .toolbar, .counter-on .leftbtns { display: none; }
.counter-panel { position: absolute; right: 18px; top: 74px; bottom: 18px; width: min(430px, 34vw); display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(20,15,12,.9); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.counter-panel h2 { margin: 0; font: 400 26px "Bebas Neue", var(--font); letter-spacing: .03em; }
.counter-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 8px 6px 4px; }
.counter-list .order { flex: none; animation: cardIn .4s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes cardIn { from { transform: translateX(60px) rotate(5deg); opacity: 0; } }
.order.at-door { box-shadow: 0 0 0 3px var(--amber), 0 10px 24px rgba(0,0,0,.45); }
.order.sold { opacity: .45; }
.speech { position: absolute; max-width: 360px; padding: 12px 16px 14px; background: #fffaf0; color: #23367d; font: 400 27px/1.05 "Caveat", cursive; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.5); transform: translate(calc(-100% - 18px), -50%); pointer-events: none; transition: opacity .2s; }
.speech::after { content: ''; position: absolute; right: -11px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-left-color: #fffaf0; border-right: 0; }
.speech .who { display: block; font: 700 11px var(--mono); color: #7a6b55; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
/* escada de cobrança no menu (níveis 0–5 + sem fim) */
.ladder { grid-column: 1; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(16,12,10,.72); border: 1px solid var(--line); max-width: 560px; }
.ladder .lt { font: 700 12px var(--mono); letter-spacing: .5px; color: #b9a58a; margin-bottom: 8px; text-transform: uppercase; }
.ladder .lvs { display: flex; flex-wrap: wrap; gap: 6px; }
.ladder .lv { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); cursor: help; font: 600 12px var(--sans, system-ui); color: #cbbca6; }
.ladder .lv .n { font: 700 12px var(--mono); width: 18px; height: 18px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); }
.ladder .lv.done { color: #9fe0b0; border-color: rgba(61,220,132,.35); } .ladder .lv.done .n { background: rgba(61,220,132,.25); }
.ladder .lv.next { color: #ffd59a; border-color: rgba(255,179,92,.55); background: rgba(255,179,92,.1); } .ladder .lv.next .n { background: rgba(255,179,92,.3); }
.ladder .lv.lock { opacity: .55; } .ladder .lv.lock .n::after { content: '🔒'; font-size: 9px; margin-left: 1px; }


/* ---------- cartucho: jogo do Diego dentro de um aparelho (gameplay/cartucho.js) ---------- */
/* faixa de cartuchos do menu (menu.js cart()): um chip por jogo, cadeado até liberar na campanha */
.carts { grid-column: 1; padding: 10px 14px; border-radius: 14px; background: rgba(16,12,10,.72); border: 1px solid var(--line); max-width: 560px; }
.carts .lt { font: 700 12px var(--mono); letter-spacing: .5px; color: #b9a58a; margin-bottom: 8px; text-transform: uppercase; }
.cchips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.cchip { display: flex; flex-direction: column; gap: 1px; padding: 5px 7px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: #b9a58a; opacity: .6; cursor: help; min-width: 0; }
.cchip b { font: 400 13px "Bebas Neue", var(--font); letter-spacing: .015em; color: #e9dcc8; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cchip small { display: flex; align-items: center; gap: 4px; font: 600 10px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; }
.cchip small svg { width: 10px; height: 10px; flex: none; }
.cchip.on { opacity: 1; cursor: pointer; border-color: rgba(255,61,127,.5); background: linear-gradient(180deg, rgba(255,61,127,.16), rgba(16,12,10,.8)); transition: transform .15s, border-color .15s; }
.cchip.on small { color: #ff8fb6; }
.cchip.on:hover { transform: translateY(-2px); border-color: rgba(255,61,127,.85); }
.cart-note { display: flex; gap: 6px; align-items: center; margin: 6px 0 2px; font-size: 12px; color: #b9a58a; }
.cart-note svg { width: 15px; height: 15px; flex: none; }
.cart-note.on { color: #ff8fb6; }
.btn.cart-play { animation: cartPulse 1.6s ease-in-out infinite; }
.btn.cart-play[hidden] { display: none !important; }
@keyframes cartPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,61,127,0); } 50% { box-shadow: 0 0 0 7px rgba(255,61,127,.3); } }
.cart-modal .cart-tag { font: 700 12px var(--mono); letter-spacing: .22em; color: var(--pink); margin-bottom: 4px; }
.cart-modal h2 { font-family: "Bebas Neue", var(--font); font-size: 46px; letter-spacing: .04em; margin: 0 0 8px; }

/* a TV de tubo por cima da oficina, com o jogo num iframe (vidro 4:3; --gh e --b vêm do cartucho.js) */
.cart-ov { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(4,5,7,0); transition: background .35s; }
.cart-ov.on { background: rgba(4,5,7,.94); }
.cart-tv { --gh: 600px; --b: 33px; --ar: 1.3333; --lado: 0px; --qx: 2.4; position: relative; width: calc(var(--gh) * var(--ar) + var(--b) * 2 + var(--lado) * 2); padding: var(--b) calc(var(--b) + var(--lado)) 0; border-radius: calc(var(--b) * .9);
  background: linear-gradient(180deg, #3d3934, #2a2723 60%, #211e1b); box-shadow: 0 30px 90px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.45);
  transform: scale(.16); opacity: 0; transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .22s; }
.cart-ov.on .cart-tv { transform: none; opacity: 1; }
.cart-ov.out { background: rgba(4,5,7,0); }
.cart-ov.out .cart-tv { transform: scale(.92); opacity: 0; transition: transform .3s, opacity .3s; }
.cart-glass { position: relative; height: var(--gh); border-radius: calc(var(--b) * .6); overflow: hidden; background: #000; box-shadow: 0 0 0 3px #141210, 0 0 0 5px #4a453f; }
.cart-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.cart-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 70%, rgba(0,0,0,.3) 100%);
  box-shadow: inset 0 0 calc(var(--b) * .7) rgba(0,0,0,.55); }
.cart-load { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; background: #05060a; transition: opacity .45s; pointer-events: none; }
.cart-load b { font: 700 calc(var(--gh) * .075) var(--font); letter-spacing: .12em; color: #4aa3ff; text-shadow: 0 0 24px rgba(74,163,255,.5); }
.cart-load span { font: 600 calc(var(--gh) * .028) var(--mono); color: #8a96a3; letter-spacing: .24em; }
.cart-load.off { opacity: 0; }
.cart-chin { height: calc(var(--b) * var(--qx)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--b) * .45);
  font: 700 calc(var(--b) * .4) var(--mono); letter-spacing: .16em; color: #8d857a; text-transform: uppercase; }
.cart-led { width: calc(var(--b) * .28); height: calc(var(--b) * .28); border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }

/* molduras de cada aparelho (cartucho.js: CARTS[id].moldura.tipo); a TV de tubo (m-tv) é a padrão de cima */
.cart-tv:not(.m-tv) .cart-scan { background: none; box-shadow: inset 0 0 calc(var(--b) * .5) rgba(0,0,0,.35); }
.cart-tv.m-swapp { background: linear-gradient(180deg, #2b2c31, #1b1c20); border-radius: calc(var(--b) * 1.4); }
.cart-tv.m-swapp::before, .cart-tv.m-swapp::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--lado); }
.cart-tv.m-swapp::before { left: 0; border-radius: calc(var(--lado) * .55) 0 0 calc(var(--lado) * .55); background: radial-gradient(circle at 50% 30%, #1e1f24 0 17%, #3a3b42 18% 21%, transparent 22%), linear-gradient(180deg, #31bfe9, #1c8ebb); }
.cart-tv.m-swapp::after { right: 0; border-radius: 0 calc(var(--lado) * .55) calc(var(--lado) * .55) 0; background: radial-gradient(circle at 50% 62%, #1e1f24 0 17%, #3a3b42 18% 21%, transparent 22%), radial-gradient(circle at 50% 24%, #1e1f24 0 8%, transparent 9%), linear-gradient(180deg, #ff5d55, #d83a34); }
.cart-tv.m-swapp .cart-glass { box-shadow: 0 0 0 2px #0c0c0f; }
.cart-tv.m-celular { background: #0b0b0e; border-radius: calc(var(--b) * 2.4); box-shadow: 0 30px 90px rgba(0,0,0,.75), inset 0 0 0 2px #34343c; }
.cart-tv.m-celular::before { content: ""; position: absolute; top: calc(var(--b) * .25); left: 50%; width: calc(var(--b) * .5); height: calc(var(--b) * .5); transform: translateX(-50%); border-radius: 50%; background: #1d1e26; }
.cart-tv.m-celular .cart-glass { border-radius: calc(var(--b) * 1.5); box-shadow: none; }
.cart-tv.m-celular .cart-chin { justify-content: center; } .cart-tv.m-celular .cart-chin span { display: none; }
.cart-tv.m-celular .cart-led { width: calc(var(--gh) * .12); height: calc(var(--b) * .3); border-radius: 99px; background: #4a4a52; box-shadow: none; }
.cart-tv.m-gameboi { background: linear-gradient(180deg, #d3cfc6, #b8b4aa); border-radius: calc(var(--b) * .5) calc(var(--b) * .5) calc(var(--b) * 2.6) calc(var(--b) * .5); }
.cart-tv.m-gameboi .cart-glass { border-radius: calc(var(--b) * .2); box-shadow: 0 0 0 calc(var(--b) * .55) #565662, 0 0 0 calc(var(--b) * .6) #3a3a42; }
.cart-tv.m-gameboi .cart-chin { color: #2c2c8c; font: italic 700 calc(var(--b) * .6) var(--font); letter-spacing: .06em; padding-top: calc(var(--b) * .5); align-items: flex-start; }
.cart-tv.m-gameboi .cart-led { background: #e8332a; box-shadow: 0 0 8px #e8332a; margin-top: calc(var(--b) * .2); }
.cart-tv.m-tijolao { background: linear-gradient(180deg, #3b4149, #24282e); border-radius: calc(var(--b) * 1.1) calc(var(--b) * 1.1) calc(var(--b) * 1.5) calc(var(--b) * 1.5); }
.cart-tv.m-tijolao .cart-glass { border-radius: calc(var(--b) * .25); box-shadow: 0 0 0 calc(var(--b) * .3) #101214, 0 0 0 calc(var(--b) * .36) #5b636c; }
.cart-tv.m-tijolao .cart-chin { color: #aeb8c2; background: radial-gradient(circle, #59616b 0 30%, transparent 33%) 50% 70% / calc(var(--b) * 1.2) calc(var(--b) * .9) repeat-x; }
.cart-tv.m-tijolao .cart-led { background: #9bd27a; box-shadow: 0 0 8px #9bd27a; }

/* menu em tela baixa (720p, notebook): a escada e o cartucho empurravam o rodapé para fora da tela */
@media (max-height: 820px) {
  .menu { padding: 24px 40px 18px; gap: 9px; }
  .menu-logo .logo { font-size: clamp(54px, 7vw, 88px); }
  .menu-logo .tag { margin-top: 4px; font-size: 12px; }
  .menu-cards { gap: 8px; }
  .mcard { padding: 9px 14px; gap: 12px; }
  .mcard .mi { width: 36px; height: 36px; }
  .mcard b { font-size: 25px; }
  .mcard p { font-size: 12.5px; line-height: 1.32; margin-top: 2px; }
  .ladder { margin-top: 2px; padding: 8px 12px; }
  .ladder .lt { margin-bottom: 6px; font-size: 11px; }
  .ladder .lv { padding: 3px 7px; font-size: 11px; }
  .carts { padding: 7px 12px; }
  .carts .lt { margin-bottom: 5px; font-size: 11px; }
  .cchip { padding: 3px 6px; } .cchip b { font-size: 12.5px; }
}