.ses-ui { font: 14px/1.5 system-ui, sans-serif; color: #e6f8fa; color-scheme: dark; box-sizing: border-box; }
.ses-ui *, .ses-ui *::before, .ses-ui *::after { box-sizing: border-box; }
.ses-ui button, .ses-ui a { font: inherit; color: inherit; }
.ses-ui button, .ses-ui .ses-link { border: 1px solid #48737a; background: #10262e; padding: 8px 14px; border-radius: 7px; cursor: pointer; text-decoration: none; }
.ses-ui button:hover, .ses-ui a:hover { background: #18444b; }
.ses-ui :focus-visible { outline: 3px solid #70fff0; outline-offset: 3px; }
.ses-profile-button { position: fixed; right: 16px; top: 16px; z-index: 1000001; }
.ses-ui [hidden] { display: none !important; }
.ses-dialog { width: min(660px, 94vw); max-height: 85dvh; border: 1px solid #42cfc9; border-radius: 16px; background: #0a1722; color: #e6f8fa; padding: 24px; box-shadow: 0 20px 100px #000b; }
.ses-dialog::backdrop { background: #01060bbd; }
.ses-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ses-dialog h2 { margin: 0; font-size: 25px; }
.ses-eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #6ce9d9; }
.ses-summary { font-size: 19px; color: #ffe2a2; }
.ses-note { color: #a8bdc8; font-size: 13px; }
.ses-achievements { list-style: none; padding: 0; display: grid; gap: 10px; }
.ses-achievements li { border: 1px solid #28424f; border-radius: 10px; padding: 12px; background: #11232f; }
.ses-achievements li[data-unlocked="true"] { border-color: #54c9b6; }
.ses-achievements strong { display: block; }
.ses-achievements small { color: #b2c7d0; }
.ses-achievements progress { display: block; width: 100%; height: 6px; margin-top: 9px; accent-color: #66e9cf; }
.ses-toast { position: fixed; left: 50%; transform: translateX(-50%); top:25dvh;bottom:auto; width: min(370px, calc(100vw - 32px)); border: 1px solid #56fff0; background: linear-gradient(135deg, #087d79f5, #003e41fa); color: #e5fffc; border-radius: 14px; padding: 18px 42px 18px 20px; box-shadow: 0 0 12px #20ffe3aa, 0 0 38px #00d7c877, 0 0 75px #00bfa533, inset 0 0 18px #47ffe422, 0 12px 48px #0009; z-index: 2147483647; pointer-events: auto; animation: ses-arrive .3s ease-out; }
.ses-toast::before { content: '✦'; color: #8ffff0; text-shadow: 0 0 12px #30ffe0; font-size: 30px; float: left; margin-right: 14px; }
.ses-toast strong { display: block; font-size: 19px; text-shadow: 0 0 12px #5cffe999; }
.ses-toast p { margin: 5px 0 0; color: #bffff3; font-size: 13px; }
.ses-toast button { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border: 0; background: transparent; }
.ses-toast video { display: block; width: 100%; max-height: 150px; object-fit: contain; margin-top: 12px; }
.ses-settings { display: flex; flex-wrap: wrap; gap: 12px; }
@keyframes ses-arrive { from { opacity: 0; transform: translate(-50%,18px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ses-toast { animation: none; } }
/* Shared safe opening inside the original artwork. */
:root { --ses-screen-top:16dvh; --ses-screen-bottom:19dvh; --ses-screen-side:1.5vw; --ses-screen-height:65dvh; }
/* The user's original artwork is the only gameplay bezel. */
.ses-player { margin: 0; overflow: hidden; background: #000; height: 100dvh; }
.ses-player > * { box-sizing: border-box; }
.ses-art-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147483646; }
.ses-frame, .ses-gate { position: fixed; inset:var(--ses-screen-top) var(--ses-screen-side) var(--ses-screen-bottom); height:var(--ses-screen-height); }
.ses-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.ses-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; z-index: 2; text-align: center; }
.ses-gate[hidden] { display: none; }
.ses-gate video { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.ses-gate #ses-start { background: transparent; border: 0; letter-spacing: 4px; font-size: 20px; }
.ses-gate .ses-skip { position: absolute; right: 12px; bottom: 12px; z-index: 1; background: #0009; border: 0; }
#ses-menu-toggle { position: fixed; bottom: 7dvh; left: 2vw; width: 19vw; height: 10dvh; z-index: 5; background: transparent; border: 0; cursor: pointer; }
#ses-menu-toggle:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.ses-pause { width: min(530px, 90vw); max-height: 65dvh; padding: 24px; border: 1px solid #739b9b; background: #061010ed; color: #eef6ed; text-align: center; }
.ses-pause::backdrop { background: #0008; }
.ses-pause h1 { font: bold clamp(22px,4vw,34px) monospace; margin: 8px 0 18px; }
.ses-menu-art{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px}
.ses-menu-art img{object-fit:contain;max-width:55%;max-height:15dvh}
.ses-menu-art .ses-pause-character{max-width:30%}
.ses-pause small { letter-spacing: 4px; }
.ses-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ses-menu-actions > *, .ses-menu-actions button { width: 100%; }
.ses-player .ses-profile-button { position: static; }
.ses-pause details { text-align: left; margin-top: 18px; }
.ses-pause summary { cursor: pointer; }
.ses-pause details p { color: #c9d5ce; }
#ses-game-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ses-cover-title { height: clamp(150px, 34vh, 350px); width: clamp(135px, 25vh, 240px); background: linear-gradient(130deg, #1f3449, #0c1824); border: 8px solid #42d5cb; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 15px; color: white; text-decoration: none; box-shadow: inset 0 0 0 3px #102630; }
.ses-cover-title small { color: #68efdf; letter-spacing: 2px; margin-bottom: 16px; }
.carousel-item { text-decoration: none; }
.carousel-item[data-unavailable="true"] { opacity: .5; }
.carousel-item .ses-coming { position: absolute; bottom: 10px; left: 10%; right: 10%; background: #101c25; color: #eee; padding: 4px; text-align: center; font-size: 12px; }

/* One continuous CRT surface above content, below the original bezel artwork. */
:root {
  --crt-line-height: 8px;
  --crt-intensity: .72;
  --crt-glow: .10;
  --crt-mask: .025;
  --crt-shimmer: .55px;
}
body::after, .ses-pause[open]::after, .ses-dialog[open]::after {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  z-index: 2147483644;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / var(--crt-intensity)) 0% 20%, transparent 28% 72%, rgb(220 255 248 / var(--crt-glow)) 85%, transparent 100%),
    repeating-linear-gradient(90deg, rgb(255 0 0 / var(--crt-mask)) 0 1px, rgb(0 255 0 / var(--crt-mask)) 1px 2px, rgb(0 0 255 / var(--crt-mask)) 2px 3px),
    radial-gradient(ellipse at center, #0000 45%, #0005 100%);
  background-size: 100% var(--crt-line-height), 3px 100%, 100% 100%;
  /* Soft-light preserves highlights; GLSL provides exact luminance-driven bleed. */
  mix-blend-mode: soft-light;
  animation: ses-crt-flicker 2.7s linear infinite, ses-crt-shimmer .19s linear infinite;
}
@keyframes ses-crt-shimmer {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  24% { background-position: 0 var(--crt-shimmer), 0 0, 0 0; }
  61% { background-position: 0 calc(var(--crt-shimmer) * -.6), 0 0, 0 0; }
  83% { background-position: 0 calc(var(--crt-shimmer) * .3), 0 0, 0 0; }
}
@keyframes ses-crt-flicker {
  0%, 100% { opacity: .87; }
  16% { opacity: .94; }
  18% { opacity: .85; }
  21%, 48% { opacity: .91; }
  51% { opacity: .84; }
  55%, 79% { opacity: .93; }
  82% { opacity: .86; }
  88% { opacity: .92; }
}
@media (prefers-reduced-motion: reduce) {
  body::after, .ses-pause[open]::after, .ses-dialog[open]::after { animation: none; opacity: .9; }
}
.final-overlay { z-index: 2147483646; }
#power, .ses-profile-button { z-index: 2147483647; }
.ses-toast { z-index: 2147483643; }
/* Modal dialogs live in the browser's top layer; give that layer the same surface. */
body:has(.ses-pause[open], .ses-dialog[open])::after { display: none; }
.ses-pause[open]::after, .ses-dialog[open]::after {
  clip-path: inset(var(--ses-screen-top) var(--ses-screen-side) var(--ses-screen-bottom));
}