@layer common, base, components, utilities;@layer common { * { margin: 0; padding: 0; } @font-face { font-family: "04bf"; src: url("../font/04bf.woff"); } @font-face { font-family: "3x3"; src: url("../font/3x3.ttf"); } body, html, :where(body), :where(html) { -webkit-tap-highlight-color: transparent !important; -webkit-user-drag: none !important; -webkit-touch-callout: none !important; -webkit-overflow-scrolling: touch !important; -webkit-user-select: none !important; -webkit-font-smoothing: antialiased !important; cursor: default !important; user-select: none !important; text-rendering: optimizeLegibility !important; background-color: var(--profile-black); transition: opacity 0.3s ease-in-out; } :root { --safe-left: env(safe-area-inset-left); --safe-right: env(safe-area-inset-right); --profile-base: oklch(0.8 0.04 76); --profile-black: oklch(0 0 0); --profile-o: color-mix(in oklch, var(--profile-base) 28%, var(--profile-black)); --profile-1: oklch(from var(--profile-base) l c h / 0.60); --profile-2: oklch(from var(--profile-base) l c h / 0.40); --profile-3: oklch(from var(--profile-base) l c h / 0.30); --profile-4: oklch(from var(--profile-base) l c h / 0.20); --profile-5: oklch(from var(--profile-base) l c h / 0.04); } body::after, page00::after, screen::after, title1::after, log::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: overlay; transform-origin: top left; transform: translateZ(0); backface-visibility: hidden; background-size: 1px; will-change: transform; } body { z-index: 1; font-size: 8px; color: var(--profile-base); font-family: "3x3"; text-align: center; width: 100vw; height: 100vh; overflow: hidden; padding: 0; } body::after, page00::after, title1::after, log::after { background-image: var(--background); }}@layer base { page00, page01, list, list01, list02, file, cta, label, setting, page02, display, notification, jpad, invis, sec-12, sec-34 { display: grid; width: 100%; box-sizing: border-box; } page00, page01, page02 { position: absolute; height: 100%; } rom, file, logo, setting, vertical, label, opti, btn-state, btn-l, btn-r, btn-menu, btn-1, btn-3, btn-2, btn-4, btn-select, btn-start, dpad svg { background-color: var(--profile-5); outline: 1px solid var(--profile-o); } [hidden] { display: none !important } body.hide { opacity: 0 !important } [hide] { opacity: 0 !important } [op4] { opacity: 0.4 !important } [op8] { opacity: 0.8 !important } [fil] { filter: brightness(1) contrast(1.2) saturate(0.8) sepia(0.2) grayscale(0) } [jus], opti { justify-content: center } invis { width: 100%; height: 20px; position: absolute; bottom: 0; z-index: 5; }}@layer page-0 { page00 { z-index: 3; grid-template-rows: 1fr auto auto auto 1fr 40px; background: var(--profile-black); place-items: center; } title0, logo { white-space: pre; color: var(--profile-base); line-height: 1; display: inline-flex; align-items: center; justify-content: center; } title0 { font-size: 12px; padding: 1px 0px 10px 0px; padding-left: 3px; } [base]::before { content: attr(base); color: var(--profile-3); text-shadow: -3px 0px 0px var(--profile-4); } [gray]::after { content: attr(gray); color: var(--profile-3); } message0, switch0 { color: var(--profile-3); padding-left: 2px; white-space: pre; } switch0 { padding: 8px 8px 8px 10px; outline: 1px solid var(--profile-o); width: 100px; margin-top: 40px; display: inline-block; }}@layer page-1 { page01 { grid-template-rows: 1fr 50px; padding: 20px 20px 40px 20px; gap: 8px; list, list01, list02 { grid-template-rows: repeat(12, auto); text-align: left; align-content: start; transform: rotate(180deg); gap: 1px; grid-row: 1; #romsearch { width: 100%; height: 100%; background: none; border: none; outline: none; color: inherit; font-family: "3x3"; font-size: 8px; padding: 0px; caret-color: transparent; } #romsearch::placeholder, ver { color: var(--profile-3); } rom, titl, file, cont { display: flex; column-gap: 1px; transform: rotate(180deg); max-width: calc(100vw - 40px); } titl { padding: 16px 0px 6px 0px; color: var(--profile-3); } name, ver, opti, tag { flex: 1; padding: 17px 0px 17px 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } rom name { flex: 0 1 auto; min-width: 0; } tag { padding: 17px 0px; color: var(--profile-3); flex: 1 0 auto } } list.searching, list.searching rom { transform: none !important; } cta { grid-template-columns: auto 50px 50px 90px; gap: 8px; grid-row: 2; logo { font-size: 16px; padding-left: 4px; } logo[base]::before { text-shadow: -4px 0px 0px var(--profile-4); } } } down { width: 40px; background: linear-gradient(var(--profile-3), var(--profile-3)); mask: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 1H6M0 5H2M4 5H6M8 5H10M4 9H6' stroke='%23C5AF90' stroke-width='2'/%3E%3C/svg%3E%0A"); } dele { width: 40px; background: linear-gradient(var(--profile-3), var(--profile-3)); mask: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5H2M4 5H6M8 5H10' stroke='%23C5AF90' stroke-width='2'/%3E%3C/svg%3E%0A"); } dot { flex: 0 0 auto; width: 40px; background: linear-gradient(var(--profile-3), var(--profile-3)); mask: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 1H6M8 1H10M4 5H6M8 5H10M4 9H6M8 9H10' stroke='%23C5AF90' stroke-width='2'/%3E%3C/svg%3E%0A"); } setting, label, down, dele, dot { background-position: center; background-repeat: no-repeat; mask-position: center; mask-repeat: no-repeat; place-items: center; }}@layer page-2 { page02 { --base-width: round(down, calc(50vw - 12px), 4px); --base-height: round(down, calc(50vh - 12px), 4px); grid-template-rows: auto calc(100vw - 2 * (var(--base-width) + 7px)) auto 1fr; grid-template-columns: calc(var(--base-width) + 6px) auto calc(var(--base-width) + 7px); display { position: relative; justify-items: start; align-items: end; grid-row: 01 / 01; grid-column: 01 / 04; margin: 0 auto; screen { z-index: 2; position: relative; } screen::after { background-image: var(--shader); background-size: var(--size); width: var(--width); height: var(--height); transform: scale(var(--scale)); } canvas { width: 100%; image-rendering: pixelated; transition: opacity 0.5s ease-in-out; } title1, log { position: absolute; bottom: -2px; left: 0; background-color: var(--profile-black); padding: 1px 0px 1px 0px; font-size: 8px; line-height: 8px; text-align: left; overflow: hidden; text-overflow: ellipsis; z-index: 4; } log { white-space: pre-wrap; opacity: 0; } } dpad { display: grid; grid-row: 03 / 03; height: calc(var(--base-width) + 24px + 8px); grid-column: 01 / 02; grid-template-rows: 24px 1fr; grid-template-columns: 1fr; margin-left: 6px; gap: 8px; btn-l { grid-row: 01 / 01; grid-column: 01 / 02; } svg { position: relative; background-image: linear-gradient(var(--profile-base), var(--profile-base)), linear-gradient(var(--profile-base), var(--profile-base)), linear-gradient(var(--profile-base), var(--profile-base)), linear-gradient(var(--profile-base), var(--profile-base)); background-size: 3px 6px, 3px 6px, 6px 3px, 6px 3px; background-position: top 20px center, bottom 20px center, left 20px center, right 20px center; background-repeat: no-repeat; } } bpad { display: grid; grid-row: 03 / 03; height: calc(var(--base-width) + 24px + 8px); grid-column: 03 / 04; margin-right: 6px; grid-template-rows: 24px 8px 1fr 1px 1fr 1px 24px; grid-template-columns: calc(var(--base-width)/4 - 1px) 1px 1fr 1px 1fr 1px calc(var(--base-width)/4 - 1px); btn-r { grid-row: 01 / 01; grid-column: 01 / 06; } btn-menu { grid-row: 01 / 01; grid-column: 07 / 08; } sec-12, sec-34 { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1px; } sec-12 { grid-row: 03 / 03; grid-column: 01 / 08; } sec-34 { grid-row: 05 / 05; grid-column: 01 / 08; } sec-12:has(> [hidden])> :not([hidden]), sec-34:has(> [hidden])> :not([hidden]) { padding-left: 3px; } btn-select { grid-row: 07 / 07; grid-column: 01 / 04; } btn-start { grid-row: 07 / 07; grid-column: 05 / 08; } } jpad { grid-row: 04 / 04; grid-column: 03 / 04; grid-template-rows: 1fr; grid-template-columns: 1fr; padding-right: 6px; svg { grid-row: 01 / 01; grid-column: 01 / 02; background: linear-gradient(var(--profile-o), var(--profile-o)); mask: url("data:image/svg+xml,%3Csvg width='175' height='175' viewBox='0 0 175 175' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M88 87H137V88H88V137H87V88H38V87H87V38H88V87Z' fill='%231D1A15'/%3E%3C/svg%3E%0A") no-repeat center; } } btn-r, btn-l, btn-menu, btn-state, btn-select, btn-start, btn-1, btn-2, btn-3, btn-4 { display: grid; padding-left: 2px; place-items: center; color: var(--profile-2); white-space: pre; } btn-1, btn-2, btn-3, btn-4 { font-size: 12px; padding-left: 4px; color: var(--profile-base); } } @media (orientation: landscape) and (pointer: coarse) { page01 { padding: 20px max(20px, calc(var(--safe-right) - 10px)) 20px max(20px, calc(var(--safe-left) - 10px)); } page02 { grid-template-rows: 1fr; align-items: center; grid-template-columns: var(--base-height) auto calc(var(--base-height) + 1px); padding: 0px max(0px, calc(var(--safe-right) - 10px)) 0px max(0px, calc(var(--safe-left) - 10px)); display { grid-column: 02 / 02; } dpad, bpad { grid-row: 01 / 01; height: calc(var(--base-height) + 24px + 2px); } dpad { grid-column: 01 / 01; } bpad { grid-column: 03 / 03; grid-template-rows: 24px 8px calc((var(--base-height) - 26px)/2) 1px calc((var(--base-height) - 26px)/2) 1px 24px; grid-template-columns: calc(var(--base-height)/4 - 1px) 1px 1fr 1px 1fr 1px calc(var(--base-height)/4 - 1px); } jpad { display: none; } } } @media (min-width: 1024px) and (pointer: fine) { page01 { padding: 20px; } page02 { grid-template-rows: 1fr; align-items: center; grid-template-columns: auto; display { grid-column: 01 / 01; } dpad, bpad, jpad { display: none; } } }}