/* A living infographic: real game art, selectable text, and one continuous page. */
.modal.field-guide-modal{width:min(100%,760px);max-width:760px;max-height:calc(calc(var(--game-height) * 1.0) - 24px);display:block;overflow-y:auto;padding:24px;background:radial-gradient(ellipse at top right,#344a40 0,transparent 55%),#191d25;border-color:#b99b65;scrollbar-width:thin;color:#f7ecd6}
.field-guide-modal h2{font-size:26px;line-height:1.4;margin:8px 0 4px;color:#fff1d4;letter-spacing:0}
.field-guide-modal .eyebrow{font-size:10px;letter-spacing:2px;color:#cdb785}
.field-guide-modal .guide-lead{font-size:12px;color:#bfcabe;margin:0 0 16px;line-height:1.6}
.tutorial-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;counter-reset:steps}
.tutorial-flow li{position:relative;min-width:0;border:1px solid #8b9b7655;background:#11161dd9;padding:14px;border-radius:4px}
.step-heading{display:flex;gap:10px;align-items:center}.step-heading>span{font:24px Georgia,serif;color:#e1c787}.step-heading h3{font-size:16px;margin:0;color:#f7e4b7}
.step-art{height:70px;display:flex;align-items:center;justify-content:center;margin:7px 0;background:radial-gradient(ellipse,#a5c39718,transparent 70%)}
.step-art img{width:58px;height:58px;object-fit:contain;image-rendering:pixelated}.step-art>img{width:70px;height:70px}
.tutorial-flow li>b{display:block;font-size:12px;line-height:1.6;color:#d9e8c7}.field-guide-modal .tutorial-flow p{font-size:11px;line-height:1.7;color:#bdc6c4;margin:5px 0 0}
.guide-bag{display:grid;grid-template-columns:repeat(3,27px);grid-template-rows:repeat(2,27px);gap:3px;padding:4px;background:#080e13;border:1px solid #b69d68;transform:rotate(-4deg)}.guide-bag img,.guide-bag i{width:27px;height:27px;background:#3e493a;border:1px solid #b3c59466}.guide-duel,.guide-rewards{display:flex;align-items:center;gap:16px;color:#e2c47c;font:24px Georgia,serif}.guide-rewards>span{font-size:40px}
.guide-start{display:flex;align-items:center;gap:12px;padding:12px;margin-top:12px;border-left:3px solid #c5d99d;background:#c6dc9810;font-size:12px;line-height:1.6}.guide-start b{color:#e5f3be;flex:none}.guide-start span{color:#d0d8c7}
.guide-facts{display:flex;justify-content:space-around;flex-wrap:wrap;gap:8px;font-size:11px;color:#d6c39c;margin:12px 0}
.guide-actions{display:flex;gap:10px;margin-top:16px}.guide-actions button{flex:1;min-height:44px;font-size:12px;padding:8px;line-height:1.5}
.guide-overview,.guide-contents button{width:100%;display:flex;align-items:center;gap:14px;padding:14px;text-align:left;min-height:62px}.guide-overview{background:#344334;border-color:#a8bc88;margin-bottom:14px}.guide-overview>span,.guide-contents button>span{font:22px Georgia,serif;color:#dac28c}.guide-overview div,.guide-contents div{flex:1;min-width:0}.guide-overview b,.guide-contents b{display:block;font-size:14px;line-height:1.5;color:#f0e3c7}.guide-overview small,.guide-contents small{display:block;font-size:11px;line-height:1.5;color:#b5c1b4;margin-top:4px}.guide-contents{display:grid;gap:8px}.guide-contents button{background:#151b21;border-color:#76826666;box-shadow:none}.guide-detail{display:grid;gap:16px;margin:20px 0}.guide-detail h3{margin:0 0 6px;font-size:15px;color:#e4ce98}.field-guide-modal .guide-detail p{margin:0;font-size:13px;color:#d4d9cd;line-height:1.9}.guide-detail section{border-bottom:1px solid #83947033;padding-bottom:16px}.guide-breadcrumb{margin-top:12px}.guide-breadcrumb button{font-size:12px;min-height:36px}
.field-guide-modal button:focus-visible{outline:3px solid #e8efb6;outline-offset:3px}
@container game (max-width:480px){.modal.field-guide-modal{padding:15px}.field-guide-modal h2{font-size:21px}.field-guide-modal .eyebrow{font-size:8px;letter-spacing:1.4px}.tutorial-flow{gap:8px}.tutorial-flow li{padding:10px}.step-heading{gap:6px}.step-heading h3{font-size:14px}.step-heading>span{font-size:20px}.step-art{height:57px;margin:4px 0}.step-art>img{height:56px;width:56px}.guide-duel img,.guide-rewards img{height:39px;width:39px}.guide-duel,.guide-rewards{gap:7px}.tutorial-flow li>b{font-size:11px}.field-guide-modal .tutorial-flow p{font-size:11px}.guide-start{display:block;font-size:11px;padding:9px}.guide-start b{display:block}.guide-facts{font-size:10px}.guide-actions{margin-top:10px;gap:8px}.guide-actions button{font-size:11px}.guide-overview b,.guide-contents b{font-size:13px}}
@container game (aspect-ratio > 1) and (max-height:480px){.modal.tutorial-modal{width:min(100%,960px);max-width:960px;padding:14px}.tutorial-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.tutorial-flow li{padding:9px}.step-heading h3{font-size:13px}.step-art{height:48px}.step-art>img{height:48px;width:48px}.guide-start{padding:7px;margin-top:8px}.guide-facts{margin:7px 0}.guide-actions{margin-top:8px}.field-guide-modal .guide-lead{margin-bottom:10px}}
@container game (aspect-ratio > 1) and (max-height:480px){.tutorial-modal h2{font-size:21px;margin:3px 0}.tutorial-modal .step-art{height:40px;margin:2px 0}.tutorial-modal .step-art>img{height:40px;width:40px}.tutorial-modal .guide-lead{font-size:11px;margin-bottom:7px}.tutorial-modal .tutorial-flow li>b,.tutorial-modal .tutorial-flow p{font-size:10px;line-height:1.5}.tutorial-modal .step-heading>span{font-size:19px}.tutorial-modal .guide-start{font-size:10px}.tutorial-modal .guide-facts{font-size:10px;margin:6px 0}.tutorial-modal .guide-actions button{min-height:36px;padding:6px;font-size:11px}}
@container game (aspect-ratio > 1) and (max-height:480px){.tutorial-modal .guide-bag{transform:rotate(-4deg) scale(.58)}.tutorial-modal .guide-duel img,.tutorial-modal .guide-rewards img{width:36px;height:36px}.tutorial-modal .guide-rewards>span{font-size:30px}}