:root{--background:#071d17;--surface:#09251e;--mint:#5ed1a1;--text:#f5f2e8;--muted:#a9bcb2;--gold:#c9a441;--stroke:rgba(245,242,232,.16);--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{background:var(--background);height:100%;scrollbar-color:#315f4b #071d17}body{margin:0;min-height:100%;color:var(--text);background:var(--background);font-family:var(--font);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #e9c66c;outline-offset:3px}button:active{transform:translateY(1px)}button img{pointer-events:none}[hidden]{display:none!important}.desktop-texture{display:none}.shell{position:relative;width:100%;max-width:430px;min-height:100vh;min-height:100dvh;margin-inline:auto;padding:22px 16px 20px;display:flex;flex-direction:column;background:#071d17;isolation:isolate;overflow:hidden}
.top-bar{height:68px;display:flex;align-items:center;gap:9px;flex:none;min-width:0}.profile{border:1px solid rgba(94,209,161,.24);background:rgba(4,34,27,.63);border-radius:22px;min-width:0;flex:1;height:64px;display:flex;align-items:center;gap:8px;padding:5px 7px;text-align:left;color:var(--text)}.avatar-halo{width:51px;height:51px;flex:none;border:1.4px solid rgba(197,231,215,.55);border-radius:50%;display:grid;place-items:center;position:relative;background:#193b2f;box-shadow:inset 0 0 0 3px rgba(255,255,255,.1)}.avatar{width:40px;height:40px;border-radius:50%;border:2px solid #fff3ec;display:grid;place-items:center;background:#9b4576;color:white;font-weight:700;font-size:18px}.online-dot{position:absolute;width:8px;height:8px;right:0;bottom:0;background:var(--mint);border:1px solid #061d16;border-radius:50%}.profile-info{min-width:0;display:flex;flex-direction:column;gap:5px;flex:1}.profile-name{min-width:0;display:flex;gap:6px;align-items:center;font-size:14px;font-weight:700;white-space:nowrap}.profile-name>span:last-child{overflow:hidden;text-overflow:ellipsis}.profile-level{font-size:11px;color:#abc0b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flag{width:18px;height:12px;display:flex;flex-direction:column;flex:none;overflow:hidden;border:1px solid rgba(255,255,255,.3);border-radius:1px}.flag span{flex:1;background:#2d99d0}.flag span:nth-child(2){background:#fff}.wallet{flex:none;height:62px;min-width:78px;padding:7px;display:flex;align-items:center;gap:6px;border:1px solid rgba(94,209,161,.22);background:rgba(4,34,27,.65);border-radius:23px;color:var(--text);font-weight:700;font-size:17px}.coin{display:grid;place-items:center;width:34px;height:34px;flex:none;border:2px solid #efc765;border-radius:50%;background:#c9a140;box-shadow:inset 0 0 0 2px #173728,inset 0 0 0 4px #eac16c}.coin-core{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;border:1px dotted #edc76b;background:#08291f;color:#edc76b;font:14px Georgia,serif}.settings-button{width:42px;height:56px;flex:none;border:0;background:transparent;display:grid;place-items:center}.settings-button img{width:26px;height:26px}
.home-body{display:flex;flex-direction:column;flex:1;min-height:0}.brand-zone{margin-top:clamp(18px,calc(18px + (100dvh - 568px)*.245),91px);display:flex;align-items:center;justify-content:center;height:142px;flex:none}.brand-logo{position:relative;width:300px;height:142px;flex:none}.mark{position:absolute;left:0;top:0;width:86px;height:97px;display:block;overflow:visible}
.mark-vector{display:block;width:86px;height:97px;overflow:visible}
.mark-back-green,.mark-back-gold,.mark-front-card{transform-box:view-box;transform-origin:center center}
.brand-word{position:absolute;left:79px;top:28px;width:205px;height:43px;display:block;white-space:nowrap}
.brand-word img{position:absolute;left:1.575px;top:6.7px;display:block;width:202px;height:28px;max-width:none}
.brand-ornament{position:absolute;left:13px;top:71px;width:274px;height:59px;display:block}.brand-suits{position:absolute;left:49px;top:93px;width:204px;display:flex;justify-content:space-between;font:16px Georgia,serif}.brand-suits b{font-weight:400;color:#38413b}.brand-suits b:nth-child(2),.brand-suits b:nth-child(3){color:#db2b33}.brand-tagline{position:absolute;top:117px;left:80px;font:500 11px/1.5 var(--font);letter-spacing:2.7px;white-space:nowrap;color:rgba(245,242,232,.82)}
.home-actions{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:25px}.play{position:relative;display:flex;align-items:center;width:100%;color:var(--text);text-align:left;background:rgba(9,47,36,.78);border:1.2px solid rgba(94,209,161,.26);border-radius:20px;height:60px;padding:0 16px;gap:17px}.play.primary{height:78px;border-radius:22px;background:var(--mint);border-color:rgba(245,242,232,.45);color:#04291f;box-shadow:0 5px 5px rgba(0,0,0,.28)}.play-icon{flex:none;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:rgba(76,198,150,.55);border:1px solid rgba(4,36,27,.08)}.play-icon img{width:26px;height:26px}.play-copy{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.play-copy strong{font-size:22px;line-height:1.1}.play-copy small{font-size:12px;color:#23594a}.play-arrow{width:40px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(53,190,141,.23)}.play-arrow img{width:24px;height:24px}.online{gap:12px}.online strong{font-size:16px;flex:1;white-space:nowrap}.online-icon img{width:24px;height:24px;display:block}.pill{color:var(--mint);border:1px solid rgba(94,209,161,.44);padding:7px 12px;border-radius:20px;font-size:10px}.continue{height:58px}.continue .play-icon{width:37px;height:37px;border-radius:12px;font-size:24px;color:var(--mint)}.continue .play-copy strong{color:var(--text);font-size:14px}.continue .play-copy small{color:var(--muted)}.continue .play-arrow{width:30px;height:34px}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:17px}.tile{background:rgba(9,47,36,.72);border:1px solid rgba(245,242,232,.14);height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:20px;color:var(--text);font-size:14px;font-weight:600}.tile-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;border:1px solid rgba(245,242,232,.18);background:rgba(9,47,36,.75)}.tile-icon img{width:25px;height:25px}.bottom-decoration{min-height:85px;margin-top:auto;position:relative;display:grid;place-items:center;flex:none;padding-top:20px}.suit-pattern{position:absolute;font-family:Georgia,serif;white-space:nowrap;font-size:16px;letter-spacing:12px;opacity:.12;color:#365247;user-select:none}.info-button{width:56px;height:56px;border-radius:50%;border:1.4px solid rgba(94,209,161,.28);background:rgba(4,34,27,.96);box-shadow:0 4px 5px rgba(0,0,0,.3);display:grid;place-items:center;position:relative;z-index:1}.info-button:before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid #366c53}.info-button img{width:24px;height:24px}.info-dot{position:absolute;right:0;bottom:-2px;width:19px;height:19px;border-radius:50%;background:var(--mint);color:#04221b;font-size:12px;line-height:19px;text-align:center;font-weight:800;border:2px solid #071d17}
.overlay{position:fixed;inset:0;background:rgba(1,13,9,.78);backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px;z-index:100}.sheet{width:min(100%,390px);position:relative;max-height:min(90dvh,680px);overflow:auto;padding:25px 22px 20px;background:linear-gradient(150deg,#1a342a,#11261e);border:1px solid #385747;border-radius:24px;box-shadow:0 18px 65px #0009}.sheet-close{position:absolute;right:15px;top:12px;color:#cce5d6;background:transparent;border:0;font-size:28px;width:35px;height:35px}.sheet-symbol{color:#e8c06b;font:32px Georgia,serif}h2{font-size:20px;margin:7px 0 10px}.sheet-description{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 16px}#sheetBody{font-size:13px}.sheet-done{background:var(--mint);color:#062d21;border:0;border-radius:14px;font-size:15px;font-weight:700;padding:13px;width:100%;margin-top:14px}.name-input{width:100%;height:44px;border:1px solid #496456;background:#0a241b;border-radius:12px;color:var(--text);padding:0 14px}.sheet-row{display:flex;align-items:center;justify-content:space-between;border:1px solid #365447;border-radius:12px;margin:8px 0;padding:12px;gap:12px}.sheet-row button{border-radius:10px;background:#294e3f;color:#f5f2e8;border:1px solid #48755d;padding:8px 10px}.sheet-help{font-size:11px;color:#abc0b4;line-height:1.5;margin-top:12px}
@media(max-width:359px){.shell{padding:16px 16px 10px}.top-bar{height:48px;gap:6px}.profile{height:46px;padding:3px 5px;border-radius:20px;gap:5px}.avatar-halo{width:40px;height:40px}.avatar{width:31px;height:31px;font-size:13px}.profile-name{font-size:12px;gap:4px}.profile-level{font-size:9px}.flag{width:15px;height:10px}.wallet{height:46px;min-width:71px;gap:4px;padding:5px;border-radius:20px;font-size:14px}.coin{width:30px;height:30px}.coin-core{width:20px;height:20px;font-size:12px}.settings-button{width:32px;height:46px}.settings-button img{width:23px;height:23px}.brand-zone{height:103px}.brand-logo{transform:scale(.78);transform-origin:50% 0}.home-actions{gap:7px;margin-top:9px}.play.primary{height:78px}.play.online{height:58px}.tiles{gap:8px}.tile{height:78px;border-radius:18px}.tile-icon{width:37px;height:37px}.tile-icon img{width:24px;height:24px}.bottom-decoration{min-height:66px;padding-top:10px}.info-button{width:52px;height:52px}.suit-pattern{letter-spacing:9px;font-size:12px}.online strong{font-size:14px}.pill{padding:6px 10px}.play{gap:10px;padding:0 12px}}
@media (min-width:360px) and (max-height:760px){.shell{padding-top:13px;padding-bottom:9px}.brand-zone{margin-top:18px;height:123px}.brand-logo{transform:scale(.86);transform-origin:50% 0}.home-actions{margin-top:10px;gap:9px}.play.primary{height:70px}.tile{height:78px}.bottom-decoration{min-height:65px;padding-top:5px}}
/* Desktop keeps the OFFICIAL Figma Home hierarchy: header, brand, buttons, footer. */
@media(min-width:760px){
  body{display:grid;place-items:center;min-height:100dvh;padding:24px;background:#071d17}
  .desktop-texture{display:block;position:fixed;inset:0;opacity:.48;pointer-events:none;background:radial-gradient(ellipse at 17% 22%,rgba(29,97,67,.4),transparent 45%),radial-gradient(ellipse at 80% 80%,rgba(57,95,54,.24),transparent 49%),linear-gradient(120deg,#071d17,#061710)}
  .shell{width:min(100%,480px);max-width:480px;min-height:min(873px,calc(100dvh - 48px));border:1px solid rgba(94,209,161,.16);border-radius:28px;box-shadow:0 30px 80px #0008;padding:22px 20px 18px;overflow:hidden}
  .top-bar{height:68px;max-width:100%}
  .profile{max-width:260px}
  .wallet{margin-left:auto}
  .home-body{display:flex;flex-direction:column;align-items:stretch;gap:0;flex:1;min-height:0}
  .brand-zone{margin:clamp(36px,9dvh,94px) 0 0;height:142px;align-self:center;justify-content:center}
  .brand-logo{transform:none;transform-origin:center center}
  .home-actions{width:min(100%,390px);margin:24px auto 0;gap:12px}
  .bottom-decoration{min-height:85px}
  .home-body:before{content:none}
}
@media(max-height:545px) and (min-width:760px){.shell{min-height:100vh;border-radius:0}.brand-logo{transform:scale(1)}.home-body{gap:20px}.bottom-decoration{min-height:36px}}
@media(prefers-reduced-motion:no-preference){.play,.tile,.profile,.wallet,.settings-button,.info-button{transition:filter .18s,background .18s,border-color .18s,box-shadow .18s}.play:hover,.tile:hover,.profile:hover,.wallet:hover,.settings-button:hover,.info-button:hover{filter:brightness(1.1)}}
/* Afinación por variantes oficiales de Home: 360/393/430 en Figma. */
@media (min-width:360px) and (max-width:379px) and (min-height:761px) and (max-width:759px){.brand-zone{margin-top:39px;height:122px}.brand-logo{transform:scale(.90);transform-origin:center top}.home-actions{margin-top:36px}}
@media (min-width:380px) and (max-width:759px){.brand-zone{margin-top:82px}}
@media (min-width:420px) and (max-width:759px) and (min-height:850px){.brand-zone{margin-top:102px}}

.coin{background:none!important;border:0!important;box-shadow:none!important}.coin img{width:34px;height:34px;display:block}@media(max-width:359px){.coin img{width:30px;height:30px}}

/* DESMOCHE · Home intro 03 / secuencia original adaptada al Home Figma.
   PALOS → LÍNEA LÍQUIDA → D → ESMOCHE → TAGLINE → TODO SUBE.
   Misma composición durante y después; nunca se sustituye por otra imagen. */
html.js body.intro-active { overflow:hidden; overscroll-behavior:none }
body.intro-active .brand-zone { position:relative; z-index:25; will-change:transform; backface-visibility:hidden }
body.intro-active .brand-logo { backface-visibility:hidden }
body.intro-active .top-bar,
body.intro-active .home-actions,
body.intro-active .bottom-decoration { transition:opacity .48s ease, transform .62s cubic-bezier(.2,.8,.2,1); }
body.intro-active:not(.intro-controls) .top-bar,
body.intro-active:not(.intro-controls) .home-actions,
body.intro-active:not(.intro-controls) .bottom-decoration { opacity:0; transform:translateY(16px); pointer-events:none; }
body.intro-active:not(.intro-play) .mark,
body.intro-active:not(.intro-play) .brand-word,
body.intro-active:not(.intro-play) .brand-tagline { opacity:0 }
body.intro-active:not(.intro-play) .brand-ornament,
body.intro-active:not(.intro-play) .brand-word { opacity:0; clip-path:inset(0 100% 0 0) }
body.intro-active:not(.intro-play) .brand-suits b { opacity:0; transform:translateY(var(--intro-fly-y)) translateX(var(--intro-fly-x)) scale(1.9); }
/* Movimientos de los cuatro palos hasta su sitio definitivo encima de la línea. */
.brand-suits b { display:inline-block; transform-origin:center center; }
.brand-suits b:nth-child(1) { --intro-fly-x:-48px; --intro-fly-y:-90px }
.brand-suits b:nth-child(2) { --intro-fly-x:-18px; --intro-fly-y:-118px }
.brand-suits b:nth-child(3) { --intro-fly-x:18px; --intro-fly-y:-118px }
.brand-suits b:nth-child(4) { --intro-fly-x:48px; --intro-fly-y:-90px }
body.intro-active.intro-play .brand-suits b:nth-child(1) { animation:introSuitLand .95s cubic-bezier(.2,.82,.2,1) .06s both }
body.intro-active.intro-play .brand-suits b:nth-child(2) { animation:introSuitLand .95s cubic-bezier(.2,.82,.2,1) .12s both }
body.intro-active.intro-play .brand-suits b:nth-child(3) { animation:introSuitLand .95s cubic-bezier(.2,.82,.2,1) .18s both }
body.intro-active.intro-play .brand-suits b:nth-child(4) { animation:introSuitLand .95s cubic-bezier(.2,.82,.2,1) .24s both }
/* Los palos oscuros de la marca final se iluminan solo durante la entrada. */
body.intro-active .brand-suits b:nth-child(1),
body.intro-active .brand-suits b:nth-child(4) { color:#d1b66e; text-shadow:0 0 10px #c9a95b66; }
body.intro-active .brand-suits b:nth-child(2),
body.intro-active .brand-suits b:nth-child(3) { color:#ef5358; text-shadow:0 0 9px #db2b3350; }
@keyframes introSuitLand {
  0% { opacity:0; transform:translate(var(--intro-fly-x),var(--intro-fly-y)) scale(1.9) }
  26% { opacity:1 }
  72% { opacity:1; transform:translate(0,3px) scale(1.03) }
  100% { opacity:1; transform:translate(0,0) scale(1) }
}
/* SVG original del ornamento de Figma, revelado horizontalmente sin modificarlo. */
body.intro-active.intro-play .brand-ornament { animation:introGoldLine .90s cubic-bezier(.2,.7,.2,1) 1.08s both }
@keyframes introGoldLine { 0% { opacity:0; clip-path:inset(0 100% 0 0) } 15% { opacity:1 } 100% { opacity:1; clip-path:inset(0 0 0 0) } }
body.intro-active.intro-play .mark { animation:introCardD .88s cubic-bezier(.18,.85,.25,1) 1.98s both }
/* Capas vectoriales del MISMO componente de Figma 341:18686.
   El giro dorado y la silueta verde ya vienen de Figma: no se recalculan. */
body.intro-active.intro-play .mark-back-green { animation:introCardLeft .78s cubic-bezier(.16,.85,.22,1) 1.98s both }
body.intro-active.intro-play .mark-back-gold { animation:introCardGold .78s cubic-bezier(.16,.85,.22,1) 2.08s both }
body.intro-active.intro-play .mark-front-card { animation:introCardFront .72s cubic-bezier(.16,.85,.22,1) 2.18s both }
@keyframes introCardLeft{0%{opacity:0;transform:translate(8px,12px) scale(.85)}100%{opacity:1;transform:none}}
@keyframes introCardGold{0%{opacity:0;transform:translate(10px,12px) scale(.85)}100%{opacity:1;transform:none}}
@keyframes introCardFront{0%{opacity:0;transform:translateY(13px) scale(.90)}100%{opacity:1;transform:none}}
@keyframes introCardD{0%{opacity:0;transform:translateY(42px) scale(.72)}65%{opacity:1;transform:translateY(-5px) scale(1.03)}100%{opacity:1;transform:none}}
/* Texto original como SVG de Figma: sin fuente sustituta ni letras desfasadas. */
body.intro-active.intro-play .brand-word{animation:introWordReveal .9s ease 2.36s both}
@keyframes introWordReveal{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(6px)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
body.intro-active.intro-play .brand-tagline { animation:introTagline .58s ease 3.02s both }
@keyframes introTagline { 0% { opacity:0; transform:translateY(10px) } 100% { opacity:1; transform:none } }
/* Handoff: aspecto final fijado ANTES de retirar estados/animaciones. */
body.intro-active.intro-locked .mark,
body.intro-active.intro-locked .brand-word,
body.intro-active.intro-locked .brand-tagline,
body.intro-active.intro-locked .brand-ornament,
body.intro-active.intro-locked .brand-suits b { animation:none!important; opacity:1!important; transform:none!important; }
body.intro-active.intro-locked .mark-back-green,
body.intro-active.intro-locked .mark-back-gold,
body.intro-active.intro-locked .mark-front-card { animation:none!important;opacity:1!important;transform:none!important }
body.intro-active.intro-locked .brand-word{clip-path:none!important}
body.intro-active.intro-locked .brand-ornament { clip-path:inset(0 0 0 0)!important }
/* Home 03.3: solo flota el emblema D COMPLETO (las tres cartas como un único SVG).
   No animar sus grupos internos: conservan las coordenadas originales de Figma. */
body.intro-complete .mark {
  animation:floatDesmocheMark 3.2s ease-in-out infinite;
  will-change:transform;
}
@keyframes floatDesmocheMark {
  0%,100% { transform:translate3d(0,0,0) }
  50% { transform:translate3d(0,-3px,0) }
}
/* Menos movimiento: aparece el Home completo, sin ocultar botones. */
@media(prefers-reduced-motion:reduce) {
  body.intro-active .brand-zone, body.intro-complete .mark { animation:none!important; transition:none!important; }
  body.intro-active .top-bar, body.intro-active .home-actions, body.intro-active .bottom-decoration { opacity:1!important; transform:none!important; pointer-events:auto!important }
  body.intro-active .mark,body.intro-active .brand-word,body.intro-active .brand-tagline,body.intro-active .brand-ornament,body.intro-active .brand-suits b { animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important }
}

/* Home 03.4 — lluvia discreta de palos del mismo juego de cartas.
   Capa visual totalmente pasiva, detrás de los controles. */
.shell > .suit-rain {
  position:absolute; inset:0; z-index:0;
  overflow:hidden; contain:paint; pointer-events:none;
  user-select:none; -webkit-user-select:none;
}
.shell > .top-bar, .shell > .home-body, .shell > .bottom-decoration {
  position:relative; z-index:1;
}
.suit-rain .falling-suit {
  position:absolute; display:block;
  font-family:Georgia,"Times New Roman",serif;
  line-height:1; font-weight:400;
  opacity:0; pointer-events:none;
  text-shadow:0 0 9px rgba(172,188,142,.09);
  will-change:transform,opacity;
  animation:fallingDesmocheSuit var(--duration,8s) linear both;
}
.suit-rain .falling-suit.burst {
  text-shadow:0 0 11px rgba(201,169,91,.22);
}
@keyframes fallingDesmocheSuit {
  0% { opacity:0; transform:translate3d(0,-15px,0) rotate(var(--initial-rotation,0deg)) scale(.78) }
  12% { opacity:var(--suit-opacity,.16) }
  80% { opacity:var(--suit-opacity,.16) }
  100% { opacity:0; transform:translate3d(var(--drift,0px),var(--fall,900px),0) rotate(var(--final-rotation,75deg)) scale(1.03) }
}
@media(prefers-reduced-motion:reduce){.shell > .suit-rain{display:none!important}}

/* DESMOCHE Home 03.5 — Ajustes basado en las variantes oficiales Figma.
   393×873: 355:22110; 320×568: 355:21982; iconos y switches SVG originales. */
.settings-overlay{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-end;justify-content:center;isolation:isolate}
.settings-backdrop{position:absolute;inset:0;background:rgba(0,17,12,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.settings-panel{position:relative;z-index:1;flex:0 0 auto;width:min(100%,480px);height:590px;max-height:100dvh;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 18px;border:1px solid rgba(94,209,161,.20);border-bottom:0;border-radius:24px 24px 0 0;background:rgba(5,54,40,.99);box-shadow:0 -14px 50px rgba(0,0,0,.24);color:#f5f2e8}
.settings-panel:focus{outline:none}
.settings-header{position:relative;flex:none;width:100%;height:76px}
.settings-grab{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:56px;height:5px;border-radius:3px;background:rgba(170,192,180,.42)}
.settings-title{position:absolute;left:22px;top:34px;margin:0;font:700 22px/30px var(--font);letter-spacing:0}
.settings-close{position:absolute;right:16px;top:26px;width:40px;height:40px;border-radius:14px;border:1px solid rgba(245,242,232,.16);background:rgba(10,43,34,.68);display:grid;place-items:center;padding:0;color:#f5f2e8}
.settings-close img{display:block;width:18px;height:18px}
.settings-rule{height:1px;flex:none;background:#335445;margin:0 20px}
.settings-rows{width:calc(100% - 40px);align-self:center;flex:none;display:flex;flex-direction:column;gap:6px}
.settings-row{position:relative;width:100%;flex:none;min-width:0;color:#f5f2e8}
.settings-account-row{height:82px;border:1px solid rgba(94,209,161,.16);border-radius:18px;background:rgba(8,55,42,.56)}
.settings-account-row .setting-icon{top:13px;width:48px;height:48px;border-color:rgba(245,242,232,.12);color:#c6a35a;font:700 17px/1 Georgia,"Times New Roman",serif}
.settings-account-row .setting-title{top:12px;right:112px;font-size:15px}
.settings-account-row .setting-subtitle{top:39px;right:112px;font-size:11px}
.settings-account-action{position:absolute;right:12px;top:23px;width:94px;height:36px;border-radius:12px;border:1px solid rgba(198,163,90,.55);background:#0d4a38;color:#f5f2e8;font:700 10px/1 var(--font);padding:0}
.settings-account-action.is-signout{border-color:rgba(217,139,127,.55);background:#102f27;color:#f2c0b8}
.settings-account-action:disabled{opacity:.55;cursor:default}
.settings-language-row{height:76px;border:1.1px solid rgba(94,209,161,.12);border-radius:22px;background:rgba(8,55,42,.52)}
.setting-icon{position:absolute;left:8px;top:15px;width:48px;height:48px;border:1px solid rgba(245,242,232,.10);border-radius:14px;background:rgba(8,63,47,.5);display:grid;place-items:center}
.setting-language-icon{left:12.9px;top:12.9px;background:rgba(8,63,47,.62);border-color:rgba(245,242,232,.12)}
.setting-icon img{display:block;width:24px;height:24px;max-width:none}
.setting-title{position:absolute;left:71px;top:13px;right:77px;font:600 16px/20px var(--font);color:#f5f2e8}
.setting-subtitle{position:absolute;left:71px;top:40px;right:77px;font:400 11px/15px var(--font);color:#aac0b4}
.settings-language-row .setting-title{left:75.9px;top:15.9px;right:129.9px;font-size:17px}
.settings-language-row .setting-subtitle{left:75.9px;top:41.9px;right:124.9px;font-size:11.5px}
.language-selector{position:absolute;right:12.9px;top:13.9px;width:104px;height:46px;padding:4px;border-radius:16px;background:rgba(4,41,31,.88);display:grid;grid-template-columns:1fr 1fr;gap:0}
.language-option{border:0;border-radius:12px;background:transparent;color:#aac0b4;font:600 14px/1 var(--font);padding:0}
.language-option.is-selected{background:rgba(94,209,161,.18);color:#f5f2e8}
.settings-toggle-row{height:78px}
.setting-switch{position:absolute;right:4px;top:15px;width:68px;height:48px;display:grid;place-items:center;border:0;background:transparent;padding:0;border-radius:16px}
.setting-switch img{display:block;width:52px;height:31px;max-width:none;pointer-events:none}
.setting-switch:focus-visible,.settings-close:focus-visible,.language-option:focus-visible,.settings-account-action:focus-visible{outline:2px solid #f5cc6b;outline-offset:2px}
.settings-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:340px){
 .settings-panel{height:560px;padding-bottom:18px}
 .settings-account-row{height:88px}
 .settings-account-row .setting-icon{left:8px;top:20px;width:44px;height:44px}
 .settings-account-row .setting-title{left:64px;top:14px;right:90px;font-size:14px}
 .settings-account-row .setting-subtitle{left:64px;top:40px;right:90px;font-size:10px}
 .settings-account-action{right:10px;top:27px;width:76px;height:34px;font-size:9px}
 .settings-language-row{height:116px}
 .settings-language-row .setting-title{left:63.9px;top:11.9px;right:13.9px;font-size:17px}
 .settings-language-row .setting-subtitle{left:63.9px;top:38.9px;right:13.9px;font-size:11.5px}
 .language-selector{top:67.9px}
 .settings-toggle-row{height:96px}
 .settings-toggle-row .setting-title{left:64px;right:66px;top:12px;font-size:15px}
 .settings-toggle-row .setting-subtitle{left:64px;right:70px;top:44px;line-height:15px}
 .settings-toggle-row .setting-icon{left:8px;top:16px}
 .settings-toggle-row .setting-switch{top:20px;right:3px}
}
@media(max-height:540px){.settings-panel{max-height:100dvh}}
/* With Fit disabled, allow the Home to use its natural height and scroll on short screens. */
@media(max-width:759px) and (max-height:760px){.fit-screen-off .shell{min-height:max(100dvh,740px);overflow:visible}}
@media(prefers-reduced-motion:no-preference){.settings-panel{animation:settingsUp .24s cubic-bezier(.18,.82,.2,1) both}.settings-backdrop{animation:settingsDim .24s ease both}}
@keyframes settingsUp{from{transform:translateY(18px);opacity:.7}to{transform:translateY(0);opacity:1}}
@keyframes settingsDim{from{opacity:0}to{opacity:1}}
/* Escritorio: la hoja termina exactamente en el borde inferior del Home centrado,
   no fuera de su marco. En móvil sigue anclada al borde de la pantalla. */
@media(min-width:760px){
 .settings-overlay{padding-bottom:max(24px,calc((100dvh - 873px)/2))}
 .settings-panel{border-bottom:1px solid rgba(94,209,161,.20);border-radius:24px;max-height:calc(100dvh - 48px)}
}

/* Pantallas DESMOCHE: fuentes visuales Figma 346:46768, 338:18546, 347:46868, 352:21316, 348:47109. */
.route-page{position:absolute;inset:0;z-index:5;overflow-y:auto;overscroll-behavior:contain;background:#071d17;color:#f5f2e8;scrollbar-width:thin;scrollbar-color:#315f49 #071d17}
.route-page:focus{outline:none}.route-page .route-inner{width:100%;max-width:393px;min-height:100%;padding:20px 16px 30px;margin-inline:auto}.route-page .route-inner.route-profile{padding-inline:20px}
.route-head{display:flex;align-items:center;gap:12px;min-height:60px;margin-bottom:16px}.route-back{border:1px solid rgba(255,255,255,.1);width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.04);flex:none;color:#f5f2e8}.route-back img{width:22px;height:22px}.route-head h1,.route-heading h1{font:700 20px/1.25 var(--font);margin:0;color:#f5f2e8}.route-head p,.route-heading p{margin:5px 0 0;font-size:11px;color:#a3b8ae}.route-head .route-heading{min-width:0;flex:1}
.r-panel{background:rgba(7,50,38,.86);border:1px solid rgba(94,209,161,.17);border-radius:22px;padding:16px;margin-bottom:14px}.r-label{font-size:10px;font-weight:600;color:#8edcba;letter-spacing:.04em}.r-muted{color:#a3b8ae;font-size:11px;line-height:1.45}.r-heading{font-size:20px;font-weight:700;margin:7px 0 3px}.r-primary{min-height:58px;border:1px solid #78ddb5;border-radius:15px;background:#5ed1a1;color:#052018;font-size:14px;font-weight:700;letter-spacing:.08em;width:100%;box-shadow:0 5px 5px #0004}.r-primary:disabled{opacity:.65;cursor:not-allowed}.r-mini-button{border:1px solid #365a4d;background:#1b352d;border-radius:13px;color:#f0f3e9;padding:12px 15px;font-weight:700;font-size:12px}.r-section-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}.r-note{color:#a3b8ae;font-size:10px;text-align:center;line-height:1.5}.r-status{padding:13px;border:1px solid rgba(94,209,161,.22);border-radius:14px;background:#103529;font-size:11px;color:#c4d8ce;line-height:1.5}.r-status strong{color:#98ecc0}.r-status.warn{border-color:#735e36;background:#312c1d}.r-status.warn strong{color:#f2d08f}
/* OFFLINE. 393: 329px card in a 353px outer panel, 3 selector rows of 64px. */
.offline-panel{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;border-radius:20px;background:rgba(7,50,38,.98)}.offline-head{position:relative;height:124px;display:flex;align-items:flex-start;gap:12px}.offline-head .route-heading{padding-top:9px;flex:1;min-width:0}.offline-head .route-heading h1{font-size:21px}.offline-id{width:99px;flex:none;text-align:center;padding-top:0;color:#f5f2e8}.offline-id img{display:block;margin:0 auto;width:58px;height:58px;object-fit:contain}.offline-id .r-label{display:block;margin-top:3px;font-size:9px}.offline-id strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;margin-top:3px}.offline-id .r-muted{display:block;font-size:10px;margin-top:3px}.offline-step{height:64px;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:stretch;gap:8px;border-bottom:1px solid rgba(245,242,232,.10)}.offline-step>button{width:48px;height:64px;border:1px solid #347359;border-radius:18px;background:#164638;color:#89ecc3;font-size:30px;font-weight:700;line-height:1}.offline-step div{text-align:center;align-self:center;min-width:0}.offline-step span{font-size:9px;color:#a3b8ae}.offline-step strong{display:block;font-size:15px;margin:4px 0 3px}.offline-step small{font-size:9px;color:#a3b8ae}.offline-rules{border:1px solid #27624d;border-radius:18px;background:#0d342a}.offline-rules summary{min-height:62px;list-style:none;display:flex;align-items:center;gap:8px;padding:0 13px;cursor:pointer}.offline-rules summary::-webkit-details-marker{display:none}.offline-rules summary strong{font-size:13px;flex:1}.offline-rules summary small{color:#a3b8ae;font-size:10px}.offline-rules summary b{font-size:14px;color:#8edcba}.offline-options{padding:3px 13px 12px;display:grid;gap:7px}.offline-option{display:flex;align-items:center;gap:9px;color:#f5f2e8;font-size:12px}.offline-option input{accent-color:#5ed1a1;width:18px;height:18px}.offline-summary{min-height:74px;padding:10px 13px;background:rgba(4,28,22,.34);border:1px solid rgba(245,242,232,.07);border-radius:18px}.offline-summary small{display:block;color:#a3b8ae;font-size:9px;margin-bottom:6px}.offline-summary strong{font-size:12px}.offline-summary .summary-badge{float:right;font-size:9px;border:1px solid rgba(94,209,161,.2);border-radius:16px;padding:6px 9px;margin-top:-3px}.offline-guide{min-height:94px;border:1px solid rgba(94,209,161,.08);border-radius:18px;background:rgba(10,61,46,.28);padding:12px 13px;color:#a3b8ae;font-size:10px;line-height:1.45}.offline-guide strong{color:#5ed1a1;display:block;font-size:10px;margin-bottom:7px}.offline-guide p{margin:0}
/* ONLINE */
.online-top{min-height:96px;display:flex;align-items:flex-start;gap:8px}.online-top .route-heading{flex:1}.online-caption{font-size:10px;font-weight:700;color:#8edcba;margin-top:13px}.server-chip{margin-left:auto;border:1px solid #64785f;border-radius:20px;padding:9px 10px;font-size:9px;white-space:nowrap;color:#edd297;background:#2b3021}.online-identity{display:flex;align-items:center;gap:12px;background:#10352a;border:1px solid #315c49;border-radius:18px;padding:12px;height:72px;margin:16px 0 18px}.online-identity .mini-avatar{width:44px;height:44px;border-radius:12px;background:#294d3e;display:grid;place-items:center;font-size:20px;flex:none}.online-identity .r-label{font-size:10px}.online-identity strong{display:block;margin-top:6px;font-size:14px}.online-actions{display:grid;gap:12px}.online-action{width:100%;min-height:88px;border:1px solid #367e5b;background:#103a2d;border-radius:18px;display:flex;align-items:center;gap:11px;padding:12px 14px;color:#f6f4ed;text-align:left}.online-action .action-icon{width:46px;height:46px;flex:none;border:1px solid #42644f;background:#1c4335;border-radius:14px;display:grid;place-items:center}.online-action .action-icon img{width:24px;height:24px}.online-action .action-text{flex:1;min-width:0}.online-action strong{font-size:15px;display:block}.online-action small{font-size:11px;color:#aec6b8;display:block;margin-top:5px}.online-action .next-icon{width:20px}.online-foot{margin-top:max(60px,18dvh);display:grid;gap:12px}.online-foot .r-note{font-size:9px}
/* TUTORIAL */
.tutorial-stage{min-height:100%;display:flex;flex-direction:column;justify-content:center}.tutorial-panel{background:#1a352c;border:1px solid #35594c;border-radius:24px;padding:16px}.tutorial-panel h1{font-size:16px;margin:1px 0 5px}.tutorial-panel>p{margin:0 0 20px;color:#b3c7bd;font-size:11px}.lesson-list{display:grid;gap:10px}.lesson{min-height:64px;width:100%;display:flex;align-items:center;gap:10px;background:#1c382f;border:1px solid #35594c;border-radius:16px;padding:9px;text-align:left;color:#fafaf2}.lesson-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#65d4a8;color:#0b2a20;font-size:14px;font-weight:700;flex:none}.lesson-copy{flex:1;min-width:0}.lesson-copy strong{font-size:13px;display:block}.lesson-copy small{font-size:9px;color:#b3c7bd;display:block;margin-top:4px}.lesson-arr{color:#95b4a6;font-size:22px}.tutorial-back{margin-top:24px;width:100%;min-height:44px}.lesson-body{font-size:13px;color:#dceae1;line-height:1.6;margin:15px 0}.lesson-body p{margin:0 0 10px}.lesson-example{display:flex;justify-content:center;gap:7px;margin:18px auto}.example-card{width:43px;height:59px;background:#fbf9f0;border-radius:8px;color:#bc2537;display:grid;place-items:center;font:700 23px Georgia,serif;border:1px solid #ccbfae}
/* PROFILE */
.profile-ident{min-height:214px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center;padding:15px 13px;border-radius:24px}.profile-image{width:115px;height:115px;position:relative}.profile-image img{width:115px;height:115px;display:block}.profile-edit{position:absolute;bottom:-4px;right:-3px;background:#0a3428;border:1px solid #52816a;border-radius:50%;width:34px;height:34px;color:#f5f2e8;font-size:16px}.profile-details{min-width:0}.profile-details h2{margin:0 0 7px;font-size:19px;overflow-wrap:anywhere}.profile-pills{display:flex;flex-wrap:wrap;gap:5px}.profile-pills span{border:1px solid #315e49;background:#0c3427;border-radius:14px;padding:5px 8px;font-size:9px}.profile-level-line{display:flex;justify-content:space-between;margin:14px 0 6px;font-size:11px}.profile-xp{height:8px;border-radius:6px;background:#174737;overflow:hidden}.profile-xp span{display:block;height:100%;background:#73ddb3;width:0}.profile-currency{margin-top:14px;margin-left:auto;display:flex;align-items:center;gap:8px;width:max-content;border:1px solid #2b5a43;border-radius:15px;padding:5px 8px;font-size:11px}.profile-currency img{height:27px;width:27px}.profile-currency strong{font-size:16px}.stats-panel{padding:16px 17px 28px}.stats-panel h2{font-size:21px;font-weight:500;margin:5px 0 3px}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:17px}.stat{background:rgba(10,61,46,.38);border:1px solid rgba(245,242,232,.09);border-radius:16px;min-height:94px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:6px 3px}.stat .stat-icon{color:#73ddb3;font-size:20px}.stat strong{font-size:18px}.stat span:last-child{font-size:9px;color:#a3b8ae}.profile-achievements{display:flex;gap:8px;align-items:center;justify-content:space-around;margin-top:16px}.achievement{height:70px;flex:1;max-width:95px;border:1px solid #416650;border-radius:14px;background:#102c23;text-align:center;color:#6c8978;display:grid;place-items:center;font-size:10px;padding:6px}.profile-edit-panel{margin:12px 0 0;display:flex;flex-direction:column;gap:10px}.profile-edit-panel label{font-size:12px;color:#a3b8ae}.profile-edit-panel input{height:45px;border-radius:12px;border:1px solid #466e59;background:#09261d;color:#f5f2e8;padding:0 12px}.profile-edit-panel .r-primary{min-height:46px}
/* MORE and HOW TO */
.more-row{min-height:70px;display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#10352a;border:1px solid #315c49;border-radius:16px;color:#f5f2e8;padding:11px 14px;margin:10px 0}.more-row>span:first-child{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#1b4334;color:#6ce0ae;font-size:21px;flex:none}.more-row .more-copy{min-width:0;flex:1}.more-row strong{font-size:13px;display:block}.more-row small{display:block;color:#a3b8ae;font-size:10px;margin-top:4px}.more-row b{color:#8cc7aa}.how-panel{padding:16px}.how-item{margin:9px 0;border:1px solid #355c48;border-radius:17px;background:#102f25;overflow:hidden}.how-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;font-size:13px;font-weight:700}.how-item summary::-webkit-details-marker{display:none}.how-item summary span:first-child{width:36px;height:36px;display:grid;place-items:center;background:#1b4437;border:1px solid #45634c;border-radius:12px;color:#f5f2e8}.how-item summary b{margin-left:auto;color:#96c2aa}.how-item[open] summary b{transform:rotate(180deg)}.how-content{padding:8px 15px 15px 61px;color:#d4e8dd;font-size:11px;line-height:1.5}.how-content p{margin:0 0 8px;padding:9px 10px;background:#0b271f;border:1px solid #2d5340;border-radius:12px}
.route-toast{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;border-radius:16px;padding:12px 15px;background:#30402f;border:1px solid #7f7847;box-shadow:0 8px 23px #0007;font-size:12px;color:#f4efd6;line-height:1.45}.route-toast[hidden]{display:none!important}
@media(max-width:340px){.route-page .route-inner{padding:12px 16px 24px}.route-page .route-inner.route-profile{padding:13px 16px}.offline-panel{padding:12px}.offline-head{height:114px}.offline-head .route-heading h1{font-size:17px}.offline-id{width:83px}.offline-id .r-muted{font-size:9px}.offline-id img{width:53px;height:53px}.offline-step{grid-template-columns:45px minmax(0,1fr) 45px}.offline-step>button{width:45px}.profile-ident{grid-template-columns:91px minmax(0,1fr)}.profile-image,.profile-image img{width:92px;height:92px}.profile-details h2{font-size:16px}.stats-grid{gap:7px}.stat{min-height:89px}.route-page .online-action{padding:10px}.online-action strong{font-size:13px}}
@media(min-width:760px){.route-page{border-radius:27px}.route-page .route-inner{padding-top:22px}.online-foot{margin-top:110px}}
@media(prefers-reduced-motion:no-preference){.route-page{animation:routeEnter .18s ease both}.more-row:hover,.online-action:hover,.lesson:hover,.r-mini-button:hover{filter:brightness(1.1)}}@keyframes routeEnter{from{opacity:.8;transform:translateY(5px)}to{opacity:1;transform:none}}
/* Correcciones visuales contra los frames oficiales 393 y 320 */
.offline-head{gap:10px}.offline-head .route-heading h1{font-size:20px;letter-spacing:-.35px;white-space:nowrap}.offline-id{width:89px}
.route-page .route-inner:has(.online-top){display:flex;flex-direction:column;min-height:100%}.online-top{min-height:44px;margin-bottom:8px;align-items:center}.online-top .online-caption{margin-top:0}.online-foot{margin-top:auto;padding-top:30px}
.route-toast{z-index:30;pointer-events:none}
@media(max-width:340px){.offline-head .route-heading h1{font-size:17px;letter-spacing:-.6px}.offline-id{width:78px}.offline-head{gap:8px}}

/* 03.7 — Todas las rutas dentro del mismo marco Home Figma.
   Base visual: Figma 346:46768 (393 × 873); ancho interno de panel: 361 px.
   No escalar ni estirar componentes de Figma en escritorio. */
@media(min-width:760px){.route-page{border-radius:inherit}.route-page .route-inner{max-width:393px;padding-top:20px}}

/* Sin textos ni márgenes agregados que no están en el componente Offline de Figma. */
.offline-panel>.r-note{margin:0}.offline-panel>.r-primary{min-height:61px}

/* DESMOCHE 03.8 — design system for personalizar and reusable equipped portrait.
   Figma originals: avatar Fuego 365:21020, frame Clásico 365:21272,
   page 366:23123 and controls 136:100. */
.cosmetic-avatar{position:relative;display:block;width:100%;height:100%;flex:none;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
.cosmetic-avatar .avatar-art-slot{position:absolute;left:28%;top:25%;width:44%;height:44%;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#06261c}
.cosmetic-avatar .avatar-art-img{display:block!important;width:100%!important;height:100%!important;object-fit:contain;margin:0!important}
.cosmetic-avatar .avatar-frame-img{position:absolute;inset:0;display:block!important;width:100%!important;height:100%!important;object-fit:contain;margin:0!important;pointer-events:none}
.avatar-halo.cosmetic-avatar{height:54px;width:54px;border:0;box-shadow:none;background:transparent}
.avatar-halo.cosmetic-avatar .online-dot{right:0;bottom:3px;z-index:2}
.offline-id .cosmetic-avatar{height:58px;width:58px;margin:0 auto}
.mini-avatar>.cosmetic-avatar{width:44px;height:44px}
.profile-image>.cosmetic-avatar{width:115px;height:115px}
.profile-name-edit{display:block;background:transparent;border:0;color:#88d7b2;font-size:9px;text-align:left;padding:1px 0 6px;text-decoration:underline;text-underline-offset:2px}
.profile-image .profile-edit{z-index:2;right:1px;bottom:0}
/* Figma: rules are four 164×64 tactile cards, NOT checkboxes. */
.offline-rules{overflow:hidden}
.offline-rules summary{min-height:62px;gap:8px;justify-content:space-between}
.offline-rules .rules-heading{min-width:0;display:flex;flex-direction:column;gap:6px}
.offline-rules .rules-heading strong{font-size:13px;line-height:1.15}
.offline-rules .rules-heading>span{font-size:9px;color:#a3b8ae;line-height:1.15}
.offline-rules .rules-count{flex:none;display:flex;align-items:center;gap:8px;border:1px solid rgba(94,209,161,.14);border-radius:17px;padding:6px 8px;background:rgba(4,28,22,.42)}
.offline-rules .rules-count small{font-size:9px;white-space:nowrap}
.offline-rules .rules-count b{font-size:15px;line-height:1;color:#89d7ad;transition:transform .2s}
.offline-rules[open] .rules-count b{transform:rotate(180deg)}
.offline-options{padding:8px 9px 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;border-top:1px solid rgba(94,209,161,.11)}
.rule-choice{height:64px;min-width:0;display:flex;align-items:center;gap:6px;padding:7px;border-radius:15px;border:1px solid rgba(94,209,161,.14);background:rgba(7,50,38,.68);color:#f5f2e8;text-align:left;position:relative}
.rule-choice .rule-icon{width:33px;height:36px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(4,28,22,.55);border:1px solid rgba(94,209,161,.14)}
.rule-icon img{width:24px;height:24px;object-fit:contain}
.rule-copy{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.rule-copy strong{font-size:11px;line-height:1.1}
.rule-copy small{color:#a3b8ae;font-size:8px;line-height:1.25}
.rule-check{width:13px;flex:none;color:#9ce3b6;font-size:13px;font-weight:700}
.rule-choice.selected{border-color:#64d0a2;background:rgba(34,115,82,.55);box-shadow:inset 0 0 0 1px rgba(130,228,180,.2)}
.rule-choice:focus-visible{outline:2px solid #edd28b;outline-offset:2px}
/* Personalizar: independently scrolling screen matching Figma 366:23123/52473/55445/58037. */
.route-page .route-inner.route-personal{padding:20px 20px 30px}
.route-personal .route-head{margin-bottom:16px}
.route-personal .route-heading h1{font-size:19px;white-space:nowrap}
.cos-wallet{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:17px;font-weight:700}
.cos-wallet img{width:32px;height:32px}
.cos-equipped{height:148px;border-radius:22px;margin-bottom:17px;padding:13px 16px}
.cos-equipped .r-label{display:block;margin-bottom:4px}
.cos-equipped-content{display:flex;align-items:center;gap:8px}
.portrait-equipped{width:120px;height:110px}
.cos-equipped-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.cos-equipped-text>strong{font-size:17px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.cos-equipped-text>small{font-size:10px;color:#a3b8ae}
.cos-equipped-text>span{font-size:11px;color:#7cddb6;margin-top:6px}
.cos-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 20px}
.cos-tabs button{height:37px;border:1px solid rgba(94,209,161,.14);border-radius:15px;background:rgba(13,45,35,.8);color:#b8c8be;font-size:11px}
.cos-tabs button.is-active{color:#9cdec2;border-color:#398262;background:rgba(26,98,73,.5)}
.cos-section-head{margin-bottom:10px}
.cos-section-head h2{font-size:19px;margin:0 0 3px}
.cos-section-head p{font-size:11px;color:#a3b8ae;margin:0}
.cos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.cos-card{height:194px;border-radius:17px;border:1px solid #285943;background:#0f3227;display:flex;flex-direction:column;align-items:center;padding:11px 11px 9px;gap:8px;overflow:hidden;min-width:0}
.cos-card.is-equipped{border-color:#4b9e78;background:linear-gradient(145deg,#0f3227,#153c2e)}
.cos-art{width:100%;height:110px;border-radius:12px;flex:none;overflow:hidden;background:#071f18;display:grid;place-items:center}
.cos-card>strong{font-size:12px;line-height:15px;color:#f7f5eb;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;text-align:center}
.cos-card-action{height:26px;min-width:0;width:min(108px,100%);border:1px solid #2b7255;background:#154234;color:#9eecc8;border-radius:13px;font-size:10px;font-weight:700}
.cos-card.is-equipped .cos-card-action{background:#173c2e}
.cos-art .cos-preview-avatar{width:83px;height:83px;display:grid;place-items:center;background:transparent}
.cos-preview-avatar>img{height:100%;width:100%;object-fit:contain}
.cos-preview-avatar>.cosmetic-avatar{width:100%;height:100%}
.cos-art .cosmetic-avatar{width:104px;height:104px}
.cos-preview-art .cosmetic-avatar{width:155px;height:155px}
.cos-table{--felt:#0b4832;display:block;position:relative;width:70px;height:106px;border:3px solid #79553e;border-radius:38px 38px 19px 19px;background:var(--felt);box-shadow:inset 0 0 0 1px #c9aa70,0 2px 5px #0006}
.cos-table:before{content:"";position:absolute;inset:3px;border:1px solid #b0a58b44;border-radius:34px 34px 15px 15px}
.cos-deck{display:flex;align-items:center;justify-content:center;gap:0}
.cos-deck img{width:56px;height:79px;object-fit:contain;border-radius:5px;box-shadow:0 3px 6px #0005}
.cos-deck img+img{margin-left:-5px;transform:translateY(4px)}
.cos-foot-note{font-size:10px;color:#9fb6a7;line-height:1.45;text-align:center;margin:17px 0}
.cosmetic-preview-overlay{position:absolute;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.cosmetic-preview-overlay[hidden]{display:none!important}
.cos-preview-backdrop{position:absolute;inset:0;background:#01150eba;backdrop-filter:blur(4px)}
.cos-preview-panel{position:relative;z-index:1;width:min(100%,340px);padding:18px;border-radius:23px;background:#0e3226;border:1px solid #3a755c;box-shadow:0 18px 45px #0009;display:flex;flex-direction:column;gap:12px}
.cos-preview-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.cos-preview-head h2{font-size:18px;margin:0;line-height:1.2}
.cos-preview-head button{width:36px;height:36px;border:1px solid #426753;border-radius:12px;background:#123e2f;color:#fff;font-size:22px}
.cos-preview-art{height:178px;display:grid;place-items:center;border-radius:15px;background:#071f18}
.cos-preview-art .cos-preview-avatar{width:155px;height:155px}
.cos-preview-art .cos-table{transform:scale(1.35)}
.cos-preview-art .cos-deck{transform:scale(1.45)}
.cos-preview-panel>p{font-size:11px;color:#a3b8ae;margin:0;text-align:center}
@media(max-width:340px){.avatar-halo.cosmetic-avatar{width:40px;height:40px}.offline-id .cosmetic-avatar{width:53px;height:53px}.profile-image>.cosmetic-avatar{width:92px;height:92px}.route-page .route-inner.route-personal{padding:13px 16px 25px}.cos-equipped{padding:11px 12px}.portrait-equipped{height:104px;width:104px}.cos-equipped-text>strong{font-size:15px}.cos-tabs{gap:7px}.cos-grid{gap:9px}.cos-card{padding:9px 8px}.rule-choice{padding:5px;gap:4px}.rule-choice .rule-icon{width:29px;height:32px}.rule-copy strong{font-size:10px}.rule-copy small{font-size:7.4px}}

.profile-image .profile-edit{width:50px;height:50px;right:-10px;bottom:-10px;padding:0;background:transparent;border:0;display:grid;place-items:center}
.profile-edit img{width:50px!important;height:50px!important;display:block;pointer-events:none}
@media(max-width:340px){.profile-image .profile-edit{right:-11px;bottom:-13px}}

/* 03.9: Figma categories + economy overlays. No purchasable selection is considered owned automatically. */
.cos-card{height:213px;position:relative;gap:6px}.cos-card .cos-art{height:108px}
.cos-card .cos-rarity{position:absolute;z-index:2;top:16px;left:16px;font-size:8px;font-weight:750;letter-spacing:.04em;border:1px solid currentColor;background:#061b17e3;border-radius:9px;padding:3px 6px;line-height:1}
.cos-rarity.common{color:#b6c5b9}.cos-rarity.rare{color:#91b9e4}.cos-rarity.epic{color:#d2adf6}.cos-rarity.legendary{color:#eac67a}.cos-rarity.exclusive{color:#e7a6bc}
.cos-card>strong{font-size:11px;line-height:13px;min-height:13px}.cos-economy{font-size:9px;color:#b4cdbd;min-height:12px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px}
.cos-economy img{width:15px;height:15px}.cos-card.is-locked .cos-art img{opacity:.75}.cos-card.is-equipped .cos-rarity{background:#103e30}
.cos-card-action{margin-top:auto}.cos-card-action:focus-visible,.cos-tabs button:focus-visible{outline:2px solid #f5d991;outline-offset:2px}
.cos-economy-note{margin:0 0 11px;display:flex;flex-direction:column;gap:3px;color:#a8c4b5;font-size:10px;line-height:1.4}
.cos-economy-note strong{color:#95dfb7;font-size:11px}.cos-wallet strong{font-variant-numeric:tabular-nums}
.cos-preview-meta{display:flex;gap:7px;align-items:center;justify-content:center;font-size:11px}.cos-preview-meta strong{font-size:12px}
.cos-preview-price{display:flex;align-items:center;gap:5px;border:1px solid #365d4b;background:#112c24;border-radius:15px;padding:5px 11px}.cos-preview-price img{width:19px;height:19px}
.cos-preview-panel .cos-preview-explainer{line-height:1.4;font-size:11px;color:#c6d7cc}.cos-buy-note{color:#d9cda8!important;font-size:10px!important}
.cos-card .cos-table-img{display:block;width:70px;height:106px;object-fit:contain}.cos-art .cos-table-img{margin:auto}
.cos-preview-art .cos-table-img{height:159px;width:105px;object-fit:contain}
.cos-avatar-art-placeholder{font-size:9px;color:#aabfb5}.cos-card .cos-avatar-not-final{opacity:.8}
.cos-collection-progress{font-size:10px;color:#bad4c5;text-align:center;margin:0 0 11px}
.economy-tag{border:1px solid #3f6f52;border-radius:14px;background:#0b2b21;color:#b9e7c7;font-size:9px;padding:4px 7px;display:inline-flex;align-items:center;gap:4px}
@media(max-width:340px){.cos-card{height:210px}.cos-card .cos-rarity{left:11px;top:13px;font-size:7.4px}.cos-card>strong{font-size:10px}.cos-art .cos-table-img{width:65px;height:100px}}
/* Official Figma Offline 320/360: compact header is taller, avatar centered below title,
   controls sit inside row frames, and the collapsed-rule count sits below subtitle. */
@media(max-width:379px){
 .route-page .route-inner:not(.route-profile):not(.route-personal){padding-top:12px}
 .offline-panel{padding:14px 16px 16px}
 .offline-head{height:169px;min-height:169px;position:relative;display:flex;align-items:flex-start;gap:12px}
 .offline-head .route-heading{padding-top:1px}
 .offline-id{position:absolute;top:51px;left:50%;transform:translateX(-50%);width:130px;padding:0}
 .offline-id .cosmetic-avatar{width:58px;height:58px}
 .offline-id .r-label{margin-top:1px}
 .offline-step{height:64px;grid-template-columns:48px minmax(0,1fr) 48px;gap:0;border:1px solid #285f49;border-radius:16px;background:#0d342a;overflow:hidden}
 .offline-step>button{width:48px;height:62px;border-radius:15px;border:1px solid #347359}
 .offline-rules summary{position:relative;display:block;min-height:84px;padding:11px 13px}
 .offline-rules .rules-heading{gap:7px}
 .offline-rules .rules-count{position:absolute;left:13px;right:12px;bottom:9px;display:flex;justify-content:space-between;background:none;border:0;padding:0}
 .offline-summary{min-height:90px}
}
/* Figma selector typography stays inside its 64px component (no subtitle clipping). */
.offline-step>div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.offline-step>div span{font-size:9px;line-height:11px}
.offline-step>div strong{font-size:15px;line-height:18px;margin:0}
.offline-step>div small{font-size:9px;line-height:11px}

/* DESMOCHE 04.1 — Mesa V2 corregida. Base visual tomada de la Mesa V2 aprobada en Figma. */
.route-page.is-mesa{overflow:auto;background:#071d17;padding:0;display:flex;justify-content:center;align-items:flex-start}
.mesa-canvas{position:relative;flex:none;overflow:hidden;background:#114534;color:#f4efe4;font-family:var(--font);margin:0 auto;isolation:isolate}
.mesa-canvas *{box-sizing:border-box}.mesa-canvas button{font:inherit}
.mesa-stage{position:absolute;overflow:visible;z-index:0;filter:drop-shadow(0 7px 8px rgba(0,0,0,.24))}
.mesa-stage>img{display:block;width:100%;height:100%;object-fit:fill}
.mesa-back{position:absolute;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:13px;color:#e8f4ee;z-index:8}.mesa-back img{width:55%;height:55%}
.mesa-title,.mesa-sub,.mesa-timer,.mesa-timer-text{position:absolute;z-index:7}.mesa-title{margin:0;text-align:center;font-weight:650;line-height:1.15}.mesa-sub{margin:0;text-align:center;color:#a3b8ae;line-height:1.2}.mesa-timer{border:1px solid rgba(244,239,228,.10);background:rgba(7,50,38,.62);border-radius:13px}.mesa-timer-text{display:grid;place-items:center;font-weight:650;color:#f4efe4}

.mesa-bot{position:absolute;z-index:5;color:#f4efe4}.mesa-bot-avatar{width:30%;aspect-ratio:1;position:absolute;left:0;top:0;min-width:24px;max-width:36px}.mesa-bot-avatar .cosmetic-avatar{width:100%;height:100%}.mesa-bot-copy{position:absolute;left:39%;top:0;width:59%}.mesa-bot-copy strong{font-size:11px;display:block;line-height:1.05;white-space:nowrap}.mesa-bot-copy small{font-size:8.7px;line-height:1.15;color:#a3b8ae;display:block;margin-top:3px}
.mesa-bot-cards{position:absolute;left:19%;top:29%;width:68%;height:28%;display:flex;align-items:flex-start}.mesa-back-card{width:27%;height:100%;border-radius:4px;margin-right:-13%;position:relative;background-image:var(--mesa-back-image);background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}.mesa-bot-runs{position:absolute;top:57%;left:0;width:100%;display:grid;gap:4px}.mesa-run{height:22px;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:5px;background:#f7f3e7;color:#17201c;font:700 11px Georgia,serif;padding:0 4px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.14)}.mesa-run.red{color:#df3c43}

.mesa-message{position:absolute;z-index:6;display:flex;align-items:center;padding:0 14px;border-radius:16px;background:rgba(3,35,26,.94);box-shadow:0 3px 9px rgba(0,0,0,.18);font-size:12px;font-weight:650;color:#f6f2e6}
.mesa-deck,.mesa-discard{position:absolute;z-index:5;text-align:center;color:#f4efe4}.mesa-deck-card{width:58%;height:66%;margin:0 auto 5px;display:block;object-fit:fill;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}.mesa-deck:before,.mesa-deck:after{content:'';position:absolute;width:58%;height:66%;left:22%;top:0;border:1px solid rgba(201,163,64,.5);border-radius:6px;background:#08281f;z-index:-1}.mesa-deck:before{transform:translate(5px,-4px)}.mesa-deck:after{transform:translate(2px,-2px)}.mesa-pile-label{display:block;font-size:9px;font-weight:700}.mesa-pile-count{display:block;font-size:8px;color:#a3b8ae;margin-top:2px}

.mesa-discard-card,.m-card{background-image:var(--mesa-face-image);background-size:100% 100%;background-repeat:no-repeat;color:#17201c;border:0;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.24)}
.mesa-discard-card{width:53%;height:57%;margin:0 auto 5px;border-radius:5px;font:700 11px Georgia,serif}.m-card{width:36px;height:58px;flex:none;border-radius:5px;font:700 10px Georgia,serif}.m-card+.m-card{margin-left:-5px}.m-card.red,.mesa-discard-card.red{color:#df3c43}
.card-corner{position:absolute;left:4px;top:3px;display:flex;flex-direction:column;align-items:center;line-height:.85}.card-corner b{font-size:1em}.card-corner i{font-style:normal;font-size:1.05em;margin-top:2px}.card-center{position:absolute;inset:0;display:grid;place-items:center;font-size:1.65em;line-height:1}
.mesa-discard-card .card-corner{left:5px;top:5px}.mesa-discard-card .card-center{font-size:2.5em}

.mesa-help{position:absolute;z-index:4;margin:0;color:#a3b8ae;text-align:center;font-size:8px;display:flex;justify-content:center;align-items:center}
.mesa-player{position:absolute;z-index:5;display:flex;align-items:center;gap:7px}.mesa-player-avatar{height:88%;aspect-ratio:1;flex:none}.mesa-player-avatar .cosmetic-avatar{width:100%;height:100%}.mesa-flag{width:20px;height:12px;display:grid;grid-template-rows:1fr 1fr 1fr;border-radius:1px;overflow:hidden;flex:none}.mesa-flag i{background:#2aa4e0}.mesa-flag i:nth-child(2){background:#fff}.mesa-player strong{font-size:11px;white-space:nowrap}.mesa-player-stats{margin-left:auto;color:#a3b8ae;font-size:8px;white-space:nowrap}

.mesa-block{position:absolute;z-index:5;border:1px solid rgba(94,209,161,.22);background:rgba(6,54,39,.30);border-radius:10px;overflow:hidden}.mesa-block-title{height:20%;font-size:7px;font-weight:800;text-align:center;padding-top:5px}.mesa-block-cards{height:75%;display:flex;align-items:flex-end;justify-content:center;padding:0 7px 4px;overflow:visible}.mesa-empty{height:80%;display:grid;place-items:center;color:#a3b8ae;font-size:8px}.mesa-hand{position:absolute;z-index:6;display:flex;align-items:flex-start;padding-left:1px}.mesa-hand .m-card{width:50px;height:72px;font-size:11px}.mesa-hand .m-card+.m-card{margin-left:-8px}.mesa-touch-hint{position:absolute;z-index:6;color:#a3b8ae;font-size:8px;text-align:center}.mesa-change{position:absolute;z-index:5;text-align:center;color:#f4efe4}.mesa-change strong{display:block;font-size:8px;margin-bottom:6px}.mesa-change-slot{width:72%;height:54%;margin:auto;border:1px dashed #4f8168;border-radius:7px;display:grid;place-items:center;color:#a3b8ae;font-size:16px;background:rgba(4,38,29,.2)}
.mesa-actions{position:absolute;z-index:7;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.mesa-action,.mesa-advance{border-radius:12px;border:1px solid #2d604b;background:#143b30;color:#a9beb3;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px}.mesa-action.repeat{border-color:#7b6d31;color:#f2d98e}.mesa-action.claim{border-color:#7f5347;color:#f0b8a8}.mesa-action img{width:15px;height:15px;display:block;flex:0 0 auto}.mesa-advance{position:absolute;z-index:7;opacity:.55}

.mesa-canvas[data-size="320"] .mesa-bot-copy strong{font-size:7px}.mesa-canvas[data-size="320"] .mesa-bot-copy small{font-size:5.7px}.mesa-canvas[data-size="320"] .mesa-run{height:14px;font-size:7px;gap:1px;padding:0 2px}.mesa-canvas[data-size="320"] .mesa-message{font-size:9px;padding:0 9px}.mesa-canvas[data-size="320"] .mesa-pile-label{font-size:7px}.mesa-canvas[data-size="320"] .mesa-pile-count{font-size:6px}.mesa-canvas[data-size="320"] .mesa-discard-card{font-size:8px}.mesa-canvas[data-size="320"] .mesa-player{gap:4px}.mesa-canvas[data-size="320"] .mesa-player strong{font-size:8px}.mesa-canvas[data-size="320"] .mesa-player-stats{font-size:5.7px}.mesa-canvas[data-size="320"] .mesa-block{border-radius:7px}.mesa-canvas[data-size="320"] .mesa-block-title{font-size:5px;padding-top:3px}.mesa-canvas[data-size="320"] .m-card{width:25px;height:40px;font-size:7px;border-radius:3px}.mesa-canvas[data-size="320"] .m-card+.m-card{margin-left:-4px}.mesa-canvas[data-size="320"] .card-corner{left:2px;top:2px}.mesa-canvas[data-size="320"] .mesa-hand .m-card{width:37px;height:54px;font-size:8px}.mesa-canvas[data-size="320"] .mesa-hand .m-card+.m-card{margin-left:-7px}.mesa-canvas[data-size="320"] .mesa-change strong{font-size:6px}.mesa-canvas[data-size="320"] .mesa-touch-hint{font-size:6px}.mesa-canvas[data-size="320"] .mesa-action,.mesa-canvas[data-size="320"] .mesa-advance{font-size:6px;border-radius:8px}.mesa-canvas[data-size="320"] .mesa-action img{width:11px;height:11px}

@media(min-width:760px){.route-page.is-mesa{background:radial-gradient(circle at 50% 38%,#0b3328 0,#071d17 66%);padding:14px 0}.mesa-canvas{border:1px solid rgba(94,209,161,.12);box-shadow:0 24px 70px #0008;border-radius:24px}}

/* 04.2 — Mesa V2 renderizada directamente desde las variantes oficiales de Figma. */
.mesa-canvas-exact{background:#114534;overflow:hidden;position:relative}
.mesa-figma-exact{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:top center;user-select:none;-webkit-user-drag:none}
.mesa-exact-back{position:absolute;z-index:20;border:0;background:transparent;cursor:pointer;padding:0;border-radius:13px}
.mesa-exact-back:focus-visible{outline:2px solid #5ed1a1;outline-offset:2px}



/* 04.7 — proporción avatar/marco: el arte vive dentro del hueco, no al tamaño del marco. */
#homeCosmeticAvatar{width:54px!important;height:54px!important;position:relative!important}
#homeCosmeticAvatar .avatar-frame-img{position:absolute!important;inset:0!important;width:54px!important;height:54px!important;object-fit:contain!important}
#homeCosmeticAvatar .avatar-art-slot{position:absolute!important;left:50%!important;top:50%!important;width:25px!important;height:25px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;overflow:hidden!important;display:grid!important;place-items:center!important;background:#06261c!important}
#homeCosmeticAvatar .avatar-art-img{width:23px!important;height:23px!important;object-fit:contain!important;display:block!important}

/* 04.9: navegación robusta por enlaces reales */
a.profile,a.play{color:inherit;text-decoration:none}

/* DESMOCHE 05.1 — Guardar progreso / Primer inicio. Fuente visual: Figma 459:37773. */
body.account-required{overflow:hidden}
.account-gate{position:fixed;inset:0;z-index:500;background:#071d17;display:flex;justify-content:center;align-items:stretch;color:#f5f2e8}
.account-screen{position:relative;width:min(100%,430px);min-height:100dvh;padding:24px 24px 34px;background:#06271d;border-left:1px solid rgba(94,209,161,.10);border-right:1px solid rgba(94,209,161,.10);display:flex;flex-direction:column;align-items:stretch;overflow:auto}
.account-brand{font:700 11px/16px var(--font);color:#c6a35a;letter-spacing:.02em}.account-brand span{font-family:Georgia,serif;color:#51665c}
.account-mark{width:86px;height:97px;margin:64px auto 0;display:block}.account-mark img{display:block;width:100%;height:100%;object-fit:contain}
.account-heading{margin-top:30px;text-align:center}.account-heading h1{margin:0;color:#f5f2e8;font:700 22px/1.18 var(--font)}.account-heading p{margin:14px auto 0;max-width:330px;color:#b7c9bf;font:400 12px/1.5 var(--font)}
.account-benefit{margin-top:36px;min-height:84px;border:1px solid rgba(94,209,161,.22);border-radius:16px;background:#0a3327;display:flex;align-items:flex-start;gap:14px;padding:15px 14px}.account-cloud{width:24px;flex:none;text-align:center;font-size:20px;line-height:30px;color:#c6a35a}.account-benefit strong{display:block;font:600 12px/18px var(--font)}.account-benefit p{margin:5px 0 0;color:#a8bdb2;font:400 10px/1.45 var(--font)}
.account-provider{height:52px;margin-top:24px;border-radius:16px;display:grid;grid-template-columns:30px 1fr 30px;align-items:center;padding:0 18px;font:700 12px/1 var(--font);letter-spacing:0;border:1px solid rgba(94,209,161,.42)}.account-provider strong{grid-column:2;text-align:center}.account-provider-icon{grid-column:1;color:#c6a35a;font-weight:700;font-size:15px;text-align:left}.account-google{background:#f5f2e8;color:#06271d;border-color:rgba(245,242,232,.16)}.account-email{margin-top:10px;background:#0d372b;color:#f5f2e8}
.account-or{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;gap:8px;margin-top:12px;color:#8fa89b;font:400 10px/20px var(--font)}.account-or span{height:1px;background:rgba(94,209,161,.20)}.account-or b{text-align:center;font-weight:400}
.account-guest{margin:5px auto 0;border:0;background:transparent;color:#c6a35a;font:700 11px/30px var(--font);padding:0 16px}.account-guest:disabled{opacity:.55;cursor:default}.account-link-note{margin:0;text-align:center;color:#92aa9e;font:400 9px/1.5 var(--font)}.account-status{min-height:32px;margin:11px 6px 0;text-align:center;color:#b7c9bf;font:400 10px/1.45 var(--font);opacity:0;transition:opacity .18s}.account-status.is-visible{opacity:1}.account-status.is-error{color:#f0a89d}.account-provider:disabled{opacity:.58;cursor:wait}.account-offline-note{margin:auto 0 0;padding-top:28px;text-align:center;color:#769488;font:400 9px/1.5 var(--font)}
@media(max-width:359px){.account-screen{padding:18px 20px 24px}.account-mark{width:76px;height:auto;margin-top:36px}.account-heading{margin-top:24px}.account-heading h1{font-size:20px}.account-benefit{margin-top:24px;min-height:76px}.account-provider{margin-top:18px}.account-email{margin-top:10px}.account-status{margin-top:5px}.account-offline-note{padding-top:12px}}
@media(min-width:700px){.account-gate{background:radial-gradient(circle at 50% 35%,#0a3025 0,#071d17 62%)}.account-screen{border:1px solid rgba(94,209,161,.14);border-radius:26px;min-height:min(873px,calc(100dvh - 30px));height:min(873px,calc(100dvh - 30px));margin:auto;box-shadow:0 24px 70px #0008}}


/* DESMOCHE 05.3 — username público separado de la cuenta privada. */
.username-screen .account-mark{margin-top:58px}
.username-heading{margin-top:24px}.username-heading p{max-width:340px}
.username-form{margin-top:32px;display:flex;flex-direction:column;gap:0}
.username-field{position:relative;display:block;height:86px;border:1px solid rgba(94,209,161,.24);border-radius:16px;background:#0a3327;padding:0 16px;transition:border-color .16s,box-shadow .16s}
.username-field:focus-within{border-color:rgba(94,209,161,.75);box-shadow:0 0 0 2px rgba(94,209,161,.08)}
.username-field.is-ok{border-color:rgba(94,209,161,.62)}.username-field.is-error{border-color:rgba(224,141,130,.78)}
.username-label{position:absolute;left:16px;top:11px;color:#c6a35a;font:700 9px/1 var(--font)}
.username-at{position:absolute;left:16px;top:35px;color:#8ca79a;font:600 17px/24px var(--font)}
.username-field input{position:absolute;left:38px;right:16px;top:30px;width:calc(100% - 54px);height:31px;border:0;outline:0;background:transparent;color:#f5f2e8;font:600 16px/31px var(--font);padding:0}
.username-field small{position:absolute;left:16px;right:16px;bottom:10px;color:#8ca79a;font:400 9px/1 var(--font)}
.username-field.is-ok small{color:#8fe0bc}.username-field.is-error small{color:#f0a89d}
.username-privacy{margin-top:18px;min-height:64px;border:1px solid rgba(94,209,161,.15);border-radius:14px;background:rgba(8,55,42,.7);display:flex;align-items:flex-start;gap:12px;padding:12px 14px}
.username-privacy>span{color:#c6a35a;font:700 15px/26px Georgia,serif;width:22px;text-align:center;flex:none}.username-privacy strong{display:block;color:#f5f2e8;font:600 11px/17px var(--font)}.username-privacy p{margin:3px 0 0;color:#9cb2a7;font:400 9px/1.4 var(--font)}
.username-continue{margin-top:18px;height:50px;border:0;border-radius:15px;background:#f5f2e8;color:#06271d;font:700 11px/1 var(--font)}.username-continue:disabled{opacity:.48;cursor:default}
.username-cancel{margin:8px auto 0;border:0;background:transparent;color:#c6a35a;font:700 10px/28px var(--font);padding:0 14px}
.username-status{min-height:28px;margin:12px 8px 0;text-align:center;color:#769488;font:400 8.5px/1.45 var(--font)}.username-status.is-ok{color:#8fe0bc}.username-status.is-error{color:#f0a89d}
@media(max-width:359px){.username-screen .account-mark{margin-top:34px}.username-heading{margin-top:18px}.username-form{margin-top:22px}.username-privacy{margin-top:14px}.username-continue{margin-top:14px}.username-screen .account-offline-note{padding-top:10px}}

/* DESMOCHE 05.4 — Google + perfil (username único + nombre visible) + borrado de cuenta. */
.account-provider-icon{display:grid;place-items:center;width:24px;height:24px;color:inherit}
.google-g{width:18px;height:18px;display:block}
.account-email{display:none!important}
.profile-setup-screen .account-mark{margin-top:50px}
.profile-setup-heading{margin-top:20px}.profile-setup-heading p{max-width:350px}
.profile-setup-form{margin-top:28px;display:flex;flex-direction:column}
.profile-setup-form .username-field{height:78px}
.profile-setup-form .username-field small{bottom:8px}
.game-name-field{position:relative;display:block;height:74px;margin-top:10px;border:1px solid rgba(94,209,161,.22);border-radius:16px;background:#0a3327;padding:0 14px;transition:border-color .16s,box-shadow .16s}
.game-name-field:focus-within{border-color:rgba(94,209,161,.75);box-shadow:0 0 0 2px rgba(94,209,161,.08)}
.game-name-field.is-ok{border-color:rgba(94,209,161,.55)}.game-name-field.is-error{border-color:rgba(224,141,130,.78)}
.game-name-label{position:absolute;left:14px;top:10px;color:#c6a35a;font:700 9px/1 var(--font)}
.game-name-field input{position:absolute;left:14px;right:14px;top:26px;width:calc(100% - 28px);height:28px;border:0;outline:0;background:transparent;color:#f5f2e8;font:600 16px/28px var(--font);padding:0}
.game-name-field small{position:absolute;left:14px;right:14px;bottom:7px;color:#8ca79a;font:400 8.5px/1 var(--font)}
.game-name-field.is-error small{color:#f0a89d}.game-name-field.is-ok small{color:#8fe0bc}
.profile-identity-note{margin-top:10px;min-height:56px;border:1px solid rgba(94,209,161,.14);border-radius:14px;background:rgba(8,55,42,.7);display:flex;gap:10px;align-items:flex-start;padding:10px 12px}
.profile-identity-note>span{width:22px;flex:none;color:#c6a35a;font:700 14px/24px Georgia,serif;text-align:center}.profile-identity-note strong{display:block;color:#f5f2e8;font:600 10px/16px var(--font)}.profile-identity-note p{margin:2px 0 0;color:#9cb2a7;font:400 8.5px/1.4 var(--font)}
.profile-setup-form .username-continue{margin-top:12px;height:48px}
.profile-setup-form .username-status{margin-top:10px}
.settings-account-row{height:102px!important}
.settings-account-row .setting-icon{top:13px!important}
.settings-account-row .setting-title{top:12px!important}
.settings-account-row .setting-subtitle{top:39px!important}
.settings-account-action{top:23px!important}
.settings-account-delete{position:absolute;left:72px;bottom:10px;border:0;background:transparent;color:#e6a19a;font:700 9px/1 var(--font);padding:4px 0;letter-spacing:.01em}
.settings-account-delete:hover{text-decoration:underline}.settings-account-delete:disabled{opacity:.5;cursor:wait}
.settings-account-delete:focus-visible{outline:2px solid #f5cc6b;outline-offset:3px;border-radius:4px}
.online-username{display:block;margin-top:4px;color:#91aa9d;font-size:10px}
@media(max-width:359px){
 .profile-setup-screen .account-mark{width:66px;margin-top:24px}.profile-setup-heading{margin-top:12px}.profile-setup-heading h1{font-size:19px}.profile-setup-heading p{margin-top:8px;font-size:10px}.profile-setup-form{margin-top:18px}.profile-setup-form .username-field{height:70px}.game-name-field{height:66px}.profile-identity-note{min-height:44px;padding:7px 10px}.profile-identity-note p{display:none}.profile-setup-form .username-continue{height:44px;margin-top:10px}.profile-setup-form .username-status{margin-top:6px;min-height:18px}.profile-setup-screen .account-offline-note{display:none}
 .settings-account-row{height:108px!important}.settings-account-row .setting-icon{top:16px!important}.settings-account-action{top:27px!important}.settings-account-delete{left:64px;bottom:11px;font-size:8px}
}

/* DESMOCHE 05.5 — Crear perfil más limpio + confirmaciones reales de cuenta. */
.profile-setup-screen{padding-bottom:28px}
.profile-setup-screen .account-mark{width:78px;height:auto;margin-top:34px}
.profile-setup-heading{margin-top:16px}
.profile-setup-heading h1{font-size:21px;letter-spacing:.01em}
.profile-setup-heading p{margin-top:9px;max-width:310px;font-size:10.5px;line-height:1.45;color:#a9beb3}
.profile-setup-form{margin-top:22px;gap:0}
.profile-field-group{display:block;margin:0 0 16px}
.profile-field-label{display:block;margin:0 0 7px 2px;color:#c6a35a;font:700 9px/1 var(--font);letter-spacing:.055em}
.profile-input-shell{height:54px;border:1px solid rgba(94,209,161,.24);border-radius:15px;background:#0a3327;display:flex;align-items:center;padding:0 13px;gap:8px;transition:border-color .16s,box-shadow .16s,background .16s}
.profile-input-shell:focus-within{border-color:rgba(94,209,161,.72);box-shadow:0 0 0 3px rgba(94,209,161,.07);background:#0b372a}
.profile-input-shell.is-ok{border-color:rgba(94,209,161,.66)}
.profile-input-shell.is-error{border-color:rgba(224,141,130,.82)}
.profile-input-shell.is-checking{border-color:rgba(198,163,90,.58)}
.profile-input-shell input{min-width:0;flex:1;height:42px;border:0;outline:0;background:transparent;color:#f5f2e8;font:600 15px/42px var(--font);padding:0}
.profile-input-prefix{flex:none;color:#8ca79a;font:600 17px/1 var(--font)}
.profile-input-state{width:22px;flex:none;text-align:center;color:#5ed1a1;font:700 12px/1 var(--font)}
.profile-input-shell.is-error .profile-input-state{color:#f0a89d}
.profile-input-shell.is-checking .profile-input-state{color:#c6a35a}
.profile-field-help{display:block;min-height:14px;margin:6px 2px 0;color:#859f92;font:400 8.5px/1.35 var(--font)}
.profile-input-shell.is-ok + .profile-field-help{color:#8fd7b8}
.profile-input-shell.is-error + .profile-field-help{color:#efa69c}
.profile-cost-note{margin-top:0;min-height:52px;border:1px solid rgba(198,163,90,.18);border-radius:14px;background:rgba(10,51,39,.62);display:flex;align-items:center;gap:10px;padding:10px 12px}
.profile-cost-note>span{width:22px;flex:none;text-align:center;color:#c6a35a;font:700 15px/1 Georgia,serif}
.profile-cost-note p{margin:0;color:#91aa9e;font:400 8.7px/1.45 var(--font)}
.profile-cost-note strong{color:#f5f2e8;font-weight:600}
.profile-setup-form .username-continue{height:48px;margin-top:14px;border-radius:15px}
.profile-setup-form .username-status{min-height:24px;margin-top:9px;font-size:8.5px}
.profile-setup-form .username-status.is-visible{opacity:1}
.profile-setup-screen .account-offline-note{padding-top:10px}

.account-confirm-layer{position:fixed;inset:0;z-index:900;background:rgba(2,15,11,.72);backdrop-filter:blur(7px);display:grid;place-items:center;padding:22px;color:#f5f2e8}
.account-confirm-card{width:min(100%,350px);border:1px solid rgba(94,209,161,.20);border-radius:22px;background:#08291f;box-shadow:0 24px 70px rgba(0,0,0,.5);padding:24px 20px 18px;text-align:center}
.account-confirm-icon{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(198,163,90,.55);background:#0d3b2e;color:#c6a35a;font:700 22px/1 var(--font)}
.account-confirm-icon.is-danger{border-color:rgba(224,141,130,.55);background:#3a2522;color:#f0a89d}
.account-confirm-card h2{margin:0;color:#f5f2e8;font:700 19px/1.2 var(--font)}
.account-confirm-card>p{margin:10px auto 0;max-width:290px;color:#a8bdb2;font:400 10px/1.55 var(--font)}
.account-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px}
.account-confirm-actions button{height:44px;border-radius:13px;font:700 10px/1 var(--font)}
.account-confirm-cancel{border:1px solid rgba(94,209,161,.26);background:#0b372a;color:#f5f2e8}
.account-confirm-accept{border:1px solid rgba(198,163,90,.50);background:#f5f2e8;color:#06271d}
.account-confirm-accept.is-danger{border-color:rgba(224,141,130,.45);background:#5a2f2a;color:#fff0ed}
.account-confirm-actions button:disabled{opacity:.52;cursor:wait}
.account-confirm-status{display:block;min-height:14px;margin-top:10px;color:#c6a35a;font:400 8.5px/1.35 var(--font)}
@media(max-width:359px){
 .profile-setup-screen .account-mark{width:62px;margin-top:18px}.profile-setup-heading{margin-top:10px}.profile-setup-heading h1{font-size:18px}.profile-setup-heading p{font-size:9.5px}.profile-setup-form{margin-top:14px}.profile-field-group{margin-bottom:11px}.profile-input-shell{height:48px}.profile-input-shell input{height:38px;line-height:38px;font-size:14px}.profile-cost-note{min-height:42px;padding:7px 10px}.profile-cost-note p{font-size:8px}.profile-setup-form .username-continue{height:43px;margin-top:10px}.profile-setup-screen .account-offline-note{display:none}
 .account-confirm-card{padding:20px 16px 16px}.account-confirm-icon{width:46px;height:46px;margin-bottom:12px}.account-confirm-actions{margin-top:18px}.account-confirm-actions button{height:42px}
}


/* DESMOCHE 111AR — Configuración Offline dentro del mismo Home.
   Replica la pantalla standalone aprobada, sin recargar el documento. */
.offline-exact{width:min(100%,393px);min-height:100%;padding:20px 16px 26px;margin:0 auto;background:#071d17;color:#f5f2e8;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
.offline-exact *{box-sizing:border-box}
.offline-exact .oe-panel{border:1px solid rgba(94,209,161,.22);border-radius:24px;background:#0b3a2d;padding:16px}
.offline-exact .oe-head{position:relative;min-height:158px}
.offline-exact .oe-back{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:14px;border:1px solid rgba(245,242,232,.16);background:#123f32;display:grid;place-items:center;padding:0;cursor:pointer}
.offline-exact .oe-back img{width:22px;height:22px}
.offline-exact .oe-heading{padding-left:55px}
.offline-exact .oe-heading h1{font-size:20px;margin:2px 0 3px;color:#f5f2e8}
.offline-exact .oe-heading p{margin:0;color:#9fb7ad;font-size:11px}
.offline-exact .oe-identity{position:absolute;left:50%;transform:translateX(-50%);top:58px;text-align:center;width:140px}
.offline-exact .oe-portrait{position:relative;width:58px;height:58px;margin:auto}
.offline-exact .oe-portrait .oe-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.offline-exact .oe-portrait .oe-art{position:absolute;left:50%;top:50%;width:27px;height:27px;transform:translate(-50%,-50%);object-fit:contain}
.offline-exact .oe-identity span{display:block}
.offline-exact .oe-label{font-size:8px;color:#71d8af;margin-top:4px;font-weight:800}
.offline-exact .oe-name{font-size:13px;font-weight:800;margin-top:2px}
.offline-exact .oe-muted{font-size:9px;color:#9fb7ad;margin-top:2px}
.offline-exact .oe-step{display:grid;grid-template-columns:49px 1fr 49px;min-height:66px;border:1px solid rgba(94,209,161,.28);border-radius:16px;overflow:hidden;margin:10px 0;background:#104535}
.offline-exact .oe-step button{border:0;background:#165746;color:#79e5bd;font-size:32px;font-weight:700;cursor:pointer}
.offline-exact .oe-step .oe-copy{text-align:center;display:flex;flex-direction:column;justify-content:center}
.offline-exact .oe-step .oe-copy span{font-size:8px;color:#9fb7ad}
.offline-exact .oe-step .oe-copy strong{font-size:16px}
.offline-exact .oe-step .oe-copy small{font-size:8px;color:#9fb7ad;margin-top:2px}
.offline-exact .oe-rules{border:1px solid rgba(94,209,161,.28);border-radius:16px;margin-top:10px;background:#0c392d;overflow:hidden}
.offline-exact .oe-rules summary{list-style:none;padding:14px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.offline-exact .oe-rules summary::-webkit-details-marker{display:none}
.offline-exact .oe-rules strong{display:block;font-size:14px}
.offline-exact .oe-sub{font-size:10px;color:#9fb7ad;margin-top:3px}
.offline-exact .oe-count{font-size:10px;color:#67dcb0;white-space:nowrap}
.offline-exact .oe-rule-grid{padding:0 10px 10px;display:grid;gap:7px}
.offline-exact .oe-rule{width:100%;border:1px solid rgba(245,242,232,.12);border-radius:13px;background:#123f32;color:#f5f2e8;min-height:54px;padding:8px 10px;display:grid;grid-template-columns:34px 1fr 22px;align-items:center;text-align:left;cursor:pointer}
.offline-exact .oe-rule img{width:24px;height:24px}
.offline-exact .oe-rule strong{font-size:11px}
.offline-exact .oe-rule small{display:block;color:#9fb7ad;font-size:8px;margin-top:2px}
.offline-exact .oe-rule.selected{border-color:#5ed1a1;background:#155342}
.offline-exact .oe-check{text-align:center;color:#79e5bd;font-weight:900}
.offline-exact .oe-summary{margin-top:10px;border:1px solid rgba(245,242,232,.1);border-radius:16px;background:#062f25;padding:12px;position:relative}
.offline-exact .oe-summary small{display:block;color:#9fb7ad;font-size:8px}
.offline-exact .oe-summary strong{display:block;font-size:12px;margin-top:8px}
.offline-exact .oe-badge{position:absolute;right:10px;top:10px;border:1px solid rgba(94,209,161,.25);border-radius:14px;padding:5px 8px;font-size:8px;color:#d5e9df}
.offline-exact .oe-start{margin-top:11px;height:54px;border-radius:15px;background:#5ed1a1;color:#06291f;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;letter-spacing:.08em;box-shadow:0 4px 8px #0003}
.offline-exact .oe-note{text-align:center;color:#9fb7ad;font-size:8px;margin:11px 0}
.offline-exact .oe-guide{margin-top:10px;border:1px solid rgba(94,209,161,.12);border-radius:15px;padding:12px;color:#9fb7ad;font-size:9px}
.offline-exact .oe-guide strong{color:#67dcb0}
.offline-exact .oe-guide p{margin:5px 0 0;line-height:1.45}
@media(min-width:760px){.route-page:has(.offline-exact){background:radial-gradient(circle at 50% 35%,#0c3429,#061813 70%);padding:18px}.offline-exact{min-height:calc(100vh - 36px);border-radius:27px;box-shadow:0 24px 70px #0008}}

/* 111AT · Información / Acerca de DESMOCHE · recuperado de build aprobada */
.about-sheet-body{display:flex;flex-direction:column;gap:10px}.about-lead{margin:0;color:#f5f2e8;font-weight:800;font-size:14px}.about-copy{margin:0;color:#c8d8cf;font-size:11px;line-height:1.55}.about-copy strong{color:#f5f2e8}.about-status{display:grid;gap:8px;margin-top:4px}.about-status-row{border:1px solid #315c49;background:#0e2c23;border-radius:14px;padding:10px 12px}.about-status-row small{display:block;color:#6ce0ae;font-size:9px;font-weight:800;letter-spacing:.35px}.about-status-row p{margin:4px 0 0;color:#e4eee8;font-size:10px;line-height:1.35}.about-tagline{margin:2px 0 0;text-align:center;color:#e8c06b;font-size:12px;font-weight:700}.about-credits{width:100%;height:42px;border-radius:13px;background:#163329;color:#f5f2e8;border:1px solid #3a6652;font-weight:700;font-size:11px}.about-meta{display:flex;justify-content:space-between;gap:12px;color:#91a99d;font-size:9px;margin-top:1px}.about-credit-intro,.about-credit-note{margin:0;color:#bacdc2;font-size:10.5px;line-height:1.5}.about-credit-group{border:1px solid #315c49;background:#0e2c23;border-radius:13px;padding:10px 12px}.about-credit-group strong{font-size:11px;color:#f5f2e8}.about-credit-group p{margin:4px 0 0;color:#b9cbc0;font-size:10px;line-height:1.45}.about-credit-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}.about-credit-links a{display:grid;place-items:center;min-height:38px;padding:7px;border-radius:12px;border:1px solid #3a6652;background:#163329;color:#6ce0ae;text-decoration:none;font-size:9px;font-weight:800;text-align:center}.about-credit-note{text-align:center;color:#91a99d;font-size:9px}


/* =====================================================================
   DESMOCHE 111AW · HOME RESPONSIVE
   Componentes ACTUALES + proporciones recuperadas de la prueba cerrada.
   No modifica Offline / Perfil / Ajustes / Mesa / Motor.
   ===================================================================== */
@media (max-width: 600px){

  body.home-route{
    background:#061b14;
    overflow:hidden;
  }

  body.home-route .shell{
    width:100%;
    max-width:430px;
    min-height:100dvh;
    height:100dvh;
    padding:
      max(18px, env(safe-area-inset-top))
      18px
      max(14px, env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 15% 8%,rgba(94,209,161,.075),transparent 31%),
      radial-gradient(circle at 88% 19%,rgba(201,164,65,.035),transparent 27%),
      linear-gradient(180deg,#08231a 0%,#061b14 55%,#04140f 100%);
  }

  /* ---------- ambientación recuperada ---------- */
  body.home-route .home-body{
    position:relative;
    z-index:1;
  }
  body.home-route .home-body::before,
  body.home-route .home-body::after{
    content:"";
    position:absolute;
    z-index:-2;
    top:20%;
    width:118px;
    height:168px;
    border:1px solid rgba(94,209,161,.065);
    border-radius:20px;
    background:
      linear-gradient(145deg,rgba(56,126,94,.08),rgba(4,26,19,.05));
    box-shadow:inset 0 1px rgba(255,255,255,.018);
    opacity:.62;
    pointer-events:none;
  }
  body.home-route .home-body::before{
    left:-80px;
    transform:rotate(-16deg);
  }
  body.home-route .home-body::after{
    right:-80px;
    transform:rotate(15deg);
  }

  body.home-route .brand-zone::before,
  body.home-route .brand-zone::after{
    position:absolute;
    z-index:-1;
    top:16px;
    font:78px/1 Georgia,serif;
    color:rgba(94,209,161,.042);
    pointer-events:none;
  }
  body.home-route .brand-zone::before{
    content:"♣";
    left:-18px;
    transform:rotate(-13deg);
  }
  body.home-route .brand-zone::after{
    content:"♠";
    right:-18px;
    transform:rotate(12deg);
  }

  /* ---------- HUD: medidas de la build cerrada ---------- */
  body.home-route .top-bar{
    height:50px;
    gap:9px;
    align-items:center;
    flex:none;
  }

  body.home-route .profile{
    height:50px;
    padding:5px 8px 5px 6px;
    gap:8px;
    border-radius:16px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.004)),
      rgba(4,34,27,.62);
  }

  body.home-route .avatar-halo.cosmetic-avatar{
    width:40px;
    height:40px;
    flex:0 0 40px;
  }
  body.home-route .avatar-halo.cosmetic-avatar .avatar-frame-img{
    width:40px!important;
    height:40px!important;
  }
  body.home-route .avatar-halo.cosmetic-avatar .avatar-art-slot{
    width:25px!important;
    height:25px!important;
  }
  body.home-route .avatar-halo.cosmetic-avatar .avatar-art-img{
    width:23px!important;
    height:23px!important;
  }

  body.home-route .online-dot{
    width:7px;
    height:7px;
  }
  body.home-route .profile-info{
    gap:3px;
  }
  body.home-route .profile-name{
    gap:5px;
    font-size:12px;
    line-height:1.1;
  }
  body.home-route .profile-level{
    font-size:9px;
  }
  body.home-route .flag{
    width:16px;
    height:10px;
  }

  body.home-route .wallet{
    height:46px;
    min-width:76px;
    padding:5px 8px;
    gap:5px;
    border-radius:15px;
    font-size:14px;
  }
  body.home-route .coin{
    width:30px;
    height:30px;
  }
  body.home-route .coin img{
    width:30px!important;
    height:30px!important;
  }

  body.home-route .settings-button{
    width:44px;
    height:44px;
  }
  body.home-route .settings-button img{
    width:25px;
    height:25px;
  }

  /* ---------- marca actual, proporción de la prueba cerrada ---------- */
  body.home-route .brand-zone{
    position:relative;
    margin-top:clamp(32px,7dvh,68px);
    height:132px;
    flex:none;
  }
  body.home-route .brand-logo{
    width:286px;
    height:135px;
    transform:scale(.94);
    transform-origin:center center;
  }

  /* ---------- columna de acciones: 326 px ---------- */
  body.home-route .home-actions{
    width:min(100%,326px);
    margin:16px auto 0;
    gap:8px;
  }

  body.home-route .play{
    height:58px;
    padding:0 12px;
    gap:10px;
    border-radius:18px;
  }

  body.home-route .play.primary{
    height:74px;
    border-radius:19px;
  }
  body.home-route .play.primary .play-icon{
    width:42px;
    height:42px;
    border-radius:14px;
  }
  body.home-route .play.primary .play-icon img{
    width:22px;
    height:22px;
  }
  body.home-route .play.primary .play-copy strong{
    font-size:17px;
  }
  body.home-route .play.primary .play-copy small{
    font-size:10px;
  }
  body.home-route .play.primary .play-arrow{
    width:34px;
    height:34px;
    border-radius:11px;
  }
  body.home-route .play.primary .play-arrow img{
    width:16px;
    height:16px;
  }

  body.home-route #onlineBtn{
    height:58px;
  }
  body.home-route #onlineBtn .online-icon img{
    width:20px;
    height:20px;
  }
  body.home-route #onlineBtn strong{
    font-size:13px;
    letter-spacing:.02em;
  }
  body.home-route #onlineBtn .pill{
    padding:5px 8px;
    font-size:8px;
  }

  body.home-route #continueBtn{
    height:62px;
  }
  body.home-route #continueBtn .play-icon{
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:21px;
  }
  body.home-route #continueBtn .play-copy strong{
    font-size:13px;
    line-height:1.08;
  }
  body.home-route #continueBtn .play-copy small{
    font-size:9px;
  }
  body.home-route #continueBtn .play-arrow{
    width:30px;
    height:34px;
  }

  body.home-route .tiles{
    gap:8px;
  }
  body.home-route .tile{
    height:72px;
    border-radius:17px;
    gap:5px;
    font-size:12px;
  }
  body.home-route .tile-icon{
    width:33px;
    height:33px;
    border-radius:11px;
  }
  body.home-route .tile-icon img{
    width:19px;
    height:19px;
  }

  /* ---------- pie decorativo como la prueba cerrada ---------- */
  body.home-route .bottom-decoration{
    min-height:150px;
    margin-top:auto;
    padding-top:58px;
    overflow:visible;
  }
  body.home-route .bottom-decoration::before,
  body.home-route .bottom-decoration::after{
    content:"";
    position:absolute;
    left:-30px;
    right:-30px;
    height:80px;
    border-radius:50%;
    border-top:1px solid rgba(201,164,65,.10);
    pointer-events:none;
  }
  body.home-route .bottom-decoration::before{
    bottom:-38px;
    transform:rotate(-4deg);
  }
  body.home-route .bottom-decoration::after{
    bottom:-54px;
    transform:rotate(4deg);
    border-top-color:rgba(245,242,232,.045);
  }

  body.home-route .suit-pattern{
    left:-4px;
    right:-4px;
    bottom:19px;
    width:auto;
    text-align:center;
    font-size:22px;
    letter-spacing:18px;
    opacity:.13;
    color:#6e8177;
    transform:none;
  }

  body.home-route .info-button{
    width:36px;
    height:36px;
    border-width:1px;
  }
  body.home-route .info-button::before{
    inset:4px;
  }
  body.home-route .info-button img{
    width:16px;
    height:16px;
  }
  body.home-route .info-dot{
    width:13px;
    height:13px;
    right:-2px;
    bottom:-2px;
    border-width:1px;
    font-size:8px;
    line-height:12px;
  }

  /* Si la pantalla es corta, misma compactación que usaba la build cerrada */
  @media (max-height:760px){
    body.home-route .shell{
      padding-top:max(12px,env(safe-area-inset-top));
      padding-bottom:max(8px,env(safe-area-inset-bottom));
    }
    body.home-route .brand-zone{
      margin-top:18px;
      height:118px;
    }
    body.home-route .brand-logo{
      transform:scale(.84);
    }
    body.home-route .home-actions{
      margin-top:8px;
      gap:7px;
    }
    body.home-route .play.primary{
      height:68px;
    }
    body.home-route .tile{
      height:64px;
    }
    body.home-route .bottom-decoration{
      min-height:78px;
      padding-top:18px;
    }
    body.home-route .suit-pattern{
      bottom:10px;
      font-size:15px;
      letter-spacing:13px;
    }
  }
}


/* ==============================================================
   DESMOCHE 111AX · PERFIL COMPLETO
   Basado en Figma oficial 352:20972 / 352:21144 / 352:21316 / 352:21488.
   ============================================================== */
.profile-handle{
  margin:-2px 0 7px;
  color:#8fb5a3;
  font-size:9px;
  line-height:12px;
}
.profile-currency{
  color:#f5f2e8;
  cursor:pointer;
}
.profile-currency:active{transform:translateY(1px)}
.profile-achievements-card{
  min-height:238px;
  padding:16px 17px 20px;
}
.profile-achievements-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.profile-achievements-head h2{
  margin:6px 0 0;
  font-size:20px;
  font-weight:500;
}
.profile-achievements-head button{
  min-width:102px;
  height:34px;
  border:0;
  background:transparent;
  color:#8ddbb8;
  font-size:9px;
  font-weight:700;
  letter-spacing:.02em;
}
.profile-achievements{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}
.profile-achievement{
  position:relative;
  min-width:0;
  height:132px;
  max-width:none;
  padding:12px 5px 7px;
  border:1px solid #2a5d47;
  border-radius:16px;
  background:#0b3428;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
}
.profile-achievement.is-locked{
  opacity:.48;
  filter:saturate(.45);
}
.profile-achievement.is-unlocked{
  border-color:#477c61;
  background:linear-gradient(145deg,#0b3428,#113d2f);
}
.achievement-medal{
  width:48px;
  height:48px;
  border:1px solid #417159;
  border-radius:50%;
  background:#0c2b22;
  display:grid;
  place-items:center;
  color:#73ddb3;
  font-size:18px;
  font-weight:800;
}
.profile-achievement strong{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f5f2e8;
  font-size:10px;
  text-align:center;
}
.profile-achievement small{
  color:#9db5aa;
  font-size:8px;
  line-height:11px;
  text-align:center;
}
.profile-achievement>b{
  position:absolute;
  top:6px;
  right:7px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#5ed1a1;
  color:#062119;
  display:grid;
  place-items:center;
  font-size:9px;
}
.profile-online-card{
  min-height:174px;
  padding:18px 17px;
}
.profile-online-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.profile-online-head>span:last-child{
  min-width:118px;
  height:32px;
  padding:0 10px;
  border:1px solid #4b604d;
  border-radius:16px;
  background:#283023;
  color:#e7cf8d;
  display:grid;
  place-items:center;
  font-size:8px;
  font-weight:700;
  letter-spacing:.03em;
}
.profile-online-card h2{
  margin:3px 0 13px;
  font-size:22px;
  font-weight:500;
}
.profile-online-copy{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:center;
  gap:14px;
}
.profile-online-shield{
  width:46px;
  height:46px;
  border:1px solid #315b47;
  border-radius:14px;
  background:#0b3328;
  color:#73ddb3;
  display:grid;
  place-items:center;
  font-size:22px;
}
.profile-online-copy p{
  margin:0;
  color:#a3b8ae;
  font-size:10px;
  line-height:1.45;
}
.profile-footnote{
  margin:2px 0 18px;
  color:#819b8e;
  font-size:9px;
  line-height:1.4;
  text-align:center;
}
.route-profile .stats-panel h2{
  font-weight:500;
}
.route-profile .stat strong{
  font-variant-numeric:tabular-nums;
}
@media(max-width:340px){
  .profile-achievements-card{padding-inline:12px}
  .profile-achievements{gap:7px}
  .profile-achievement{height:126px}
  .achievement-medal{width:43px;height:43px}
  .profile-achievement strong{font-size:9px}
  .profile-achievement small{font-size:7.5px}
  .profile-online-card{padding-inline:13px}
}


/* ==============================================================
   DESMOCHE 111AY · PERFIL: MONEDAS + LOGROS CONECTADOS
   ============================================================== */

/* Corrige el botón de monedas que heredaba estilos blancos del navegador */
.route-profile .profile-currency{
  appearance:none;
  -webkit-appearance:none;
  min-width:116px;
  min-height:46px;
  margin-top:14px;
  margin-left:auto;
  padding:5px 10px 5px 7px;
  border:1px solid #2b5a43;
  border-radius:15px;
  background:#0b3428;
  color:#f5f2e8;
  display:grid;
  grid-template-columns:30px auto;
  grid-template-rows:22px 12px;
  column-gap:8px;
  align-items:center;
  justify-content:start;
  box-shadow:none;
}
.route-profile .profile-currency img{
  grid-column:1;
  grid-row:1 / span 2;
  width:30px;
  height:30px;
  object-fit:contain;
}
.route-profile .profile-currency strong{
  grid-column:2;
  grid-row:1;
  align-self:end;
  color:#f5f2e8;
  font-size:17px;
  line-height:18px;
  font-weight:800;
  text-align:left;
}
.route-profile .profile-currency span{
  grid-column:2;
  grid-row:2;
  align-self:start;
  color:#8fa99d;
  font-size:7px;
  line-height:9px;
  letter-spacing:.03em;
  text-align:left;
}
.route-profile .profile-currency:hover,
.route-profile .profile-currency:focus{
  background:#0d392c;
  color:#f5f2e8;
}
.route-profile .profile-currency:active{
  transform:translateY(1px);
}

/* Pantalla completa de Logros */
.route-achievements{
  padding-bottom:24px;
}
.achievements-summary{
  min-height:126px;
  padding:18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px;
  gap:14px;
  align-items:center;
}
.achievements-summary h2{
  margin:5px 0 5px;
  font-size:20px;
  font-weight:500;
}
.achievements-summary p{
  margin:0;
  max-width:235px;
  font-size:9px;
  line-height:1.45;
}
.achievements-count{
  width:70px;
  height:70px;
  border:1px solid #3b6b54;
  border-radius:50%;
  background:#0c3428;
  color:#73ddb3;
  display:flex;
  align-items:baseline;
  justify-content:center;
  padding-top:20px;
  font-size:25px;
  font-weight:800;
}
.achievements-count small{
  color:#8fa99d;
  font-size:11px;
  font-weight:600;
}
.achievements-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.achievement-row{
  min-height:126px;
  padding:14px;
  border:1px solid #2f604b;
  border-radius:20px;
  background:#0b3428;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:14px;
  align-items:center;
}
.achievement-row.is-locked{
  opacity:.58;
  filter:saturate(.55);
}
.achievement-row.is-unlocked{
  border-color:#4c8067;
  background:linear-gradient(145deg,#0b3428,#103e2f);
}
.achievement-row-icon{
  width:58px;
  height:58px;
  border:1px solid #47765f;
  border-radius:50%;
  background:#0a2a21;
  color:#73ddb3;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:800;
}
.achievement-row-copy{
  min-width:0;
}
.achievement-row-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.achievement-row-title strong{
  color:#f5f2e8;
  font-size:14px;
}
.achievement-row-title span{
  flex:0 0 auto;
  padding:4px 6px;
  border:1px solid #3c6653;
  border-radius:999px;
  color:#8ecfb1;
  font-size:6.5px;
  font-weight:700;
  letter-spacing:.04em;
}
.achievement-row.is-unlocked .achievement-row-title span{
  border-color:#4d8b6c;
  color:#73ddb3;
}
.achievement-row-copy p{
  margin:6px 0 10px;
  color:#9eb4a8;
  font-size:9px;
  line-height:1.35;
}
.achievement-progress{
  width:100%;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:#173f31;
}
.achievement-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:#73ddb3;
}
.achievement-row-copy>small{
  display:block;
  margin-top:5px;
  color:#819c8f;
  font-size:8px;
  text-align:right;
}
@media(max-width:340px){
  .achievements-summary{
    grid-template-columns:minmax(0,1fr) 60px;
  }
  .achievements-count{
    width:58px;
    height:58px;
    padding-top:16px;
    font-size:21px;
  }
  .achievement-row{
    grid-template-columns:50px minmax(0,1fr);
    gap:10px;
    padding:12px;
  }
  .achievement-row-icon{
    width:50px;
    height:50px;
  }
  .achievement-row-title strong{
    font-size:12px;
  }
}


/* 111AZ · MONEDAS CONECTADAS */
.route-coins{padding-bottom:24px}
.coins-hero{display:grid;grid-template-columns:minmax(0,1fr) 102px;gap:14px;align-items:center;min-height:138px;padding:18px}
.coins-hero h2{margin:6px 0 8px;font-size:24px;font-weight:800;color:#f5f2e8}
.coins-badge{width:94px;height:94px;border-radius:24px;border:1px solid #39654f;background:linear-gradient(180deg,#103b2d,#0b3025);display:grid;place-items:center;justify-self:end}
.coins-badge img{width:42px;height:42px;object-fit:contain}
.coins-badge strong{display:block;margin-top:3px;color:#f5f2e8;font-size:22px;font-weight:800;text-align:center}
.coins-usage-list{display:grid;gap:10px;margin-top:10px}
.coins-usage-list article{padding:12px 14px;border:1px solid #2f604b;border-radius:16px;background:#0b3428}
.coins-usage-list strong{display:block;color:#f5f2e8;font-size:12px;margin-bottom:4px}
.coins-usage-list p{margin:0;color:#9eb4a8;font-size:9px;line-height:1.45}
.coins-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.coins-stat{min-height:76px;padding:12px;border:1px solid #2f604b;border-radius:16px;background:#0b3428;display:flex;flex-direction:column;justify-content:center}
.coins-stat strong{color:#73ddb3;font-size:18px;font-weight:800;line-height:1.1}
.coins-stat span{margin-top:5px;color:#f5f2e8;font-size:10px}
.coins-transactions h2{margin:6px 0 10px}
.coins-tx-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.coins-tx{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:3px 10px;padding:12px 14px;border:1px solid #2f604b;border-radius:16px;background:#0b3428}
.coins-tx strong{color:#f5f2e8;font-size:11px}
.coins-tx span{color:#73ddb3;font-size:14px;font-weight:800}
.coins-tx small{grid-column:1 / span 2;color:#8fa99d;font-size:8px}
@media(max-width:340px){.coins-hero{grid-template-columns:minmax(0,1fr) 84px}.coins-badge{width:80px;height:80px}.coins-badge img{width:34px;height:34px}.coins-badge strong{font-size:18px}.coins-hero h2{font-size:21px}}


/* ==========================================================================
   DESMOCHE 111BA · SISTEMA TIPOGRÁFICO
   Fuente UI oficial: Inter.
   Fallback offline: Roboto / Segoe UI / system-ui.
   Referencias Figma:
   Home 393: 344:18945
   Offline 393: 346:46768
   Perfil 393: 352:21316
   Personalizar 393: 366:23123

   IMPORTANTE:
   - No modifica Mesa ni textos dentro del motor jugable.
   - La D, marca DESMOCHE y símbolos de cartas mantienen serif visual.
   ========================================================================== */

:root{
  --font-ui: Inter, Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-brand: "Libre Baskerville", Georgia, "Times New Roman", serif;

  --type-screen: 19px;
  --type-screen-offline: 21px;
  --type-section: 21px;
  --type-section-small: 19px;
  --type-main: 18px;
  --type-body: 11px;
  --type-body-small: 10px;
  --type-label: 10px;
  --type-micro: 9px;
}

/* Toda la UI fuera de Mesa usa la misma familia. */
body,
.shell,
.route-page,
.route-inner,
.settings-panel,
.sheet,
.offline-exact,
button,
input{
  font-family:var(--font-ui);
}

/* Marca y recursos editoriales: no convertir a sans-serif. */
.brand-suits,
.coin-core{
  font-family:var(--font-brand);
}

/* --------------------------------------------------------------------------
   HOME · Figma oficial 393
   -------------------------------------------------------------------------- */
.home-route .profile-name{
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:0;
}
.home-route .profile-level{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:400;
  line-height:1.2;
}
.home-route .wallet{
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:700;
}
.home-route .brand-tagline{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:2.7px;
}
.home-route #offlineBtn .play-copy strong{
  font-family:var(--font-ui);
  font-size:22px;
  font-weight:700;
  line-height:1.08;
  letter-spacing:0;
}
.home-route #offlineBtn .play-copy small{
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:400;
  line-height:1.2;
}
.home-route #onlineBtn strong{
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0;
}
.home-route #onlineBtn .pill{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:600;
  line-height:1;
}
.home-route .tile{
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
  line-height:1.15;
}
.home-route #continueBtn .play-copy strong{
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:700;
  line-height:1.1;
}
.home-route #continueBtn .play-copy small{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:400;
  line-height:1.2;
}
.home-route .info-dot{
  font-family:var(--font-ui);
  font-weight:700;
}

/* --------------------------------------------------------------------------
   OFFLINE · Figma oficial 393
   -------------------------------------------------------------------------- */
.offline-exact .oe-heading h1{
  font-family:var(--font-ui);
  font-size:21px;
  font-weight:700;
  line-height:1.15;
}
.offline-exact .oe-heading p{
  font-family:var(--font-ui);
  font-size:10.5px;
  font-weight:400;
  line-height:1.25;
}
.offline-exact .oe-label{
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:600;
  line-height:1.15;
}
.offline-exact .oe-name{
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
  line-height:1.15;
}
.offline-exact .oe-muted{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:400;
  line-height:1.2;
}
.offline-exact .oe-step button{
  font-family:var(--font-ui);
  font-size:32px;
  font-weight:700;
}
.offline-exact .oe-step .oe-copy span{
  font-family:var(--font-ui);
  font-size:8.5px;
  font-weight:600;
  line-height:1.1;
}
.offline-exact .oe-step .oe-copy strong{
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:600;
  line-height:1.12;
}
.offline-exact .oe-step .oe-copy small{
  font-family:var(--font-ui);
  font-size:8.8px;
  font-weight:400;
  line-height:1.15;
}
.offline-exact .oe-rules strong{
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
}
.offline-exact .oe-sub{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:400;
}
.offline-exact .oe-count{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
}
.offline-exact .oe-summary>small:first-child{
  font-family:var(--font-ui);
  font-size:8.3px;
  font-weight:600;
}
.offline-exact .oe-summary>strong{
  font-family:var(--font-ui);
  font-size:12.2px;
  font-weight:600;
}
.offline-exact .oe-badge{
  font-family:var(--font-ui);
  font-size:8.5px;
  font-weight:500;
}
.offline-exact .oe-summary small{
  font-family:var(--font-ui);
  font-size:8.5px;
  font-weight:400;
}
.offline-exact .oe-start{
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
  letter-spacing:1.05px;
}
.offline-exact .oe-note{
  font-family:var(--font-ui);
  font-size:8.5px;
  font-weight:400;
}
.offline-exact .oe-guide strong{
  font-family:var(--font-ui);
  font-size:9.5px;
  font-weight:600;
}
.offline-exact .oe-guide p{
  font-family:var(--font-ui);
  font-size:9.1px;
  font-weight:400;
  line-height:14px;
}

/* --------------------------------------------------------------------------
   CABECERAS DE RUTAS · Perfil / Logros / Monedas / Personalizar
   -------------------------------------------------------------------------- */
.route-heading h1{
  font-family:var(--font-ui);
  font-size:19px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0;
}
.route-head p,
.route-heading p{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:400;
  line-height:1.25;
}
.r-label{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0;
}
.r-muted{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:400;
  line-height:1.45;
}

/* --------------------------------------------------------------------------
   PERFIL · Figma oficial 393
   -------------------------------------------------------------------------- */
.route-profile .profile-details h2{
  font-family:var(--font-ui);
  font-size:21px;
  font-weight:700;
  line-height:1.15;
}
.route-profile .profile-handle{
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:400;
}
.route-profile .profile-pills span{
  font-family:var(--font-ui);
  font-size:10.5px;
  font-weight:500;
  line-height:1;
}
.route-profile .profile-level-line{
  font-family:var(--font-ui);
  font-size:12px;
  line-height:1.15;
}
.route-profile .profile-level-line strong{
  font-weight:600;
}
.route-profile .profile-level-line .r-muted{
  font-size:11px;
  font-weight:400;
}
.route-profile .profile-currency strong{
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:700;
}
.route-profile .profile-currency span{
  font-family:var(--font-ui);
  font-size:7.8px;
  font-weight:500;
}
.route-profile .stats-panel h2{
  font-family:var(--font-ui);
  font-size:21px;
  font-weight:500;
  line-height:1.15;
}
.route-profile .stats-panel>p{
  font-family:var(--font-ui);
  font-size:9.8px;
  font-weight:400;
}
.route-profile .stat strong{
  font-family:var(--font-ui);
  font-size:18px;
  font-weight:600;
  line-height:1.1;
}
.route-profile .stat span:last-child{
  font-family:var(--font-ui);
  font-size:9.2px;
  font-weight:400;
  line-height:12px;
}
.profile-achievements-head h2{
  font-family:var(--font-ui);
  font-size:19px;
  font-weight:500;
  line-height:1.15;
}
.profile-achievements-head button{
  font-family:var(--font-ui);
  font-size:9.5px;
  font-weight:600;
}
.profile-achievement strong{
  font-family:var(--font-ui);
  font-size:10.5px;
  font-weight:600;
}
.profile-achievement small{
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:400;
  line-height:12px;
}
.profile-online-card h2{
  font-family:var(--font-ui);
  font-size:21px;
  font-weight:500;
}
.profile-online-head>span:last-child{
  font-family:var(--font-ui);
  font-size:9.5px;
  font-weight:600;
}
.profile-online-shield{
  font-family:var(--font-ui);
  font-size:20px;
  font-weight:600;
}
.profile-online-copy p{
  font-family:var(--font-ui);
  font-size:10.5px;
  font-weight:400;
  line-height:15px;
}
.profile-footnote{
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:400;
}

/* --------------------------------------------------------------------------
   LOGROS · misma jerarquía del Perfil
   -------------------------------------------------------------------------- */
.route-achievements .achievements-summary h2{
  font-family:var(--font-ui);
  font-size:19px;
  font-weight:500;
}
.route-achievements .achievements-summary p{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:400;
}
.route-achievements .achievements-count{
  font-family:var(--font-ui);
  font-weight:700;
}
.route-achievements .achievement-row-title strong{
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
}
.route-achievements .achievement-row-title span{
  font-family:var(--font-ui);
  font-size:8px;
  font-weight:600;
}
.route-achievements .achievement-row-copy p{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:400;
  line-height:1.4;
}
.route-achievements .achievement-row-copy>small{
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:400;
}

/* --------------------------------------------------------------------------
   MONEDAS · jerarquía equivalente al resto de rutas
   -------------------------------------------------------------------------- */
.route-coins .coins-hero h2{
  font-family:var(--font-ui);
  font-size:21px;
  font-weight:700;
  line-height:1.15;
}
.route-coins .coins-badge strong{
  font-family:var(--font-ui);
  font-size:18px;
  font-weight:700;
}
.route-coins .coins-usage-list strong{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
}
.route-coins .coins-usage-list p{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:400;
  line-height:1.45;
}
.route-coins .coins-stat strong{
  font-family:var(--font-ui);
  font-size:18px;
  font-weight:600;
}
.route-coins .coins-stat span{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:400;
}
.route-coins .coins-transactions h2{
  font-family:var(--font-ui);
  font-size:19px;
  font-weight:500;
}
.route-coins .coins-tx strong{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
}
.route-coins .coins-tx span{
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:700;
}
.route-coins .coins-tx small{
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:400;
}

/* --------------------------------------------------------------------------
   PERSONALIZAR · Figma oficial 393
   -------------------------------------------------------------------------- */
.route-personal .cos-wallet strong{
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:700;
}
.route-personal .cos-equipped .r-label{
  font-size:9.5px;
  font-weight:600;
}
.route-personal .cos-equipped-text>strong{
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:700;
  line-height:1.15;
}
.route-personal .cos-equipped-text small{
  font-family:var(--font-ui);
  font-size:10.5px;
  font-weight:400;
}
.route-personal .cos-equipped-text span{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:500;
}
.route-personal .cos-tabs button{
  font-family:var(--font-ui);
  font-size:10.5px;
  font-weight:600;
}
.route-personal .cos-section-head h2{
  font-family:var(--font-ui);
  font-size:19px;
  font-weight:700;
  line-height:1.15;
}
.route-personal .cos-section-head p{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:400;
}
.route-personal .cos-card>strong{
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}
.route-personal .cos-economy{
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:400;
}
.route-personal .cos-card-action{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
}

/* En pantallas pequeñas mantenemos jerarquía, sin reducir a microtexto ilegible. */
@media(max-width:340px){
  .home-route #offlineBtn .play-copy strong{font-size:20px}
  .home-route #onlineBtn strong{font-size:15px}
  .route-profile .profile-details h2{font-size:19px}
  .route-profile .profile-pills span{font-size:9.5px}
  .offline-exact .oe-heading h1{font-size:19px}
}


/* ==========================================================================
   DESMOCHE 111BB · TUTORIAL + MÁS
   Tutorial visual basado en Figma oficial 347:46868.
   ========================================================================== */

.route-tutorial{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:12px;
  padding-bottom:20px;
}
.tutorial-panel{
  width:100%;
  max-width:361px;
  padding:16px;
  border:1px solid #35624f;
  border-radius:22px;
  background:#163c30;
}
.tutorial-select-head h1{
  margin:0;
  font-family:var(--font-ui);
  font-size:18px;
  font-weight:700;
  line-height:1.15;
  color:#f5f2e8;
}
.tutorial-select-head p{
  margin:7px 0 0;
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:400;
  color:#a4bcb1;
}
.tutorial-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:22px;
}
.tutorial-lesson{
  width:100%;
  min-height:64px;
  padding:8px 10px;
  border:1px solid #35634f;
  border-radius:16px;
  background:#173f32;
  color:#f5f2e8;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 20px;
  align-items:center;
  gap:8px;
  text-align:left;
}
.tutorial-number{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#69d9ad;
  color:#083127;
  display:grid;
  place-items:center;
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:700;
}
.tutorial-lesson-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.tutorial-lesson-copy strong{
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}
.tutorial-lesson-copy small{
  font-family:var(--font-ui);
  font-size:8.5px;
  font-weight:400;
  line-height:1.2;
  color:#9fb5aa;
}
.tutorial-chevron{
  color:#9ab5a7;
  font-size:28px;
  line-height:1;
  text-align:center;
}
.tutorial-back{
  width:100%;
  height:44px;
  margin-top:20px;
  border:1px solid #35634f;
  border-radius:14px;
  background:#173f32;
  color:#f5f2e8;
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
}
.tutorial-detail-card{
  padding:17px;
}
.tutorial-detail-title{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:13px;
  align-items:center;
}
.tutorial-number-large{
  width:50px;
  height:50px;
  font-size:19px;
}
.tutorial-detail-title h2{
  margin:0;
  font-family:var(--font-ui);
  font-size:19px;
  font-weight:600;
  color:#f5f2e8;
}
.tutorial-detail-title p{
  margin:5px 0 0;
  font-family:var(--font-ui);
  font-size:10px;
  line-height:1.4;
  color:#9fb5aa;
}
.tutorial-steps{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}
.tutorial-step{
  min-height:80px;
  padding:12px;
  border:1px solid #2e5e49;
  border-radius:16px;
  background:#0b3428;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:11px;
  align-items:start;
}
.tutorial-step>span{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#153f31;
  color:#73ddb3;
  display:grid;
  place-items:center;
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
}
.tutorial-step strong{
  display:block;
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  color:#f5f2e8;
}
.tutorial-step p{
  margin:5px 0 0;
  font-family:var(--font-ui);
  font-size:9.5px;
  line-height:1.45;
  color:#9fb5aa;
}
.tutorial-tip{
  margin-top:14px;
  padding:12px 13px;
  border:1px solid rgba(201,164,65,.35);
  border-radius:15px;
  background:rgba(201,164,65,.07);
}
.tutorial-tip strong{
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:700;
  color:#e4c46d;
}
.tutorial-tip p{
  margin:4px 0 0;
  font-family:var(--font-ui);
  font-size:9.5px;
  line-height:1.45;
  color:#c7d5ce;
}
.tutorial-detail-nav{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  margin-top:10px;
}
.tutorial-detail-nav button{
  min-height:42px;
  border:1px solid #315f4b;
  border-radius:13px;
  background:#0b3428;
  color:#f5f2e8;
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:700;
}
.tutorial-detail-nav button:disabled{
  opacity:.32;
  cursor:default;
}

.route-more{
  padding-bottom:24px;
}
.more-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.more-row{
  width:100%;
  min-height:78px;
  padding:12px 13px;
  border:1px solid #2f604b;
  border-radius:18px;
  background:#0b3428;
  color:#f5f2e8;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 24px;
  gap:12px;
  align-items:center;
  text-align:left;
}
.more-icon{
  width:44px;
  height:44px;
  border:1px solid #35654f;
  border-radius:14px;
  background:#103d2f;
  display:grid;
  place-items:center;
}
.more-icon img{
  width:22px;
  height:22px;
  object-fit:contain;
}
.more-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.more-copy strong{
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
}
.more-copy small{
  font-family:var(--font-ui);
  font-size:9.5px;
  font-weight:400;
  line-height:1.35;
  color:#9fb5aa;
}
.more-next{
  color:#86aa99;
  font-size:28px;
  line-height:1;
}
.more-about-card{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:24px 18px;
}
.more-about-spade{
  width:58px;
  height:58px;
  margin:0 auto 12px;
  border:1px solid #3c6a54;
  border-radius:18px;
  background:#103b2e;
  color:#73ddb3;
  display:grid;
  place-items:center;
  font-size:30px;
}
.more-about-card h2{
  margin:0;
  font-family:var(--font-ui);
  font-size:21px;
  font-weight:700;
}
.more-about-card>p{
  max-width:290px;
  margin:10px auto 18px;
  font-family:var(--font-ui);
  font-size:10.5px;
  line-height:1.5;
  color:#a6bbb1;
}
.more-status{
  display:grid;
  gap:10px;
  text-align:left;
}
.more-status>div{
  padding:12px 13px;
  border:1px solid #2e5d49;
  border-radius:15px;
  background:#0b3428;
}
.more-status span{
  display:block;
  margin-bottom:4px;
  font-family:var(--font-ui);
  font-size:8px;
  font-weight:700;
  color:#73ddb3;
}
.more-status strong{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:500;
  line-height:1.4;
  color:#f5f2e8;
}
.more-about-card>small{
  display:block;
  margin-top:18px;
  font-family:var(--font-ui);
  font-size:9px;
  color:#809a8e;
}

@media(max-width:340px){
  .tutorial-panel{padding:13px}
  .tutorial-list{gap:7px}
  .tutorial-lesson{grid-template-columns:38px minmax(0,1fr) 18px;padding-inline:8px}
  .tutorial-number{width:34px;height:34px;font-size:14px}
  .tutorial-lesson-copy strong{font-size:12px}
  .tutorial-lesson-copy small{font-size:8px}
  .more-row{grid-template-columns:42px minmax(0,1fr) 20px;padding-inline:10px}
  .more-icon{width:40px;height:40px}
}


/* ==========================================================================
   DESMOCHE 111BC · MÁS = CÓMO JUGAR + HISTORIAL
   Contenido recuperado de DESMOCHE_ANDROID_PREP_02B.
   ========================================================================== */
.more-icon-text{
  color:#73ddb3;
  font-family:var(--font-ui);
  font-size:19px;
  font-weight:700;
}

/* Cómo jugar */
.route-howto{
  padding-bottom:24px;
}
.how-topics{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.how-topic{
  overflow:hidden;
  border:1px solid #315f4b;
  border-radius:17px;
  background:#0b3428;
}
.how-topic summary{
  min-height:58px;
  padding:9px 12px;
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 22px;
  gap:10px;
  align-items:center;
}
.how-topic summary::-webkit-details-marker{display:none}
.how-topic-icon{
  width:36px;
  height:36px;
  border:1px solid #3b7159;
  border-radius:12px;
  background:#123f31;
  color:#73ddb3;
  display:grid;
  place-items:center;
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:700;
}
.how-topic summary strong{
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
  color:#f5f2e8;
}
.how-topic-arrow{
  color:#93ad9f;
  font-size:19px;
  transition:transform .15s ease;
}
.how-topic[open] .how-topic-arrow{transform:rotate(180deg)}
.how-topic-body{
  padding:0 12px 13px 60px;
  border-top:1px solid rgba(113,221,179,.08);
}
.how-rule{
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding-top:11px;
}
.how-rule>b{
  width:26px;
  height:26px;
  border-radius:9px;
  background:#123e30;
  color:#73ddb3;
  display:grid;
  place-items:center;
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:700;
}
.how-rule span,
.how-intro,
.how-note,
.how-special span{
  font-family:var(--font-ui);
  font-size:9.7px;
  font-weight:400;
  line-height:1.48;
  color:#a8bcb2;
}
.how-rule span strong{color:#edf4ef}
.how-suits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding-top:12px;
}
.how-suits>span{
  min-height:72px;
  border:1px solid #2d5b47;
  border-radius:14px;
  background:#0f3a2d;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:0 8px;
  align-content:center;
  padding:8px 10px;
}
.how-suits b{
  grid-row:1 / span 2;
  font-family:Georgia,serif;
  font-size:25px;
  align-self:center;
}
.how-suits b.red{color:#d44d55}
.how-suits b.black{color:#e8eee9}
.how-suits strong{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:600;
  color:#f5f2e8;
}
.how-suits small{
  margin-top:2px;
  font-family:var(--font-ui);
  font-size:8.5px;
  color:#8ea79a;
}
.how-intro{margin:11px 0 2px}
.how-special{
  padding:11px 0;
  border-bottom:1px solid rgba(113,221,179,.08);
}
.how-special strong{
  display:block;
  margin-bottom:5px;
  font-family:var(--font-ui);
  font-size:10.5px;
  font-weight:600;
  color:#f5f2e8;
}
.how-note{
  margin:11px 0 0;
  color:#d8c27a;
}

/* Historial */
.route-history{
  padding-bottom:24px;
}
.history-panel{
  padding:14px;
}
.history-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
}
.history-title-row button{
  min-height:30px;
  padding:0 9px;
  border:1px solid #37654f;
  border-radius:12px;
  background:#103b2e;
  color:#9ee4c5;
  font-family:var(--font-ui);
  font-size:8px;
  font-weight:600;
}
.history-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.history-match{
  overflow:hidden;
  border:1px solid #2e5d49;
  border-radius:16px;
  background:#0b3428;
}
.history-match>summary{
  min-height:63px;
  padding:10px 12px;
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.history-match>summary::-webkit-details-marker{display:none}
.history-match>summary>span{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.history-match>summary strong{
  font-family:var(--font-ui);
  font-size:11.5px;
  font-weight:600;
  color:#f5f2e8;
}
.history-match>summary small{
  font-family:var(--font-ui);
  font-size:8.5px;
  line-height:1.25;
  color:#90a99c;
}
.history-match>summary>b{
  max-width:110px;
  padding:4px 7px;
  border:1px solid #3e7058;
  border-radius:999px;
  color:#83dab6;
  font-family:var(--font-ui);
  font-size:7.5px;
  font-weight:600;
  text-align:center;
}
.history-match-body{
  padding:0 11px 11px;
  border-top:1px solid rgba(113,221,179,.08);
}
.history-meta{
  display:grid;
  gap:3px;
  padding:10px 2px;
}
.history-meta span{
  font-family:var(--font-ui);
  font-size:8.5px;
  color:#91a99d;
}
.history-round{
  margin-top:8px;
  padding:10px 11px;
  border:1px solid #2b5945;
  border-radius:13px;
  background:#103a2d;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.history-round strong{
  font-family:var(--font-ui);
  font-size:8.5px;
  font-weight:700;
  color:#73ddb3;
}
.history-round span{
  font-family:var(--font-ui);
  font-size:9.5px;
  font-weight:500;
  line-height:1.35;
  color:#f5f2e8;
}
.history-round small{
  font-family:var(--font-ui);
  font-size:8px;
  color:#859f92;
}
.history-empty{
  margin:10px 2px 0;
  color:#8da599;
  font-family:var(--font-ui);
  font-size:9px;
}
.history-empty-state{
  min-height:230px;
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.history-empty-state>span{
  width:58px;
  height:58px;
  margin-bottom:13px;
  border:1px solid #37654f;
  border-radius:18px;
  background:#103b2e;
  color:#73ddb3;
  display:grid;
  place-items:center;
  font-size:27px;
}
.history-empty-state strong{
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
  color:#f5f2e8;
}
.history-empty-state p{
  max-width:245px;
  margin:8px 0 0;
  font-family:var(--font-ui);
  font-size:9.5px;
  line-height:1.45;
  color:#93aa9e;
}

@media(max-width:340px){
  .how-topic-body{padding-left:50px}
  .how-suits{grid-template-columns:1fr}
  .history-match>summary>b{max-width:88px}
}

/* DESMOCHE 111CL · Offline V2 aprobada en Figma / solo pantalla offline */
.offline-layout-v2{padding:16px 16px 22px;max-width:393px;margin:0 auto;}
.offline-layout-v2 .oe-panel{padding:16px;background:#0b3a2d;border-radius:23px;}
.offline-layout-v2 .oe-head{height:69px;min-height:69px;}
.offline-layout-v2 .oe-heading{padding-left:55px;}
.offline-layout-v2 .oe-heading h1{font-size:20px;line-height:1.15;}
.offline-layout-v2 .oe-identity{position:relative;left:auto;top:auto;transform:none;width:100%;height:75px;display:flex;align-items:center;text-align:left;padding:10px 12px;margin:3px 0 19px;border-radius:16px;background:#104637;border:1px solid #2f6b55;gap:13px;}
.offline-layout-v2 .oe-portrait{flex:0 0 53px;width:53px;height:53px;margin:0;}
.offline-layout-v2 .oe-identity-copy{display:flex;flex-direction:column;min-width:0;}
.offline-layout-v2 .oe-identity .oe-label{margin:0 0 3px;font-size:8px;}
.offline-layout-v2 .oe-identity .oe-name{margin:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.offline-layout-v2 .oe-identity .oe-muted{margin:3px 0 0;font-size:10px;}
.offline-layout-v2 .oe-section-title{font-size:10px;letter-spacing:.08em;color:#8dccaf;margin:0 0 9px;font-weight:800;}
.offline-layout-v2 .oe-step{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:88px;padding:11px 10px 11px 14px;margin:0 0 10px;border:1px solid #2a755d;border-radius:16px;background:#124a39;overflow:visible;}
.offline-layout-v2 .oe-step .oe-copy{display:flex;flex:1;min-width:0;align-items:flex-start;text-align:left;gap:4px;}
.offline-layout-v2 .oe-step .oe-copy span{font-size:9px;line-height:1.2;font-weight:700;}
.offline-layout-v2 .oe-step .oe-copy strong{font-size:17px;line-height:1.2;word-break:normal;}
.offline-layout-v2 .oe-step .oe-copy small{font-size:9px;line-height:1.3;}
.offline-layout-v2 .oe-arrows{display:flex;gap:5px;flex:0 0 auto;}
.offline-layout-v2 .oe-arrows button{border:1px solid rgba(126,226,180,.15);border-radius:10px;background:#1b5d49;color:#82e8ba;width:32px;height:48px;min-height:44px;font-size:26px;font-weight:700;cursor:pointer;}
.offline-layout-v2 .oe-arrows button:active{background:#29745a;}
.offline-layout-v2 .oe-step-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;margin-bottom:11px;}
.offline-layout-v2 .oe-step-grid .oe-step{display:flex;flex-direction:column;align-items:stretch;min-height:125px;margin:0;padding:12px 10px 9px;}
.offline-layout-v2 .oe-step-grid .oe-copy strong{font-size:14px;line-height:1.1;}
.offline-layout-v2 .oe-step-grid .oe-copy small{font-size:8px;line-height:1.25;}
.offline-layout-v2 .oe-step-grid .oe-arrows{width:100%;gap:6px;margin-top:6px;}
.offline-layout-v2 .oe-step-grid .oe-arrows button{flex:1;width:auto;height:30px;min-height:30px;font-size:23px;line-height:24px;}
.offline-layout-v2 .oe-rules{margin-top:0;border-radius:15px;}
.offline-layout-v2 .oe-rules summary{min-height:71px;align-items:center;}
.offline-layout-v2 .oe-rules strong{font-size:13px;}
.offline-layout-v2 .oe-rules .oe-sub{font-size:9px;line-height:1.35;}
.offline-layout-v2 .oe-rules .oe-count{display:flex;align-items:center;gap:6px;}
.offline-layout-v2 .oe-rules .oe-count span{font-size:17px;transition:transform .15s;}
.offline-layout-v2 .oe-rules[open] .oe-count span{transform:rotate(180deg);}
.offline-layout-v2 .oe-summary{margin-top:13px;padding:10px 13px;border-radius:13px;}
.offline-layout-v2 .oe-summary small{font-size:9px;}
.offline-layout-v2 .oe-summary strong{font-size:11px;margin-top:5px;}
.offline-layout-v2 .oe-summary-rules{display:block;margin-top:5px;color:#9fb7ad;font-size:9px;}
.offline-layout-v2 .oe-start{margin-top:13px;height:56px;}
.offline-layout-v2 .oe-note{margin:10px 0 2px;}
@media(max-width:350px){.offline-layout-v2{padding:10px}.offline-layout-v2 .oe-panel{padding:12px}.offline-layout-v2 .oe-heading h1{font-size:17px}.offline-layout-v2 .oe-step-grid{gap:6px}.offline-layout-v2 .oe-step-grid .oe-step{padding:10px 8px}.offline-layout-v2 .oe-step-grid .oe-copy strong{font-size:12px}.offline-layout-v2 .oe-step-grid .oe-copy small{font-size:7.5px}}

/* DESMOCHE 111CY: modo online deshabilitado en beta offline. */
#onlineBtn{opacity:.56;cursor:not-allowed;filter:saturate(.55)}
#onlineBtn .pill{white-space:nowrap}

/* DESMOCHE 111DP · HOME: avatar a la derecha del nombre.
   Solo cambia el orden visual dentro del boton de perfil.
   Conserva monedas, ajustes, dimensiones y todas las demas pantallas. */
body.home-route #profileBtn {
  display: flex;
  align-items: center;
}
body.home-route #profileBtn .profile-info {
  order: 1;
  min-width: 0;
}
body.home-route #profileBtn .avatar-halo {
  order: 2;
  flex-shrink: 0;
}


/* DESMOCHE 111DQ — HOME: marco y avatar alineados.
   Correccion local del encabezado; no afecta perfil completo, mesa ni motor. */
body.home-route #profileBtn #homeCosmeticAvatar {
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  position:relative!important;
  margin-left:auto;
}
body.home-route #profileBtn #homeCosmeticAvatar .avatar-frame-img {
  width:40px!important;
  height:40px!important;
  inset:0!important;
  object-fit:contain!important;
}
body.home-route #profileBtn #homeCosmeticAvatar .avatar-art-slot {
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:20px!important;
  height:20px!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  overflow:hidden!important;
}
body.home-route #profileBtn #homeCosmeticAvatar .avatar-art-img {
  display:block!important;
  width:19px!important;
  height:19px!important;
  object-fit:contain!important;
}