.codex-header{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--eb-space-3);min-height:52px}
.codex-back{width:44px;height:44px;padding:var(--eb-space-3)}
.codex-title{margin:0;font:800 var(--eb-text-xl)/1 var(--eb-font-display);text-align:center}
.codex-count{color:var(--eb-ink-quiet);font-size:var(--eb-text-sm);white-space:nowrap}
.codex-dial{position:relative;height:104px;margin-top:var(--eb-space-2);touch-action:pan-y;outline:none}
.codex-dial::before{content:"";position:absolute;left:var(--eb-space-2);right:var(--eb-space-2);top:50%;height:1px;background:color-mix(in srgb,var(--eb-bronze-lo) 45%,transparent)}
.codex-dial:focus-visible{outline:2px solid var(--eb-select);outline-offset:1px;border-radius:var(--eb-radius-lg)}
.codex-dial-option{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;padding:0;border:0;border-radius:50%;background:transparent;transform-origin:center;will-change:transform,opacity;cursor:pointer}
.codex-dial-option:focus-visible{outline:2px solid var(--eb-select);outline-offset:1px}
.codex-medallion{display:block;width:100%;height:100%;object-fit:contain}
.codex-dial-option .codex-medallion{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.codex-labels{position:relative;height:48px;overflow:hidden}
.codex-deck-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;will-change:transform,opacity}
.codex-deck-label strong{font:700 var(--eb-text-lg)/1.2 var(--eb-font-display)}
.codex-deck-label span{margin-top:var(--eb-space-1);color:var(--eb-ink-quiet);font-size:var(--eb-text-sm)}
.codex-dots,.codex-zoom-dots{display:flex;align-items:center;justify-content:center;gap:var(--eb-space-2);height:20px;color:var(--eb-ink-quiet)}
.codex-dot{display:block;width:6px;height:6px;background:currentColor;transform:rotate(45deg);opacity:.4;transition:transform var(--eb-dur-lift) var(--eb-ease),opacity var(--eb-dur-lift) var(--eb-ease)}
.codex-dot.is-current{transform:rotate(45deg) scale(1.3);opacity:1}
.codex-grids{position:relative;height:304px;margin-top:var(--eb-space-2);touch-action:pan-y;will-change:transform}
.codex-grid-wrap{position:absolute;inset:0;will-change:transform,opacity}
.codex-card-grid{display:grid;grid-template-columns:repeat(3,104px);grid-auto-rows:146px;gap:var(--eb-space-3) var(--eb-space-2);justify-content:center}
.codex-card{position:relative;color:var(--eb-ink);background:var(--eb-card-plate);border-style:solid;border-color:transparent;border-radius:calc(var(--eb-card-frame) * .6);border-image:url("../assets/frames/card-frame-bronze.webp") 40 fill / var(--eb-card-frame) stretch;box-shadow:var(--eb-shadow-rest);font-family:var(--eb-font-ui)}
.codex-card::after{content:"";position:absolute;inset:calc(var(--eb-card-frame) * -1);border-radius:inherit;box-shadow:var(--eb-shadow-lift);opacity:0;pointer-events:none;transition:opacity var(--eb-dur-lift) var(--eb-ease)}
.codex-card--s{--eb-card-frame:12px;width:104px;height:146px;padding:12px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform var(--eb-dur-tap) var(--eb-ease),opacity var(--eb-dur-lift) var(--eb-ease)}
.codex-card--s:active{transform:scale(.96)}
.codex-card--s:active::after,.codex-zoom-slide[aria-hidden="false"] .codex-card--l::after{opacity:1}
.codex-card--s:focus-visible{outline:2px solid var(--eb-select);outline-offset:1px}
.codex-card-top{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:20px}
.codex-cost{position:relative;isolation:isolate;display:grid;place-items:center;width:22px;height:22px;color:var(--eb-plate-edge);font:800 var(--eb-text-xs)/1 var(--eb-font-display)}
.codex-cost::before{content:"";position:absolute;inset:3px;z-index:-1;background:linear-gradient(135deg,var(--eb-essence-hi),var(--eb-essence-lo));box-shadow:0 0 0 1px var(--eb-plate-edge);transform:rotate(45deg)}
.codex-card-type{font-size:9px;font-weight:800;letter-spacing:.08em}
.codex-card-type--manifestation{color:var(--eb-bronze-hi)}
.codex-card-type--technique{color:var(--eb-type-technique)}
.codex-card-type--response{color:var(--eb-drop)}
.codex-card-medallion--s{width:26px;height:26px;margin-top:2px}
.codex-card-name{display:-webkit-box;width:100%;max-height:22px;margin-top:2px;overflow:hidden;font:700 10px/1.05 var(--eb-font-display);text-align:center;text-shadow:var(--eb-text-shadow);-webkit-box-orient:vertical;-webkit-line-clamp:2}
.codex-card-short{display:-webkit-box;flex:0 0 auto;width:100%;max-height:20px;margin:3px 0 2px;overflow:hidden;color:var(--eb-ink-quiet);font-size:9px;font-weight:800;line-height:1.05;text-align:center;text-shadow:var(--eb-text-shadow);text-wrap:balance;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.codex-card-stats{display:flex;flex:0 0 auto;width:100%;justify-content:space-between;margin-top:auto;font:700 12px/1 var(--eb-font-display)}
.codex-card-stat{display:inline-flex;align-items:center;gap:2px;padding:2px 4px;background:color-mix(in srgb,var(--eb-plate-edge) 90%,transparent);border-radius:var(--eb-radius-sm);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--eb-bronze-lo) 60%,transparent);text-shadow:var(--eb-text-shadow)}
.codex-card-stat .eb-icon{width:12px;height:12px}
.codex-hint{margin:var(--eb-space-3) 0 0;text-align:center;color:var(--eb-ink-quiet);font-size:var(--eb-text-sm)}
.card-browser.is-animating .codex-dial-option,.card-browser.is-animating .codex-deck-label,.card-browser.is-animating .codex-grid-wrap{transition:transform var(--eb-dur-attack) var(--eb-ease),opacity var(--eb-dur-attack) var(--eb-ease)}
.is-zoom-source{opacity:0!important}
.codex-zoom{position:fixed;inset:0;z-index:var(--eb-z-sheet);overflow:hidden;opacity:0;transition:opacity var(--eb-dur-attack) var(--eb-ease)}
.codex-zoom.is-open{opacity:1}
.codex-zoom-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(4,6,12,.91);cursor:pointer}
.codex-zoom-close{position:fixed;top:calc(env(safe-area-inset-top) + var(--eb-space-3));right:var(--eb-space-3);z-index:3;width:44px;height:44px}
.codex-zoom-stage{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 62px);width:280px;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 128px);margin-left:-140px;overflow:visible;transform-origin:50% 196px;transition:transform var(--eb-dur-attack) var(--eb-ease);touch-action:pan-y}
.codex-zoom-track{position:relative;width:280px;height:100%;transition:transform var(--eb-dur-attack) var(--eb-ease)}
.codex-zoom-slide{position:absolute;left:0;top:0;width:280px;will-change:transform,opacity}
.codex-zoom.is-sliding .codex-zoom-slide{transition:transform var(--eb-dur-attack) var(--eb-ease),opacity var(--eb-dur-attack) var(--eb-ease)}
.codex-card--l{--eb-card-frame:30px;width:280px;height:392px;padding:30px 30px 28px;display:flex;flex-direction:column;align-items:center}
.codex-card--l .codex-card-top{min-height:30px}
.codex-card--l .codex-cost{width:30px;height:30px;font-size:20px}
.codex-card--l .codex-card-type{font-size:var(--eb-text-xs)}
.codex-card-medallion--l{width:112px;height:112px;margin-top:var(--eb-space-2)}
.codex-card--l .codex-card-name{display:block;margin-top:var(--eb-space-2);font-size:var(--eb-text-xl);line-height:1.1}
.codex-card-deck{margin-top:var(--eb-space-1);color:var(--eb-ink-quiet);font-size:var(--eb-text-sm)}
.codex-card--l .codex-card-short{display:block;margin-top:var(--eb-space-3);font-size:var(--eb-text-md);line-height:1.2}
.codex-card--l .codex-card-stats{font-size:var(--eb-text-lg)}
.codex-card--l .codex-card-stat{padding:4px 8px}
.codex-card--l .codex-card-stat .eb-icon{width:20px;height:20px}
.codex-info{position:relative;z-index:1;width:280px;max-height:150px;margin-top:var(--eb-space-2);padding:var(--eb-space-3);overflow:auto;color:var(--eb-ink);background:var(--eb-plate);border-radius:var(--eb-radius-md);box-shadow:inset 0 0 0 1px var(--eb-bronze-lo),inset 0 0 0 3px var(--eb-plate-edge),inset 0 0 0 4px color-mix(in srgb,var(--eb-bronze-lo) 60%,transparent);font-size:var(--eb-text-sm);line-height:1.35}
.codex-info p{margin:0 0 var(--eb-space-2)}.codex-info p:last-child{margin-bottom:0}
.codex-keywords{display:flex;flex-wrap:wrap;gap:var(--eb-space-1)}
.codex-keywords .eb-chip{min-height:28px;min-width:0;padding:var(--eb-space-1) var(--eb-space-2);font-size:var(--eb-text-xs)}
.codex-zoom-controls{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + var(--eb-space-2));z-index:3;display:grid;grid-template-columns:44px minmax(112px,1fr) 44px;align-items:center;gap:var(--eb-space-2);width:280px;transform:translateX(-50%)}
.codex-zoom-controls .eb-icon-btn{width:44px;height:44px}.codex-zoom-controls .is-next .eb-icon{transform:rotate(180deg)}
@media(max-width:380px){.codex-card-grid{grid-template-columns:repeat(3,104px);gap:var(--eb-space-3) 6px}}
@media(prefers-reduced-motion:reduce){.card-browser.is-animating .codex-dial-option,.card-browser.is-animating .codex-deck-label,.card-browser.is-animating .codex-grid-wrap,.codex-zoom,.codex-zoom-stage,.codex-zoom.is-sliding .codex-zoom-slide{transition-duration:150ms;transition-timing-function:linear}.codex-dial-option,.codex-deck-label,.codex-grid-wrap,.codex-zoom-slide{transition-timing-function:linear!important}.codex-card::after{transition-duration:0s}}
.codex-header-tools{display:flex;align-items:center;gap:var(--eb-space-2)}.codex-find-button .eb-icon{width:20px;height:20px}
.codex-finder{padding:18px 16px 16px;display:flex;flex-direction:column;min-height:0}.codex-finder-title{margin:0 52px 12px 0;font:700 22px/1.1 var(--eb-font-display);color:#f3ead8}.codex-finder-row{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:6px;margin-top:10px}.codex-finder-label{font:700 9px var(--eb-font-ui);letter-spacing:1.5px;text-transform:uppercase;color:#c9a26a}.codex-finder-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}.codex-finder-chips::-webkit-scrollbar{display:none}.codex-finder-chip{flex:none;min-height:44px;min-width:44px;padding:0 12px;border:1px solid #c9a26a55;border-radius:22px;background:#0c1019cc;color:var(--eb-ink-quiet);font:700 12px var(--eb-font-ui);cursor:pointer;transition:background 150ms var(--eb-ease),color 150ms var(--eb-ease),border-color 150ms var(--eb-ease)}.codex-finder-chip[aria-pressed="true"]{border-color:#f3dfb4;background:#2a2418;color:#f3dfb4;box-shadow:inset 0 0 0 1px #f3dfb455}.codex-finder-chip[aria-pressed="true"]::before{content:"✓ "}.codex-finder-chip:focus-visible{outline:2px solid #fff3dc;outline-offset:2px}.codex-finder-status{margin:12px 2px 8px}.codex-finder-results{display:grid;gap:6px;max-height:min(46svh,420px);overflow-y:auto;overscroll-behavior:contain;padding-right:2px}.codex-finder-result{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:10px;min-height:56px;padding:6px 10px;border:1px solid #c9a26a44;border-radius:10px;background:#0c1019cc;color:var(--eb-ink);text-align:left;cursor:pointer;transition:transform 150ms var(--eb-ease),border-color 150ms var(--eb-ease)}.codex-finder-result:active{transform:scale(.98)}.codex-finder-result:focus-visible{border-color:#f3dfb4}.codex-finder-medallion{width:30px;height:30px}.codex-finder-copy{display:grid;gap:2px;min-width:0}.codex-finder-copy strong{font:700 14px var(--eb-font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.codex-finder-copy small{font:600 11px var(--eb-font-ui);color:var(--eb-ink-quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.codex-finder-cost{justify-self:center}
@media(prefers-reduced-motion:reduce){.codex-finder-chip,.codex-finder-result{transition:none}}
.codex-guide-button{display:flex;width:max-content;align-items:center;gap:6px;min-height:44px;margin:0 auto;padding:0 14px;border:1px solid #c9a26a66;border-radius:22px;background:#0c1019b3;color:#f3dfb4;font:700 12px var(--eb-font-ui);letter-spacing:.3px;cursor:pointer;transition:border-color 150ms var(--eb-ease),transform 150ms var(--eb-ease)}.codex-guide-button .eb-icon{width:16px;height:16px;color:#c9a26a}.codex-guide-button:active{transform:scale(.97)}.codex-guide-button:focus-visible{outline:2px solid #fff3dc;outline-offset:2px}.codex-guide-button::after{content:"›";color:#c9a26a}
.deck-guide{padding:18px 16px 22px}.deck-guide-head{display:flex;align-items:center;gap:12px;margin-top:4px;padding-right:48px}.deck-guide-medallion{width:46px;height:46px;flex:none}.deck-guide-title{margin:0;font:700 24px/1.05 var(--eb-font-display);color:var(--c,#f3ead8)}.deck-guide-style{margin:3px 0 0;font:700 10px var(--eb-font-ui);letter-spacing:1.5px;text-transform:uppercase;color:#c9a26a}.deck-guide-plan{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:plan}.deck-guide-plan li{display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:14px;line-height:1.45;color:var(--eb-ink);counter-increment:plan}.deck-guide-plan li::before{content:counter(plan);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px #c9a26a;color:#f3dfb4;font:700 12px var(--eb-font-display)}.deck-guide-combo{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.deck-guide-arrow{color:#c9a26a;font-weight:800}.deck-guide-step{padding:6px 10px;border-radius:8px;background:#151a26;color:#f3dfb4;font:700 12px var(--eb-font-ui)}.deck-guide-watch b{color:#f0c674}.deck-guide-tome{margin-top:14px}
@media(prefers-reduced-motion:reduce){.codex-guide-button{transition:none}}
.codex-guide-icon .eb-icon{width:20px;height:20px}
.codex-card--l .codex-card-name{max-height:none;overflow:visible;-webkit-line-clamp:unset}
/* Shrunken side medallions keep a 44 px tap area: the hit circle grows by the inverse of the dial scale. */
.codex-dial-option::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,calc(44px / var(--dial-scale,1)));height:max(100%,calc(44px / var(--dial-scale,1)));border-radius:50%;transform:translate(-50%,-50%)}