.case-library{--paper:#edeee9;--ink:#242c2b;--muted:#626a64;--red:#b53a30;--case-width:252px;--case-height:365px;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif;min-height:100svh;overflow-x:hidden}
.case-library ::selection{background:#b53a30;color:#fff9e7}.case-library a,.case-library button{outline-offset:5px}.case-library :focus-visible{outline:3px solid var(--red)}
.case-library .library-header{position:relative;inset:auto;max-width:1500px;margin:auto;padding:29px 42px;align-items:center;pointer-events:auto;gap:24px}
.wordmark{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none}.brand-mark{display:grid;place-items:center;width:39px;height:42px;border-radius:11px 11px 17px 11px;background:var(--red);color:#fff6e4;font:30px/1 Illion,monospace;letter-spacing:-.04em;padding:0 0 5px 4px}.case-library h1{color:var(--ink);font:23px/1.2 Illion,monospace;letter-spacing:-.03em;text-transform:none;text-shadow:none;max-width:none}
.case-library .hud-links{gap:6px}.case-library .hud{border:0;box-shadow:none;background:transparent;color:#424d45;font:600 12px/1.3 system-ui,sans-serif;padding:11px 14px;min-height:42px}.case-library .hud:hover{background:#dce0d6}.case-library #account{margin-left:6px;border:1px solid #c3c9bd;border-radius:5px}.case-library #account:hover{border-color:#667361}
.collection{max-width:1280px;margin:0 auto;padding:18px 40px 0}.collection-intro{text-align:center;padding:8px 0 3px}.collection-intro h2{font:26px/1.3 Illion,monospace;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}.collection-intro p{font-size:14px;line-height:1.5;margin:0;color:var(--muted)}
.case-stage{position:relative;margin:4px auto 0;max-width:1100px}.case-viewport{position:relative;min-height:476px;padding:72px 42px 25px;isolation:isolate}.case-viewport:before{content:'';position:absolute;left:4%;right:4%;bottom:20px;height:50px;border-radius:50%;background:#4c554c26;filter:blur(25px);z-index:-1}.case-row{display:flex;position:relative;align-items:flex-end;justify-content:center;gap:8px;min-height:var(--case-height);width:max-content;margin:0 auto;perspective:1800px}
.case-slot{display:block;position:relative;flex:0 0 64px;width:64px;height:var(--case-height);transition:width .5s cubic-bezier(.16,1,.3,1),flex-basis .5s cubic-bezier(.16,1,.3,1);text-decoration:none;color:var(--game-ink);outline-offset:10px;z-index:calc(20 - var(--order));-webkit-tap-highlight-color:transparent;transform-style:preserve-3d}
.case-slot.is-active{flex-basis:290px;width:290px;z-index:30}.game-case{position:absolute;left:17px;bottom:0;width:var(--case-width);height:var(--case-height);transform-style:preserve-3d;transform-origin:left center;transform:rotateY(81deg) rotateZ(-1deg);transition:transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none;will-change:transform}
.case-slot.is-active .game-case{transform:translateY(-26px) translateZ(25px) rotateY(8deg) rotateZ(-2deg)}.case-slot.is-active:active .game-case{transform:translateY(-18px) rotateY(5deg) rotateZ(-1deg)}
.case-front,.case-back{position:absolute;inset:0;border-radius:7px 10px 10px 7px;background:#f5f3e9;backface-visibility:hidden}.case-front{transform:translateZ(18px);box-shadow:inset 0 0 0 1px #fdfef7,inset 0 0 0 3px #c7cbc0,9px 10px 22px #15271c33;overflow:hidden}.case-front:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 6px 0 5px #fdfdf775,inset -5px 0 5px #5f695430;background:linear-gradient(112deg,#ffffff21 0,transparent 28%,transparent 78%,#ffffff18 88%,transparent 100%)}.case-back{transform:translateZ(-18px) rotateY(180deg);background:#cad0c6}.case-top{position:absolute;top:-18px;left:0;width:100%;height:36px;border-radius:4px;background:linear-gradient(#faf9f0,#d0d4ca);transform:rotateX(90deg);box-shadow:inset 0 0 0 1px #bec5b8}
.case-spine{position:absolute;left:-18px;top:0;width:36px;height:100%;display:flex;align-items:center;flex-direction:column;padding:11px 0 14px;border-radius:5px;background:linear-gradient(90deg,#d3d7cd,#fffdf0 28%,#e5e8de 80%,#bec7b9);transform:rotateY(-90deg);backface-visibility:hidden;box-shadow:inset 0 0 0 1px #b7c1b0;overflow:hidden}.spine-brand{color:#b13e30;font:bold 20px/1 Illion,monospace;padding-bottom:11px;border-bottom:2px solid #b13e30;width:25px;text-align:center}.spine-title{font:20px/1 Illion,monospace;writing-mode:vertical-rl;margin:20px 0 12px;color:var(--game-ink);letter-spacing:-.02em}.spine-art{margin-top:auto;width:23px;height:25px}.spine-art svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:square;stroke-linejoin:miter}.spine-number{font:9px/1 ui-monospace,monospace;margin-top:12px;color:#5e675b}
.case-brand{position:absolute;top:9px;left:9px;right:9px;height:25px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;background:#b73e31;color:#fff6e3;font:10px/1 Illion,monospace;letter-spacing:.06em;border-radius:2px 4px 0 0}.case-brand span:last-child{font:8px system-ui,sans-serif;letter-spacing:.2em;font-weight:750}.cover-art{position:absolute;inset:34px 9px 40px;background:var(--game-color);overflow:hidden}.cover-art canvas{width:100%;height:100%;image-rendering:pixelated;object-fit:cover}.cover-title{position:absolute;top:53px;left:20px;right:15px;font:23px/1.2 Illion,monospace;color:#fff5d4;letter-spacing:-.035em;text-shadow:2px 2px #172c31,-1px -1px #172c31,1px -1px #172c31,-1px 1px #172c31;text-transform:uppercase}.case-slot[data-game="borderillion"] .cover-title{font-size:21px}.cover-footer{position:absolute;bottom:9px;left:16px;right:13px;height:24px;display:flex;gap:8px;justify-content:space-between;align-items:center;color:#4a584c;font:9px/1.3 system-ui,sans-serif}.cover-footer>span:first-child{text-transform:uppercase;letter-spacing:.08em;font-weight:750}.cover-seal{width:23px;height:23px;border:1px solid #8a9778;border-radius:50%;text-align:center;font:17px/20px Illion,monospace;color:#74835d}
.console-base{position:relative;display:flex;align-items:center;gap:10px;height:40px;margin:0 10px;padding:0 23px;border-radius:3px 3px 13px 13px;background:linear-gradient(#d1d5ce,#c4cac0);box-shadow:inset 0 1px #f7f8ef,inset 0 -5px 0 #9ca995,0 16px 22px -13px #2332234d;color:#5e6c58;font:8px/1 Illion,monospace;letter-spacing:.12em}.power-light{width:5px;height:5px;border-radius:50%;background:#a13c31;box-shadow:0 1px 2px #10231055}.base-grooves{margin-left:auto;width:60px;height:9px;border-top:1px solid #9da995;border-bottom:1px solid #9da995;position:relative}.base-grooves:after{content:'';position:absolute;inset:3px 0 auto;border-top:1px solid #9da995}
.selection{display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:1034px;min-height:135px;margin:0 auto;padding:28px 20px 23px}.selection-copy>p:first-child{font:11px/1.3 system-ui,sans-serif;font-weight:650;margin:0 0 9px;color:#687260}.selection-copy h2{font:23px/1.25 Illion,monospace;letter-spacing:-.025em;margin:0 0 10px}.selection-copy>p:last-child{font-size:13px;color:#626b5e;line-height:1.5;margin:0}.selection-actions{display:flex;align-items:center;gap:28px}.browse-controls{display:flex;align-items:center;gap:9px}.browse-controls button{width:35px;height:35px;border:0;background:transparent;color:#697361;cursor:pointer;border-radius:4px}.browse-controls button:hover{background:#dce0d5;color:#283d25}.browse-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}.browse-controls span{font:10px/1 ui-monospace,monospace;color:#6b7564;white-space:nowrap}.play-game{display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:181px;padding:14px 17px;color:#fff6e9;background:var(--red);border-radius:5px;text-decoration:none;font-size:12px;font-weight:700;transition:background .16s,transform .16s}.play-game:hover{background:#94342d;transform:translateY(-2px)}.play-game svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none}
.library-footer{display:flex;justify-content:space-between;gap:20px;max-width:1034px;margin:0 auto;padding:17px 20px 23px;border-top:1px solid #d6dbd0;color:#737c6c;font-size:10px}.library-footer button{background:transparent;border:0;color:#596650;padding:0;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:4px}.case-library dialog{color:#f5eccd}.case-library dialog h2{color:#f5eccd;text-shadow:none}.case-library dialog .hud{color:#f5eccd;background:#29473c;border:1px solid #829880}.case-library dialog .hud:hover{background:#3c5942}.case-library dialog input{caret-color:#a84330}.case-library dialog .hud-links{display:flex}
@media(min-width:1500px){.collection{padding-top:40px}.case-viewport{padding-top:93px;min-height:510px}}
@media(max-width:1050px){.case-library{--case-width:224px;--case-height:330px}.case-library .library-header{padding:24px}.collection{padding:20px 12px 0}.case-viewport{padding:66px 6px 22px;min-height:418px}.case-slot{flex-basis:53px;width:53px}.case-slot.is-active{flex-basis:255px;width:255px}.case-row{gap:5px}.cover-title{font-size:20px}.case-slot[data-game="borderillion"] .cover-title{font-size:18px}.spine-title{font-size:18px}.selection,.library-footer{margin:0 20px;padding-left:10px;padding-right:10px}}
@media(max-width:760px){.case-library .library-header{padding:21px 20px;flex-wrap:wrap;gap:18px}.case-library h1{font-size:21px}.brand-mark{width:33px;height:36px;font-size:25px}.case-library .hud-links{margin:0 0 0 auto;gap:0}.case-library .hud{font-size:11px;padding:9px 8px;min-height:36px}.case-library #account{margin-left:4px}.collection{padding:12px 0 0}.collection-intro{padding:13px 20px 4px}.collection-intro h2{font-size:22px;margin-bottom:11px}.collection-intro p{font-size:12px}.case-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#b8c4ad transparent;scroll-behavior:smooth;padding:58px max(40px,calc((100vw - 280px)/2)) 20px;min-height:409px}.case-row{margin:0;gap:7px;justify-content:flex-start}.case-slot{flex-basis:56px;width:56px}.case-slot.is-active{flex-basis:255px;width:255px}.console-base{margin:0 20px;height:30px;padding:0 16px;font-size:7px}.base-grooves{width:40px}.selection{align-items:flex-start;gap:16px;min-height:177px;margin:0 20px;padding:23px 3px 21px;flex-direction:column}.selection-copy h2{font-size:22px;margin-bottom:8px}.selection-copy>p:first-child{font-size:10px;margin-bottom:7px}.selection-copy>p:last-child{font-size:12px}.selection-actions{width:100%;justify-content:space-between;flex-direction:row-reverse;gap:10px}.play-game{min-width:176px;padding:13px 14px;font-size:11px}.library-footer{margin:0 20px;padding:17px 3px 24px;font-size:9px}.browse-controls button{width:32px;height:34px}.browse-controls{gap:5px}}
@media(max-width:430px){.case-library .library-header{gap:15px;padding-bottom:12px}.case-library .hud-links{width:100%;justify-content:space-between}.case-library .hud{font-size:11px}.case-library #account{margin-left:auto}.collection{padding-top:3px}.collection-intro h2{font-size:21px}.case-viewport{padding-top:55px}.selection{margin-inline:21px}.library-footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){.case-slot,.game-case,.play-game{transition:none!important}.case-viewport{scroll-behavior:auto}}
.case-library[data-paused="true"] .case-slot,.case-library[data-paused="true"] .game-case{transition-duration:.01ms}
/* Cartridge-era lettering and stepped console details. */
.case-library{--paper:#e8e7dc}
.brand-mark{border-radius:0;clip-path:polygon(5px 0,calc(100% - 5px) 0,calc(100% - 5px) 3px,100% 3px,100% calc(100% - 5px),calc(100% - 3px) calc(100% - 5px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px),0 5px,5px 5px)}
.case-library .hud{font:10px/1.5 Illion,monospace}.case-library #account{border-radius:1px}
.collection-intro>p,.selection-copy>p:last-child{font-family:Illion,monospace;font-size:11px;line-height:1.8}
.selection-copy>p:first-child{font:9px/1.5 Illion,monospace}
.play-game{border-radius:1px;font:11px/1.5 Illion,monospace;box-shadow:inset 0 2px #db7160,inset 0 -3px #8b302a}.play-game:active{transform:translateY(1px);box-shadow:inset 0 1px #8b302a}
.case-front,.case-back{border-radius:2px 3px 3px 2px}.case-front{box-shadow:inset 0 0 0 1px #fdfef7,inset 0 0 0 3px #c7cbc0,7px 9px 15px #15271c29}.case-front:after{background:linear-gradient(112deg,#ffffff0c,transparent 28%,transparent 78%,#ffffff0a 88%,transparent)}.case-brand{border-radius:0}
.console-base{border-radius:1px 1px 5px 5px;box-shadow:inset 0 1px #f7f8ef,inset 0 -4px 0 #9ca995,0 10px 16px -11px #2332234d}
.library-footer{font:8px/1.7 Illion,monospace}.library-footer button{font:inherit}
@media(max-width:760px){.case-library .hud{font-size:9px}.collection-intro>p,.selection-copy>p:last-child{font-size:10px}.play-game{font-size:10px;gap:16px}.library-footer{font-size:7px}}
/* The original Illion sky, cream lettering and deep pixel shadows. */
.case-library{--paper:#354455;--ink:#f1ebc8;--muted:#d2d2ba;background:#354455;color:#f1ebc8;isolation:isolate}
#library-sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated;pointer-events:none}
.case-library .library-header{padding-top:32px;padding-bottom:24px}.wordmark{gap:0}.brand-mark{display:none}.case-library h1{font-size:clamp(28px,4.4vw,60px);color:#f1ebc8;text-transform:uppercase;letter-spacing:-.035em;text-shadow:4px 4px #163b38;line-height:1.2}
.case-library .hud{background:#263e43;color:#f0e8c5;border:1px solid #82958a;box-shadow:2px 3px #203739;border-radius:0}.case-library .hud:hover{background:#3e5652;color:#fff2c9}.case-library #account{border-color:#a9af91;border-radius:0}.case-library .hud-links{gap:9px}
.collection-intro h2{color:#f0e9c7;text-shadow:2px 2px #243d3d;font-size:23px}.collection-intro>p,.selection-copy>p:last-child{color:#d2d2ba}.selection-copy>p:first-child{color:#d1cfaf}.selection-copy h2{color:#f5ebc5;text-shadow:2px 2px #233b37}.browse-controls button,.browse-controls span{color:#e0ddbc}.browse-controls button:hover{background:#2b4549;color:#fff3c9}
.case-front{background:#dfd5b6;box-shadow:inset 0 0 0 1px #f2e4bb,inset 0 0 0 3px #a7a78c,6px 9px 12px #172e334d}.case-front:after{background-image:url('/arcade/case-wear.svg');background-size:100% 100%;image-rendering:pixelated;box-shadow:inset 5px 0 #fbefc62e,inset -4px 0 #675e3d24}.case-spine{background:linear-gradient(90deg,#a6aa91,#eee2bd 26%,#d6cba9 80%,#a1a38a);box-shadow:inset 0 0 0 1px #919780}.case-spine:after{content:'';position:absolute;inset:0;background:url('/arcade/case-wear.svg') center/100% 100%;image-rendering:pixelated;pointer-events:none}.case-top{background:linear-gradient(#e8dcb8,#a7ad94)}.case-brand{background:#9e4034;color:#f7e9bf}.cover-title{color:#f6e7b7}.cover-footer{color:#4c553e}.spine-brand{color:#8d3e31;border-color:#a65d43}
.console-base{background:linear-gradient(#8a9984,#738674);box-shadow:inset 0 2px #adb29a,inset 0 -4px #415d54,4px 5px #263e40;color:#e3dfba;border-radius:0;clip-path:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 3px,3px 3px)}.base-grooves,.base-grooves:after{border-color:#536e5e}.power-light{border-radius:0;background:#e9ba69;box-shadow:1px 1px #34554a}.case-viewport:before{background:#142d3552;filter:blur(17px)}
.play-game{color:#263f3b;background:#e0c88f;box-shadow:inset 0 2px #f8e0a8,inset 0 -3px #ac986b,3px 3px #203d3b;border-radius:0}.play-game:hover{color:#173632;background:#eddaa6}.play-game:active{box-shadow:inset 0 1px #ab976d}
.library-footer{border-color:#9ba58a55;color:#c9ccb2}.library-footer button{color:#ddd9b6}.case-library :focus-visible{outline-color:#f7d89a}
@media(max-width:1050px){.case-library h1{font-size:39px}.case-library .library-header{gap:24px;flex-wrap:wrap}.case-library .hud-links{margin-left:auto}}
@media(max-width:760px){.case-library .library-header{padding:23px 20px 16px}.case-library h1{font-size:clamp(28px,6.4vw,39px)}.case-library .hud-links{gap:7px}.collection-intro h2{font-size:21px}.case-library .hud{font-size:9px}.library-footer{color:#d6d4b8}}