/* A readable reference inside the game. The native dialog owns focus containment. */
.field-guide { margin:auto; width:min(900px,calc(100% - 40px)); height:min(800px,calc(100dvh - 40px)); max-width:none; max-height:none; padding:0; border:1px solid #d8ebba33; border-radius:30px; color:var(--text); background:var(--bg); box-shadow:0 24px 100px #000b; overflow:hidden; }
.field-guide[open] { display:flex; flex-direction:column; }
.field-guide::backdrop { background:#040d12df; backdrop-filter:blur(12px); }
.guide-header { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:26px 28px 20px; background:url('command-pattern.svg') right center/420px auto,linear-gradient(120deg,#34473c,#15292d); border-bottom:1px solid var(--line); }
.guide-heading .eyebrow { color:#c5d6a5; font-size:9px; letter-spacing:2px; }.guide-heading h2 { font:600 40px/1.1 var(--display); letter-spacing:.2px; margin-top:8px; }
.guide-header .icon-button { background:#d2ef8610; color:var(--accent); box-shadow:inset 0 1px #d2ef8644; }
.guide-search-row { padding:18px 24px; flex-shrink:0; background:#15262b; }
.guide-search { display:flex; align-items:center; gap:12px; padding:0 14px; border:1px solid #cbe0b42a; border-radius:15px; background:#08171d; color:var(--accent); }
.guide-search:focus-within { outline:2px solid var(--accent); outline-offset:2px; }.guide-search .icon { width:20px; height:20px; }
.guide-search input { width:100%; min-width:0; min-height:48px; border:0; padding:0; background:transparent; color:var(--text); font:inherit; font-size:16px; outline:0; border-radius:inherit; }.guide-search input::placeholder { color:#97aaa9; font-size:13px; }
.guide-layout { display:flex; flex:1; min-height:0; }
.guide-categories { display:flex; flex-direction:column; flex-shrink:0; width:176px; gap:5px; overflow-y:auto; padding:15px 12px; background:#14242a; border-right:1px solid var(--line); scrollbar-width:thin; }
.guide-category { display:flex; align-items:center; gap:10px; text-align:left; min-height:46px; padding:8px 12px; border-radius:12px; font-size:12px; background:transparent; color:var(--muted); flex-shrink:0; }
.guide-category .icon { width:18px; height:18px; }.guide-category[aria-pressed="true"] { color:var(--accent); background:linear-gradient(110deg,#d2ef8622,#d2ef8608); box-shadow:inset 2px 0 var(--accent); }
.guide-scroll { flex:1; min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:24px; scrollbar-width:thin; scrollbar-color:#4b6257 transparent; }
.guide-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }.guide-section-heading { margin-bottom:14px; }
.guide-section-heading .eyebrow { color:#b9c999; font-size:8px; letter-spacing:2px; }.guide-section-heading h3 { font:600 32px/1.1 var(--display); margin-top:6px; }.guide-section-heading p { margin-top:10px; font-size:12px; line-height:1.7; color:var(--muted); }
.guide-result-count { color:#9cafa6; font-size:10px; letter-spacing:.3px; margin-bottom:12px; }
.guide-article { margin-top:8px; border-radius:18px; background:linear-gradient(140deg,#cfdfb90b,#cfdfb903); box-shadow:inset 0 1px #e3efcf18; overflow:hidden; }
.guide-article[open] { background:linear-gradient(140deg,#2a3c32,#14262c 65%); box-shadow:inset 0 1px #e1f5b532; }
.guide-article summary { display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none; min-height:72px; padding:12px 16px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.guide-article summary::-webkit-details-marker { display:none; }.guide-article summary::after { content:'+'; font:600 25px var(--display); color:var(--accent); margin-left:auto; padding-left:5px; }.guide-article[open] summary::after { content:'−'; }
.guide-article summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:inherit; }
.guide-article-visual { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; color:var(--accent); border-radius:12px; background:radial-gradient(ellipse,#d2ef8615,transparent 75%); }
.guide-article-visual img { width:44px; height:44px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 3px 3px #0007); }.guide-article-visual .icon { width:25px; height:25px; }
.guide-article-title { min-width:0; }.guide-article-title strong { display:block; font:600 22px/1.2 var(--display); letter-spacing:.2px; }.guide-article-title small { display:block; color:var(--muted); font-size:9px; margin-top:5px; letter-spacing:.2px; }
.guide-article-body { padding:0 18px 18px; color:#c3d0c8; font-size:13px; line-height:1.8; }.guide-article-body p+p { margin-top:12px; }.guide-article-body strong { color:#e8f0cf; font-weight:650; }
.guide-article-body ul,.guide-article-body ol { margin:12px 0 0; padding-left:20px; }.guide-article-body li+li { margin-top:8px; }.guide-article-body a { color:var(--accent); }
.guide-steps { list-style:none; padding:0!important; counter-reset:step; }.guide-steps li { position:relative; counter-increment:step; padding-left:38px; margin-top:18px!important; }.guide-steps li::before { content:counter(step,decimal-leading-zero); position:absolute; left:0; top:0; font:600 23px var(--display); color:var(--accent); }.guide-steps strong { display:block; margin-bottom:4px; }
.guide-tip { padding:12px 14px; border-left:2px solid var(--accent); background:#d2ef8609; margin-top:16px; border-radius:0 10px 10px 0; }
.guide-crosslink { padding:7px 13px; min-height:44px; font-size:11px; margin:12px 6px 0 0; background:#d2ef8612; color:var(--accent); border-radius:12px; }
.guide-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:14px 0; }.guide-stats div { padding:10px; background:#07171e66; border-radius:12px; }.guide-stats dt { color:var(--muted); font-size:9px; line-height:1.4; }.guide-stats dd { margin:5px 0 0; color:var(--text); font:600 23px/1.1 var(--display); }
.guide-table-wrap { overflow-x:auto; margin-top:12px; }.guide-table { border-collapse:collapse; width:100%; min-width:270px; font-size:11px; }.guide-table th { color:#d4e3b7; text-align:left; font-weight:600; font-size:10px; }.guide-table th,.guide-table td { padding:10px 7px; border-bottom:1px solid var(--line); }.guide-table th:first-child,.guide-table td:first-child { padding-left:0; }
.guide-empty { padding:30px 10px; text-align:center; }.guide-empty>.icon { width:36px; height:36px; color:var(--accent); }.guide-empty h3 { font:600 28px var(--display); margin-top:16px; }.guide-empty p { color:var(--muted); font-size:12px; line-height:1.6; margin:10px 0 20px; }.guide-empty button { padding:10px 18px; color:var(--accent); }
.guide-footer { display:flex; justify-content:space-between; gap:10px; padding:14px 24px; border-top:1px solid var(--line); background:#122027; color:#9db293; font-size:9px; letter-spacing:.3px; flex-shrink:0; }.guide-footer span:last-child { color:#718a80; letter-spacing:1px; font-size:8px; }
@media (max-width:650px) {
  .field-guide { width:calc(100% - 16px); height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius:24px; }
  .guide-header { padding:20px 18px 16px; gap:8px; }.guide-heading h2 { font-size:32px; }.guide-heading .eyebrow { font-size:8px; letter-spacing:1.4px; }.guide-header .icon-button { width:44px; height:44px; min-height:44px; }
  .guide-search-row { padding:12px 16px; }.guide-layout { flex-direction:column; }.guide-categories { flex-direction:row; width:100%; overflow-x:auto; overflow-y:hidden; gap:6px; padding:0 16px 12px; border-right:0; border-bottom:1px solid var(--line); scrollbar-width:none; }
  .guide-category { border-radius:24px; min-height:44px; padding:9px 14px; background:#ffffff04; font-size:11px; }.guide-category[aria-pressed="true"] { box-shadow:inset 0 -2px var(--accent); }.guide-category .icon { width:16px; height:16px; }
  .guide-scroll { padding:20px 16px; }.guide-section-heading h3 { font-size:30px; }.guide-article summary { padding:12px; gap:10px; }.guide-article-title strong { font-size:22px; }.guide-article-body { padding:0 14px 18px; font-size:12px; }.guide-article-visual { width:34px; }.guide-stats { gap:5px; }.guide-stats div { padding:9px; }.guide-stats dd { font-size:22px; }
  .guide-footer { padding:12px 16px; }.guide-footer span:last-child { display:none; }
}
@media (orientation:landscape) and (max-height:560px) {
  .field-guide { width:calc(100% - 16px); height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius:20px; }
  .guide-header { padding:8px 18px; }.guide-heading h2 { font-size:27px; margin-top:0; }.guide-heading .eyebrow { font-size:7px; }.guide-search-row { padding:7px 16px; }.guide-search input { min-height:44px; }
  .guide-layout { flex-direction:row; }.guide-categories { width:146px; flex-direction:column; overflow-y:auto; overflow-x:hidden; padding:8px; border-bottom:0; border-right:1px solid var(--line); }.guide-category { border-radius:12px; min-height:44px; }.guide-scroll { padding:16px; }.guide-footer { padding:8px 16px; }
}