/* Vistas HTML5 de Inicio, Perfil y Resultado. Canvas permanece intacto para la mesa. */
body.html-scene { overflow: hidden; }
body.html-scene #app { opacity: 0; pointer-events: none; }
#htmlScenes { position: fixed; inset: 0; z-index: 10; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; color: #fff0c8; background: #071719; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
#htmlScenes[hidden] { display: none !important; }
#htmlScenes *, #htmlScenes *::before, #htmlScenes *::after { box-sizing: border-box; }
#htmlScenes button { -webkit-tap-highlight-color: transparent; }
#htmlScenes button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
#htmlScenes .html-page { position: relative; isolation: isolate; width: min(100%, 720px); min-height: 100dvh; margin: 0 auto; padding: max(16px,env(safe-area-inset-top)) clamp(14px,4vw,28px) max(22px,env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; overflow: visible; animation: html-scene-enter .3s ease both; }
#htmlScenes .html-page::before { content: ""; position: fixed; z-index: -2; inset: 0; background: center / cover no-repeat url("/assets/Entrada%20de%20Casino%20Dorado%20con%20Espadas.jpg"); }
#htmlScenes .html-page::after { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(4,20,22,.22),rgba(4,18,20,.34) 46%,rgba(4,14,18,.55)); }
#htmlScenes .html-topbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #d2aa58; border-radius: 18px; background: rgba(3,39,36,.88); box-shadow: 0 8px 24px #0006,inset 0 0 0 2px #f5d77b1c; }
#htmlScenes .currency-indicator { width: min(100%,460px); align-self: center; min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 4px; border: 1px solid #d39b38; border-radius: 22px; background: linear-gradient(135deg,rgba(2,13,19,.94),rgba(21,26,39,.96)); box-shadow: 0 5px 16px #0008,inset 0 1px #fff3c822; }
#htmlScenes .currency-pill { position: relative; min-width: 0; height: 56px; display: flex; align-items: center; gap: 6px; padding: 4px 5px; border: 1px solid #d0a450; border-radius: 999px; background: linear-gradient(180deg,#17222a,#080f16 52%,#18222a); box-shadow: inset 0 1px 0 #fff5cf30,0 2px 4px #0008; }
#htmlScenes .currency-pill::before { content:""; position:absolute; inset:2px; border:1px solid rgba(255,221,142,.24); border-radius:inherit; pointer-events:none; }
#htmlScenes .currency-pill.gems { border-color:#bd7bdc; background:linear-gradient(180deg,#261d35,#120e1d 55%,#24192e); }
#htmlScenes .currency-icon { width: clamp(30px,8vw,43px); height: clamp(30px,8vw,43px); flex: 0 0 clamp(30px,8vw,43px); object-fit:contain; filter:drop-shadow(0 2px 3px #000b); }
#htmlScenes .currency-copy { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; line-height:1.03; }
#htmlScenes .currency-copy strong { color:#f7e9cf; font-size:clamp(9px,2.4vw,12px); letter-spacing:.035em; }
#htmlScenes .currency-copy b { margin-top:3px; color:#ffe35e; font-size:clamp(15px,4.3vw,21px); font-weight:900; text-shadow:0 1px 4px #e99b2855; font-variant-numeric:tabular-nums; }
#htmlScenes .gems .currency-copy b { color:#f0c4ff; text-shadow:0 1px 5px #b13eff8c; }
#htmlScenes .currency-add { z-index:1; width:clamp(30px,8vw,40px); min-width:clamp(30px,8vw,40px)!important; height:clamp(30px,8vw,40px)!important; min-height:clamp(30px,8vw,40px)!important; flex:0 0 clamp(30px,8vw,40px); padding:0!important; display:grid; place-items:center; border:1px solid #ffd571!important; border-radius:50%!important; color:#fff3d0!important; background:linear-gradient(180deg,#e7a944,#a86517)!important; box-shadow:inset 0 1px 0 #fff7c766,0 2px 5px #0009; font-size:24px!important; font-weight:800; line-height:1!important; }
#htmlScenes .gems .currency-add { border-color:#e1a8ff!important; background:linear-gradient(180deg,#b342dc,#641697)!important; }
#htmlScenes .currency-add:active { transform:scale(.94); }
#htmlScenes .home-page:has(.gift-button) .currency-indicator { width:calc(100% - 76px); align-self:flex-start; }
#htmlScenes .gem-info-dialog { position:fixed; z-index:42; inset:0; display:grid; place-items:center; padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom)); background:#020a0edb; backdrop-filter:blur(7px); }
#htmlScenes .gem-info-card { width:min(360px,100%); padding:22px; display:grid; justify-items:center; gap:12px; text-align:center; }
#htmlScenes .gem-info-icon { width:82px; height:82px; object-fit:contain; filter:drop-shadow(0 5px 14px #a433ef88); }
#htmlScenes .gem-info-card .subcopy { margin:0; }
#htmlScenes .gem-info-card .html-button { width:100%; }
#htmlScenes .brand-lockup { min-width: 0; display: flex; align-items: center; gap: 10px; }
#htmlScenes .brand-lockup img { width: clamp(48px,13vw,72px); height: clamp(48px,13vw,72px); object-fit: contain; flex: 0 0 auto; }
#htmlScenes .brand-lockup strong { display: block; color: #ffdc8d; font: 800 clamp(19px,5vw,28px)/1 Georgia,serif; letter-spacing: .045em; }
#htmlScenes .brand-lockup small { display: block; margin-top: 4px; color: #d7c18c; font-size: 9px; letter-spacing: .13em; }
#htmlScenes .html-pill { max-width: 48%; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #e3bd69; border-radius: 999px; color: #261e0c !important; background: linear-gradient(#ffe6a0,#c3923c); box-shadow: 0 3px 10px #0005; font-size: 11px !important; font-weight: 850 !important; line-height: 1.2; }
#htmlScenes .sound-toggle { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #efcf7e; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#438b77,#082a31 74%); box-shadow: 0 0 0 3px #f2d68b22,0 4px 10px #0007; font-size: 19px; }
#htmlScenes .html-card { min-width: 0; border: 1px solid #c7a459; border-radius: 20px; background: linear-gradient(145deg,rgba(4,54,46,.95),rgba(4,31,34,.95)); box-shadow: 0 8px 0 #071b19a8,0 14px 30px #0005,inset 0 0 0 3px #f4d77a12; }
#htmlScenes .html-button { min-width: 0; min-height: 50px; padding: 11px 16px; border: 2px solid #efd080; border-radius: 16px; color: #fff4d1; background: linear-gradient(180deg,#25a77d,#07523f 75%,#043c36); box-shadow: inset 0 0 0 2px #fff3c128,0 4px 0 #031d19,0 7px 18px #0005; font-weight: 850; letter-spacing: .035em; text-align: center; white-space: normal; overflow-wrap: anywhere; transition: transform .16s ease,filter .16s ease,box-shadow .16s ease; }
#htmlScenes .html-button:active { transform: translateY(2px); filter: brightness(1.12); box-shadow: inset 0 0 0 2px #fff3c128,0 2px 0 #031d19; }
#htmlScenes .html-button.gold { color: #211a0d; background: linear-gradient(#ffe298,#b27d2a); }
#htmlScenes .html-button.blue { background: linear-gradient(#8ec7dc,#225d78); }
#htmlScenes .html-button.secondary { background: linear-gradient(#49645e,#1b3735); }
#htmlScenes .html-button.icon { min-height: 42px; width: 42px; padding: 0; border-radius: 50%; font-size: 18px; }
#htmlScenes .section-title { margin: 0; color: #ffdc8d; font-size: clamp(18px,4.7vw,25px); line-height: 1.2; letter-spacing: .035em; }
#htmlScenes .subcopy { margin: 5px 0 0; color: #d5e0d0; font-size: 13px; }
#htmlScenes .home-layout { flex: 1; display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); align-items: center; gap: 8px; min-height: min(76dvh,720px); }
#htmlScenes .home-actions { position: relative; z-index: 2; display: grid; gap: 13px; align-content: center; min-width: 0; }
#htmlScenes .home-actions .html-button { min-height: 64px; padding-left: 62px; position: relative; text-align: center; font-size: clamp(14px,3.4vw,18px); }
#htmlScenes .home-actions .html-button::before { content: attr(data-icon); position: absolute; left: -4px; top: 50%; width: 58px; height: 58px; transform: translateY(-50%); display: grid; place-items: center; border: 3px solid #f8d77e; border-radius: 50%; color: #ffe39a; background: radial-gradient(circle at 30% 25%,#39755e,#082b2d 70%); box-shadow: 0 0 0 4px #0a2c29,0 4px 12px #0008; font-size: 25px; }
#htmlScenes .home-mascot { align-self: end; justify-self: center; width: min(100%,390px); height: min(70dvh,690px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 18px #0008); animation: html-mascot-enter .65s ease both; }
#htmlScenes .home-foot { display: flex; justify-content: center; }
#htmlScenes .install-card { padding: 12px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid #d4ae60; border-radius: 16px; background: #062c27eF; }
#htmlScenes .install-card p { flex: 1; margin: 0; color: #e4dfc8; font-size: 12px; }
#htmlScenes .profile-layout { display: grid; gap: 13px; }
#htmlScenes .profile-hero { padding: 18px; display: grid; grid-template-columns: minmax(56px,1fr) minmax(84px,1.2fr) minmax(56px,1fr); align-items: center; gap: 10px; text-align: center; }
#htmlScenes .flag { justify-self: center; display: block; width: 56px; height: auto; aspect-ratio: 3/2; object-fit: cover; border: 2px solid #e6c879; border-radius: 8px; background: #062522; box-shadow: 0 3px 10px #0005; }
#htmlScenes .player-avatar { display: block; width: clamp(74px,20vw,108px); aspect-ratio: 1; margin: 0 auto 5px; object-fit: cover; border: 4px solid #e3c56f; border-radius: 50%; box-shadow: 0 0 0 4px #183e3c,0 0 0 6px #f3d88966; }
#htmlScenes .profile-name { margin: 0; color: #fff3cf; font-size: 17px; font-weight: 850; overflow-wrap: anywhere; }
#htmlScenes .rank-emblem { justify-self: center; width: clamp(64px,18vw,100px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 5px 10px #0008); }
#htmlScenes .profile-buttons { grid-column: 1/-1; display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
#htmlScenes .profile-buttons .html-button { flex: 1 1 150px; max-width: 230px; min-height: 44px; font-size: 12px; }
#htmlScenes .rank-panel,#htmlScenes .xp-panel,#htmlScenes .history-panel { padding: 16px; }
#htmlScenes .rank-wallets { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
#htmlScenes .rank-wallets > :only-child { grid-column: 1 / -1; }
#htmlScenes .wallet-mini { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid #c5a75f88; border-radius: 13px; background: #062c27; }
#htmlScenes .wallet-mini strong { display: block; color: #ffe2a0; font-size: 11px; }
#htmlScenes .wallet-mini b { display: block; margin-top: 2px; font-size: 20px; line-height: 1.05; overflow-wrap: anywhere; }
#htmlScenes .wallet-mini small { color: #b9cbbc; font-size: 9px; }
#htmlScenes .wallet-icon { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; }
#htmlScenes .coin-icon { width: 33px; height: 33px; flex: 0 0 33px; display: grid; place-items: center; border: 2px solid #c4a967; border-radius: 50%; color: #4f411f; background: linear-gradient(145deg,#e6d39a,#aa8745); box-shadow: inset 0 0 0 2px #fff4cc55; font-size: 17px; font-weight: 900; }
#htmlScenes .xp-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; color: #f4d58b; font-weight: 800; }
#htmlScenes .xp-track { height: 14px; margin: 10px 0 6px; padding: 2px; border: 1px solid #a88a4f; border-radius: 999px; background: #041b1a; }
#htmlScenes .xp-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#b9852f,#ffe39a); box-shadow: 0 0 10px #f5cd6b66; }
#htmlScenes .xp-caption { margin: 0; text-align: center; color: #d3ddce; font-size: 11px; }
#htmlScenes .stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
#htmlScenes .stat-card { padding: 12px 6px; text-align: center; }
#htmlScenes .stat-card small { display: block; color: #e4cc90; font-size: 10px; font-weight: 800; }
#htmlScenes .stat-card strong { display: block; margin-top: 4px; color: #fff2cb; font-size: 25px; }
#htmlScenes .history-panel h2 { margin: 0 0 8px; color: #f2d48a; font-size: 13px; }
#htmlScenes .history-panel ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: #e3e5d5; font-size: 12px; }
#htmlScenes .page-bottom { margin-top: auto; display: flex; justify-content: center; }
#htmlScenes .page-bottom .html-button { width: min(100%,420px); }
#htmlScenes .result-page { background: #061315; }
#htmlScenes .result-page::before { background-image: url("/assets/Mesa%20de%20casino%20esmeralda%20de%20lujo.jpg"); }
#htmlScenes .result-page::after { background: rgba(2,10,15,.76); backdrop-filter: blur(3px); }
#htmlScenes .result-card { width: min(100%,600px); margin: auto; padding: clamp(16px,4vw,26px); display: grid; justify-items: center; gap: 13px; }
#htmlScenes .result-card h1 { margin: 0; text-align: center; color: #f4d487; font-size: clamp(20px,5vw,27px); }
#htmlScenes .result-outcome { margin: 0; font-size: clamp(25px,7vw,38px); font-weight: 900; text-align: center; }
#htmlScenes .result-outcome.win { color: #ffe394; text-shadow: 0 0 20px #f3ca6977; }
#htmlScenes .result-outcome.loss { color: #f29b9d; }
#htmlScenes .result-copy,#htmlScenes .result-rewards { margin: 0; text-align: center; color: #e5e0cf; }
#htmlScenes .result-rewards { color: #f3d58d; font-weight: 800; font-size: 13px; }
#htmlScenes .result-groups { width: 100%; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 10px; }
#htmlScenes .winning-group { min-width: 0; padding: 9px; border: 1px solid #c8a75f; border-radius: 13px; background: #06251fe8; overflow: hidden; }
#htmlScenes .winning-group h2 { margin: 0 0 8px; text-align: center; color: #efd38e; font-size: 10px; letter-spacing: .08em; }
#htmlScenes .html-cards { display: flex; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 1px 6px; }
#htmlScenes .html-playing-card { position: relative; flex: 0 0 clamp(42px,13vw,60px); height: clamp(68px,20vw,91px); margin-left: -4px; padding: 5px; border: 1px solid #d2bc94; border-radius: 7px; background: linear-gradient(145deg,#fffefa,#eee3d1); color: #122b2c; box-shadow: 0 2px 4px #0006; font-family: Georgia,serif; font-weight: 800; }
#htmlScenes .html-playing-card:first-child { margin-left: 0; }
#htmlScenes .html-playing-card.red { color: #bb2948; }
#htmlScenes .html-playing-card .suit { position: absolute; right: 5px; bottom: 3px; font-size: 25px; line-height: 1; }
#htmlScenes .result-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
#htmlScenes .result-actions .html-button { flex: 1 1 170px; }
#htmlScenes .rank-dialog { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); background: #020a0ecc; backdrop-filter: blur(7px); }
#htmlScenes .rank-dialog[hidden] { display: none; }
#htmlScenes .rank-dialog-card { width: min(620px,100%); max-height: 100%; overflow: auto; padding: 18px; border: 2px solid #c9a453; border-radius: 20px; background: linear-gradient(145deg,#064037,#061e24); box-shadow: 0 20px 60px #000b; }
#htmlScenes .rank-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#htmlScenes .rank-row { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #b5985577; border-radius: 12px; background: #042c27; }
#htmlScenes .rank-row img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; }
#htmlScenes .rank-row strong { display: block; color: #ffebaf; font-size: 11px; }
#htmlScenes .rank-row small { color: #c5d0c3; font-size: 10px; }
#htmlScenes .rank-order { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border: 1px solid #d7b65e; border-radius: 50%; color: #ffe8a0; font-size: 10px; }
#htmlScenes .install-dialog { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 16px; background: #020a0ecc; backdrop-filter: blur(7px); }
#htmlScenes .install-dialog[hidden] { display: none; }
#htmlScenes .install-dialog-card { width: min(460px,100%); padding: 20px; text-align: center; }
#htmlScenes .install-dialog-card p { color: #d5e0d0; font-size: 13px; }
@keyframes html-mascot-enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes html-scene-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
#htmlScenes .html-page { gap: 12px; }
#htmlScenes .home-layout { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); min-height: min(72dvh,700px); gap: 0; }
#htmlScenes .home-actions { gap: 11px; }
#htmlScenes .home-actions .html-button { min-height: 58px; padding: 9px 7px 9px 48px; font-size: clamp(12px,3.4vw,16px); }
#htmlScenes .home-actions .html-button::before { width: 48px; height: 48px; font-size: 20px; }
#htmlScenes .home-mascot { width: 115%; max-width: none; height: min(65dvh,620px); margin-left: -8%; }
#htmlScenes .profile-hero { padding: 14px 10px; gap: 6px; }
#htmlScenes .flag { width: 44px; }
#htmlScenes .rank-grid { gap: 6px; }
#htmlScenes .rank-dialog-card { padding: 13px; }
}
@media (max-width: 360px) {
#htmlScenes .brand-lockup { gap: 6px; }
#htmlScenes .brand-lockup img { width: 44px; height: 44px; }
#htmlScenes .html-topbar { padding: 8px; gap: 6px; }
#htmlScenes .html-pill { max-width: 46%; padding: 7px 8px; font-size: 9px !important; }
#htmlScenes .profile-hero { grid-template-columns: 42px minmax(74px,1fr) 54px; }
#htmlScenes .rank-emblem { width: 58px; }
#htmlScenes .wallet-mini { padding: 8px 6px; gap: 5px; }
#htmlScenes .wallet-icon { width: 28px; height: 28px; flex-basis: 28px; }
#htmlScenes .currency-indicator { gap: 5px; padding: 3px; }
#htmlScenes .currency-pill { gap: 3px; padding-inline: 3px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { #htmlScenes *,#htmlScenes *::before,#htmlScenes *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
/* Tienda HTML: conserva catálogo y compras del juego, con el acabado visual premium. */
#htmlScenes .shop-page { gap: 14px; }
#htmlScenes .shop-balances { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#htmlScenes .shop-balance { min-width:0; min-height:66px; display:flex; align-items:center; justify-content:center; gap:7px; padding:7px 5px; border:1px solid #c99a42!important; border-radius:18px!important; appearance:none; color:inherit; background:linear-gradient(145deg,rgba(255,255,255,.055),transparent 48%),linear-gradient(145deg,#0b332e,#071d24); box-shadow:var(--ui-shadow-card); }
#htmlScenes .shop-balance.gems { border-color:#aa70ca; background:linear-gradient(145deg,rgba(255,255,255,.05),transparent 45%),linear-gradient(145deg,#291d37,#11101d); }
#htmlScenes .shop-balance.coins { border-color:#a89565; }
#htmlScenes .shop-balance-icon,#htmlScenes .shop-coin-icon { width:clamp(28px,8vw,40px); height:clamp(28px,8vw,40px); flex:0 0 clamp(28px,8vw,40px); object-fit:contain; filter:drop-shadow(0 2px 4px #0009); }
#htmlScenes .shop-coin-icon { display:grid; place-items:center; border:2px solid #c4a967; border-radius:50%; color:#54451f; background:linear-gradient(145deg,#e6d39a,#aa8745); box-shadow:inset 0 0 0 2px #fff4cc55; font-weight:900; }
#htmlScenes .shop-balance-copy { min-width:0; display:grid; gap:1px; }
#htmlScenes .shop-balance-copy small { color:#e6d19a; font-size:9px; font-weight:800; letter-spacing:.035em; }
#htmlScenes .shop-balance-copy strong { overflow:hidden; color:#fff0bd; font-size:clamp(14px,4vw,19px); font-variant-numeric:tabular-nums; text-overflow:ellipsis; }
#htmlScenes .shop-balance.gems .shop-balance-copy strong { color:#efc8ff; }
#htmlScenes .shop-balance-plus { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border:1px solid #f3d989; border-radius:50%; color:#fff2ca; background:linear-gradient(#e6ae4c,#a76a1c); font-size:16px; font-weight:900; line-height:1; }
#htmlScenes .shop-balance.gems .shop-balance-plus { border-color:#e1a8ff; background:linear-gradient(#b342dc,#641697); }
#htmlScenes .shop-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#htmlScenes .shop-tabs .html-button { min-width:0; padding-inline:5px; font-size:clamp(10px,2.8vw,13px)!important; letter-spacing:.015em; }
#htmlScenes .shop-title { margin:2px 0 0; text-align:center; }
#htmlScenes .shop-grid { min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
#htmlScenes .shop-item { min-width:0; min-height:0; padding:11px 9px 10px; display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden; animation:html-card-enter 320ms var(--ui-ease) both; }
#htmlScenes .shop-item-kind { color:#ddc783; font-size:9px; font-weight:800; letter-spacing:.08em; }
#htmlScenes .shop-item-preview { width:min(100%,112px); height:116px; margin:6px 0 8px; display:grid; place-items:center; border:1px solid rgba(232,195,107,.45); border-radius:15px; background:radial-gradient(ellipse at 50% 35%,rgba(40,127,100,.34),transparent 70%),linear-gradient(145deg,rgba(2,23,27,.85),rgba(6,38,35,.72)); box-shadow:inset 0 1px 0 #fff2c51a,0 5px 12px #0003; }
#htmlScenes .shop-item-preview.avatar-preview { width:min(100%,104px); height:140px; margin:7px 0 9px; border:0; border-radius:0; background:transparent; box-shadow:none; }
#htmlScenes .shop-item-image { display:block; width:100%; height:100%; padding:5px; object-fit:contain; filter:drop-shadow(0 3px 5px #0008); transition:transform 220ms var(--ui-ease),filter 220ms ease; }
#htmlScenes .shop-item-preview.avatar-preview .shop-item-image { border-radius:0; padding:0; object-fit:contain; filter:drop-shadow(0 4px 7px #0008); }
#htmlScenes .shop-item-name { width:100%; min-width:0; min-height:2.5em; margin:0; display:grid; place-items:center; color:#fff0c3; font-size:14px; line-height:1.25; overflow-wrap:anywhere; }
#htmlScenes .shop-item-price { margin:3px 0 0; color:#f4d27d; font-size:12px; font-weight:850; }
#htmlScenes .shop-item-status { min-height:15px; margin-top:3px; color:#9fe0bb; font-size:9px; font-weight:800; }
#htmlScenes .shop-item-action { width:100%; margin-top:auto; padding-inline:4px; font-size:clamp(10px,2.8vw,13px)!important; }
#htmlScenes .shop-item-action:disabled { opacity:.72; }
#htmlScenes .shop-note { padding:12px 14px; background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 55%),linear-gradient(145deg,rgba(5,54,48,.88),rgba(3,31,34,.92)); }
#htmlScenes .shop-note p { margin:0; color:#d4e1d4; font-size:11px; line-height:1.5; text-align:center; }
#htmlScenes .shop-note p+p { margin-top:5px; color:#b9cbbd; }
#htmlScenes .shop-notice { position:sticky; bottom:max(10px,env(safe-area-inset-bottom)); z-index:2; margin:0; padding:10px 14px; border:1px solid #e3bf69; border-radius:14px; color:#fff1c4; background:rgba(4,37,34,.96); box-shadow:var(--ui-shadow-card); text-align:center; font-size:12px; }
#htmlScenes .shop-balance:focus-visible { outline:2px solid var(--ui-gold-light); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) { #htmlScenes .shop-item:hover { border-color:rgba(243,165,6,.85); box-shadow:0 12px 28px #0008,inset 0 1px #fff2; } #htmlScenes .shop-item:hover .shop-item-image { transform:scale(1.045); filter:drop-shadow(0 4px 8px #dcae4b55); } #htmlScenes .shop-balance:hover { filter:brightness(1.1); transform:translateY(-1px); } }
@media (min-width:560px) { #htmlScenes .shop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } #htmlScenes .shop-item { padding:13px 12px; } #htmlScenes .shop-item-preview { height:132px; } }
@media (max-width:360px) { #htmlScenes .shop-balances { gap:5px; } #htmlScenes .shop-balance { gap:4px; padding-inline:3px; border-radius:14px; } #htmlScenes .shop-balance-icon,#htmlScenes .shop-coin-icon { width:27px; height:27px; flex-basis:27px; } #htmlScenes .shop-balance-copy small { font-size:8px; } #htmlScenes .shop-grid { gap:8px; } #htmlScenes .shop-item-preview { height:100px; } }
/* Controles del encabezado: iconos nítidos y botones metálicos discretos. */
#htmlScenes .html-topbar .sound-toggle { position:relative; width:46px!important; min-width:46px!important; height:46px!important; min-height:46px!important; flex:0 0 46px; padding:0!important; display:grid; place-items:center; border:1px solid #e6bd5d!important; border-radius:50%!important; color:#ffedbd!important; background:radial-gradient(circle at 32% 25%,#286956,#0b342f 58%,#071d25)!important; box-shadow:inset 0 1px 0 #fff5c844,0 0 0 3px #061d1b,0 4px 10px #0008; transition:transform 160ms ease,filter 160ms ease,box-shadow 160ms ease; }
#htmlScenes .html-topbar .sound-toggle::after { content:""; position:absolute; inset:3px; border:1px solid rgba(255,222,144,.3); border-radius:50%; pointer-events:none; }
#htmlScenes .header-button-icon { position:relative; display:block; width:22px; height:22px; }
#htmlScenes .home-mark::before { content:""; position:absolute; width:12px; height:12px; top:3px; left:5px; border-top:2px solid #ffedbd; border-left:2px solid #ffedbd; transform:rotate(45deg); }
#htmlScenes .home-mark::after { content:""; position:absolute; width:13px; height:10px; left:4px; bottom:2px; border:2px solid #ffedbd; border-top:0; border-radius:1px; }
#htmlScenes .sound-mark::before { content:""; position:absolute; left:1px; top:6px; width:13px; height:11px; background:#ffedbd; clip-path:polygon(0 28%,38% 28%,100% 0,100% 100%,38% 72%,0 72%); }
#htmlScenes .sound-mark::after { content:""; position:absolute; top:4px; right:0; width:8px; height:15px; border-right:2px solid #ffedbd; border-radius:0 50% 50% 0; }
#htmlScenes .sound-toggle.is-muted .sound-mark::after { top:2px; right:3px; width:2px; height:19px; border:0; border-radius:0; background:#ffedbd; transform:rotate(45deg); }
@media (hover:hover) and (pointer:fine) { #htmlScenes .html-topbar .sound-toggle:hover { filter:brightness(1.16); transform:translateY(-1px); box-shadow:inset 0 1px 0 #fff5c844,0 0 0 3px #061d1b,0 0 17px #e4bb5a55; } }
/* Indicador oficial de saldos: tres módulos compactos, con monedas en segundo plano visual. */
#htmlScenes .currency-indicator { width:100%; max-width:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#htmlScenes .currency-pill { min-height:60px!important; height:auto!important; min-width:0; justify-content:center; gap:clamp(3px,1vw,7px); padding:6px clamp(3px,1vw,8px)!important; border:1px solid #c99a42!important; border-radius:18px!important; color:#fff0c8; background:linear-gradient(145deg,rgba(255,255,255,.06),transparent 48%),linear-gradient(145deg,#0b332e,#071d24); box-shadow:inset 0 1px 0 #fff2c522,0 5px 12px #0005; appearance:none; }
#htmlScenes .currency-pill::before { inset:2px; border-color:rgba(255,221,142,.2); }
#htmlScenes .currency-pill.gems { border-color:#a970c5!important; background:linear-gradient(145deg,rgba(255,255,255,.06),transparent 48%),linear-gradient(145deg,#2a1d38,#11101e); }
#htmlScenes .currency-pill.coins { border-color:#9c8853!important; background:linear-gradient(145deg,rgba(255,255,255,.045),transparent 48%),linear-gradient(145deg,#10352e,#092329); }
#htmlScenes .currency-icon { width:clamp(24px,7vw,37px); height:clamp(24px,7vw,37px); flex-basis:clamp(24px,7vw,37px); }
#htmlScenes .currency-coin-icon { width:clamp(25px,7vw,36px); height:clamp(25px,7vw,36px); flex:0 0 clamp(25px,7vw,36px); display:grid; place-items:center; border:2px solid #c4a967; border-radius:50%; color:#54451f; background:linear-gradient(145deg,#e6d39a,#aa8745); box-shadow:inset 0 0 0 2px #fff4cc55,0 2px 4px #0007; font-size:clamp(12px,3.4vw,17px); font-weight:900; }
#htmlScenes .currency-copy { flex:0 1 auto; align-items:flex-start; min-width:0; }
#htmlScenes .currency-copy strong { font-size:clamp(8px,2.1vw,10px); letter-spacing:0; }
#htmlScenes .currency-copy b { margin-top:2px; font-size:clamp(14px,3.8vw,19px); }
#htmlScenes .currency-add-mark { width:clamp(17px,5vw,23px); height:clamp(17px,5vw,23px); flex:0 0 clamp(17px,5vw,23px); display:grid; place-items:center; border:1px solid #ffe19b; border-radius:50%; color:#fff3d0; background:linear-gradient(180deg,#e7a944,#a86517); box-shadow:inset 0 1px 0 #fff7c766,0 2px 4px #0008; font-size:clamp(13px,3.5vw,19px); font-weight:850; line-height:1; }
#htmlScenes .currency-pill.gems .currency-add-mark { border-color:#e1a8ff; background:linear-gradient(180deg,#b342dc,#641697); }
#htmlScenes .currency-pill:focus-visible { outline:2px solid var(--ui-gold-light); outline-offset:3px; }
#htmlScenes .home-page .currency-indicator { margin-top:-5px; }
#htmlScenes .home-page .currency-pill { min-height:48px!important; padding-block:4px!important; border-radius:15px!important; }
#htmlScenes .home-page .currency-icon { width:clamp(22px,6vw,30px); height:clamp(22px,6vw,30px); flex-basis:clamp(22px,6vw,30px); }
#htmlScenes .home-page .currency-coin-icon { width:25px; height:25px; flex-basis:25px; font-size:12px; }
#htmlScenes .home-page .currency-copy strong { font-size:clamp(7px,1.9vw,9px); }
#htmlScenes .home-page .currency-copy b { font-size:clamp(13px,3.4vw,16px); }
#htmlScenes .home-page .currency-add-mark { width:17px; height:17px; flex-basis:17px; font-size:13px; }
#htmlScenes .shop-currency-indicator { margin:0; }
@media (max-width:360px) { #htmlScenes .currency-indicator { gap:5px; } #htmlScenes .currency-pill { gap:3px; padding-inline:3px; } #htmlScenes .home-page .currency-indicator { gap:4px; } }
/* Escala tipográfica y controles unificados para las vistas HTML5. */
#htmlScenes { font-size: var(--ui-font-body,14px); }
#htmlScenes .brand-lockup strong { font-size: clamp(18px,4.5vw,22px); }
#htmlScenes .brand-lockup small { font-size: var(--ui-font-small,12px); }
#htmlScenes .section-title,
#htmlScenes .result-card h1 { font-size: var(--ui-font-heading,18px); }
#htmlScenes .subcopy,
#htmlScenes .result-copy,
#htmlScenes .result-rewards { font-size: var(--ui-font-small,12px); }
#htmlScenes .result-outcome { font-size: clamp(20px,5vw,24px); }
#htmlScenes .profile-name { font-size: 16px; }
#htmlScenes .html-pill { font-size: var(--ui-font-small,12px) !important; }
#htmlScenes button {
height: auto;
min-height: var(--ui-button-min-height,44px);
border: 1px solid var(--ui-button-border,#F3A506) !important;
border-radius: var(--ui-button-radius,40px) !important;
font-size: var(--ui-font-body,14px) !important;
line-height: 1.25;
}
#htmlScenes .html-button,
#htmlScenes .html-button.gold,
#htmlScenes .html-button.blue,
#htmlScenes .html-button.secondary,
#htmlScenes .sound-toggle {
height: auto !important;
min-height: var(--ui-button-min-height,44px) !important;
padding-block: 9px;
border: 1px solid var(--ui-button-border,#F3A506) !important;
border-radius: var(--ui-button-radius,40px) !important;
font-size: var(--ui-font-body,14px) !important;
line-height: 1.25;
}
#htmlScenes .home-actions .html-button { min-height: 52px !important; padding: 9px 8px 9px 48px; font-size: var(--ui-font-body,14px) !important; }
#htmlScenes .home-actions .html-button::before { width: 44px; height: 44px; border-width: 1px; font-size: 20px; }
#htmlScenes .html-button.icon,
#htmlScenes .sound-toggle { width: 42px; min-width: 42px; height: 42px !important; min-height: 42px !important; padding: 0; font-size: 17px !important; }
#htmlScenes .wallet-mini b { font-size: 18px; }
#htmlScenes .stat-card strong { font-size: 21px; }
#htmlScenes .result-actions .html-button { min-height: 44px !important; }
#htmlScenes .gift-button { position: absolute; z-index: 5; top: 112px; right: max(16px,env(safe-area-inset-right)); width: 68px; min-width: 68px; height: 60px !important; min-height: 60px !important; padding: 2px; display: grid; place-items: center; overflow: visible; background: linear-gradient(145deg,#123e39,#071d22); box-shadow: 0 4px 14px #0008,0 0 14px #f0bd5555; }
#htmlScenes .gift-button img { display: block; width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 2px 4px #0008); }
#htmlScenes .gift-count { position: absolute; top: -5px; right: -5px; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #fff0b9; border-radius: 50%; color: #173129; background: #f3a506; font-size: 11px; font-weight: 900; line-height: 1; box-shadow: 0 2px 6px #0008; }
#htmlScenes .gift-dialog { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom)); background: #020a0edb; backdrop-filter: blur(7px); }
#htmlScenes .gift-dialog-card { width: min(360px,100%); padding: 22px; display: grid; justify-items: center; gap: 12px; text-align: center; }
#htmlScenes .gift-dialog-image { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 4px 12px #ffbd4155); }
#htmlScenes .gift-dialog-card .subcopy { margin: 0; }
#htmlScenes .gift-dialog-card .html-button { width: 100%; }
#htmlScenes .currency-indicator .currency-add { width:clamp(30px,8vw,40px)!important; min-width:clamp(30px,8vw,40px)!important; height:clamp(30px,8vw,40px)!important; min-height:clamp(30px,8vw,40px)!important; padding:0!important; border:1px solid #F3A506!important; border-radius:50%!important; font-size:24px!important; line-height:1!important; }
#htmlScenes .currency-indicator .gems .currency-add { border-color:#e1a8ff!important; }
/* Acabado interactivo inspirado en el laboratorio, conservando el tema casino y el Canvas intacto. */
#htmlScenes .html-topbar,
#htmlScenes .html-card,
#htmlScenes .currency-indicator {
box-shadow: var(--ui-shadow-card);
}
#htmlScenes .html-topbar {
background:
linear-gradient(110deg, rgba(255,255,255,.045), transparent 48%),
linear-gradient(145deg, rgba(5,54,48,.96), rgba(3,31,34,.96));
transition: border-color 180ms ease, box-shadow 180ms ease;
}
#htmlScenes .html-card {
background:
radial-gradient(ellipse at 7% 0%, rgba(230,190,102,.075), transparent 45%),
linear-gradient(145deg, rgba(4,54,46,.96), rgba(4,31,34,.97));
transition: border-color 180ms ease, box-shadow 180ms ease;
}
#htmlScenes .profile-layout > .html-card,
#htmlScenes .result-card {
animation: html-card-enter 320ms var(--ui-ease) both;
}
#htmlScenes .profile-layout > .html-card:nth-child(2) { animation-delay: 35ms; }
#htmlScenes .profile-layout > .html-card:nth-child(3) { animation-delay: 65ms; }
#htmlScenes .profile-layout > .html-card:nth-child(4) { animation-delay: 90ms; }
#htmlScenes .profile-layout > .html-card:nth-child(5) { animation-delay: 115ms; }
#htmlScenes .home-actions > * { animation: html-control-enter 300ms var(--ui-ease) both; }
#htmlScenes .home-actions > :nth-child(2) { animation-delay: 35ms; }
#htmlScenes .home-actions > :nth-child(3) { animation-delay: 70ms; }
#htmlScenes .home-actions > :nth-child(4) { animation-delay: 105ms; }
#htmlScenes .html-button,
#htmlScenes .sound-toggle,
#htmlScenes .html-pill {
transition: transform 130ms var(--ui-ease), filter 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
#htmlScenes .html-button:focus-visible,
#htmlScenes .sound-toggle:focus-visible,
#htmlScenes .html-pill:focus-visible,
#htmlScenes .currency-add:focus-visible,
#htmlScenes .gift-button:focus-visible {
outline: 2px solid var(--ui-gold-light);
outline-offset: 3px;
}
#htmlScenes button:disabled,
#htmlScenes button[aria-disabled="true"] {
cursor: not-allowed;
filter: saturate(.52) brightness(.76);
box-shadow: none;
}
#htmlScenes .html-button[aria-pressed="true"],
#htmlScenes .html-button[aria-current="page"] {
border-color: var(--ui-good) !important;
box-shadow: 0 0 0 2px rgba(107,224,178,.26), 0 0 16px rgba(62,226,175,.24), inset 0 1px rgba(255,255,255,.18);
}
#htmlScenes .html-button[data-loading="true"] {
pointer-events: none;
filter: saturate(.7) brightness(.9);
}
#htmlScenes .html-card.stat-card,
#htmlScenes .rank-row,
#htmlScenes .winning-group {
transition: transform 180ms var(--ui-ease), border-color 180ms ease, box-shadow 180ms ease;
}
#htmlScenes .rank-dialog,
#htmlScenes .install-dialog,
#htmlScenes .gift-dialog,
#htmlScenes .gem-info-dialog {
animation: html-overlay-in 220ms var(--ui-ease) both;
}
#htmlScenes .rank-dialog-card,
#htmlScenes .install-dialog-card,
#htmlScenes .gift-dialog-card,
#htmlScenes .gem-info-card {
animation: html-panel-in 280ms var(--ui-ease) both;
}
@keyframes html-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes html-panel-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes html-card-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes html-control-enter { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (hover:hover) and (pointer:fine) {
#htmlScenes .html-button:not(:disabled):hover,
#htmlScenes .sound-toggle:not(:disabled):hover,
#htmlScenes .html-pill:not(:disabled):hover,
#htmlScenes .currency-add:not(:disabled):hover,
#htmlScenes .gift-button:not(:disabled):hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
#htmlScenes .html-card.stat-card:hover,
#htmlScenes .rank-row:hover {
border-color: rgba(243,165,6,.78);
box-shadow: 0 9px 22px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07);
}
}
@media (prefers-reduced-motion: reduce) {
#htmlScenes .rank-dialog,
#htmlScenes .install-dialog,
#htmlScenes .gift-dialog,
#htmlScenes .gem-info-dialog,
#htmlScenes .rank-dialog-card,
#htmlScenes .install-dialog-card,
#htmlScenes .gift-dialog-card,
#htmlScenes .gem-info-card { animation:none !important; }
}