:root{--bg:#2e3440;--card:#3b4252;--fg:#eceff4;--muted:#a7b1c2;--a1:#88c0d0;--a2:#a3be8c;--a3:#81a1c1;--a4:#d08770}
html:has(#t-gd:checked){--bg:#282828;--card:#3c3836;--fg:#ebdbb2;--muted:#a89984;--a1:#fabd2f;--a2:#8ec07c;--a3:#83a598;--a4:#fe8019}
html:has(#t-gl:checked){--bg:#fbf1c7;--card:#ebdbb2;--fg:#3c3836;--muted:#7c6f64;--a1:#b57614;--a2:#427b58;--a3:#076678;--a4:#af3a03}
html:has(#t-ed:checked){--bg:#2d353b;--card:#343f44;--fg:#d3c6aa;--muted:#9da9a0;--a1:#a7c080;--a2:#83c092;--a3:#7fbbb3;--a4:#e69875}
html:has(#t-el:checked){--bg:#fdf6e3;--card:#f4f0d9;--fg:#5c6a72;--muted:#939f91;--a1:#8da101;--a2:#35a77c;--a3:#3a94c5;--a4:#f57d26}
html:has(#t-rd:checked){--bg:#191724;--card:#26233a;--fg:#e0def4;--muted:#908caa;--a1:#f6c177;--a2:#9ccfd8;--a3:#c4a7e7;--a4:#ebbcba}
html:has(#t-rl:checked){--bg:#faf4ed;--card:#f2e9e1;--fg:#575279;--muted:#797593;--a1:#907aa9;--a2:#56949f;--a3:#286983;--a4:#d7827e}
html:has(#t-nd:checked){--bg:#2e3440;--card:#3b4252;--fg:#eceff4;--muted:#a7b1c2;--a1:#88c0d0;--a2:#a3be8c;--a3:#81a1c1;--a4:#d08770}
html:has(#t-nl:checked){--bg:#eceff4;--card:#e5e9f0;--fg:#2e3440;--muted:#4c566a;--a1:#5e81ac;--a2:#4c7a5a;--a3:#5e81ac;--a4:#b4634a}
@property --bg{syntax:'<color>';inherits:true;initial-value:#2e3440}
@property --card{syntax:'<color>';inherits:true;initial-value:#3b4252}
@property --fg{syntax:'<color>';inherits:true;initial-value:#eceff4}
@property --muted{syntax:'<color>';inherits:true;initial-value:#a7b1c2}
@property --a1{syntax:'<color>';inherits:true;initial-value:#88c0d0}
@property --a2{syntax:'<color>';inherits:true;initial-value:#a3be8c}
@property --a3{syntax:'<color>';inherits:true;initial-value:#81a1c1}
@property --a4{syntax:'<color>';inherits:true;initial-value:#d08770}
html{transition:--bg 1.2s ease,--card 1.2s ease,--fg 1.2s ease,--muted 1.2s ease,--a1 1.2s ease,--a2 1.2s ease,--a3 1.2s ease,--a4 1.2s ease}
html.dg-noanim,html.dg-noanim *{transition:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--a3)}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 170px 14px 16px;min-height:74px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.15rem}
.brand img{width:34px;height:34px;flex:none}
.brand img,.hero h1 img,.logo img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.28)) drop-shadow(0 6px 10px rgba(0,0,0,.22))}
.brand span,.hero h1 span{color:var(--a1);background:linear-gradient(180deg,color-mix(in srgb,var(--a1) 70%,#fff) 0%,var(--a1) 55%,color-mix(in srgb,var(--a1) 80%,#000) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.crumb{color:var(--muted);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 22px;border-radius:10px;border:1px solid transparent;background:var(--a1);color:var(--bg);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:filter .2s ease,transform .15s ease}
.btn:hover,.btn:focus-visible{filter:brightness(1.1);outline:none}
.btn:active{transform:scale(.97)}
main{max-width:1000px;margin:0 auto;padding:48px 16px 32px}
.hero{text-align:center;margin-bottom:28px}
.hero h1{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35em;margin:0;font-size:2.4rem;font-weight:700}
.hero h1 img{width:1.3em;height:1.3em}
.tag{margin:16px 0 0;padding-top:16px;color:var(--muted);font-style:italic;font-size:1.1rem;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a1) 65%,transparent),transparent) top center/240px 1px no-repeat}
h2{font-size:1.15rem;font-weight:600;color:var(--a2);margin:36px 0 14px;padding-bottom:6px;border-bottom:1px solid var(--card)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid transparent;border-radius:12px;padding:18px;transition:border-color .2s ease}
.card::before{content:"";position:absolute;top:50%;right:-14%;width:64%;aspect-ratio:1;translate:0 -50%;background:var(--ic,none) center/contain no-repeat;opacity:.12;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 65%);mask-image:linear-gradient(90deg,transparent 0%,#000 65%);transition:opacity .4s ease;pointer-events:none}
.card>*{position:relative;z-index:1}
.card:hover{border-color:var(--a3)}
.card:hover::before{opacity:.26}
.card h3{margin:0;color:var(--a3);font-size:1.2rem;line-height:1.3}
.card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{padding:1px 9px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:.75rem}
.act{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:6px}
.act .btn{padding:10px 22px}
.act small{color:var(--muted);font-size:.78rem}
.act small a{color:var(--muted)}
.act small a:hover{color:var(--a1)}
.soon .card{opacity:.6}
.soon .card::before{display:none}
.soon .card:hover{border-color:transparent}
.bw{display:flex;flex-direction:column;gap:2px}
.bw-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.back{margin-left:44px;color:var(--muted);font-size:.85rem;text-decoration:none;transition:color .2s ease}
.back:hover,.back:focus-visible{color:var(--a1);outline:none}
footer{max-width:1000px;margin:24px auto 0;padding:24px 16px 48px;border-top:1px solid var(--card);color:var(--muted);font-size:.9rem;text-align:center}
.game{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.stage{position:relative;flex:1;display:flex;padding:0 16px}
.stage iframe{flex:1;width:100%;min-height:60vh;border:0;border-radius:12px;background:#000}
.fs{position:absolute;top:12px;right:28px;display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(20,22,28,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#eceff4;cursor:pointer;opacity:0;transition:opacity .25s ease,background-color .2s ease,scale .15s ease}
.fs svg{width:20px;height:20px}
.stage:hover .fs,.fs:focus-visible{opacity:1}
.fs:hover{background:rgba(20,22,28,.75);scale:1.06}
.fs:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
@media (hover:none){.fs{opacity:.8}}
.info{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 16px 0;color:var(--muted);font-size:.88rem}
.info b{color:var(--fg);font-weight:600}
.info .sp{flex:1}
.info .theme-pick{margin:0}
.game footer{margin:0;max-width:none;padding:8px 16px 18px;border:0;font-size:.8rem;text-align:left}
.theme-pick{display:inline-flex;align-items:center;gap:10px;margin:8px 0 18px;color:var(--muted)}
.tp-btn{anchor-name:--tp;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;border:1px solid var(--muted);background:var(--card);color:var(--fg);font:inherit;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.tp-btn:focus-visible{outline:none;border-color:var(--a1);box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 25%,transparent)}
.pick-dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;background:#88c0d0;transition:background-color .5s ease}
html:has(#t-ed:checked) .pick-dot{background:#a7c080}html:has(#t-el:checked) .pick-dot{background:#35a77c}html:has(#t-gd:checked) .pick-dot{background:#fabd2f}html:has(#t-gl:checked) .pick-dot{background:#af3a03}html:has(#t-nl:checked) .pick-dot{background:#5e81ac}html:has(#t-rd:checked) .pick-dot{background:#eb6f92}html:has(#t-rl:checked) .pick-dot{background:#907aa9}
html:has(#t-nd:checked) .tp-name::after{content:"Nord dark"}html:has(#t-nl:checked) .tp-name::after{content:"Nord light"}html:has(#t-gd:checked) .tp-name::after{content:"Gruvbox dark"}html:has(#t-gl:checked) .tp-name::after{content:"Gruvbox light"}html:has(#t-ed:checked) .tp-name::after{content:"Everforest dark"}html:has(#t-el:checked) .tp-name::after{content:"Everforest light"}html:has(#t-rd:checked) .tp-name::after{content:"Rosé Pine"}html:has(#t-rl:checked) .tp-name::after{content:"Rosé Pine Dawn"}
.tp-chev{width:.45em;height:.45em;margin-left:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.theme-pick:has(.tp-list:popover-open) .tp-chev{transform:translateY(2px) rotate(-135deg)}
.tp-list{margin:0;padding:4px;min-width:210px;border:1px solid var(--muted);border-radius:10px;background:var(--card);color:var(--fg);opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,display .15s allow-discrete,overlay .15s allow-discrete}
.tp-list:popover-open{opacity:1;transform:none}
@starting-style{.tp-list:popover-open{opacity:0;transform:translateY(4px)}}
.tp-list label{position:relative;display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:6px;cursor:pointer;text-align:left}
.tp-list label:hover{background:var(--bg)}
.tp-list label:has(:checked){color:var(--a1)}
.tp-list label:focus-within{outline:2px solid var(--a3);outline-offset:-2px}
.tp-list input{position:absolute;opacity:0;width:1px;height:1px}
.tp-list i{width:12px;height:12px;border-radius:50%;flex:none}
@supports (anchor-name:--x){.tp-list{position-anchor:--tp;inset:auto;top:anchor(bottom);left:anchor(center);translate:-50% 6px;position-try-fallbacks:flip-block}}
@media (max-width:640px){.top{padding:76px 16px 12px}.hero h1{font-size:1.9rem}main{padding-top:76px}}
/* compact game header */
.game .top{padding:8px 140px 8px 16px;min-height:0}
.game .brand{font-size:1.05rem;gap:8px}
.game .brand img{width:28px;height:28px}
.game .bw{gap:0}
.game .back{margin:-3px 0 0 36px;font-size:.8rem;line-height:1.2}
.game .stage iframe{min-height:70vh}
.game .dgg-btn{top:9px;right:12px;height:36px;gap:6px}
.game .dgg-btn svg{width:36px;height:36px}
.game .dgg-btn .dgg-label{padding:5px 12px 5px 10px;font-size:.76rem}
.game .dgg{--dx:calc(50vw - 30px);--dy:calc(27px - 50vh)}
@media (max-width:640px){.game .top{padding:56px 16px 8px}}
/* compact game footer + upward theme list */
.game .info{padding:6px 16px 0;gap:4px 16px;font-size:.82rem}
.game .info .tp-btn{padding:3px 10px}
.game footer{padding:2px 16px 8px;font-size:.72rem}
.game .stage iframe{min-height:75vh}
.tp-list{max-height:70vh;overflow:auto}
.info .tp-list,footer .tp-list{transform:translateY(-4px)}
@starting-style{.info .tp-list:popover-open,footer .tp-list:popover-open{opacity:0;transform:translateY(-4px)}}
@supports (anchor-name:--x){.info .tp-list{top:auto;bottom:anchor(top);left:auto;right:anchor(right);translate:0 -6px;position-try-fallbacks:none}footer .tp-list{top:auto;bottom:anchor(top);translate:-50% -6px;position-try-fallbacks:none}}
/* glass arcade + theme ring on the game frame */
@property --ring{syntax:'<color>';inherits:true;initial-value:#88c0d0}
html{--ring:#88c0d0}
html:has(#t-nl:checked){--ring:#5e81ac}html:has(#t-gd:checked){--ring:#fabd2f}html:has(#t-gl:checked){--ring:#af3a03}html:has(#t-ed:checked){--ring:#a7c080}html:has(#t-el:checked){--ring:#35a77c}html:has(#t-rd:checked){--ring:#eb6f92}html:has(#t-rl:checked){--ring:#907aa9}
html:has(#tp-list label:hover>#t-nd,#t-nd:focus-visible){--ring:#88c0d0}html:has(#tp-list label:hover>#t-nl,#t-nl:focus-visible){--ring:#5e81ac}html:has(#tp-list label:hover>#t-gd,#t-gd:focus-visible){--ring:#fabd2f}html:has(#tp-list label:hover>#t-gl,#t-gl:focus-visible){--ring:#af3a03}html:has(#tp-list label:hover>#t-ed,#t-ed:focus-visible){--ring:#a7c080}html:has(#tp-list label:hover>#t-el,#t-el:focus-visible){--ring:#35a77c}html:has(#tp-list label:hover>#t-rd,#t-rd:focus-visible){--ring:#eb6f92}html:has(#tp-list label:hover>#t-rl,#t-rl:focus-visible){--ring:#907aa9}
body{background:radial-gradient(1100px 620px at 8% -12%,color-mix(in srgb,var(--a1) 16%,transparent),transparent 62%),radial-gradient(900px 560px at 108% 6%,color-mix(in srgb,var(--a3) 13%,transparent),transparent 60%),radial-gradient(1000px 600px at 50% 120%,color-mix(in srgb,var(--a2) 9%,transparent),transparent 60%),var(--bg);background-attachment:fixed}
.card{background:linear-gradient(160deg,color-mix(in srgb,var(--fg) 6%,transparent),transparent 40%),color-mix(in srgb,var(--card) 72%,transparent);border-color:color-mix(in srgb,var(--fg) 9%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
.card:hover{border-color:color-mix(in srgb,var(--a1) 55%,transparent)}
.stage iframe{box-shadow:0 0 0 2px var(--ring),0 0 32px -6px color-mix(in srgb,var(--ring) 55%,transparent);transition:--ring .35s ease}
.tp-list{background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* glass rim on the game frame: theme accents on the border, dot color on the glow */
@property --rim1{syntax:'<color>';inherits:true;initial-value:#88c0d0}
@property --rim2{syntax:'<color>';inherits:true;initial-value:#81a1c1}
html{--rim1:var(--a1);--rim2:var(--a3)}
html:has(#tp-list label:hover>#t-nd,#t-nd:focus-visible){--rim1:#88c0d0;--rim2:#81a1c1}html:has(#tp-list label:hover>#t-nl,#t-nl:focus-visible){--rim1:#5e81ac;--rim2:#5e81ac}html:has(#tp-list label:hover>#t-gd,#t-gd:focus-visible){--rim1:#fabd2f;--rim2:#83a598}html:has(#tp-list label:hover>#t-gl,#t-gl:focus-visible){--rim1:#b57614;--rim2:#076678}html:has(#tp-list label:hover>#t-ed,#t-ed:focus-visible){--rim1:#a7c080;--rim2:#7fbbb3}html:has(#tp-list label:hover>#t-el,#t-el:focus-visible){--rim1:#8da101;--rim2:#3a94c5}html:has(#tp-list label:hover>#t-rd,#t-rd:focus-visible){--rim1:#f6c177;--rim2:#c4a7e7}html:has(#tp-list label:hover>#t-rl,#t-rl:focus-visible){--rim1:#907aa9;--rim2:#286983}
.stage iframe{border:2px solid transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--rim1) 55%,#fff) 0%,var(--rim1) 20%,color-mix(in srgb,var(--rim1) 45%,var(--rim2)) 55%,var(--rim2) 100%) border-box;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 32px -6px color-mix(in srgb,var(--ring) 55%,transparent);transition:--ring .35s ease,--rim1 .35s ease,--rim2 .35s ease}
/* footer preview: the footer box repaints in the hovered theme, like the Library */
body.home footer{background:var(--bg);border-top:0;border-radius:16px;transition:--bg .35s ease,--card .35s ease,--fg .35s ease,--muted .35s ease,--a1 .35s ease,--a2 .35s ease,--a3 .35s ease,--a4 .35s ease}
body.home footer:has(#tp-list label:hover>#t-nd,#t-nd:focus-visible){--bg:#2e3440;--card:#3b4252;--fg:#eceff4;--muted:#a7b1c2;--a1:#88c0d0;--a2:#a3be8c;--a3:#81a1c1;--a4:#d08770}
body.home footer:has(#tp-list label:hover>#t-nl,#t-nl:focus-visible){--bg:#eceff4;--card:#e5e9f0;--fg:#2e3440;--muted:#4c566a;--a1:#5e81ac;--a2:#4c7a5a;--a3:#5e81ac;--a4:#b4634a}
body.home footer:has(#tp-list label:hover>#t-gd,#t-gd:focus-visible){--bg:#282828;--card:#3c3836;--fg:#ebdbb2;--muted:#a89984;--a1:#fabd2f;--a2:#8ec07c;--a3:#83a598;--a4:#fe8019}
body.home footer:has(#tp-list label:hover>#t-gl,#t-gl:focus-visible){--bg:#fbf1c7;--card:#ebdbb2;--fg:#3c3836;--muted:#7c6f64;--a1:#b57614;--a2:#427b58;--a3:#076678;--a4:#af3a03}
body.home footer:has(#tp-list label:hover>#t-ed,#t-ed:focus-visible){--bg:#2d353b;--card:#343f44;--fg:#d3c6aa;--muted:#9da9a0;--a1:#a7c080;--a2:#83c092;--a3:#7fbbb3;--a4:#e69875}
body.home footer:has(#tp-list label:hover>#t-el,#t-el:focus-visible){--bg:#fdf6e3;--card:#f4f0d9;--fg:#5c6a72;--muted:#939f91;--a1:#8da101;--a2:#35a77c;--a3:#3a94c5;--a4:#f57d26}
body.home footer:has(#tp-list label:hover>#t-rd,#t-rd:focus-visible){--bg:#191724;--card:#26233a;--fg:#e0def4;--muted:#908caa;--a1:#f6c177;--a2:#9ccfd8;--a3:#c4a7e7;--a4:#ebbcba}
body.home footer:has(#tp-list label:hover>#t-rl,#t-rl:focus-visible){--bg:#faf4ed;--card:#f2e9e1;--fg:#575279;--muted:#797593;--a1:#907aa9;--a2:#56949f;--a3:#286983;--a4:#d7827e}
/* game preview: info panel + game rim repaint in the hovered theme */
.game .info{margin:6px 16px 0;padding:6px 14px;border-radius:12px;background:var(--bg);transition:--bg .35s ease,--card .35s ease,--fg .35s ease,--muted .35s ease,--a1 .35s ease,--a2 .35s ease,--a3 .35s ease,--a4 .35s ease}
.game .stage{--rim1:var(--a1);--rim2:var(--a3);transition:--a1 .35s ease,--a3 .35s ease}
.game:has(#tp-list label:hover>#t-nd,#t-nd:focus-visible) :is(.stage,.info){--bg:#2e3440;--card:#3b4252;--fg:#eceff4;--muted:#a7b1c2;--a1:#88c0d0;--a2:#a3be8c;--a3:#81a1c1;--a4:#d08770}
.game:has(#tp-list label:hover>#t-nl,#t-nl:focus-visible) :is(.stage,.info){--bg:#eceff4;--card:#e5e9f0;--fg:#2e3440;--muted:#4c566a;--a1:#5e81ac;--a2:#4c7a5a;--a3:#5e81ac;--a4:#b4634a}
.game:has(#tp-list label:hover>#t-gd,#t-gd:focus-visible) :is(.stage,.info){--bg:#282828;--card:#3c3836;--fg:#ebdbb2;--muted:#a89984;--a1:#fabd2f;--a2:#8ec07c;--a3:#83a598;--a4:#fe8019}
.game:has(#tp-list label:hover>#t-gl,#t-gl:focus-visible) :is(.stage,.info){--bg:#fbf1c7;--card:#ebdbb2;--fg:#3c3836;--muted:#7c6f64;--a1:#b57614;--a2:#427b58;--a3:#076678;--a4:#af3a03}
.game:has(#tp-list label:hover>#t-ed,#t-ed:focus-visible) :is(.stage,.info){--bg:#2d353b;--card:#343f44;--fg:#d3c6aa;--muted:#9da9a0;--a1:#a7c080;--a2:#83c092;--a3:#7fbbb3;--a4:#e69875}
.game:has(#tp-list label:hover>#t-el,#t-el:focus-visible) :is(.stage,.info){--bg:#fdf6e3;--card:#f4f0d9;--fg:#5c6a72;--muted:#939f91;--a1:#8da101;--a2:#35a77c;--a3:#3a94c5;--a4:#f57d26}
.game:has(#tp-list label:hover>#t-rd,#t-rd:focus-visible) :is(.stage,.info){--bg:#191724;--card:#26233a;--fg:#e0def4;--muted:#908caa;--a1:#f6c177;--a2:#9ccfd8;--a3:#c4a7e7;--a4:#ebbcba}
.game:has(#tp-list label:hover>#t-rl,#t-rl:focus-visible) :is(.stage,.info){--bg:#faf4ed;--card:#f2e9e1;--fg:#575279;--muted:#797593;--a1:#907aa9;--a2:#56949f;--a3:#286983;--a4:#d7827e}
/* theme glyph: card background glyph painted in the current theme's accents */
.card::before{background:linear-gradient(135deg,var(--a1),var(--a3));-webkit-mask:var(--gl,none) center/contain no-repeat;mask:var(--gl,none) center/contain no-repeat luminance,linear-gradient(90deg,transparent,#000 60%) alpha;mask-composite:intersect;opacity:.16}
.card:hover::before{opacity:.3}
/* theme icons: inline controller tile painted in the theme's colors */
.ti{display:block;flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28)) drop-shadow(0 6px 10px rgba(0,0,0,.22))}
.brand .ti{width:34px;height:34px}
.game .brand .ti{width:28px;height:28px}
.hero h1 .ti{width:1.3em;height:1.3em}
.ti-bg{fill:var(--bg)}.ti-m{fill:var(--card)}.ti-d1{fill:var(--muted)}.ti-d2{fill:var(--fg)}.ti-s{fill:var(--core,#88c0d0);transition:fill .35s ease}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{transition:none!important}}