:root{--panel:#15293dbd;--panel-2:#10203499;--ink:#fdf6e3;--ink-dim:#becbd7;--ink-faint:#9aafc1;--gold:#f5d685;--gold-soft:#f5d68550;--good:#8cddd0;}
html,body{min-height:100%;overflow-x:hidden;overflow-y:auto;background:var(--navy-2);}
#gameShell{width:100%;max-width:var(--game-max-width);height:100vh;height:100dvh;min-height:400px;margin:0 auto;display:flex;flex-direction:column;background:linear-gradient(#07122040,#07122050),url('/watch/assets/night-gallery-v1.png') center/cover no-repeat;}
#shellHeader{flex-shrink:0;min-height:54px;z-index:60;}
#brandBar{margin:0;flex-wrap:nowrap;padding-bottom:6px;}
#brandLogo{font-family:Bungee,sans-serif;}
#page{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:auto;width:100%;max-width:none;margin:0;padding:14px;scrollbar-width:thin;scrollbar-color:#718fa6 #102034;}
#page>header,#filterBar{padding:14px;border:1px solid #ffffff28;border-radius:14px;background:#102034b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-bottom:12px;}
h1{font-family:Bungee,sans-serif;font-size:22px;line-height:1.2;}
h1 .sub{font:400 11px/1.5 system-ui,sans-serif;margin-top:8px;}
#headerRight{width:100%;gap:8px;}
#progressBadge{margin-right:auto;border:0;padding:0;font-size:11px;color:#9ee6d8;background:none;}
.quiet-btn{min-height:40px;padding:8px 12px;border-radius:9px;}
#filterBar{gap:10px;}
#genreChips{width:100%;gap:6px;}
.chip{min-height:36px;background:#ffffff0a;color:#dbe5ed;}
.chip.active{background:#8cddd025;border-color:#8cddd080;color:#c1f6ec;}
#searchInput{width:100%;min-width:0;flex-basis:100%;height:42px;border:1px solid #ffffff28;border-radius:9px;background:#0d192a99;color:var(--ink);}
#searchInput::placeholder{color:#9fb2c6;}
select{min-height:38px;max-width:100%;background:#172a40;color:var(--ink);border-radius:8px;}
#grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.dex-card{background:#102034b8;border:1px solid #ffffff28;box-shadow:0 5px 16px #0003;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.dex-title{font-size:13px;line-height:1.4;}
.dex-info{padding:10px;}
.dex-entry-no{background:#142438dd;color:#f5d685;border:1px solid #ffffff20;}
#switcherPanel{background:#152538f2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);width:min(280px,calc(100vw - 56px));}
.switcher-item{min-height:44px;}
#modalBackdrop{z-index:100;background:#07122055;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
#modal{width:min(540px,100%);max-height:90dvh;background:linear-gradient(145deg,#20364bea,#102034f2);border:1px solid #ffffff30;border-radius:18px;box-shadow:0 24px 80px #0008;}
#modalAnswer{font-family:inherit;}
#modalCloseBtn,#modalPrevBtn,#modalNextBtn{min-height:44px;border-radius:9px;}
#gameShell footer{flex-shrink:0;}
#gamesMenuPanel{position:absolute;top:100%;right:8px;z-index:100;background:var(--navy);border:1px solid #ffffff30;border-radius:10px;padding:8px;min-width:170px;}
#gamesMenuPanel[hidden]{display:none;}.games-menu-item{display:flex;align-items:center;gap:10px;padding:10px;color:var(--text-on-dark);text-decoration:none;font-size:13px;}.games-menu-item:hover{background:#ffffff16;}.games-menu-icon svg{width:18px;height:18px;}
@media(max-width:420px){#grid{grid-template-columns:repeat(2,minmax(0,1fr));}#page{padding:12px;}#page>header,#filterBar{padding:12px;}#headerRight{gap:6px;}.quiet-btn{font-size:11px;padding:7px 10px;}}
#page>header{padding:16px;gap:14px;background:#102034bd;z-index:30;}
h1{font-size:23px;}h1 .sub{font-size:12px;line-height:1.5;}
#filterBar{display:block;padding:12px;}
#searchInput{display:block;font-size:16px;height:44px;padding:10px 12px;}
#filterOptions{margin-top:6px;}
#filterOptions summary{min-height:44px;cursor:pointer;padding:12px 2px;color:#d7e7ee;font-size:12px;}
#filterCount{color:#8cddd0;font-size:11px;margin-left:6px;}
.filter-options-body{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:12px;}
.filter-options-body>div:not(#genreChips){flex:1;min-width:110px;}
.filter-options-body label{display:block;margin-bottom:5px;}
.filter-options-body select{width:100%;font-size:16px;min-height:44px;}
#resultsLabel{margin:0;padding-top:7px;border-top:1px solid #ffffff15;color:#9fb9c9;font-size:11px;letter-spacing:.04em;}
.quiet-btn,.chip{min-height:44px;}
.dex-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:36px;line-height:18px;}
.dex-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:#102034dd;}
#emptyMsg{padding:24px 16px;background:#102034df;border:1px solid #ffffff24;border-radius:14px;text-align:center;line-height:1.6;}
#modalCloseBtn{width:44px;height:44px;font-size:24px;z-index:2;background:#152538ed;}
#modalNav{position:sticky;bottom:-20px;padding:12px 0;background:#142639f5;border-top:1px solid #ffffff20;}
@media(max-width:600px){#modalBackdrop{padding:12px;align-items:flex-end;}#modal{max-height:calc(100dvh - 36px);padding:18px;border-radius:20px;}#modalNav{bottom:-18px;padding-bottom:max(12px,env(safe-area-inset-bottom));}#modalImgWrap{max-width:280px;margin-left:auto;margin-right:auto;}}

/* Warm translucent game surfaces, matching /play; shared navigation stays navy. */
#page,#modal{color-scheme:light;--panel:#fff7e6ed;--panel-2:#e8dfcc;--ink:#102338;--ink-dim:#233b4b;--ink-faint:#344754;--gold:#806023;--gold-soft:#aa803e66;--good:#237565;--border:#34455b28;--focus:#226e80;color:var(--ink);}
#page>header,#filterBar{background:#fff7e67a;border-color:#fff9ed80;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 6px 20px #0002;}
#progressBadge,#filterCount{color:#104f42;}
.quiet-btn,.chip{background:#ffffff80;color:var(--ink);border-color:#34455b30;}
.quiet-btn[aria-pressed="true"],.chip.active,.chip[aria-pressed="true"]{background:#d9eee3;color:#205e50;border-color:#6b9f8c;}
#searchInput{background:#fffdf699;border-color:#53677c55;color:#1c2940;}
#searchInput::placeholder{color:#344754;}
#filterOptions summary{color:#2d4057;}
#resultsLabel{border-color:#34455b24;color:#233b4b;}
.filter-options-body select{background:#fffdf4;border:1px solid #53677c55;color:#1c2940;}
.dex-card{background:#fff7e67a;border-color:#fff9ed80;}
.dex-info{background:linear-gradient(#fff7e638,#fff7e65c);}
.dex-entry-no{background:#fff7e6eb;color:#594822;border-color:#ab915c70;}
.dex-undiscovered-badge{color:#fff7e6cc;text-shadow:0 2px 8px #000;}
#switcherPanel{background:#fff7e6bd;border-color:#c5b799;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 16px 40px #0005;}
.switcher-item.current{color:#104f42;}
.switcher-item:hover,.switcher-item:focus-visible{background:#dcebe2;}
#emptyMsg{background:#fff7e67a;border-color:#fff9ed80;}
#modal{background:linear-gradient(145deg,#fff9edb8,#f0e7d5a8);border-color:#fffdf4c4;}
#modalCloseBtn,#modalSoundBtn{background:#e5ddce;color:#26384d;border-color:#34455b30;}
#modalCloseBtn:hover,#modalSoundBtn:hover{background:#d5cebf;}
#modalNav{background:#f5eddfa8;border-color:#34455b24;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
#modalNav button{background:#fffaf0;border-color:#34455b30;}
#modalNav button:hover:not(:disabled){background:#deebe2;}
#modalHint{font-style:normal;}
@media(hover:hover){.quiet-btn:hover,.chip:hover{background:#e6eee5;}.dex-card:hover{border-color:#64a294;}}

/* Compact collection toolbar: keep touch targets large, reduce stacked rows. */
#page>header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 12px;margin-bottom:8px;}
#page h1{min-width:0;margin:0;font-size:19px;line-height:1.2;}
#page h1 .sub{display:block;margin-top:5px;font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#headerRight{width:auto;display:flex;flex-direction:column;align-items:flex-end;gap:0;}
#progressBadge{margin:0;font-size:10px;white-space:nowrap;}
#switcherBtn{min-height:44px;padding:6px 10px;border:0;background:transparent;}
#filterBar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:8px;margin-bottom:10px;}
#searchInput{grid-column:1;grid-row:1;height:44px;padding:8px 10px;}
#filterOptions{display:contents;}
#filterOptions summary{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;border:1px solid #34455b30;border-radius:9px;background:#ffffff80;list-style:none;font-size:12px;}
#filterOptions summary::-webkit-details-marker{display:none;}
#filterOptions[open] summary{background:#d9eee3;border-color:#6b9f8c;}
#filterOptions:not([open])>.filter-options-body{display:none;}
.filter-options-body{grid-column:1/-1;padding:8px 2px;gap:8px;}
#resultsLabel{grid-column:1/-1;padding:2px 3px 0;border:0;font-size:10px;line-height:14px;}
#revealAllBtn{order:5;width:100%;}
@media(max-width:420px){#page{padding:8px 10px;}#page>header{padding:8px 10px;}#page h1{font-size:18px;}}

/* Strong ink on clear ivory glass; text stays opaque as the surface clears. */
#page h1,.dex-title{color:#102338;text-shadow:0 1px 2px #fff7e670;}
#page h1 .sub,#resultsLabel,.dex-meta,.field-label{font-weight:500;text-shadow:0 1px 2px #fff7e680;}
#progressBadge,#filterCount{font-weight:700;text-shadow:0 1px 2px #fff7e680;}
#switcherBtn,#filterOptions summary{color:#163044;font-weight:600;}
#filterOptions summary,.quiet-btn,.chip{background:#fffdf666;}
#filterOptions[open] summary,.quiet-btn[aria-pressed="true"],.chip.active{background:#d9eee3c9;color:#104f42;}
#switcherPanel{--ink-dim:#233b4b;}

/* Match Play's desktop surround so the centered column has visible edges. */
#dexMusic{background:var(--navy-2);}
@media(min-width:1200px){
  html,body{background:radial-gradient(circle at 50% -10%,#1c2755 0%,var(--navy-2) 55%,#05070d 100%);}
}

/* Header stays outside the collection's scroll container. */
#page{display:flex;flex-direction:column;overflow:visible;}
#page>header{flex-shrink:0;position:relative;}
#collectionScroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:#718fa6 #102034;overflow-anchor:none;}
#collectionScroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

/* Same translucent teal surface as Play's scoreboard (#hud). */
#page>header{background:linear-gradient(120deg,#0a303bcc,#173d3c99);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-color:#dce6c344;box-shadow:inset 0 1px #ffffff22,0 8px 24px #001e2944;}
#page>header h1{color:#e4ddc8;text-shadow:none;}
#page>header h1 .sub{color:#b9cbb7;text-shadow:none;}
#page>header #progressBadge{color:#dcecab;text-shadow:none;}
#page>header #switcherBtn{color:#e5ead7;background:transparent;text-shadow:none;}
#page>header #switcherBtn:hover{background:#d4e4ad18;}