/* Foundation for the expedition companion. The figures are CSS-native on purpose. */
.mascot-section { margin: 24px 0; padding: 20px 0 1px; border-top: 1px solid #d7dfd9; }
.share-profile { width:100%; margin-top:12px; border:1px solid #9bbdb7; padding:9px 11px; background:#eef7f3; color:#235c66; font:600 10px 'DM Mono',monospace; letter-spacing:.3px; transition:transform .18s, background .18s; }.share-profile:hover { background:#dcefe7; transform:translateY(-1px); }.share-profile b { margin-left:5px; color:#d36d5b; font-size:14px; }
.mastery-strip { display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px; margin-top:13px; padding:9px 10px; border:1px solid #cfe0d9; background:#eef7f3; color:#37676b; }.mastery-strip span { width:100%; color:#6d9090; font:8px 'DM Mono',monospace; letter-spacing:.8px; }.mastery-strip strong { color:#17656b; font-size:11px; }.mastery-strip small { color:#738b83; font-size:10px; }
.mascot-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mascot-section-head h3 { margin: 0; color: #173f4f; font-size: 15px; }
.mascot-currency { display: flex; align-items: center; gap: 5px; color: #7b6a31; font: 9px 'DM Mono', monospace; letter-spacing: .5px; }
.mascot-currency b { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #e1bc4c; color: #695114; font: 11px Fraunces, serif; }
.mascot-stage { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; min-height: 124px; margin: 14px 0; padding: 12px; border: 1px solid #d3e0d9; background: linear-gradient(115deg, #edf5f0, #fbfaf4); }
.mascot-stage-copy small { color: #67868d; font: 8px 'DM Mono', monospace; letter-spacing: 1px; }
.mascot-stage-copy h4 { margin: 4px 0; color: #173f4f; font: 500 23px/1 Fraunces, serif; letter-spacing: -.5px; }
.mascot-stage-copy p { margin: 0; color: #698087; font-size: 11px; line-height: 1.4; }
.mascot-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 17px; }
.mascot-option { position: relative; min-height: 125px; overflow: hidden; border: 1px solid #d4dfda; padding: 9px 7px; background: #fff; color: #244c58; text-align: left; transition: border-color .18s, transform .18s, box-shadow .18s; }
.mascot-option:hover { border-color: #77aaa3; transform: translateY(-2px); box-shadow: 0 7px 14px #143f4812; }
.mascot-option.selected { border-color: #0c6a78; background: #eef8f3; box-shadow: inset 0 0 0 1px #0c6a78; }
.mascot-option.selected::after { position: absolute; top: 7px; right: 7px; content: '✓'; color: #0c6977; font-size: 12px; font-weight: 700; }
.mascot-option .mascot-figure { margin: 0 auto 6px; transform: scale(.62); transform-origin: center bottom; height: 47px; }
.mascot-option .mascot-figure { width:92px; height:92px; margin:-17px auto -20px; transform:scale(.54); transform-origin:center center; }.mascot-option.locked { cursor:pointer; }.mascot-option.locked small { color:#92752c; font-weight:700; }
.mascot-option strong { display: block; font-size: 11px; }.mascot-option small { display: block; margin-top: 2px; color: #71898d; font-size: 8px; line-height: 1.2; }
.backpack-collection { margin: 17px 0 3px; padding-top: 15px; border-top: 1px solid #dce5df; }
.backpack-collection-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; }.backpack-collection-head div { display: grid; gap: 3px; }.backpack-collection-head small { color: #789197; font: 8px 'DM Mono', monospace; letter-spacing: .9px; }.backpack-collection-head strong { color: #275a65; font: 11px 'DM Mono', monospace; }.backpack-instruction { max-width: 165px; color: #778d91; font-size: 9px; line-height: 1.25; text-align: right; }
.backpack-board { position: relative; height: 126px; margin: 11px 0 7px; border: 1px solid #c8d9d2; border-radius: 12px 12px 20px 20px; background: linear-gradient(120deg, #b6dfd5, #82bcb7); overflow: hidden; }.backpack-board::before { position: absolute; inset: 13px 23% 0; border: 2px solid #3c7d7e; border-bottom: 0; border-radius: 35px 35px 0 0; content: ''; opacity: .7; }.backpack-board::after { position: absolute; right: 13px; bottom: 14px; left: 13px; height: 18px; border-top: 1px solid #36777888; border-bottom: 1px solid #36777866; content: ''; }
.backpack-anchor { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: grid; width: 26px; height: 26px; place-items: center; border: 1px dashed #2f757c55; border-radius: 50%; padding: 0; background: #fff5; color: #275c63; transform: translate(-50%, -50%); transition: transform .17s, border-color .17s, background .17s; }.backpack-anchor:empty { opacity: .55; }.backpack-anchor.has-item { border-style: solid; border-color: #f7f2df; background: #f8f5e8; box-shadow: 0 3px 7px #1b5a6033; font: 15px Fraunces, serif; }.backpack-anchor.selected { transform: translate(-50%, -50%) scale(1.19); border-color: #f1bd4c; box-shadow: 0 0 0 3px #f1bd4c55; }.backpack-anchor.available { border-color: #fff; background: #eafff5b8; animation: backpack-slot 1.1s ease-in-out infinite; }.backpack-anchor:focus-visible { z-index: 4; outline: 2px solid #ff8067; outline-offset: 2px; }.backpack-detail { min-height: 17px; margin: 0; color: #52737b; font-size: 10px; text-align: center; }.backpack-detail strong { color: #1c606b; }
@keyframes backpack-slot { 50% { transform: translate(-50%, -50%) scale(1.12); } }

.mascot-figure { position: relative; width: 92px; height: 92px; margin: auto; }
.mascot-pack, .mascot-keepsakes { display:none !important; }
.mascot-figure[data-achievements]::before { position:absolute; z-index:0; inset:7px; border:2px solid #e6bd55; border-radius:48% 52% 45% 55%; background:radial-gradient(circle,#f8df8c55 0 48%,transparent 50%); box-shadow:0 0 0 4px #f8df8c22; content:''; }.mascot-figure[data-achievements="2"]::before,.mascot-figure[data-achievements="3"]::before { border-color:#75b9ad; background:radial-gradient(circle,#8fd0c455 0 48%,transparent 50%); }.mascot-figure[data-achievements="4"]::before,.mascot-figure[data-achievements="5"]::before { border-color:#d77b68; background:radial-gradient(circle,#e98a7555 0 48%,transparent 50%); }
.mascot-body { position: absolute; z-index: 2; bottom: 4px; left: 21px; width: 55px; height: 61px; border: 2px solid #6e442d; border-radius: 47% 47% 42% 42%; background: #e98a5d; box-shadow: inset -7px -5px #bd603f33; }
.mascot-face { position: absolute; z-index: 3; top: 26px; left: 30px; width: 37px; height: 29px; border-radius: 48%; background: #fff2d5; }
.mascot-face::before { position: absolute; top: 9px; left: 9px; width: 5px; height: 5px; border-radius: 50%; background: #16394a; box-shadow: 15px 0 #16394a; content: ''; }
.mascot-face::after { position: absolute; bottom: 5px; left: 16px; width: 6px; height: 4px; border-bottom: 2px solid #663f36; border-radius: 50%; content: ''; }
.mascot-ear { position: absolute; z-index: 1; top: 9px; width: 26px; height: 35px; border: 2px solid #6e442d; border-radius: 75% 15% 65% 20%; background: #e87854; }.mascot-ear.left { left: 17px; transform: rotate(-24deg); }.mascot-ear.right { right: 17px; transform: scaleX(-1) rotate(-24deg); }
.mascot-tail { position: absolute; z-index: 1; right: 5px; bottom: 12px; width: 34px; height: 22px; border: 2px solid #6e442d; border-radius: 0 70% 70% 70%; background: #ed8c5d; transform: rotate(-18deg); }
.mascot-pack { position: absolute; z-index: 0; left: -7px; bottom: 5px; width: 43px; height: 52px; border: 2px solid #2d6a70; border-radius: 12px 12px 8px 8px; background: #8fd0c4; box-shadow: inset -8px -4px #397c7c22; }.mascot-pack::after { position: absolute; top: 12px; left: 10px; width: 17px; height: 10px; border: 1px solid #397c7c; border-radius: 2px; content: ''; }
.mascot-keepsakes { position:absolute; z-index:1; left:-10px; bottom:14px; display:flex; width:45px; min-height:42px; flex-wrap:wrap; align-content:center; gap:0; transform:rotate(-8deg); }.mascot-keepsakes i { display:grid; width:16px; height:16px; place-items:center; border:1px solid #f7f1d9; border-radius:50%; background:#f2c45b; color:#315c66; font:10px/1 Fraunces,serif; box-shadow:0 1px 2px #12374a44; }.mascot-keepsakes i:nth-child(2n) { background:#e98f77; }.mascot-keepsakes i:nth-child(3n) { background:#91cfc0; }
.mascot-antenna { display: none; }

.mascot-figure[data-mascot="capibara"] .mascot-body { left: 14px; width: 66px; border-color: #745c45; border-radius: 45% 50% 40% 43%; background: #a9805e; }.mascot-figure[data-mascot="capibara"] .mascot-face { top: 31px; left: 38px; width: 34px; background: #cba783; }.mascot-figure[data-mascot="capibara"] .mascot-ear { top: 18px; width: 15px; height: 15px; border-color: #745c45; border-radius: 50%; background: #a9805e; }.mascot-figure[data-mascot="capibara"] .mascot-ear.left { left: 25px; }.mascot-figure[data-mascot="capibara"] .mascot-ear.right { right: 25px; }.mascot-figure[data-mascot="capibara"] .mascot-tail { display: none; }.mascot-figure[data-mascot="capibara"] .mascot-pack { border-color: #477784; background: #a9d8d1; }
.mascot-figure[data-mascot="robot"] .mascot-body { left: 16px; width: 61px; border-color: #3f6077; border-radius: 17px; background: #b7d0e5; }.mascot-figure[data-mascot="robot"] .mascot-face { top: 29px; left: 26px; width: 43px; height: 24px; border: 2px solid #3f6077; border-radius: 5px; background: #1c405b; }.mascot-figure[data-mascot="robot"] .mascot-face::before { top: 8px; left: 9px; background: #9ce5d7; box-shadow: 18px 0 #9ce5d7; }.mascot-figure[data-mascot="robot"] .mascot-face::after { display: none; }.mascot-figure[data-mascot="robot"] .mascot-ear, .mascot-figure[data-mascot="robot"] .mascot-tail { display: none; }.mascot-figure[data-mascot="robot"] .mascot-pack { border-color: #4c6986; background: #d6a8c8; }.mascot-figure[data-mascot="robot"] .mascot-antenna { position: absolute; z-index: 4; top: 5px; left: 45px; display: block; width: 3px; height: 17px; background: #3f6077; }.mascot-figure[data-mascot="robot"] .mascot-antenna::after { position: absolute; top: -4px; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: #d95d75; content: ''; }

.mascot-option.locked { opacity: .58; filter: saturate(.65); cursor: not-allowed; }.mascot-option.locked::after { position: absolute; top: 7px; right: 7px; content: 'LOCK'; color: #816d3f; font: 7px 'DM Mono', monospace; letter-spacing: .4px; }.mascot-option:disabled { transform: none; box-shadow: none; }
.mascot-shop { margin-top: 20px; padding-top: 15px; border-top: 1px solid #dce5df; }.mascot-shop-head { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 9px; }.mascot-shop-head div { display: grid; gap: 3px; }.mascot-shop-head small { color: #789197; font: 8px 'DM Mono', monospace; letter-spacing: .9px; }.mascot-shop-head strong { color: #275a65; font-size: 11px; }.mascot-shop-head > span { color: #92752c; font: 8px 'DM Mono', monospace; letter-spacing: .6px; }.mascot-shop-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.shop-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; align-items: center; min-height: 65px; padding: 7px; border: 1px solid #d3e0d9; background: #fff; }.shop-item.owned { background: #f3f8f4; }.shop-item-visual { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border-radius: 9px; background: #e7f1ed; color: #1d686f; font: 20px Fraunces, serif; }.shop-item-visual .mascot-figure { transform: scale(.48); transform-origin: center bottom; }.shop-item strong, .shop-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.shop-item strong { color: #275560; font-size: 10px; }.shop-item small { margin-top: 2px; color: #748c90; font-size: 8px; }.shop-item button { grid-column: 2; justify-self: start; border: 1px solid #d4a63c; padding: 3px 6px; background: #f8e7a6; color: #6d541c; font: 8px 'DM Mono', monospace; }.shop-item button:disabled { border-color: #c9d6cf; background: #edf3ef; color: #74908b; cursor: default; }
.shop-item-badge { display:inline-block; width:max-content; margin-top:3px; padding:2px 4px; border-radius:4px; background:#f3a7b1; color:#fff; font:7px 'DM Mono',monospace; font-style:normal; letter-spacing:.5px; }
.mascot-shop-items .shop-item { grid-template-columns:54px minmax(0,1fr); align-items:start; min-height:112px; padding:8px; }.mascot-shop-items .shop-item-visual { width:52px; height:52px; overflow:hidden; border:1px solid #c9ddd5; border-radius:12px; }.mascot-shop-items .shop-item-visual .mascot-figure { width:92px !important; height:92px !important; margin:0 !important; transform:scale(.48) !important; transform-origin:center center; }.mascot-shop-items .shop-item > div:nth-child(2) { min-width:0; padding-top:3px; }.mascot-shop-items .shop-item button { grid-column:1 / -1; width:100%; min-height:27px; margin-top:-1px; padding:5px 6px; text-align:center; }.mascot-shop-items .shop-item button.unaffordable { border-color:#cda952; background:#fff4cf; color:#806520; }.mascot-shop-items .shop-item small { white-space:normal; line-height:1.2; }.mascot-shop-items .shop-item-badge { display:table; }

.mascot-figure[data-mascot="lince"] .mascot-body { left: 19px; width: 58px; height: 64px; border-color: #725030; background: #d8a45e; }.mascot-figure[data-mascot="lince"] .mascot-face { left: 29px; width: 39px; background: #f8e6bf; }.mascot-figure[data-mascot="lince"] .mascot-ear { top: 6px; height: 37px; border-color: #725030; background: #ce9653; }.mascot-figure[data-mascot="lince"] .mascot-ear::after { position: absolute; top: -7px; width: 3px; height: 13px; background: #382b28; content: ''; }.mascot-figure[data-mascot="lince"] .mascot-ear.left::after { right: 3px; }.mascot-figure[data-mascot="lince"] .mascot-ear.right::after { left: 3px; }.mascot-figure[data-mascot="lince"] .mascot-tail { background: #d8a45e; border-color: #725030; }.mascot-figure[data-mascot="lince"] .mascot-pack { background: #d5c26b; border-color: #746734; }
.mascot-figure[data-mascot="pulpo"] .mascot-body { bottom: 11px; left: 19px; width: 57px; height: 53px; border-color: #5b4c91; border-radius: 50% 50% 38% 38%; background: #9f93d8; }.mascot-figure[data-mascot="pulpo"] .mascot-face { top: 30px; left: 28px; width: 39px; background: #bfb4ec; }.mascot-figure[data-mascot="pulpo"] .mascot-ear, .mascot-figure[data-mascot="pulpo"] .mascot-tail { display: none; }.mascot-figure[data-mascot="pulpo"] .mascot-pack { left: 10px; right:auto; bottom: 9px; background: #69bdb7; border-color: #397a7a; }.mascot-figure[data-mascot="pulpo"]::after { position: absolute; z-index: 1; right: 10px; bottom: 3px; left: 10px; height: 23px; border-bottom: 7px dotted #65549e; border-radius: 50%; content: ''; }

/* Nube: conejita blanca de tienda, con rasgos suaves y pañuelo de exploradora. */
.mascot-figure[data-mascot="conejo"] { filter:drop-shadow(0 3px 3px #5b789433); }.mascot-figure[data-mascot="conejo"] .mascot-body { bottom:3px; left:18px; width:58px; height:61px; border-color:#9aa9b3; border-radius:48% 48% 42% 42%; background:linear-gradient(120deg,#fff 0 45%,#e8eef0 100%); box-shadow:inset -8px -6px #b9c7ce38; }.mascot-figure[data-mascot="conejo"] .mascot-body::before { position:absolute; top:4px; left:-3px; width:60px; height:14px; border-radius:50%; background:#ef9aa5; box-shadow:0 4px 0 #b95e6e; content:''; }.mascot-figure[data-mascot="conejo"] .mascot-body::after { position:absolute; right:-9px; bottom:7px; width:21px; height:21px; border:2px solid #a8b5bb; border-radius:50%; background:#fff; box-shadow:inset -4px -3px #dfe7ea; content:''; }.mascot-figure[data-mascot="conejo"] .mascot-face { top:28px; left:27px; width:42px; height:32px; border:1px solid #d5dfe2; border-radius:48% 48% 52% 52%; background:radial-gradient(circle at 24% 65%,#f7b6bf88 0 11%,transparent 12%),radial-gradient(circle at 76% 65%,#f7b6bf88 0 11%,transparent 12%),#fff; }.mascot-figure[data-mascot="conejo"] .mascot-face::before { top:10px; left:9px; width:6px; height:7px; background:#405767; box-shadow:18px 0 #405767; }.mascot-figure[data-mascot="conejo"] .mascot-face::after { bottom:5px; left:17px; width:8px; height:6px; border:0; border-bottom:2px solid #ad6370; border-radius:0 0 8px 8px; background:#f296a3; content:''; }.mascot-figure[data-mascot="conejo"] .mascot-ear { z-index:1; top:-5px; width:20px; height:45px; border-color:#9aa9b3; border-radius:70% 70% 40% 40%; background:linear-gradient(90deg,#fff 0 27%,#f3abb3 29% 70%,#fff 72%); }.mascot-figure[data-mascot="conejo"] .mascot-ear.left { left:23px; transform:rotate(-10deg); }.mascot-figure[data-mascot="conejo"] .mascot-ear.right { right:23px; transform:rotate(10deg); }.mascot-figure[data-mascot="conejo"] .mascot-tail { right:2px; bottom:10px; width:22px; height:22px; border-color:#a8b5bb; border-radius:50%; background:#fff; transform:none; }.mascot-figure[data-mascot="conejo"] .mascot-pack,.mascot-figure[data-mascot="conejo"] .mascot-antenna { display:none; }

@media (max-width: 420px) { .mascot-stage { grid-template-columns: 82px 1fr; gap: 8px; padding: 9px; }.mascot-stage .mascot-figure { transform: scale(.82); transform-origin: left center; }.mascot-option { min-height: 118px; padding: 8px 5px; } }