* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        repeating-linear-gradient(
            0deg,
            #d7d7d7 0px,
            #d7d7d7 1px,
            #eeeeee 1px,
            #eeeeee 3px
        );
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.page {
    width: 960px;
    max-width: calc(100% - 20px);
    margin: 20px auto;
    background: #fff;
    border: 1px solid #777;
    box-shadow: 3px 3px 0 #555;
}

/* HEADER */

.header {
    min-height: 190px;
    padding: 20px;
    background:
        linear-gradient(
            #f8f8f8,
            #d4d4d4
        );
    border-bottom: 1px solid #777;
    display: flex;
    align-items: center;
    gap: 25px;
}

.logo {
    width: 230px;
    height: 150px;
    object-fit: contain;
    display: block;
}

.site-title h1 {
    margin: 0;
    color: #222;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 32px;
    text-shadow: 1px 1px white;
}

.site-title p {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

/* NAVIGATION */

.navbar {
    height: 38px;
    padding-left: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(#4e4e4e, #242424);
    border-bottom: 1px solid #111;
}

.navbar a {
    padding: 7px 15px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-left: 1px solid #555;
    border-right: 1px solid #222;
}

.navbar a:hover {
    background: #666;
}

/* CONTENT */

.content {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 15px;
    padding: 15px;
    background: #eeeeee;
}

/* SIDEBAR */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.box {
    background: white;
    border: 1px solid #999;
    box-shadow: 1px 1px 0 #ccc;
}

.box-title {
    padding: 7px 9px;
    color: white;
    background: linear-gradient(#666, #333);
    border-bottom: 1px solid #222;
    font-size: 12px;
    font-weight: bold;
}

.box p,
.box ol {
    margin: 10px;
    line-height: 1.5;
}

.box ol {
    padding-left: 28px;
}

/* GAME */

.game {
    background: white;
    border: 1px solid #999;
    padding: 15px;
}

.game-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
}

.game-title h2 {
    margin: 0;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 23px;
}

.game-title span {
    padding: 4px 7px;
    background: #eee;
    border: 1px solid #bbb;
    color: #555;
    font-size: 10px;
    font-weight: bold;
}

.question {
    margin: 12px 0;
    font-weight: bold;
}

/* FAKE BROWSER */

.website-window {
    border: 2px solid #555;
    background: #ccc;
    box-shadow: inset 0 0 0 1px white;
}

.window-top {
    height: 38px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(#eeeeee, #c5c5c5);
    border-bottom: 1px solid #777;
}

.window-buttons {
    display: flex;
    gap: 4px;
}

.window-buttons span {
    width: 12px;
    height: 12px;
    display: block;
    background: #888;
    border: 1px solid #555;
}

.address-bar {
    flex: 1;
    height: 23px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #888;
    color: #555;
    font-size: 11px;
}

.website-preview {
    position: relative;
    height: 430px;
    overflow: hidden;
    background: white;
}

#websiteContent {
    height: 100%;
    padding: 20px;
}

#blurOverlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(14px);
    transition: backdrop-filter .5s ease, opacity .5s ease;
}

#revealText {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 2px 2px 3px black;
    transition: opacity .4s;
}

#revealText b {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
    background: #333;
    font-size: 35px;
}

#revealText span {
    margin-top: 10px;
    font-weight: bold;
}

/* STATUS */

.window-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: #ddd;
    border-top: 1px solid #999;
    font-size: 10px;
    color: #444;
}

.progress {
    flex: 1;
    height: 8px;
    border: 1px solid #888;
    background: white;
}

.progress div {
    width: 0%;
    height: 100%;
    background: #386aa0;
}

/* CATEGORY */

.category {
    margin: 10px 0;
    color: #666;
    font-size: 11px;
}

.category b {
    color: #333;
}

/* INPUT */

.guess-area {
    display: flex;
    gap: 6px;
}

.guess-area input {
    flex: 1;
    height: 35px;
    padding: 7px;
    border: 1px solid #888;
    background: white;
    font-family: Arial;
    font-size: 13px;
}

.guess-area input:focus {
    outline: 1px solid #386aa0;
}

/* BUTTONS */

.old-button {
    padding: 7px 13px;
    border: 1px solid #555;
    border-radius: 2px;
    background: linear-gradient(#fafafa, #c7c7c7);
    color: #222;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 1px 1px 0 #aaa;
}

.old-button:hover {
    background: linear-gradient(#ffffff, #d9d9d9);
}

.old-button:active {
    box-shadow: inset 1px 1px 2px #888;
}

.submit {
    min-width: 125px;
}

.game-buttons {
    margin-top: 8px;
}

.hint {
    padding: 8px;
    border: 1px solid #ccc;
    background: #ffffdc;
    font-size: 11px;
}

.hidden {
    display: none !important;
}

.message {
    min-height: 25px;
    margin-top: 10px;
    padding: 6px;
    font-weight: bold;
}

.message.correct {
    color: #176b20;
    background: #e5f5e5;
    border: 1px solid #9ac99a;
}

.message.wrong {
    color: #9b1717;
    background: #ffe7e7;
    border: 1px solid #d69b9b;
}

/* TERMS */

.terms {
    padding: 20px;
    border-top: 1px solid #999;
    background: #f5f5f5;
}

.terms h2 {
    margin-top: 0;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 20px;
}

.terms p {
    max-width: 800px;
    color: #555;
    line-height: 1.6;
}

.terms .copyright {
    margin-top: 20px;
    color: #777;
    font-size: 11px;
}

/* FOOTER */

footer {
    padding: 12px;
    text-align: center;
    background: #333;
    color: #ccc;
    font-size: 11px;
}

/* RESULT */

.result {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .65);
}

.result-box {
    width: 390px;
    max-width: calc(100% - 30px);
    padding: 25px;
    text-align: center;
    background: #eee;
    border: 2px solid #555;
    box-shadow: 5px 5px 0 #222;
}

.result-logo {
    width: 180px;
    max-height: 110px;
    object-fit: contain;
}

.result-box h2 {
    margin: 10px 0;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.result-box strong {
    display: block;
    margin: 10px;
    color: #24578b;
    font-size: 42px;
}

@media (max-width: 700px) {

    .content {
        grid-template-columns: 1fr;
    }

    .header {
        flex-direction: column;
        text-align: center;
    }

    .logo {
        width: 260px;
        height: 150px;
    }

    .site-title h1 {
        font-size: 25px;
    }

    .guess-area {
        flex-direction: column;
    }

    .submit {
        width: 100%;
    }

    .website-preview {
        height: 330px;
    }
}

/* Website preview system */
.address-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.address-lock {
    color: #45a67d;
    font-size: 9px;
}

.address-value {
    display: inline-block;
    min-width: 150px;
    filter: blur(9px);
    opacity: .55;
    user-select: none;
}

.website-preview {
    background: #f4f6f8;
}

#websiteContent {
    padding: 0;
    color: #152536;
    transition: filter .5s ease, transform .5s ease;
    transform-origin: center;
}

.mock {
    min-height: 100%;
    padding: 28px;
    overflow: hidden;
    font-family: "Segoe UI", system-ui, sans-serif;
}

.mock h1, .mock h2, .mock h3, .mock p { margin-top: 0; }
.mock h1 { font-size: clamp(1.7rem, 4vw, 2.8rem); letter-spacing: -.04em; }
.mock h2 { font-size: 1.1rem; }
.mock p { line-height: 1.45; }
.mock button { border: 0; border-radius: 6px; padding: 9px 14px; font: inherit; cursor: default; }

.google { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; text-align: center; }
.google h1 { font-size: 4.2rem; letter-spacing: -.14em; }
.google h1 span:nth-child(1), .google h1 span:nth-child(4) { color: #4285f4; }
.google h1 span:nth-child(2), .google h1 span:nth-child(6) { color: #ea4335; }
.google h1 span:nth-child(3) { color: #fbbc05; }
.google h1 span:nth-child(5) { color: #34a853; }
.google .search { width: min(480px, 90%); height: 42px; border: 1px solid #dfe3e8; border-radius: 99px; box-shadow: 0 3px 10px rgba(32,50,70,.12); margin: 0 0 18px; }
.google button { margin: 3px; background: #f1f3f4; color: #3c4043; font-size: .75rem; }

.youtube { background: #fff; }
.youtube h1 { color: #171717; border-bottom: 1px solid #e9e9e9; padding-bottom: 18px; }
.youtube h1 b { display: inline-grid; place-items: center; width: 38px; height: 27px; margin-right: 8px; border-radius: 7px; background: #ff0033; color: #fff; font-size: .9rem; }
.cards, .stream-cards, .steam-games, .roblox-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cards div { min-height: 100px; border-radius: 8px; background: linear-gradient(135deg, #ffb36b, #e8edf2 45%, #9dc8d8); }
.cards::after { content: "Trending videos     Recommended     Subscriptions"; grid-column: 1 / -1; color: #53606c; font-size: .8rem; }

.wiki { background: #fff; color: #202122; }
.wiki h1 { font-family: Georgia, serif; color: #202122; font-weight: 400; letter-spacing: -.03em; }
.wiki small { color: #54595d; }
.wiki hr { border: 0; border-top: 1px solid #a2a9b1; margin: 18px 0; }
.wiki h2 { font-family: Georgia, serif; font-weight: 400; }
.wiki-box { padding: 15px; border: 1px solid #a2a9b1; background: #f8f9fa; line-height: 2; color: #3366cc; }

.reddit { background: #f7f8fa; color: #1c1c1c; }
.reddit h1 { color: #ff4500; font-size: 1.9rem; }
.reddit article { margin: 10px 0; padding: 15px; border: 1px solid #d5d8da; border-radius: 6px; background: #fff; }
.reddit article p { margin: 8px 0 0; color: #6a737c; font-size: .75rem; }

.discord { display: grid; grid-template-columns: 130px 1fr; gap: 22px; background: #313338; color: #dbdee1; }
.discord h1 { grid-column: 1 / -1; color: #fff; font-size: 1.6rem; margin-bottom: -8px; }
.discord h3 { margin: 0; color: #949ba4; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.discord p { margin: 4px 0; color: #b5bac1; font-size: .9rem; }

.github { background: #fff; color: #1f2328; }
.github h1 { color: #1f2328; font-size: 1.8rem; }
.github > p { color: #656d76; }
.repo { display: inline-block; vertical-align: top; width: calc(50% - 9px); min-height: 105px; margin: 5px 8px 5px 0; padding: 15px; border: 1px solid #d0d7de; border-radius: 7px; }
.repo:last-child { margin-right: 0; }
.repo b { color: #0969da; }
.repo p { color: #656d76; font-size: .8rem; }

.roblox { background: #fff; color: #161616; }
.roblox h1 { color: #111; font-weight: 800; letter-spacing: -.08em; }
.roblox-games div { min-height: 120px; border-radius: 8px; background: linear-gradient(135deg, #20b2aa, #f3c36b); }
.roblox-games div:nth-child(2) { background: linear-gradient(135deg, #ef6f6c, #8cb5e8); }
.roblox-games div:nth-child(3) { background: linear-gradient(135deg, #9368d8, #68c6aa); }
.roblox-games div:nth-child(4) { background: linear-gradient(135deg, #e4a853, #e779a7); }

.spotify { background: linear-gradient(135deg, #142820, #1d3f2d); color: #f5f7f5; }
.spotify h1 { color: #1ed760; font-size: 1.8rem; }
.spotify h2 { margin-top: 40px; }
.spotify-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.spotify-cards div { min-height: 100px; padding: 12px; border-radius: 7px; background: linear-gradient(145deg, #5b7567, #24382d); font-weight: 700; }

.twitch { background: #0e0e10; color: #efeff1; }
.twitch h1 { color: #a970ff; font-size: 1.9rem; }
.twitch h2 { color: #dedee3; margin-top: 28px; }
.stream-cards div { min-height: 125px; background: linear-gradient(135deg, #35225e, #ca5a95); border-radius: 5px; }
.stream-cards div:nth-child(2) { background: linear-gradient(135deg, #204e5e, #e08e58); }
.stream-cards div:nth-child(3) { background: linear-gradient(135deg, #5a3154, #5ea6cf); }

.steam { background: linear-gradient(135deg, #182e4a, #204b74); color: #e5f1ff; }
.steam h1 { color: #66c0f4; font-size: 2rem; }
.steam h2 { color: #fff; margin-top: 28px; }
.steam-games { grid-template-columns: repeat(2, 1fr); }
.steam-games div { min-height: 145px; background: linear-gradient(135deg, #4b9dc7, #27365b); }
.steam-games div:nth-child(2) { background: linear-gradient(135deg, #b95e49, #3b274d); }

@media (max-width: 600px) {
    .mock { padding: 18px; }
    .google h1 { font-size: 3rem; }
    .discord { grid-template-columns: 1fr; }
    .cards, .stream-cards, .steam-games, .roblox-games, .spotify-cards { grid-template-columns: repeat(2, 1fr); }
    .repo { width: 100%; margin-right: 0; }
}

/* Modern interface layer */
:root {
    color-scheme: dark;
    --ink: #e8f0f7;
    --muted: #91a5b7;
    --surface: #0d1b29;
    --surface-raised: #12263a;
    --line: rgba(171, 207, 231, .18);
    --accent: #42d3c2;
    --accent-warm: #ffcc66;
    --danger: #ff7f8e;
}

body {
    background: #07131f;
    background-image: radial-gradient(circle at 15% 0%, rgba(66, 211, 194, .12), transparent 30%), linear-gradient(145deg, #07131f, #0b1827 55%, #10172a);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
}

.page {
    width: min(1120px, calc(100% - 32px));
    margin: 28px auto;
    overflow: hidden;
    background: rgba(13, 27, 41, .86);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.header {
    min-height: 180px;
    padding: 32px 38px;
    background: linear-gradient(115deg, rgba(18, 38, 58, .95), rgba(10, 31, 46, .7));
    border-bottom: 1px solid var(--line);
}

.logo { width: 190px; height: 125px; }
.site-title h1, .game-title h2, .terms h2, .result-box h2 { font-family: Georgia, serif; letter-spacing: -.02em; }
.site-title h1 { color: var(--ink); font-size: clamp(2rem, 4vw, 3.1rem); text-shadow: none; }
.site-title p { color: var(--muted); font-size: 1rem; }

.navbar { height: auto; padding: 8px 18px; gap: 6px; background: rgba(5, 16, 27, .9); border-bottom: 1px solid var(--line); }
.navbar a { padding: 11px 14px; color: var(--muted); border: 0; border-radius: 8px; }
.navbar a:hover, .navbar a:focus-visible { background: rgba(66, 211, 194, .12); color: var(--accent); outline: none; }

.content { grid-template-columns: 250px minmax(0, 1fr); gap: 20px; padding: 22px; background: transparent; }
.sidebar { gap: 16px; }
.box, .game { background: rgba(18, 38, 58, .72); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.box-title { padding: 10px 13px; color: var(--accent); background: rgba(4, 14, 24, .55); border-bottom: 1px solid var(--line); letter-spacing: .12em; }
.box p, .box ol { color: var(--muted); line-height: 1.65; }
.game { padding: 24px; }
.game-title { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.game-title h2 { font-size: 2rem; }
.game-title span { padding: 6px 9px; background: rgba(255, 204, 102, .12); border: 1px solid rgba(255, 204, 102, .3); border-radius: 999px; color: var(--accent-warm); font-size: 11px; letter-spacing: .1em; }
.question { color: var(--muted); font-weight: 500; }
.website-window { border: 1px solid rgba(255,255,255,.25); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.window-top { height: 42px; background: #dce5e9; border-bottom: 1px solid #a9bac1; }
.window-buttons span { border: 0; border-radius: 50%; }
.window-buttons span:nth-child(1) { background: #ff6f61; }
.window-buttons span:nth-child(2) { background: #f8c44f; }
.window-buttons span:nth-child(3) { background: #45c486; }
.address-bar { border: 0; border-radius: 6px; color: #50616b; }
.website-preview { height: 420px; }
.window-status { padding: 9px 12px; background: #d4e0e4; border-top: 1px solid #a9bac1; color: #40535e; }
.progress { height: 7px; border: 0; border-radius: 99px; overflow: hidden; background: #b8c9cf; }
.progress div { background: var(--accent); }
.category { color: var(--muted); }
.category b { color: var(--accent); }
.guess-area input { height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(3, 12, 21, .7); color: var(--ink); font: inherit; }
.guess-area input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.old-button { padding: 10px 15px; border: 1px solid rgba(66,211,194,.45); border-radius: 8px; background: rgba(66,211,194,.1); color: var(--accent); font: inherit; transition: transform .2s ease, background .2s ease; box-shadow: none; }
.old-button:hover, .old-button:focus-visible { background: rgba(66,211,194,.2); transform: translateY(-1px); outline: none; }
.hint { border: 1px solid rgba(255,204,102,.3); border-radius: 8px; background: rgba(255,204,102,.1); color: #ffe4a3; }
.message { border-radius: 8px; }
.message.correct { color: #9bf3d3; background: rgba(66,211,194,.12); border-color: rgba(66,211,194,.35); }
.message.wrong { color: #ffb3bb; background: rgba(255,127,142,.1); border-color: rgba(255,127,142,.35); }
.terms { padding: 28px 38px; background: rgba(4, 14, 24, .45); border-top: 1px solid var(--line); }
.terms p { color: var(--muted); }
footer { background: #06101a; color: var(--muted); border-top: 1px solid var(--line); }
.result { background: rgba(1, 8, 15, .84); backdrop-filter: blur(8px); }
.result-box { padding: 32px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.result-box strong { color: var(--accent); }

@media (max-width: 700px) {
    .page { width: min(100% - 20px, 1120px); margin: 10px auto; }
    .header { padding: 26px 20px; }
    .content { grid-template-columns: 1fr; padding: 12px; }
    .game { padding: 16px; }
    .terms { padding: 24px 20px; }
    .website-preview { height: 330px; }
}