/* ================= FONTS ================= */
@font-face {
font-family: 'Rodin';
src: url("fonts/Rodin.woff2") format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DSBios';
src: url("fonts/DSBios.ttf") format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root{
--screen-bg:#f4f4f4;
--grid-line: rgba(0,0,0,0.035);
--bar-bg:#e9e9e9;
--text-dark:#2a2a2a;
--card-bg:#ffffff;
--card-shadow: rgba(0,0,0,0.18);
--pink: #ff2f92;
--pink-glow: rgba(255,47,146,0.35);
--preview-border:#ffffff;
--preview-fill:#a9a9a9;
--project-color: #ff2f92;
}
/* ================= RESET ================= */
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
width:100%;
/* height:100dvh (where supported) is the ACTUAL currently-visible
viewport height on mobile Safari/Chrome, which shrinks when the
browser's own toolbar is showing — height:100vh assumes that
toolbar is fully collapsed and is taller than what's really
visible, pushing bottom-anchored content (the menu scrollbar, the
viewer's back button) below the fold with no way to scroll to it
(overflow:hidden below). This has to be a `height` override, not
`min-height` — min-height can only grow something taller, never
shrink a height that's already set larger by the line above. */
height:100vh; height:100dvh;
font-family:'DSBios','Trebuchet MS','Helvetica Neue', Arial, sans-serif;
background:#000;
overflow:hidden;
-webkit-tap-highlight-color:transparent;
}
/* Stop the browser's native "pick up and drag this image" behavior
from hijacking pointer events meant for the custom carousel drag. */
img{
-webkit-user-drag:none;
user-drag:none;
-webkit-touch-callout:none;
user-select:none;
}
/* ================= SCREEN SHELL ================= */
#screen{
position:relative;
width:100%; height:100vh; height:100dvh; /* see the html,body rule above for why this must be `height`, not `min-height` */
background:
repeating-linear-gradient(0deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 6px),
var(--screen-bg);
display:flex; flex-direction:column;
overflow:hidden;
}
/* The menu page reserves room for the scrollbar (now much thinner via
SB_VSCALE) plus a small margin, since #scrollbar is position:absolute
and no longer takes up space in this flex column. */
body.page-menu #screen{
padding-bottom: 16px;
}
/* Continues the menu's launch transition on the viewer page: the menu
fades the screen to white as the project card flies off, so this page
picks up from white and fades the reveal in, rather than appearing
instantly. */
#entry-white-overlay{
position:fixed; inset:0;
background:#fff;
opacity:1;
pointer-events:none;
z-index:999;
transition: opacity .5s ease;
display:flex; align-items:center; justify-content:center;
}
/* ================= STARTUP BOOT LOGO (menu page only — see
playStartupLogo() in menu.js) =================
Plays inside #entry-white-overlay, on top of its solid white, before
the normal card drop-in starts. All positioning below is in %, derived
directly from the source art's real pixel layout (title canvas
1086x129; the O-shaped gap sits at columns 591-797; RAHMONE O.png is
185x129 filling that gap exactly; FLYING SECOND O.png is 159x129,
centered within that same gap) — so it stays correct at any render
size without needing per-breakpoint tuning. */
#startup-logo{
position:relative;
width:min(70vw, 620px);
aspect-ratio: 1086 / 129;
opacity:1;
transition: opacity .45s ease;
}
#startup-text{
position:absolute; inset:0;
width:100%; height:100%;
opacity:0;
transition: opacity .55s ease;
}
/* The primary "O" — flies DOWN from above into its resting spot (the
actual letter-O slot, unchanged). Checked against reference.mp4: the
two squares do NOT end up concentric/nested on the same center point —
the lighter square rests clearly offset down-and-right from the bold
one, overlapping only at one corner, not hidden behind it. */
#startup-o{
position:absolute; top:0; height:100%;
left:54.42%; width:17.03%;
opacity:0;
transform:translateY(-140%);
transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
/* The lighter "second screen" O — flies UP from below into its OWN
resting spot, a clear gap below the primary O, not touching it.
Measured directly off "Website Intro Logo ALTOGETHER.png" (the actual
target composition): the square sits 10px below the O's bottom edge
and dead-centered under it, both at the O's own 129px native scale —
108% down (100% clears the O's own height, +~8% for the gap) and 0%
sideways, not the overlapping offset the video alone suggested.
Horizontal left nudged from 55.62% to 56.77%: RAHMONE O.png carries a
soft motion-blur fringe on its left edge (baked in for its fly-in),
so its full alpha bbox reads center-symmetric but the solid/visible
O shape actually sits ~1.15% of the container further right — this
square (which has no such fringe, symmetric in its own canvas) needs
to sit under that true visual center, not the fringe-skewed bbox center. */
#startup-o-flying{
position:absolute; top:0; height:100%;
left:56.77%; width:14.64%;
opacity:0;
transform:translate(0, 230%);
transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
#startup-logo.startup-in #startup-text{
opacity:1;
}
#startup-logo.startup-in #startup-o{
opacity:1;
transform:translateY(0);
}
#startup-logo.startup-in #startup-o-flying{
opacity:1;
transform:translate(0, 108%);
}
#startup-ripples{
position:absolute; inset:0;
pointer-events:none;
}
/* Spawned/removed from JS: one big ripple behind each O as they land,
followed by six smaller ones (three per O, see playStartupLogo() for the
exact directions/timing). Each ripple's own animation-duration is set
per-instance in JS (--ripple-op/--ripple-scale too), since the big and
mini ripples run at different speeds/sizes.
Opacity and motion are deliberately TWO separate animations sharing the
same duration, not one keyframe set doing both: opacity needs its own
thin -> heavy -> thin hump (its own eased segments), while the
scale/translate needs one continuous, un-interrupted easing the whole
way through. Driving both from a single multi-stop keyframe made the
motion visibly pause at the stop shared with the opacity hump — ease-out
decelerating into it and ease-in accelerating back out of it stack into
a dead moment right at the opacity peak. Splitting them out means the
square keeps flying outward smoothly no matter what opacity is doing. */
.startup-ripple{
position:absolute; top:0; height:100%;
opacity:0;
transform:scale(.85) translate(0, 0);
animation:
startup-ripple-opacity 1.3s ease-in-out forwards,
startup-ripple-move 1.3s ease-out forwards;
}
/* Echoes from the primary (top) O — centered on its own resting slot in
the word (same 62.935% center as #startup-o), but sized to FLYING
SECOND O.png's own aspect ratio (width:14.64%, not 17.03%) — every
ripple, top or bottom, renders that same asset (see ASSET_STARTUP_O_
FLYING in menu.js), so using #startup-o's wider box here (sized for a
*different* image, RAHMONE O.png) stretched it into a visibly different
shape from the bottom echoes. */
.startup-ripple-top{
left:55.615%; width:14.64%;
}
/* Echoes from the flying (bottom) O — its own resting slot below the word
(same translateY(108%) offset as #startup-o-flying) — a separate origin
point, not the same spot the top echoes fan from. */
.startup-ripple-bottom{
left:56.77%; width:14.64%;
transform:translate(0, 108%) scale(.85) translate(0, 0);
animation-name: startup-ripple-opacity, startup-ripple-move-bottom;
}
@keyframes startup-ripple-opacity{
0%{ opacity:0; }
32%{ opacity:var(--ripple-op, .5); }
100%{ opacity:0; }
}
@keyframes startup-ripple-move{
from{ transform:scale(.85) translate(0, 0); }
to{ transform:scale(var(--ripple-scale, 2.6)) translate(var(--ripple-dx, 0), var(--ripple-dy, 0)); }
}
@keyframes startup-ripple-move-bottom{
from{ transform:translate(0, 108%) scale(.85) translate(0, 0); }
to{ transform:translate(0, 108%) scale(var(--ripple-scale, 2.6)) translate(var(--ripple-dx, 0), var(--ripple-dy, 0)); }
}
/* The big ripple only: the primary and flying O's own resting slots sit
just ~6px apart, so growing two squares that large right on that exact
spot (no drift) makes them bleed into one merged blob well before they
reach full size. A small FIXED offset — present for the ripple's whole
life, not animated — gives each one room to grow in place as its own
square without the pair ever reading as "splitting apart". */
.startup-ripple-big.startup-ripple-top{
animation-name: startup-ripple-opacity, startup-ripple-move-big-top;
}
.startup-ripple-big.startup-ripple-bottom{
animation-name: startup-ripple-opacity, startup-ripple-move-big-bottom;
}
@keyframes startup-ripple-move-big-top{
from{ transform:translateY(-55%) scale(.85) translate(0, 0); }
to{ transform:translateY(-55%) scale(var(--ripple-scale, 2.6)) translate(0, 0); }
}
@keyframes startup-ripple-move-big-bottom{
from{ transform:translate(0, 108%) translateY(55%) scale(.85) translate(0, 0); }
to{ transform:translate(0, 108%) translateY(55%) scale(var(--ripple-scale, 2.6)) translate(0, 0); }
}
/* Everything but the gallery image itself starts faded/offset while
#entry-white-overlay is still opaque, then eases into place as the
white wash clears — arrows slide in from the sides, back/caption bar
rise up from below. viewer.js removes body.viewer-entering at the
same moment it starts fading the overlay out on entry, so both happen
together rather than the chrome just popping in already-visible
underneath the white — and re-adds it on the way out (back button),
playing the same states/transitions in reverse: arrows slide back out,
bars sink back down, in sync with the fade back to white. */
body.viewer-entering .gallery-arrow.left{
opacity:0;
transform:translateY(-50%) translateX(-48px);
}
body.viewer-entering .gallery-arrow.right{
opacity:0;
transform:translateY(-50%) translateX(48px);
}
body.viewer-entering #info-bar,
body.viewer-entering #back-bar{
opacity:0;
transform:translateY(44px);
}
#info-bar, #back-bar{
transition: opacity .55s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
/* ================= STATUS BAR (shared) ================= */
#statusbar{
display:flex; align-items:center; justify-content:space-between;
padding:11px 12px;
background:transparent;
font-size:22px; color:var(--text-dark);
flex-shrink:0;
}
/* gap trimmed from 12px to 8px specifically to free up a bit more room
for the title on narrow phones — every px here comes straight out of
.title's own available width (it gets whatever's left over). */
#statusbar .left, #statusbar .right{
display:flex; align-items:center; gap:8px;
}
#statusbar .left{ min-width:0; } /* lets .title shrink/truncate instead of wrapping or overflowing */
#statusbar .title{
font-weight:normal; margin-left:4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
/* .title is itself a flex item (of .left's own flex context), which
defaults to min-width:auto — meaning without this, it would refuse
to shrink below its TEXT's full natural width and grow past .left's
available space instead of ever actually clipping, overlapping the
date/battery on the right at narrow widths. min-width:0 + flex:1 is
what actually lets overflow:hidden (and the marquee below) mean
anything. */
min-width:0; flex:1 1 auto;
/* .left gets ALL leftover space up to exactly where .right begins (see
justify-content:space-between on #statusbar), so without this the
clipped/marqueed text runs flush against the date with zero gap —
barely noticeable for a fixed "…" ellipsis glyph, but very visible
once the marquee is scrolling real characters right up to the edge. */
margin-right:28px;
}
/* .title-track is the actual text — a separate inline-block from .title
(the fixed-width clipping box) so JS can slide it via transform without
fighting .title's own overflow:hidden/ellipsis. Static (no animation)
whenever the label fits; viewer.js/menu.js only add the marquee
animation, via --marquee-distance and --marquee-duration, when the
track's own scrollWidth actually exceeds its container — so most
labels never move at all. */
#statusbar .title-track{
display:inline-block;
}
#statusbar .title-track.marquee{
animation: title-marquee var(--marquee-duration, 6s) linear 1 forwards;
}
/* Holds at the start long enough to read the opening words, then glides
left ONCE until the clipped tail is fully revealed and stays there —
no scrolling back, no looping. Runs fresh from the top again only when
the label itself changes or the viewport is resized (see
updateTitleMarquee() in viewer.js/menu.js), not on any fixed interval. */
@keyframes title-marquee{
0%, 15% { transform:translateX(0); }
100% { transform:translateX(var(--marquee-distance, 0)); }
}
.icon{ width:18px; height:18px; display:inline-block; }
.statusicon{
height:20px; width:auto; display:block;
image-rendering:-webkit-optimize-contrast;
image-rendering:crisp-edges;
}
#icon-battery{ height:16px; }
/* ================= VIEWER: DARK MODE (opt-in per project) ================= */
/* Set via a project's JSON "theme":"dark" (see viewer.js renderStaticInfo)
for projects whose own art is dark-background — PLAYSTYLE's screenshots
sit oddly on the default light-gray screen otherwise. Only touches the
screen backdrop and status bar; the info/back bar's own DS-chrome
texture assets are shared across every project and stay as-is. */
body.viewer-dark #screen{
background:
repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 6px),
#121212;
}
body.viewer-dark #statusbar{
color:#eaeaea;
}
/* Only the speaker icon needs flipping — it's solid dark linework with
no color of its own, so it'd vanish on the dark background. The wifi
and battery icons read fine as-is and are deliberately left alone. */
body.viewer-dark #icon-speaker{
filter: invert(1);
}
/* ================= MENU: PREVIEW SCREEN ================= */
#preview-wrap{
flex:1;
display:flex; align-items:center; justify-content:center;
padding: 2vh 0 1vh;
min-height:0;
}
#preview{
width:min(60vw, 560px);
height:80%;
max-height:min(48vh, 420px);
background:transparent;
display:flex; align-items:center; justify-content:center;
color:#eee; font-size:20px; letter-spacing:1px;
overflow:hidden;
position:relative;
/* Governs the fade for a still-wrapped gift card (see updateStyles() in
menu.js) — the intro sequence manages its OWN inline transition
during the initial page-load reveal, overriding this one while it
runs, then clears its inline override afterward so this becomes the
only thing driving opacity changes from then on. */
transition:opacity .25s ease;
}
#preview .preview-static-img{
width:100%; height:100%; object-fit:cover;
opacity:0; transition:opacity .25s ease;
}
#preview .preview-static-img.show{ opacity:1; }
#preview .banner-layer{ opacity:1; }
/* Pop-in reveal, like a 3DS icon banner appearing: starts invisible/
tiny, scales up to full size with a slight overshoot bounce. Applied
to a wrapper around whatever content renders (static/parallax/sprite)
so it doesn't fight with each type's own internal animation. */
.banner-reveal{
width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
position:relative;
transform-origin:center center;
animation: banner-pop-in 300ms cubic-bezier(.22,1,.36,1);
}
@keyframes banner-pop-in{
0% { transform:scale(0.6); opacity:0; }
70% { transform:scale(1.02); opacity:1; }
100% { transform:scale(1); opacity:1; }
}
/* ================= MENU: ANIMATED BANNERS ================= */
.banner-parallax{
position:absolute; inset:0; width:100%; height:100%;
overflow:hidden;
perspective:900px; /* gives spin3d layers real 3D depth instead of a flat squash */
}
.banner-layer{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:contain;
image-rendering:pixelated;
animation-name: banner-bob;
animation-duration: var(--dur, 2200ms);
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
--amp: 6px;
}
@keyframes banner-bob{
0%, 100% { transform: translateY(calc(var(--amp) * -1)); }
50% { transform: translateY(var(--amp)); }
}
/* Continuous 3D turn around the vertical axis, like a spinning coin/logo
— reads as 3D (foreshortens toward the edge) rather than the flat
pinwheel look of a plain rotate(). Overrides the bob animation above. */
.banner-layer.banner-spin3d{
animation-name: banner-spin3d;
animation-duration: var(--spin-dur, 3200ms);
animation-timing-function: linear;
/* rotateY + perspective visually bulges slightly at the corners as it
turns (perspective foreshortening) even though the flat plane itself
never exceeds its own rectangle — inset:0 (inherited from
.banner-layer above) leaves zero room for that bulge before
.banner-parallax's overflow:hidden clips it. A bit of breathing room
fixes it for any spin3d asset, not just ones whose own art happens to
have padding baked in already.
Explicit top/left/width/height (not inset + width/height:auto) — img
is a replaced element, and giving a replaced element auto width AND
height under inset constraints falls back to its native intrinsic
pixel size instead of solving for the inset-implied box, which made
it balloon far past the wrap rather than shrink into it. Spelling out
the exact percentages sidesteps that sizing algorithm entirely. */
top:14%;
left:14%;
width:72%;
height:72%;
}
@keyframes banner-spin3d{
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
.banner-sprite{
width:100%; height:100%;
background-repeat:no-repeat;
background-position: 0 0;
image-rendering:pixelated;
}
.banner-party-scene{
display:flex; align-items:flex-end;
gap:10px;
}
.banner-party-char{
background-repeat:no-repeat;
image-rendering:pixelated;
flex-shrink:0;
}
.banner-party-wrap{
display:flex; flex-direction:column; align-items:center;
justify-content:center;
gap:36px;
}
.banner-party-logo{
image-rendering:pixelated;
display:block;
}
.banner-spin-wrap{
position:relative;
width:100%; height:100%;
}
/* ring/icon/center are all sized+positioned entirely from JS (see the
'spin' branch of renderBanner() in menu.js) — one shared scale factor
applied to each layer's own real native pixel dimensions, with explicit
negative margins centering each on the wrap's exact center point.
That's deliberate: these three are designed together like stacked
Photoshop layers meant to overlay at their true relative sizes, not
independent art each free to be stretched to its own arbitrary %
width/height (which was quietly distorting their sizes relative to
each other). transform is left free for .banner-spin-ring's own
rotation animation below, hence margin-based centering instead of the
more usual translate(-50%,-50%) (which the animation would overwrite). */
.banner-spin-ring, .banner-spin-icon, .banner-spin-center{
position:absolute;
top:50%; left:50%;
pointer-events:none;
}
/* Soft shaded dots, not hard-edged pixel art, hence smooth (not
pixelated) rendering — matches how pixelated:false is used for
line-drawing/photographic banner layers elsewhere. */
.banner-spin-ring{
animation: banner-spin var(--spin-duration, 9000ms) linear infinite;
transform-origin:center center;
}
@keyframes banner-spin{
from { transform:rotate(360deg); }
to { transform:rotate(0deg); }
}
.banner-spin-icon{ z-index:0; }
.banner-spin-center{ z-index:1; }
/* ================= MENU: TOOLTIP ================= */
#tooltip-wrap{
display:flex; justify-content:center;
padding:1vh 0 0;
flex-shrink:0;
position:relative;
z-index:5; /* must paint above .card-selector-frame (z-index:3) so the
pointer stays visible once transformed down into its territory */
/* Purely decorative — no click handler anywhere touches tooltip or
tooltip-wrap — but its own box genuinely overlaps down into the
selector frame's territory (see the z-index comment above), and
without this a press landing in that overlap (particularly just
above the frame, where the tooltip's own bottom edge extends past
the frame's top) was silently swallowed here instead of reaching
#track-viewport's drag listener underneath. Matches the same
pointer-events:none already used on .card-selector-frame and
.card-selector-glow for the identical reason. */
pointer-events:none;
/* Governs the fade for a still-wrapped gift card (see updateStyles() in
menu.js) — the intro sequence manages its OWN inline transition
during the initial page-load reveal, overriding this one while it
runs, then clears its inline override afterward so this becomes the
only thing driving opacity changes from then on. */
transition:opacity .25s ease;
}
#tooltip{
position:relative;
background-image:url("assets/ui/tooltip.png");
background-repeat:no-repeat;
background-position:center top;
background-size:100% 100%;
/* aspect ratio matches the exported tooltip asset (391 x 138). The
asset's bottom ~20% is the pointer notch, so padding-bottom nudges
the text up to sit in the actual bubble body, not the notch. */
--tt-w: min(70vw, 391px);
width: var(--tt-w);
height: calc(var(--tt-w) * (138/391));
padding: 16px 24px calc(var(--tt-w) * (138/391) * 0.22);
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:2px;
text-align:center;
box-sizing:border-box;
}
#tooltip-title{
font-family:'Rodin', 'DSBios', 'Trebuchet MS', sans-serif;
font-weight:normal;
font-size:19px;
color:#5c5c5c;
line-height:1.15;
user-select:none;
-webkit-user-select:none;
-webkit-font-smoothing:none;
-moz-osx-font-smoothing:grayscale;
font-smooth:never;
text-rendering:optimizeSpeed;
}
#tooltip-category{
font-family:'Rodin', 'DSBios', 'Trebuchet MS', sans-serif;
font-weight:normal;
font-size:13px;
color:#9a9a9a;
line-height:1.15;
user-select:none;
-webkit-user-select:none;
-webkit-font-smoothing:none;
-moz-osx-font-smoothing:grayscale;
font-smooth:never;
text-rendering:optimizeSpeed;
}
/* "New!" flag ahead of the category text (see p.isNew in menu.js) —
same font/rendering treatment as the rest of #tooltip-category, just
its own colour and a bit of weight so it actually reads as a badge. */
.tooltip-new-badge{
color:#63c3e9;
}
/* ================= MENU: CARD ROW ================= */
#row-wrap{
position:relative;
padding: 0 0 1.5vh 0;
flex-shrink:0;
}
#track-viewport{
position:relative;
overflow:hidden;
/* Padding sized to comfortably contain the selector frame's full
extent above/below a card, even in the worst case (a project using
a full-size custom plate, like About Me, whose frame extends
further than the smaller windowed-thumb cards). This avoids ever
needing the frame to overflow this box at all — overflow-x:hidden +
overflow-y:visible was tried earlier, but mismatched overflow-x/y
values get silently converted to overflow-y:auto by the CSS spec,
which creates a real scrollable region (hence a stray scrollbar). A
single overflow:hidden value with enough padding avoids that
pitfall entirely. No fixed horizontal padding — centering is
handled in JS via dead-space spacers at the start/end of the
track, DSi-menu style, so the very first and very last cards can
still reach dead-center. */
padding: 6px 0 34px 0;
}
#track{
position:relative; /* containing block for .folder-tray's absolute left/width (see menu.js updateFolderTray()) */
display:flex;
align-items:flex-end;
will-change:transform;
cursor:grab;
touch-action:pan-y;
user-select:none;
-webkit-user-select:none;
}
#track.dragging{ cursor:grabbing; }
/* DSi "new gift" open animation overlay — position:fixed (not absolute)
so it's positioned against the viewport itself, immune to
#track-viewport's overflow:hidden regardless of DOM nesting. left/top/
width/height are set in JS to match the real card's rect at trigger
time; the card itself is hidden underneath for the duration. */
#gift-open-overlay{
position:fixed;
/* Above #tooltip-wrap (z-index:5) too now — the box rises high enough
(see GIFT_JUMP_PX in menu.js) to pass well above the tooltip bubble
entirely, matching the DSi reference where the floating cartridge
clearly reads in front of everything else in the menu while it's up
there. */
z-index:6;
pointer-events:none;
display:none;
}
#gift-open-overlay.active{ display:block; }
#gift-open-img, #gift-open-img-b{
position:absolute;
left:50%; bottom:0;
transform:translate(-50%, 0);
image-rendering:pixelated;
/* transform/transition are driven entirely from playGiftUnwrap() in
menu.js — the burst, hold, and fall each need their own duration/
easing, so there's no single static value that fits all of them. */
}
/* #gift-open-img-b exists only to crossfade in the mid-hold pose change
(frame 3 -> frame 4) while the box is stationary, instead of a hard
image swap — the two share identical positioning so either can be "the
visible one" at any moment; see crossfadeTo() in menu.js. */
#gift-open-img-b{ opacity:0; }
/* The real project icon, revealed inside the box as it opens — same
window percentages as .card .thumb (so it lines up exactly with where
the real card's icon sits once this animation hands off to it), but
positioned relative to #gift-open-overlay's own static rect (the card's
footprint) rather than a moving/frame-varying element. Its opacity and
translateY/scale are driven from playGiftUnwrap() in lockstep with
#gift-open-img, so it rises and falls together with the box while
fading in as the wrapping fades away. */
#gift-open-icon{
position:absolute;
left:16.89%; top:12.84%;
width:66.22%; height:57.47%;
object-fit:cover;
opacity:0;
}
.card{
flex-shrink:0;
width:138px; height:159px; /* ~15% bigger, same aspect ratio as the box/card art */
margin-right:25px;
display:flex; align-items:center; justify-content:center;
position:relative;
transform:scale(0.86);
opacity:0.85;
/* width/margin-right transition specifically for folder cards (see
openFolder()/closeFolder() in menu.js) growing in/out from 0 —
harmless everywhere else since nothing else ever changes a card's
width. #track is a real flex row, so animating just these two
properties on the newly-inserted cards is what pushes every later
sibling card rightward, via ordinary flex reflow — no JS position
math needed for them at all. */
transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease, filter .3s ease,
width .32s cubic-bezier(.22,1,.36,1), margin-right .32s cubic-bezier(.22,1,.36,1);
user-select:none;
}
/* the plate: box.png for blank cards, or a project's own full card art (e.g. ds-card.png) */
.card .plate{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:contain; /* contain, not cover — keeps the art's own baked-in shadow intact */
pointer-events:none;
z-index:2; /* paints OVER .thumb — the box plate's 104x104 middle is a
genuine transparent cutout (confirmed via its alpha channel, not
just a light-colored fill), so the icon sits behind it and shows
through with the box's own hand-drawn pixel-rounded edge as its
border, rather than a smooth CSS border-radius layered on top. */
}
/* The bow's ribbon tips reach into the canvas corners more aggressively
than box.png's own artwork does, so at the same object-fit:contain size
they poke slightly past the selector frame's window — scaled down a
touch, centered, to sit fully inside it. */
.card .gift-wrap-plate{
transform:scale(0.88);
}
.card .fallback{
position:relative; z-index:1;
font-size:16px; font-weight:600; color:#5a5a5a; text-align:center;
padding:0 12px;
text-shadow:0 1px 0 rgba(255,255,255,0.6);
}
/* a flat, unframed image (no baked-in card border/shadow) windowed
inside the box plate, roughly where its lighter inner area is */
.card .thumb{
position:absolute; z-index:1;
/* Sized/positioned to fill the box plate's 104x104 cutout once the box
(160x190 native) is letterboxed via object-fit:contain into this
138x159 card, plus a 5% safety enlargement so it comfortably
overfills the hole instead of just exactly matching it (any excess
is hidden behind the opaque bezel now that .plate paints on top).
Uses absolute position (explicit top/left) rather than flex-
centering + margin-top — percentage margins resolve against the
containing block's WIDTH even for margin-top/bottom, which made
the old approach easy to get subtly wrong on the vertical axis.
See THUMB_WIDTH_FRAC etc. in menu.js, which positionSelectorFrame()
must match exactly to keep the selector frame aligned around this
same thumb. */
left:16.89%; top:12.84%;
width:66.22%; height:57.47%;
object-fit:cover;
}
.card.active{
transform:scale(1);
opacity:1;
/* the selection highlight is now the real selector-frame asset, added
as a child of whichever card is active — see positionSelectorFrame()
in menu.js */
}
/* "These boxes belong to the folder" backing shadow — spans the folder
card itself plus all its open items (see updateFolderTray() in
menu.js). A direct child of #track, a SIBLING of the cards rather than
nested inside the folder card — nesting it inside a .card was tried
first, but that card's own transform:scale(0.86) when inactive (i.e.
the moment the user navigates away from the folder) shrank the tray
along with it, around that card's own center, visibly cutting off the
far end. As a plain #track child it still inherits #track's shared
translateX (scrolls in sync with every card) but no individual card's
scale, so its computed left/width always render at true size.
z-index:-1 (rather than relying on DOM insertion order) guarantees it
paints behind every card regardless of exactly when it was created. */
.folder-tray{
position:absolute;
top:50%;
z-index:-1;
border-radius:18px;
background:var(--bar-bg);
box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.08);
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
}
.folder-tray.visible{ opacity:1; }
/* ================= MENU: SELECTOR FRAME (real DSi-style asset) ================= */
.card-selector-frame{
position:absolute;
display:block;
image-rendering:pixelated;
pointer-events:none;
z-index:3;
transform-origin:center center;
/* Real DSi behavior: the very first/main cartridge (About Me) shows
no selector at all — it only appears once you've moved to a
different card, and disappears again if you come back. See
updateFrameVisibility(). This transition is what makes that a
quick fade rather than an instant snap; it's independent of (and
much quicker than) the chrome fade-in that plays once at page
load, since by the time that plays the frame is either already
meant to be hidden (starting on About Me) or was never touched by
it at all. */
transition: opacity .18s ease;
}
/* Plays every time the selection lands on a new card, like the DSi
menu's cursor: a quick shrink-in followed by a springy overshoot back
out to full size, rather than a static instant snap. */
.card-selector-frame.landing{
animation: frame-land 100ms ease-out;
}
@keyframes frame-land{
0% { transform:scale(1); }
40% { transform:scale(0.97); }
100% { transform:scale(1); }
}
/* ================= MENU: APP-LAUNCH TRANSITION (DSi-style) ================= */
/* Phase 1 (fired together): a quick blue glow washing over the entire
inside of the selector frame's transparent window — covering the
project art itself, not just a thin ring around it — plus a more
pronounced squash on the frame than the gentle landing bounce above.
Together these read as "the cursor reacting to a press", not just
settling into place. Modeled on the real DSi's own green selection
highlight: a solid, saturated border ring is what actually reads as
"selected" at a glance, while the fill itself stays light enough that
the art underneath is still clearly visible through it. */
.card-selector-glow{
position:absolute;
pointer-events:none;
z-index:2; /* above card art (.plate/.thumb, scoped to their own card)
but below .card-selector-frame's own opaque bezel (z-index:3), so
the frame's border stays crisp on top of the glow */
border-radius:12%;
box-sizing:border-box; /* keeps the border INSIDE the window rect JS already computed, rather than growing past it */
border:3px solid rgba(140,210,255,0);
background: rgba(130,195,255,0);
}
@keyframes launch-glow{
0% { border-color: rgba(140,210,255,0); background: rgba(130,195,255,0); box-shadow:0 0 0 0 rgba(130,195,255,0); }
50% { border-color: rgba(140,210,255,0.95); background: rgba(130,195,255,0.28); box-shadow:0 0 14px 6px rgba(130,195,255,0.7); }
100% { border-color: rgba(140,210,255,0.95); background: rgba(130,195,255,0.28); box-shadow:0 0 14px 6px rgba(130,195,255,0.7); }
}
.card-selector-glow.launch-glow{
animation: launch-glow 150ms ease-out forwards;
}
/* Same idea as launch-glow above, but white — the flash before a gift
card's open animation plays (see playGiftUnwrap() in menu.js), not a
launch, so it gets its own distinct colour rather than reusing the
normal blue "this card was pressed" one. */
@keyframes gift-glow{
/* border-color deliberately left out (stays fully transparent, per the
base .card-selector-glow rule) — animating it to solid white the way
launch-glow does its blue border read as a hard bright rim rather
than a soft glow. Just the diffuse background+box-shadow instead. */
0% { background: rgba(255,255,255,0); box-shadow:0 0 0 0 rgba(255,255,255,0); }
50% { background: rgba(255,255,255,0.35); box-shadow:0 0 14px 6px rgba(255,255,255,0.8); }
100% { background: rgba(255,255,255,0.35); box-shadow:0 0 14px 6px rgba(255,255,255,0.8); }
}
.card-selector-glow.gift-glow{
animation: gift-glow 150ms ease-out forwards;
}
@keyframes launch-squish{
0% { transform:scale(1,1); }
40% { transform:scale(1.12,0.82); }
70% { transform:scale(0.94,1.08); }
100% { transform:scale(1,1); }
}
.card-selector-frame.launch-squish{
animation: launch-squish 150ms ease-out;
}
/* Phase 2: the card flies up off the top of the screen while the
selector frame disappears (via its existing opacity transition) and
the white overlay below fades in, all at once. */
.card.launch-fly{
transition: transform .45s cubic-bezier(.4,0,.2,1);
transform: translateY(-120vh);
}
#launch-white-overlay{
position:fixed; inset:0;
background:#fff;
opacity:0;
pointer-events:none;
z-index:999;
transition: opacity .45s ease;
}
/* ================= MENU: DS-STYLE SCROLLBAR (real pixel-art assets) ================= */
#scrollbar{
position:absolute; left:0; right:0; bottom:0;
width:100%;
display:flex; align-items:flex-end;
box-sizing:border-box;
}
/* The bar itself always stretches to fill 100% of the available width —
independent of the size of everything else — so it's always corner-
to-corner regardless of how thin we make it. Every other piece (caps,
thumb, arrows, pips) is a small fixed-size image, sized in JS via a
single SB_VSCALE factor so they all shrink/grow together in
proportion to each other. */
.sb-corner{
position:relative;
flex-shrink:0;
cursor:pointer;
}
.sb-arrow-img{
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
display:block;
image-rendering:pixelated;
cursor:pointer;
z-index:3;
}
#sb-arrow-right-img{ transform:translate(-50%,-50%) scaleX(-1); }
#sb-track{
position:relative;
flex:1; min-width:0;
line-height:0; /* avoids extra inline-image gap under sb-bar-bg */
}
#sb-bar-bg{
display:block;
width:100%;
image-rendering:pixelated;
}
#sb-pips{
position:absolute; inset:0;
pointer-events:none;
/* Pips are positioned individually in JS (positionPips) rather than
via flex space-between — that distributed pips by their LEFT
EDGES, not centers, which put each pip's actual center off from
the thumb's own center by up to half a pip's width (worst at the
first/last stops, zero only at dead-center). Explicit left+
translate(-50%) here matches the thumb's center-of-travel formula
exactly, at every stop. */
}
.sb-pip-img{
position:absolute; top:50%;
transform:translate(-50%, -50%);
display:block;
image-rendering:pixelated;
transition: opacity .15s ease;
opacity:0.5;
}
.sb-pip-img.passed{ opacity:1; }
.sb-pip-filler{
display:block; flex-shrink:0;
image-rendering:pixelated;
opacity:0.35;
}
/* Fixed decorative pieces sitting OUTSIDE the arrows, at the far
corners — the arrow overlaps in front of part of each cap (negative
margin pulls the arrow over it; z-index keeps the arrow on top),
rather than being inside the silver bar. */
.sb-cap-img{
display:block; flex-shrink:0;
image-rendering:pixelated;
pointer-events:none;
position:relative; z-index:1;
}
#sb-thumb{
position:absolute; top:50%; left:0;
transform:translateY(-50%);
display:block;
image-rendering:pixelated;
cursor:grab;
z-index:2;
transition: left .18s ease; /* smooths the final settle-into-place on release */
}
#sb-thumb.dragging{
cursor:grabbing;
transition: none; /* instant 1:1 tracking while actually dragging */
}
/* Lights up the area behind the thumb's transparent middle — like the
real DSi scrollbar, where the pip under the thumb stays visible, just
sitting on a highlighted light panel rather than the plain gray
track. No z-index here (relies on DOM order, placed before
#sb-pips): it needs to paint BEHIND the pips so they still show on
top of it, while #sb-thumb's bezel (z-index:2) paints in front of
everything, framing the visible window. Sized/positioned in JS (see
syncThumbHighlight) to match the thumb's actual transparent hole,
measured directly from its PNG's alpha channel. */
#sb-thumb-highlight{
position:absolute; top:50%; left:0;
transform:translateY(-50%);
display:block;
background:#eee;
border-radius:2px;
pointer-events:none;
transition: left .18s ease; /* mirrors #sb-thumb's own settle transition */
}
#sb-thumb-highlight.dragging{
transition: none;
}
/* ================= MENU: INTRO SEQUENCE ================= */
/* Drop-and-bounce for each card's intro entrance: falls from above,
hits its resting position, bounces up a little, a smaller second
bounce, then settles — like a cartridge physically dropping in,
rather than a smooth single-ease slide. Two variants only because
each card's own resting transform includes a different scale (0.86
normally, 1 for whichever starts active) — everything else about the
motion is identical between them. Driven via animation-name/delay/
duration set inline per-card in playIntroAnimation(), not a class, so
the stagger delay can be computed per index. */
@keyframes card-drop-bounce{
0% { opacity:0; transform:translateY(-40px) scale(0.86); }
8% { opacity:1; }
45% { transform:translateY(0) scale(0.86); } /* first impact */
60% { transform:translateY(-8px) scale(0.86); } /* bounce up */
75% { transform:translateY(0) scale(0.86); } /* second impact */
85% { transform:translateY(-3px) scale(0.86); } /* smaller second bounce */
100% { opacity:0.85; transform:translateY(0) scale(0.86); } /* settled — 0.85 matches .card's own resting opacity, so clearing this animation afterward doesn't pop/snap */
}
@keyframes card-drop-bounce-active{
0% { opacity:0; transform:translateY(-40px) scale(1); }
8% { opacity:1; }
45% { transform:translateY(0) scale(1); }
60% { transform:translateY(-8px) scale(1); }
75% { transform:translateY(0) scale(1); }
85% { transform:translateY(-3px) scale(1); }
100% { opacity:1; transform:translateY(0) scale(1); }
}
/* Both present from first paint (body has both classes in the raw
HTML) so there's no flash of the finished page before JS runs. Split
into two separate classes rather than one, because they get removed
at different times: intro-hidden comes off the instant
playIntroAnimation() starts (it immediately takes over opacity via
inline styles instead) — if it lingered, its opacity:0 would fight
every subsequent inline opacity change and the reveal would never
become visible. intro-locked stays until the whole sequence
(including the chrome fade-in) finishes, since its job — blocking
mouse/touch — should last the full duration, not just the card
drop-in. */
body.intro-hidden .card,
body.intro-hidden .card-selector-frame,
body.intro-hidden #tooltip-wrap,
body.intro-hidden #preview{
opacity:0;
}
body.intro-locked #row-wrap,
body.intro-locked #scrollbar{
pointer-events:none;
}
/* Same lock, while the gift-open animation plays (see playGiftUnwrap() in
menu.js) — #gift-open-overlay is positioned once from the card's rect
at the start and doesn't track the carousel, so dragging/scrolling
mid-animation would desync the two. Blocking input here is simpler and
safer than trying to keep that overlay's position live. */
body.gift-unwrapping #row-wrap,
body.gift-unwrapping #scrollbar{
pointer-events:none;
}
/* ================= VIEWER: GALLERY ================= */
#gallery-wrap{
flex:1;
display:flex; align-items:center; justify-content:center;
padding: 1vh 48px;
min-height:0;
}
/* This exists purely so the arrows have something to anchor to that
actually matches the image's real rendered size — #gallery-wrap
itself spans the FULL width of the screen (it's a flex:1 column
child), so positioning the arrows relative to it put them miles off
from the actual image, off the edge of the screen entirely. This
wrapper hugs #gallery-viewport's own dimensions and has no
overflow:hidden of its own, so the arrows can sit in the "gutter"
just outside the image without being clipped. */
#gallery-frame{
position:relative;
/* Sized in JS (viewer.js fitGalleryFrame()), not via aspect-ratio +
max-width/max-height here — that combination breaks on tall/narrow
or square viewports (an explicit height plus a max-width that clamps
the derived width doesn't get recomputed by the browser, silently
losing the intended ratio). These are just a pre-JS fallback so
there's no flash of an unsized box before the script runs. */
max-height:82vh;
max-width:100%;
}
#gallery-viewport{
position:relative;
width:100%; height:100%;
overflow:hidden;
border-radius:3px;
background:transparent;
cursor:grab;
touch-action:pan-y;
-webkit-user-select:none; user-select:none;
}
/* A slide "layer" — a plain positioning container, not an ![]()
itself,
since a slide's content varies by gallery entry kind: a single image
or video fills it directly, while a "row" entry (several images
playing side by side under one shared pip) needs an inner flex
wrapper. See viewer.js buildSlideContent(). */
.gallery-image{
position:absolute; inset:0;
width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
}
.gallery-image > img,
.gallery-image > video{
max-width:100%; max-height:100%;
width:100%; height:100%;
object-fit:contain; display:block;
}
.gallery-row{
display:flex; align-items:center; justify-content:center;
width:100%; height:100%;
gap:0;
}
.gallery-row img{
flex:1 1 0; min-width:0;
max-height:100%;
object-fit:contain; display:block;
}
/* A "book" entry (kind:"book") is a many-page publication read via
realistic drag-to-turn page flipping — a fundamentally different,
stateful interaction from the crossfading .gallery-image layers used
for everything else, so it's a separate persistent element that gets
shown/hidden rather than rebuilt on every slide change (see viewer.js
showImage()). StPageFlip (vendor/page-flip.browser.js) renders into
this via a