/*
 * Homepage — the studio desktop.
 * Window, buttons, terminal text and taskbar come from shared-studio.css;
 * this file only lays out the desktop icons, the welcome window and the
 * low-res 3D wallpaper drawn by home-scene.js.
 */

@font-face {
    font-family: 'Comico';
    src: url('assets/fonts/Comico-Regular.otf') format('opentype');
    font-display: swap;
}

html, body { height: 100%; overflow: hidden; }

/* ── 3D wallpaper: rendered small, scaled up with hard pixels ── */
#scene {
    position: fixed; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.s-desktop { z-index: 1; }

/* ── Desktop icons, one column per category ──────────────── */
.desk-grid {
    position: absolute; top: 14px; left: 14px;
    display: flex; gap: 6px; align-items: flex-start;
}
.desk-col { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 82px; }
.desk-cat {
    margin: 0 0 2px; padding: 0 4px;
    font: 10px var(--s-mono); font-weight: normal; letter-spacing: 1px;
    color: var(--cat);
    background: rgba(7, 7, 11, 0.7);
}

.desk-icon {
    width: 82px; padding: 4px 2px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: #e9e9f4;
    outline: none;
}
.desk-tile {
    width: 40px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    color: var(--cat);
    background: var(--s-ink);
    border: 2px solid; border-color: var(--s-raised);
}
.desk-tile svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.desk-label {
    padding: 1px 3px; max-width: 100%;
    font-size: 11px; line-height: 1.25; text-align: center;
    background: rgba(7, 7, 11, 0.6);
}
/* Selected icon: like picking a file — tile pressed, label in its colour. */
.desk-icon:hover .desk-tile, .desk-icon:focus-visible .desk-tile { border-color: var(--s-sunken); background: #15151d; }
.desk-icon:hover .desk-label, .desk-icon:focus-visible .desk-label { color: #07070b; background: var(--cat); }
.desk-icon:focus-visible .desk-label { outline: 1px dotted var(--cat); outline-offset: 1px; }

/* ── Welcome window ──────────────────────────────────────── */
#win-welcome { top: 24px; right: 24px; width: 320px; min-height: 0; }
.welcome-body { padding: 6px; gap: 6px; }
.welcome-term { border: 2px solid; border-color: var(--s-sunken); padding: 12px 14px; }
.welcome-term p { margin: 6px 0 0; }
.welcome-term .dim { color: var(--s-ink-dim); }

/* The brand voice: the studio's own font, used only for its name. */
.brand {
    margin: 0; font: 34px/0.95 'Comico', cursive; letter-spacing: 1px;
    color: #fff;
}
.brand::before { content: none; }


.welcome-actions { display: flex; gap: 4px; }
.welcome-actions .s-btn { flex: 1; text-align: center; text-decoration: none; }
.made-by { margin: 0; font-size: 10px; color: var(--s-dark); }
.made-by a { color: var(--s-text); }

/* ── Single-window pages (support, 404) ──────────────────── */
.page-win {
    top: 50%; left: 50%; transform: translate(-50%, -52%);
    width: min(560px, calc(100vw - 32px)); min-height: 0;
}
.page-body { padding: 6px; gap: 6px; }
.page-term { border: 2px solid; border-color: var(--s-sunken); padding: 14px 16px; }
.page-term p { margin: 8px 0 0; }
.page-term .dim { color: var(--s-ink-dim); }
.stripe-well {
    display: flex; justify-content: center; padding: 14px 8px;
    background: var(--s-ink); border: 2px solid; border-color: var(--s-sunken);
}
.page-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--s-dark); }
.page-foot a { color: var(--s-text); }
.page-links { display: flex; flex-wrap: wrap; gap: 4px; }
.page-links .s-btn { flex: 1; text-align: center; text-decoration: none; }
.big-code { font: 64px/1 var(--s-mono); color: var(--s-phosphor); margin: 0 0 6px; }

/* ── Small screens: welcome on top, icons wrap below ─────── */
@media (max-width: 760px) {
    html, body { overflow: auto; height: auto; }
    .s-desktop { position: relative; inset: auto; padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 14px; }
    #win-welcome { position: relative; inset: auto; width: auto !important; order: -1; }
    #win-welcome .s-win-controls { display: none; }
    .desk-grid { position: static; flex-wrap: wrap; justify-content: center; gap: 14px 6px; }
    .desk-col { width: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; }
    .desk-cat { width: 100%; text-align: center; }
    .brand { font-size: 28px; }
    .page-win { position: relative; top: auto; left: auto; transform: none; width: auto !important; }
    /* Finger-sized links in the Welcome window. */
    #win-welcome .s-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
    .made-by { font-size: 12px; }
    .made-by a { display: inline-block; padding: 8px 4px; }
}