/* cherubling.com — the frame is cherub.moe/main.html, piece for piece: the cloud strip,
   the gingham, the 1100px layout of fluffy-border boxes with a fixed 514px content box
   that scrolls INSIDE, the marquee + clock row under it, georgia in grey, hot-pink links
   that bounce. every raster is pixel art or a gif, shown at native size, never smoothed. */

* { cursor: url("assets/ui/starcurs.png"), auto; }
a, a * { cursor: url("assets/ui/starcurs.png"), pointer; }

html { color-scheme: light; }

body {
    margin: 0;
    padding: 10px 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url("assets/ui/ginghamtile.png") repeat;
    background-size: cover, 200px 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Georgia, serif;
    color: #888888;
    box-sizing: border-box;
    overflow-x: hidden;
}

img, canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

a { color: #ff69b4; text-decoration: none; }
a:hover {
    animation: bounce 0.4s ease infinite alternate;
    display: inline-block;
}
@keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-4px); }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #ffd6ea; }
::-webkit-scrollbar-thumb { background: #fff4bd; }
::-webkit-scrollbar-thumb:hover { background: #fff3b3; }
::selection { background: #ffd6ea; color: #888888; }

/* ── main.html: the strip, the page, the frame ───────────────────────────── */
.page-border-top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    background: url("assets/ui/newborder.png") repeat-x top;
    background-size: auto 60px;
    z-index: 999;
    pointer-events: none;
}
.page-content {
    padding: 6em 0 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.frame {
    position: relative;
    display: inline-block;
    margin-top: 100px;
}

/* the logo sits above the frame, overlapping it, like newlogo2.png does on cherub.moe.
   until there is a drawn logo this is type. */
.logo {
    position: absolute;
    top: -92px;
    left: 40px;
    z-index: 999;
    pointer-events: none;
    margin: 0;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: normal;
    font-size: 46px;
    line-height: 1;
    color: #ff69b4;
    text-shadow: 2px 2px 0 #ffc6ff, 4px 4px 0 #fff0f7;
    letter-spacing: 1px;
}
.logo small {
    display: block;
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0;
    text-shadow: none;
    color: #aaaaaa;
    margin-top: 8px;
}
.mascot {
    position: absolute;
    top: -128px;
    right: 24px;
    width: 128px;
    height: 128px;
    z-index: 998;
    pointer-events: none;
}
.cloud {
    position: absolute;
    top: -80px;
    right: 150px;
    z-index: 998;
    pointer-events: none;
}

.layout {
    width: 1100px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    position: relative;
}
.side-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.side-column.left  { width: 130px; }
.side-column.right { width: 319px; }

.side-box {
    box-sizing: border-box;
    background: #fdfafe;
    border: 8px solid transparent;
    border-image: url("assets/ui/fluffyborder1.png") 8 fill round;
    font-family: Georgia, serif;
    color: #888888;
    font-size: 13px;
    line-height: 1.6;
    overflow-y: auto;
}
.side-column.left .side-box {
    flex: 1;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.side-column.left .side-box a {
    font-family: Georgia, serif;
    font-size: 12px;
    display: block;
}
.side-column.left .side-box a.here { color: #ff87d7; font-weight: bold; animation: none; }
.side-column.left .made-by {
    margin-top: auto;
    border-top: 1px dotted #ffd6ea;
    padding-top: 8px;
}
.side-column.left .made-by span { font-size: 11px; color: #ffaadd; }
.side-column.left .made-by img { display: block; margin: 4px 0; }

.side-column.right .side-box.top-box {
    height: 173px;
    padding: 6px 10px;
    font-size: 12px;
}
.side-column.right .side-box.top-box p { margin: 2px 0; }
.side-column.right .side-box.top-box .update-date {
    color: #ff87d7;
    font-weight: bold;
    margin-right: 6px;
}
.side-column.right .side-box.top-box img { vertical-align: middle; }
.side-column.right .side-box.pet-box {
    height: 335px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.side-column.right .side-box.pet-box canvas {
    width: 256px;
    height: 256px;
    display: block;
    margin: 14px 0 0;
}
.side-column.right .side-box.pet-box .caption {
    font-size: 11px;
    color: #aaaaaa;
    text-align: center;
    padding: 0 10px;
}

.content-box {
    flex: 1;
    height: 514px;
    box-sizing: border-box;
    background: #fdfafe;
    border: 8px solid transparent;
    border-image: url("assets/ui/fluffyborder1.png") 8 fill round;
    overflow: hidden;
    min-width: 0;
}
/* what used to be the iframe: the page scrolls in here, not the window */
.content-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 14px 20px;
    box-sizing: border-box;
    font-family: Georgia, serif;
    color: #888888;
    line-height: 1.6;
    font-size: 12px;
}

/* ── the marquee + clock row under the frame ─────────────────────────────── */
.bar {
    display: flex;
    gap: 6px;
    width: 1100px;
    box-sizing: border-box;
    margin: 10px 0 6px;
}
.marquee-box {
    flex: 1;
    width: auto;
    box-sizing: border-box;
    background: #fdfafe;
    border: 8px solid transparent;
    border-image: url("assets/ui/fluffyborder1.png") 8 fill round;
    height: 47px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.marquee-overflow {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
}
.marquee-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    animation: scrollLeft 28s linear infinite;
    white-space: nowrap;
    font-size: 12px;
    color: #ff87d7;
}
.marquee-track img { flex-shrink: 0; vertical-align: middle; }
.marquee-track a { animation: none; }
@keyframes scrollLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.clock-box {
    box-sizing: border-box;
    background: #fdfafe;
    border: 8px solid transparent;
    border-image: url("assets/ui/fluffyborder1.png") 8 fill round;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    font-family: Georgia, serif;
    font-size: 14px;
    color: #ff69b4;
    white-space: nowrap;
    flex-shrink: 0;
}
.clock-box img { animation: bounce 0.4s ease infinite alternate; display: inline-block; }

.copyright {
    font-family: Georgia, serif;
    font-size: 14px;
    color: #bbbbbb;
    text-align: center;
    margin: 0;
}
.copyright a { color: #bbbbbb; }

/* ── inside the content box: the inner-page type ─────────────────────────── */
.content-scroll h2 { color: #ff87d7; font-size: 14px; margin: 0 0 12px; }
.content-scroll h3 { color: #ff87d7; font-size: 13px; margin: 16px 0 6px; }
.content-scroll p { margin: 0 0 10px; }
.fun {
    color: #ff69b4;
    font-style: italic;
    text-shadow: 1px 1px 0 #ffc6ff;
    letter-spacing: 1px;
}
.sub { color: #aaaaaa; font-size: 11px; }
.divider { display: block; margin: 12px auto; }
.clearfix::after { content: ""; display: table; clear: both; }

.dot-list { list-style: none; margin: 0 0 10px; padding: 0; }
.dot-list li {
    margin-bottom: 6px;
    background: #fdfafe;
    border: 1px dotted #ffb3d9;
    border-radius: 6px;
    padding: 5px 10px;
}
.dot-list .label { color: #ff87d7; font-weight: bold; }

table.facts { border-collapse: collapse; width: 100%; margin: 0 0 10px; }
table.facts th, table.facts td {
    text-align: left;
    vertical-align: top;
    padding: 4px 6px;
    border-bottom: 1px dotted #ffb3d9;
    font-size: 12px;
}
table.facts th { color: #ff87d7; font-weight: bold; white-space: nowrap; width: 110px; }

.status-pill {
    display: inline-block;
    border: 1px dotted #ffb3d9;
    border-radius: 6px;
    padding: 2px 10px;
    color: #ff87d7;
    font-size: 11px;
    background: #fdfafe;
    margin: 0 0 10px;
}

/* the game logo is a smooth 1669px render (provisional, not pixel art), so it is NOT
   nearest-neighbour: lumia_savior_title_556.png is an area downscale with premultiplied
   alpha, shown 1:1. the full-size file stays in the press kit. */
.game-logo { display: block; width: 556px; height: 114px; margin: 4px auto 12px; image-rendering: auto; }

/* screenshots: 576x324 crops of the 1920x1080 originals, at 1:1. nothing is resized. */
.shots { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.shots figure { margin: 0; }
.shots .frame-img {
    display: block;
    width: 576px;
    height: 324px;
    border: 1px dotted #ffb3d9;
    border-radius: 4px;
    padding: 2px;
    background: #fff;
    box-sizing: content-box;
    max-width: none;
}
.shots figcaption { font-size: 11px; color: #aaaaaa; padding: 3px 2px 0; }
.shots figcaption a { font-size: 11px; }

.pout { text-align: center; padding-top: 24px; }
.pout img { width: 256px; height: 256px; display: block; margin: 0 auto 10px; }

/* ── narrower than the frame: stack the columns, let the content box grow ────
   cherub.moe is desktop-only by design; this is the polite fallback for phones. */
@media (max-width: 1140px) {
    body { padding: 10px 8px; overflow-x: auto; }
    .frame { display: block; margin-top: 80px; width: 100%; }
    .logo { position: static; margin: 0 0 14px 4px; }
    .mascot { top: -120px; right: 0; }
    .cloud { display: none; }
    .layout { width: 100%; flex-direction: column; }
    .side-column.left, .side-column.right { width: 100%; }
    .side-column.left .side-box { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }
    .side-column.left .made-by { display: none; }
    .content-box { height: auto; }
    .content-scroll { height: auto; overflow: visible; }
    .side-column.right .side-box.top-box { height: auto; }
    .side-column.right .side-box.pet-box { height: auto; padding-bottom: 10px; }
    .side-column.right .side-box.pet-box canvas { width: 128px; height: 128px; }   /* exact half */
    .bar { width: 100%; }
    .shots { overflow-x: auto; }   /* a 576px crop scrolls sideways rather than shrinking */
    .game-logo { max-width: 100%; }
}
@media (max-width: 560px) {
    .logo { font-size: 34px; }
    .mascot { width: 64px; height: 64px; top: -70px; }   /* exact half */
    .content-scroll { padding: 12px 14px; }
    .clock-box { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    a:hover, .clock-box img { animation: none; }
    .marquee-track { animation: none; }
}