@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root{--bg:#0b1023;--p:#182042;--p2:#223057;--line:#4f5e90;--txt:#f4f1ff;--muted:#b2b4d0;--lime:#b7ff59;--mint:#5ff1d0;--pink:#ffa7d7;--purple:#a873ff;--yellow:#ffe84d} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 80% 45% at 50% -10%,#322b62 0,transparent 75%),var(--bg);color:var(--txt);font-family:'DM Sans',sans-serif}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}a{color:inherit;text-decoration:none}canvas,img{max-width:100%}.app{max-width:1740px;margin:auto;padding:0 25px}.site-header{min-height:102px;border-bottom:1px solid #3d375c;display:flex;align-items:center;gap:18px}.logo{height:96px;width:174px;display:flex;align-items:center;overflow:hidden;flex:none}.logo img{width:164px;object-fit:contain;filter:drop-shadow(0 0 12px #9e54e64d)}.header-name{display:flex;flex-direction:column;gap:7px;min-width:220px}.header-name strong{font-size:13px;letter-spacing:1.8px}.header-name small{font-size:9px;letter-spacing:1.9px;color:#adacca}.beta{font-size:9px;border:1px solid #7c64c4;border-radius:3px;padding:4px 5px;vertical-align:middle;color:#d5bfff;letter-spacing:.6px;margin-left:7px}.header-right{margin-left:auto;display:flex;align-items:center;gap:10px}.status{font-size:9px;letter-spacing:1px;color:#c1bdde;white-space:nowrap}.status i,.live-dot{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;box-shadow:0 0 10px #94ff85;margin-right:5px}.header-btn,.game-actions button,.small-button{border:1px solid #67618d;background:#242342;color:#ece5ff;border-radius:6px;padding:11px 14px;font-size:10px;font-weight:800;letter-spacing:.5px}.header-btn:hover,.game-actions button:hover,.small-button:hover{background:#3f3862}.header-btn.alt{border-color:#3e655e;color:#b9f4d4}.headline{padding:22px 3px 19px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.overline{font-size:10px;letter-spacing:1.5px;color:var(--mint);font-weight:700}.headline h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,2.8vw,41px);letter-spacing:-1.5px;line-height:1.12;margin:9px 0}.headline h1 em{font-style:normal;color:var(--yellow)}.headline p{font-size:12px;line-height:1.55;color:#bdc0d9;margin:0;max-width:740px}.headline-stats{display:flex;gap:20px;align-items:end}.headline-stats>div{border-left:1px solid #464366;padding:3px 0 2px 15px;min-width:100px}.headline-stats span{display:block;color:#a6a5c7;font-size:9px;letter-spacing:.7px;white-space:nowrap}.headline-stats b{display:block;color:#fff;font:800 25px 'Space Grotesk',sans-serif;margin-top:3px}.dashboard{display:grid;grid-template-columns:minmax(226px,270px) minmax(0,1fr) minmax(236px,280px);gap:14px;align-items:start}.left-col,.right-col,.middle-col{min-width:0;display:flex;flex-direction:column;gap:14px}.panel,.tools-panel,.game-frame{background:linear-gradient(165deg,#20213d,#171a32);border:1px solid #49456e;border-radius:10px;box-shadow:0 9px 30px #05071127}.panel{padding:16px}.panel-label{display:flex;justify-content:space-between;align-items:center;gap:5px;color:#d5cbff;font-weight:800;font-size:10px;letter-spacing:.6px;margin-bottom:13px}.panel-label span:last-child{color:#9399ba;font-size:9px}.panel-label .lime,.lime{color:var(--lime)!important}.person{display:flex;gap:12px;align-items:center}.person canvas,.avatar-layout canvas,.preset-grid canvas{image-rendering:pixelated}.person canvas{width:76px;height:76px;background:linear-gradient(145deg,#364267,#1a4e4f);border:1px solid #728091;border-radius:7px}.person strong{display:block;font-size:15px;max-width:150px;overflow-wrap:anywhere}.person small{display:block;font-size:9px;color:#9eaac6;letter-spacing:.5px;margin:6px 0 9px}.small-button{padding:7px;font-size:8px;letter-spacing:.2px}.xp-top{display:flex;justify-content:space-between;margin:15px 0 6px;font-size:9px;color:#c5c3df}.meter{height:7px;background:#101526;border-radius:50px;border:1px solid #48486b;overflow:hidden}.meter>div,.meter>i{display:block;background:linear-gradient(90deg,#70ddbb,#d8f38a);height:100%;width:0;transition:width .2s}.tip{border-top:1px solid #3a3a61;font-size:10px;color:#acb5d3;margin-top:14px;padding-top:12px;line-height:1.8}.tip b{color:var(--yellow)}.inventory-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.inventory-grid>div{display:flex;align-items:center;gap:6px;background:#272945;border:1px solid #404361;border-radius:6px;padding:9px 6px;font-size:13px;min-width:0}.inventory-grid span{font-size:10px;color:#cfcee5;min-width:0;overflow:hidden;text-overflow:ellipsis}.inventory-grid strong{margin-left:auto;font-size:12px;color:#ffefaf}.goals h3{color:#f7d793;font:800 17px 'Space Grotesk',sans-serif;line-height:1.3;margin:4px 0 13px}.goals-list{display:flex;flex-direction:column;gap:7px}.goal{display:flex;align-items:flex-start;gap:7px;font-size:10px;color:#c9cbdd;line-height:1.45;padding:7px;background:#262743;border:1px solid #393956;border-radius:5px}.goal b{font-size:12px;color:#8d91b3}.goal.done{color:#9dedcb;border-color:#375c5c}.goal.done b{color:#97ffc4}.daily-title{border-top:1px solid #44415e;padding-top:13px;margin:15px 0 10px;font-weight:800;font-size:10px;color:#eccd92}.game-frame{overflow:hidden;border-color:#67528c}.frame-top,.frame-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#2e2a4b;padding:12px 14px;color:#e1d6fc;font-size:10px;letter-spacing:.4px;font-weight:700}.frame-top b{color:#b6f9b5}.frame-top>div{display:flex;gap:13px;color:#c6bee4}.frame-bottom{background:#1a2236;color:#9fa5c2;padding:9px 12px;font-size:9px}.frame-bottom i{background:#6df9ba;display:inline-block;width:5px;height:5px;border-radius:50%}.viewport{position:relative;overflow:hidden;background:#31755f;touch-action:manipulation}.viewport canvas{display:block;width:100%;height:auto;image-rendering:pixelated;cursor:crosshair;aspect-ratio:5/3}.view-badge,.view-hint{position:absolute;left:12px;background:#151b32d9;padding:7px 9px;color:#eeffde;font-weight:700;font-size:9px;pointer-events:none;border:1px solid #b7eb9d63;border-radius:3px}.view-badge{top:12px}.view-hint{bottom:12px;left:auto;right:12px;color:#fff2bd}.notice{position:absolute;top:18%;left:50%;transform:translateX(-50%) translateY(-8px);background:#141b32e8;color:#faffda;border:1px solid #b8ec90;border-radius:7px;box-shadow:0 4px 30px #020713a8;padding:13px 16px;font-weight:700;font-size:12px;opacity:0;pointer-events:none;transition:.2s;min-width:190px;text-align:center}.notice.show{opacity:1;transform:translateX(-50%) translateY(0)}.tools-panel{padding:15px}.tool-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.tool{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#2e304e;color:#e4dff9;border:1px solid #494867;border-radius:7px;font-size:9px;font-weight:800;padding:12px 3px;letter-spacing:.2px}.tool span{font-size:23px;filter:drop-shadow(0 2px 0 #172230)}.tool.active{background:linear-gradient(160deg,#4c477a,#405c5b);border-color:#b9ec8d;color:#faffdc;box-shadow:inset 0 0 0 1px #bee98055}.tool:hover{border-color:#a3b6ba}.tool-option{display:flex;align-items:center;gap:9px;padding-top:12px;color:#a7accb;font-size:10px;min-height:41px}.tool-option label{font-size:9px;white-space:nowrap;font-weight:700;color:#d2caec}.tool-option select,.avatar-options select{padding:8px;background:#151b33;color:#f3ebff;border:1px solid #666187;border-radius:5px;font-size:11px}.tool-option select{max-width:210px}.tool-option>span{margin-left:auto;text-align:right}.game-actions{display:flex;flex-wrap:wrap;gap:8px}.game-actions button{flex:1;padding:11px 9px;background:#252440;white-space:nowrap}.life-hero{display:flex;gap:10px;align-items:center}.life-hero canvas{width:102px;height:100px;flex:none;image-rendering:pixelated;background:radial-gradient(#647549,#283e48);border:1px solid #69698e;border-radius:7px}.life-hero>div{min-width:0}.life-hero span{font-size:9px;color:#9feeaf}.life-hero h2{font:800 25px 'Space Grotesk',sans-serif;color:#fff5bb;margin:5px 0}.life-hero p{color:#bfc9d7;font-size:10px;line-height:1.45;margin:0}.life-bars{margin:15px 0}.life-bars>div{display:grid;grid-template-columns:59px 1fr 35px;align-items:center;gap:5px;margin-bottom:10px;font-size:10px;color:#c4c8df}.life-bars b{text-align:right;color:#f9f0bb;font-size:9px}.life-bars .meter{height:9px}.creature-quote{border-left:3px solid #d8ba72;background:#3b3455;color:#f8e8c1;font-size:11px;line-height:1.6;padding:11px;margin:4px 0 12px}.memory-label{font-size:9px;letter-spacing:.7px;color:#b7e5d6;font-weight:800}.memories{max-height:96px;overflow:auto;display:flex;flex-direction:column;gap:5px;margin:9px 0}.memories div{font-size:10px;color:#aab6cb;line-height:1.5;border-left:2px solid #4b7e80;padding-left:7px}.primary-btn{display:block;width:100%;background:linear-gradient(90deg,#c2fc8b,#7ce7bf);border:0;border-radius:6px;color:#183b3b;font-size:11px;font-weight:900;letter-spacing:.4px;padding:13px 9px}.primary-btn:hover{filter:brightness(1.12)}#minimap{display:block;width:min(100%,196px);height:auto;aspect-ratio:1;image-rendering:pixelated;margin:0 auto;border:5px solid #383751;border-radius:7px;background:#0f1627}.atlas-note{font-size:10px;color:#adb6cf;line-height:1.5;margin:9px 0}.species{display:flex;flex-wrap:wrap;gap:5px}.species span{font-size:9px;border:1px solid #5b5d77;color:#c9cbda;padding:5px 6px;border-radius:4px;background:#282943}.species span.seen{color:#bcffc4;border-color:#568b74;background:#23473e}.journal #logs{display:flex;flex-direction:column;gap:8px;max-height:160px;overflow:auto}.entry{border-left:2px solid #6d6a8d;padding-left:8px;font-size:10px;line-height:1.4;color:#bec1d7}.entry b{color:#c6e7ab;font-weight:700}.foot{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #343756;padding:25px 4px;margin-top:25px;font-size:9px;color:#9ba2bc;letter-spacing:.7px}.overlay{position:fixed;inset:0;background:#090b1bd9;display:flex;justify-content:center;align-items:center;padding:14px;z-index:60;overflow:auto}.hidden{display:none!important}.modal{position:relative;background:linear-gradient(150deg,#282747,#161d37);border:1px solid #8175bc;border-radius:11px;padding:24px;width:min(100%,600px);max-height:92vh;overflow:auto;box-shadow:0 25px 80px #030310}.modal h2{font:800 26px 'Space Grotesk',sans-serif;letter-spacing:-.5px;margin:10px 0}.modal p{font-size:12px;color:#cbd0df;line-height:1.7}.modal p b{color:#ffeab4}.close{position:absolute;right:14px;top:10px;color:#ece0fa;background:none;border:0;font-size:26px}.avatar-layout{display:flex;gap:17px;align-items:center;margin:18px 0}.avatar-layout canvas{width:128px;background:#29475a;border:1px solid #698780;border-radius:7px}.avatar-layout label{flex:1;font-size:10px;color:#b3b6d7;font-weight:700}.avatar-layout input,.chat-form input{display:block;width:100%;margin-top:8px;padding:12px;background:#0f192f;border:1px solid #65618c;border-radius:6px;color:white}.preset-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0}.preset-grid button{display:grid;place-items:center;padding:5px;background:#30405a;border:1px solid #556684;border-radius:6px}.preset-grid button.selected{border-color:#bcf18a;background:#345e5b}.preset-grid canvas{width:52px;height:54px}.avatar-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}.avatar-options label{font-size:9px;color:#b8c4d8}.avatar-options select{width:100%;display:block;margin-top:5px}.chat-messages{height:210px;overflow:auto;background:#111a2f;border:1px solid #4c526c;border-radius:6px;display:flex;flex-direction:column;gap:8px;padding:10px}.chat-bubble{max-width:87%;font-size:12px;line-height:1.55;padding:10px 12px;border-radius:7px;overflow-wrap:anywhere}.chat-bubble.you{align-self:flex-end;background:#3e466e}.chat-bubble.them{align-self:flex-start;background:#355744;color:#dcffe6}.chat-form{display:flex;gap:8px;align-items:end;margin-top:10px}.chat-form input{flex:1;min-width:0;margin:0}.chat-form button{width:108px}.microcopy{font-size:10px;color:#a9a8c4;margin:10px 0} @media(max-width:1370px){.dashboard{grid-template-columns:230px minmax(0,1fr) 240px;gap:11px}.panel{padding:12px}.app{padding:0 15px}.inventory-grid>div{font-size:10px;padding:7px 4px}.tool{font-size:8px}.tool span{font-size:20px}.headline-stats{gap:8px}} @media(max-width:1040px){.dashboard{grid-template-columns:minmax(220px,1fr) minmax(0,2.1fr)}.right-col{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr}.tool{padding:8px 3px}.status{display:none}.right-col .life-hero canvas{width:80px;height:85px}.life-hero h2{font-size:20px}} @media(max-width:720px){.app{padding:0 10px}.site-header{gap:8px;min-height:80px;flex-wrap:wrap;padding:7px 0}.logo{width:95px;height:60px}.logo img{width:95px}.header-name{min-width:0;flex:1}.header-name strong{font-size:10px;letter-spacing:.6px}.header-name small{font-size:7px;letter-spacing:.45px}.beta{font-size:7px}.header-right{width:100%;margin:0;justify-content:flex-end}.header-btn{padding:8px;font-size:9px}.headline{display:block;padding:20px 0 15px}.headline h1{font-size:29px}.headline p{font-size:11px}.headline-stats{margin-top:16px;justify-content:space-between}.headline-stats>div{min-width:0;flex:1}.headline-stats span{font-size:8px}.headline-stats b{font-size:20px}.dashboard{display:flex;flex-direction:column}.middle-col{order:0;width:100%}.left-col{order:1;width:100%;display:grid;grid-template-columns:1fr 1fr}.right-col{order:2;display:flex;width:100%}.account{grid-column:1/-1}.goals{grid-column:1/-1}.tool-row{grid-template-columns:repeat(4,1fr)}.tool{font-size:8px;min-height:59px}.tool-option{flex-wrap:wrap}.tool-option>span{margin-left:0;width:100%;text-align:left}.view-badge,.view-hint{font-size:7px;padding:4px}.view-hint{max-width:60%;text-align:right}.frame-top,.frame-bottom{padding:8px;font-size:8px}.frame-top>div{gap:6px}.game-actions button{font-size:9px;padding:10px 5px}.foot{flex-direction:column;gap:5px;font-size:8px}.atlas #minimap{width:170px}.avatar-options{grid-template-columns:repeat(2,1fr)}} @media(max-width:410px){.left-col{display:flex}.left-col>.panel{width:100%}.frame-top{font-size:7px}.frame-top>span{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tool{min-height:57px}.preset-grid{grid-template-columns:repeat(4,1fr)}.modal{padding:17px}.avatar-layout canvas{width:96px}.view-hint{display:none}} /* v0.4 · vínculos, preguntas, cocina y capítulos */ .requests-intro{font-size:11px;color:#c3c6dd;line-height:1.55;margin:0 0 10px} .request-list{display:grid;gap:8px}.request-card{background:#292740;border:1px solid #6c5b8b;border-radius:8px;padding:10px;text-align:left;width:100%;color:#f9e9fa;display:flex;gap:8px;align-items:flex-start} .request-card:hover{border-color:#e1d58a}.request-card.on{background:#3c345f;border-color:#d5ed96}.request-card .bubble{font-size:24px}.request-card strong{display:block;font-size:11px;color:#fff0ba}.request-card span:last-child{font-size:10px;line-height:1.4}.request-card small{display:block;margin-top:4px;color:#c4d4ce;font-size:9px} .craft-heading{font-size:10px;color:#fbdc8a;font-weight:800;letter-spacing:.4px;margin-top:17px;margin-bottom:8px}.recipe-row{display:grid;gap:6px}.recipe-btn{background:#2a2f46;border:1px solid #6d6778;border-radius:7px;color:#f4ebdf;text-align:left;padding:9px;font-weight:800;font-size:10px}.recipe-btn:hover{background:#3c3b5f}.recipe-btn small{display:block;color:#adb8c8;font-weight:500;margin-top:4px} .chapter-panel{background:linear-gradient(110deg,#26314b,#2c244b 60%,#42365b);border:1px solid #9480b3;border-radius:10px;padding:17px 20px;box-shadow:0 10px 25px #0004}.chapter-kicker{display:flex;justify-content:space-between;gap:12px;color:#92f5c4;font-weight:900;font-size:10px;letter-spacing:.7px}.chapter-kicker span{color:#e8c3ff}.chapter-panel h2{font-family:'Space Grotesk',sans-serif;color:#ffecaa;font-size:22px;margin:8px 0 5px}.chapter-panel p{margin:0 0 13px;color:#cac6dd;line-height:1.5;font-size:12px}.chapter-tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.chapter-task{display:flex;align-items:center;gap:7px;border:1px solid #59567b;border-radius:6px;padding:9px;background:#242840;color:#e6deef;font-size:10px}.chapter-task.done{color:#b3faca;background:#255342;border-color:#568c73}.chapter-task b{white-space:nowrap;font-size:11px;color:#ffe9aa}.chapter-foot{margin-top:12px;border-top:1px solid #5b557e;padding-top:10px;display:flex;gap:9px;justify-content:space-between;font-size:10px;color:#cabfea}.chapter-foot strong{color:#b1f9a8} .pet-picker{margin-top:10px;margin-bottom:10px}.pet-picker label{display:block;font-size:9px;letter-spacing:.4px;color:#a8f6df;font-weight:800;margin-bottom:7px}.pet-picker select{padding:9px;background:#272642;border:1px solid #77749c;border-radius:6px;color:#fff8db;width:100%;font-size:12px} .pet-request{background:#343357;border:1px solid #c3a96e;border-radius:7px;padding:12px;margin:10px 0;color:#fdf2d7}.pet-request b{font-size:10px;color:#ffe597}.pet-request p{font-size:12px;line-height:1.4;margin:7px 0}.pet-request small{color:#c6ebd6}.pet-request .progress{height:5px;background:#191c32;border-radius:20px;margin-top:9px;overflow:hidden}.pet-request .progress i{display:block;height:100%;background:#c6ef89} .pet-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 14px}.pet-actions button{min-height:35px;padding:6px 2px;border-color:#68628b;font-size:9px} .creature-question{border-top:1px solid #555178;padding-top:13px;margin-top:11px;margin-bottom:14px}.creature-question>span{font-size:10px;font-weight:900;color:#bff5f0}.creature-question p{font-size:12px;color:#f8e4b0;line-height:1.5}.question-choices{display:grid;gap:6px}.question-choices button{background:#292d4d;border:1px solid #7f6f9e;color:#ede4ff;padding:8px 9px;font-size:10px;text-align:left;border-radius:6px}.question-choices button:hover{background:#4b4174;border-color:#d6c38b}.creature-question small{display:block;color:#b6bacd;margin-top:8px;font-size:10px} @media(max-width:760px){.chapter-tasks{grid-template-columns:1fr}.chapter-panel{padding:15px}.chapter-kicker{font-size:8px}.pet-actions{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Botonera táctil móvil. Superpuesta al mapa sin cubrir el resto de las opciones. */ .touch-pad{display:none;position:absolute;left:8px;bottom:9px;z-index:4;width:146px;height:146px;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:none;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);gap:4px} .touch-arrow{pointer-events:auto;border:2px solid #c9f6d5;background:#1e284de8;color:#fff9c1;font-size:21px;font-weight:900;display:grid;place-items:center;border-radius:11px;box-shadow:0 3px 0 #0e1728,0 0 12px #0008;touch-action:none;-webkit-tap-highlight-color:transparent} .touch-arrow:active,.touch-arrow.pressed{background:#487d6b;color:white;transform:translateY(2px);box-shadow:0 1px 0 #0e1728} .touch-up{grid-column:2;grid-row:1}.touch-left{grid-column:1;grid-row:2}.touch-down{grid-column:2;grid-row:3}.touch-right{grid-column:3;grid-row:2} @media(max-width:760px){.touch-pad{display:grid}.viewport .view-hint{display:none}.viewport canvas{min-height:245px;object-fit:cover}.view-badge{left:auto;right:8px;max-width:58%;text-align:right}} @media(max-width:390px){.touch-pad{transform:scale(.8);transform-origin:bottom left}} /* v0.5 móvil pantalla completa y colores más vivos */ .viewport{background:#34a26f} .viewport canvas{filter:saturate(1.22) contrast(1.08) brightness(1.03)} .mobile-hud{display:none} .mobile-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 8px 0} .mobile-tab{border:1px solid #5d6198;background:#232744;color:#f4ebff;border-radius:10px;padding:10px 6px;font-size:10px;font-weight:800;letter-spacing:.25px} .mobile-tab.active{background:linear-gradient(180deg,#35556a,#283952);border-color:#bdf48c;color:#f8ffd9} .mobile-panel-wrap{padding:8px} .mobile-panel{display:none;background:linear-gradient(180deg,#1e2340,#171c34);border:1px solid #49507c;border-radius:12px;padding:10px} .mobile-panel.active{display:block} .mobile-tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .mobile-choice-row{display:flex;align-items:center;gap:8px;margin-top:8px}.mobile-choice-row label{font-size:10px;font-weight:800;color:#ddd7ff;white-space:nowrap}.mobile-choice-row select{flex:1;padding:9px 10px;background:#10162d;border:1px solid #666ca1;border-radius:9px;color:#fff6d2} .mobile-desc{font-size:10px;color:#c2c9dd;line-height:1.45;margin:8px 2px 0} .mobile-food-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mobile-food-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:linear-gradient(180deg,#334461,#26314a);border:1px solid #63759f;border-radius:10px;color:#fff4d0;padding:10px 8px;font-size:20px;font-weight:800}.mobile-food-btn span{font-size:10px;color:#e6e9f4}.mobile-food-btn b{font-size:13px;color:#c5ff8b}.mobile-food-btn.active{background:linear-gradient(180deg,#4f6e4f,#395a49);border-color:#c3f88e} .mobile-pet-card{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.mobile-pet-card small{display:block;color:#9effc2;font-size:9px;font-weight:800}.mobile-pet-card strong{display:block;color:#fff0a6;font-size:20px;font-family:'Space Grotesk',sans-serif;margin:3px 0}.mobile-pet-card p{margin:0;color:#e8dfff;font-size:11px;line-height:1.4} .mobile-bars{display:grid;gap:8px;margin-top:10px}.mobile-bars>div{display:grid;grid-template-columns:52px 1fr 38px;gap:7px;align-items:center;color:#d7ddf4;font-size:10px}.mobile-bars b{font-size:10px;color:#ffefad;text-align:right} .mobile-request-box{margin-top:10px;background:#322e53;border:1px solid #bdaf72;border-radius:9px;padding:10px}.mobile-request-box b{font-size:10px;color:#ffe997}.mobile-request-box p{margin:5px 0 0;font-size:11px;color:#fff6dc;line-height:1.4} .mobile-pet-actions{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:7px;margin-top:10px}.mobile-pet-actions .primary-btn,.mobile-pet-actions .small-button{width:100%;padding:11px 8px;font-size:10px} .mobile-bag-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.mobile-bag-grid>div{background:#262c48;border:1px solid #49527b;border-radius:10px;padding:10px 6px;display:flex;flex-direction:column;gap:3px;align-items:flex-start}.mobile-bag-grid span{font-size:9px;color:#cdd1e2}.mobile-bag-grid b{font-size:12px;color:#fff4b1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-mini-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.mobile-mini-actions .small-button{padding:11px 8px;font-size:10px} @media(max-width:760px){html,body{height:100%;overflow:hidden}.app{height:100dvh;max-width:none;padding:0;display:flex;flex-direction:column}.site-header{padding:8px 10px;gap:8px;min-height:auto;flex-wrap:nowrap;background:linear-gradient(180deg,#131937,#11152c);position:relative;z-index:6}.header-right{width:auto}.status,.header-name small,.headline,.left-col,.right-col,.chapter-panel,.tools-panel,.game-actions,.foot{display:none!important}.logo{width:88px;height:58px}.logo img{width:88px}.header-name strong{font-size:11px;letter-spacing:.4px}.beta{font-size:7px;padding:3px 4px}.header-btn{padding:8px 9px;font-size:8px}.dashboard{display:block;flex:1;min-height:0}.middle-col{height:100%;display:flex;flex-direction:column;gap:0}.game-frame{border-radius:0;border-left:0;border-right:0;display:flex;flex-direction:column;min-height:0;flex:1}.frame-top,.frame-bottom{padding:8px 10px;font-size:8px}.viewport{flex:1;min-height:0}.viewport canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}.touch-pad{bottom:8px;left:8px;transform:scale(.93);transform-origin:bottom left}.view-badge{top:8px;right:8px;left:auto;max-width:60%;font-size:8px;padding:6px 7px;text-align:right}.view-hint{display:none}.mobile-hud{display:block;background:linear-gradient(180deg,#161a34,#11152b);border-top:1px solid #464f7a;padding-bottom:env(safe-area-inset-bottom,0)}.mobile-panel-wrap{padding:8px 8px 10px}.notice{top:11%;font-size:11px;padding:10px 12px;min-width:150px}.overlay{padding:8px}.modal{max-height:94dvh}} @media(max-width:420px){.mobile-food-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mobile-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.mobile-bag-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.touch-pad{transform:scale(.82)}} /* 0.5.1: gesto directo y cámara adaptativa (más grandes los personajes) */ @media(max-width:760px){.viewport canvas{touch-action:none;object-fit:fill;image-rendering:pixelated}.viewport{touch-action:none}.header-name strong{white-space:normal}.logo img{max-height:56px;object-fit:contain}} /* TERRABITS Historia 0.6 */ .tool-row{grid-template-columns:repeat(8,minmax(0,1fr))}.tool{padding:9px 3px} .story-strip{position:absolute;top:8px;left:8px;right:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:3;background:#11162fdd;border:1px solid #c8b77a;border-radius:10px;padding:9px 10px;pointer-events:none;box-shadow:0 3px 14px #07162799} .story-strip>div{display:flex;flex-direction:column;gap:2px;min-width:0}.story-strip b{color:#ffee99;font-size:10px;letter-spacing:.4px}.story-strip span{color:#f5f5fc;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:460px}.story-strip button{pointer-events:auto;flex:none;border:1px solid #8bdfab;background:#285345;color:#efffde;border-radius:8px;font-size:10px;font-weight:900;padding:9px} .view-badge{top:66px}.album-teaser{background:#2a2944;border:1px solid #b9a45f;border-radius:8px;padding:10px;display:grid;gap:6px;margin:12px 0}.album-teaser b{color:#ffec8d;font-size:10px}.album-teaser span{font-size:11px;color:#dddaed}.album-teaser .small-button{width:100%;font-size:10px;padding:9px} .story-modal{padding:0;max-width:650px;width:min(96vw,650px);overflow:hidden;display:flex;flex-direction:column;max-height:94dvh}.story-hero{height:170px;position:relative;overflow:hidden;flex-shrink:0}.story-hero img{height:100%;width:100%;object-fit:cover;object-position:center 55%;image-rendering:pixelated;filter:saturate(1.2)}.story-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#151a38ee 96%)}.story-hero-copy{position:absolute;bottom:8px;left:20px;right:20px;z-index:1}.story-hero-copy span{font-size:9px;font-weight:900;letter-spacing:1px;color:#bdfb8c}.story-hero-copy h2{font:900 24px 'Space Grotesk',sans-serif;color:#fff6af;margin:3px 0}.story-hero-copy p{margin:0;color:#f2ebff;font-size:11px}.story-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:10px 12px;background:#1b203d}.story-tabs button{padding:10px 5px;border:1px solid #59658b;border-radius:7px;background:#292d4c;color:#e9e4f8;font-size:10px;font-weight:900}.story-tabs button.selected{background:#4e6654;border-color:#c6f58e;color:#feffda}.story-content{padding:15px 18px;overflow-y:auto;flex:1;min-height:150px;max-height:42dvh}.story-content h3{font:900 20px 'Space Grotesk',sans-serif;color:#fff1a8;margin:5px 0 9px}.story-content p{font-size:12px;line-height:1.62;color:#d7daea;margin:7px 0}.story-content .story-lede{background:#242d4d;border-left:4px solid #a7f59a;padding:12px;border-radius:4px;color:#f6f1d6;font-size:13px}.story-tasks{display:grid;gap:7px;margin:12px 0}.story-task{display:flex;align-items:center;gap:9px;background:#292e4d;border:1px solid #4f5682;border-radius:8px;padding:9px;color:#e1e7e8;font-size:12px}.story-task.done{border-color:#91d7a6;color:#adf4c2;background:#294638}.story-tag{display:inline-block;background:#34435b;color:#bef2df;border:1px solid #698b9f;padding:5px 8px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.5px}.story-tip{border:1px solid #897757;background:#383448;border-radius:8px;margin-top:10px;padding:12px;color:#fff0c5;font-size:11px;line-height:1.6}.story-guide-list{display:grid;gap:8px}.story-guide-list details{background:#232944;border:1px solid #545e86;border-radius:8px;padding:10px 12px}.story-guide-list summary{cursor:pointer;color:#ffeaa7;font-size:12px;font-weight:800}.story-guide-list p{margin-bottom:0}.story-collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.story-rare{background:#212841;border:1px solid #5f658a;border-radius:9px;padding:11px;display:grid;grid-template-columns:45px 1fr;gap:9px;align-items:center}.story-rare.found{border-color:#eac778;background:#374055}.story-rare .rare-icon{font-size:33px;text-align:center;filter:drop-shadow(0 0 10px #ffe99166)}.story-rare strong{display:block;font-size:12px;color:#fff3c8}.story-rare small{display:block;font-size:9px;color:#b3bcd1;margin-top:3px}.story-rare p{font-size:10px;margin:4px 0 0}.story-rare:not(.found){filter:saturate(.45)}.story-block-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.story-block-gallery>div{border:1px solid #566185;border-radius:7px;background:#252c4c;padding:10px;font-size:11px;color:#e6e3f8}.story-block-gallery small{display:block;color:#aeebbb;margin-top:4px}.story-modal-foot{padding:10px 16px;background:#1e2542;border-top:1px solid #465076;display:flex;gap:12px;align-items:center;justify-content:space-between}.story-modal-foot>span{font-size:10px;color:#ffe5a1;font-weight:800}.story-modal-foot .primary-btn{width:auto;padding:11px 14px;font-size:10px} @media(max-width:760px){.site-header .header-btn.alt{display:none}.site-header{padding:5px 7px}.site-header .story-menu-btn{font-size:9px;padding:9px 7px;border-color:#d2b879;color:#ffe8a0}.site-header #openAvatar{padding:9px 7px}.logo{width:69px;height:54px}.logo img{width:69px}.header-name strong{font-size:10px}.story-strip{top:4px;left:5px;right:5px;padding:6px 8px;gap:5px}.story-strip b{font-size:8px}.story-strip span{font-size:9px;max-width:220px}.story-strip button{font-size:9px;padding:6px 8px}.view-badge{top:55px;right:6px;font-size:7px}.mobile-hud .tool{padding:7px 2px;min-height:45px}.mobile-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.mobile-tool-grid .tool span{font-size:16px}.story-modal{width:100%;max-height:96dvh}.story-hero{height:130px}.story-hero-copy h2{font-size:19px}.story-content{max-height:45dvh;padding:12px}.story-tabs button{font-size:9px;padding:10px 2px}.story-collection{grid-template-columns:1fr}.story-strip ~ canvas{filter:saturate(1.32) contrast(1.08)}.mobile-bag-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:390px){.header-name small{display:none}.site-header .header-btn{font-size:8px}.story-strip span{max-width:155px}.story-hero{height:115px}} /* 0.7 · Diseño móvil centrado en jugar, escuchar y responder. */ @media(max-width:760px){ html,body{height:100%;overflow:hidden}body{background:#0a1024}.app{height:100dvh;padding:0} .site-header{height:57px;min-height:57px;max-height:57px;flex:none;padding:3px 8px;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;background:#111831;border-bottom:2px solid #4a5381} .logo{width:60px;height:49px;flex:none}.logo img{width:60px;max-height:49px} .header-name{flex:1;min-width:0;max-width:none;overflow:hidden}.header-name strong{display:block;white-space:normal;font-size:9px;letter-spacing:0;line-height:1.4}.header-name small{display:none} .beta{display:block;border:0;padding:0;font-size:8px;color:#c3ffa0;letter-spacing:.3px;margin:1px 0 0} .header-right{flex:none;width:auto;margin-left:0;gap:5px;align-items:center} .site-header .header-btn{min-height:36px;padding:7px 8px;font-size:9px;white-space:nowrap;letter-spacing:0;border-radius:9px} .site-header #openAvatar{font-size:0;padding:7px 10px;min-width:37px}.site-header #openAvatar:before{content:'👤';font-size:16px} .site-header .story-menu-btn{font-size:0;padding:7px 10px;min-width:37px}.site-header .story-menu-btn:before{content:'☰';font-size:19px} .frame-top{min-height:31px;flex:none;padding:7px 9px;white-space:nowrap;font-size:8px} .frame-top>span{max-width:76%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mobile-voice{display:flex;align-items:center;gap:9px;background:linear-gradient(100deg,#253958,#232448);border-bottom:1px solid #698c81;padding:8px 10px;min-height:58px;flex:none} .mobile-voice-icon{display:grid;place-items:center;background:#4a7058;border:1px solid #9ce99f;border-radius:10px;width:35px;height:35px;font-size:20px;flex:none} .mobile-voice-copy{flex:1;min-width:0;display:grid;gap:2px} .mobile-voice-copy strong{font-size:10px;color:#ffe48b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.6px} .mobile-voice-copy span{font-size:11px;color:#ebf4ff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .mobile-voice button{flex:none;background:#b3f17f;color:#172d28;border:1px solid #ceffa5;border-radius:9px;min-height:37px;padding:8px 12px;font-size:10px;font-weight:900;box-shadow:0 3px 0 #21382d} .story-strip{display:none!important}.view-badge{top:5px;right:7px;left:auto;font-size:7px;max-width:61%;padding:4px 6px;opacity:.85} .touch-pad{bottom:7px;left:6px;transform:scale(.74);transform-origin:bottom left} .viewport{flex:1;min-height:0;touch-action:none}.viewport canvas{object-fit:fill;width:100%;height:100%} .mobile-hud{flex:none;max-height:min(36dvh,258px);overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -4px 19px #030819aa;background:#0f1833} .mobile-tabs{padding:7px 8px 1px;gap:5px}.mobile-tab{min-height:36px;padding:7px 3px;font-size:9px;letter-spacing:0} .mobile-panel-wrap{padding:5px 7px 7px}.mobile-panel{padding:6px 7px;border-radius:9px;max-height:min(27dvh,190px);overflow-y:auto;overscroll-behavior:contain} .mobile-tool-grid{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;gap:5px;padding:0 0 3px} .mobile-tool-grid .tool{flex:0 0 66px;width:66px;height:61px;min-height:61px;font-size:8px;gap:3px;padding:5px 1px;border-radius:8px} .mobile-tool-grid .tool span{font-size:22px}.mobile-choice-row{margin-top:3px;gap:5px} .mobile-choice-row label{font-size:9px}.mobile-choice-row select{padding:6px;min-height:30px;font-size:11px}.mobile-desc{display:none} .mobile-food-grid{display:flex;overflow-x:auto;gap:6px;padding:1px}.mobile-food-btn{flex:0 0 82px;min-width:82px;padding:6px 9px;font-size:19px;border-radius:8px;gap:0;min-height:73px} .mobile-food-btn span{font-size:9px}.mobile-food-btn b{font-size:12px} .mobile-pet-card p{max-width:270px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-pet-card strong{font-size:18px}.mobile-pet-card small{font-size:8px} .mobile-bars{margin-top:6px;gap:4px}.mobile-bars>div{font-size:9px;grid-template-columns:58px 1fr 38px}.mobile-request-box{padding:6px 8px;margin-top:6px}.mobile-request-box p{font-size:10px}.mobile-pet-actions{margin-top:7px} .mobile-pet-actions .primary-btn,.mobile-pet-actions .small-button{padding:9px 4px;min-height:36px} .frame-bottom{height:27px;flex:none;padding:4px 8px;line-height:1.3;font-size:7px} .notice{top:12%;z-index:8;max-width:80%;font-size:11px} .game-frame{border-bottom:none} } .mobile-voice{display:none} @media(max-width:760px){.mobile-voice{display:flex}} /* Capa de conversación accesible: ver pregunta, responder y consultar memoria. */ .chat-dialog{max-width:540px;padding:0;display:flex;flex-direction:column;max-height:min(94dvh,780px);overflow:hidden;background:linear-gradient(165deg,#20294c,#131e39);border:2px solid #9bcc9a} .chat-hero{display:flex;align-items:center;gap:12px;padding:16px 20px 12px;background:linear-gradient(100deg,#384b60,#27314f);border-bottom:1px solid #718b9c} .chat-hero .chat-avatar{background:#3d5e50;border:1px solid #84c08c;border-radius:14px;font-size:30px;display:grid;place-items:center;width:54px;height:54px} .chat-hero h2{margin:5px 0;font-size:24px;color:#fff2ad}.chat-hero small{color:#d9f9d5;font-size:10px} .chat-inner{overflow:auto;padding:10px 15px 15px;overscroll-behavior:contain} .chat-question{background:linear-gradient(155deg,#34414c,#283c50);border:1px solid #87bb9a;border-radius:11px;padding:10px 12px;margin-bottom:10px} .chat-section-title{font-size:10px;font-weight:900;letter-spacing:.6px;color:#d3ffb1}.chat-question p{font-size:13px;color:#fff6d2;margin:6px 0 9px;line-height:1.4} .chat-question-options{display:grid;grid-template-columns:1fr;gap:6px}.chat-question-options button{padding:9px 12px;text-align:left;background:#273c61;border:1px solid #6e91a0;border-radius:8px;color:#f2f8ff;font-size:11px;font-weight:700;min-height:35px} .chat-question-options button:active{background:#426e64}.question-rest{display:block;color:#ffe8b6;font-size:11px;padding:3px 0} .chat-quick{display:flex;overflow-x:auto;gap:6px;margin-bottom:10px;padding:1px}.chat-quick button{flex:none;border:1px solid #657b99;background:#303754;color:#f5efff;border-radius:30px;padding:7px 10px;white-space:nowrap;font-size:10px} .chat-dialog .chat-messages{min-height:110px;max-height:180px;height:150px;background:#121e38;flex:none} .chat-dialog .chat-bubble{font-size:11px;padding:8px 10px}.chat-dialog .chat-form{margin-top:8px;gap:6px}.chat-dialog .chat-form input{font-size:12px;padding:11px}.chat-dialog .chat-form button{width:83px;min-height:40px;padding:9px 5px;font-size:10px} .brain-memories{background:#182846;border:1px solid #54678a;border-radius:8px;margin-top:10px;padding:8px 10px;color:#fff2b6}.brain-memories summary{cursor:pointer;font-size:11px;font-weight:800}.brain-memories summary span{background:#38565b;padding:3px 6px;border-radius:5px;color:#d7ffbd}.brain-memory-list{padding-top:8px;display:grid;gap:6px}.brain-memory{font-size:11px;line-height:1.45;border-left:2px solid #9edc96;padding:6px;background:#25344e;color:#e5ebf9} .chat-dialog .microcopy{margin-top:8px;font-size:9px;line-height:1.5} @media(max-width:760px){.chat-dialog{max-height:94dvh;width:100%;border-radius:15px}.chat-hero{padding:11px 14px 9px}.chat-hero .chat-avatar{height:43px;width:43px;font-size:24px}.chat-hero h2{font-size:20px;margin:2px 0}.chat-inner{padding:9px 11px 11px}.chat-question{padding:9px}.chat-question p{font-size:12px;margin:5px 0 8px}.chat-question-options{grid-template-columns:1fr}.chat-question-options button{font-size:11px;min-height:34px;padding:8px}.chat-dialog .chat-messages{height:100px;min-height:85px;max-height:110px}.chat-quick{margin-bottom:7px}.chat-dialog .chat-form input{font-size:12px}} /* 0.7.1: la invitación a hablar no cubre el mapa tampoco en escritorio */ .story-strip{display:none!important} .game-frame > .mobile-voice{display:flex;align-items:center;gap:10px;min-height:50px;background:linear-gradient(100deg,#263a54,#262447);border-bottom:1px solid #68897f;padding:7px 12px} .game-frame > .mobile-voice .mobile-voice-icon{display:grid;place-items:center;background:#456a57;border:1px solid #9ce99f;border-radius:10px;width:35px;height:35px;font-size:20px;flex:none} .game-frame > .mobile-voice .mobile-voice-copy{flex:1;min-width:0;display:grid;gap:2px} .game-frame > .mobile-voice .mobile-voice-copy strong{font-size:10px;color:#ffe48b;letter-spacing:.5px} .game-frame > .mobile-voice .mobile-voice-copy span{font-size:11px;color:#edf2ff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .game-frame > .mobile-voice button{background:#b3f17f;color:#172d28;border:1px solid #ceffa5;border-radius:9px;min-height:35px;padding:7px 12px;font-size:10px;font-weight:900} .view-badge{top:8px} .chat-bubble.thinking{opacity:.72;font-style:italic} /* TERRABITS 0.8 · El grupo sigue al jugador y narración inicial para todos */ .party-hud{display:flex;align-items:center;gap:10px;background:linear-gradient(100deg,#253e3f,#26264d);border-bottom:1px solid #5b8b75;padding:8px 12px;min-height:38px;font-size:10px;font-weight:900;color:#d6f7df;letter-spacing:.1px} .party-hud span:first-child{flex:1;color:#e6ffc9}.party-hud #familyClock{color:#ffe8a8}.party-hud button{white-space:nowrap;border:1px solid #71988f;background:#283d4a;color:#f4fff0;border-radius:8px;padding:5px 9px;font-size:9px;font-weight:900} .party-hud button:hover,.party-hud button:focus-visible{background:#41646b} .mobile-pet-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-pet-actions button{min-height:38px} .welcome-modal{width:min(100%,660px);max-height:93dvh;overflow-y:auto;padding:0;border:2px solid #8fcba4;background:#18233e} .welcome-scene{display:block;width:100%;height:190px;object-fit:cover;image-rendering:auto;border-bottom:2px solid #6baea2} .welcome-body{padding:20px 23px}.welcome-speaker{font-size:12px;font-weight:900;color:#ffe891;margin-top:9px} .welcome-body h2{font-size:clamp(20px,5vw,30px);color:#fff0a3;margin:8px 0}.welcome-body p{font-size:14px;line-height:1.65;color:#f3f1fc;min-height:72px} .welcome-objective{border:1px solid #73b98d;background:#244b4c;color:#e8ffca;border-radius:11px;padding:13px;font-size:12px;line-height:1.5;font-weight:700} .welcome-controls{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:17px}.welcome-controls button{font-size:12px;min-height:42px}.welcome-later{display:block;margin:12px auto 0;border:0;background:transparent;color:#b4c4d4;font-size:11px;text-decoration:underline} .welcome-modal .close{z-index:2;background:#0d1530cf;border:1px solid #89b8c5;border-radius:50%;width:36px;height:36px;display:grid;place-items:center} .story-modal-foot{flex-wrap:wrap}.story-modal-foot #reopenWelcome{min-height:34px} .story-fuana{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:10px}.story-fuana div{border:1px solid #525981;background:#262d47;padding:9px 4px;text-align:center;border-radius:7px;font-size:11px}.story-fuana .seen{background:#254f44;color:#e5ffbb;border-color:#88b88b} @media(max-width:760px){.party-hud{min-height:38px;padding:5px 7px;gap:5px}.party-hud #partyName{font-size:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.party-hud #familyClock{font-size:8px;white-space:nowrap}.party-hud button{font-size:8px;padding:7px 5px}.welcome-scene{height:135px}.welcome-body{padding:13px 15px}.welcome-body p{min-height:0;font-size:13px;line-height:1.5}.welcome-controls{margin-top:11px}.welcome-modal{max-height:94dvh}.story-fuana{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:365px){.party-hud #partyName{max-width:92px}.party-hud button{padding:5px 4px}.welcome-scene{height:104px}} /* TERRABITS 0.9: Corazón Vivo — interacción visible, legible y accesible */ .heart-open{border-color:#e7c786!important;color:#fff2b9!important;background:#443354!important} .quick-feed{background:linear-gradient(135deg,#e6ff85,#88efb6);color:#173b37;border:1px solid #ffffff80;padding:9px 10px;border-radius:9px;font-size:10px;font-weight:900;letter-spacing:.2px;min-height:36px;white-space:normal;line-height:1.3} .quick-feed:disabled{background:#34374f;color:#b8b7cb;border:1px solid #54516e} .quick-feed[hidden],.small-button[hidden]{display:none!important} .desktop-health,.mobile-health{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;margin:9px 0 12px;padding:10px;background:#243947;border:1px solid #527b7a;border-radius:10px;color:#e5ffe9;font-weight:800;font-size:10px} .heart-health .meter{grid-column:1/-1;height:9px}.heart-health .meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#6feec5,#ecf885);transition:width .2s} .heart-health button{grid-column:1/-1;background:#b6f3ac;color:#17352d;font-size:10px;min-height:34px} .heart-modal{width:min(100%,650px);max-height:92dvh;display:flex;flex-direction:column;overflow:hidden;padding:20px;background:linear-gradient(170deg,#232746,#111c35);border:1px solid #b3ad73} .heart-modal h2{color:#ffe7a3;font-size:clamp(20px,3.8vw,29px);margin:6px 30px 6px 0} .heart-subtitle{font-size:11px!important;margin:0 0 10px!important} .heart-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:10px} .heart-tabs button{background:#2f3251;color:#f1eaff;border:1px solid #62638c;border-radius:8px;padding:10px 5px;font-size:10px;font-weight:800;min-width:0} .heart-tabs button.active{background:#486654;color:#f5ffce;border-color:#c9f594} .heart-content{flex:1;overflow:auto;min-height:90px;overscroll-behavior:contain;display:grid;gap:8px;align-content:start} .heart-overview{background:#2d3851;color:#f4f6d9;border:1px solid #516c7b;border-radius:8px;padding:11px 12px;font-size:12px;line-height:1.5} .heart-row{background:#1e2942;border:1px solid #4c6280;border-radius:10px;padding:10px 12px} .heart-row.found{background:#293f40;border-color:#8fb783} .heart-row strong{display:block;color:#f8e6a2;font-size:12px}.heart-row p{margin:5px 0 0;font-size:11px;line-height:1.45;color:#d6dbe6} .heart-row label{display:block;font-size:10px;color:#e0e4ff;margin-bottom:7px} .heart-row select{display:block;width:100%;margin-bottom:10px;background:#121c32;border:1px solid #7d88b0;border-radius:8px;color:#fbf5da;padding:10px;font-size:12px} .heart-row button{width:100%;margin:5px 0;min-height:37px;font-size:11px} .heart-action{background:#bdf5b5;border:1px solid #defcbe;border-radius:8px;color:#183c31;font-weight:900;padding:10px} .heart-note{font-size:10px;color:#b4bfd4;line-height:1.6} .heart-close{padding-top:12px}.heart-close button{max-width:100%} .mobile-health{margin:5px 0;padding:6px 8px;font-size:9px} .mobile-health .meter{height:6px} .mobile-voice .voice-ctas{display:flex;flex-direction:column;gap:4px;flex:none;max-width:46%} .mobile-voice .voice-ctas button{min-height:29px;border-radius:8px;padding:5px 7px;font-size:9px;line-height:1.2} @media(max-width:760px){.header-right .heart-open{display:none!important}.mobile-voice .voice-ctas{max-width:46%}.mobile-voice .mobile-voice-copy{min-width:0;flex:1}.mobile-voice .mobile-voice-copy strong,.mobile-voice .mobile-voice-copy span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.mobile-mini-actions{grid-template-columns:1fr 1fr 1fr;gap:4px}.mobile-mini-actions .small-button{font-size:8px;padding:8px 3px}.heart-modal{padding:15px 12px;max-height:94dvh}.heart-tabs button{padding:9px 3px;font-size:9px}.heart-content{min-height:100px}.heart-modal .close{z-index:2}} @media(max-width:370px){.heart-tabs button{font-size:8px}.mobile-mini-actions{grid-template-columns:1fr 1fr}.mobile-mini-actions #m-openHeart{grid-column:1/-1}.mobile-voice .voice-ctas button{font-size:8px}} /* TERRABITS 1.0 · Destellos del Bosque — interacción y narrativa con pixel art original */ :root{--lime:#bfff75;--mint:#5bf4d0;--yellow:#ffe78a} .site-header{background:linear-gradient(115deg,#171932,#242045 48%,#161c35)} .site-header .beta{background:linear-gradient(90deg,#2d5561,#3b346e);border-color:#6da8a4;color:#d6ffca} .game-frame{box-shadow:0 0 0 1px #80eab71a,0 12px 40px #030e2c44} .party-hud{background:linear-gradient(96deg,#214b4c,#34325c);border-color:#86c7a2} .party-hud .destellos-button{border-color:#f3e69a;background:linear-gradient(135deg,#4b3c78,#324b72);color:#ffeeb8;box-shadow:0 0 14px #d8b3ff33} .party-hud .destellos-button span{background:#102d44;border-radius:5px;padding:2px 4px;color:#bffff0} .viewport{isolation:isolate} .pet-action-card[hidden],.destello-pista[hidden]{display:none!important} .pet-action-card{position:absolute;z-index:12;left:50%;bottom:14px;transform:translateX(-50%);width:min(470px,calc(100% - 20px));padding:12px 14px 13px;background:linear-gradient(125deg,#222b4af5,#182741f8 65%,#293b4cf6);border:2px solid #bfe99a;border-radius:16px;box-shadow:0 16px 60px #02091ed9,0 0 0 3px #b6f58a21;color:#fff6dc;animation:petCardIn .16s ease-out} @keyframes petCardIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}} .pet-card-close{position:absolute;right:6px;top:5px;background:#5e5268b9;border:1px solid #8e9ea4;color:white;border-radius:50%;font-size:18px;width:28px;height:28px;line-height:1} .pet-card-header{display:flex;align-items:center;gap:11px;margin:0 26px 8px 0;min-width:0} .pet-card-header canvas{flex:none;width:63px;height:63px;image-rendering:pixelated;border-radius:12px;background:radial-gradient(#73bb67,#355568);border:1px solid #8feac8} .pet-card-header>div{min-width:0;flex:1}.pet-card-header b{display:block;font-size:17px;color:#ffe49d}.pet-card-header small{display:block;font-size:10px;color:#bafad7;margin-top:2px}.pet-card-header p{margin:4px 0 0;line-height:1.35;font-size:11px;color:#f4f0ff;overflow-wrap:anywhere;max-height:43px;overflow:hidden} .pet-card-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .pet-card-actions button{padding:10px 4px;min-height:38px;border:1px solid #9ed2b1;border-radius:9px;font-size:10px;font-weight:900;background:#30445d;color:#ecfff6} .pet-card-actions button:first-child{background:#d3f890;color:#203b30;border-color:#eeffcc} .pet-card-actions button:nth-child(2){background:#4d416c;color:#ffe9f6;border-color:#a486c4} .pet-card-actions button:hover,.pet-card-actions button:focus-visible{filter:brightness(1.13)} .pet-card-actions button:disabled{opacity:.4;filter:grayscale(.6)} .viewport:has(.pet-action-card:not([hidden])) .touch-pad{opacity:.25;pointer-events:none} .destello-pista{position:absolute;z-index:7;top:12px;right:10px;display:flex;align-items:center;gap:7px;border:1px solid #f6e49e;background:linear-gradient(120deg,#433774ed,#1c3d5aee);border-radius:11px;box-shadow:0 4px 20px #111a3e88;padding:6px 7px;color:#ffefba;max-width:245px;animation:destelloPulse 2.3s ease-in-out infinite} @keyframes destelloPulse{50%{box-shadow:0 4px 22px #ffe7a43d,0 0 0 2px #f3d98244}} .destello-pista>span{font-size:21px;color:#ffed9a;line-height:1} .destello-pista>div{min-width:0;flex:1}.destello-pista b{display:block;font-size:9px;white-space:nowrap;color:#fff7ce}.destello-pista small{display:block;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#e1dcff;margin-top:2px} .destello-pista button{border:1px solid #b5e1bd;background:#b8f8bf;border-radius:8px;color:#1c3c39;font-weight:900;font-size:10px;padding:7px 9px;flex:0 0 auto}.destello-pista #destelloPistaCerrar{width:28px;height:28px;padding:0;border-color:#7e94b2;background:#34496a;color:#fff6cf;font-size:18px;line-height:1} .viewport:has(.destello-pista:not([hidden])) .view-badge{display:none} .destello-dialog{padding:0;overflow:auto;max-width:540px;max-height:92dvh;border:2px solid #dbb9ff;background:linear-gradient(160deg,#25214b,#162944);box-shadow:0 15px 95px #000b} .destello-dialog .close{z-index:5;background:#24223ccd;border-radius:50%;width:35px;height:35px;display:grid;place-items:center} .destello-illustration{height:150px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#5460ac 0%,#3a4776 33%,#283451 61%,#171b3c 100%);border-bottom:2px solid #92dad0} .destello-symbol{display:grid;place-items:center;color:#ffe9ad;filter:drop-shadow(0 0 11px #e4c2ff);font-size:72px;animation:destelloFloat 3s ease-in-out infinite} @keyframes destelloFloat{50%{transform:translateY(-8px) rotate(3deg)}} .shine-a,.shine-b{position:absolute;color:#fff7b4;font-size:38px;text-shadow:0 0 12px #fffabe}.shine-a{left:15%;top:24%;animation:destelloFloat 2.2s infinite}.shine-b{right:17%;bottom:18%;animation:destelloFloat 3.2s infinite} .destello-body{padding:17px 22px 20px} .destello-body h2,.destellos-diario h2{color:#ffeca9;font-size:clamp(20px,5vw,27px);margin:9px 0} .destello-body p{white-space:pre-line;line-height:1.65;color:#f3edff;font-size:13px;margin:0 0 14px} .destello-opciones{display:grid;gap:9px}.destello-opciones button{color:#fdf6de;text-align:left;border:1px solid #7ba8b0;background:linear-gradient(125deg,#304661,#293b5b);padding:13px;border-radius:10px;font-size:12px;line-height:1.4;font-weight:800} .destello-opciones button:hover,.destello-opciones button:focus-visible{border-color:#e8e3a2;background:#385c67} .destello-close-btn{margin-top:15px;width:100%;min-height:37px} .destellos-diario{width:min(95%,560px);padding:20px;max-height:93dvh;overflow:auto;border:2px solid #8dcfc9;background:linear-gradient(145deg,#243351,#1d2744)} .destellos-diario>p{font-size:12px;color:#d0dae9;line-height:1.55} .diario-encuentros{display:grid;gap:8px;margin:12px 0 16px} .destello-journal-overview{background:#36515a;color:#dbffd2;border:1px solid #86cfac;border-radius:10px;padding:11px;font-size:12px;font-weight:800} .destello-journal-entry{border:1px solid #4b6587;background:#252e4b;border-radius:9px;padding:11px} .destello-journal-entry.found{border-color:#a2cf92;background:#293f4a} .destello-journal-entry strong{display:block;font-size:12px;color:#ffeab0} .destello-journal-entry p{font-size:11px;line-height:1.55;color:#dbe1ed;margin:6px 0} .destello-journal-entry button{font-size:10px;margin-top:5px} @media(max-width:760px){.party-hud{gap:4px}.party-hud #openBestiaryQuick{display:none}.party-hud .destellos-button{font-size:8px;padding:7px 5px}.party-hud #partyName{max-width:93px}.destello-pista{max-width:150px;top:8px;right:4px;padding:5px 6px;gap:5px}.destello-pista>span{font-size:13px}.destello-pista small{max-width:72px}.destello-pista b{font-size:7px}.destello-pista button{font-size:8px;padding:6px 7px}.destello-pista #destelloPistaCerrar{width:22px;height:22px;font-size:14px}.pet-action-card{bottom:7px;width:calc(100% - 14px);padding:8px 9px 9px;border-radius:12px}.pet-card-header{gap:8px;margin-bottom:6px}.pet-card-header canvas{width:46px;height:46px}.pet-card-header b{font-size:13px}.pet-card-header small{font-size:9px}.pet-card-header p{font-size:10px;max-height:32px}.pet-card-actions{gap:4px}.pet-card-actions button{padding:7px 1px;font-size:9px;min-height:34px}.destello-illustration{height:110px}.destello-symbol{font-size:53px}.destello-body{padding:11px 14px 16px}.destello-body p{font-size:12px}.destello-opciones button{min-height:45px;padding:10px;font-size:11px}} @media(max-width:365px){.party-hud .destellos-button{font-size:7px}.party-hud #partyName{max-width:70px}.pet-action-card{padding:7px}.pet-card-actions button{font-size:8px}.pet-card-header p{display:none}} /* TERRABITS 1.1: conversaciones como actividad central */ .chat-dialog{max-width:650px;max-height:min(95dvh,850px)} .chat-dialog .chat-inner{display:flex;flex-direction:column;min-height:0;gap:8px;overflow:auto} .chat-context-row{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#c6efd7;font-size:10px;font-weight:800;background:#1b3150;border:1px solid #456877;padding:8px 10px;border-radius:9px} .chat-dialog .chat-messages{height:260px;max-height:42dvh;min-height:170px;flex:1;overscroll-behavior:contain;border-color:#729084;box-shadow:inset 0 8px 20px #0003} .chat-dialog .chat-bubble{font-size:12px;line-height:1.55;padding:10px 13px;white-space:pre-wrap;border-radius:12px;max-width:89%} .chat-dialog .chat-bubble.them{background:linear-gradient(145deg,#315644,#294969);border:1px solid #65978c;color:#f0fff1;border-bottom-left-radius:3px} .chat-dialog .chat-bubble.you{background:linear-gradient(145deg,#56417c,#3f4f80);border:1px solid #7e79a9;border-bottom-right-radius:3px} .chat-dialog .chat-form{margin-top:0;gap:8px;display:flex;align-items:stretch} .chat-dialog .chat-form input{height:44px;min-width:0;font-size:13px} .chat-dialog .chat-form button.primary-btn{width:88px;flex:none} .chat-circle-button{flex:0 0 45px;height:44px;background:#283c5a;border:1px solid #759693;color:#e9ffe8;border-radius:12px;font-size:20px;touch-action:manipulation} .chat-circle-button.listening{background:#8d3f6a;border-color:#ffb1d7;box-shadow:0 0 12px #fc72b583} .chat-circle-button:disabled{opacity:.4} .chat-settings{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:10px;color:#e3ebfb} .chat-setting{display:flex;align-items:center;gap:4px;cursor:pointer}.chat-setting input{accent-color:#aef294;width:15px;height:15px} #chatConnection{margin-left:auto;color:#c5f3bf;font-size:9px;font-weight:900} .chat-question-fold{border:1px solid #56758c;background:#20334a;border-radius:9px;padding:9px 11px} .chat-question-fold summary{cursor:pointer;color:#edffcb;font-size:11px;font-weight:800} .chat-question-fold .chat-question{margin-top:10px;margin-bottom:0} .chat-footer{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .chat-footer .microcopy{flex:1;min-width:190px;margin:0;font-size:9px;line-height:1.5} .chat-clear{border:1px solid #785c74;border-radius:8px;background:#302c49;color:#f2c9d8;padding:7px 9px;font-size:9px} .chat-quick{margin:0;padding:2px 0;gap:8px}.chat-quick button{padding:8px 11px;font-size:11px;background:#34456b;border-color:#657e9b} @media(max-width:760px){.chat-dialog{max-height:96dvh}.chat-dialog .chat-inner{gap:7px;padding:10px}.chat-dialog .chat-messages{height:clamp(160px,30dvh,280px);min-height:155px;max-height:38dvh}.chat-dialog .chat-bubble{font-size:12px}.chat-settings{gap:8px}.chat-dialog .chat-form input{height:43px}.chat-circle-button{flex-basis:42px;height:43px}.chat-dialog .chat-form button.primary-btn{width:76px}.chat-hero{padding-right:42px}} @media(max-height:650px){.chat-dialog .chat-messages{min-height:120px;height:24dvh}.chat-dialog .chat-inner{gap:5px}} /* TERRABITS 1.2 · Aldea viva: pequeños cultivos pixel art y oficios visibles */ .village-ticker{display:flex;align-items:center;min-height:29px;padding:5px 12px;color:#e5ffd1;background:linear-gradient(90deg,#16493e,#22435a);border-block:1px solid #417d68;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px} .village-dialog{max-width:680px}.village-dialog h3{font-size:13px;color:#d8f5bb;margin:18px 0 8px}.village-dialog p{font-size:12px;line-height:1.6;color:#d2d9eb} .village-stats,.village-resource-row{font-size:11px;padding:11px;background:#273d47;border:1px solid #5e9882;border-radius:9px;color:#f4ffd7;margin:9px 0;font-weight:800} .village-workers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.village-worker{min-width:0;background:#292d4b;border:1px solid #58618b;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px} .village-worker strong{font-size:11px;color:#fff4ba}.village-worker span{font-size:10px;color:#c2e9c3;line-height:1.45;min-height:26px}.village-worker label{font-size:9px;color:#b9b9d7}.village-worker select{width:100%;font-size:11px;border:1px solid #6c86a5;color:white;background:#1e3049;padding:8px 5px;border-radius:7px} .village-logs{display:grid;gap:6px;max-height:140px;overflow:auto;margin-bottom:12px}.village-logs div{font-size:11px;border-left:3px solid #a8e78e;background:#252d45;border-radius:4px;padding:7px 9px;color:#e2f4df} .mobile-village-note{font-size:10px;color:#c9eed2;margin-bottom:8px;line-height:1.4}.mobile-village-note+.village-workers{max-height:170px;overflow:auto} @media(max-width:760px){.mobile-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}.mobile-tab{padding:9px 2px;font-size:clamp(7px,1.9vw,10px)}.village-ticker{padding:5px 9px;font-size:9px;min-height:26px}.village-worker{padding:7px}.village-worker select{font-size:10px}.mobile-village-note+.village-workers{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:370px){.village-workers{grid-template-columns:1fr 1fr}.mobile-tab{letter-spacing:0}} /* TERRABITS 1.4 - familias y mensajes espontáneos */ .family-hud-button{background:linear-gradient(130deg,#36535b,#33415c)!important;border-color:#b9d795!important;color:#f7ffdf!important} .family-hud-button span{display:inline-grid;place-items:center;min-width:18px;height:18px;background:#c3f78d;color:#233327;border-radius:100%;padding:2px;font-size:9px} .families-dialog{max-width:660px}.families-dialog>p{font-size:12px;color:#c9d7da;line-height:1.55}.families-dialog h3{font-size:13px;color:#ffe7a8;margin:18px 0 8px} .families-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0}.families-stats>div{display:flex;justify-content:space-between;flex-direction:column;gap:6px;min-width:0;padding:10px;background:#2d3653;border:1px solid #526b7b;border-radius:10px;font-size:11px;color:#b9f4dd}.families-stats strong{font-size:23px;color:#fff4ba} .family-build-status{padding:10px;background:#233d48;color:#d9ffe3;font-size:11px;border:1px solid #527d79;border-radius:10px}.family-actions{display:flex;gap:7px;align-items:stretch;margin-top:10px}.family-actions .primary-btn{width:auto;flex:1}.family-actions .small-button{flex:0 0 145px} .family-home-list,.family-tree-list,.family-moments{display:grid;gap:7px}.family-home-card,.family-tree-card,.family-moment{border:1px solid #555e7d;background:#292d4c;border-radius:9px;padding:10px;color:#ebebff;font-size:11px;line-height:1.5}.family-home-card b,.family-tree-card b{display:block;color:#ffedab;font-size:12px}.family-home-card small,.family-tree-card small{display:block;color:#bbd8d5;margin-top:4px}.family-moments{max-height:145px;overflow:auto}.family-moment{font-size:10px;border-left:3px solid #b8ee9e} .mobile-family-open{display:block;width:100%;min-height:38px;margin:4px 0 8px;background:#345453;color:#edffca;border:1px solid #9be1a5;border-radius:9px;font-size:11px;font-weight:800} .companion-nudge[hidden]{display:none!important}.companion-nudge{position:absolute;right:11px;top:42px;z-index:5;width:min(315px,55%);background:linear-gradient(155deg,#2b3155ed,#163c45ef);border:2px solid #adf196;border-radius:13px;color:#fff1cd;padding:10px 11px;box-shadow:0 9px 30px #050a22bb;pointer-events:auto}.companion-nudge-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.companion-nudge-top b{font-size:10px;color:#baffaf}.companion-nudge-top button{background:transparent;border:0;color:#fef2c3;font-size:19px;padding:0 4px}.companion-nudge p{font-size:11px;line-height:1.45;margin:6px 0 8px}.companion-nudge>button{background:#bcfb8c;color:#14352a;border:0;border-radius:7px;font-size:10px;font-weight:900;padding:8px 10px} @media(max-width:760px){.party-hud{overflow-x:auto;scrollbar-width:thin;flex-wrap:nowrap!important}.party-hud>*{flex-shrink:0}.family-hud-button{font-size:9px}.companion-nudge{width:69%;max-width:260px;right:7px;top:36px;padding:7px 9px}.companion-nudge p{font-size:10px}.companion-nudge>button{padding:6px 8px;font-size:9px}.families-dialog{width:100%;max-height:92dvh;overflow:auto;padding:15px 12px}.family-actions{flex-direction:column}.family-actions .small-button{flex-basis:auto;min-height:36px}.families-stats>div{padding:8px;font-size:10px}.families-stats strong{font-size:19px}} /* 1.5 · Árbol de los Recuerdos — aventura, diario y huevo */ .party-hud .memory15-hud{background:linear-gradient(135deg,#166b55,#365671);color:#ffefb1;border-color:#c8edab;box-shadow:0 0 15px #a8ed9b33}.memory15-hud span{color:#cdfef0;background:#142f41;border-radius:5px;padding:2px 4px} .memory15-modal{padding:0;width:min(660px,100%);max-height:94dvh;overflow:auto;border:1px solid #c6e8b0;background:#171e36}.memory15-hero{height:205px;overflow:hidden;position:relative;background:#1b4960}.memory15-hero img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.memory15-hero::after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#111b35ec)}.memory15-hero-copy{position:absolute;z-index:1;left:22px;bottom:14px;right:40px}.memory15-hero-copy span{color:#b1ffca;font-weight:900;font-size:10px;letter-spacing:.8px}.memory15-hero-copy h2{margin:6px 0;font-size:clamp(22px,4vw,29px);color:#fff4b6;text-shadow:0 2px 7px #090c21}.memory15-hero-copy p{color:#ddf5dd;margin:0;font-size:11px} .memory15-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:10px 12px 5px}.memory15-tabs button{min-width:0;border:1px solid #465a72;background:#242d4b;border-radius:8px;color:#ecedf8;font-weight:900;padding:10px 2px;font-size:10px}.memory15-tabs button.active{background:#326852;border-color:#b7f7a5;color:#f8ffe3} .memory15-content{padding:12px 18px 16px;overflow:auto;max-height:46dvh;min-height:180px}.memory15-content h3{font:800 19px 'Space Grotesk',sans-serif;color:#ffeb9d;margin:7px 0}.memory15-content p{color:#d9e7dc;font-size:12px;line-height:1.6;margin:8px 0}.memory15-kicker{font-size:10px;color:#a5f5c6;font-weight:900;letter-spacing:1px}.memory15-note{padding:12px;background:#293c48;border-left:3px solid #bbef92;border-radius:7px;font-size:12px;color:#f1f1dd;line-height:1.6;margin:11px 0}.memory15-options{display:grid;gap:7px;margin-top:13px}.memory15-options button,.memory15-choice{background:#273759;border:1px solid #7b9f8e;color:#f7f2db;border-radius:9px;padding:12px;font-size:12px;text-align:left;font-weight:800}.memory15-options button:hover,.memory15-choice:hover{background:#376c5c;border-color:#d5e4a3}.memory15-stepbar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:10px 0}.memory15-stepbar i{height:7px;background:#3d5266;border-radius:4px}.memory15-stepbar i.done{background:linear-gradient(90deg,#a4f2b6,#ffe58b)}.memory15-quest{display:flex;gap:12px;align-items:flex-start;background:#222b45;border:1px solid #4b6b70;border-radius:9px;padding:12px;margin-top:12px}.memory15-quest .em{font-size:28px}.memory15-quest p{margin:4px 0 0}.memory15-quest strong{font-size:12px;color:#ffedaa}.memory15-list{display:grid;gap:8px}.memory15-entry{display:flex;gap:11px;border:1px solid #47586f;background:#222b44;border-radius:10px;padding:12px}.memory15-entry .pic{font-size:24px;min-width:31px}.memory15-entry b{display:block;font-size:12px;color:#ffefb3}.memory15-entry p{margin:5px 0 0;font-size:11px;color:#c7decf}.memory15-entry small{color:#97cbb1;font-size:9px}.memory15-place{display:flex;align-items:center;gap:12px;border:1px solid #526978;background:#25344b;border-radius:9px;padding:12px}.memory15-place .em{font-size:27px}.memory15-place b{font-size:12px;color:#f7eeb5}.memory15-place p{margin:3px 0;font-size:11px}.memory15-place button{margin-left:auto;background:#365b53;border:1px solid #96e9b5;color:#fff8d0;border-radius:8px;padding:9px;font-size:10px;font-weight:900}.memory15-egg{font-size:52px;text-align:center;filter:drop-shadow(0 0 16px #ffdc7d99)}.memory15-footer{display:flex;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid #446055;padding:10px 15px 13px}.memory15-footer span{font-size:10px;font-weight:900;color:#c6f8be}.memory15-footer button{width:auto;min-width:170px;padding:11px}.memory15-open-quest{border:1px solid #e7d59b;background:#2b3c50;border-radius:9px;color:#ffeeb5;padding:10px;font-weight:900;font-size:11px} @media(max-width:760px){.party-hud #openMemory15{display:none}.game-frame .mobile-voice #openMemory15Mobile{border-color:#c4f0b4;background:#315a50;color:#fff0b2}.game-frame .mobile-voice .voice-ctas{max-width:43%}.game-frame .mobile-voice .voice-ctas button{font-size:9px;min-height:26px;padding:4px 7px}.memory15-hero{height:164px}.memory15-hero-copy{left:15px;bottom:12px}.memory15-hero-copy h2{font-size:23px}.memory15-tabs button{font-size:9px;padding:9px 2px}.memory15-content{max-height:48dvh;padding:10px 12px}.memory15-footer{padding:9px 12px}.memory15-footer button{min-width:125px;font-size:10px}.memory15-place button{font-size:9px;padding:7px}} @media(max-width:375px){.game-frame .mobile-voice .voice-ctas button{font-size:8px;padding:4px 5px}.memory15-tabs button{font-size:8px}.memory15-hero{height:130px}} @media(max-width:760px){.game-frame .mobile-voice .voice-ctas{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:51%}.game-frame .mobile-voice .voice-ctas #mobileFeed{grid-column:1/-1}.game-frame .mobile-voice #mobileTalkCTA,.game-frame .mobile-voice #openMemory15Mobile{white-space:nowrap;min-height:29px;padding:5px 6px}.memory15-modal .memory15-content{scrollbar-width:thin}} /* TERRABITS 1.6 · hoja de criatura mejorada + gancho de largo plazo */ .pet-action-card{left:50%;bottom:16px;transform:translateX(-50%);width:min(620px,calc(100% - 22px));padding:12px;background:linear-gradient(160deg,#1a2442f7,#12233ef8 60%,#1f3150f8);border:1px solid #d6f4a9;border-radius:18px;box-shadow:0 18px 55px #030916e0,0 0 0 3px #c6ff8d1f} .pet-card-shell{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;align-items:center} .pet-card-portrait{display:grid;place-items:center;align-self:stretch;border-radius:16px;background:radial-gradient(circle at 50% 30%,#2b4764 0%,#21324f 55%,#18253c 100%);border:1px solid #9fd3c9;box-shadow:inset 0 0 20px #91d3b720} .pet-card-portrait canvas{width:86px;height:86px;image-rendering:pixelated} .pet-card-main{min-width:0;display:grid;gap:8px} .pet-card-header{display:block;margin:0} .pet-card-copy b{display:block;font-size:24px;line-height:1.05;color:#ffeeb1;letter-spacing:.2px} .pet-card-copy small{display:block;font-size:11px;color:#bdf4d9;margin-top:5px;font-weight:800} .pet-card-copy p{margin:5px 0 0;font-size:12px;line-height:1.45;color:#f5f2ff;max-height:none} .pet-card-badges{display:flex;flex-wrap:wrap;gap:6px} .pet-card-badges span{display:inline-flex;align-items:center;gap:4px;padding:7px 10px;border-radius:999px;background:#233758;border:1px solid #7ea59d;color:#efffec;font-size:10px;font-weight:900;letter-spacing:.35px} .pet-card-goal{padding:10px 12px;border-radius:12px;background:linear-gradient(120deg,#244544,#293a57);border:1px solid #9dd39f;color:#eff8d6;font-size:11px;line-height:1.45;font-weight:700} .pet-card-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .pet-card-actions button{min-height:44px;padding:10px 6px;border-radius:12px;font-size:10px;line-height:1.15} .pet-card-close{top:8px;right:8px;background:#2f3152d4;border:1px solid #aab7d0;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;z-index:2} .hook-panel{margin-top:14px;padding:14px;border-radius:14px;background:linear-gradient(155deg,#213050,#18253d 58%,#26354b);border:1px solid #95c8a0;box-shadow:inset 0 0 0 1px #ffffff08} .hook-overline{font-size:10px;font-weight:900;letter-spacing:.8px;color:#aff3ab;margin-bottom:6px} .hook-panel h3{margin:0;color:#fff1aa;font-size:19px;line-height:1.1} .hook-panel p{margin:8px 0 10px;color:#dce7f0;font-size:12px;line-height:1.55} .hook-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px} .hook-meta span{display:block;padding:8px 10px;border-radius:10px;background:#273757;border:1px solid #6e8b8f;color:#eef9e6;font-size:10px;font-weight:800} .hook-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} .hook-actions .small-button{min-height:40px;font-size:10px} .hook-actions .small-button[disabled]{opacity:.45;filter:grayscale(.3)} @media(max-width:760px){ .pet-action-card{left:6px;right:6px;transform:none;bottom:112px;width:auto;padding:10px 10px 12px;border-radius:18px;background:linear-gradient(180deg,#182544fa,#101d34fa 58%,#152843fa);backdrop-filter:blur(6px);max-height:49vh;overflow:auto} .pet-card-shell{grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:start} .pet-card-portrait{min-height:100%;padding:6px 0;border-radius:14px} .pet-card-portrait canvas{width:66px;height:66px} .pet-card-copy b{font-size:21px} .pet-card-copy small{font-size:10px} .pet-card-copy p{font-size:11px} .pet-card-badges{gap:5px} .pet-card-badges span{padding:6px 8px;font-size:9px} .pet-card-goal{font-size:10px;padding:9px 10px} .pet-card-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .pet-card-actions button{min-height:42px;font-size:10px;padding:9px 4px} .hook-panel{margin-top:12px;padding:12px} .hook-panel h3{font-size:16px} .hook-panel p{font-size:11px} .hook-meta{grid-template-columns:1fr} .hook-actions .small-button{min-height:38px;font-size:9px} } @media(max-width:370px){ .pet-action-card{bottom:108px;padding:9px} .pet-card-copy b{font-size:18px} .pet-card-badges span{font-size:8px;padding:5px 7px} } /* === TERRABITS 1.6.1 | Tarjeta compacta y segura para móvil === */ .pet161-scrim[hidden],body .pet-action-card[hidden]{display:none!important} .pet161-scrim{position:fixed;z-index:10050;inset:0;background:#050d23b5;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} body.pet161-open{overflow:hidden} body .pet-action-card{ position:fixed;z-index:10051;left:50%;right:auto;top:auto;bottom:clamp(12px,2.8dvh,24px); transform:translateX(-50%);margin:0;width:min(490px,calc(100vw - 24px)); padding:16px 16px 14px;max-height:calc(100dvh - 48px);overflow-y:auto;overflow-x:hidden; border:1px solid #9beac0;border-radius:20px;color:#f8ffef; background:linear-gradient(158deg,#263c58 0%,#16233f 66%,#121c35 100%); box-shadow:0 22px 64px #03071cef,0 0 0 3px #87e6a51e; overscroll-behavior:contain;scrollbar-width:thin;animation:pet161Enter .18s ease-out both; } @keyframes pet161Enter{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}} body .pet-card-close{position:absolute;right:12px;top:12px;width:36px;height:36px;font-size:22px;border-radius:50%;border:1px solid #9ebbbd;color:#fcf9fa;background:#283450;z-index:2} .pet161-heading{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:14px;margin:0 35px 10px 0} .pet161-portrait{width:86px;height:86px;display:flex;align-items:center;justify-content:center;flex:none;background:radial-gradient(circle,#4f7c67 0%,#2b5260 55%,#203148 100%);border:1px solid #a2e4c9;border-radius:15px;overflow:hidden} .pet161-portrait canvas,.viewport .pet161-portrait canvas{display:block;flex:none;width:86px!important;height:86px!important;max-width:86px!important;max-height:86px!important;aspect-ratio:1/1;image-rendering:pixelated;object-fit:contain} .pet161-kicker{display:block;color:#9fe8be;letter-spacing:.4px;font-weight:900;font-size:9px;margin-bottom:5px} .pet161-identity{min-width:0} .pet161-identity strong{display:block;color:#fff0b1;font-size:clamp(19px,3.8vw,25px);line-height:1.08;margin-bottom:5px;overflow-wrap:anywhere} .pet161-identity small{display:block;color:#d1e3db;font-size:11px;line-height:1.4;overflow-wrap:anywhere} .pet161-stats{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 10px} .pet161-stats span{display:inline-flex;min-width:0;align-items:center;padding:6px 9px;border:1px solid #547a88;border-radius:999px;background:#263952;color:#e5ffde;font-weight:800;font-size:10px;line-height:1.2;overflow-wrap:anywhere} .pet161-thought{margin:0 0 9px;padding:9px 11px;border-radius:11px;color:#fff2dc;background:#333852;border-left:3px solid #d6e69c;font-size:12px;line-height:1.5;max-height:62px;overflow:auto;overflow-wrap:anywhere} .pet161-goal{padding:8px 11px;margin:0 0 10px;background:#244446;border:1px solid #658f90;border-radius:10px;color:#dbf5de;font-size:11px;line-height:1.45;max-height:74px;overflow:auto;overflow-wrap:anywhere} body .pet-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} body .pet-card-actions button{min-width:0;min-height:43px;padding:9px 6px;font-size:11px;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;border-radius:12px} body .pet-card-actions button:focus-visible,body .pet-card-close:focus-visible{outline:3px solid #fcf1a3;outline-offset:2px} @media(max-width:760px){ body .pet-action-card{left:50%;right:auto;bottom:calc(11px + env(safe-area-inset-bottom,0px));width:calc(100vw - 18px);max-width:430px;max-height:min(430px,calc(100dvh - 85px));padding:13px 12px 12px;border-radius:17px} .pet161-heading{grid-template-columns:70px minmax(0,1fr);gap:10px;margin:0 32px 8px 0} .pet161-portrait{width:70px;height:70px;border-radius:12px} .pet161-portrait canvas,.viewport .pet161-portrait canvas{width:70px!important;height:70px!important;max-width:70px!important;max-height:70px!important} .pet161-identity strong{font-size:21px} .pet161-identity small{font-size:10px} .pet161-kicker{font-size:8px} .pet161-stats{gap:4px;margin:6px 0 8px} .pet161-stats span{font-size:9px;padding:5px 7px} .pet161-thought{font-size:11px;padding:8px 10px;max-height:48px;margin-bottom:7px} .pet161-goal{font-size:10px;padding:7px 9px;margin-bottom:9px;max-height:48px} body .pet-card-actions{gap:6px} body .pet-card-actions button{min-height:41px;font-size:10px} body .pet-card-close{width:32px;height:32px;font-size:20px;top:8px;right:8px} } @media(max-height:620px){body .pet-action-card{max-height:calc(100dvh - 38px)}.pet161-thought,.pet161-goal{max-height:36px}} /* No permitir que los mensajes del bosque tapen las acciones abiertas. */ body.pet161-open .companion-nudge,body.pet161-open .destello-pista,body.pet161-open .notice{visibility:hidden!important;pointer-events:none!important} /* 1.6.3: Ningún aviso de destello debe tapar el bosque. */ #destelloPista,#destelloPista:not([hidden]){display:none!important;visibility:hidden!important;pointer-events:none!important} /* TERRABITS 1.7 · Historias del Bosque Vivo — solo se abre por interacción del jugador */ .party-hud .life17-open{border:1px solid #ffe2a0;color:#fff6d8;background:linear-gradient(125deg,#534075,#324f5d);box-shadow:0 0 0 1px #ffe9ba22;font-weight:900} .life17-open span{display:inline-block;border-radius:999px;background:#172e46;color:#baffbd;margin-left:4px;padding:2px 6px} .life17-mobile-cta{display:block;width:100%;min-height:42px;margin:10px 0;border:1px solid #d5e7a4;border-radius:10px;color:#fff4cb;background:linear-gradient(135deg,#4d4370,#2e6c67);font-size:11px;font-weight:900} .life17-dialog{width:min(680px,calc(100vw - 16px));max-width:680px;max-height:94dvh;overflow:hidden;padding:0;background:#171d35;border:2px solid #abd8a1;border-radius:17px;display:flex;flex-direction:column;box-shadow:0 22px 90px #000a} .life17-dialog .life17-close{top:10px;right:10px;z-index:5;background:#172239e8;border:1px solid #9bb6bd;border-radius:50%;width:36px;height:36px;font-size:22px;display:grid;place-items:center} .life17-hero{position:relative;height:180px;flex-shrink:0;background:#243955;overflow:hidden} .life17-hero>img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;filter:saturate(1.12)} .life17-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#14172a22 15%,#121a30ed 100%);pointer-events:none} .life17-hero-copy{position:absolute;z-index:1;bottom:15px;left:21px;right:45px} .life17-hero-copy span{font-size:10px;font-weight:900;letter-spacing:1px;color:#baf7b3} .life17-hero-copy h2{margin:5px 0 4px;font-size:clamp(22px,4.5vw,31px);line-height:1.15;color:#fff2af;text-shadow:0 2px 12px #080e21} .life17-hero-copy p{margin:0;color:#e2ecf6;font-size:12px;line-height:1.3} .life17-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:9px;background:#202a45;border-bottom:1px solid #485d79;flex-shrink:0} .life17-tabs button{min-width:0;min-height:43px;border:1px solid #687c99;border-radius:9px;background:#29344f;color:#edf1f5;font-size:10px;font-weight:900;padding:7px 3px} .life17-tabs button.active{background:#3e674d;color:#f0ffd4;border-color:#b5e5a3;box-shadow:inset 0 0 0 1px #e9ffc126} .life17-content{padding:18px 20px;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;display:block} .life17-content h3{font-size:clamp(18px,4vw,24px);margin:9px 0;color:#ffe9a8;line-height:1.25} .life17-kicker{font-size:10px;font-weight:900;letter-spacing:.9px;color:#a9f4d7;margin:5px 0 10px} .life17-paragraph{font-size:12px;line-height:1.65;color:#dde5f1;margin:7px 0 13px} .life17-story-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:9px 0 14px} .life17-story-track span{display:grid;place-items:center;min-height:31px;border:1px solid #515b77;background:#232b46;border-radius:9px;filter:grayscale(.6);font-size:17px} .life17-story-track span.done{background:#2c594e;border-color:#8ae6ad;filter:none} .life17-story-track span.current{border:2px solid #f4e3a4;filter:none;background:#4b4868} .life17-quote{background:linear-gradient(125deg,#303b5b,#30434a);border-left:4px solid #a9e4ac;color:#faf4d8;border-radius:8px;padding:13px 15px;margin:12px 0;line-height:1.55;font-size:13px} .life17-task{display:flex;align-items:center;gap:10px;border:1px solid #61738e;border-radius:11px;background:#2c3551;color:#e2eaf2;padding:12px;margin:14px 0;font-size:12px;line-height:1.5} .life17-task.ready{border-color:#8fe4b0;background:#245144;color:#e4ffdf} .life17-task-icon{font-size:24px;flex:none} .life17-task strong{font-size:12px;color:#fff4c7;display:block} .life17-task p{margin:4px 0 0;font-size:11px;color:#d5e6ed} .life17-choice,.life17-secondary{display:block;width:100%;text-align:left;min-height:44px;border-radius:11px;padding:11px 13px;margin:8px 0;font-size:12px;font-weight:900;line-height:1.35} .life17-choice{background:linear-gradient(125deg,#bfdc94,#8fdeb9);color:#17382e;border:1px solid #e8ffb9} .life17-secondary{background:#304563;color:#ebf3ff;border:1px solid #7d9ea1} .life17-quest{padding:12px;margin:10px 0;background:#26334f;border:1px solid #526887;border-radius:12px} .life17-quest.claimed{border-color:#82c2a0;background:#24443e} .life17-quest-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .life17-quest-top strong{font-size:12px;color:#fff3c5} .life17-quest-top span{font-size:12px;color:#a9efc1;font-weight:900} .life17-bar{height:7px;border-radius:20px;background:#111e38;margin:10px 0;overflow:hidden} .life17-bar i{display:block;height:100%;background:linear-gradient(90deg,#8cd9b6,#e2f29d);transition:width .2s} .life17-quest small{display:block;color:#bac8d7;font-size:10px;margin-bottom:8px} .life17-reward{min-height:34px;padding:8px 12px;border:1px solid #a7dabb;background:#36584b;color:#dff7c8;border-radius:9px;font-weight:900;font-size:10px} .life17-reward:disabled{opacity:.65} .life17-journal-entry{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;margin:8px 0;padding:12px;border:1px solid #52607b;border-radius:11px;background:#26304b} .life17-journal-icon{font-size:24px} .life17-journal-entry b{color:#ffe7a8;font-size:12px} .life17-journal-entry p{margin:6px 0;color:#e7eaf4;font-size:11px;line-height:1.5} .life17-journal-entry small{color:#a9b9d1;font-size:9px} .life17-empty{padding:16px;background:#29364f;border:1px dashed #7c95a0;border-radius:11px;color:#d8eacb;font-size:12px;line-height:1.6} .life17-guardian-art{display:grid;place-items:center;min-height:100px;border-radius:14px;border:1px solid #c6dca2;background:radial-gradient(circle,#5b6496,#263452 55%,#1b2943);font-size:43px;letter-spacing:4px;margin:12px 0;color:#fff3ad;text-shadow:0 0 18px #fffcb0} .life17-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 15px;flex-shrink:0;background:#212a44;border-top:1px solid #53627f} .life17-footer span{color:#c4d8d3;font-size:10px;line-height:1.4} .life17-footer button{font-size:10px;min-height:36px;white-space:nowrap} @media(max-width:760px){ .party-hud .life17-open{padding:7px 10px;font-size:9px;white-space:nowrap} .life17-dialog{width:calc(100vw - 12px);max-height:94dvh;border-radius:12px} .life17-hero{height:125px} .life17-hero-copy{left:12px;bottom:11px;right:35px} .life17-hero-copy span{font-size:8px;letter-spacing:.2px} .life17-hero-copy h2{font-size:21px;margin:4px 0} .life17-hero-copy p{font-size:10px} .life17-tabs{padding:5px;gap:4px} .life17-tabs button{font-size:9px;min-height:41px;padding:6px 1px} .life17-content{padding:12px 13px} .life17-content h3{font-size:19px} .life17-quote{font-size:12px;padding:11px} .life17-footer{padding:8px 10px} .life17-footer span{font-size:9px} .life17-footer button{font-size:9px;min-height:36px} } @media(max-width:355px){ .life17-hero{height:105px} .life17-tabs button{font-size:8px;letter-spacing:-.3px} .life17-content{padding:10px} .life17-hero-copy h2{font-size:19px} } /* TERRABITS 1.8: nueva capa social dentro del modal 1.7, sin invadir el mapa. */ .life17-tabs{grid-template-columns:repeat(5,minmax(0,1fr));} .life17-tabs button{letter-spacing:-.2px;} .live18-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 16px} .live18-metric{background:linear-gradient(150deg,#294f4b,#283657);border:1px solid #7ebca8;border-radius:11px;padding:12px 8px;min-width:0;text-align:center} .live18-metric strong{display:block;font-size:19px;color:#fff2ac} .live18-metric span{display:block;font-size:10px;color:#d8eedc;margin-top:4px} .live18-workers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 20px} .live18-worker{display:grid;gap:4px;background:#263753;border:1px solid #698e8b;border-radius:10px;padding:11px;min-width:0} .live18-worker strong{font-size:12px;color:#ffefb0} .live18-worker span{font-size:11px;line-height:1.35;color:#c9e4dd} .live18-story{background:linear-gradient(150deg,#294a47,#29334f);border:1px solid #97d8a7;border-radius:15px;padding:15px;margin:13px 0} .live18-story .life17-choice{width:100%;margin:7px 0;min-height:43px;text-align:left} .live18-event{background:#243753;border-left:3px solid #b8ee9c;border-radius:8px;margin:8px 0;padding:10px 12px} .live18-event strong{color:#fff0ad;font-size:12px} .live18-event p{color:#e2e9ee;font-size:12px;line-height:1.5;margin:5px 0} .live18-empty{padding:15px;background:#263c50;border:1px dashed #759b93;border-radius:11px;color:#d9efe2;font-size:12px;line-height:1.6} @media(max-width:760px){ .life17-tabs button{font-size:clamp(8px,2.2vw,10px);min-height:40px;padding:4px 1px} .live18-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .live18-metric{padding:10px 6px} .live18-workers{grid-template-columns:1fr} .live18-story{padding:12px} } /* TERRABITS 1.9 — misión de rescate y controles coherentes con el Bosque Vivo */ .live18-sound,.live19-main-action{ appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px; border:1px solid #a4e7a9;border-radius:9px;padding:11px 14px; background:linear-gradient(112deg,#c6f6a0,#84e1b1);color:#163a3d; font-family:inherit;font-size:12px;font-weight:800;line-height:1.3;cursor:pointer;min-height:42px;text-align:center; box-shadow:0 3px 0 #17484a; } .live18-sound:hover,.live19-main-action:hover:not(:disabled){filter:brightness(1.08)} .live18-sound:focus-visible,.live19-main-action:focus-visible{outline:3px solid #ffe3a2;outline-offset:2px} .live19-main-action{width:100%;margin-top:11px} .live19-main-action:disabled{opacity:.68;cursor:not-allowed;box-shadow:none;background:#42576a;color:#e3eee3} .live19-rescue{margin:15px 0;padding:16px;border:1px solid #8dcaae; background:linear-gradient(125deg,#284957,#293656);border-radius:14px} .live19-rescue h3{margin:8px 0;color:#ffebad;font-size:18px} .live19-rescue .life17-paragraph{margin-bottom:10px} .live19-objectives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .live19-objectives>div{border-radius:9px;border:1px solid #6b8194;background:#23344d; color:#e1e8ea;padding:10px;line-height:1.4;font-size:11px} .live19-objectives>div.done{border-color:#8acb93;background:#254b49;color:#ddffe0} @media(max-width:600px){.live19-rescue{padding:12px}.live19-objectives{grid-template-columns:1fr}.live18-sound{width:100%;min-height:43px}} /* TERRABITS 1.9 — Control de navegación del mapa, sin cambiar diseño original */ .map19-controls{ position:absolute;top:69px;right:10px;z-index:6; width:min(460px,calc(100% - 20px));display:flex;justify-content:flex-end;align-items:center; gap:5px;flex-wrap:wrap;pointer-events:auto; } .map19-controls button,.map19-controls output{ min-height:36px;border-radius:8px;border:1px solid #7bbab2; background:#172744ec;color:#f5f9de;padding:7px 10px; box-shadow:0 2px 0 #0a1428;display:inline-flex;justify-content:center; align-items:center;white-space:nowrap;font:800 10px/1.2 system-ui,sans-serif; } .map19-controls output{min-width:46px;border-color:#678b88;color:#fff1ab;background:#243e52} .map19-controls button{cursor:pointer;transition:background .12s,border-color .12s} .map19-controls button:hover{background:#335a59;border-color:#b8f6a3} .map19-controls button[aria-pressed="true"]{background:linear-gradient(120deg,#3e7b64,#256755);border-color:#d0f6a3;color:#fffacc} .map19-controls button:focus-visible,.map19-atlas-actions button:focus-visible{ outline:3px solid #ffe9a7;outline-offset:2px; } .map19-hint{ z-index:5;position:absolute;top:116px;right:10px;max-width:min(400px,80%); background:#1a2c46ed;color:#dfffe1;font-size:10px;line-height:1.4; border-radius:8px;border:1px solid #a4e2b3;padding:9px 10px;pointer-events:none; } .map19-hint[hidden]{display:none!important} #viewport:has(.map19-hint:not([hidden])) #world{cursor:grab} .map19-dialog{ width:min(560px,calc(100vw - 22px));max-height:92dvh;overflow-y:auto; border:1px solid #a2dcb3;border-radius:17px; background:linear-gradient(150deg,#212d4d,#171f38); padding:clamp(13px,3vw,24px);box-shadow:0 20px 80px #0009; color:#e2eee8; } .map19-dialog h2{margin:6px 40px 9px 0;font-size:clamp(22px,4vw,29px);color:#ffe4a0} .map19-dialog p{font-size:12px;line-height:1.55;color:#e3ebe7;margin:10px 0} .map19-dialog small{display:block;color:#b8d1cd;font-size:10px;line-height:1.55;margin-top:10px} .map19-kicker{display:block;font-size:10px;font-weight:900;color:#a4f7d5;letter-spacing:1px;margin-top:4px} .map19-atlas-frame{ background:#0b1628;border:2px solid #9edab0;border-radius:12px; padding:7px;margin:12px auto;max-width:390px;aspect-ratio:1; box-shadow:inset 0 0 0 3px #182f37,0 8px 25px #0003; } .map19-atlas-frame canvas{ display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated; cursor:crosshair;touch-action:manipulation;border-radius:4px; } .map19-legend{display:flex;flex-wrap:wrap;gap:7px;font-size:10px;font-weight:800;color:#e1f2d9} .map19-legend>span{border:1px solid #506b87;border-radius:9px;padding:7px 8px;background:#283b51} .map19-dialog .map19-selected{ border:1px solid #88b7b4;background:#263f4f;padding:11px 12px; border-radius:9px;color:#f8ebaa;font-size:12px;font-weight:800; } .map19-atlas-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:12px} .map19-atlas-actions button{ min-height:42px;border:1px solid #8cd8b0;border-radius:9px;padding:9px 6px; background:linear-gradient(120deg,#32565c,#2d4d61);color:#f5fee7; font:800 10px/1.3 system-ui,sans-serif;cursor:pointer; } .map19-atlas-actions button:first-child{background:#354c75} .map19-atlas-actions button:nth-child(2){background:linear-gradient(120deg,#c8f6a6,#8bdcb8);color:#163b3a} .map19-atlas-actions button:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.35)} @media(max-width:760px){ .map19-controls{top:68px;right:6px;left:6px;width:auto;gap:4px;display:grid; grid-template-columns:minmax(0,1.6fr) 32px 45px 32px minmax(0,1fr) minmax(0,1fr)} .map19-controls button,.map19-controls output{font-size:8px;min-height:38px;padding:6px 3px} .map19-controls output{min-width:0} .map19-hint{top:112px;right:7px;font-size:9px;max-width:calc(100% - 14px)} .map19-dialog{max-height:95dvh;padding:13px} .map19-atlas-actions{grid-template-columns:1fr} .map19-atlas-actions button{min-height:43px} } @media(max-width:365px){ .map19-controls{grid-template-columns:minmax(0,1.5fr) 28px 40px 28px minmax(0,1fr) minmax(0,1fr)} .map19-controls button{letter-spacing:-.3px;font-size:7px} } /* Brújula compacta para seguir destinos sin tapar el bosque */ .map19-waypoint{ position:absolute;right:10px;bottom:13px;z-index:7; display:flex;align-items:center;gap:7px;max-width:min(480px,calc(100% - 20px)); background:linear-gradient(135deg,#142e3df5,#223955ed); border:1px solid #b8e9a4;border-radius:12px;padding:7px 8px; box-shadow:0 5px 18px #09132999;color:#fff9dc; } .map19-waypoint[hidden]{display:none!important} .map19-arrow{font-size:23px;line-height:1;flex:0 0 auto;filter:drop-shadow(0 1px 3px #0007)} .map19-waypoint-copy{min-width:0;flex:1;display:grid;gap:2px} .map19-waypoint-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#fff4b1} .map19-waypoint-copy small{font-size:9px;line-height:1.3;color:#c5f3dd} .map19-waypoint button{ border:1px solid #8abfa8;border-radius:7px;background:#284c4b; color:#e8ffdc;min-height:32px;padding:6px 9px;font-weight:800;font-size:10px;cursor:pointer; } .map19-waypoint button#map19Go{background:#d0f4a7;color:#214044} .map19-waypoint button#map19Cancel{font-size:17px;background:#4a3b55;min-width:30px} .map19-waypoint button:disabled{opacity:.6;cursor:not-allowed} .map19-waypoint button:focus-visible{outline:3px solid #ffe59f;outline-offset:2px} @media(max-width:760px){ .map19-waypoint{right:6px;bottom:8px;max-width:calc(100% - 155px);gap:5px;padding:6px} .map19-arrow{font-size:17px} .map19-waypoint-copy strong{font-size:9px} .map19-waypoint-copy small{font-size:8px} .map19-waypoint button{font-size:9px;min-height:31px;padding:4px 5px} .map19-waypoint button#map19Cancel{min-width:25px} } @media(max-width:385px){ .map19-waypoint{max-width:calc(100% - 136px)} .map19-waypoint-copy small{font-size:7px} } /* TERRABITS 2.0 — primeras misiones y aventuras semanales */ .first-path20,.weeks20{display:grid;gap:8px;border-radius:13px;padding:13px;margin:12px 0;background:linear-gradient(135deg,rgba(34,73,57,.63),rgba(24,29,55,.55));border:1px solid rgba(183,241,129,.38)} .first-path20-kicker,.weeks20-kicker{font-size:11px;font-weight:800;letter-spacing:.06em;color:#c6fa91} .first-path20 strong{font-size:16px;line-height:1.3;color:#fff} .first-path20 p,.weeks20-quest{font-size:12px;line-height:1.5;color:#eef3ef;margin:0} .first-path20 button,.weeks20 button{cursor:pointer;background:#bdf77b;border:0;color:#183018;border-radius:9px;padding:11px 12px;font-weight:800;min-height:44px} .first-path20 button[hidden],.weeks20 button[hidden]{display:none} .first-path20 button:focus-visible,.weeks20 button:focus-visible{outline:3px solid #fff;outline-offset:2px}