/* DragonZone 14:quieter controls, readable type, and a more personal game lobby. */
:root {
  --bg:#F8F5EC;
  --surface:#FFFFFF;
  --surface2:#FFFFFF;
  --text:#275D61;
  --muted:#275D61;
  --gold:#275D61;
  --line:#2C737723;
}
body { background:var(--bg); }
h1, h2, h3, p { text-wrap:pretty; }
button, input, select, .button { border-radius:8px; }
.button { min-height:46px; gap:10px; padding:12px 21px; font-size:13px; font-weight:600; letter-spacing:0; }
.button.primary { background:#E7AD83; color:#275D61; border:1px solid #2C737735; box-shadow:none; }
.button.secondary { color:#275D61; border:1px solid #2C73773b; background:#FFFFFF04; }
.button:hover:not(:disabled) { filter:none; }
.button.primary:hover:not(:disabled) { background:#E7AD83; border-color:#2C737735; }
.button.secondary:hover:not(:disabled) { background:#FFFFFF0a; border-color:#2C737777; }
.button:active:not(:disabled), .filter:active:not(:disabled) { transform:translateY(1px); }
.text-link { font-size:13px; font-weight:500; line-height:1.7; color:#275D61; }
.text-link:hover { color:#275D61; text-decoration:underline; text-underline-offset:5px; }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.1em; line-height:1.7; color:#52716F; }
.tag { font-size:10px; letter-spacing:.04em; border-radius:5px; padding:6px 9px; font-weight:500; }
.fineprint { font-size:12px; line-height:1.8; color:#275D61; }
.input, .select { font-size:14px; background:#F8F5EC; border-color:#2C73773a; color:#275D61; }
.input:focus, .select:focus { border-color:#2C737735; outline:2px solid #2C737722; outline-offset:2px; }
.site-header { background:#F8F5ECf5; border-bottom-color:#2C737723; gap:23px; }
.brand { gap:12px; }
.brand span { letter-spacing:.13em; font-size:16px; font-weight:650; }
.brand-mark { border-radius:8px; }
.main-nav { gap:24px; }
.main-nav a { padding:25px 0; font-size:13px; color:#275D61; }
.main-nav a.active { color:#275D61; }
.nav-convert { color:#275D61 !important; }
.wallet-button { min-height:41px; font-size:12px; background:#FFFFFF08; border:1px solid #2C73774a; color:#275D61; }
.points-pill { border-radius:7px; padding:7px 10px; font-size:12px; background:#FFFFFF03; }
.icon-button { color:#275D61; }
.practice-status { display:inline-flex; align-items:center; gap:9px; color:#275D61; }
.practice-status i { width:6px; height:6px; border-radius:50%; background:#FFFFFF; }
.page-navigation { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding-top:14px; padding-bottom:6px; }
.page-back { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; background:transparent; border:1px solid #2C737733; color:#275D61; font-size:13px; font-weight:500; min-height:38px; padding:8px 14px 8px 10px; border-radius:8px; }
.page-back svg { display:block; flex:none; }
.page-back:hover { background:#FFFFFF07; border-color:#2C73775c; color:#275D61; }
.page-back:active { transform:translateX(-2px); }
.page-navigation nav { display:flex; align-items:center; gap:11px; font-size:12px; color:#52716F; }
.page-navigation nav a { color:#275D61; }
.breadcrumb-dot { color:#52716F; }
.page-navigation nav [aria-current] { color:#275D61; }
.page-head { padding:24px 0 34px; }
.page-head h1 { font:600 clamp(33px,4vw,48px)/1.14 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:-.04em; color:#275D61; margin:10px 0 16px; }
.page-head p { font-size:15px; line-height:1.85; color:#275D61; max-width:690px; margin-bottom:0; }
.page-content { padding-bottom:64px; }
.section-head { gap:22px; align-items:end; margin-bottom:27px; }
.section-head h2 { font-size:35px; line-height:1.2; letter-spacing:-.025em; }
.section-head p { font-size:14px; line-height:1.85; }
.site-footer { background:#F8F5EC; border-top:1px solid #2C737720; }
.footer-inner { gap:30px; }
.footer-links { display:flex; flex-wrap:wrap; column-gap:21px; row-gap:14px; }
.footer-links a, .footer-links button { font-size:12px; color:#275D61; }
.footer-bottom { gap:16px; font-size:11px; line-height:1.8; color:#52716F; }

/* A game lobby rather than a wall of promotional cards. */
.duel-hero { min-height:790px; }
.duel-inner { padding-top:58px; padding-bottom:54px; min-height:725px; }
.duel-copy { width:min(560px,48%); }
.duel-copy>.eyebrow { font-size:11px; letter-spacing:.12em; margin-bottom:21px; }
.duel-copy h1 { font:650 clamp(53px,5.5vw,80px)/1.02 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:-.055em; margin-bottom:23px; }
.duel-copy h1 em { font-style:normal; color:#275D61; }
.duel-description { font-size:15px; line-height:1.8; color:#275D61; margin-bottom:26px; }
.duel-copy .field-label { font-size:11px; letter-spacing:.06em; margin-bottom:10px; }
.duel-copy .play-input-row { grid-template-columns:minmax(120px,1fr) 142px; }
.duel-copy .play-input-row .input, .duel-copy .play-input-row .button { min-height:52px; }
.duel-copy .fineprint { margin-top:10px; font-size:11px; text-align:left; color:#275D61; }
.selected-dragon { background:#F8F5ECc7; border:1px solid #2C737739; box-shadow:0 9px 20px #2C73770d; padding:10px 17px 10px 9px; max-width:414px; border-radius:10px; margin-top:21px; }
.selected-dragon canvas { width:65px; height:65px; flex:none; }
.selected-dragon strong { font-size:15px; color:#275D61; }
.selected-dragon .dragon-element { display:block !important; font-size:12px; font-weight:400; margin-top:3px; color:#275D61; }
.selected-dragon .arrow { font-size:12px; color:#275D61; margin-left:auto; }
.lobby-roster { padding-top:21px; max-width:414px; }
.lobby-roster>span { font-size:11px; color:#275D61; display:block; margin-bottom:10px; }
.lobby-roster>div { display:flex; gap:6px; padding:4px; border-radius:8px; border:1px solid #2C737733; background:#F8F5ECc9; }
.lobby-roster button { flex:1; min-height:36px; border:0; background:transparent; color:#275D61; font-size:11px; padding:7px 9px; border-radius:5px; white-space:nowrap; }
.lobby-roster button.active { background:#E7AD83; color:#275D61; }
.lobby-roster button:not(.active):hover { background:#FFFFFF0c; color:#275D61; }
.lobby-roster>small { color:#52716F; font-size:10px; display:block; line-height:1.7; margin:9px 0 0; }
.duel-secondary-links { gap:23px; }
.duel-secondary-links .duel-lab-link { font-size:12px; margin-top:18px; }
.duel-caption { right:10px; bottom:34px; }
.duel-caption>span { font-size:9px; letter-spacing:.12em; color:#275D61; }
.duel-caption strong { font:22px Georgia,serif; color:#275D61; }
.duel-caption small { display:block; color:#52716F; font-size:10px; margin-top:5px; }
.duel-facts { background:#FFFFFF; border-top-color:#2C737726; min-height:65px; }
.duel-facts>span { font-size:10px; color:#275D61; }
.duel-facts b { color:#275D61; font-size:22px; font-weight:500; }
.lobby-launchpad { padding-top:0; }
.lobby-personal { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:center; gap:30px; padding:29px 0; border-bottom:1px solid var(--line); }
.lobby-personal>div { display:flex; flex-direction:column; gap:7px; min-width:0; }
.lobby-personal span { font-size:12px; color:#52716F; }
.lobby-personal strong { font-size:24px; font-weight:500; line-height:1.4; letter-spacing:-.02em; color:#275D61; }
.lobby-personal small { font-size:12px; font-weight:400; color:#52716F; letter-spacing:0; }
.lobby-personal>a { font-size:12px; color:#275D61; padding:12px 0; }
.lobby-shortcuts { gap:0; padding:8px 0 0; margin-bottom:18px; }
.lobby-shortcuts>a { background:transparent; border:0; border-right:1px solid var(--line); border-radius:0; padding:25px 29px; gap:11px; }
.lobby-shortcuts>a:first-child { padding-left:0; }
.lobby-shortcuts>a:last-child { padding-right:0; border-right:0; }
.lobby-shortcuts>a strong { font:500 19px/1.4 Inter,-apple-system,sans-serif; color:#275D61; letter-spacing:-.025em; }
.lobby-shortcuts>a:hover { background:transparent; }
.lobby-shortcuts>a:hover strong { color:#275D61; }
.lobby-shortcuts>a>span:last-child { font-size:12px; color:#52716F; line-height:1.8; }
.lobby-shortcuts .shortcut-rewards { background:transparent; }
.arena-editorial { gap:55px; }
.arena-photo { border-radius:12px; overflow:hidden; }
.arena-story h2 { font-size:41px; margin-bottom:19px; }
.arena-story>p { color:#275D61; font-size:14px; line-height:1.9; }
.play-steps { gap:22px; margin:24px 0; }
.play-steps li>span { background:transparent; border:1px solid #2C737730; color:#52716F; font-size:11px; }
.play-steps li p { font-size:13px; color:#275D61; line-height:1.8; }
.bloodline-section { background:#FFFFFF; }
.bloodline-item { border-radius:10px; transition:background .2s,border-color .2s; }
.bloodline-item.active { background:#E7AD8310; border-color:#2C737777; }
.bloodline-item strong { font-size:13px; color:#275D61; }
.bloodline-item span { font-size:11px; color:#275D61; }
.fire-collection { background:#FFFFFF; }
.fire-form-card { border-color:#2C73772e; background:#FFFFFF; border-radius:12px; }
.fire-form-copy .eyebrow { font-size:10px; letter-spacing:.08em; }
.fire-form-copy p { font-size:12px; color:#275D61; line-height:1.85; }
.fire-form-access { font-size:12px; padding-top:12px; border-top:1px solid var(--line); }
.forge-teaser { border-color:#2C73772c; background:#FFFFFF; border-radius:12px; }
.forge-teaser h3 { font-size:26px; }

/* Collection and live model views. */
.collection-overview { background:#FFFFFF; border-color:#2C73772a; border-radius:11px; }
.collection-overview span { font-size:10px; letter-spacing:.06em; color:#275D61; }
.collection-overview strong { font-size:32px; line-height:1.3; color:#275D61; }
.collection-overview small { font-size:12px; color:#52716F; }
.codex-toolbar { gap:18px; margin:27px 0 20px; flex-wrap:wrap; }
.codex-search { flex:1 1 300px; max-width:580px; }
.codex-search .input { min-height:45px; }
.collection-views { display:flex; align-items:center; padding:4px; gap:4px; background:#FFFFFF; border:1px solid #2C737730; border-radius:8px; }
.collection-views button { font-size:12px; color:#275D61; min-height:35px; padding:8px 13px; border:0; background:transparent; border-radius:5px; }
.collection-views button.active { background:#FFFFFF; color:#275D61; }
.collection-filters { gap:7px; margin-bottom:23px; }
.collection-filters .filter { min-height:40px; padding:8px 13px; font-size:12px; border-color:#2C73772b; background:transparent; }
.collection-filters .filter small { font-size:9px; color:#52716F; margin-left:3px; }
.collection-filters .filter.active { border-color:#2C73778c; color:#275D61; background:#E7AD830c; }
.collection-results { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:12px; color:#275D61; margin-bottom:16px; }
.dragon-grid { gap:20px; }
.dragon-card { background:#FFFFFF; border-color:#2C73772b; border-radius:12px; box-shadow:none; transition:border-color .2s,background .2s,transform .2s; }
.dragon-card.selected { border-color:#2C737735; box-shadow:0 0 0 1px #2C737729; }
.dragon-card-info { padding:21px; min-height:204px; }
.dragon-card h3 { font-size:26px; margin-bottom:0; }
.dragon-card-info>div { gap:10px; align-items:center; }
.dragon-card p { font-size:12px; line-height:1.85; color:#275D61; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dragon-card .tag { font-size:9px; padding:4px 7px; }
.card-footer { font-size:11px; color:#275D61; border-top-color:#2C737725; margin-top:16px; }
.card-unlock-progress>span { font-size:11px; color:#275D61; }
.dragon-card .skin-state { font-size:9px; padding:7px 9px; }
.collection-empty { grid-column:1/-1; border:1px dashed #2C73773b; border-radius:11px; padding:50px 25px; text-align:center; }
.collection-empty h2 { font-size:29px; }
.collection-empty p { font-size:14px; color:#275D61; }
.codex-pagination { margin:31px 0; }
.codex-pagination>span { font-size:12px; color:#275D61; }
.collection-note { padding:20px 23px; background:#FFFFFF; border-color:#2C73772b; color:#275D61; font-size:13px; line-height:1.9; }
.point-account { border-radius:11px; background:#FFFFFF; border-color:#2C737736; padding:27px 30px; }
.point-account h2 { font:500 39px/1.2 Inter,-apple-system,sans-serif; letter-spacing:-.04em; color:#275D61; }
.point-account p { font-size:13px; color:#275D61; }
.forge-layout { gap:25px; margin-top:24px; }
.forge-stage, .lab-stage { background:#FFFFFF; border-color:#2C737732; border-radius:12px; overflow:hidden; }
.forge-model-stage { background:radial-gradient(ellipse at 50% 75%,#FFFFFF24,transparent 70%),#FFFFFF; border-top:1px solid #2C737718; }
.forge-sidebar, .lab-sidebar { background:#FFFFFF; border-radius:12px; border-color:#2C737730; padding:25px; }
.forge-sidebar>p, .lab-sidebar>p { font-size:13px; line-height:1.85; color:#275D61; }
.forge-product-list button { border-radius:7px; padding:15px; min-height:64px; }
.forge-product-list button>span { font-size:14px; }
.forge-product-list button small { font-size:11px; line-height:1.7; color:#275D61; margin-top:5px; }
.forge-product-list button.active { background:#E7AD8310; border-color:#2C73776b; }
.forge-price { font-size:13px; color:#275D61; }
.forge-details, .forge-preview-controls { font-size:12px; }
.lab-controls { gap:14px; padding:19px 21px; background:#FFFFFF; border-top:1px solid #2C737724; }
.lab-controls .filter { font-size:12px; min-height:36px; }
.lab-mass-control { font-size:11px; color:#275D61; }
.lab-mass-control .select { font-size:12px; padding:7px 10px; min-height:36px; }
.lab-elements { gap:7px; }
.lab-elements button { min-height:40px; font-size:12px; border-radius:6px; }
.lab-elements button.active { background:#E7AD8313; color:#275D61; border-color:#2C737775; }

/* Account, records, guide, and game information have distinct layouts. */
.profile-dragon { display:flex; align-items:center; gap:26px; padding:10px 27px 19px; margin-bottom:25px; background:linear-gradient(110deg,#FFFFFF,#FFFFFF 70%); border:1px solid #2C73772e; border-radius:12px; }
.profile-dragon canvas { display:block; width:148px; height:158px; flex:none; }
.profile-dragon h2 { font-size:38px; line-height:1.2; margin:9px 0; color:#275D61; }
.profile-dragon p { font-size:13px; color:#275D61; margin:0; }
.profile-dragon .button { margin-left:auto; }
.stats-row { gap:0; border:1px solid #2C73772b; border-radius:11px; overflow:hidden; background:#FFFFFF; }
.stat { border:0; border-right:1px solid #2C73772e; background:transparent; border-radius:0; padding:25px 27px; }
.stat:last-child { border-right:0; }
.stat span { font-size:10px; color:#275D61; letter-spacing:.05em; }
.stat strong { font:500 34px/1.3 Inter,-apple-system,sans-serif; letter-spacing:-.03em; margin-top:8px; color:#275D61; }
.family-progress-grid>a { border-radius:10px; background:#FFFFFF; border-color:#2C73772b; }
.family-progress-grid strong { font-size:14px; }
.family-progress-grid span { font-size:12px; color:#275D61; }
.table-wrap { border-color:#2C73772c; border-radius:10px; background:#FFFFFF; }
.data-table th { font-size:10px; letter-spacing:.06em; padding:17px 21px; color:#52716F; }
.data-table td { padding:19px 21px; font-size:13px; color:#275D61; }
.data-table td strong { font-size:14px; color:#275D61; }
.data-table tr:last-child td { border-bottom:0; }
.empty-state { padding:62px 28px; }
.empty-state h2 { font-size:32px; }
.empty-state p { font-size:14px; line-height:1.85; color:#275D61; }
.feature-overview { display:grid; grid-template-columns:1.1fr 1fr; gap:39px; align-items:center; padding-bottom:41px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.feature-overview>img { width:100%; height:335px; object-fit:cover; border-radius:12px; border:1px solid #2C73772e; }
.feature-overview h2 { font:500 35px/1.2 Georgia,serif; letter-spacing:-.02em; margin:14px 0 18px; }
.feature-overview p { font-size:14px; line-height:1.85; color:#275D61; margin-bottom:24px; }
.feature-overview .text-link { display:inline-block; margin-left:19px; }
.feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 38px; }
.feature-card { padding:29px 0; border:0; border-bottom:1px solid var(--line); background:transparent; border-radius:0; }
.feature-heading { display:flex; align-items:center; gap:14px; justify-content:space-between; margin-bottom:19px; }
.feature-heading>svg { color:#275D61; }
.feature-card h3 { font-size:26px; margin-top:9px; }
.feature-card p { font-size:14px; line-height:1.9; color:#275D61; }
.food-card { background:#FFFFFF; border-color:#2C737728; border-radius:10px; padding:19px; }
.food-card h3 { font-size:23px; }
.food-card p { font-size:12px; color:#275D61; }
.docs-layout { grid-template-columns:218px minmax(0,1fr); gap:37px; }
.docs-nav { gap:6px; border-right-color:#2C737724; }
.docs-nav button { font-size:13px; min-height:42px; padding:10px 14px; color:#275D61; border-radius:7px; }
.docs-nav button.active { background:#E7AD8312; color:#275D61; }
.doc-article { padding:29px 34px; border:1px solid #2C73772b; border-radius:12px; background:#FFFFFF; min-width:0; }
.doc-article>h2 { font-size:32px; margin:0 0 25px; }
.doc-article p, .doc-article li { font-size:14px; line-height:1.95; color:#275D61; max-width:78ch; }
.doc-article h3 { font:550 19px/1.5 Inter,-apple-system,sans-serif; color:#275D61; margin-top:29px; }
.doc-article a { color:#275D61; text-decoration:underline; text-underline-offset:4px; }
.doc-note { font-size:13px; line-height:1.9; color:#275D61; background:#FFFFFF; border-color:#2C73772e; border-radius:8px; }
.doc-article summary { font-size:14px; line-height:1.8; }
.token-panel { padding:30px; background:#FFFFFF; border-color:#2C73772d; border-radius:12px; }
.token-panel h2 { font-size:34px; }
.token-panel p { font-size:14px; line-height:1.95; color:#275D61; }
.token-panel code { font-size:11px; overflow-wrap:anywhere; }

/* A clear conversion form with fewer ornamental frames. */
.convert-page .page-head { padding-top:24px; }
.reward-entry { background:#FFFFFF; border-color:#2C737730; border-radius:11px; margin:24px 0; }
.reward-entry h2 { font:550 25px/1.3 Inter,-apple-system,sans-serif; letter-spacing:-.025em; margin:8px 0 12px; }
.reward-entry.compact h2 { font-size:24px; }
.reward-entry p { max-width:640px; font-size:13px; }
.reward-plan { color:#52716F; font-size:11px; }
.reward-path { border:0; background:transparent; border-radius:0; margin-top:1px; }
.reward-path li { border:0; border-bottom:2px solid #2C737730; background:transparent; font-size:12px; padding:14px 15px 16px; }
.reward-path li:last-child { border-bottom:2px solid #2C737730; }
.reward-path li>span { border:0; background:#FFFFFF; color:#275D61; width:26px; height:26px; border-radius:6px; font-size:10px; }
.reward-path li.done { border-bottom-color:#2C737735; }
.reward-notice { border-color:#2C73772c; background:#FFFFFF; border-radius:10px; }
.convert-card { background:#FFFFFF; border-color:#2C73772b; border-radius:12px; }
.converter-main h2 { font:550 29px/1.3 Inter,-apple-system,sans-serif; letter-spacing:-.035em; }
.reward-account-grid { background:#FFFFFF; border-color:#2C73772a; }
.reward-account-grid strong { font:500 35px/1.2 Inter,-apple-system,sans-serif; letter-spacing:-.03em; }
.reward-amount .input { font:500 28px/1.3 Inter,-apple-system,sans-serif; letter-spacing:-.03em; }
.reward-receive>strong { font:500 30px/1.3 Inter,-apple-system,sans-serif; letter-spacing:-.03em; }
.reward-pool-title>h2 { font:500 43px/1.2 Inter,-apple-system,sans-serif; letter-spacing:-.04em; }
.reward-pool>p { font-size:12px; }
.reward-address { border-top-color:#2C73772b; }
.practice-pocket { background:#FFFFFF; }
.practice-pocket h2 { font:500 34px/1.2 Inter,-apple-system,sans-serif; letter-spacing:-.03em; }
.convert-history h2 { font-size:29px; }
.reward-empty { border-color:#2C737737; background:#FFFFFF; }
.reward-help-heading h2 { font:550 29px/1.3 Inter,-apple-system,sans-serif; letter-spacing:-.035em; }
.reward-help-tabs .filter { font-size:12px; }
.convert-review { background:#FFFFFF; border-color:#2C737761; }
.convert-review h3 { font:500 33px/1.2 Inter,-apple-system,sans-serif; }

/* Dialogs and movement only respond to an actual interaction or page change. */
.modal { background:#FFFFFF; border-color:#2C73773b; border-radius:14px; padding:35px; box-shadow:0 24px 80px #2C737777; }
.modal h2 { font-size:33px; margin-bottom:16px; }
.modal p { font-size:14px; line-height:1.9; color:#275D61; }
.modal .detail-row { font-size:13px; padding:13px 0; }
.detail-anatomy dt { font-size:10px; color:#52716F; }
.detail-anatomy dd { font-size:12px; line-height:1.8; }
.dialog-nav a { font:500 21px/1.5 Inter,-apple-system,sans-serif; padding:10px; border-radius:6px; }
.dialog-nav a:hover { color:#275D61; background:#FFFFFF06; }
.close-dialog { width:36px; height:36px; border:1px solid #2C73772e; border-radius:7px; top:15px; right:15px; }
.toast { background:#FFFFFFf5; border:1px solid #2C737757; color:#275D61; font-size:13px; line-height:1.8; border-radius:9px; box-shadow:0 8px 24px #2C737733; }
#app.page-arriving>main, #app.page-arriving>.container>.page-head { animation:dz-page-enter .24s ease-out both; }
@keyframes dz-page-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (hover:hover) and (pointer:fine) {
  .dragon-card:hover { transform:translateY(-3px); border-color:#2C737770; background:#FFFFFF; }
  .fire-form-card:hover, .forge-teaser:hover { border-color:#2C737770; background:#FFFFFF; }
  .bloodline-item:hover { background:#FFFFFF05; }
}

@media(max-width:1200px) {
  .duel-copy { width:min(540px,51%); }
  .duel-copy h1 { font-size:66px; }
  .duel-copy .play-input-row { grid-template-columns:minmax(130px,1fr) 130px; }
  .duel-inner { padding-top:48px; }
  .rewards-shortcut { padding:9px 12px; border-color:#2C73773a; background:#FFFFFF03; font-size:12px; }
}
@media(max-width:1000px) {
  .duel-copy { width:57%; }
  .duel-copy h1 { font-size:61px; }
  .duel-art img { object-position:59% 50%; }
  .duel-hero:before { background:linear-gradient(90deg,#F8F5ECed,#F8F5EC80 47%,#F8F5EC05 80%); }
  .duel-caption { display:none; }
  .arena-editorial { gap:30px; }
  .feature-overview { gap:27px; }
  .feature-overview h2 { font-size:31px; }
  .feature-overview .text-link { margin:15px 0 0; display:block; }
  .docs-layout { grid-template-columns:190px minmax(0,1fr); gap:25px; }
}
@media(max-width:780px) {
  .duel-hero { min-height:910px; }
  .duel-inner { align-items:flex-end; min-height:840px; padding-top:225px; padding-bottom:38px; }
  .duel-copy { width:100%; max-width:590px; }
  .duel-copy h1 { font-size:clamp(47px,9.5vw,65px); }
  .duel-copy h1 em { white-space:normal; }
  .duel-art { height:320px; bottom:auto; }
  .duel-art img { object-position:65% 40%; object-fit:cover; }
  .duel-hero:before { background:linear-gradient(180deg,#F8F5EC10 0,#F8F5EC20 140px,#F8F5ECbd 250px,#F8F5EC 350px); }
  .duel-copy .play-input-row { grid-template-columns:minmax(120px,1fr) 140px; }
  .duel-copy .play-form, .selected-dragon, .lobby-roster { max-width:520px; }
  .duel-copy .play-form { margin:0; }
  .lobby-personal { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:24px 0; }
  .lobby-personal strong { font-size:22px; }
  .lobby-personal span { font-size:11px; }
  .lobby-personal>a { grid-column:1/-1; padding:4px 0 0; }
  .lobby-shortcuts { grid-template-columns:1fr; padding:0; margin-bottom:0; }
  .lobby-shortcuts>a, .lobby-shortcuts>a:first-child, .lobby-shortcuts>a:last-child { padding:23px 0; border:0; border-bottom:1px solid var(--line); gap:9px; }
  .lobby-shortcuts>a strong { font-size:20px; }
  .lobby-shortcuts .eyebrow { font-size:10px; }
  .page-navigation { min-height:64px; padding-top:14px; }
  .page-head { padding-top:19px; padding-bottom:28px; }
  .section-head { align-items:flex-start; gap:12px; }
  .section-head h2 { font-size:31px; }
  .arena-editorial { gap:29px; }
  .arena-story h2 { font-size:35px; }
  .feature-overview { grid-template-columns:1fr; gap:25px; }
  .feature-overview>img { height:280px; }
  .feature-overview h2 { font-size:34px; }
  .feature-overview .text-link { display:inline-block; margin:0 0 0 17px; }
  .feature-grid { gap:0 24px; }
  .feature-card h3 { font-size:24px; }
  .feature-card p { font-size:13px; }
  .docs-layout { grid-template-columns:1fr; gap:21px; }
  .docs-nav { flex-direction:row; flex-wrap:wrap; border-bottom:1px solid var(--line); border-right:0; padding-bottom:17px; gap:5px; }
  .docs-nav button { font-size:12px; min-height:38px; padding:8px 11px; }
  .doc-article { padding:25px; }
  .profile-dragon { padding:16px 22px; gap:16px; }
  .profile-dragon canvas { width:105px; height:116px; }
  .profile-dragon h2 { font-size:32px; }
  .profile-dragon .button { padding:10px 15px; }
  .collection-overview>div, .collection-overview>a { padding:20px 18px; }
  .collection-overview strong { font-size:29px; }
}
@media(max-width:680px) {
  .site-header { padding-left:18px; padding-right:18px; gap:13px; }
  .brand span { font-size:13px; }
  .page-navigation nav { font-size:11px; gap:8px; }
  .page-back { min-height:38px; font-size:12px; padding:8px 12px 8px 8px; }
  .page-head h1 { font-size:36px; margin-top:7px; margin-bottom:15px; }
  .page-head p { font-size:14px; line-height:1.85; }
  .mobile-tabs { background:#F8F5ECfa; border-top-color:#2C737733; }
  .mobile-tabs>a { font-size:11px; gap:6px; color:#52716F; }
  .mobile-tabs>a.active { background:#E7AD8310; color:#275D61; }
  .toast { bottom:calc(87px + env(safe-area-inset-bottom)); max-width:calc(100vw - 32px); }
  .playing .toast { bottom:24px; }
  .playing .brand span, .playing .points-pill, .playing .header-actions .wallet-button { display:none; }
  .playing .site-header { gap:12px; }
  .playing .arena-back { min-height:35px; padding:7px 10px 7px 7px; }
  .playing .header-actions { margin-left:auto; }
  .playing .arena-back span { font-size:12px; }
  .lobby-roster button { min-height:36px; font-size:11px; padding:8px; }
  .duel-description { font-size:14px; }
  .duel-copy .fineprint { font-size:11px; }
  .duel-secondary-links { gap:24px; }
  .duel-secondary-links .duel-lab-link { font-size:12px; }
  .duel-facts { gap:18px; padding-left:18px; padding-right:18px; min-height:62px; }
  .duel-facts>span { font-size:8px; letter-spacing:.03em; }
  .duel-facts b { font-size:20px; }
  .lobby-personal { gap:10px; }
  .lobby-personal strong { font-size:20px; }
  .lobby-personal small { font-size:10px; }
  .lobby-personal span { font-size:10px; }
  .codex-toolbar { gap:15px; }
  .codex-search { flex-basis:100%; max-width:none; }
  .collection-views { width:100%; }
  .collection-views button { flex:1; min-height:36px; font-size:12px; }
  .collection-filters .filter { font-size:11px; padding:8px 11px; min-height:38px; }
  .collection-filters .filter small { display:none; }
  .collection-results { font-size:11px; }
  .dragon-grid { gap:13px; }
  .dragon-card-info { padding:16px; min-height:208px; }
  .dragon-card h3 { font-size:23px; }
  .dragon-card-info>div { align-items:flex-start; gap:8px; }
  .dragon-card p { font-size:11px; line-height:1.85; }
  .card-unlock-progress>span { font-size:10px; }
  .card-footer { font-size:10px; }
  .point-account { padding:23px; }
  .point-account h2 { font-size:35px; }
  .profile-dragon { flex-wrap:wrap; padding:18px; gap:10px 15px; }
  .profile-dragon canvas { width:93px; height:106px; }
  .profile-dragon>div { flex:1; min-width:130px; }
  .profile-dragon h2 { font-size:29px; }
  .profile-dragon p { font-size:12px; }
  .profile-dragon .eyebrow { font-size:10px; }
  .profile-dragon .button { width:100%; margin:5px 0 0; }
  .stat { padding:22px 15px; }
  .stat span { font-size:9px; }
  .stat strong { font-size:29px; }
  .feature-grid { grid-template-columns:1fr; gap:0; }
  .feature-card { padding:25px 0; }
  .feature-card h3 { font-size:26px; }
  .feature-card p { font-size:14px; }
  .feature-overview>img { height:230px; }
  .feature-overview h2 { font-size:31px; }
  .feature-overview .text-link { display:block; margin:17px 0 0; }
  .feature-overview .button { width:100%; }
  .doc-article { padding:24px 21px; }
  .doc-article>h2 { font-size:29px; }
  .doc-article p, .doc-article li { font-size:14px; }
  .token-panel { padding:24px; }
  .token-panel h2 { font-size:31px; }
  .token-panel .button { width:100%; }
  .reward-entry.compact { padding:25px; gap:17px; }
  .reward-entry.compact h2 { font-size:25px; }
  .reward-path { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .reward-path li, .reward-path li:nth-child(n+3) { border:0; border-bottom:2px solid #2C737730; padding:10px 0 12px; }
  .reward-path li.done { border-bottom-color:#2C737735; }
  .reward-path li b { font-size:11px; }
  .converter-main h2 { font-size:28px; }
  .reward-account-grid strong { font-size:31px; }
  .reward-pool-title>h2 { font-size:42px; }
  .modal { padding:36px 24px 26px; border-radius:13px; }
  .modal h2 { font-size:30px; }
  .modal p { font-size:13px; }
  .detail-anatomy { gap:13px; }
  .detail-anatomy dd { font-size:11px; }
  .footer-links { gap:15px 20px; }
}
@media(max-width:390px) {
  .site-header .brand span { display:none; }
  .duel-copy h1 { font-size:46px; }
  .duel-copy .play-input-row { grid-template-columns:minmax(100px,1fr) 112px; gap:8px; }
  .duel-copy .play-input-row .button { padding:12px; }
  .duel-hero { min-height:900px; }
  .duel-inner { min-height:838px; padding-top:220px; }
  .collection-overview>div, .collection-overview>a { padding:17px 12px; }
  .collection-overview span { font-size:8px; }
  .collection-overview strong { font-size:27px; }
  .dragon-grid { grid-template-columns:1fr; }
  .dragon-card p { font-size:12px; }
  .dragon-card-info { min-height:185px; }
  .dragon-card h3 { font-size:27px; }
  .collection-results>span:last-child { display:none; }
  .lobby-personal strong { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
  #app.page-arriving>main, #app.page-arriving>.container>.page-head { animation:none; }
  .dragon-card, .bloodline-item, .fire-form-card, .forge-teaser { transition:none; }
  .dragon-card:hover, .button:active:not(:disabled), .filter:active:not(:disabled), .page-back:active { transform:none; }
}

/* Long balances and names keep their exact values without widening the page. */
.reward-account-grid strong, .reward-pool-title>h2, .lobby-personal strong { overflow-wrap:anywhere; }
.dragon-card h3, .profile-dragon h2 { overflow-wrap:anywhere; white-space:normal; }
.detail-row code { overflow-wrap:anywhere; word-break:break-all; min-width:0; }

/* Wallet choices use a single stable identity per detected wallet. */
.wallet-options { display:grid; gap:8px; margin:23px 0 12px; }
.wallet-choice { display:flex; align-items:center; gap:13px; width:100%; min-height:72px; padding:13px 15px; border:1px solid #2C73772c; border-radius:11px; background:#FFFFFF; color:#275D61; text-align:left; text-decoration:none; font:inherit; cursor:pointer; transition:background .15s,border-color .15s; }
.wallet-choice:hover { background:#FFFFFF; border-color:#2C737785; }
.wallet-choice:focus-visible { outline:2px solid #2C737735; outline-offset:3px; }
.wallet-choice:disabled { opacity:.6; cursor:wait; }
.wallet-logo { flex:0 0 40px; width:40px; height:40px; display:block; object-fit:contain; border-radius:10px; }
.wallet-choice-name { display:grid; gap:5px; font-size:14px; font-weight:600; }
.wallet-choice-name small { color:#275D61; font-size:11px; font-weight:400; line-height:1.4; }
.wallet-choice-state { margin-left:auto; flex:0 0 auto; color:#275D61; font-size:11px; font-weight:500; }
.wallet-choice-state.is-detected { color:#275D61; }
.wallet-get { background:#F8F5EC; }
.wallet-picker-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:6px 0 14px; font-size:11px; color:#275D61; }
.wallet-picker-footer .text-link { font-size:11px; }
.wallet-mobile-help { font-size:12px!important; line-height:1.75!important; margin-bottom:17px!important; color:#275D61!important; }
.connected-wallet-identity { display:flex; gap:12px; align-items:center; margin:22px 0 0; }
.connected-wallet-identity>div { display:grid; gap:5px; }
.connected-wallet-identity strong { font-size:15px; color:#275D61; }
.connected-wallet-identity span { font-size:11px; color:#275D61; }
.arena-session-mode { display:block; margin-top:5px; color:#275D61; font-size:8px; letter-spacing:.1em; }
.practice-badge .status-dot { background:#FFFFFF; box-shadow:none; }
.practice-badge[data-activity="paused"] .status-dot { background:#E7AD83; }
.practice-badge[data-activity="ended"] .status-dot, .practice-badge[data-activity="ready"] .status-dot { background:#FFFFFF; }
@media(max-width:480px) { .wallet-choice { padding:12px; gap:10px; } .wallet-choice-name { font-size:13px; } .wallet-choice-name small { font-size:10px; } .wallet-choice-state { font-size:10px; } }