/* The exchange is a destination, with one scroll surface below its header. */
.exchange-screen{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;padding:0;color:#f5ead2;background:radial-gradient(ellipse at 70% 0,#3b5a59,#112e36 65%);overflow:hidden}
.exchange-screen::backdrop{background:#102c34}
.exchange-shell{max-width:760px;height:100%;margin:auto;display:flex;flex-direction:column;background:linear-gradient(160deg,#25464c80,#102a32cc);border-inline:1px solid #c5d9bf12}
.exchange-header{display:flex;align-items:center;gap:12px;flex:none;padding:max(14px,env(safe-area-inset-top)) 20px 14px}
.exchange-header small{font:8px var(--body);letter-spacing:.16em;color:#bbd3c6}.exchange-header h1{font:34px/1.05 var(--display);margin:3px 0 0}
.exchange-screen button{touch-action:manipulation}.exchange-screen button:focus-visible{outline:3px solid #ffe2a2;outline-offset:3px}
.exchange-back{width:44px;min-height:44px;padding:0;border-radius:50%;font:32px/1 var(--body);background:#214149;border:1px solid #72989180;flex:none}
.exchange-wallet{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:48%}
.exchange-wallet .exchange-balance{min-height:44px}
.exchange-balance{display:flex;align-items:center;gap:5px;font:13px var(--number);font-variant-numeric:tabular-nums;padding:7px 9px;border:1px solid #90b6aa4d;border-radius:12px;background:#0a252d88;max-width:100%;overflow-wrap:anywhere}.exchange-balance svg{width:24px;height:24px;flex:none}.exchange-balance b{min-width:0}
.exchange-tabs{display:flex;flex:none;margin:0 20px;gap:4px;border-bottom:1px solid #8fab9760}.exchange-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;min-height:49px;position:relative;padding:8px 2px;font:12px var(--body);background:transparent;border:0;color:#b6cdc6;white-space:nowrap}.exchange-tabs svg{width:22px;height:22px;opacity:.75}.exchange-tabs button[aria-pressed=true]{color:#ffe4aa}.exchange-tabs button[aria-pressed=true] svg{opacity:1}.exchange-tabs button[aria-pressed=true]:after{content:'';position:absolute;bottom:-1px;left:12%;right:12%;height:3px;border-radius:3px;background:#f2cc89;box-shadow:0 -2px 14px #ecc48c55}
.exchange-content{overflow:auto;overscroll-behavior:contain;flex:1;padding:22px 20px max(22px,env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:#8ba99e55 transparent}
.exchange-screen [hidden]{display:none!important}.exchange-section-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;font:9px var(--number);letter-spacing:.12em;color:#bed3c5}.exchange-section-title>svg{width:26px;height:26px}.exchange-preview{font-size:8px;letter-spacing:.08em;padding:5px 7px;border:1px solid #b9be9166;border-radius:6px;color:#e9ca91;white-space:nowrap}
.exchange-feature{position:relative;overflow:hidden;border:1px solid #dbc58b;border-radius:22px;background:#203f48;box-shadow:0 8px 28px #061c2966,inset 0 0 0 3px #ecd6a820}
.exchange-feature-art{height:245px;position:relative;overflow:hidden;background:#24464f}.exchange-feature-art>img{position:absolute;right:-1%;top:0;width:98%;height:auto;mask-image:linear-gradient(transparent 5%,#000 7%);-webkit-mask-image:linear-gradient(transparent 5%,#000 7%)}.exchange-feature-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#1b3b4344,transparent 50%),linear-gradient(0deg,#203f48,transparent 55%);pointer-events:none}
.exchange-ribbon{position:absolute;top:17px;left:16px;z-index:1;font:9px var(--number);letter-spacing:.09em;color:#203d45;background:linear-gradient(100deg,#f7e6b9,#d4b378);padding:8px 10px;border-radius:5px;box-shadow:0 2px 6px #08273066}
.exchange-feature-copy{position:relative;margin-top:-40px;padding:0 21px 21px;z-index:1}.exchange-feature-copy>small{font:9px var(--number);letter-spacing:.13em;color:#c4d9c5}.exchange-feature-copy h2{font:39px/.96 var(--display);letter-spacing:-.035em;margin:10px 0;color:#ffebc3;text-shadow:0 2px 12px #122d3c}.exchange-feature-copy p{font:14px/1.5 var(--body);color:#d1e0d7;margin:10px 0 14px}
.exchange-includes{display:flex;gap:8px;margin:16px 0}.exchange-includes>span{display:flex;align-items:center;gap:6px;font:11px var(--body);color:#e0e5d2}.exchange-includes svg{height:24px;width:24px}
.exchange-screen .exchange-feature-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;font:16px var(--body);border-radius:12px;background:linear-gradient(120deg,#ffe8b4,#d8ad6f);border:1px solid #f2cd88;color:#193d46;box-shadow:0 3px 0 #987343,inset 0 1px #fff7dd}.exchange-feature-button svg{width:24px;height:24px}.exchange-feature-button svg path{stroke:#304847}
.exchange-price{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px}.exchange-price b{font:17px var(--number);color:#ffe2a7}.exchange-price span{font:10px var(--body);color:#c0d3c9}
.exchange-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.exchange-small{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid #9cbab278;border-radius:18px;padding:15px 13px;min-height:200px}.exchange-companions{background:radial-gradient(ellipse at 80% 0,#7b6b9277,transparent 80%),#254249}.exchange-camp{background:radial-gradient(ellipse at 80% 0,#b0926c55,transparent 80%),#30474b}.exchange-medallion{display:grid;place-items:center;height:44px;width:44px;border-radius:15px;border:1px solid #eadbaa55;background:linear-gradient(145deg,#819b9655,#132f3555);margin-bottom:14px;box-shadow:inset 0 1px #fff6}.exchange-medallion svg{width:35px;height:35px}.exchange-small>small{font:8px var(--number);letter-spacing:.04em;color:#ccd8bd}.exchange-small>strong{font:24px/1.05 var(--display);color:#f5e6c8;margin:9px 0 17px}.exchange-small>span:last-child{display:flex;align-items:center;gap:2px;font:10px var(--body);color:#c6d8cb;margin-top:auto}.exchange-small>span:last-child svg{width:17px;height:17px}
.exchange-content section>h2{font:34px/1.06 var(--display);margin:15px 0;color:#f2e8cd}.exchange-subtitle{font:14px/1.5 var(--body);color:#bad3c9;margin:0 0 19px}.exchange-recruit-note{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #bbb89255;background:#344f4c;border-radius:12px;margin-bottom:16px;font:12px/1.5 var(--body);color:#dfd9b6}.exchange-recruit-note svg{width:28px;height:28px;flex:none}.exchange-roster{display:grid;gap:12px}.exchange-recruit{display:flex;width:100%;min-height:171px;overflow:hidden;position:relative;text-align:left;padding:0 13px 0 0;border:1px solid #939fb588;border-radius:18px;background:radial-gradient(ellipse at 15% 10%,var(--hero-glow),transparent 75%),#254149}.exchange-recruit.rose{--hero-glow:#a7637955}.exchange-recruit.amber{--hero-glow:#c5956155}.exchange-recruit.violet{--hero-glow:#ac8ce866}.exchange-recruit>img{width:41%;height:174px;object-fit:contain;align-self:flex-end;filter:drop-shadow(0 3px 7px #0d273777)}.exchange-recruit>span{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1;min-width:0;padding:12px 0}.exchange-recruit small{color:#d6c7a0;font:10px var(--body)}.exchange-recruit strong{font:30px var(--display);margin:3px 0 5px}.exchange-recruit span>span{color:#bdcec8;font:12px/1.45 var(--body)}.exchange-recruit b{font:11px/1.3 var(--body);color:#f5d99c;display:flex;align-items:center;gap:5px;margin-top:14px}.exchange-recruit b svg{width:19px;height:19px;flex:none}.exchange-footnote{font:12px/1.6 var(--body);color:#acc9bf;margin:17px 2px}
.exchange-future-art{position:relative;height:220px;display:flex;align-items:center;justify-content:center;border:1px solid #aaac8977;border-radius:22px 22px 0 0;background:radial-gradient(ellipse at 50% 65%,#d5c89026,transparent 62%),linear-gradient(135deg,#516562,#23454a)}.exchange-future-art>span{filter:drop-shadow(0 8px 8px #0f2c37aa)}.exchange-future-art>span>svg{width:160px;height:160px}.exchange-future-art>i{position:absolute;right:16%;top:18%;width:23px}.exchange-future-art>b{position:absolute;right:13%;bottom:12%;width:66px}.exchange-future-copy{padding:20px;border:1px solid #aaac8977;border-top:0;background:#27464a;border-radius:0 0 22px 22px}.exchange-future-copy h3,.exchange-currency h3{font:23px var(--display);margin:0 0 8px}.exchange-future-copy p{font:14px/1.6 var(--body);color:#c4d9ce;margin:0 0 13px}.exchange-future-copy>span{font:11px var(--body);color:#dac796}.exchange-currency{display:flex;align-items:center;gap:17px;padding:20px;margin-top:16px;border:1px solid #a6b9cf55;border-radius:18px;background:linear-gradient(130deg,#455e8177,#26454d)}.exchange-currency>span>svg{width:57px;height:57px}.exchange-currency p{font:12px/1.5 var(--body);color:#c8d7d0;margin:7px 0}.exchange-currency small{font:11px var(--body);color:#e1c993}
.exchange-footer{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:24px;color:#adc8bf;font:10px var(--body)}.exchange-footer svg{width:20px;height:20px}
@media(min-width:600px){.exchange-feature{display:grid;grid-template-columns:1fr 1fr;min-height:430px}.exchange-feature-art{height:100%;grid-column:2;grid-row:1}.exchange-feature-art>img{top:0;right:-14%;width:132%}.exchange-feature-art:after{background:linear-gradient(90deg,#203f48,transparent 50%)}.exchange-ribbon{top:20px;left:auto;right:16px}.exchange-feature-copy{grid-column:1;grid-row:1;margin:0;padding:55px 24px 26px;align-self:end}.exchange-feature-copy h2{font-size:50px}.exchange-pair{gap:16px}.exchange-small{min-height:200px;padding:22px}.exchange-roster{grid-template-columns:1fr}.exchange-recruit{min-height:190px}.exchange-recruit>img{height:210px}.exchange-recruit strong{font-size:36px}}
@media(max-width:350px){.exchange-header{padding-inline:14px;gap:8px}.exchange-header small{font-size:7px;letter-spacing:.07em}.exchange-header h1{font-size:29px}.exchange-wallet{gap:4px}.exchange-balance{padding:5px;font-size:12px}.exchange-balance svg{width:20px;height:20px}.exchange-tabs{margin-inline:14px}.exchange-tabs button{font-size:11px;gap:3px}.exchange-content{padding:18px 14px}.exchange-feature-art{height:225px}.exchange-feature-copy{padding-inline:17px;margin-top:-36px}.exchange-feature-copy h2{font-size:36px}.exchange-includes{gap:6px}.exchange-includes>span{font-size:10px}.exchange-small{padding:13px 11px}.exchange-small>strong{font-size:23px}.exchange-small>small{font-size:7px}.exchange-small>span:last-child{font-size:9px}}
/* Story cues never change the reserved line height or the target position. */
.dialogue-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.dialogue-word{white-space:nowrap}.dialogue-line{cursor:pointer}.dialogue-next{position:relative}.dialogue-cue{display:inline-block;margin-left:10px;width:12px;color:inherit}.dialogue-next[data-ready=true] .dialogue-cue{animation:dialogue-invite 1.5s ease-in-out infinite}
@keyframes dialogue-invite{0%,100%{opacity:.55;transform:translateX(-2px)}50%{opacity:1;transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.dialogue-cue{animation:none!important}}
/* A wallet without a shop section is a balance, not a button (T044: gem exchange off). */
.exchange-balance.is-static{cursor:default}.exchange-balance.is-static:hover{border-color:#90b6aa4d}