:root { --verde:#174B36; --activo:#267A53; --crema:#F3E6BD; --dorado:#D5AE54; --carbon:#20252A; --frio:#7BC5CB; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:var(--carbon); color:var(--crema); font:600 15px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overscroll-behavior:none; }
#game-container { position:fixed; inset:0; touch-action:none; }
#game-container canvas { display:block; width:100% !important; height:100% !important; }
#hud { position:fixed; inset:0; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; }
#hud button { font:inherit; color:inherit; border:0; touch-action:manipulation; cursor:pointer; min-height:44px; }
#hud button:disabled { cursor:default; opacity:.55; }
.top { pointer-events:auto; display:flex; align-items:center; gap:10px; padding:calc(6px + env(safe-area-inset-top)) 12px 6px; background:linear-gradient(#22694b,#174B36); border-bottom:3px solid var(--dorado); box-shadow:0 3px 10px rgba(0,0,0,.45); }
.top img { height:28px; display:block; }
.top .money { font-size:19px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.top .queue { margin-left:auto; text-align:right; font-size:14px; }
.top .queue b { display:block; font-size:17px; color:var(--dorado); font-variant-numeric:tabular-nums; }
.mid { display:flex; justify-content:space-between; align-items:flex-start; padding:8px; gap:8px; flex:1; }
.left { display:flex; flex-direction:column; gap:6px; max-width:66%; }
.incident { pointer-events:auto; }
.incident .cta { font-size:14px; min-height:48px !important; padding:4px 8px; }
.hint { pointer-events:none; background:rgba(20,24,28,.86); border:1px solid rgba(213,174,84,.35); border-left:4px solid var(--dorado); border-radius:8px; padding:8px 10px; font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.cam { pointer-events:auto; display:flex; flex-direction:column; gap:6px; }
.cam button { background:rgba(20,24,28,.86); border:1px solid rgba(243,230,189,.2) !important; padding:0 10px; font-size:14px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.bottom { pointer-events:auto; background:linear-gradient(#2a3036,#1d2125); border-top:3px solid var(--dorado); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -3px 12px rgba(0,0,0,.45); }
.panel { padding:10px; min-height:172px; max-height:42vh; overflow-y:auto; }
.tabs { display:grid; grid-template-columns:repeat(5,1fr); background:linear-gradient(#1b5a40,#123b2b); }
.tabs button { background:transparent; padding:0 2px; min-height:48px; }
.tabs button.on { background:var(--activo); box-shadow:inset 0 3px 0 var(--dorado); color:#fff; }
.title { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:14px; }
.chips { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px; }
.chip { min-height:58px !important; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0) 45%),var(--crema); color:#20252A !important; font-size:14px; font-weight:800; padding:2px; box-shadow:inset 0 -5px 0 rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.4); }
.chip:active:not(:disabled), .cta:active:not(:disabled) { transform:translateY(2px); }
.chip.done { background:#3a4148; color:#9aa3aa !important; box-shadow:none; text-decoration:line-through; }
.cta { display:block; width:100%; min-height:52px !important; border-radius:10px; background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,0) 50%),var(--dorado); color:#20252A !important; font-size:17px; font-weight:800; box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),0 3px 6px rgba(0,0,0,.4); }
.cta.alt { background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,0) 50%),var(--activo); color:#fff !important; }
.pick { display:flex; gap:6px; margin-bottom:8px; }
.pick button { background:#333a41; padding:0 12px; border-radius:6px; }
.pick button.on { background:var(--activo); color:#fff; }
.item { display:grid; grid-template-columns:1fr auto auto; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid #333a41; }
.item small { display:block; color:#b9b7a4; font-weight:500; font-size:14px; }
.bar { height:6px; background:#3a4148; border-radius:3px; margin-top:4px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--frio); }
.bar i.low { background:#d9694f; }
.act { background:var(--activo); color:#fff !important; padding:0 10px; border-radius:6px; font-size:14px; }
.act.buy { background:#59502f; }
.muted { color:#b9b7a4; font-weight:500; }
.splash { pointer-events:auto; position:fixed; inset:auto 0 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,rgba(32,37,42,.97) 18%); text-align:center; }
.splash img { height:44px; margin:18px auto 8px; display:block; }
.splash h1 { margin:0 0 4px; font-size:23px; color:#fff; }
.splash p { margin:0 0 12px; font-size:16px; font-weight:500; }
.splash small { display:block; margin-top:8px; color:#b9b7a4; font-size:14px; font-weight:500; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:46%; background:var(--verde); border:2px solid var(--dorado); color:#fff; padding:8px 14px; border-radius:6px; font-size:15px; pointer-events:none; white-space:nowrap; }
.modal { pointer-events:auto; position:fixed; inset:0; background:rgba(20,23,26,.72); display:flex; align-items:center; justify-content:center; padding:16px; z-index:5; }
.card { width:100%; max-width:380px; max-height:90vh; overflow-y:auto; background:var(--carbon); border:3px solid var(--dorado); border-radius:8px; padding:16px; }
.card h2 { margin:0 0 4px; color:#fff; font-size:21px; }
.card p { margin:4px 0 10px; font-size:14px; }
.card dl { display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:10px 0; font-size:15px; }
.card dt { font-weight:500; }
.card dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.streak { background:var(--dorado); color:#20252A; font-weight:800; font-size:15px; padding:0 6px; border-radius:4px; }
.streak:empty { display:none; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.say { margin:0 0 8px; font-size:16px; color:#fff; }
.chip.coin { --c:#D5AE54; }
.cta.alert { background:#b8452f; color:#fff !important; font-size:14px; font-weight:600; line-height:1.3; animation:latido .8s ease-in-out infinite alternate; }
@keyframes latido { to { background:#d9694f; } }
@media (prefers-reduced-motion: reduce) { .cta.alert { animation:none; } }
.myat { display:block; font-size:14px; font-weight:500; margin-bottom:10px; text-align:left; }
.myat input, .field { display:block; width:100%; min-height:44px; margin-top:4px; padding:0 10px; font:inherit; font-size:16px; color:#20252A; background:var(--crema); border:2px solid var(--dorado); border-radius:6px; }
.field { margin:8px 0; }
#hud[hidden] { display:none; }
#entry { position:fixed; inset:0; z-index:4; pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end; }
.sheet { pointer-events:auto; max-height:72vh; overflow-y:auto; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); background:linear-gradient(#2a3036,#1d2125); border-top:3px solid var(--dorado); box-shadow:0 -3px 14px rgba(0,0,0,.5); text-align:center; }
.sheet .brand { height:40px; display:block; margin:0 auto 6px; }
.sheet h1 { margin:0 0 10px; font-size:24px; line-height:1.15; color:#fff; }
.sheet h2 { margin:0 0 8px; font-size:19px; line-height:1.25; color:#fff; }
.sheet h3 { margin:10px 0 8px; font-size:17px; color:var(--dorado); }
.sheet p { margin:6px 0 10px; font-size:15px; font-weight:500; }
.sheet label { display:block; text-align:left; font-size:14px; font-weight:500; }
.sheet input { display:block; width:100%; min-height:48px; margin-top:4px; padding:0 12px; font:inherit; font-size:17px; color:#20252A; background:var(--crema); border:2px solid var(--dorado); border-radius:10px; }
.sheet button { font:inherit; color:inherit; border:0; cursor:pointer; touch-action:manipulation; min-height:44px; }
.sheet .notice { min-height:18px; margin:6px 0; color:#f0b4a4; font-size:14px; }
.sheet .small { font-size:14px; }
.sheet .muted a { color:var(--frio); }
.sheet .link { display:block; width:100%; background:transparent; color:var(--frio); text-decoration:underline; margin-top:4px; }
.linkcta { display:flex; align-items:center; justify-content:center; text-decoration:none; margin-bottom:10px; }
.pills { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:6px; }
.pill { display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:22px; background:var(--verde); border:1px solid var(--dorado); color:#fff; text-decoration:none; font-size:15px; }
.who { display:flex; flex-direction:column; align-items:center; gap:2px; }
.who b { font-size:21px; color:#fff; overflow-wrap:anywhere; }
.who span { font-size:15px; color:var(--dorado); text-transform:uppercase; letter-spacing:.06em; }
.photo { pointer-events:auto; position:absolute; inset:0; display:flex; flex-direction:column; background:#14181c; }
.photo .preview { flex:1 1 0; min-height:0; width:100%; object-fit:contain; padding:8px; }
.photo .sheet { flex:0 0 auto; max-height:none; padding-top:10px; }
.photo .notice { margin:4px 0; color:var(--frio); }
.photo h3 { margin:6px 0; }
.sheet .act { background:var(--activo); color:#fff; padding:0 8px; border-radius:10px; font-size:14px; }
.chip img { width:30px; height:30px; image-rendering:auto; }
.chip.done img { opacity:.35; filter:grayscale(1); }
.alone { margin:0 0 8px; padding:6px 8px; border-radius:8px; background:rgba(216,90,60,.2); color:#f3b2a0; font-size:14px; font-weight:600; }
.help { grid-template-columns:auto 1fr !important; align-items:start; }
.help dt { font-weight:800; color:var(--dorado); }
.help dd { text-align:left !important; font-size:14px; font-weight:500; }
.top .store { font-size:14px; font-weight:800; color:var(--dorado); max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top .store:empty { display:none; }

/* ===== Estética gamer: piezas con volumen, contorno y brillo ===== */
.top { background: linear-gradient(#2a8a5f, #174B36 60%, #12392a); border-bottom: 3px solid #f2c75c; box-shadow: 0 3px 0 #8a6a22, 0 6px 14px rgba(0,0,0,.5); }
.top .money { display:flex; align-items:center; gap:6px; padding:2px 10px 2px 4px; border-radius:999px; background:rgba(0,0,0,.35); border:2px solid rgba(0,0,0,.4); text-shadow:0 2px 0 #0b2219; }
.top .money::before { content:'$'; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:14px; font-weight:900; color:#5a3d07; background:radial-gradient(circle at 35% 30%, #fff1b8, #f2c75c 45%, #b8862a); border:2px solid #7a5512; }
.top .queue { padding:2px 10px; border-radius:10px; background:rgba(0,0,0,.3); }
.top .queue b { text-shadow:0 2px 0 #3a2a08; }
.cta { position:relative; text-transform:uppercase; letter-spacing:.04em; font-weight:900; border:2px solid #6b4d12 !important; background:linear-gradient(#ffe07a, #f2c75c 45%, #d39b2c) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.18), 0 5px 0 #7a5512, 0 8px 12px rgba(0,0,0,.45); text-shadow:0 1px 0 rgba(255,255,255,.5); transition: transform .06s, box-shadow .06s; }
.cta:active:not(:disabled) { transform:translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #7a5512, 0 3px 6px rgba(0,0,0,.4); }
.cta.alt { border-color:#0d3a26 !important; background:linear-gradient(#46c38a, #2a9a64 45%, #1d7a4d) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.2), 0 5px 0 #0d3a26, 0 8px 12px rgba(0,0,0,.45); text-shadow:0 2px 0 rgba(0,0,0,.35); }
.cta:disabled { filter:saturate(.35) brightness(.75); }
.cta.alert { border-color:#5e1a0e !important; background:linear-gradient(#ff8a64, #e0573a 45%, #b8452f) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 5px 0 #5e1a0e, 0 8px 12px rgba(0,0,0,.45); text-transform:none; }
.chips { gap:8px; }
.chip { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; min-height:86px !important; padding:4px 2px 6px !important; border-radius:14px !important; border:2px solid #0e1114 !important; background:linear-gradient(#3b444d, #262c32) !important; color:#f3e6bd !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.35), 0 4px 0 #0b0d10, 0 6px 10px rgba(0,0,0,.45); transition: transform .06s; }
.chip .slot { display:grid; place-items:center; width:56px; height:50px; border-radius:10px; background:radial-gradient(circle at 50% 40%, rgba(242,199,92,.25), rgba(0,0,0,.25) 70%); }
.chip img { width:56px !important; height:56px !important; margin-top:-6px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.chip .lbl { font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; text-shadow:0 2px 0 #000; }
.chip:active:not(:disabled) { transform:translateY(3px); }
.chip.done { background:linear-gradient(#245a3e, #183d2b) !important; color:#9fe0b9 !important; text-decoration:none !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 2px 0 #0b0d10; }
.chip.done img { opacity:.45; filter:grayscale(1); }
.chip.done::after { content:'\2713'; position:absolute; top:6px; right:8px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:15px; font-weight:900; color:#0d3a26; background:#6ee7a0; border:2px solid #0d3a26; }
.chip.coin { background:linear-gradient(#ffe07a, #d39b2c) !important; color:#3a2a08 !important; }
.tabs { background:linear-gradient(#1b5a40, #0f3324); border-top:2px solid #0b2219; }
.tabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px !important; font-size:14px; font-weight:800; color:#cfe6d9; }
.tabs button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tabs button.on { color:#3a2a08; background:linear-gradient(#ffe07a, #f2c75c 50%, #d39b2c); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.2); }
.act { border:2px solid #0d3a26 !important; background:linear-gradient(#3fb07c, #23855a) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 3px 0 #0d3a26; font-weight:800; }
.act:active:not(:disabled) { transform:translateY(2px); box-shadow: 0 1px 0 #0d3a26; }
.act.buy { border-color:#3a2a08 !important; background:linear-gradient(#a8893f, #6f5a24) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 0 #3a2a08; }
.panel .title { font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:14px; color:#f2c75c; }
.cam button { border:2px solid #0e1114 !important; background:linear-gradient(#3b444d, #22282d) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 0 #0b0d10; font-weight:800; }
.hint { border:2px solid #0e1114; background:linear-gradient(rgba(40,46,52,.95), rgba(24,28,32,.95)); box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.4); font-weight:700; }
.streak:not(:empty) { padding:2px 8px; border-radius:999px; border:2px solid #7a5512; background:linear-gradient(#ffe07a, #d39b2c); box-shadow: 0 2px 0 #7a5512; font-weight:900; }
.alone { border:2px solid #5e1a0e; font-weight:800; animation: latido .6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .alone { animation:none; } }
.card { border:3px solid #f2c75c; box-shadow: 0 6px 0 #7a5512, 0 12px 30px rgba(0,0,0,.6); background:linear-gradient(#2c3238, #1d2125); }
.top .queue { font-size:12px; white-space:nowrap; line-height:1.1; }
.top .queue b { font-size:16px; }
.top .store { max-width:40vw; font-size:13px; }
.top img { height:24px; }

/* ===== Botones de juego: piezas 3D con dibujo y animación ===== */
.tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); background:linear-gradient(#123b2b, #0b2219); border-top:3px solid #f2c75c; }
.tabs button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:0; min-height:64px !important; padding:2px 0 4px !important; border-radius:14px !important; border:2px solid #061810 !important; background:linear-gradient(#2f8a5f, #1d6a46 55%, #144d33) !important; color:#e9fff3 !important; font-size:14px; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.55); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.25), 0 4px 0 #061810, 0 6px 10px rgba(0,0,0,.5); transition: transform .08s; }
.tabs button .ticon { width:38px; height:38px; margin-top:-14px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); transition: transform .15s; }
.tabs button span { font-size:13px; letter-spacing:.02em; }
.tabs button:active { transform: translateY(3px) scale(.97); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 1px 0 #061810; }
.tabs button.on { color:#3a2a08 !important; text-shadow:0 1px 0 rgba(255,255,255,.6); border-color:#5a3d07 !important; background:linear-gradient(#fff1a8, #f2c75c 50%, #c9902a) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 #5a3d07, 0 0 16px rgba(242,199,92,.6); transform: translateY(-4px); }
.tabs button.on .ticon { animation: rebote .5s cubic-bezier(.3,1.6,.5,1); transform: scale(1.12); }
@keyframes rebote { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10px) scale(1.2); } 100% { transform: translateY(0) scale(1.12); } }
.chip { min-height:96px !important; }
.chip .slot { width:64px; height:58px; }
.chip img { width:66px !important; height:66px !important; margin-top:-10px; }
.chip:not(:disabled):not(.done) img { animation: flota 1.6s ease-in-out infinite alternate; }
@keyframes flota { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.chip:active:not(:disabled) img { transform: scale(.9); }
.cta:not(:disabled) { overflow:hidden; }
.cta:not(:disabled)::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: brillo 2.4s ease-in-out infinite; pointer-events:none; }
@keyframes brillo { 0%, 55% { left:-60%; } 100% { left:130%; } }
@media (prefers-reduced-motion: reduce) { .tabs button.on .ticon, .chip img, .cta::after { animation:none !important; } }
.chip img { width:78px !important; height:78px !important; margin-top:-16px; }
.chip .slot { width:70px; height:60px; }

.item.obra small { color:#ffcf3f; }
.item.obra .bar { height:8px; margin-top:6px; border:1px solid #0e1114; background:#2a2f35; }
.item.obra .bar i { background:repeating-linear-gradient(45deg, #ffcf3f 0 8px, #e0a91f 8px 16px); }
.pills .pill { font-weight:900; border:2px solid #5a3d07; background:linear-gradient(#ffe07a, #d39b2c); color:#3a2a08; box-shadow:0 4px 0 #5a3d07; }