/* AURI SOUL — assets/css/app.css */ :root { --bg:#1C1208; --panel:#2A1C0E; --border:#6B4A28; --accent:#C97B3A; --gold:#E8A830; --text:#F5E8D0; --dim:#A08060; --light:#FFF3E0; --chip-bg:rgba(107,74,40,.35); --bubble-bg:rgba(26,16,6,.88); } /* ── La Colmena (bee) ── miel, dorado cálido, ámbar soleado */ .theme-bee { --bg: #1C1305; --panel: #2A1D0A; --accent: #CF920C; --gold: #EDB820; --border: #8A6610; --dim: #A89040; --light: #FFF8DC; --chip-bg: rgba(138,102,16,.35); --bubble-bg: rgba(28,19,5,.90); } /* ── La Forja (smith) ── carbón oscuro, rojo brasa, naranja forja */ .theme-smith { --bg: #130C09; --panel: #1C1310; --accent: #B84518; --gold: #CC5C22; --border: #482018; --dim: #886050; --light: #EDE0D0; --chip-bg: rgba(72,32,24,.42); --bubble-bg: rgba(19,12,9,.92); } /* ── El Estudio del Sabio (victorian) ── sepia oscuro, ámbar vela, pergamino */ .theme-victorian { --bg: #110D07; --panel: #1A1208; --accent: #9A6A28; --gold: #C89038; --border: #4A3218; --dim: #7A5830; --light: #F2E8D5; --chip-bg: rgba(74,50,24,.40); --bubble-bg: rgba(17,13,7,.92); } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* fondo en html evita flash blanco mientras body tiene x-cloak */ html{touch-action:manipulation;background:#1C1208} body{background:var(--bg);color:var(--text);font-family:Georgia,serif;height:100dvh;overflow:hidden} /* x-cloak en oculta todo hasta que Alpine inicializa — elimina el flash de UI */ [x-cloak]{display:none!important} /* ── PANTALLAS ── */ .screen{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;transition:opacity .4s} .screen.hidden{opacity:0;pointer-events:none} /* ── LOADING ── */ #screen-loading{background:var(--bg);gap:14px} .loading-icon{width:88px;height:88px;border-radius:20px;object-fit:cover; animation:pulse 2.4s ease-in-out infinite; filter:drop-shadow(0 0 18px rgba(232,168,48,.35))} .loading-brand{font-size:22px;letter-spacing:.18em;color:var(--gold); text-transform:uppercase;font-family:Georgia,serif} .loading-lbl{font-size:11px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.94)}} /* ── AUTH ── */ #screen-auth{background:var(--bg);padding:24px} .auth-card{background:var(--panel);border:1px solid var(--border);border-radius:20px; padding:28px 22px;width:100%;max-width:380px;display:flex;flex-direction:column; gap:18px;box-shadow:0 20px 60px rgba(0,0,0,.6)} .auth-auri{width:100px;height:124px;object-fit:contain;margin:0 auto; filter:drop-shadow(0 6px 20px rgba(201,123,58,.4))} .auth-title{text-align:center;font-size:20px;color:var(--light);line-height:1.4} .auth-sub{text-align:center;font-size:13px;color:var(--dim);line-height:1.6} .lbl{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px} .inp{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border); border-radius:12px;padding:13px 16px;color:var(--text);font-size:15px; font-family:inherit;outline:none;transition:border-color .25s} .inp:focus{border-color:var(--accent)} .btn-main{width:100%;background:var(--accent);color:#fff;border:none;border-radius:14px; padding:16px;font-size:16px;font-family:inherit;cursor:pointer;letter-spacing:.05em; transition:background .2s,transform .1s;position:relative;box-shadow:0 4px 16px rgba(201,123,58,.4)} .btn-main:active{transform:scale(.97)} .btn-main:disabled{opacity:.45;cursor:not-allowed} .btn-main.loading::after{content:'';position:absolute;right:18px;top:50%; transform:translateY(-50%);width:16px;height:16px; border:2px solid rgba(255,255,255,.3);border-top-color:#fff; border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:translateY(-50%) rotate(360deg)}} /* ── TALLER ── */ #screen-workshop{justify-content:flex-end;padding:0} .ws-bg{position:absolute;inset:0;background-size:cover;background-position:center top} /* ── HUD SUPERIOR (Recursos Flotantes) ── */ .top-hud { position: absolute; top: 0; left: 0; width: 100%; padding: 45px 15px 20px; background: linear-gradient(to bottom, rgba(8,5,2,0.85) 0%, transparent 100%); z-index: 15; pointer-events: none; } .res-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;pointer-events:auto;} .chip{display:flex;align-items:center;gap:5px;background:rgba(42,28,14,0.7); border:1px solid rgba(201,123,58,0.4);border-radius:20px;padding:6px 13px; font-size:13px;white-space:nowrap;flex-shrink:0;color:var(--text);backdrop-filter:blur(8px)} .chip.gold{background:rgba(232,168,48,.15);border-color:var(--gold)} /* ── AURI PANTALLA COMPLETA (PRE-RENDER ANIMADO) ── */ .auri-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 5; /* Sin transición por defecto — los frames (respirar/parpadear) deben ser instantáneos */ } /* Solo al cargar el taller: fade-in suave para ocultar el salto de pose */ .auri-overlay.auri-loading { opacity: 0; } .auri-overlay.auri-ready { opacity: 1; transition: opacity 0.5s ease; } .name-badge-fixed { position: absolute; bottom: 110px; /* Ajustado por encima del nuevo panel inferior */ left: 50%; transform: translateX(-50%); z-index: 10; background: rgba(28,18,8,0.82); border: 1px solid rgba(107,74,40,0.6); border-radius: 20px; padding: 6px 18px; font-size: 13px; color: var(--light); letter-spacing: 0.08em; backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,.3); display: flex; align-items: center; gap: 8px; pointer-events: none; } /* Filtros de humor visuales */ .auri-state-jealous { filter: hue-rotate(20deg); } .auri-state-tired { filter: brightness(0.8); } /* Burbuja */ .bubble{position:absolute;top:130px;left:50%;transform:translateX(-50%); background:var(--bubble-bg);border:1px solid rgba(107,74,40,.5);border-radius:20px; padding:14px 20px;max-width:290px;width:88%;font-size:13.5px;color:var(--light); line-height:1.6;text-align:center;z-index:20;backdrop-filter:blur(16px); box-shadow:0 8px 32px rgba(0,0,0,.5);animation:fadeDown .4s ease} .bubble::after{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%); border:8px solid transparent;border-bottom-color:rgba(107,74,40,.5);border-top:none} @keyframes fadeDown{ from{opacity:0;transform:translateX(-50%) translateY(-12px)} to{opacity:1;transform:translateX(-50%) translateY(0)}} /* ── PANEL INFERIOR MINIMALISTA ── */ .ws-panel { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(8,5,2,0.95) 0%, transparent 100%); border: none; padding: 20px 15px 35px; z-index: 15; display: flex; flex-direction: column; gap: 12px; } .idle-pill{background:linear-gradient(135deg,rgba(232,168,48,.12),rgba(107,74,40,.3)); border:1px solid var(--gold);border-radius:18px;padding:12px 16px; display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .1s; max-width: 380px; margin: 0 auto; backdrop-filter: blur(12px); user-select:none;-webkit-user-select:none;touch-action:manipulation;} .idle-pill:active{transform:scale(.98)} .idle-ic{font-size:22px;animation:pulse 2s ease-in-out infinite} .idle-title{font-size:13px;color:var(--gold);font-weight:bold} .idle-detail{font-size:11px;color:var(--light);opacity: 0.8; margin-top:2px} .act-row{display:flex; justify-content:center; gap:8px; width:100%; max-width:400px; margin: 0 auto;} .btn-act{background:rgba(42,28,14,0.6);backdrop-filter:blur(8px); border:1px solid rgba(201,123,58,0.3);border-radius:20px; padding:10px 4px;color:var(--light);cursor:pointer; text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px; transition:transform .1s;flex:1; min-width: 60px;} .btn-act:active{transform:scale(.92);background:rgba(201,123,58,.4)} .btn-act .ic{font-size:20px; margin-bottom: 2px;} .btn-act span:not(.ic) { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: bold;} .btn-act.gold-btn{background:rgba(232,168,48,.2);border-color:var(--gold);color:var(--gold)} /* Sueño profundo */ .sleep-ov{position:fixed;inset:0;background:rgb(8,5,2);z-index:300; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:22px;padding:40px;text-align:center} .sleep-img{width:110px;animation:pulse 4s ease-in-out infinite} .sleep-t{font-size:21px;color:var(--dim);line-height:1.4} .sleep-sub{font-size:13px;color:rgba(160,128,96,.65);line-height:1.7} .sleep-hint{font-size:13px;color:var(--gold);opacity:.8;animation:pulse 2s ease-in-out infinite} /* ── ANIMACIÓN RECOLECCIÓN ── */ .float-res{position:fixed;font-size:24px;z-index:500;pointer-events:none; animation:floatUp 1.1s ease-out forwards} @keyframes floatUp{ 0%{opacity:1;transform:translateY(0) scale(1)} 60%{opacity:1;transform:translateY(-80px) scale(1.3)} 100%{opacity:0;transform:translateY(-150px) scale(.8)}} /* ── INVENTARIO / CONSTRUIR ── */ #screen-inventory,#screen-build{justify-content:flex-start;padding:0;overflow:hidden} .panel-screen{width:100%;height:100%;display:flex;flex-direction:column; background:var(--bg);overflow:hidden} .panel-hdr{display:flex;align-items:center;gap:12px;padding:52px 18px 16px; background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0} .panel-hdr-title{flex:1;font-size:17px;color:var(--light);display:flex;align-items:center;gap:8px} .hdr-ic{width:22px;height:22px;object-fit:contain;flex-shrink:0;filter:brightness(0.95)} .panel-back{background:none;border:none;color:var(--dim);font-size:22px; cursor:pointer;padding:4px 8px;line-height:1} .panel-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px; scrollbar-width:thin;scrollbar-color:var(--border) transparent} .inv-section-title{font-size:11px;color:var(--dim);text-transform:uppercase; letter-spacing:.1em;margin-bottom:4px} .inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .inv-card{background:var(--panel);border:1px solid var(--border);border-radius:14px; padding:13px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center} .inv-card.gold{border-color:var(--gold);background:rgba(232,168,48,.08)} .inv-card .ic{font-size:24px} .inv-card .val{font-size:18px;color:var(--light);font-weight:bold} .inv-card .lbl-sm{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em} .inv-card .cap{font-size:10px;color:var(--dim)} /* Selectores de ubicación en la carta de Accesorios */ .slot-selector { display:flex; gap:6px; justify-content:center; width:100%; margin-top:8px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 8px;} .slot-btn { background:rgba(0,0,0,0.4); border:1px solid var(--border); color:var(--dim); border-radius:6px; width:26px; height:26px; font-size:11px; cursor:pointer; transition: 0.2s; } .slot-btn.active { background:var(--gold); color:#000; border-color:var(--gold); font-weight:bold; } .slot-btn-remove { color:rgba(200,80,80,0.6); border-color:rgba(200,80,80,0.25); margin-left:4px; } .slot-btn-remove:hover { background:rgba(200,80,80,0.2); border-color:rgba(200,80,80,0.6); color:rgba(220,100,100,1); } .slot-btn-remove.active { background:rgba(200,80,80,0.25); border-color:rgba(200,80,80,0.7); color:rgba(220,100,100,1); font-weight:bold; } .ach-banner{background:linear-gradient(135deg,rgba(232,168,48,.15),rgba(107,74,40,.3)); border:1px solid var(--gold);border-radius:14px;padding:13px 16px; display:flex;align-items:center;gap:12px;animation:fadeUp .4s ease} .ach-ic{font-size:26px} .ach-name{font-size:14px;color:var(--gold)} .ach-desc{font-size:11px;color:var(--dim);margin-top:2px} .ach-locked{opacity:0.45!important;filter:grayscale(0.6)} .recipe-card{background:var(--panel);border:1px solid var(--border); border-radius:16px;padding:15px 16px;display:flex;flex-direction:column;gap:10px} .recipe-card.can-craft{border-color:var(--accent)} .recipe-card.built{border-color:rgba(100,200,100,0.3);opacity:0.75} .recipe-card.built .btn-craft{background:rgba(100,200,100,0.08);color:#7ed98a;cursor:default} .recipe-top{display:flex;align-items:flex-start;gap:10px} .recipe-name{font-size:15px;color:var(--light);flex:1} .recipe-gen{font-size:10px;color:var(--dim);background:var(--chip-bg); border-radius:8px;padding:2px 8px;white-space:nowrap;align-self:flex-start} .recipe-desc{font-size:12px;color:var(--dim);line-height:1.5} .recipe-costs{display:flex;flex-wrap:wrap;gap:6px} .cost-chip{display:flex;align-items:center;gap:4px;font-size:12px;padding:4px 10px; border-radius:20px;border:1px solid var(--border);background:var(--chip-bg)} .cost-chip.ok{border-color:rgba(201,123,58,.5);color:var(--light)} .cost-chip.nok{border-color:rgba(139,58,42,.5);color:#c87070} .recipe-result{font-size:11px;color:var(--dim)} .btn-craft{width:100%;background:var(--accent);color:#fff;border:none;border-radius:11px; padding:12px;font-size:14px;font-family:inherit;cursor:pointer;letter-spacing:.04em; transition:background .2s,transform .1s;box-shadow:0 3px 12px rgba(201,123,58,.35)} .btn-craft:active{transform:scale(.97)} .btn-craft:disabled{opacity:.35;cursor:not-allowed} .btn-craft.loading-craft::after{content:'';display:inline-block;width:12px;height:12px; margin-left:10px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff; border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle} .btn-demo{width:100%;background:transparent;color:var(--dim);border:1px solid rgba(255,255,255,0.1); border-radius:11px;padding:10px;font-size:13px;font-family:inherit;cursor:pointer; letter-spacing:.04em;transition:all .2s} .btn-demo:hover{background:rgba(220,60,60,0.12);color:#e07070;border-color:rgba(220,60,60,0.3)} /* Botón de consumibles: dorado en lugar de acento */ .btn-use{background:linear-gradient(135deg,rgba(180,120,30,0.9),rgba(232,168,48,0.85)); box-shadow:0 3px 12px rgba(232,168,48,.3)} .recipe-consumable{border-color:rgba(232,168,48,0.2)} .recipe-consumable.can-craft{border-color:rgba(232,168,48,0.6)} /* Pestañas del taller de construcción */ .build-tabs{display:flex;gap:6px;padding:10px 16px 0;background:var(--panel)} .build-tab{flex:1;padding:8px 4px;border:none;border-radius:8px 8px 0 0; background:rgba(255,255,255,0.04);color:var(--dim);font-size:12px;font-weight:600; cursor:pointer;transition:all .2s;letter-spacing:.3px} .build-tab:hover{background:rgba(255,255,255,0.08);color:var(--light)} .build-tab.active{background:rgba(201,123,58,0.18);color:var(--accent); border-bottom:2px solid var(--accent)} /* ── LA LIMPIEZA ── */ .clean-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,5,2,.93); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:18px;padding:28px} .clean-title{font-size:19px;color:var(--light);text-align:center;line-height:1.4} .clean-sub{font-size:13px;color:var(--dim);text-align:center} .clean-canvas-wrap{position:relative;width:min(300px,85vw);height:min(300px,85vw); border-radius:20px;overflow:hidden;border:2px solid var(--border); box-shadow:0 0 40px rgba(201,123,58,.2)} .clean-reward-icon{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;font-size:72px} canvas#cleanCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair} .clean-progress{width:min(300px,85vw);height:8px;background:rgba(255,255,255,.08); border-radius:4px;overflow:hidden} .clean-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:4px;transition:width .2s ease} .clean-reward-msg{background:var(--panel);border:1px solid var(--gold);border-radius:14px; padding:12px 20px;font-size:14px;color:var(--gold);text-align:center;animation:fadeUp .4s ease} .btn-clean-skip{background:none;border:1px solid var(--border);color:var(--dim); border-radius:10px;padding:10px 24px;font-size:13px;font-family:inherit;cursor:pointer} /* ── CHAT ── */ #screen-chat{justify-content:flex-end;padding:0} .chat-bg{position:absolute;inset:0;background-size:cover;background-position:center top} .chat-bg::after{content:'';position:absolute;inset:0;background:rgba(28,18,8,.7)} .chat-panel{position:relative;z-index:10;width:100%;height:66dvh;background:var(--panel); border-top:2px solid var(--border);backdrop-filter:blur(16px); display:flex;flex-direction:column;border-radius:20px 20px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.5)} .chat-hdr{display:flex;align-items:center;justify-content:space-between; padding:15px 19px 11px;border-bottom:1px solid var(--border)} .chat-hdr-name{font-size:14px;color:var(--light)} .chat-x{background:none;border:none;color:var(--dim);font-size:20px;cursor:pointer;padding:4px} .chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:11px; scrollbar-width:thin;scrollbar-color:var(--border) transparent} .msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:14px; line-height:1.55;animation:fadeUp .3s ease} .msg.auri{background:rgba(107,74,40,.35);border:1px solid var(--border); align-self:flex-start;border-radius:4px 14px 14px 14px;color:var(--light)} .msg.user{background:rgba(201,123,58,.2);border:1px solid rgba(201,123,58,.35); align-self:flex-end;border-radius:14px 4px 14px 14px;color:var(--light)} .msg.typing{opacity:.6;font-style:italic} .chat-inp-row{display:flex;gap:10px;padding:11px 15px 24px;border-top:1px solid var(--border)} .chat-inp{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--border); border-radius:24px;padding:11px 17px;color:var(--text);font-size:14px; font-family:inherit;outline:none;resize:none;max-height:100px;overflow-y:auto} .chat-inp:focus{border-color:var(--accent)} .chat-send{background:var(--accent);border:none;border-radius:50%;width:44px;height:44px; font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center; flex-shrink:0;transition:background .2s,transform .1s;box-shadow:0 4px 12px rgba(201,123,58,.4)} .chat-send:active{transform:scale(.92)} /* ── PREVIEW ── */ #screen-preview{background:var(--bg);padding:36px 22px;gap:26px;text-align:center} .prev-img{width:150px;object-fit:contain;filter:drop-shadow(0 0 28px var(--accent)); animation:pulse 4s ease-in-out infinite} .prev-title{font-size:21px;color:var(--light);line-height:1.4} .prev-speech{background:rgba(107,74,40,.25);border:1px solid var(--border);border-radius:16px; padding:15px 19px;font-size:14px;color:var(--light);line-height:1.6; font-style:italic;max-width:310px} .prev-sub{font-size:13px;color:var(--dim);line-height:1.7;max-width:290px} .btn-store{background:var(--gold);color:#1C1208;border:none;border-radius:12px; padding:14px 26px;font-size:15px;font-family:inherit;font-weight:bold;cursor:pointer; letter-spacing:.04em;box-shadow:0 4px 16px rgba(232,168,48,.35)} /* ── OBJETOS NFC ────────────────────────────────────────────── */ #screen-accessories{justify-content:flex-start;padding:0;overflow:hidden} .acc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .acc-card{ background:var(--panel);border:1px solid var(--border);border-radius:16px; padding:14px 12px;display:flex;flex-direction:column;align-items:center; gap:5px;text-align:center;position:relative; } .acc-card.rarity-rare {border-color:var(--gold);background:rgba(232,168,48,.07)} .acc-card.rarity-mythic{border-color:#9B8ABF;background:rgba(107,74,139,.1); box-shadow:0 0 12px rgba(155,138,191,.2)} .acc-emoji{font-size:34px} .acc-label{font-size:12px;color:var(--light);line-height:1.3;font-weight:bold} .acc-rarity{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em} .acc-card.rarity-rare .acc-rarity{color:var(--gold)} .acc-card.rarity-mythic .acc-rarity{color:#9B8ABF} .acc-bonus{font-size:10px;color:var(--accent);margin-top:2px} .acc-synergy{font-size:10px;color:var(--gold)} .syn-card{ background:linear-gradient(135deg,rgba(201,123,58,.12),rgba(232,168,48,.08)); border:1px solid var(--accent);border-radius:12px;padding:11px 14px; display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .syn-label{flex:1;font-size:13px;color:var(--light)} .syn-detail{font-size:11px;color:var(--gold)} .syn-exp{font-size:10px;color:var(--dim);width:100%} /* ── TOASTS ── */ .toasts{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:999; display:flex;flex-direction:column;gap:8px;pointer-events:none;width:90%;max-width:350px} .toast{background:var(--panel);border:1px solid var(--border);border-radius:12px; padding:11px 17px;font-size:13px;color:var(--light);text-align:center; animation:fadeUp .3s ease;backdrop-filter:blur(12px)} .toast.success{border-color:var(--gold);background:rgba(42,28,14,.95)} .toast.error{border-color:#8b3a2a;background:rgba(50,18,10,.95)} /* ── DIORAMA ACCESORIOS VISUALES (Flotando en el taller) ── */ .diorama-layer { position:absolute; inset:0; pointer-events:none; z-index:8; } .diorama-item { position:absolute; pointer-events:auto; cursor:pointer; animation: float-diorama 3.5s ease-in-out infinite alternate; display:flex; align-items:center; justify-content:center; --diorama-scale: 1; /* sobreescrito por getSlotStyle vía inline style */ } .diorama-emoji { font-size:48px; filter:drop-shadow(0 8px 12px rgba(0,0,0,0.6)); position:relative; z-index:2; } .diorama-glow { position:absolute; width:65px; height:65px; border-radius:50%; background:radial-gradient(circle, rgba(232,168,48,0.45) 0%, transparent 70%); animation: pulse-glow 2s infinite alternate; } .diorama-glow.glow-mythic { background:radial-gradient(circle, rgba(155,138,191,0.6) 0%, transparent 70%); } @keyframes float-diorama { 0% { transform:translateX(-50%) translateY(0) scale(var(--diorama-scale)); } 100% { transform:translateX(-50%) translateY(-12px) scale(var(--diorama-scale)); } } @keyframes pulse-glow { 0% { transform:scale(0.8); opacity:0.5; } 100% { transform:scale(1.2); opacity:1; } } /* Edificios construidos: más pequeños y sin flotación */ .diorama-building { animation:none!important; } .diorama-building .diorama-emoji { font-size:34px; } .diorama-building .diorama-img { width:56px; } /* ── NAV DE RECUERDOS EN INVENTARIO ── */ .inv-memories-nav { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,rgba(168,120,232,0.08),var(--panel)); border:1px solid rgba(168,120,232,0.20); border-radius:14px; padding:14px 16px; margin-bottom:8px; cursor:pointer; transition:all .2s; } .inv-memories-nav:active { transform:scale(.98); } /* ── PANTALLA DE RECUERDOS ── */ .memories-info-banner { background:rgba(168,120,232,0.07); border:1px solid rgba(168,120,232,0.18); border-radius:14px; padding:14px 16px; font-size:12px; color:var(--dim); line-height:1.75; margin-bottom:4px; } .memory-card { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:8px; transition:border-color .2s; } .memory-pinned { border-color:rgba(168,120,232,0.40); background:linear-gradient(135deg,rgba(168,120,232,0.07),var(--panel)); } .memory-type-icon { font-size:22px; min-width:28px; text-align:center; flex-shrink:0; } .memory-body { flex:1; min-width:0; } .memory-label { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; } .memory-value { font-size:14px; color:var(--light); font-weight:500; word-break:break-word; } .memory-tag { font-size:10px; color:rgba(255,255,255,0.25); margin-top:3px; } /* Botón fijar */ .btn-mem-pin { background:rgba(232,168,48,0.12); border:1px solid rgba(232,168,48,0.30); border-radius:9px; padding:6px 10px; font-size:13px; color:var(--gold); cursor:pointer; transition:all .2s; white-space:nowrap; font-family:inherit; } .btn-mem-pin:disabled { opacity:.35; cursor:not-allowed; } .btn-mem-pin:not(:disabled):active { transform:scale(.94); } /* Botón desclavar */ .btn-mem-unpin { background:rgba(168,120,232,0.12); border:1px solid rgba(168,120,232,0.28); border-radius:9px; padding:6px 10px; font-size:14px; cursor:pointer; transition:all .2s; flex-shrink:0; font-family:inherit; } .btn-mem-unpin:active { transform:scale(.94); } /* Botón borrar */ .btn-mem-del { background:none; border:1px solid rgba(255,255,255,0.08); border-radius:9px; padding:5px 8px; font-size:11px; color:var(--dim); cursor:pointer; transition:all .2s; font-family:inherit; } .btn-mem-del:active { transform:scale(.94); color:#e07070; border-color:rgba(220,60,60,.3); } /* ── OVERLAYS DE OBJETOS CONSTRUIDOS (PNG capa completa) ── */ .build-layer { position:absolute; inset:0; pointer-events:none; z-index:3; } .build-layer-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; } /* ── OVERLAYS DE DECORACIONES ── */ .deco-overlay { position:absolute; inset:0; pointer-events:none; z-index:2; transition: opacity 0.8s ease; } /* Lámpara de pared: cálida luz ámbar en el ángulo superior-derecho */ .deco-wall-lamp { background: radial-gradient(ellipse 55% 45% at 85% 20%, rgba(255,180,60,0.28) 0%, transparent 70%); } /* Suelo de roble: franja cálida en la parte baja (si no hay JPG variante) */ .deco-oak-floor { background: linear-gradient(to top, rgba(120,80,30,0.18) 0%, transparent 35%); } /* Mariposas / jardín bee: brillo suave dorado desde arriba */ .deco-hanging-pot { background: radial-gradient(ellipse 70% 35% at 50% 0%, rgba(200,220,80,0.16) 0%, transparent 65%); } /* Alfombra musgosa: tinte verde en el suelo */ .deco-mossy-rug { background: linear-gradient(to top, rgba(40,100,40,0.22) 0%, transparent 28%); } /* Chip de mood boost en HUD */ .mood-boost-chip { background: linear-gradient(135deg, rgba(232,168,48,0.25), rgba(107,74,40,0.4)); border: 1px solid var(--gold); animation: pulse-mood 2.5s ease-in-out infinite alternate; } @keyframes pulse-mood { 0% { box-shadow: 0 0 4px rgba(232,168,48,0.3); } 100% { box-shadow: 0 0 10px rgba(232,168,48,0.7); } } /* ── IMÁGENES 3D DE LOS ACCESORIOS ── */ .diorama-img { width: 90px; height: auto; object-fit: contain; filter: drop-shadow(0 15px 20px rgba(0,0,0,0.6)); position: relative; z-index: 2; } .acc-img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); } /* ═══════════════════════════════════════════════════════════ FIX 3 — Prevenir selección de texto / popup del sistema en móvil Añadir al FINAL de app.css ───────────────────────────────────────────────────────────── Problema: al tocar rápido menús, burbujas o botones en iOS/Android, el sistema abre el menú "Copiar / Buscar en Google", rompiendo la inmersión del juego. Solución: user-select:none en todos los elementos interactivos. Las excepciones (input, textarea) siguen siendo seleccionables para que el chat funcione correctamente. ═══════════════════════════════════════════════════════════ */ body, .menu-panel, .btn, .btn-act, .btn-menu, .slot-btn, .panel-back, .chat-bubble, .toast-message, .acc-card, .inv-card, .syn-card, .screen, .panel-screen, .panel-body, .panel-hdr { -webkit-user-select: none; /* Chrome/Safari en Android */ -webkit-touch-callout: none; /* Safari iOS: suprime popup "Copiar/Buscar" al mantener pulsado */ user-select: none; } /* EXCEPCIONES: inputs y textareas deben seguir siendo seleccionables para escribir en el chat y rellenar el formulario de auth */ input, textarea { -webkit-user-select: text; -webkit-touch-callout: default; user-select: text; } /* ═══════════════════════════════════════════════════════════ AURI SOUL — Minijuegos: Armonía Musical + Enigma del Taller Añadir al FINAL de assets/css/app.css ═══════════════════════════════════════════════════════════ */ /* ── Armonía Musical — contenedor de nota flotante ──────── */ .music-note-container { position: absolute; inset: 0; pointer-events: none; /* no bloquea toques en el diorama */ z-index: 30; overflow: hidden; } /* La nota en sí — círculo de color que sube lentamente */ .music-note { position: absolute; bottom: 18%; width: 52px; height: 52px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.55); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: all; /* sí intercepta el toque */ transform: translateX(-50%); animation: note-float 6s ease-in forwards; box-shadow: 0 0 14px rgba(255, 255, 255, 0.35); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .music-note-emoji { font-size: 24px; line-height: 1; pointer-events: none; } /* Nota sube suavemente y desaparece al llegar arriba */ @keyframes note-float { 0% { bottom: 18%; opacity: 1; } 75% { opacity: 1; } 100% { bottom: 92%; opacity: 0; } } /* Halo pulsante para llamar la atención */ .music-note::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); animation: note-pulse 1.3s ease-in-out infinite; } @keyframes note-pulse { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.28); opacity: 0.1; } } /* ── Enigma — badge flotante en el taller ───────────────── */ .enigma-badge { position: absolute; top: 68px; left: 50%; transform: translateX(-50%); background: rgba(22, 10, 48, 0.85); color: #ddd0ff; font-size: 12px; font-family: inherit; padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(170, 120, 255, 0.4); cursor: pointer; z-index: 25; display: flex; align-items: center; gap: 7px; backdrop-filter: blur(5px); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; animation: enigma-glow 2.8s ease-in-out infinite; } @keyframes enigma-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(170, 120, 255, 0); } 50% { box-shadow: 0 0 0 7px rgba(170, 120, 255, 0.15); } } /* ── Enigma — barra de estado dentro del chat ───────────── */ .enigma-chat-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: rgba(22, 10, 48, 0.92); color: #cdb8ff; font-size: 12px; border-bottom: 1px solid rgba(170, 120, 255, 0.25); flex-shrink: 0; } /* Botón "Rendirse" dentro de la barra */ .enigma-skip { background: transparent; border: 1px solid rgba(170, 120, 255, 0.4); color: #a880d8; font-size: 11px; padding: 3px 12px; border-radius: 12px; cursor: pointer; font-family: inherit; -webkit-user-select: none; user-select: none; transition: background 0.15s; } .enigma-skip:active { background: rgba(170, 120, 255, 0.18); } /* ── ICONOS CUSTOM (PNG) ── */ /* Botones de acción */ .btn-ic { width: 26px; height: 26px; object-fit: contain; display: block; filter: brightness(0.9); } /* Chips de recursos en HUD */ .res-ic { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } /* Grid de inventario */ .inv-res-ic { width: 36px; height: 36px; object-fit: contain; margin-bottom: 4px; } /* Cost-chips de construcción */ .cost-ic { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; } /* Icono de objeto en lista de construcciones */ .bld-list-ic { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } /* ── BLOQUEO ORIENTACIÓN HORIZONTAL ── */ #rotate-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: #1C1208; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; padding: 40px; } #rotate-overlay .rot-icon { font-size: 56px; animation: rotateHint 2s ease-in-out infinite; } #rotate-overlay .rot-title { font-size: 18px; font-weight: 700; color: #F5E6C8; letter-spacing: .03em; } #rotate-overlay .rot-sub { font-size: 13px; color: rgba(245,230,200,0.5); line-height: 1.7; max-width: 260px; } @keyframes rotateHint { 0%,100% { transform: rotate(0deg); } 40% { transform: rotate(-90deg) scale(1.08); } 60% { transform: rotate(-90deg) scale(1.08); } } @media (orientation: landscape) and (max-height: 500px) { #rotate-overlay { display: flex; } } /* ── ICONO CHINCHETA (ui-pin.png) ── */ /* En cabecera de pantalla */ .pin-ic { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: 4px; flex-shrink: 0; } /* Inline dentro de texto (banner, estado vacío) */ .pin-ic-inline { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; display: inline-block; } /* Pequeño — dentro del botón del chat */ .pin-ic-sm { width: 14px; height: 14px; object-fit: contain; display: block; } /* ── PIN DESDE EL CHAT ── */ /* Wrapper de cada burbuja de mensaje */ .msg-wrap { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 8px; } /* Mensajes de Auri: burbuja a la izquierda, pin a la derecha */ .msg-wrap.auri { flex-direction: row; } /* Mensajes del usuario: pin a la izquierda, burbuja a la derecha */ .msg-wrap.user { flex-direction: row-reverse; } /* Quitar el margin-bottom del .msg ya que lo maneja .msg-wrap */ .msg-wrap .msg { margin-bottom: 0; } /* Botón 📌 junto a cada burbuja */ .btn-pin-msg { background: none; border: none; font-size: 14px; line-height: 1; padding: 2px 3px; cursor: pointer; opacity: 0.20; flex-shrink: 0; transition: opacity 0.2s; -webkit-user-select: none; user-select: none; touch-action: manipulation; } .btn-pin-msg:hover, .btn-pin-msg:active { opacity: 0.80; } .btn-pin-msg:disabled { opacity: 0.08; cursor: not-allowed; } /* ══════════════════════════════════════════════════════════ DIARIO DEL SABIO — Lore screen ══════════════════════════════════════════════════════════ */ /* Barra de progreso superior */ .lore-progress-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; flex-shrink: 0; border-bottom: 1px solid var(--border); } .lore-progress-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; } .lore-progress-track { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin: 0 12px; overflow: hidden; } .lore-progress-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width .5s ease; } .lore-progress-count { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; } /* Tarjeta de página desbloqueada */ .lore-card { background: rgba(58,52,96,0.18); border: 1px solid rgba(138,122,176,0.22); border-radius: 12px; padding: 16px; margin-bottom: 10px; transition: border-color .2s; } .lore-card-unlocked { border-color: rgba(184,168,106,0.35); } .lore-page-num { font-size: 10px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; margin-bottom: 6px; } .lore-title { font-size: 15px; color: var(--gold); font-weight: 600; line-height: 1.3; margin-bottom: 10px; } .lore-content { font-size: 13px; color: var(--light); line-height: 1.75; font-style: italic; /* Permitir selección de texto para copiar */ -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .lore-divider { width: 32px; height: 1px; background: var(--gold); opacity: .35; margin: 10px 0 0; } /* Tarjeta de página bloqueada */ .lore-card-locked { background: rgba(20,18,30,0.40); border-color: rgba(255,255,255,0.06); opacity: 0.80; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lore-locked-info { flex: 1; min-width: 0; } .lore-locked-label { font-size: 12px; color: var(--dim); font-style: italic; } /* Botón de desbloqueo */ .lore-btn-unlock { display: flex; align-items: center; gap: 5px; background: rgba(184,168,106,0.12); border: 1px solid rgba(184,168,106,0.30); border-radius: 18px; color: var(--gold); font-size: 12px; padding: 7px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-family: inherit; transition: background .15s, border-color .15s; touch-action: manipulation; } .lore-btn-unlock:hover, .lore-btn-unlock:active { background: rgba(184,168,106,0.22); border-color: rgba(184,168,106,0.55); } .lore-btn-unlock:disabled { opacity: 0.35; cursor: not-allowed; } /* Estado vacío / cargando */ .lore-empty { text-align: center; padding: 60px 20px; color: var(--dim); line-height: 2; } .lore-empty-icon { font-size: 36px; margin-bottom: 14px; } .lore-empty-text { font-size: 14px; color: var(--light); }