/* All four sloping faces share the screen's inset geometry. */
body{background:#847d61;background-image:none}
.welcome-page{padding:0;background:#847d61}
.machine,.welcome-machine{
  --bezel-side:clamp(24px,6.5vw,112px);--bezel-top:clamp(60px,8.3svh,110px);
  --bezel-bottom:clamp(70px,8.5svh,112px);--bezel-lip:clamp(10px,1.7vw,28px);
  position:relative;isolation:isolate;width:100%;max-width:none;margin:0;
  padding:var(--bezel-top) var(--bezel-side) 0;border:1px solid #575541;border-radius:3px;
  background:linear-gradient(110deg,#928c70,#817b60 46%,#9b9679);
  box-shadow:inset 2px 2px 4px #b6ae8c,inset -3px -3px 4px #504d3b;
}
.machine:before,.welcome-machine:before,.machine:after{content:none}
.monitor-recess{
  --slope-x:calc(var(--bezel-side) - var(--bezel-lip) + 20px);
  --slope-top:calc(var(--bezel-top) - var(--bezel-lip) + 20px);
  --slope-bottom:calc(var(--bezel-bottom) - var(--bezel-lip) + 20px);
  position:absolute;inset:var(--bezel-lip);z-index:-1;overflow:hidden;border-radius:14px;
  pointer-events:none;background:#77715a;box-shadow:0 0 5px #514b37,inset 0 0 2px #3d3827;
}
.bezel-surfaces{position:absolute;inset:-3px;filter:blur(4px)}
.bezel-face{position:absolute;inset:0}
.bezel-face--top{
  clip-path:polygon(0 0,100% 0,calc(100% - var(--slope-x)) var(--slope-top),var(--slope-x) var(--slope-top));
  background:linear-gradient(180deg,#494330 0,#625b43 15px,#6b654e var(--slope-top));
}
.bezel-face--right{
  clip-path:polygon(100% 0,100% 100%,calc(100% - var(--slope-x)) calc(100% - var(--slope-bottom)),calc(100% - var(--slope-x)) var(--slope-top));
  background:linear-gradient(270deg,#b9b396 0,#aaa489 18px,#878169 var(--slope-x));
}
.bezel-face--bottom{
  clip-path:polygon(0 100%,var(--slope-x) calc(100% - var(--slope-bottom)),calc(100% - var(--slope-x)) calc(100% - var(--slope-bottom)),100% 100%);
  background:linear-gradient(0deg,#aaa487 0,#9d987c 25px,#918b70 var(--slope-bottom));
}
.bezel-face--left{
  clip-path:polygon(0 0,var(--slope-x) var(--slope-top),var(--slope-x) calc(100% - var(--slope-bottom)),0 100%);
  background:linear-gradient(90deg,#514b36 0,#635d46 15px,#7c755b var(--slope-x));
}
.monitor-recess:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 4px 5px 8px #302b1d70,inset -3px -3px 7px #d8d0ab55;pointer-events:none}
.machine>.case-label{display:none}
.machine>.screen{border:0;border-radius:clamp(36px,4.5vw,68px) / clamp(36px,3.4vw,52px);box-shadow:0 0 3px 2px #39352577,0 -4px 12px #27221144,0 4px 8px #d6d0a92e;background:#02070b}
.machine>.screen:after{border-radius:inherit}
.welcome-machine{height:100svh;min-height:640px}
.welcome-machine>.welcome-screen{min-height:0}
.welcome-machine .welcome-screen>.screen-picture{display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);background:#000}
.welcome-header{align-self:start}
.welcome-stage{align-self:center;justify-content:center;flex:none;padding:0 20px}
.enter-button{border-radius:20px}
.welcome-footer{align-self:end}
.machine>.case-bottom{position:relative;display:flex;justify-content:center;align-items:center;height:var(--bezel-bottom);min-height:var(--bezel-bottom);padding:8px 0;gap:0}
.machine .case-brand,.welcome-machine .case-brand{font:italic 900 clamp(40px,5.7svh,68px)/1 Arial,sans-serif;letter-spacing:-7px;color:#68654d;text-shadow:1px 2px 0 #c2bb97;opacity:.7;transform:skewX(-10deg);padding-right:7px}
.machine>.case-bottom>.power,.machine>.case-bottom>.case-tag,.welcome-case-model,.desk-caption{display:none}
@media(max-width:650px){
  .machine,.welcome-machine{--bezel-side:6.5vw;--bezel-top:clamp(62px,8.3svh,105px);--bezel-bottom:clamp(64px,8.3svh,106px);--bezel-lip:7px;border-radius:2px}
  .welcome-machine{height:100svh;min-height:700px}
  .monitor-recess{top:18px;bottom:17px;--slope-x:calc(var(--bezel-side) - 7px + 10px);--slope-top:calc(var(--bezel-top) - 18px + 16px);--slope-bottom:calc(var(--bezel-bottom) - 17px + 16px);border-radius:10px}
  .bezel-surfaces{filter:blur(3px)}
  .welcome-header{padding-top:20px;gap:8px}
  .welcome-stage{padding:0 16px}
  .welcome-footer{padding-bottom:22px}
}

/* Welcome page stone controls. Texture supplied by the site owner. */
.welcome-page .enter-button{
  background-color:#41434a;background-image:linear-gradient(#0000,#0000),url('assets/stone-texture.png');background-size:100% 100%,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;background-origin:padding-box;padding:0 12px;transition:box-shadow .15s,color .15s;
  color:#fff;border:2px solid #18191d;border-radius:999px;
  background-clip:padding-box;box-shadow:inset 0 0 7px 2px #0008,inset 1px 2px 2px #b2b3bb70,inset -1px -2px 3px #0009,0 0 0 1px #7a7b83,0 4px 5px #0009;
  text-shadow:2px 2px 0 #000;
}
.welcome-page .enter-button:hover{background-color:#51535a;background-image:linear-gradient(#ffffff12,#ffffff12),url('assets/stone-texture.png');box-shadow:inset 0 0 7px 2px #0008,inset 1px 2px 2px #b2b3bb70,inset -1px -2px 3px #0009,0 0 0 1px #96979f,0 6px 7px #0009}
.welcome-page .welcome-header nav{color:#fff}
.welcome-page .welcome-header nav a,.welcome-page .contact-link{color:#fff;text-shadow:2px 2px #000}
.welcome-page .contact-link{font:inherit;line-height:inherit;background:none;border:0;padding:8px 0;cursor:pointer}
.welcome-page .contact-link:hover{text-decoration:underline;text-underline-offset:5px}
.welcome-page .welcome-footer{justify-content:flex-end;text-align:right}
@media(max-width:650px){
  .welcome-page .welcome-footer{justify-content:center;text-align:center;align-items:center}
}

.welcome-page .enter-button{position:relative;left:var(--nav-shift,0px);width:var(--nav-width,280px);min-width:0;max-width:none;min-height:0;height:63.65px;padding:0 12px}
@media(max-width:650px){.welcome-page .enter-button{height:55.1px}}
@media(max-height:700px) and (min-width:651px){.welcome-page .enter-button{height:53.2px}}
html,body,.welcome-page{background:#000;background-image:none}
.machine .case-brand,.welcome-machine .case-brand{
  font:italic 700 clamp(18px,2.2vw,28px)/1.15 Arial,sans-serif;
  letter-spacing:.3px;transform:none;padding:0;white-space:nowrap;
}
.machine>.case-bottom{padding:0 8px var(--bezel-lip)}
.welcome-page .enter-button:active,
html[data-crt-phase="off"] .welcome-page .enter-button{
  background-color:#41434a;background-image:linear-gradient(#00000066,#00000066),url('assets/stone-texture.png');color:#fff;text-shadow:2px 2px #000;
  border-color:#28292c;box-shadow:inset 0 2px 5px #0009,0 0 0 1px #777980;
}

.welcome-page .enter-button:hover,.welcome-page .enter-button:active{transform:none}

/* In-screen Notepad, under the persistent CRT glass. */
.welcome-stage:has(.contact-notepad[open])>.enter-button{display:none}
.contact-notepad{position:relative;inset:auto;margin:0;width:min(600px,100%);max-width:100%;padding:0;border:2px solid #0757ef;border-radius:3px 3px 0 0;background:#f2f1e9;color:#111;box-shadow:inset 1px 1px #afc9ff,0 3px 12px #0008;text-align:left;text-shadow:none;overflow:hidden}
.contact-notepad[open]{display:block}
.notepad-titlebar{display:flex;align-items:center;justify-content:space-between;height:25px;padding:2px 4px 2px 6px;background:linear-gradient(#65a7ff 0%,#1462e8 16%,#0053cf 65%,#003cac 100%);border-bottom:1px solid #163588;color:#fff;font:18px/1 var(--pixel);text-shadow:1px 1px #163588}
.notepad-close{display:grid;place-items:center;width:19px;height:19px;padding:0;border:1px solid #fff;border-radius:2px;background:linear-gradient(135deg,#eeb6a0,#d65635 60%,#af321e);box-shadow:inset 1px 1px #f8d1bd;color:#fff;font:bold 16px/1 Arial;cursor:pointer}
.notepad-close:hover{filter:brightness(1.15)}
.notepad-paper{min-height:220px;padding:20px;background:#f2f1e9;box-shadow:inset 1px 1px #c4c6c4,inset -1px -1px #b1b0a9}
@media(max-width:650px){.notepad-titlebar{height:21px;font-size:15px}.notepad-close{width:16px;height:16px;font-size:13px}.notepad-paper{min-height:160px;padding:12px}}.contact-notepad .contact-content{background:#c4c6c4;text-align:center;padding:24px 24px 30px;font-family:var(--pixel);text-shadow:none;color:#141414;max-height:55svh;overflow-y:auto}
.contact-content h2{font:400 36px/1.1 var(--pixel);letter-spacing:0;margin:0 0 20px;color:#101010;text-shadow:none!important}
.contact-content p{font:24px/1.25 var(--pixel);margin:0 auto 28px;max-width:520px}
.contact-socials{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.social-contact{display:flex;align-items:center;flex-direction:column;gap:12px;font:22px/1.2 var(--pixel);color:#171717;padding:6px 0}
.social-contact strong{font-weight:400}
.social-contact:hover .social-label{text-decoration-thickness:2px}
.social-contact:focus-visible{outline:2px dashed #064bc2;outline-offset:3px}
.social-icon{width:48px;height:48px;display:grid;place-items:center;color:white;border:2px solid #262626;border-radius:11px;box-shadow:inset 1px 1px #ffffff80,2px 2px #0003}
.social-icon svg{width:32px;height:32px}
.telegram-icon{background:#00acd8}
.instagram-icon{background:radial-gradient(circle at 25% 105%,#ffdb79 0%,#ff7842 30%,#dc2588 58%,#803ab9 85%)}
@media(max-width:650px){.contact-notepad .contact-content{padding:16px 12px 20px}.contact-content h2{font-size:28px;margin-bottom:14px}.contact-content p{font-size:19px;margin-bottom:20px}.contact-socials{gap:8px}.social-contact{font-size:17px;gap:9px}.social-icon{width:40px;height:40px}.social-icon svg{width:27px;height:27px}}

.contact-notepad:focus{outline:none}
.notepad-close:focus:not(:focus-visible){outline:none}
.notepad-close:focus-visible{outline:2px solid #fff;outline-offset:1px}

.notepad-titlebar #contact-title{color:#fff;text-shadow:0 0 1px #fff;font-weight:400}
.social-label{text-decoration:underline;text-underline-offset:3px}
.social-contact strong{text-decoration:none}
.crt-on .machine>.screen:has(.contact-notepad[open])::after{
  -webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#0008,#0008);
  -webkit-mask-size:100% 100%,var(--notepad-w,0px) var(--notepad-h,0px);
  -webkit-mask-position:0 0,var(--notepad-x,0px) var(--notepad-y,0px);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:xor;
  mask-image:linear-gradient(#000,#000),linear-gradient(#0008,#0008);
  mask-size:100% 100%,var(--notepad-w,0px) var(--notepad-h,0px);
  mask-position:0 0,var(--notepad-x,0px) var(--notepad-y,0px);
  mask-repeat:no-repeat;
  mask-composite:exclude;
}/* Shared centered welcome header on desktop and mobile. */
.welcome-page .welcome-header{grid-template-columns:1fr;justify-items:center;gap:15px}
.welcome-page .welcome-brand{grid-row:1}
.welcome-page .welcome-header nav{grid-row:2;justify-content:center;gap:40px}
.welcome-page:has(.contact-notepad[open]) .contact-link{text-decoration:underline;text-underline-offset:5px}
@media(min-width:651px){
  .welcome-page .welcome-header nav{position:absolute;left:38px;top:25px;grid-row:auto;gap:28px;justify-content:flex-start;transform:translateY(calc((clamp(190px,19vw,260px) * 726 / 2167 - 43.6px) / 2))}
  .welcome-page .enter-button{left:0;width:calc(var(--nav-width,200px) + 12px)}
}
@media(min-width:651px) and (max-width:950px){
  .welcome-page .welcome-header nav{left:25px;top:24px;gap:20px}
  .welcome-page .enter-button{width:calc(var(--nav-width,200px) + 20px)}
}
.contact-socials .social-icon{overflow:hidden;box-shadow:none}
.contact-socials .social-icon svg{display:block;width:32px;height:32px;flex:none}
.contact-socials .instagram-icon svg{transform:none}
.contact-socials .telegram-icon svg{transform:none}

.contact-socials .social-icon{padding:0;background-clip:border-box;background-origin:border-box}
@media(max-width:650px){.contact-socials .social-icon svg{width:27px;height:27px}}
@media(max-width:650px) and (orientation:portrait){
  .welcome-machine .welcome-screen>.screen-picture{grid-template-rows:auto minmax(0,1fr) auto}
  .welcome-page .welcome-stage{align-self:stretch;justify-content:center}
  .welcome-page .welcome-footer{padding-top:0}
}
/* Collection screen shares the welcome screen black glass. */
.collection-page .welcome-screen>.screen-picture{display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#000;min-height:0}
.collection-page .header{height:auto;min-height:100px;padding:20px 0;margin:0 38px;border-bottom:1px solid #ffffff80}
.collection-page .header nav{font:23px/1.2 var(--pixel);gap:28px;color:#fff}
.collection-page .header nav a,.collection-page .header nav button{font:inherit;color:#fff;background:none;border:0;padding:8px 0;text-shadow:2px 2px #000;white-space:nowrap}
.collection-page .header nav a:before{content:none}
.collection-page .header nav [aria-current]{text-decoration:underline;text-underline-offset:5px}
.collection-stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:20px}
.collection-page .welcome-footer{justify-content:flex-end;text-align:right;align-self:end}
@media(max-width:950px){.collection-page .header nav{font-size:21px;gap:20px}}
@media(max-width:650px){
 .collection-page .header{display:flex;flex-direction:column;gap:8px;padding:20px 0 18px;margin:0 16px;min-height:0}
 .collection-page .header nav{margin:0;display:flex;justify-content:center;gap:22px;font-size:22px;width:100%}
 .collection-page .collection-stage{padding:12px 16px}
 .collection-page .welcome-footer{justify-content:center;text-align:center;font-size:9px;letter-spacing:.5px;padding:12px 12px 22px}
}
/* Extend glass into the bezel; compensating padding keeps content stationary. */
.machine>.screen{margin-top:-12px;margin-bottom:-12px}
.machine>.screen>.screen-picture{padding-top:12px;padding-bottom:12px}
.monitor-recess{--slope-top:calc(var(--bezel-top) - var(--bezel-lip) + 8px);--slope-bottom:calc(var(--bezel-bottom) - var(--bezel-lip) + 8px)}
@media(max-width:650px){.monitor-recess{--slope-top:calc(var(--bezel-top) - 18px + 4px);--slope-bottom:calc(var(--bezel-bottom) - 17px + 4px)}}



.collection-page .header nav{gap:40px}
@media(max-width:650px){.collection-page .header nav{gap:clamp(24px,7.5vw,34px)}}
@media(max-width:650px){
 .collection-page .header nav{display:flex;justify-content:center;align-items:center}
 .collection-page .header nav>[data-open-faq]{justify-self:start}
 .collection-page .header nav>a[aria-current="page"]{justify-self:end}
 .collection-page .header nav>[data-open-contact]{justify-self:center}
}

/* Four independent splash backdrops; artwork sits in the layer above each. */
.collection-page .collection-stage{position:relative;overflow-y:auto;overflow-x:hidden;align-items:flex-start;scrollbar-width:thin;scrollbar-color:#53612e transparent}
.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,36px);width:min(100%,760px);margin:0 auto;align-self:flex-start;padding:8px 0 24px}
.app-slot{position:relative;isolation:isolate;aspect-ratio:1;min-width:0}
.app-splash{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;animation:slime-pulse 1.9s ease-in-out infinite;will-change:filter}
.app-artwork{position:absolute;inset:16%;z-index:1;display:grid;place-items:center}
@keyframes slime-pulse{0%,100%{filter:brightness(.78) saturate(1.15)}50%{filter:brightness(1.34) saturate(.85)}}
.collection-stage:has(dialog[open]){align-items:center}
.collection-stage:has(dialog[open]) .app-grid{display:none}
@media(max-width:650px){.app-grid{gap:22px 10px;padding:14px 0 24px;width:100%}}
@media(prefers-reduced-motion:reduce){.app-splash{animation:none;filter:none}}
/* Desktop collection header: centered wordmark, left-aligned navigation. */
@media(min-width:651px){
 .collection-page .header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
 .collection-page .header>.brand{grid-column:2;grid-row:1;justify-self:center}
 .collection-page .header>nav{grid-column:1;grid-row:1;justify-self:start;justify-content:flex-start;margin:0;width:auto;gap:28px}
}
@media(min-width:651px) and (max-width:1100px){
 .collection-page .header{display:flex;flex-direction:column;gap:8px;padding:20px 0 18px;margin:0 16px;min-height:0}
 .collection-page .header>nav{display:flex;justify-content:center;align-items:center;width:100%;margin:0;gap:34px;font-size:22px}
 .collection-page .welcome-footer{justify-content:center;text-align:center;align-items:center}
}
@media(min-width:1101px){
 .collection-page .app-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,960px);gap:16px}
}
@media(min-width:651px) and (max-width:1100px){
 .collection-page:not(.app-detail-page) .app-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,420px);column-gap:10px;padding-top:14px}
 .collection-page .app-title{font-size:20px}
}

.app-splash{image-rendering:pixelated;animation-name:red-splat-pulse}
@keyframes red-splat-pulse{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.06)}}

/* The 3D render loop drives brightness from the face angle; the SVG wave stays independent. */
.app-splash{animation:none;filter:brightness(var(--splat-brightness,1.28)) saturate(var(--splat-saturation,.88));will-change:filter}
@media(prefers-reduced-motion:reduce){.app-splash{animation:none;filter:none;will-change:auto}}
.collection-page .app-splash{inset:10%;width:80%;height:80%}
.collection-page .header{border-bottom-color:transparent}

.app-logo-3d{inset:12%;pointer-events:none;transform:scale(.95);transform-origin:center}
.app-logo-3d canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
.app-logo-fallback{position:absolute;width:72%;height:72%;inset:14%;object-fit:contain}
.app-logo-3d[data-ready] .app-logo-fallback{visibility:hidden}
.app-card{position:absolute;inset:0;display:block;color:inherit;cursor:pointer}
.app-card:focus-visible{outline:2px solid #ffff00;outline-offset:5px;border-radius:12px}
.collection-page .app-detail-grid{grid-template-columns:minmax(0,1fr);width:min(100%,260px);margin-inline:auto}
.app-detail-content{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,680px);flex:none;padding-bottom:16px}
.app-detail-content>.app-detail-grid{flex:none;padding-bottom:24px}
.collection-stage:has(dialog[open]) .app-detail-content{display:none}
.app-notepad{width:min(600px,100%);flex:none;position:relative;margin:0;padding:0;overflow:hidden;border:2px solid #0757ef;border-radius:3px 3px 0 0;background:#000;box-shadow:0 3px 12px #0008}
.app-notepad .notepad-titlebar>span:first-child{color:#fff;text-shadow:0 0 1px #fff}
.app-notepad .notepad-close{cursor:default}
.compatibility-notepad{grid-column:2;border:1px solid #0000a8;border-radius:0;background:#c4c6c4}
.compatibility-notepad .notepad-titlebar{height:19px;padding:1px 3px;background:linear-gradient(#65a7ff 0%,#1462e8 16%,#0053cf 65%,#003cac 100%);border-bottom:1px solid #163588;font:16px/1 var(--pixel)}
.compatibility-notepad .notepad-close{width:15px;height:15px;border-radius:0;font-size:12px}
.compatibility-paper{padding:34px 8.5%;background:#c4c6c4;color:#111;text-shadow:none;font:20px/1.25 var(--pixel)}
.compatibility-table{width:100%;table-layout:fixed;border-collapse:collapse;text-align:center}
.compatibility-table th,.compatibility-table td{width:50%;border:1px solid #111;padding:7px 8px;overflow-wrap:anywhere}
.compatibility-table th{font-family:AppRuneScape,serif;font-weight:700;background:#e6e6e2}
.compatibility-table th[colspan="2"]{background:transparent}
.compatibility-table td{height:34px}
@media(max-width:650px){.compatibility-paper{padding:26px 8.5%;font-size:18px}.compatibility-table th,.compatibility-table td{padding:7px 5px}}
.app-notepad-paper{height:620px;position:relative;isolation:isolate;background:#000;overflow:hidden}
.app-panel-title{position:relative;z-index:1;margin:0;padding:24px 26px;font:700 36px/1.3 AppRuneScape,serif;color:#ffff00;text-align:left;letter-spacing:0;text-shadow:1px 1px #000!important;animation:none}
@media(max-width:650px){.app-panel-title{padding:22px 20px;font-size:32px}}
.app-fire{display:block;position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
@media(min-width:1101px){
 .app-detail-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start;gap:clamp(28px,4vw,64px);width:min(100%,1080px);padding-top:12px}
 .app-detail-content>.app-detail-grid{width:min(100%,400px);padding:0;margin:0 auto}
 .app-detail-content>.app-notepad{width:100%;min-width:0}
}
@font-face{font-family:AppRuneScape;src:url('assets/runescape-bold-12.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
.app-title{position:absolute;top:calc(100% - 18px);left:0;width:100%;margin:0;text-align:center;font:700 24px/1.2 AppRuneScape,serif;color:#ffff00;text-shadow:1px 1px #000;white-space:nowrap;animation:none;transform:none}
.collection-page .app-grid{row-gap:48px;padding-bottom:36px}
@media(max-width:650px){.app-title{font-size:20px}.collection-page .app-grid{row-gap:40px}}

/* FAQ shares the Contact window, with a scrollable page on shorter screens. */
.faq-notepad{max-height:100%}
.faq-notepad[open]{display:flex;flex-direction:column}
.faq-notepad .notepad-titlebar{flex-shrink:0}
.faq-notepad .notepad-titlebar>span{color:#fff;text-shadow:0 0 1px #fff;font-weight:400}
.faq-notepad .faq-content{min-height:0;max-height:55svh;padding:24px 24px 30px;overflow-y:auto;overscroll-behavior:contain;background:#c4c6c4;color:#141414;font:24px/1.25 var(--pixel);text-shadow:none}
.faq-content h2{margin:0 0 20px;text-align:center;font:400 36px/1.1 var(--pixel);letter-spacing:0;color:#101010;text-shadow:none!important}
.faq-content section{max-width:520px;margin-inline:auto}
.faq-content section+section{margin-top:28px}
.faq-content h3{display:block;margin:0 0 4px;font:inherit;color:inherit;text-shadow:none!important}
.faq-question-marker{display:inline-block;position:relative;width:.72em;height:1.12em;margin-right:6px;vertical-align:.05em;font:700 .8em/1 Arial,sans-serif;color:#f22}
.faq-question-marker canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.faq-question-fallback{display:block;text-align:center}
.faq-question-marker[data-ready] .faq-question-fallback{visibility:hidden}
.faq-question-divider{margin-right:6px}
.faq-question-text{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.faq-content p{margin:0;font:inherit;color:inherit}
.faq-content .faq-social-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.faq-content .faq-social-link:focus-visible{outline:2px dashed #064bc2;outline-offset:3px}
.contact-content>p{margin:28px auto 0}
@media(max-width:650px){.contact-content>p{margin:20px auto 0}}
@media(max-width:650px){
 .faq-notepad .faq-content{padding:16px 12px 20px;font-size:19px}
 .faq-content h2{font-size:28px;margin-bottom:14px}
 .faq-content section+section{margin-top:20px}
}

.app-purchase-options{position:relative;z-index:1;padding:0 26px;color:#fff;font-family:var(--pixel);text-align:left;text-shadow:none!important}
.app-price{margin:0 0 22px;font:23px/1.2 var(--pixel);color:#fff}
.app-duration{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0;min-width:0}
.app-duration legend{padding:0;margin-bottom:10px;font:18px/1.2 var(--pixel);color:#fff}
.app-duration label{position:relative;cursor:pointer}
.app-duration input{position:absolute;opacity:0;width:1px;height:1px}
.app-duration span{display:block;min-width:76px;padding:9px 10px;border:1px solid #8b8b8b;background:#080808;color:#fff;text-align:center;font:18px/1.2 var(--pixel);text-shadow:none!important}
.app-duration input:checked+span{background:#eee;color:#111;border-color:#fff}
.app-duration input:focus-visible+span{outline:2px solid #ffff00;outline-offset:3px}
@media(max-width:650px){.app-purchase-options{padding:0 20px}.app-duration{gap:6px}.app-duration span{min-width:0;padding:9px 8px}}

.app-features{margin-top:28px;color:#fff;text-shadow:none!important}
.app-features h2{margin:0 0 14px;color:#ffff00;font:700 26px/1.2 AppRuneScape,serif;text-shadow:1px 1px #000!important}
.app-features ul{margin:0;padding-left:18px;font:19px/1.35 var(--pixel)}
.app-features li{margin-bottom:8px;padding-left:3px}
.app-features li::marker{color:#ffff00}
.app-notepad-paper:has(.app-features){height:auto;min-height:780px;padding-bottom:190px}
.app-notepad-paper:has(.app-features) .app-fire{top:auto;bottom:0;height:620px}
@media(max-width:650px){.app-features h2{font-size:24px}.app-features ul{font-size:18px}}

.app-detail-page .welcome-screen>.screen-picture{overflow-y:auto;overflow-x:hidden;grid-template-rows:auto auto auto;align-content:start;scrollbar-width:thin;scrollbar-color:#53612e transparent}
.app-detail-page .collection-stage{overflow:visible;min-height:0}
.app-detail-page .welcome-footer{margin-top:24px}

.app-detail-page .welcome-screen>.screen-picture{display:flex;flex-direction:column}
.app-detail-page .screen-picture>.header,.app-detail-page .screen-picture>.collection-stage,.app-detail-page .screen-picture>.welcome-footer{flex:0 0 auto}
.app-detail-page .screen-picture>.welcome-footer{width:100%;margin-top:auto;padding-top:24px}

.app-detail-page .welcome-screen>.screen-picture:has(dialog[open]){display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-content:normal;overflow:hidden}
.app-detail-page .screen-picture:has(dialog[open])>.collection-stage{overflow-y:auto;overflow-x:hidden;min-height:0;align-items:center}
.app-detail-page .screen-picture:has(dialog[open])>.welcome-footer{margin-top:0;padding-top:20px}
@media(max-width:650px){.app-detail-page .screen-picture:has(dialog[open])>.welcome-footer{padding-top:12px}}

.app-purchase-button{display:block;width:100%;min-height:46px;margin:18px 0 0;padding:10px 16px;border:1px solid #aaa;border-top-color:#fff;border-left-color:#fff;border-radius:0;background:#eee;color:#111;font:23px/1.2 var(--pixel);text-align:center;text-shadow:none!important;box-shadow:inset 1px 1px #fff,inset -1px -1px #999;cursor:pointer}
.app-purchase-button:hover{background:#fff}
.app-purchase-button:active{box-shadow:inset 1px 1px #777,inset -1px -1px #fff}
.app-purchase-button:focus-visible{outline:2px solid #ffff00;outline-offset:3px}

.app-purchase-button{transition:transform 80ms ease,background-color 80ms ease,box-shadow 80ms ease;box-shadow:0 3px 0 #777,inset 1px 1px #fff,inset -1px -1px #aaa}
.app-purchase-button:active,.app-purchase-button.is-pressed{transform:translateY(3px);background:#ccc;box-shadow:0 0 0 #777,inset 2px 2px #888,inset -1px -1px #fff}

/* Waving velvet base shares the rotating icon’s lighting phase. */
.app-detail-page .app-detail-grid .app-slot{margin-bottom:21%}
.app-presentation-cushion{position:absolute;z-index:1;top:78%;left:2%;display:block;width:96%;height:auto;image-rendering:pixelated;pointer-events:none;filter:brightness(var(--splat-brightness,1.28)) saturate(var(--splat-saturation,.88));will-change:filter}
.app-detail-page .app-logo-3d{z-index:3}

.app-detail-page .app-splash{display:none}
@media(prefers-reduced-motion:reduce){.app-presentation-cushion{filter:none;will-change:auto}}

.app-cushion-shadow{fill:#100000;fill-opacity:.62;mix-blend-mode:multiply;pointer-events:none}
@media(prefers-reduced-motion:reduce){.cushion-surface{filter:none!important}}

/* Collection cards show only rotating artwork and its label. */
.app-collection-grid .app-slot{margin-bottom:0}
.app-collection-grid .app-logo-3d{z-index:3}
.app-collection-grid .app-title{top:calc(100% - 18px)}

/* Collection scrolls as one screen; dialogs retain their original centered layout. */
.collection-page:not(.app-detail-page) .screen-picture:not(:has(dialog[open])){display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#53612e transparent}
.collection-page:not(.app-detail-page) .screen-picture:not(:has(dialog[open]))>.header,
.collection-page:not(.app-detail-page) .screen-picture:not(:has(dialog[open]))>.collection-stage,
.collection-page:not(.app-detail-page) .screen-picture:not(:has(dialog[open]))>.welcome-footer{flex:0 0 auto}
.collection-page:not(.app-detail-page) .screen-picture:not(:has(dialog[open]))>.collection-stage{overflow:visible}
.collection-page:not(.app-detail-page) .screen-picture:not(:has(dialog[open]))>.welcome-footer{width:100%;margin-top:auto}
.collection-page:not(.app-detail-page) .header{position:relative;z-index:2}
@media(max-width:650px){
 .collection-page:not(.app-detail-page) .collection-stage:not(:has(dialog[open])){padding-top:0;padding-bottom:0}
 .collection-page .app-collection-grid{padding-top:0;padding-bottom:12px;margin-top:0;row-gap:28px}
}

/* Keep the wallpaper and artwork in the same native scrolling surface. */
.app-detail-page .welcome-screen>.screen-picture,
.app-detail-page .welcome-screen>.screen-picture:has(dialog[open]){
 display:block;padding:0;overscroll-behavior: none;scroll-behavior:auto;
 background:#000;touch-action:pan-y pinch-zoom;
}
.app-scroll-content{
 display:flex;flex-direction:column;position:relative;
 width:100%;min-height:100%;padding:12px 0;
}
.app-scroll-content>.header,.app-scroll-content>.collection-stage,.app-scroll-content>.welcome-footer{flex:0 0 auto}
.app-scroll-content>.welcome-footer{width:100%;margin-top:auto;padding-top:24px}
.app-scroll-content:not(:has(dialog[open])),
.collection-page:not(.app-detail-page) .screen-picture:not(:has(dialog[open])){
 background:#232943 url('assets/app-stone-wall-seamless.png') center top / 768px auto repeat;
 image-rendering:pixelated;
}
.collection-page:not(.app-detail-page) .screen-picture:not(:has(dialog[open])){background-attachment:local}
.app-scroll-content:has(dialog[open]){
 display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;
}
.app-scroll-content:has(dialog[open])>.collection-stage{overflow-y:auto;overflow-x:hidden;min-height:0;align-items:center}
.app-scroll-content:has(dialog[open])>.welcome-footer{margin-top:0;padding-top:20px}
@media(max-width:650px){
 .app-scroll-content:not(:has(dialog[open])),
 .collection-page:not(.app-detail-page) .screen-picture:not(:has(dialog[open])){background-image:url('assets/app-stone-wall.png');background-size:512px auto}
 .app-scroll-content:has(dialog[open])>.welcome-footer{padding-top:12px}
}

/* Fit the complete portal/Christmas scene inside the CRT so neither tray is cropped. */
.welcome-page .welcome-screen>.screen-picture:not(:has(dialog[open])){
 background:#151018;
}
/* Render the same responsive image used by the loading/animation checks. */
.welcome-page .screen-picture>.entrance-preload{position:absolute;inset:0;display:block;z-index:0;pointer-events:none}
.welcome-page .entrance-preload>img{display:block;width:100%;height:100%;object-fit:fill}
.welcome-page .entrance-preload[data-scene="halloween"]>img{object-fit:cover;object-position:center}
.welcome-page .screen-picture:has(dialog[open])>.entrance-preload{display:none}

.welcome-torches{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.welcome-torches canvas{position:absolute;display:block}
.welcome-page .screen-picture:has(dialog[open])>.welcome-torches{display:none}
.welcome-weather{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
.welcome-page .screen-picture:has(dialog[open])>.welcome-weather{display:none}
.welcome-ground-smoke{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;visibility:hidden}
.welcome-page .screen-picture:has(dialog[open])>.welcome-ground-smoke{display:none}
@media(prefers-reduced-motion:reduce){.welcome-ground-smoke{display:none}}

.compatibility-warning{margin:22px -4% 0;text-align:center;font:18px/1.3 var(--pixel);color:#111;text-shadow:none;overflow-wrap:break-word}.compatibility-warning img{display:inline-block;width:22px;height:22px;vertical-align:-5px;margin-right:5px;image-rendering:auto}.compatibility-warning strong{font-weight:700}
.warning-logo-3d{display:inline-block;position:relative;width:26px;height:26px;vertical-align:-6px;margin-right:5px}.warning-logo-3d canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.compatibility-warning .warning-logo-3d img{width:26px;height:26px;margin:0;vertical-align:0}.warning-logo-3d[data-ready] img{visibility:hidden}

/* App artwork gallery: additional images belong inside .gallery-slides. */
.app-gallery{position:relative;width:100%;touch-action:pan-y;outline:none}
.gallery-slides{width:100%;display:flow-root}
.gallery-slides>[hidden]{display:none!important}
.gallery-slides>img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.gallery-arrow{position:absolute;top:41%;z-index:5;width:44px;height:48px;padding:5px;border:0;background:transparent;cursor:pointer;filter:none}
.gallery-arrow--previous{left:-30px}.gallery-arrow--next{right:-30px}
.gallery-arrow svg{display:block;width:100%;height:100%;fill:none;stroke:#ffff00;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.gallery-arrow:active svg{stroke:#fff69b}.gallery-arrow:active{transform:translateY(2px)}
.gallery-arrow:focus-visible,.app-gallery:focus-visible{outline:2px solid #ffff00;outline-offset:3px}
.gallery-arrow[aria-disabled="true"]{cursor:default}
.gallery-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:650px){.app-detail-page .app-detail-grid{max-width:calc(100% - 64px)}}

/* The phone occupies the same gallery area as the icon and its cushion. */
.phone-slide{position:relative;width:100%;aspect-ratio:1 / 1.21}
.phone-slide canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.phone-unavailable{display:none}
.phone-slide[data-failed] .phone-unavailable{display:block;padding:40% 12px;text-align:center;color:#fff;font:18px/1.3 var(--pixel)}

.phone-pair-caption{position:absolute;top:calc(100% + 24px);transform:translateY(-50%);left:0;width:100%;margin:0;text-align:center;color:#ffff00;font:700 24px/1.2 AppRuneScape,serif;text-shadow:1px 1px #000;pointer-events:none}
@media(max-width:650px){.phone-pair-caption{font-size:20px}}

.caption-wave-word{display:inline-block;white-space:nowrap}
.caption-wave-letter{display:inline-block;animation:caption-runescape-wave 1.4s ease-in-out infinite}
@keyframes caption-runescape-wave{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
@media(prefers-reduced-motion:reduce){.caption-wave-letter{animation:none;transform:none}}

.gallery-thumbnails{display:none}
@media(min-width:1101px){
 .gallery-thumbnails{margin-top:8px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%}
 .gallery-thumbnail{display:block;position:relative;width:100%;aspect-ratio:5 / 7;padding:2px;border:1px solid transparent;background:transparent;border-radius:0;cursor:pointer;overflow:visible}
 .gallery-thumbnail[aria-pressed="true"] .phone-thumbnail,.gallery-thumbnail[aria-pressed="true"] .thumbnail-logo{filter:drop-shadow(0 7px 6px #000b) drop-shadow(0 0 3px #ffff0080)}
 .gallery-thumbnail:focus-visible{outline:2px solid #ffff00;outline-offset:3px}
 .phone-thumbnail,.thumbnail-logo{filter:drop-shadow(0 7px 6px #000b)}
 .phone-thumbnail{display:block;width:100%;height:100%;transform:scale(1.15);transform-origin:center}
 .phone-thumbnail img{display:block;width:100%;height:100%;object-fit:contain}
 .thumbnail-logo-slot{display:block;width:100%;height:100%;aspect-ratio:auto;margin:0!important}
 .thumbnail-logo{position:absolute;inset:0;display:block;transform:none}
 .thumbnail-logo canvas{position:absolute;inset:0;width:100%;height:100%}
}

@media(min-width:1101px){
 .app-detail-content:has(.gallery-thumbnails)>.app-notepad:not(.compatibility-notepad){grid-column:2;grid-row:1 / span 2}
 .app-detail-content:has(.gallery-thumbnails)>.compatibility-notepad{grid-column:1;grid-row:2;width:min(100%,400px);justify-self:center;margin-top:-110px}
}

@media(min-width:1101px){
 .app-detail-content:has(.gallery-thumbnails){row-gap:4px}
}

@media(min-width:1101px){
 .app-detail-content:has(.gallery-thumbnails):not(:has([data-app-logo="cashapp"]))>.compatibility-notepad{margin-top:12px}
}

@media(min-width:1101px){
 .app-detail-grid:has([data-app-logo="wallet"])>.gallery-thumbnails,.app-detail-grid:has([data-app-logo="chime"])>.gallery-thumbnails{margin-top:32px}
}

/* FAQ and Contact share the sea-teal screen on every viewport. */
.collection-page:is(.faq-page,.contact-page) .welcome-screen>.screen-picture,
.collection-page:is(.faq-page,.contact-page) .welcome-screen>.screen-picture:not(:has(dialog[open])){
 background:radial-gradient(ellipse at 48% 32%,#008d91 0%,#007d83 60%,#006a74 100%);
 background-attachment:local;scrollbar-color:#75c6c7 #006a74;
}
.faq-page .faq-stage{display:block;width:100%;padding:24px 24px 40px!important}
.faq-page .faq-content{width:100%;max-width:680px;margin:0 auto;color:#f2f6e8;font:24px/1.3 var(--pixel);overflow-wrap:anywhere}
.faq-page .faq-content h2{color:#ffe85c;font-size:36px;margin-bottom:28px}
.faq-page .faq-content section{max-width:none}
.faq-page .faq-content h3{color:#ffe85c}
.faq-page .faq-stage:has(dialog[open])>.faq-content{display:none}
.faq-page .faq-content a:focus-visible{outline:2px dashed #fff;outline-offset:3px}
@media(max-width:650px){
 .faq-page .faq-stage{padding:16px 18px 28px!important}
 .faq-page .faq-content{font-size:20px;line-height:1.3}
 .faq-page .faq-content h2{font-size:30px;margin-bottom:22px}
}

/* Beveled FAQ accordion, matching the supplied closed and open panels. */
.faq-page .faq-accordion{max-width:750px;padding:10px;background:#d5d5cd;color:#101010;border:2px solid;border-color:#fff #555 #555 #fff;box-shadow:2px 3px 0 #003d43;font:20px/1.2 var(--pixel);text-shadow:none}
.faq-page .faq-accordion h2{display:flex;align-items:center;justify-content:center;min-height:120px;padding:20px 12px;margin:0 0 4px;background:linear-gradient(#008ad7,#0063c3 48%,#00338a);border:2px solid;border-color:#eee #333 #111 #eee;color:white;font:700 36px/1.1 AppRuneScape,serif;text-shadow:2px 2px #101010!important}
.faq-item{border:2px solid;border-color:#fff #777 #777 #fff;background:#e4e4de}
.faq-item+.faq-item{margin-top:3px}
.faq-item summary{display:flex;align-items:center;gap:10px;padding:7px 10px;min-height:36px;cursor:pointer;list-style:none;font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary>svg{width:22px;height:22px;flex:0 0 22px}
.faq-item summary>span:not(.faq-toggle){flex:1;min-width:0}
.faq-toggle{flex:0 0 14px;font:12px/1 Arial,sans-serif;text-align:center;transition:transform .15s}
.faq-item[open] .faq-toggle{transform:rotate(90deg)}
.faq-item summary:focus-visible{outline:2px dotted #111;outline-offset:-5px}
.faq-item summary{background:transparent}
.faq-item[open]>summary{background:#f2f2eb}
.faq-answer{padding:13px 12px 19px;border-top:2px solid;border-color:#92928a;box-shadow:inset 0 1px #fff;font-weight:400}
.faq-page .faq-accordion .faq-answer p{color:#101010}
.faq-page .faq-accordion a:focus-visible{outline-color:#00338a}
@media(max-width:650px){
 .faq-page .faq-stage{padding:14px 10px 26px!important}
 .faq-page .faq-accordion{padding:6px;font-size:19px}
 .faq-page .faq-accordion h2{min-height:95px;font-size:30px;margin-bottom:4px}
 .faq-item summary{padding:9px 7px;gap:7px;min-height:44px}
 .faq-item summary>svg{width:19px;height:19px;flex-basis:19px}
 .faq-answer{padding:12px 10px 17px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){.faq-toggle{transition:none}}

/* Isolate FAQ rows from the legacy readme summary colors and rotation. */
.faq-page .faq-item summary,
.faq-page .faq-item summary>span,
.faq-page .faq-item summary>svg,
.faq-page .faq-item .faq-answer,
.faq-page .faq-item .faq-answer :is(p,a){color:#000;text-shadow:none}
.faq-page .faq-item summary{font-size:inherit;line-height:1.2}
.faq-page .faq-item summary>span:not(.faq-toggle){font-size:inherit;line-height:inherit;transform:none}
.faq-page .faq-item[open] summary>span:not(.faq-toggle){transform:none}
.faq-page .faq-item summary>.faq-toggle{color:#000;font-size:12px;line-height:1}

/* Vector triangles cannot be substituted with mobile emoji glyphs. */
.faq-page .faq-item summary>.faq-toggle{display:block;width:14px;height:14px;flex:0 0 14px;transform:none;transform-origin:center}
.faq-page .faq-item summary>.faq-toggle svg{display:block;width:14px;height:14px}
.faq-page .faq-item[open] summary>.faq-toggle{transform:rotate(90deg)}

/* Approved bazaar artwork; frame out the source's purple top/bottom margins. */
.faq-page .faq-accordion h2{
 background:#521383 url('assets/faq-bazaar-sunset.png') center center / 100% 153.5% no-repeat;
 text-shadow:2px 2px #101010,0 0 5px #000!important;
}
@media(max-width:650px){
 .faq-page .faq-accordion h2{background-size:auto 153.5%;background-position:left center}
}

/* Centered Contact destination with the existing animated black/fire panel. */
.collection-page.contact-page .screen-picture>.contact-stage{display:flex;justify-content:center;align-items:center;flex:1 0 auto!important;width:100%;padding:28px 24px 40px}
.contact-page .contact-card{display:block;margin:0 auto;width:min(600px,100%);text-align:center}
.contact-page .contact-card .contact-content{position:relative;isolation:isolate;background:#000;color:#fff;max-height:none;overflow:hidden;min-height:430px;padding:36px 28px 150px}
.contact-page .contact-copy{position:relative;z-index:1}
.contact-page .contact-content h2{color:#ffff00;font-size:36px}
.contact-page .social-contact{color:#fff}
.contact-page .contact-content p{margin:28px auto 0;color:#fff}
.contact-page .notepad-close{display:flex;align-items:center;justify-content:center}
.contact-page .social-contact:focus-visible{outline-color:#ffff00}
@media(max-width:650px){
 .collection-page.contact-page .screen-picture>.contact-stage{padding:20px 14px 28px;padding-bottom:20px!important}
 .contact-page .contact-card .contact-content{padding:26px 14px 45px;min-height:370px}
 .contact-page .contact-content h2{font-size:30px}
 .contact-page .social-contact{font-size:19px}
}

/* Remove the gray inset edge from the Contact panel's black paper. */
.contact-page .contact-card .contact-content{box-shadow:none}
.contact-page .contact-card{box-shadow:0 3px 12px #0008}

/* Contact logos use the same solid tiles and rotation as the app showcase. */
.contact-page .contact-socials .social-icon[data-app-logo]{position:relative;width:100px;height:100px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.contact-page .social-icon[data-app-logo] canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.contact-page .social-icon[data-app-logo][data-ready]>svg{visibility:hidden}
@media(max-width:650px){.contact-page .contact-socials .social-icon[data-app-logo]{width:100px;height:100px}}

.contact-page .contact-socials{margin-top:20px}

.contact-page .contact-copy :is(h2,p,.social-contact,.social-contact strong){font-family:AppRuneScape,serif;font-weight:700}

@media(max-width:650px){.contact-page .contact-card{transform:translateY(24px)}}

/* A little breathing room below all four app galleries' mobile captions. */
@media(max-width:650px){
 .app-detail-content:has([data-app-logo])>.app-notepad:not(.compatibility-notepad){margin-top:8px}
}

/* Match the Collection navigation typeface in the establishment footer. */
.welcome-footer>span{font-family:var(--pixel)}

/* Match the navigation color and center the footer on every screen size. */
.welcome-page .welcome-footer,.collection-page .welcome-footer{justify-content:center;text-align:center;color:#fff}

.app-notepad .notepad-close[data-x-sound]{cursor:pointer}