/* SD critical styles, in source order: base, footer, credit, leaderboard, gallery. */
:root { --ink: #173f35; --paper: #fffef4; --coral: #f45340; --yellow: #eff773; --purple: #b2a0ed; --pink: #f3b7d4; --foot-label-color: #aabc5f; --foot-accent: var(--coral); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 105px; } body { margin: 0px; color: var(--ink); background: var(--paper); font: 16px / 1.5 Arial, Helvetica, sans-serif; } button, a, input, select { -webkit-tap-highlight-color: transparent; } button, input, select { font: inherit; } button, a { touch-action: manipulation; } button { color: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: rgb(103, 69, 218) solid 3px; outline-offset: 5px; } button { border: 0px; } h1, h2, h3, p { margin: 0px; } img { display: block; max-width: 100%; height: auto; } .brand { font-size: 26px; line-height: 0.82; letter-spacing: -1.5px; font-weight: 900; position: relative; display: inline-block; min-height: 44px; } .brand-dot { color: var(--coral); position: absolute; right: -20px; bottom: 1px; font-size: 18px; } .eyebrow { font-size: 12px; letter-spacing: 1.5px; font-weight: 700; display: flex; align-items: center; gap: 12px; } body > footer { padding-left: 5vw; padding-right: 5vw; background: var(--ink); color: var(--yellow); } button:disabled { opacity: 0.35; cursor: default; } @media (max-width: 700px){.brand { font-size: 23px; }} @media (prefers-reduced-motion: reduce){html { scroll-behavior: auto; }} [hidden] { display: none !important; } [hidden] { display: none !important; } .skip-link { position: fixed; top: calc(8px + env(safe-area-inset-top,0px)); left: calc(8px + env(safe-area-inset-left,0px)); z-index: 200; background: var(--paper); padding: 12px; transform: translateY(-160%); } .skip-link:focus { transform: none; } .hero-note, .eyebrow, .orbit-label, .art-caption, .card-tag, .edition-info > span, .issue-sticker span { font-size: 13px; } .issue-nav { display: flex; align-items: center; justify-content: space-between; padding: 25px 6%; border-bottom: 1px solid rgba(23, 63, 53, 0.19); } .issue-nav nav { display: flex; gap: 24px; } .issue-nav nav a { padding: 15px 10px; margin: 0px -10px; display: inline-block; } .simple-footer { display: flex; justify-content: space-between; padding-left: 6%; padding-right: 6%; } @media (max-width: 700px){.brand { font-size: 22px; } .brand-dot { right: -14px; font-size: 13px; } .eyebrow { font-size: 13px; letter-spacing: 1px; } .simple-footer { flex-wrap: wrap; font-size: 14px; } .issue-nav { padding: 22px 6%; } .issue-nav nav { gap: 18px; font-size: 14px; }} .play-main { max-width: 1100px; margin: 0px auto; padding: 45px 6% 90px; } .game-page-head { border-bottom: 1px solid rgba(23, 63, 53, 0.19); padding-bottom: 22px; margin-bottom: 30px; } .game-page-head .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--coral); } .game-page-head h1 { font-size: clamp(32px, 5.5vw, 54px); letter-spacing: -0.03em; line-height: 1.05; margin: 10px 0px 14px; } .game-page-head p { font-size: 16px; line-height: 1.6; max-width: 680px; margin: 0px 0px 8px; } .back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; margin-bottom: 20px; text-decoration: underline; } .source-credit { font-size: 13px; opacity: 0.7; margin-top: 10px; } .status-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; background: var(--yellow); border-radius: 12px; padding: 14px 18px; margin: 22px 0px; font-size: 14px; font-weight: 700; } .status-bar button { background: var(--ink); color: var(--paper); border-radius: 30px; padding: 10px 18px; font-size: 13px; font-weight: 700; min-height: 44px; } .win-banner { background: var(--ink); color: var(--yellow); border-radius: 12px; padding: 18px 20px; margin: 20px 0px; font-size: 16px; font-weight: 700; display: none; } .win-banner:focus { outline: 3px solid var(--yellow); outline-offset: 3px; } .sd-frames { display: flex; flex-direction: column; gap: 18px; } .sd-frame { position: relative; border: 1px solid rgba(23, 63, 53, 0.19); border-radius: 10px; overflow: hidden; touch-action: pan-y pinch-zoom; } .sd-frame img { width: 100%; display: block; } .sd-label { display: block; font-size: 14px; font-weight: 700; letter-spacing: 1px; padding: 0px 0px 8px; pointer-events: none; } .sd-spot { position: absolute; min-width: 34px; min-height: 34px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid transparent; background: transparent; cursor: pointer; z-index: 2; } .sd-spot:focus-visible { outline: rgb(103, 69, 218) solid 3px; outline-offset: 2px; } .sd-spot.found { z-index: 1; border-color: rgb(23, 63, 53); background: rgba(23, 63, 53, 0.333); box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px; } .sd-spot.revealed { border-color: var(--coral); background: rgba(244, 83, 64, 0.133); } .sd-spot .sd-num { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink); opacity: 0; } .sd-spot.found .sd-num, .sd-spot.revealed .sd-num { opacity: 1; } .sd-list { margin-top: 24px; display: grid; gap: 10px; } .sd-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; padding: 10px 12px; border: 1px solid rgba(23, 63, 53, 0.145); border-radius: 8px; opacity: 0.5; } .sd-list li.found { opacity: 1; background: rgba(245, 219, 72, 0.133); } .sd-list .n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 12px; font-weight: 700; } .play-inline-icon { width: 1em; height: 1em; vertical-align: -0.15em; flex: 0 0 auto; } .play-toggle { cursor: pointer; width: 100%; border: 0px; text-align: left; font: inherit; } .play-h-sm { font-size: 16px; margin: 18px 0px 4px; } .play-hero .eyebrow, .game-card-tag, .game-page-head .eyebrow, .fo-hint { color: rgb(201, 58, 39); } .sdr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; } .sdr-game { --sdr-width: min(calc(100vw - 32px),1600px); position: relative; width: var(--sdr-width); margin: 18px 0 0 calc(50% - var(--sdr-width)/2); } .sdr-stage-row { display: flex; gap: 16px; align-items: flex-start; } .sdr-stage { position: relative; flex: 1 1 0px; min-width: 0px; background: transparent; } .sdr-viewport { position: relative; overflow: hidden; aspect-ratio: 1206 / 844; touch-action: pan-y; } .sdr-stage.zoomable .sdr-viewport { touch-action: none; } .sdr-zoomlayer { position: absolute; inset: 0px; transform-origin: 0px 0px; will-change: transform; background: transparent; } .sdr-zoomlayer img { width: 100%; height: auto; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; } .sdr-lens { position: absolute; left: 0px; top: 0px; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; z-index: 4; outline: rgb(233, 217, 176) solid 2px; outline-offset: -2px; will-change: transform, opacity; contain: layout paint; } .sdr-lens img { position: absolute; left: 0px; top: 0px; max-width: none; transform-origin: 0px 0px; will-change: transform; pointer-events: none; } .sdr-lens-keyboard::before, .sdr-lens-keyboard::after { content: ""; position: absolute; background: rgb(103, 69, 218); z-index: 1; } .sdr-lens-keyboard::before { width: 34px; height: 2px; left: 83px; top: 99px; } .sdr-lens-keyboard::after { width: 2px; height: 34px; left: 99px; top: 83px; } #sd-magnifier[aria-pressed="false"] { background: transparent; color: var(--ink); box-shadow: currentcolor 0px 0px 0px 1px inset; } @media not all and (any-pointer: fine){#sd-magnifier { display: none; } .sdr-lens { display: none; }} .sdr-hint-mark { position: absolute; width: 9%; min-width: 26px; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed rgba(244, 83, 64, 0.6); pointer-events: none; } .sdr-crosshair { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); pointer-events: none; display: none; z-index: 5; } .sdr-crosshair.show { display: block; } .sdr-crosshair::before, .sdr-crosshair::after { content: ""; position: absolute; background: rgb(103, 69, 218); } .sdr-crosshair::before { left: 50%; top: 0px; bottom: 0px; width: 2px; transform: translateX(-50%); } .sdr-crosshair::after { top: 50%; left: 0px; right: 0px; height: 2px; transform: translateY(-50%); } .sdr-crosshair-ring { position: absolute; inset: 2px; border: 2px solid rgb(103, 69, 218); border-radius: 50%; } .sdr-tray { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 14px; padding: 16px; border-radius: 12px; background: linear-gradient(160deg, rgb(28, 28, 28), rgb(13, 13, 13)); min-height: 80px; align-items: center; } .sdr-ring { position: relative; width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; background: transparent; border: 0px; border-radius: 50%; box-shadow: none; touch-action: none; padding: 0px; } .sdr-ring-svg { width: 100%; height: 100%; background: transparent; box-shadow: none; overflow: visible; } .sdr-ring-svg circle { fill: none; stroke-width: 3.2; stroke: rgb(233, 217, 176); filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 1px 1px); } .sdr-ring-svg .sdr-ring-outline { stroke: rgba(0, 0, 0, 0.45); stroke-width: 5; filter: none; } .sdr-ring:focus-visible { outline: rgb(103, 69, 218) solid 3px; outline-offset: 3px; } .sdr-ring.armed .sdr-ring-stroke { stroke: rgb(255, 246, 221); } .sdr-ring.armed { animation: 1.1s ease-in-out 0s infinite normal none running sdr-pulse; } .sdr-ring.dragging { position: fixed; z-index: 60; pointer-events: none; } .sdr-ring.wrong .sdr-ring-stroke { stroke: rgb(226, 66, 46); } .sdr-ring.locked { position: absolute; pointer-events: none; } .sdr-ring.locked .sdr-ring-stroke { stroke: rgb(107, 191, 107); } @keyframes sdr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce){.sdr-ring.armed { animation: auto ease 0s 1 normal none running none; } .sdr-lens, .sdr-lens img { transition: none; animation: auto ease 0s 1 normal none running none; }} @media (max-width: 1023px){.sdr-stage-row { flex-direction: column; align-items: stretch; gap: 20px; } .sdr-stage { flex: 0 0 auto; } .sdr-game { --sdr-width: calc(100vw - 16px); }} .sdr-howto { font-size: 16px; line-height: 1.5; margin: 14px 0px 0px; font-weight: 700; } #sd-list li { font-size: 16px; line-height: 1.5; } @media (orientation: landscape) and (max-height: 520px){.sdr-stage-row { flex-direction: row; align-items: flex-start; justify-content: center; gap: 12px; } .sdr-stage { flex: 0 1 calc(-168.622px + 142.9svh); max-width: calc(-168.622px + 142.9svh); }} .sdr-lens { box-shadow: rgb(243, 230, 196) 0px 0px 0px 2px, rgba(0, 0, 0, 0.45) 0px 0px 0px 3px, rgba(0, 0, 0, 0.35) 0px 8px 22px; } .win-banner.show{display:block} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} :root{ --foot-mark:28px; --foot-gap:40px; --foot-pad-y:56px; } @media(max-width:600px){ :root{ --foot-mark:24px; --foot-gap:24px; --foot-pad-y:32px; } } footer:not(.reader-bottom){ padding-top:var(--foot-pad-y); padding-bottom:var(--foot-pad-y); } .foot-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--foot-gap); margin:0; } @media(max-width:600px){ .foot-row{ flex-direction:column; align-items:flex-start; } } .foot-block{ display:flex; flex-direction:column; gap:8px; min-width:0; margin:0; } .foot-label{ display:block; font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:.12em; color:var(--foot-label-color,currentColor); margin:0; } .foot-name, p.foot-name{ font-size:14px; font-weight:400; line-height:1.5; color:inherit; text-decoration:none; margin:0; } a.foot-name{ display:inline-block; min-height:44px; padding:10px 0; } .foot-line{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 0; text-decoration:none; color:inherit; } .foot-mark{ display:inline-flex; align-items:center; height:var(--foot-mark); flex:none; overflow:visible; } .foot-mark svg, .foot-mark img{ height:100%; width:auto; display:block; } .foot-mark-brand{ font-size:14px; font-weight:800; letter-spacing:-.01em; text-decoration:none; color:inherit; white-space:nowrap; } .cultre-foot-path{fill:currentColor;transition:fill .2s ease} .cultre-foot-credit:hover .cultre-foot-path, .cultre-foot-credit:focus-visible .cultre-foot-path{fill:#B74343} .cultre-foot-credit:focus-visible{outline:2px solid #B74343;outline-offset:4px;border-radius:4px} .rb-credit{ --_mark: var(--foot-mark, 28px); --_accent: var(--foot-accent, #e2422e); display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center; gap:.35em;min-height:44px;padding:.35em .1em; color:inherit;text-decoration:none;font:inherit;line-height:1.2; transform:translateY(0); transition:transform .25s cubic-bezier(.2,.7,.2,1); } @media (max-width:600px){ .rb-credit{ --_mark: var(--foot-mark, 24px); } } .rb-credit:hover,.rb-credit:focus-visible{ transform:translateY(-2px); } .rb-credit:focus-visible{ outline:2px solid var(--_accent); outline-offset:4px; border-radius:6px; } .rbc-label{ font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.12em; color:var(--foot-muted, currentColor);white-space:nowrap; } .rbc-body{ display:flex; align-items:center; gap:.55em; } .rbc-mark-wrap{ height:var(--_mark); width:var(--_mark); flex:none; position:relative; perspective:600px; display:block; } .rbc-mark{ height:100%; width:auto; display:block; overflow:visible; transform-style:preserve-3d; transform-origin:50% 50%; transition:transform .35s cubic-bezier(.2,.7,.2,1); will-change:transform; } .rbc-mark{ --rbc-c1:#e2422e; --rbc-c2:#c2362a; --rbc-c3:#a92f21; --rbc-c4:#7a1f16; } .rbc-mark rect,.rbc-mark g{ fill:currentColor; transition:fill .25s ease; } .rb-credit:hover .rbc-mark .rbc-c1,.rb-credit:focus-visible .rbc-mark .rbc-c1,.rb-credit.rbc-tap .rbc-mark .rbc-c1{ fill:var(--rbc-c1); } .rb-credit:hover .rbc-mark .rbc-c2,.rb-credit:focus-visible .rbc-mark .rbc-c2,.rb-credit.rbc-tap .rbc-mark .rbc-c2{ fill:var(--rbc-c2); } .rb-credit:hover .rbc-mark .rbc-c3,.rb-credit:focus-visible .rbc-mark .rbc-c3,.rb-credit.rbc-tap .rbc-mark .rbc-c3{ fill:var(--rbc-c3); } .rb-credit:hover .rbc-mark .rbc-c4,.rb-credit:focus-visible .rbc-mark .rbc-c4,.rb-credit.rbc-tap .rbc-mark .rbc-c4{ fill:var(--rbc-c4); } .rbc-sheen{ display:none; } .rbc-mark .rbc-sheen-rect{ fill:url(#rbc-sheen-grad); opacity:0; transition:opacity .25s ease; pointer-events:none; mix-blend-mode:screen; } .rb-credit:hover .rbc-mark .rbc-sheen-rect,.rb-credit:focus-visible .rbc-mark .rbc-sheen-rect{ opacity:1; } .rbc-name{ font-size:14px; font-weight:400; transition:color .25s ease; } .rb-credit:hover .rbc-name,.rb-credit:focus-visible .rbc-name{ color:var(--_accent); } @keyframes rbc-tap{ 0%{transform:scale(1)} 45%{transform:scale(.9) rotate(-3deg)} 100%{transform:scale(1)} } .rb-credit.rbc-tap .rbc-mark{ animation:rbc-tap .32s cubic-bezier(.3,1.4,.4,1); } @media (prefers-reduced-motion:reduce){ .rb-credit,.rbc-mark,.rbc-sheen,.rbc-sheen-rect{ transition:none !important; animation:none !important; } .rb-credit:hover,.rb-credit:focus-visible{ transform:none; } .rbc-mark{ transform:none !important; } .rbc-sheen,.rbc-mark .rbc-sheen-rect{ display:none; } } @media (forced-colors:active){ .rbc-mark *{ fill:CanvasText; } } .lb-panel{box-sizing:border-box;width:100%;max-width:680px;margin:28px auto;padding:20px;border:1px solid #173f3530;border-radius:12px;background:#faf7ef;color:#173f35;overflow-wrap:anywhere} .lb-panel[hidden]{display:none} .lb-heading{font-size:20px;line-height:1.3;margin:0 0 8px} .lb-game-title{font-size:14px;margin:0 0 18px} .lb-level{font-size:14px;margin:-10px 0 18px} .lb-form{display:flex;flex-direction:column;gap:10px} .lb-field-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch} .lb-label{font-size:14px;font-weight:600;flex-basis:100%} .lb-field-row input{box-sizing:border-box;flex:1 1 200px;min-width:0;width:100%;min-height:44px;padding:10px 12px;border:1px solid #173f3570;border-radius:6px;background:#fffdf7;color:#173f35;font:inherit;font-size:16px} .lb-panel button{box-sizing:border-box;min-height:44px;min-width:44px;padding:10px 16px;border:1px solid #173f3570;border-radius:8px;background:transparent;color:#173f35;font:inherit;font-size:14px;cursor:pointer} .lb-panel .lb-submit,.lb-tab.active{background:#173f35;color:#faf7ef} .lb-panel :focus-visible{outline:3px solid #8a5624;outline-offset:3px} .lb-panel :disabled{opacity:.65;cursor:default} .lb-privacy{font-size:14px;margin:0;line-height:1.5} .lb-status{font-size:14px;min-height:42px;margin:0;line-height:1.5} .lb-status-error{color:#8e3028} .lb-personal-best{font-size:14px;margin:14px 0 0} .lb-tabs{display:flex;gap:8px;margin:18px 0 12px;flex-wrap:wrap} .lb-board-wrap{height:200px;overflow:auto;overscroll-behavior:contain} .lb-empty{font-size:14px;margin:0} .lb-list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .lb-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 8px;border-bottom:1px solid #173f3520;font-size:14px;min-height:44px;box-sizing:border-box} .lb-row-mine{background:#173f350a} .lb-rank{font-weight:700} .lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-score{font-variant-numeric:tabular-nums;white-space:nowrap} .lb-your-rank{font-size:14px;margin:14px 0 0;min-height:42px;line-height:1.5} @media(max-width:420px){.lb-panel{padding:16px}.lb-submit{width:100%}.lb-row{gap:5px;padding-inline:0;font-size:13px}} .lb-entry{display:inline-block;min-height:44px;min-width:44px;margin:8px 0 0 12px;padding:10px 16px;border:1px solid currentColor;border-radius:8px;background:#faf7ef;color:#173f35;font:inherit;font-size:16px;cursor:pointer} .lb-entry:focus-visible{outline:3px solid #8a5624;outline-offset:3px} body.sd-page{background:#100d09;color:#eee4cf;--ink:#eee4cf;--paper:#100d09} .sd-page .game-page-head .eyebrow{color:#d5b778} .sd-page .game-page-head p,.sd-page .source-credit{font-size:16px;color:#d4cbb9} .sd-page .back-link,.sd-page .sd-label,.sd-page .play-toggle{color:#e1c791} .sd-page .sdr-viewport{outline:1px solid #bea36d;outline-offset:3px} .sd-page .sdr-tray{border:1px solid #9c7c42;background:linear-gradient(160deg,#27251c,#0e100c)} .sd-page .status-bar button{min-height:44px;font-size:16px} .sd-page .play-main,.sd-page .issue-nav,.sd-page .simple-footer{position:relative;z-index:1} #sd-gallery{display:none} .sd-pending #sd-gallery,.sd-webgl #sd-gallery{display:block;position:fixed;inset:0;z-index:10;overflow:hidden;background:#080705} #sd-gallery .hr-canvas,#sd-gallery-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #sd-gallery .hr-canvas{opacity:0;pointer-events:none} .sd-gallery-ready #sd-gallery .hr-canvas{opacity:1} .sd-gallery-heading{position:absolute;left:32px;top:24px;color:#eee4cf;pointer-events:none} #sd-gallery-title{font:28px Georgia,serif;margin:0 0 12px} #sd-gallery-edition{font:16px Arial,sans-serif;letter-spacing:.12em} #sd-gallery-play{position:absolute;bottom:24px;left:32px;min-width:96px;min-height:48px;padding:10px 24px;border:1px solid #b69a62;border-radius:3px;background:#18150eee;color:#f4e8ce;font:18px Georgia,serif;cursor:pointer} #sd-gallery-play:focus-visible{outline:3px solid #b5a2ff;outline-offset:4px} .sd-pending .sd-page>.issue-nav,.sd-pending .sd-page>.play-main,.sd-pending .sd-page>.simple-footer,.sd-webgl:not(.sd-playing) .sd-page>.issue-nav,.sd-webgl:not(.sd-playing) .sd-page>.play-main,.sd-webgl:not(.sd-playing) .sd-page>.simple-footer{opacity:0} .sd-playing #sd-gallery{z-index:0;pointer-events:none;filter:blur(6px) brightness(.55)} .sd-playing .sd-gallery-heading,.sd-playing #sd-gallery-poster{display:none} .sd-playing .sdr-viewport{outline:none} @media(max-width:599px){.sd-gallery-heading{left:16px;top:20px}#sd-gallery-title{font-size:24px}#sd-gallery-edition{font-size:16px;letter-spacing:.02em}#sd-gallery-play{left:16px;bottom:16px}} #sd-gallery-poster img{width:100%;height:100%;object-fit:cover} .sd-gallery-heading,#sd-gallery-play{z-index:2} .sd-page .sdr-status,.sd-page #sd-toggle-answers{background:#282319;color:#eee4cf;border:1px solid #867042} .sd-page #sd-magnifier[aria-pressed="false"]{color:#eee4cf} .sd-page #sd-answers,.sd-page #lb-root{background:#17140f} .sd-page .simple-footer{background:#100d09;color:#eee4cf} @media(prefers-reduced-motion:reduce){.sd-pending #sd-gallery{display:none}.sd-pending .sd-page>.issue-nav,.sd-pending .sd-page>.play-main,.sd-pending .sd-page>.simple-footer{opacity:1}} .sd-page .sdr-status,.sd-page .sd-label,.sd-page .back-link{font-size:16px} .sd-page .sdr-status{scroll-margin-top:calc(16px + env(safe-area-inset-top,0px))} .sd-playing .sdr-status{position:sticky;top:calc(16px + env(safe-area-inset-top,0px));z-index:6} .sd-page .sd-label{padding-bottom:20px} .sd-page .sdr-stage{padding-bottom:8px} .sd-page .sdr-viewport{outline:none;border-radius:2px;box-shadow:0 0 0 2px #17140f,0 0 0 3px #705b35,0 0 0 4px #d3ba7c,0 0 0 7px #a78a4e,0 0 0 8px #ddc48c,0 12px 24px 8px #0006} .sd-page .sdr-stage-row{gap:28px} @media(min-width:1024px) and (min-height:521px){.sd-page .sdr-game{--sdr-width:min(calc(100vw - 20px),1612px)}} @media(orientation:landscape) and (max-height:520px){ .sd-page .sdr-status{padding:4px 12px;margin-bottom:12px} .sd-page .sdr-game{margin-top:12px} .sd-page .sdr-stage{flex:0 1 calc((100svh - 220px - env(safe-area-inset-top,0px)) * 1206 / 844);max-width:calc((100svh - 220px - env(safe-area-inset-top,0px)) * 1206 / 844)} .sd-page .sdr-tray{padding:6px 16px;min-height:58px} }