/* In-game information sheet. Examples reuse the game's UI styles. */
.information-panel { --guide-lime:#c6f700; --guide-muted:#bbb6c1; box-sizing:border-box; position:fixed; inset:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; margin:0; border:0; padding:0; color:#f5f3f7; background:#0c0810; overflow-y:auto; overscroll-behavior:contain; font:15px/1.7 'Zalando Sans Expanded',sans-serif; }
.information-panel *, .information-panel *::before, .information-panel *::after { box-sizing:border-box; }
.information-panel::backdrop { background:#0c0810; }
.information-panel h1,.information-panel h2,.information-panel h3,.information-panel p { margin:0; }
.information-panel a { color:inherit; text-decoration:none; }
.information-panel button,.information-panel select,.information-panel a { touch-action:manipulation; }
.information-panel a:focus-visible,.information-panel select:focus-visible { outline:2px solid var(--guide-lime); outline-offset:4px; }
.guide-nav { position:sticky; top:0; z-index:3; display:flex; justify-content:center; gap:28px; padding:12px 20px; background:#0c0810; border-bottom:1px solid #ffffff18; }
.guide-nav a { display:flex; align-items:center; min-height:44px; color:#bdb7c5; font-size:14px; white-space:nowrap; }.guide-nav a:hover { color:var(--guide-lime); }
.guide-nav a[aria-current="location"] { color:var(--guide-lime); box-shadow:inset 0 -2px var(--guide-lime); }
.guide-content { width:min(960px,100% - 112px); margin:auto; padding:36px 0 130px; }
.guide-content section { scroll-margin-top:96px; margin-bottom:48px; }
.guide-section-heading { display:flex; gap:20px; align-items:center; margin-bottom:24px; }
.guide-section-heading::after { content:''; height:1px; background:#ffffff28; flex:1; }
.guide-section-heading h2 { font:400 18px/1.5 'Zalando Sans Expanded',sans-serif; text-transform:uppercase; }
.information-panel h3 { font-size:16px; font-weight:400; }
/* The icon centre remains at the Information button's exact game position. */
.guide-close.glass-button { position:fixed; z-index:5; left:var(--guide-close-left,40px); bottom:var(--guide-close-bottom,40px); height:var(--guide-close-size,60px); gap:0; padding:0 20px 0 0; font-size:16px; }
.guide-close-icon { width:var(--guide-close-size,60px); height:100%; display:grid; place-items:center; flex:none; }
.guide-close-icon img { width:var(--guide-close-icon-size,24px); height:var(--guide-close-icon-size,24px); }
.information-panel::after { content:''; position:fixed; z-index:4; bottom:0; left:0; right:0; height:calc(var(--guide-close-bottom,40px) + var(--guide-close-size,60px) + 12px); background:linear-gradient(transparent,#0c0810 22%); pointer-events:none; }
/* Keep the card-based paytable, with restrained typography and no extra hero. */
.guide-rarities { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.guide-rarity { --rarity-color:#bfbdc6; padding:0 0 14px; text-align:center; border:1px solid #ffffff18; border-radius:14px; background:#ffffff03; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.guide-rarity[data-rarity=uncommon] { --rarity-color:#8ed391; }.guide-rarity[data-rarity=rare] { --rarity-color:#86c7f5; }.guide-rarity[data-rarity=epic] { --rarity-color:#d197f3; }.guide-rarity[data-rarity=mythic] { --rarity-color:#efd586; }
.guide-rarity:hover,.guide-rarity[aria-pressed=true] { border-color:var(--rarity-color); }
.guide-rarity-art { position:relative; display:block; width:100%; padding:14px 14px 8px; }.guide-rarity-art>img { width:100%; height:auto; display:block; }
.guide-rarity-tag { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); font-size:12px; text-transform:uppercase; color:var(--rarity-color); background:#16111ef5; border:1px solid currentColor; border-radius:20px; padding:3px 8px; }
.guide-rarity-name { color:var(--guide-muted); font-size:13px; margin:2px 0 8px; }.guide-rarity>strong { font:400 24px/1.5 'Zalando Sans Expanded',sans-serif; color:var(--rarity-color); }.guide-muted { color:var(--guide-muted); font-size:13px; }.guide-rarity-value { font-size:13px; margin-top:12px; }
.guide-equation { margin:24px 0; display:flex; flex-direction:column; gap:4px; }.guide-equation>span { color:var(--guide-muted); font-size:15px; }.guide-equation strong { font-weight:400; font-size:16px; }.guide-equation b { color:#d4dfb0; font-weight:400; }
.guide-two-col { display:grid; grid-template-columns:1fr 1fr; gap:30px; }.guide-conditions { padding:0 0 28px; }.guide-pill { font-size:15px; }.guide-conditions p { font-size:15px; color:var(--guide-muted); margin-top:6px; }
.guide-paytable { border:1px solid #ffffff20; border-radius:12px; overflow:hidden; scroll-margin-top:96px; }.guide-table-toolbar { display:flex; justify-content:space-between; gap:20px; padding:20px; align-items:center; }
.guide-segment { display:flex; flex-shrink:0; padding:3px; border:1px solid #ffffff22; border-radius:30px; }.guide-segment button { border:0; border-radius:30px; background:transparent; padding:10px 14px; font-size:13px; min-height:40px; }.guide-segment button[aria-pressed=true] { background:var(--guide-lime); color:#182000; }
.guide-table-filter { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:0 20px 20px; font-size:15px; }.guide-table-filter select { background:#1c1722; color:#fff; border:1px solid #ffffff30; border-radius:8px; font:inherit; min-height:44px; padding:8px 32px 8px 12px; }.guide-table-filter>span { color:var(--guide-muted); margin-left:auto; font-size:13px; }
.guide-table-results table { width:100%; border-collapse:collapse; table-layout:fixed; text-align:left; font-size:15px; }.guide-table-results caption { text-align:left; padding:12px 20px; color:var(--guide-muted); background:#ffffff04; font-size:13px; border-top:1px solid #ffffff14; }.guide-table-results th,.guide-table-results td { padding:10px 20px; border-bottom:1px solid #ffffff0d; font-weight:400; }.guide-table-results thead { background:#ffffff05; }.guide-table-results small { display:block; color:var(--guide-muted); font-size:13px; }.guide-table-results td strong { color:#d7e5ad; font-weight:400; font-size:16px; }.guide-table-results tbody tr:hover { background:#ffffff04; }.guide-table-note { color:var(--guide-muted); font-size:13px; padding:18px 20px; }
.guide-facts { margin-top:24px; }.guide-facts article { margin-top:14px; }.guide-facts p { color:var(--guide-muted); font-size:15px; margin-top:4px; }
.guide-steps { display:grid; gap:18px; }.guide-steps article { position:relative; padding-left:28px; }.guide-steps article>span { position:absolute; left:0; color:var(--guide-muted); }.guide-steps p { color:var(--guide-muted); font-size:15px; margin-top:4px; }.guide-callout { margin-top:22px!important; color:var(--guide-muted); font-size:15px; }
/* Layout-only overrides: actual button surfaces, icons and labels come from styles.css. */
.guide-controls { display:grid; }
.guide-control { display:grid; grid-template-columns:260px minmax(0,1fr); align-items:center; gap:32px; padding:24px 0; border-bottom:1px solid #ffffff12; }.guide-control:first-child { padding-top:0; }
.guide-control-sample { display:flex; align-items:center; justify-content:center; min-width:0; min-height:60px; pointer-events:none; user-select:none; }
.guide-control-sample>.guide-ui-example { position:static; inset:auto; translate:none; transform:none; opacity:1; visibility:visible; margin:0; flex:none; }
.guide-control-sample img { display:block; }
.guide-control-sample .open-arrow { transform:none; opacity:1; }.guide-control-sample .open-label { opacity:1; }
.guide-control-sample .swipe-guide { width:26px; height:140px; }.guide-control-sample .swipe-guide svg { width:100%; height:100%; }
.guide-control-sample .binder-sell-selected { width:100%; }
.guide-control-sample .binder-grouping { gap:8px; }.guide-control-sample .binder-grouping button { font-size:11px; }
.guide-control-sample .binder-progress { font-size:12px; color:#ffffff99; }
.guide-control p { color:var(--guide-muted); font-size:15px; margin-top:6px; }
.guide-totals { margin-top:32px; }.guide-totals dl { display:grid; grid-template-columns:1fr 1fr; gap:18px 30px; margin:18px 0 0; }.guide-totals dt { font-size:15px; }.guide-totals dd { color:var(--guide-muted); font-size:15px; margin:4px 0 0; }
.guide-stat-sample { margin:20px 0; justify-content:flex-start; }.guide-stat-sample .stat-line { width:100%; padding:0; flex-wrap:wrap; gap:12px; }
.guide-world>h3 { margin-bottom:12px; }.guide-world>p { color:var(--guide-muted); font-size:15px; margin-top:12px; }
.guide-session { border-top:1px solid #ffffff24; padding-top:24px; }.guide-session p { color:var(--guide-muted); font-size:13px; margin-top:10px; }
@media(max-width:900px) { .guide-content { width:calc(100% - 48px); }.guide-rarities { gap:10px; }.guide-rarity-art { padding:10px 8px 6px; }.guide-rarity-value { font-size:13px; }.guide-control { grid-template-columns:220px minmax(0,1fr); gap:24px; } }
@media(max-width:700px) {
 .guide-nav { justify-content:flex-start; gap:22px; overflow-x:auto; padding:8px 16px; padding-top:calc(8px + env(safe-area-inset-top)); }.guide-nav a { min-height:44px; font-size:14px; }
 .guide-content { width:calc(100% - 32px); padding-top:26px; padding-bottom:120px; }.guide-content section { margin-bottom:36px; scroll-margin-top:calc(88px + env(safe-area-inset-top)); }.guide-section-heading { gap:16px; margin-bottom:22px; }.guide-section-heading h2 { font-size:16px; }
 .guide-close.glass-button { font-size:16px; padding-right:16px; }
 .guide-rarities { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.guide-rarity-art { padding:14px 18px 8px; }.guide-rarity-value { font-size:13px; }
 .guide-rarity:last-child { grid-column:1/-1; display:grid; grid-template-columns:42% 58%; grid-template-rows:repeat(5,auto); padding:12px; align-items:center; }.guide-rarity:last-child .guide-rarity-art { grid-row:1/6; padding:0 8px 0 0; }.guide-rarity:last-child .guide-rarity-name { align-self:end; }.guide-rarity:last-child .guide-rarity-value { margin-top:4px; }.guide-rarity:last-child .guide-rarity-tag { bottom:8px; }
 .guide-two-col { grid-template-columns:1fr; gap:16px; }.guide-table-toolbar { padding:18px 14px; flex-direction:column; align-items:flex-start; gap:16px; }.guide-table-filter { padding:0 14px 16px; gap:8px; }.guide-table-filter>span { width:100%; margin-left:0; }.guide-table-results th,.guide-table-results td { padding:12px 8px; }.guide-table-results th:first-child { width:36%; }.guide-table-results table { font-size:13px; }.guide-table-results caption { padding:12px 14px; font-size:13px; }.guide-table-results td strong { font-size:16px; }.guide-table-results small { font-size:12px; }.guide-table-note { padding:16px 14px; }.guide-paytable { scroll-margin-top:calc(88px + env(safe-area-inset-top)); }
 .guide-control { grid-template-columns:1fr; gap:16px; padding:24px 0; }.guide-control-sample { justify-content:flex-start; min-height:48px; }.guide-control-sample .swipe-guide { margin-left:48px; }.guide-control-sample .binder-sell-selected { width:min(280px,100%); }.guide-control-sample .binder-grouping button { font-size:11px; }.guide-control-sample .binder-group-track { min-height:44px; }
 .guide-totals dl { grid-template-columns:1fr; }.guide-stat-sample .stat-line { gap:6px 12px; font-size:9px; }
}