/* The handbook is separate from the native-inspired explorer surface. */
.mobile-handbook-menu{display:none}
.guide-hero { display:flex; align-items:center; gap:28px; padding:24px; margin:18px 0 28px; border:1px solid #51405f; background:linear-gradient(135deg,#24192f,#121016); }
.guide-hero-text { flex:1; min-width:0; }
.guide-topic-icon { display:block; object-fit:contain; margin-bottom:16px; }
.guide-hero figure { flex:0 1 280px; margin:0; min-width:0; }
.guide-game-art { display:block; width:100%; height:auto; border:1px solid #725487; }
.guide-hero figcaption { font-size:11px; line-height:1.6; color:#baa7c8; margin-top:8px; }
.guide-hero .article-lead { margin-bottom:0; }
@media(max-width:760px) { .guide-hero { flex-direction:column; align-items:stretch; padding:18px; gap:20px; } .guide-hero figure { flex:auto; max-width:360px; } .guide-game-art { max-height:200px; object-fit:contain; background:#100e12; } }
.context-profile-tools{padding:18px 0;border-block:1px solid #39323f}.context-profile-tools h2{font-size:16px!important;margin-bottom:14px}.context-profile-tools>div{display:flex;flex-wrap:wrap;gap:10px}.context-profile-tools button{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 14px;color:#cdb3ed;font-size:13px}.context-profile-tools svg{width:17px;height:17px}.profile-inspector{position:fixed;inset:0 0 0 auto;margin:0;width:min(580px,100%);max-width:100%;height:100dvh;max-height:100dvh;padding:0;border:0;border-left:1px solid #72528e;background:#141218;color:#eee;overflow:auto}.profile-inspector::backdrop{background:#0009}.profile-inspector>header{position:sticky;top:0;background:#1c1723;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 22px;z-index:1;border-bottom:1px solid #44344f}.profile-inspector>header>span{font-size:12px;color:#c5a8e5}.inspector-body{padding:24px}.inspector-body h2{font-size:27px;margin:24px 0 12px}.inspector-body h3{font-size:16px;margin-top:25px}.inspector-body p{font-size:14px;line-height:1.8;white-space:pre-line}.inspector-body .background-art{max-height:260px}.profile-inspector:focus{outline:none}@media(max-width:600px){.profile-inspector{width:100%;border:0}.inspector-body{padding:20px}.context-profile-tools button{width:100%}}
.learning-overview-link{display:inline-block;color:#aa91c7;font-size:12px;margin-bottom:18px;padding:8px 0}
.lesson-panel>summary{cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;list-style:disclosure-closed;min-height:48px;font-size:21px;font-weight:650;line-height:1.4;padding:4px 0 12px;color:#e9dfef}.lesson-panel>summary:before{content:'+';color:#b58cff;font-size:22px}.lesson-panel[open]>summary:before{content:'−'}.lesson-panel>summary>span{flex:1}.lesson-state{font-size:11px;font-weight:400;color:#a5a5b4;max-width:120px}.step-done .lesson-state{color:#89c99e}.lesson-panel[open]>.eyebrow{display:block;margin:14px 0}.resume-learning{display:flex;align-items:center;gap:16px;min-height:74px;padding:16px 20px;margin-bottom:20px;background:#183025;border:1px solid #537d62;border-radius:4px}.resume-learning span{flex:1}.resume-learning strong,.resume-learning small{display:block}.resume-learning small{font-size:12px;color:#a4c4b0;margin-top:6px}.resume-learning svg{width:20px;height:20px;flex-shrink:0}@media(max-width:600px){.lesson-panel>summary{font-size:18px;flex-wrap:wrap;gap:8px}.lesson-state{max-width:none;width:100%;padding-left:24px}.resume-learning{padding:14px}}
.handbook-main .learning-path-link{display:flex;align-items:center;gap:18px;max-width:none;padding:22px 24px;margin:0 0 28px;background:#271d35;border:1px solid #9773c0;border-left:5px solid #b58cff;border-radius:4px;color:#f1e8ff}.learning-path-link>span:nth-child(2){flex:1;min-width:0}.learning-path-link small{display:block;font-size:11px;color:#cab0ed;margin-bottom:6px}.learning-path-link strong{display:block;font-size:23px;line-height:1.3}.learning-path-link>span:nth-child(2)>span{display:block;font-size:13px;color:#c0b2ce;margin-top:6px;line-height:1.5}.learning-path-link .learning-path-icon svg{width:30px;height:30px}.learning-path-link .learning-path-action{display:flex;align-items:center;gap:12px;flex-shrink:0;font-size:15px;font-weight:700;padding:12px 16px;background:#b58cff;color:#160d23;border-radius:3px}.handbook-main .learning-path-link:hover{background:#332440;border-color:#d0b2f7}.learning-path-link .learning-path-action svg{width:18px;height:18px}@media(max-width:600px){.handbook-main .learning-path-link{flex-wrap:wrap;padding:18px 16px;gap:12px}.learning-path-link strong{font-size:21px}.learning-path-link .learning-path-action{width:100%;justify-content:space-between;min-height:46px}.learning-path-link .learning-path-icon svg{width:24px;height:24px}}
.chapter-navigation{margin-top:40px;border-top:1px solid #50415f;padding-top:20px}.chapter-position{font-size:12px;color:#a9a0b6;margin-bottom:16px}.chapter-links{display:grid;grid-template-columns:1fr 1fr;gap:20px}.chapter-links a{display:flex;gap:12px;align-items:center;min-height:88px;padding:16px;border:1px solid #3e3a47;border-radius:4px}.chapter-links a:hover{background:#211a2b;border-color:#b58cff}.chapter-links svg{width:20px;height:20px;flex-shrink:0}.chapter-links span{min-width:0}.chapter-links small{display:block;color:#a8a0b4;font-size:12px;margin-bottom:7px}.chapter-links strong{display:block;font-size:16px;line-height:1.5;overflow-wrap:anywhere}.chapter-links .next-chapter{border-color:#775b96;background:#211a2b}.next-chapter>svg{margin-left:auto}@media(max-width:600px){.chapter-links{grid-template-columns:1fr;gap:12px}.chapter-links a{min-height:80px}}
.profile-links{display:flex;gap:24px;font-size:13px;color:#baa0db;margin-bottom:22px}.profile-links a{padding:8px 0}.profile-browser{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px}.profile-browser>nav{max-height:75vh;overflow:auto;border-top:1px solid #35353e}.profile-browser>nav button{display:block;text-align:left;width:100%;padding:13px 12px;min-height:44px;border:0;border-bottom:1px solid #303038;border-radius:0;background:transparent;font-size:13px}.profile-browser>nav button[aria-pressed=true]{background:#30263d;color:#d5b8f9;border-left:3px solid #b58cff}.background-art{width:100%;max-height:420px;aspect-ratio:16/9;object-fit:contain;background:#101014}.trait-art{width:112px;height:112px;object-fit:contain}.profile-browser h2{font-size:25px;margin:24px 0 12px}.profile-browser h3{font-size:16px;margin-top:26px}.profile-browser p,.profile-browser li{font-size:14px;line-height:1.8;white-space:pre-line}.profile-point{display:flex;gap:20px;align-items:center;padding:16px 0;border-block:1px solid #36363f;font-size:13px;color:#b7a0d3}.profile-point strong{font-size:22px}.profile-browser section{min-width:0}@media(max-width:700px){.profile-browser{grid-template-columns:1fr}.profile-browser>nav{max-height:190px}.background-art{max-height:none}.profile-browser h2{font-size:23px}}
.faq-controls{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;max-width:800px;margin-bottom:20px}.faq-controls .handbook-search{margin:0}.faq-controls>div>label{display:block;font-size:12px;color:#b1b1bf;margin-bottom:8px}.faq-controls select{width:100%;height:48px;padding:10px;background:#17171d}.faq-group{margin:28px 0 40px;max-width:800px}.faq-group>h2{font-size:17px;color:#c2aadf;border-bottom:1px solid #494052;padding-bottom:14px}@media(max-width:600px){.faq-controls{grid-template-columns:1fr;gap:16px}}
.learning-path-link{display:flex;align-items:center;gap:10px;font-size:13px;color:#c8afe9;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #34343d;max-width:800px}.learning-path-link svg{width:17px;height:17px}.learning-path-link svg:last-child{margin-left:auto}.journey-status{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:800px}.journey-status strong{font-size:15px}.journey-status p{font-size:12px;color:#9e9eae;line-height:1.7}.journey-status button{flex-shrink:0}#journey-progress{width:100%;max-width:800px;height:7px;accent-color:#b58cff;margin:16px 0 28px;display:block}.journey-list{max-width:800px}.journey-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;border-top:1px solid #34343d;padding:28px 0}.step-number{font-size:19px;font-variant-numeric:tabular-nums;color:#aa8dcb;padding-top:4px}.step-content h2{font-size:23px;line-height:1.35;margin:9px 0 12px}.step-content h3{font-size:12px;color:#b3b3c3;margin-top:22px}.step-content p{font-size:14px;line-height:1.8;color:#adadbd}.step-content .step-goal{font-size:16px;color:#d2d2dd}.step-links{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0}.step-links a{display:flex;align-items:center;gap:8px;font-size:13px;min-height:40px}.step-links svg{width:15px;height:15px}.step-complete{display:flex;gap:10px;align-items:center;font-size:13px;color:#bfbfce;min-height:44px;cursor:pointer}.step-complete input{width:18px;height:18px;accent-color:#76be91}.step-done .step-number{color:#76be91}.step-done{border-top-color:#4b6956}@media(max-width:500px){.journey-step{grid-template-columns:28px minmax(0,1fr);gap:12px}.step-content h2{font-size:21px}}
@media(max-width:800px){.masthead nav{flex:0 0 100%;width:100%;order:3;flex-wrap:wrap}.masthead .version{margin-left:auto}.masthead{gap:8px 14px}}
@media(max-width:760px){.mobile-handbook-menu{display:block;border-block:1px solid #34343d;margin-bottom:24px;padding:12px 0}.mobile-handbook-menu summary{cursor:pointer;font-size:13px;color:#c6a8ed;min-height:24px}.mobile-handbook-menu nav{display:flex;flex-direction:column;padding-top:10px}.mobile-handbook-menu a{padding:12px 0;font-size:14px;min-height:44px}}
.handbook-layout{display:grid;grid-template-columns:240px minmax(0,1fr);max-width:1500px;margin:auto;min-height:calc(100vh - 160px)}
.handbook-nav{padding:32px 20px;border-right:1px solid #2d2d34;background:#101013}
.nav-label{font-size:10px;font-weight:700;color:#8e8e9c;padding:0 12px;margin-bottom:12px}
.nav-section{margin-top:32px}.handbook-nav>a{display:flex;gap:10px;align-items:center;padding:12px;border-radius:4px;font-size:13px;color:#b8b8c5;line-height:1.4;min-height:44px}.handbook-nav>a svg{width:17px;height:17px;flex-shrink:0}.handbook-nav>a:hover{background:#202026;color:#fff}.handbook-nav>a[aria-current]{background:#262031;color:#d8c2fa}
.development-note{font-size:12px;padding:24px 12px 0;margin-top:28px;border-top:1px solid #303037;line-height:1.9}.development-note small{color:#9494a2;padding-left:14px}.status-dot{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#76be91}
.handbook-main{padding:42px 44px 70px;min-width:0}.handbook-heading{margin-bottom:28px}.handbook-heading h1{font-size:34px;line-height:1.2;margin:12px 0}.handbook-heading p{font-size:15px;color:#aaaab9;max-width:640px}
.handbook-search{margin-bottom:32px;max-width:650px}.handbook-search label{display:block;font-size:12px;color:#b1b1bf;margin-bottom:8px}.handbook-search>div{position:relative}.handbook-search svg{position:absolute;left:15px;top:15px;width:18px;height:18px;color:#9898a8}.handbook-search input{width:100%;height:48px;padding:12px 14px 12px 44px;border:1px solid #45434f;border-radius:4px;background:#17171d;color:#eee;font-size:14px}
.home-columns{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:36px}.section-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-bottom:12px;border-bottom:1px solid #3d3a46}.section-heading h2,.quick-path h2{font-size:16px;margin:0}.section-heading span{color:#9292a2;font-size:12px;white-space:nowrap}
.guide-row,.wiki-articles .guide-row{display:flex;align-items:center;gap:14px;padding:20px 0;border-bottom:1px solid #303037;min-width:0}.guide-row>img{object-fit:contain;flex-shrink:0}.guide-row>span{min-width:0;flex:1}.guide-row small{display:block;color:#a48dbc;font-size:10px;margin-bottom:5px;text-transform:uppercase}.guide-row strong{display:block;color:#eeeef3;font-size:17px;line-height:1.4}.guide-row>span>span{display:block;color:#9d9dab;font-size:13px;margin-top:5px;line-height:1.6}.guide-row>svg{width:16px;height:16px;flex-shrink:0;color:#a68bc7}.guide-row:hover strong{color:#cdb0f5}
.quick-path{padding-top:3px}.quick-path>a{display:flex;align-items:center;gap:10px;min-height:68px;border-bottom:1px solid #303037;font-size:13px;line-height:1.5}.quick-path>a svg{width:17px;height:17px;flex-shrink:0;color:#b59ace}.quick-path>a svg:last-child{margin-left:auto;width:14px}.review-note{margin-top:28px;border-left:2px solid #76be91;padding-left:16px}.review-note h3{font-size:13px;color:#a4ccb3}.review-note p{font-size:12px;line-height:1.8;color:#9898a5}
.handbook-article{max-width:780px}.handbook-article h1{font-size:34px;line-height:1.2;margin:20px 0 12px}.back-link{color:#bfa0e7;font-size:13px}.article-lead{font-size:17px;color:#b0b0bf}.article-contents{display:flex;flex-direction:column;align-items:flex-start;border-left:2px solid #50405f;padding-left:16px;margin:28px 0}.article-contents button{border:0;background:none;text-align:left;color:#bda5d9;padding:7px 0;line-height:1.4;font-size:13px;min-height:36px}.article-contents button:hover{text-decoration:underline}.handbook-article section{scroll-margin:24px;margin:32px 0}.handbook-article h2{font-size:22px;line-height:1.4}.handbook-article p{line-height:1.85;color:#bdbdc9;font-size:15px;white-space:pre-line}.handbook-article .source-note,.source-note{font-size:12px;color:#9494a4;line-height:1.8;border-top:1px solid #303037;padding-top:16px;margin-top:24px}
.evidence{margin:28px 0;border-block:1px solid #34343d;padding:16px 0}.evidence summary{cursor:pointer;color:#bba0dd;font-size:13px}.evidence p,.evidence li{font-size:12px;line-height:1.7;color:#a2a2b2}.evidence code{overflow-wrap:anywhere}.evidence ul{padding-left:18px}
.faq-item{border-bottom:1px solid #35353e;padding:20px 0;max-width:800px}.faq-item summary{cursor:pointer;font-size:17px;line-height:1.6;color:#e5def0;padding-right:12px}.faq-item p{font-size:15px;line-height:1.8;color:#b5b5c3;max-width:720px}.faq-item .plain-link{font-size:13px}.faq-item[open]{padding-bottom:26px}
.reference-tool{max-width:800px;border:1px solid #41414d;background:#141419;padding:24px;margin:24px 0;border-radius:4px}.reference-tool>label{display:flex;justify-content:space-between;color:#c7bbd6;font-size:14px;font-weight:600;margin-bottom:12px}.reference-tool select{min-height:44px;width:100%;max-width:350px;padding:10px;background:#202027;color:#eee;border:1px solid #53515f;border-radius:4px}.reference-tool caption{text-align:left;color:#a8a8b7;font-size:12px;margin-top:15px}.reference-tool th{line-height:1.6}.reference-tool td.compatible{color:#90cba5}.reference-tool td.restricted{color:#e8ac91}.reference-tool p{font-size:14px;line-height:1.8}.reference-tool input[type=range]{width:100%;accent-color:#b58cff;min-height:40px}.mood-metrics{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-block:1px solid #35353e;padding:22px 0;margin:14px 0 24px}.mood-metrics span{display:block;font-size:12px;color:#ababba}.mood-metrics strong{display:block;font-size:28px;color:#b8d4c1;margin-top:8px;font-variant-numeric:tabular-nums}.mood-metrics>div+div strong{color:#dab5ec}.anchor-chart{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:28px}.anchor-column{text-align:center;color:#aaaabb;font-size:12px}.anchor-bars{height:150px;display:flex;align-items:flex-end;justify-content:center;gap:5px;border-bottom:1px solid #555563;margin-bottom:10px;background:repeating-linear-gradient(to top,transparent 0,transparent 49px,#2e2e37 49px,#2e2e37 50px)}.anchor-bars>div{width:22px;max-width:40%;min-height:1px}.recovery-bar{background:#76be91}.use-bar{background:#b58cff}.chart-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11px!important}.recovery-key{color:#92d2a8}.use-key{color:#c7a5f5}
.handbook-main input:focus-visible,.handbook-main select:focus-visible,.handbook-main button:focus-visible,.handbook-main a:focus-visible,.handbook-main summary:focus-visible{outline:2px solid #c9acfa;outline-offset:4px}
@media(max-width:1150px){.handbook-layout{grid-template-columns:210px minmax(0,1fr)}.handbook-main{padding:32px 28px}.home-columns{grid-template-columns:1fr}.quick-path{border-top:1px solid #373740;padding-top:24px}.quick-path>a{max-width:450px}.review-note{max-width:480px}}
@media(max-width:760px){.handbook-layout{display:block}.handbook-nav{display:none}.handbook-main{padding:28px 18px 48px}.handbook-heading h1,.handbook-article h1{font-size:28px}.handbook-heading p{font-size:14px}.handbook-article h2{font-size:20px}.guide-row strong{font-size:16px}.guide-row>span>span{font-size:13px}.reference-tool{padding:18px 14px}.reference-tool th,.reference-tool td{padding:10px 8px;font-size:12px}.anchor-chart{gap:8px}.mood-metrics{gap:12px}.mood-metrics strong{font-size:24px}.masthead nav{flex-wrap:wrap;gap:4px 18px}.masthead nav a{min-height:40px;display:flex;align-items:center}.article-contents button{min-height:44px}.section-heading{align-items:flex-start}.handbook-main h1,.handbook-main h2{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.journey-continuation { margin: 28px 0; padding: 24px 0; border-top: 2px solid #ad87e9; border-bottom: 1px solid #36313f; }
.journey-continuation h2 { font-size: 22px; margin: 10px 0; }
.journey-next-action { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; margin: 18px 0; background: #ad87e9; color: #17121f; font-weight: 700; border-radius: 4px; white-space: normal; overflow-wrap: anywhere; }
.journey-next-action:hover { background: #c3a4f2; }
.journey-next-action:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.planner-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.planner-controls label,.planner-controls select { display:block; width:100%; }
.planner-budget { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding:18px 0; margin:18px 0; border-block:1px solid #ab86d9; color:#d5b8fb; }
.planner-budget.balanced { color:#8dd5b0; border-color:#5a9478; }
.planner-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:24px; }
.planner-layout h2 { font-size:20px; }
#plan-traits { max-height:560px; overflow:auto; overscroll-behavior:contain; margin-top:12px; }
.planner-trait { display:flex; align-items:flex-start; gap:10px; padding:12px 4px; border-bottom:1px solid #343038; }
.planner-trait input { flex:none; margin-top:5px; }
.planner-trait strong,.planner-trait small,.planner-trait span span { display:block; }
.planner-trait small { color:#b79cd7; margin:4px 0; }
.planner-trait span span { font-size:13px; color:#bcb8c2; }
.planner-selected { display:flex; gap:8px; align-items:center; margin:12px 0; }
.planner-review { margin-top:28px; border-top:1px solid #343038; padding-top:18px; }
#plan-errors { color:#eab692; }
@media(max-width:650px) { .planner-layout,.planner-controls { grid-template-columns:1fr; } #plan-traits { max-height:420px; } }
.planner-controls select,#plan-search { min-height:44px; padding:10px; background:#19171e; border:1px solid #51445e; border-radius:3px; color:#eee; font:inherit; margin-top:8px; }
#plan-search { display:block; width:100%; box-sizing:border-box; }
#plan-reset { min-height:44px; padding:10px 16px; color:#e5d6f8; background:#251d30; border:1px solid #6c5086; border-radius:3px; margin:12px 0 24px; }
.summary-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:12px; margin:20px 0; }
.summary-card { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; padding:16px; background:#18171c; border:1px solid #453d50; border-top:3px solid #a88aca; border-radius:4px; }
.summary-card>span { font-size:12px; color:#cec9d5; }
.summary-card>strong { font-size:24px; line-height:1.25; overflow-wrap:anywhere; color:#d5b7f7; }
.summary-card>small { font-size:12px; color:#bcb6c5; line-height:1.5; }
.summary-card.benefit { border-top-color:#72d9a7; }
.summary-card.benefit>strong { color:#8ae6b6; }
.summary-card.caution { border-top-color:#e5ab6d; }
.summary-card.caution>strong { color:#f1bb82; }
.reference-tool:has(.summary-cards),.reference-tool:has(.mood-metrics) { background:transparent; border:0; padding:0; }
.profile-point { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:16px; background:#18171c; border:1px solid #453d50; border-top:3px solid #a88aca; border-radius:4px; }
.profile-point strong { font-size:26px; color:#d5b7f7; }
.hydration-flow { padding:20px; margin:24px 0; border:1px solid #66507a; background:#18141d; }
.hydration-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:20px 0; }
.hydration-stages button { min-height:48px; padding:10px; color:#ece7f3; background:#27222d; border:1px solid #71637d; cursor:pointer; }
.hydration-stages button[aria-pressed="true"] { background:#513669; border-color:#c8a4e8; box-shadow:inset 0 -3px #c8a4e8; }
@media(max-width:480px) { .hydration-stages { grid-template-columns:1fr; } }
.trait-polarity { padding:12px 0; }
.trait-polarity>h3 { margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid #72d9a7; color:#8ae6b6; font-size:18px; }
.trait-polarity.negative>h3 { border-color:#e5ab6d; color:#f1bb82; }
.trait-category>h4 { margin:18px 0 8px; color:#c7addf; font-size:13px; }
.trait-category button { width:100%; }
.journey-practice { margin:32px 0; padding:24px 0; border-top:1px solid #39323f; }
.practice-scenario { min-width:0; margin:20px 0; padding:18px; background:#16141b; border:1px solid #494052; border-radius:4px; }
.practice-scenario legend { font-size:16px; font-weight:700; padding:0 6px; color:#dbc4f5; }
.practice-scenario label { display:flex; align-items:flex-start; gap:10px; padding:12px 0; min-height:44px; cursor:pointer; }
.practice-scenario input { flex:none; margin-top:5px; accent-color:#ac83de; }
.practice-feedback:not(:empty) { border-left:3px solid #e5ab6d; padding:14px; margin-top:12px; }
.practice-feedback.correct { border-color:#72d9a7; }
.practice-feedback>strong { color:#f1bb82; }
.practice-feedback.correct>strong { color:#8ae6b6; }
.study-example { padding:22px 0; border-block:1px solid #39323f; margin:22px 0; }
.study-example label { display:block; margin-bottom:8px; }
.study-example select { width:100%; min-height:44px; padding:10px; background:#19171e; color:#eee; border:1px solid #51445e; border-radius:3px; }
.resume-section { display:block; width:100%; text-align:left; min-height:44px; padding:14px; margin:20px 0; color:#a5e2c0; background:#14251e; border:1px solid #527c66; border-radius:4px; font:inherit; }
.handbook-article>section[id] { scroll-margin-top:100px; }
.handbook-article h2:focus-visible { outline:2px solid #ac83de; outline-offset:5px; }
.water-transfer-tool { padding:22px 0; margin:24px 0; border-block:1px solid #39323f; }
.water-transfer-tool input { display:block; box-sizing:border-box; width:100%; min-height:44px; margin-top:8px; padding:10px; background:#19171e; color:#eee; border:1px solid #51445e; border-radius:3px; }
#water-outcome { margin-top:18px; }
.trait-choice-art { width:40px; height:40px; flex:none; object-fit:contain; }
#profile-list .trait-category button { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-height:64px; text-align:left; }
.trait-choice-cost { display:block; width:100%; padding-left:50px; font-size:11px; }
.trait-choice-cost.refund { color:#8ae6b6; }
.trait-choice-cost.spend { color:#d5b7f7; }
.planner-trait>span { min-width:0; overflow-wrap:anywhere; }
.handbook-stage { margin:0 0 28px; }
.handbook-stage>h3 { display:flex; align-items:center; gap:12px; font-size:16px; line-height:1.4; padding:12px 0; margin:0; color:#e5dded; border-bottom:1px solid #504059; }
.handbook-stage>h3>span { font-size:12px; color:#c5a0eb; flex:none; }
.planner-trait .trait-restriction { color:#f1bb82; line-height:1.5; margin-top:8px; }
.planner-trait.has-restriction { border-left:2px solid #b88752; padding-left:10px; }
.planner-skill-group { margin:20px 0; }
.planner-skill-group>h4 { color:#8ae6b6; }
.planner-skill-group.caution>h4 { color:#f1bb82; }
.planner-skill-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:10px; }
.planner-skill-cards>a { display:flex; flex-direction:column; min-width:0; text-decoration:none; color:inherit; overflow-wrap:anywhere; }
.planner-skill-cards>a:hover { border-color:#c5a0eb; }
.planner-skill-cards>a:focus-visible { outline:2px solid #c5a0eb; outline-offset:3px; }
.health-capacity-example { margin:24px 0; padding:20px 0; border-block:1px solid #494052; }
.health-capacity-example>label { display:flex; justify-content:space-between; gap:12px; }
.health-capacity-example input { width:100%; min-height:44px; accent-color:#bb91ee; }
.health-example-bars label { display:grid; grid-template-columns:minmax(0,1fr) 45px; gap:8px; margin:18px 0; }
.health-example-bars meter { grid-column:1; grid-row:2; width:100%; height:18px; accent-color:#72d9a7; }
.health-example-bars strong { grid-column:2; grid-row:2; text-align:right; }
.journey-stage-nav { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:0 20px; margin:24px 0; }
.journey-stage-nav button { display:grid; grid-template-columns:28px minmax(0,1fr); gap:4px 10px; padding:14px 4px; min-height:76px; text-align:left; font:inherit; color:#eee7f4; background:transparent; border:0; border-bottom:1px solid #494052; cursor:pointer; }
.journey-stage-nav button>span { color:#be98e6; grid-row:1 / 3; }
.journey-stage-nav button>strong { font-size:14px; overflow-wrap:anywhere; }
.journey-stage-nav button>small { grid-column:2; font-size:12px; color:#aaa2b3; }
.journey-stage-nav button.stage-complete>small { color:#8ae6b6; }
.journey-stage-nav button:hover { background:#211b29; }
.journey-stage-nav button:focus-visible { outline:2px solid #bb91ee; outline-offset:2px; }
.lesson-panel { scroll-margin-top:100px; }
.game-screen-example { margin:24px 0; }
.game-screen-open { display:block; position:relative; width:100%; padding:0; border:1px solid #68537c; background:#111; cursor:zoom-in; }
.game-screen-open img { display:block; width:100%; height:auto; }
.game-screen-open svg { position:absolute; right:8px; bottom:8px; width:24px; height:24px; padding:6px; color:#fff; background:#17121e; }
.game-screen-example figcaption { margin-top:10px; color:#bfb6c8; font-size:13px; line-height:1.6; }
.game-screen-dialog { width:min(1400px,96vw); max-width:96vw; max-height:94vh; box-sizing:border-box; padding:48px 12px 12px; background:#111015; border:1px solid #887199; }
.game-screen-dialog::backdrop { background:#000d; }
.game-screen-dialog>button { position:absolute; top:6px; right:8px; }
.game-screen-dialog>img { display:block; width:100%; height:auto; }
.profile-library { padding:20px 0; margin-bottom:24px; border-block:1px solid #494052; }
.profile-library input { box-sizing:border-box; width:100%; min-height:44px; padding:10px; color:#eee; background:#19171e; border:1px solid #51445e; }
.build-actions { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.build-actions button { min-height:44px; padding:8px 14px; color:#eee; background:#30243e; border:1px solid #806299; border-radius:3px; cursor:pointer; }
.build-actions button:disabled { opacity:.45; cursor:default; }
.creator-background-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; margin:24px 0; }
.creator-background-workspace>section { min-width:0; }
.creator-background-choices>input { width:100%; box-sizing:border-box; min-height:44px; padding:10px; margin:8px 0; background:#19171e; color:#eee; border:1px solid #51445e; }
#creator-background-rows { max-height:510px; overflow:auto; scrollbar-gutter:stable; }
.creator-background-row { display:flex; align-items:center; gap:10px; width:100%; min-height:90px; padding:6px; margin:0 0 8px; border:2px solid transparent; background:#1f1f1f; color:#fff; text-align:left; cursor:pointer; }
.creator-background-row[aria-pressed="true"] { border-color:#688eac; background:#2b4e6b; }
.creator-background-row:hover { border-color:#b99ad8; }
.creator-background-row img { width:100px; height:70px; object-fit:contain; flex:none; }
.creator-background-row span { min-width:0; overflow-wrap:anywhere; }
.creator-background-row strong { display:block; font-size:16px; }
.creator-background-row small { display:block; margin-top:8px; color:#ddd; }
.planner-layout.traits-workspace { display:block; }
@media(max-width:650px) { .creator-background-workspace { grid-template-columns:minmax(0,1fr); } #creator-background-rows { max-height:300px; } }
.creator-stage-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:20px 0; }
.creator-stage-tabs button,.creator-stage-footer button { min-height:44px; padding:8px; background:#222; color:#ddd; border:1px solid #605568; font:inherit; cursor:pointer; }
.creator-stage-tabs button[aria-selected="true"] { color:#fff; background:#49345e; border-color:#c09be8; }
.creator-stage-tabs button { font-size:13px; overflow-wrap:anywhere; }
.creator-stage-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0; }
.creator-stage-footer button:disabled { opacity:.4; }
.creator-stage-footer span { font-size:13px; text-align:center; }
[role="tabpanel"][hidden] { display:none !important; }
.creator-diet-panel select,.creator-background-choices select { display:block; width:100%; min-height:44px; margin:8px 0; background:#19171e; color:#eee; border:1px solid #51445e; }
.creator-diet-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:10px; margin:20px 0; }
.creator-diet-choices button { display:flex; align-items:center; gap:12px; min-height:96px; padding:12px; color:#eee; background:#1f1f1f; border:2px solid #3b3541; text-align:left; cursor:pointer; }
.creator-diet-choices button[aria-pressed="true"] { border-color:#ac84d4; background:#332540; }
.creator-diet-choices img { object-fit:contain; flex:none; }
.creator-diet-choices strong,.creator-diet-choices small { display:block; }
.creator-diet-choices small { margin-top:8px; color:#8ae6b6; }
.creator-food-catalogue { margin:24px 0; }
.creator-food-catalogue input { width:100%; box-sizing:border-box; min-height:44px; padding:10px; color:#eee; background:#19171e; border:1px solid #51445e; }
.creator-food-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:12px; }
.creator-food { display:flex; align-items:center; gap:10px; min-width:0; min-height:72px; border-bottom:1px solid #39323f; }
.creator-food img { flex:none; object-fit:contain; }
.creator-food span { min-width:0; overflow-wrap:anywhere; }
.creator-food strong,.creator-food small { display:block; }
.creator-food strong { font-size:13px; }
.creator-food small { font-size:11px; color:#aaa2b3; margin-top:5px; }
.creator-food-group.compatible>h3 { color:#8ae6b6; }
.creator-food-group.off-diet>h3 { color:#f1bb82; }
.review-origin { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:12px 0; border-bottom:1px solid #494052; }
.review-origin>img { object-fit:contain; max-width:100%; }
.review-origin>div { flex:1; min-width:100px; }
.review-trait-group.positive>h4 { color:#8ae6b6; }
.review-trait-group.negative>h4 { color:#f1bb82; }
.review-trait-choice { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #39323f; }
.review-trait-choice>img { flex:none; object-fit:contain; }
.review-trait-choice>span { flex:1; min-width:0; overflow-wrap:anywhere; }
.review-trait-choice strong,.review-trait-choice small { display:block; }
.review-trait-choice small { margin-top:5px; color:#bfb6c8; }
.review-trait-choice>button { flex:none; }
.profile-library-drawer { margin:20px 0; border-block:1px solid #494052; }
.profile-library-drawer>summary { padding:16px 4px; min-height:44px; box-sizing:border-box; cursor:pointer; color:#d7b8f5; font-weight:600; }
.profile-library-drawer .profile-library { border:0; margin:0; padding-top:4px; }
@media(max-width:480px) { .creator-stage-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } .creator-stage-tabs button { white-space:nowrap; } }
.creator-trait-filter { display:block; margin:14px 0; }
.creator-trait-filter select { display:block; width:100%; min-height:44px; margin-top:6px; padding:8px; background:#19171e; color:#eee; border:1px solid #51445e; }
.profile-library-drawer { scroll-margin-top:90px; }
.creator-choice-notice { padding:12px; border-left:3px solid #e5ab6d; color:#f1bb82; background:#241d17; }
#plan-traits.creator-trait-panes { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.8fr) minmax(0,1fr); gap:16px; max-height:none; overflow:visible; }
#creator-trait-focus { min-width:0; padding:16px; background:#211a29; border:1px solid #79608f; max-height:560px; overflow:auto; }
#creator-trait-focus h3 { margin-top:0; }
.creator-focused-art { width:96px; height:96px; object-fit:contain; display:block; margin:12px auto; }
.creator-trait-entry { margin-bottom:10px; border-bottom:1px solid #3f3548; padding-bottom:8px; }
.creator-trait-entry .planner-trait > span > span { display:none; }
.creator-trait-entry .planner-trait { min-height:72px; margin-bottom:4px; }
.creator-trait-constraints { border-top:1px solid #66507a; margin-top:16px; padding-top:8px; }
.creator-trait-constraints ul,.creator-selected-groups ul { padding-left:18px; }
.creator-selected-group h5 { font-size:13px; margin:12px 0 6px; }
.creator-selected-group.positive h5 { color:#8ae6b6; }
.creator-selected-group.negative h5 { color:#f1bb82; }
.creator-selected-group.mixed h5 { color:#d6c978; }
.creator-selected-group small { display:block; color:#c7b5d5; }
.creator-inspect { padding:6px 12px; min-height:36px; color:#dfc5f3; border:1px solid #79608f; background:#241b2d; cursor:pointer; }
@media(max-width:1000px) { #creator-trait-focus { order:-1; max-height:none; } }
.creator-trait-pane { min-width:0; max-height:560px; overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; padding-right:8px; }
.creator-trait-pane .planner-trait:has(input:checked) { background:#263c35; box-shadow:inset 3px 0 #78caa2; }
.creator-trait-pane .negative .planner-trait:has(input:checked) { background:#3c2d22; box-shadow:inset 3px 0 #e5ab6d; }
.trait-polarity.mixed>h3 { border-color:#d6c978; color:#d6c978; }
.creator-trait-toolbar { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:12px; align-items:end; }
.creator-trait-toolbar>div,.creator-trait-toolbar>label { min-width:0; margin:0; }
.creator-trait-toolbar .planner-selected { grid-column:1/-1; }
.creator-trait-toolbar select { box-sizing:border-box; }
.survivor-creator #plan-budget-details { gap:8px; }
.survivor-creator #plan-budget-details .summary-card { padding:10px 12px; }
.survivor-creator #plan-budget-details small { display:none; }
@media(max-width:650px) { .creator-trait-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); } .creator-trait-search { grid-column:1/-1; } .creator-trait-toolbar label { font-size:12px; } .survivor-creator #plan-budget-details { grid-template-columns:repeat(3,minmax(0,1fr)); } .survivor-creator #plan-budget-details .summary-card { padding:8px; min-width:0; } .survivor-creator #plan-budget-details strong { font-size:20px; margin-top:6px; } .survivor-creator #plan-budget-details span { font-size:11px; overflow-wrap:anywhere; } }
@media(max-width:1000px) { #plan-traits.creator-trait-panes { grid-template-columns:minmax(0,1fr); } .creator-trait-pane { max-height:none; overflow:visible; padding-right:0; } }
/* Service preparation controls need a clear label and a comfortable touch target. */
#electrical-device{display:block;width:100%;min-height:44px;margin:8px 0 16px;padding:10px 12px;border:1px solid var(--border);background:#141417;color:var(--text);font:inherit}
label[for="electrical-device"]{display:block;margin-top:12px}
label[for="power-normal"],label[for="power-saver"]{display:block;margin-top:18px;line-height:1.6}
#power-normal,#power-saver{display:block;margin:6px 0 12px}
#power-skill{display:block;width:100%;min-height:44px;padding:10px 12px;margin-top:8px;font:inherit;background:#141417;color:var(--text);border:1px solid var(--border)}
#power-condition{display:block;width:100%;min-height:44px;margin-top:8px;accent-color:var(--purple)}
/* Shared numeric and range controls for handbook calculators. */
.hydration-flow .planner-controls input[type="number"]{display:block;width:100%;min-height:44px;padding:10px 12px;margin-top:8px;font:inherit;background:#19171e;color:#eee;border:1px solid #51445e;border-radius:3px}
.hydration-flow input[type="range"]{display:block;width:100%;min-height:44px;margin:8px 0;accent-color:var(--purple)}
.hydration-flow .planner-controls label{line-height:1.6}
.hydration-flow input:focus-visible,.hydration-flow select:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* Tracking comparison: keep each quantity and its unit legible on narrow screens. */
#tracking-status { margin: 1rem 0 1.5rem; line-height: 1.6; }
#tracking-comparison h3 { margin: 1.5rem 0 .8rem; }
#tracking-comparison label { display: block; margin: .8rem 0 .35rem; line-height: 1.5; }
#tracking-comparison label strong { display: block; }

.guide-row .guide-match { border-left:2px solid #806397; padding-left:12px; margin-top:12px; overflow-wrap:anywhere; }
.guide-match b { display:block; color:#cbb4df; margin-bottom:4px; font-weight:600; }

.build-actions label {display:block; min-width:0; max-width:100%;}
.build-actions input[type=file] {display:block; width:100%; min-width:0; max-width:100%; min-height:44px; margin-top:8px;}

.cooking-catalogue {margin:2rem 0} .cooking-catalogue input {box-sizing:border-box;width:100%;min-height:44px;padding:12px;background:#17131e;color:inherit;border:1px solid #78678e} .cooking-entry {padding:0 16px 16px;overflow-wrap:anywhere} .cooking-entry h3 {margin-top:1.5rem}

#cooking-more {min-height:44px;max-width:100%;white-space:normal;margin-top:1rem;padding:10px 16px}

.settings-contents-search input{display:block;box-sizing:border-box;width:100%;min-height:44px;margin-top:8px;padding:10px;background:#17131e;color:inherit;border:1px solid #78678e}.settings-contents-search p{margin:8px 0}.article-contents button[hidden]{display:none}

/* Recipe requirements controls stay stacked on narrow screens. */
.hydration-flow label[for^="recipe-gate-"] { display: block; margin: .85rem 0 .35rem; }
#recipe-gate-search, #recipe-gate-category { display: block; box-sizing: border-box; width: 100%; max-width: 100%; }
#recipe-gate-results .summary-card > strong { font-size: 1.05rem; overflow-wrap: anywhere; }
#recipe-gate-results .summary-card > small { overflow-wrap: anywhere; }

.background-package { margin: 1.5rem 0; }
.background-package > h3 { margin:1.5rem 0 .75rem; line-height:1.4; }
.background-bonus { display:flex; gap:1rem; padding:1rem; border:1px solid var(--border,#36333d); border-radius:6px; background:var(--surface,#17161b); }
.background-bonus img,.starting-item-cards img { object-fit:contain; flex-shrink:0; }
.background-bonus h4 { margin:0 0 .5rem; }
.background-bonus p { margin:0; white-space:pre-line; }
.starting-item-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:.65rem; padding:0; list-style:none; }
.starting-item-cards li { display:flex; align-items:center; gap:.75rem; padding:.75rem; border:1px solid var(--border,#36333d); border-radius:6px; min-width:0; }
.starting-item-cards strong,.starting-item-cards span { display:block; overflow-wrap:anywhere; }
.starting-item-cards span { color:var(--text-muted,#b6b2bd); font-size:.85rem; margin-top:.25rem; }

.bonus-data { margin-top:1rem; }
.bonus-data .bonus-status { border-left:3px solid #e5ab6d; padding-left:1rem; }
.bonus-data table { table-layout:fixed; }
.bonus-data th,.bonus-data td { overflow-wrap:anywhere; }

.bonus-comparison th,.bonus-comparison td { padding:.65rem .4rem; vertical-align:top; line-height:1.5; }
.bonus-comparison th:first-child { width:42%; }
@media(max-width:500px){.bonus-comparison th,.bonus-comparison td { font-size:12px; }}

/* Purple surface hierarchy for the player handbook; Explorer stays independent. */
.handbook-layout { background:#191322; border-inline:1px solid #382a48; }
.handbook-nav { background:#21192b; border-right-color:#493658; }
.handbook-main { background:#191322; }
.handbook-nav>a:hover { background:#342541; }
.handbook-nav>a[aria-current] { background:#453052; color:#f0dfff; box-shadow:inset 3px 0 #bc91ef; }
.handbook-heading h1,.handbook-article h2,.background-package>h3 { color:#eadcff; }
.profile-browser h3 { color:#d7b7f6; }
.handbook-article>section>h2 { border-left:3px solid #ad7ed9; padding-left:12px; }
.guide-hero { background:linear-gradient(135deg,#3b2750,#241a30); border-color:#805799; }
.article-contents { background:#241b30; border-left-color:#b78add; padding:14px 18px; border-radius:0 6px 6px 0; }
.chapter-links>a { background:#261c33; border-color:#624675; }
.chapter-links>a.next-chapter { background:#3a2849; border-color:#9465b2; }
.background-bonus { background:#2d203b; border-color:#75518b; border-left:3px solid #bc91ef; }
.starting-item-cards li { background:#251c31; border-color:#4f3b60; }
.starting-item-cards li:nth-child(even) { background:#30233c; }
.starting-item-cards strong { color:#f1e6ff; }
.bonus-more { padding:12px 14px; background:#251b31; border:1px solid #59416c; border-radius:5px; }
.bonus-more summary { color:#d9b8f8; cursor:pointer; }
.handbook-layout table,.profile-inspector table { border:1px solid #5a426d; }
.handbook-layout table caption,.profile-inspector table caption { text-align:left; color:#dbc0f4; padding:12px 0; font-weight:600; }
.handbook-layout table thead,.profile-inspector table thead { background:#3a294a; }
.handbook-layout table thead th,.profile-inspector table thead th { color:#f2e4ff; font-weight:650; }
.handbook-layout table tbody tr:nth-child(odd),.profile-inspector table tbody tr:nth-child(odd) { background:#241b30; }
.handbook-layout table tbody tr:nth-child(even),.profile-inspector table tbody tr:nth-child(even) { background:#322440; }
.handbook-layout table th,.handbook-layout table td,.profile-inspector table th,.profile-inspector table td { border-bottom-color:#57416a; }
.profile-inspector { background:#191322; }

.progression-lesson .planner-controls { gap:12px; margin:18px 0; }
.progression-lesson button { min-height:44px; padding:10px 16px; border:1px solid #9671bf; border-radius:5px; background:#392647; color:#f1e7ff; font:inherit; cursor:pointer; }
.progression-lesson button:hover { background:#513561; }
.progression-lesson button:focus-visible { outline:3px solid #d5b7f7; outline-offset:3px; }
.progression-lesson #learning-next { margin-top:14px; }

/* In-body learning panels keep comparisons visible while reading. */
.handbook-article .visual-guide-section { padding:20px; margin:20px 0; border:1px solid #554064; border-radius:8px; background:linear-gradient(120deg,#291d35,#1c1825); }
.handbook-article .visual-guide-section:nth-of-type(even) { background:linear-gradient(120deg,#211b2d,#302039); }
.handbook-article .visual-guide-section h2 { display:flex; align-items:center; gap:12px; margin-top:0; }
.section-topic-art { flex:none; object-fit:contain; }
.learning-panel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.learning-panel { padding:18px; border-radius:7px; background:#342342; border-top:3px solid #bc90e3; }
.learning-panel:nth-child(2) { background:#29293f; border-color:#9cb7e8; }
.learning-panel:nth-child(3) { background:#3c2c32; border-color:#dfb66f; }
.learning-panel img { display:block; margin-bottom:12px; object-fit:contain; }
.learning-panel span { display:block; color:#dac4ed; font-size:.85rem; }
.learning-panel strong { display:block; margin:8px 0; font-size:1.1rem; line-height:1.35; }
.learning-panel p { margin:0; line-height:1.6; }
@media(max-width:700px) { .learning-panel-grid { grid-template-columns:1fr; } .handbook-article .visual-guide-section { padding:16px; } }
.learning-panel-grid { margin-top:16px; }

.health-example,.rate-comparison,.activity-recovery { margin:20px 0; padding:18px; background:#181b2a; border-radius:8px; }
.health-example>div,.rate-comparison>div,.activity-recovery>div { display:grid; grid-template-columns:minmax(120px,1fr) minmax(80px,2fr) auto; gap:14px; align-items:center; padding:10px 0; }
.health-example meter,.rate-comparison meter,.activity-recovery meter { width:100%; height:28px; accent-color:#c59be8; }
.visual-takeaway { padding:14px 18px; border-left:4px solid #c7a0e8; background:#382743; color:#f1e7ff; }
#energy-stamina-example { display:block; width:100%; margin:16px 0; accent-color:#c5a0e8; }
@media(max-width:600px) { .health-example>div,.rate-comparison>div,.activity-recovery>div { grid-template-columns:1fr auto; gap:6px; } .health-example meter,.rate-comparison meter,.activity-recovery meter { grid-column:1/-1; grid-row:auto; } .health-example,.rate-comparison,.activity-recovery { padding:12px; } }

.overlap-blocked { border-left-color:#e2af76; background:#3e2a2c; }

.recipe-card-heading { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.recipe-card-heading img,.recipe-ingredient-grid img { object-fit:contain; flex:none; }
.recipe-learning-requirements { padding-left:20px; line-height:1.6; }
.recipe-ingredient-grid { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.recipe-ingredient-grid li { display:flex; align-items:center; gap:10px; padding:10px; background:#332740; border-radius:6px; }
.recipe-source-details { margin-top:12px; font-size:.8rem; overflow-wrap:anywhere; }
.recipe-equipment { color:#e0c9f1; font-weight:600; }
@media(max-width:700px) { .recipe-ingredient-grid { grid-template-columns:1fr; } }

#recipe-gate-results { grid-template-columns:repeat(2,minmax(0,1fr)); }
#recipe-gate-results .recipe-card { background:#2b2135; border-color:#72558a; }
#recipe-gate-results .recipe-card:nth-child(even) { background:#26253a; }
@media(max-width:700px) { #recipe-gate-results { grid-template-columns:1fr; } }

/* Full-width guide artwork followed by summaries, as requested. */
.guide-hero { display:flex; flex-direction:column; align-items:stretch; gap:20px; }
.guide-hero figure { flex:none; width:100%; max-width:none; margin:0; }
.guide-hero .guide-game-art { width:100%; max-height:none; height:auto; object-fit:contain; }
.guide-hero>.summary-cards { margin:0; width:100%; }

.guide-hero { padding:0; overflow:hidden; }
.guide-hero-text { padding:24px 24px 0; }
.guide-hero .guide-game-art { border-left:0; border-right:0; }
.guide-hero figcaption { padding:0 24px; }
.guide-hero>.summary-cards { padding:0 24px 24px; box-sizing:border-box; }
@media(max-width:760px) { .guide-hero-text { padding:18px 18px 0; } .guide-hero figcaption { padding:0 18px; } .guide-hero>.summary-cards { padding:0 18px 18px; } }

/* A filtered recipe should use the available reading width. */
#recipe-gate-results > .recipe-card:only-child { grid-column:1 / -1; }
.recipe-learning-materials .recipe-ingredient-grid > li:only-child { grid-column:1 / -1; }