/* Mobile Trainer Retro Stylesheet
 * Emulates the Game Boy Color browser appearance
 */

:root {
    /* GBC Classic Green Palette */
    --gbc-background: #ffffff;
    /* Lightest green - background */
    --gbc-link-new: cornflowerblue;
    /* Light green - hover states */
    --gbc-link-old: red;
    /* Dark green - links */
    --gbc-color: #000000;
    /* Darkest green - text */

    /* GBC Frame positioning
     * The link cable on the left side makes the SVG asymmetric.
     * SVG dimensions and cable position (in pixels):
     */
    --gbc-svg-width: 977;
    --gbc-cable-width: 290;
    /* Derived values (as percentages of SVG width): */
    --gbc-cable-percent: calc(var(--gbc-cable-width) / var(--gbc-svg-width) * 100%);
    /* 29.68% */
    --gbc-body-percent: calc(100% - var(--gbc-cable-percent));
    /* 70.32% */
    /* Offset to center GBC body: cable creates asymmetry, shift by half cable width */
    --gbc-adapter-offset: calc(var(--gbc-cable-percent) / 2);
    /* 14.84% */
    /* Scale factor to make GBC body fill container (for mobile clipping) */
    --gbc-body-scale: calc(100% / var(--gbc-body-percent));
    /* 142.2% */
}

@font-face {
    font-family: 'MobileTrainer';
    src: url('/fonts/MobileTrainer/MobileTrainer.woff2') format('woff2'),
        url('/fonts/MobileTrainer/MobileTrainer.woff') format('woff'),
        url('/fonts/MobileTrainer/MobileTrainer.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* Base styles for GBC browser emulation */
.gbc-screen {
    font-family: 'MobileTrainer', monospace;
    /* 12px is the native size, scale up by integer multiples for sharpness */
    font-size: 12px;
    line-height: 12px;

    /* GBC-style green/yellow palette */
    background-color: var(--gbc-background);
    color: var(--gbc-color);

    /* Disable anti-aliasing for crisp pixels */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
    text-rendering: optimizeSpeed;

    /* Pixel-perfect rendering */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* GBC screen inner content area */
.gbc-content {
    padding: 4px;
    overflow: hidden;
}

/* Links styled for GBC */
.gbc-screen a {
    color: var(--gbc-link-new);
    text-decoration: underline;
}

.gbc-screen a:visited {
    color: var(--gbc-link-old);
}

.gbc-screen a:hover {
    color: var(--gbc-link-new);
    background-color: var(--gbc-background);
}

/* Horizontal rule */
.gbc-screen hr {
    border: 0;
    border-color: var(--gbc-color);
    border-top: calc(1px * 1) solid var(--gbc-color);
    margin-bottom: calc(5px * 1);
}

/* Lists */

.gbc-screen ul {
    list-style: none;
    /* Remove list bullets */
    padding: 0;
    margin: 0;
}

.gbc-screen ul,
.gbc-screen ol {
    margin: 0;
    padding-left: 12px;
}

.gbc-screen li::before {
    content: "\30fb";
}

/* Images should be pixelated */
.gbc-screen img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Scale variations - use integer multiples for pixel perfection */
.gbc-screen.scale-2x {
    font-size: 24px;
    line-height: 24px;
}

.gbc-screen.scale-3x {
    font-size: 36px;
    line-height: 36px;
}

.gbc-screen.scale-2x hr {
    border-top: calc(1px * 2) solid var(--gbc-color);
    margin-bottom: calc(5px * 2);
}

.gbc-screen.scale-3x hr {
    border-top: calc(1px * 3) solid var(--gbc-color);
    margin-bottom: calc(5px * 3);
}

/* GBC Frame wrapper styles
 * SVG viewBox: 977 x 1168
 * Screen area in SVG: x=436, y=114, width=383, height=345
 * Screen position as percentage of SVG:
 *   left: 436/977 = 44.627%
 *   top: 114/1168 = 9.761%
 *   width: 383/977 = 39.201%
 *   height: 345/1168 = 29.538%
 *
 * The Mobile Adapter on the right side makes the SVG asymmetric.
 * GBC body spans roughly x=290 to x=977, with the link cable on the left.
 * As percentage: 290/977 = 29.68%
 */
.gbc-frame-container {
    --gbc-width: 400px;
    /* Base width, adjust as needed */
    position: relative;
    display: inline-block;
    width: var(--gbc-width);
    /* Shift left to visually center the GBC body */
    transform: translateX(calc(var(--gbc-adapter-offset) * -1));
}

/* The GBC art is tall and its LCD is only ~38% of its width, so a crisp integer 2x
   screen forces a ~834px / ~1000px console that dominates the page. So: default to a
   COMPACT crisp 1x (console ~416px, screen 160x144 filling the LCD), and upgrade to a
   crisp 2x only on screens with room for it. Both are integer -> always sharp, never
   the ugly fractional scaling. Screen centred on the SVG's REAL hole centre
   (measured by flood-fill: 64.381%, 24.486%) and sized a touch bigger than the hole
   so its edges tuck just under the baked-in bezel. */
.gbc-frame-container.gbc-large {
    --gbc-width: 416px;
}

.gbc-frame-container.gbc-large .gbc-frame-screen {
    width: 160px;
    height: 144px;
    left: calc(64.432% - 80px);
    top: calc(24.486% - 72px);
}

/* keep the pixel art hard-edged when the mockup is scaled up */
.gbc-frame-iframe {
    image-rendering: pixelated;
}

/* Scale the whole compact mockup up by how much room the viewport has: 1x -> 1.5x -> 2x.
   The layout box stays the small 1x size, so scaling never causes overflow/scroll;
   transform only enlarges it, centred. */
.gbc-modal-content {
    transform-origin: center center;
}

@media (min-width: 720px) and (min-height: 760px) {
    .gbc-modal-content {
        transform: scale(1.5);
    }
}

/* 2x needs room for the console AND the trailing adapter to its left, else the
   adapter runs off-screen; require a wider viewport before going 2x. */
@media (min-width: 1360px) and (min-height: 1080px) {
    .gbc-modal-content {
        transform: scale(2);
    }
}

.gbc-frame-svg {
    display: block;
    width: 100%;
    height: auto;
    /* SVG sits on top to receive pointer events on the frame */
    position: relative;
    z-index: 2;
    /* But allow clicks through to iframe on transparent screen area */
    pointer-events: none;
    filter: drop-shadow(0px 5px 2px rgba(0, 0, 20, 0.36));
}

.gbc-frame-svg svg {
    pointer-events: auto;
}

.gbc-frame-screen {
    position: absolute;
    /* Position based on SVG screen location
     * SVG coords: x=436, y=114, width=383, height=345
     * As percentages of viewBox (977x1168)
     */
    left: 44.627%;
    top: 9.761%;
    width: 39.201%;
    height: 29.538%;
    z-index: 1;
    /* GBC screen green background */
    background-color: var(--gbc-background);
    border-radius: 1%;
    overflow: hidden;
    /* Force pixel-aligned rendering */
    transform: translateZ(0);
}

.gbc-frame-iframe {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gbc-background);
}

.gbc-link-rig {
    position: absolute;
    top: 23.2%;
    right: 98.4%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 0;
    pointer-events: none;
}

.gbc-link-rig__adapter {
    position: relative;
    width: 362px;
    left: 6px;
    top: 17px;
    height: auto;
    filter: drop-shadow(0px 5px 2px rgba(0, 0, 20, 0.36));
    z-index: 1;
}

.gbc-link-rig__cable {
    position: relative;
    top: 15px;
    width: 200px;
    height: 16px;
    left: -3px;
    background: #a4abae;
    box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.18);
}

/* Modal/popup styles for the GBC frame */
.gbc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: safe center;
    /* keep top reachable when the console is taller than the viewport */
    overflow-x: hidden;
    /* clip the adapter where it runs off the left edge */
    overflow-y: auto;
    /* scroll a large console on short windows */
    padding: 24px 0;
    /* top of the stack: content <=10, header 20, dropdowns 30, floats 40, modal 100 */
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gbc-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.gbc-modal-content {
    position: relative;
    max-width: 90vw;
    /* no max-height: keep the console at full 2x size; the overlay scrolls if needed */
}

.gbc-modal-close {
    position: absolute;
    top: -40px;
    /* Offset to align with the visually-centered GBC body */
    right: calc(var(--gbc-adapter-offset));
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
}

.gbc-modal-close:hover {
    color: var(--gbc-background);
}

/* Prevent sub-pixel rendering issues */
.pixel-perfect {
    transform: translateZ(0);
    will-change: transform;
}

/* Mobile responsiveness
 * Clips the cable and shows only the GBC body, centered
 *
 * SVG dimensions: 977px wide, cable is 0-290px, body is 290-977px (687px)
 * Cable as % of SVG: 290/977 = 29.68%
 * Body width for .gbc-large (500px): 500 * 0.7032 = 351.6px
 */
@media (max-width: 768px) {
    .gbc-modal-content {
        /* Clip the cable */
        overflow: hidden;
        /* Width matches the GBC body portion */
        width: 352px;
        /* Center in the overlay */
        margin: 0 auto;
    }

    .gbc-frame-container,
    .gbc-frame-container.gbc-large {
        /* Keep original size */
        width: 500px;
        transform: none;
        /* Shift left by cable width (290/977 * 500 = 148.4px) */
        margin-left: -148px;
    }

    .gbc-modal-close {
        right: 0;
    }
}

@media (max-width: 480px) {
    .gbc-modal-content {
        max-width: 95vw;
    }

    .gbc-modal-close {
        top: -35px;
        font-size: 20px;
    }
}