/* ================================================================== * * Jetlagidee — shared stylesheet * * Every page is monochromatic: the whole page uses shades of one * color. Themes are defined with CSS variables on the class: * * .content-body (operator) — dark blue * .home-body — dark blue * .comics-body — light purple * .posts-body — light blue * .games-body — light orange * .quizzes-body — light green * ================================================================== */ /* ---------- Base ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; color: #222; background: #fff; } h1, h2, h3, .logo-card, .hero-title, .big-button-title { font-family: Georgia, "Times New Roman", serif; } a { color: var(--link); } a:visited { color: var(--link-visited); } /* ---------- Theme variables ---------- */ /* Default: dark blue (operator page) */ :root { --page-bg1: #223d78; --page-bg2: #12203f; --header-bg: rgba(20, 36, 77, 0.96); --header-border: #4a6bb5; --logo-bg: #2c4a8f; --logo-hover: #3a5fb0; --logo-text: #eaf1ff; --logo-border: #5a79c0; --menu-link: #c3d2f0; --menu-hover: #ffffff; --link: #8fb4ff; --link-visited: #a9bff2; --surface: #ffffff; --surface-soft: #eef3fc; --text: #222222; --text-soft: #55607a; --text-faint: #8a93a8; --heading: #1e3a8a; --accent: #2b5cbb; --accent-hover: #1f4a9e; --accent-strong: #16315f; --accent-soft: #eaf1fb; --accent-border: #2b5cbb; --accent-border-light: #b9cbe8; --danger: #b91c1c; --danger-hover: #991b1b; --danger-soft: #fee2e2; --title-grad1: #2b5cbb; --title-grad2: #4a7cd4; --card-border: #dfe7f4; --footer-text: #9fb2dd; --footer-link: #cfe0ff; --shadow: 0 4px 18px rgba(0, 0, 0, 0.3); } /* Light purple — Comics */ .comics-body { --page-bg1: #f4effd; --page-bg2: #e5daf7; --header-bg: rgba(247, 243, 253, 0.88); --header-border: #b7a5ec; --logo-bg: linear-gradient(135deg, #8b5cf6, #7c3aed); --logo-hover: linear-gradient(135deg, #a78bfa, #8b5cf6); --logo-text: #ffffff; --logo-border: #c4b5fd; --menu-link: #6b5aa8; --menu-hover: #43327c; --link: #6d28d9; --link-visited: #8b5cf6; --surface: #fdfcff; --surface-soft: #f3edfe; --text: #3f2f66; --text-soft: #6e5c9e; --text-faint: #9a8cc2; --heading: #5b21b6; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-strong: #4c1d95; --accent-soft: #f1eafd; --accent-border: #7c3aed; --accent-border-light: #cbbcf3; --danger: #4c1d95; --danger-hover: #3b1480; --danger-soft: #efe6fc; --title-grad1: #7c3aed; --title-grad2: #a855f7; --card-border: #ddd1f6; --footer-text: #6e5c9e; --footer-link: #5b21b6; --shadow: 0 4px 18px rgba(76, 29, 149, 0.18); } /* Light blue — Posts */ .posts-body { --page-bg1: #eff6ff; --page-bg2: #dbeafe; --header-bg: rgba(239, 246, 255, 0.88); --header-border: #93c5fd; --logo-bg: linear-gradient(135deg, #3b82f6, #2563eb); --logo-hover: linear-gradient(135deg, #60a5fa, #3b82f6); --logo-text: #ffffff; --logo-border: #93c5fd; --menu-link: #3b5b9b; --menu-hover: #1e3a8a; --link: #2563eb; --link-visited: #1d4ed8; --surface: #ffffff; --surface-soft: #f0f6ff; --text: #1e3a8a; --text-soft: #4d6aa8; --text-faint: #8aa3cc; --heading: #1d4ed8; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-strong: #1e3a8a; --accent-soft: #e5effd; --accent-border: #2563eb; --accent-border-light: #bcd4f8; --danger: #1e3a8a; --danger-hover: #172e6b; --danger-soft: #e4edfb; --title-grad1: #3b82f6; --title-grad2: #60a5fa; --card-border: #d5e5fb; --footer-text: #4d6aa8; --footer-link: #1d4ed8; --shadow: 0 4px 18px rgba(30, 64, 175, 0.16); } /* Light orange — Games */ .games-body { --page-bg1: #fff7ed; --page-bg2: #ffedd5; --header-bg: rgba(255, 247, 237, 0.9); --header-border: #fdba74; --logo-bg: linear-gradient(135deg, #f97316, #ea580c); --logo-hover: linear-gradient(135deg, #fb923c, #f97316); --logo-text: #ffffff; --logo-border: #fdba74; --menu-link: #9a5b2f; --menu-hover: #7c2d12; --link: #ea580c; --link-visited: #c2410c; --surface: #ffffff; --surface-soft: #fff3e6; --text: #7c2d12; --text-soft: #a05c33; --text-faint: #c08a63; --heading: #c2410c; --accent: #ea580c; --accent-hover: #c2410c; --accent-strong: #9a3412; --accent-soft: #ffedd5; --accent-border: #ea580c; --accent-border-light: #fdcd9c; --danger: #9a3412; --danger-hover: #7c2d12; --danger-soft: #fde8d7; --title-grad1: #f97316; --title-grad2: #fb923c; --card-border: #fadcb8; --footer-text: #a05c33; --footer-link: #c2410c; --shadow: 0 4px 18px rgba(234, 88, 12, 0.16); } /* Light green — Quizzes */ .quizzes-body { --page-bg1: #f0fdf4; --page-bg2: #dcfce7; --header-bg: rgba(240, 253, 244, 0.9); --header-border: #86efac; --logo-bg: linear-gradient(135deg, #22c55e, #16a34a); --logo-hover: linear-gradient(135deg, #4ade80, #22c55e); --logo-text: #ffffff; --logo-border: #86efac; --menu-link: #3f6b4a; --menu-hover: #14532d; --link: #16a34a; --link-visited: #15803d; --surface: #ffffff; --surface-soft: #ecfdf3; --text: #14532d; --text-soft: #4c7a5c; --text-faint: #7da68c; --heading: #15803d; --accent: #16a34a; --accent-hover: #15803d; --accent-strong: #14532d; --accent-soft: #dcfce7; --accent-border: #16a34a; --accent-border-light: #a7e8bd; --danger: #14532d; --danger-hover: #0f3d21; --danger-soft: #d9f3e1; --title-grad1: #22c55e; --title-grad2: #4ade80; --card-border: #c6eed3; --footer-text: #4c7a5c; --footer-link: #15803d; --shadow: 0 4px 18px rgba(22, 163, 74, 0.16); } /* ---------- Shared header ---------- */ .site-header { background: var(--header-bg); border-bottom: 3px solid var(--header-border); padding: 12px 16px; position: relative; z-index: 1; } .header-inner { max-width: 960px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .logo-card { display: inline-block; background: var(--logo-bg); color: var(--logo-text); border: 2px solid var(--logo-border); border-radius: 8px; padding: 6px 16px; font-size: 22px; font-weight: bold; text-decoration: none; letter-spacing: 0.5px; } .logo-card:hover { background: var(--logo-hover); color: var(--logo-text); } .menu { font-size: 15px; } .menu a { color: var(--menu-link); text-decoration: none; margin-left: 18px; } .menu a:hover { color: var(--menu-hover); text-decoration: underline; } .menu a.active { color: var(--menu-hover); text-decoration: underline; font-weight: bold; } /* ---------- Content pages ---------- */ .content-body { background: linear-gradient(180deg, var(--page-bg1) 0%, var(--page-bg2) 100%); min-height: 100vh; display: flex; flex-direction: column; } .page-main { width: 100%; max-width: 960px; margin: 0 auto; padding: 26px 16px 40px; flex: 1; position: relative; z-index: 1; } .card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow); padding: 22px 26px; margin-bottom: 22px; } .card-heading { margin: 0 0 12px; font-size: 22px; color: var(--heading); } .page-heading { margin: 4px 0 16px; font-size: 32px; color: var(--heading); text-align: center; } .operator-main .page-heading { color: #ffffff; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font: inherit; font-size: 15px; padding: 10px 20px; border: 2px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn:disabled { opacity: 0.55; cursor: default; background: var(--accent); border-color: var(--accent); } .btn-secondary { background: var(--surface); color: var(--accent); } .btn-secondary:hover { background: var(--accent-soft); border-color: var(--accent-hover); color: var(--accent-hover); } .btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); } .btn-danger:hover { background: var(--danger-soft); border-color: var(--danger-hover); color: var(--danger-hover); } .btn-small { padding: 6px 12px; font-size: 13px; } /* Prev / Random / Next get slightly different shades of the page color */ .comic-nav .btn-prev { background: var(--accent-strong); border-color: var(--accent-strong); } .comic-nav .btn-random { background: var(--accent); border-color: var(--accent); } .comic-nav .btn-next { background: var(--title-grad2); border-color: var(--title-grad2); } .comic-nav .btn:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } /* ---------- Comics + Posts shared ---------- */ .comic-card, .post-card { text-align: center; } .title-box { display: inline-block; background: linear-gradient(135deg, var(--title-grad1), var(--title-grad2)); border: 2px solid var(--accent-border-light); border-radius: 8px; color: #fff; padding: 8px 20px; margin: 4px 0 16px; font-size: 26px; font-weight: bold; word-wrap: break-word; max-width: 100%; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); } .comic-nav { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; } #comic-image { max-width: 100%; max-height: 65vh; border: 2px solid var(--accent-border-light); border-radius: 8px; background: var(--surface-soft); } .comic-actions { margin: 12px 0 4px; } .alt-box { max-width: 620px; margin: 8px auto 12px; padding: 10px 14px; border: 2px dashed var(--accent-border-light); border-radius: 8px; background: var(--accent-soft); font-size: 15px; line-height: 1.4; color: var(--text); } .notes-box { max-width: 620px; margin: 14px auto 4px; padding: 12px 16px; border: 2px solid var(--accent-border-light); border-radius: 10px; background: var(--accent-soft); text-align: left; } .notes-heading { margin: 0 0 6px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .notes-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-wrap: break-word; } .post-body-text { max-width: 720px; margin: 14px auto 4px; padding: 6px 4px; font-size: 17px; line-height: 1.7; color: var(--text); text-align: left; white-space: pre-wrap; word-wrap: break-word; } .post-date { margin: 8px auto 4px; max-width: 720px; font-size: 12px; color: var(--text-faint); text-align: left; } .meta { font-size: 14px; color: var(--text-soft); margin: 8px 0 0; } /* ---------- Archive grid ---------- */ .archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; text-align: center; } .archive-cell a { text-decoration: none; } .archive-cell img { max-width: 100%; max-height: 150px; border: 1px solid var(--accent-border-light); border-radius: 6px; background: var(--surface-soft); } .archive-cell .cell-title { display: block; margin-top: 6px; font-size: 14px; color: var(--accent); text-decoration: underline; } .archive-cell a:hover .cell-title { color: var(--accent-hover); } /* Post archive cells are text cards instead of image thumbs */ .posts-body .archive-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .post-archive-cell { border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface); padding: 12px 14px; text-align: left; box-shadow: var(--shadow); } .post-archive-cell a { display: flex; flex-direction: column; gap: 6px; } .post-archive-cell .cell-title { display: block; margin: 0; font-size: 15px; font-weight: bold; color: var(--heading); text-decoration: none; } .post-archive-cell a:hover .cell-title { color: var(--accent); } .cell-excerpt { font-size: 13px; line-height: 1.45; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cell-date { font-size: 12px; color: var(--text-faint); } .empty-msg { font-size: 16px; color: var(--text-soft); margin: 12px 0 0; text-align: center; } /* ---------- Home page (dark blue) ---------- */ .home-body { min-height: 100vh; display: flex; flex-direction: column; background: #0a1226; } .home-bg { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, #040a1c 0%, #081735 55%, #0b1e42 100%); } .home-header { position: relative; z-index: 1; padding: 16px 20px; } .home-header .logo-card { background: #2c4a8f; color: #eaf1ff; border-color: #5a79c0; } .home-header .logo-card:hover { background: #3a5fb0; color: #eaf1ff; } .home-header .menu a { color: #b9c8e8; } .home-header .menu a:hover, .home-header .menu a.active { color: #ffffff; } .home-main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .hero-card { max-width: 760px; width: 100%; background: rgba(15, 26, 54, 0.92); border: 1px solid #3b5b9b; border-radius: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); padding: 40px 36px; text-align: center; } .hero-title { margin: 0 0 10px; font-size: 54px; color: #dce7ff; letter-spacing: 1px; } .hero-tagline { margin: 0 0 28px; font-size: 18px; line-height: 1.5; color: #9fb2dd; } .home-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: left; } .big-button { display: block; background: rgba(44, 74, 143, 0.52); color: #eaf1ff; border: 2px solid rgba(122, 154, 216, 0.55); border-radius: 12px; padding: 16px 20px; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; } .big-button:hover { background: rgba(58, 95, 176, 0.62); color: #eaf1ff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } .big-button-title { display: block; font-size: 24px; font-weight: bold; } .big-button-sub { display: block; margin-top: 4px; font-size: 13px; color: rgba(234, 241, 255, 0.72); } .home-footer { position: relative; z-index: 1; text-align: center; color: #8fa6d0; font-size: 13px; padding: 18px 16px 26px; } .home-footer a { color: #bcd0f5; } .home-footer a:visited { color: #bcd0f5; } /* ---------- Operator page ---------- */ .operator-main { text-align: left; } .op-hint { font-size: 14px; color: var(--text-soft); margin: 0 0 14px; } .field { display: block; margin-bottom: 14px; max-width: 560px; } .field span { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 4px; } .field input[type="text"], .field textarea { width: 100%; font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid #999; border-radius: 6px; } .field input[type="file"] { font: inherit; } .op-feedback { font-size: 15px; color: #15803d; margin: 4px 0 12px; } .op-feedback.error { color: #b91c1c; } .op-list { margin-top: 4px; } .op-row { display: flex; gap: 16px; align-items: flex-start; border-top: 1px solid var(--card-border); padding: 14px 0; } .op-thumb { max-width: 150px; max-height: 110px; border: 1px solid var(--accent-border-light); border-radius: 6px; background: var(--surface-soft); flex-shrink: 0; } .op-info { flex: 1; min-width: 0; } .op-row-title { font-size: 17px; font-weight: bold; color: var(--heading); } .op-row-meta { font-size: 13px; color: var(--text-soft); margin: 4px 0 10px; word-wrap: break-word; } .op-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .op-edit-form .field { max-width: 560px; } /* Operator tabs */ .op-tabs { display: flex; gap: 10px; margin: 0 0 18px; } .tab-btn { font: inherit; font-size: 15px; padding: 8px 24px; border: 2px solid #5a79c0; border-radius: 999px; background: transparent; color: #c3d2f0; cursor: pointer; } .tab-btn:hover:not(.active) { background: rgba(91, 121, 192, 0.25); } .tab-btn.active { background: #2b5cbb; border-color: #7d9de0; color: #ffffff; } /* ---------- Games filler page ---------- */ .games-body .page-main { max-width: 1080px; } .game-intro, .quiz-intro { text-align: center; color: var(--text-soft); font-size: 15px; margin: 0 0 26px; } .game-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } .game-card { width: 220px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--shadow); padding: 20px 16px; text-align: center; } .game-icon { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; background: var(--accent-soft); border: 2px solid var(--accent-border-light); } .game-name { margin: 0 0 6px; font-size: 18px; font-weight: bold; color: var(--heading); } .game-desc { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--text-soft); } .game-tag { display: inline-block; font-size: 12px; padding: 3px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border-light); } /* ---------- Quizzes filler page (JetPunk style) ---------- */ .quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .quiz-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; } .quiz-thumb { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 46px; background: linear-gradient(135deg, var(--title-grad1), var(--title-grad2)); } .quiz-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .qz-cover-preview { max-width: 260px; margin: 0 0 14px; border: 2px solid var(--accent-border-light); border-radius: 10px; overflow: hidden; } .qz-cover-preview img { display: block; width: 100%; height: 120px; object-fit: cover; } .quiz-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .quiz-name { margin: 0; font-size: 15px; font-weight: bold; color: var(--heading); } .quiz-desc { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-soft); } .quiz-meta { margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--text-faint); display: flex; justify-content: space-between; align-items: center; } .quiz-badge { font-size: 11px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border-light); } /* ---------- Quizzes: operator upload + player ---------- */ .quiz-playable { font: inherit; text-align: left; width: 100%; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .quiz-playable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16); } .quiz-op-panel { max-width: 720px; margin: 26px auto 0; } .quiz-op-row .op-actions { justify-content: flex-end; } .qz-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 560px) { .qz-form-grid { grid-template-columns: 1fr; } } .qz-row { border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; } .qz-row input[type="text"] { font: inherit; padding: 7px 9px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--surface); color: inherit; } .qz-row input[type="text"]:focus { outline: none; border-color: var(--accent); } .qz-options-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } @media (max-width: 560px) { .qz-options-wrap { grid-template-columns: 1fr; } } .qz-opt { display: flex; align-items: center; gap: 7px; } .qz-opt-input { flex: 1; min-width: 0; } .qz-row-fi { flex-direction: row; flex-wrap: wrap; align-items: center; } .qz-row-fi .qz-row-question { flex: 1 1 220px; } .qz-row-fi .qz-row-answers { flex: 1 1 260px; } /* ---- Player overlay ---- */ .quiz-player { position: fixed; inset: 0; background: rgba(20, 22, 31, 0.62); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 1000; } .quiz-player[hidden] { display: none; } body.quiz-player-open { overflow: hidden; } .quiz-player-box { width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; } .quiz-player-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--card-border); } .quiz-player-head strong { font-size: 17px; color: var(--heading); } .quiz-player-close { font: inherit; font-size: 22px; line-height: 1; padding: 2px 10px; border: none; background: transparent; color: var(--text-soft); cursor: pointer; border-radius: 8px; } .quiz-player-close:hover { background: var(--accent-soft); color: var(--heading); } .quiz-player-timer { margin: 0; padding: 8px 18px; text-align: center; font-size: 26px; font-weight: bold; font-variant-numeric: tabular-nums; color: var(--heading); background: var(--accent-soft); border-bottom: 1px solid var(--card-border); } .quiz-player-timer.qp-timer-low { color: var(--danger); } .quiz-player-body { padding: 18px; } .qp-progress { margin: 0 0 8px; font-size: 13px; color: var(--text-soft); } .qp-prompt { margin: 0 0 16px; font-size: 20px; line-height: 1.4; color: var(--heading); } .qp-options { display: flex; flex-direction: column; gap: 10px; } .qp-option { font: inherit; text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--surface); color: inherit; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .qp-option:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); } .qp-option:disabled { cursor: default; opacity: 0.8; } .qp-option-selected { border-color: var(--accent) !important; background: var(--accent-soft) !important; font-weight: bold; } .qp-option-correct { border-color: #166534 !important; background: rgba(22, 101, 52, 0.14) !important; color: #14532d !important; font-weight: bold; } .qp-option-wrong { border-color: #b91c1c !important; background: rgba(185, 28, 28, 0.12) !important; color: #7f1d1d !important; } .qp-feedback { min-height: 22px; margin: 12px 0 0; font-weight: bold; color: var(--text-soft); } .qp-feedback-ok { color: #15803d; } .qp-feedback-error { color: #b91c1c; } .qp-input-row { display: flex; gap: 8px; margin-top: 14px; } .qp-input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface); color: inherit; } .qp-input:focus { outline: none; border-color: var(--accent); } .qp-input-wrong { border-color: #b91c1c !important; background: rgba(185, 28, 28, 0.1) !important; animation: qp-shake 0.4s ease; } @keyframes qp-shake { 0% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } 100% { transform: translateX(0); } } .qp-next-row { display: flex; justify-content: flex-end; margin-top: 14px; } .qp-score { margin: 0 0 12px; font-size: 16px; font-weight: bold; color: var(--heading); } .qp-typein-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .qp-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(22, 101, 52, 0.14); border: 1px solid #166534; color: #14532d; font-size: 14px; font-weight: 600; } .qp-chip-miss { background: var(--accent-soft); border-color: var(--accent-border-light); color: var(--text-soft); font-weight: normal; } .qp-results { text-align: center; } .qp-results-title { margin: 0 0 6px; color: var(--heading); } .qp-results-big { margin: 0 0 16px; font-size: 22px; font-weight: bold; color: var(--accent); } .qp-report { margin: 0 0 18px; text-align: left; display: flex; flex-direction: column; gap: 10px; } .qp-report-row { border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; background: var(--surface); } .qp-report-ok { border-color: #166534; } .qp-report-err { border-color: #b91c1c; } .qp-report-head { font-weight: bold; color: var(--heading); margin-bottom: 4px; } .qp-report-line { font-size: 13px; color: var(--text-soft); line-height: 1.45; } .qp-missed { margin: 0 0 18px; } .qp-missed-title { margin: 0 0 10px; font-weight: bold; color: var(--heading); } .qp-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } /* ---------- Comics page background ---------- */ .comics-bg { position: fixed; inset: -40px; z-index: 0; background-color: #e5daf7; background-image: linear-gradient(rgba(244, 239, 253, 0.9), rgba(233, 222, 250, 0.94)), url("Resourses/TempBackground_2.jpg"); background-size: cover; background-position: center; filter: blur(14px); } .comics-body .site-header, .comics-body .page-main, .comics-body .site-footer { position: relative; z-index: 1; } /* ---------- Server notice ---------- */ .server-note { max-width: 760px; margin: 0 auto 18px; background: #fef2f2; border: 2px solid #dc2626; border-radius: 8px; color: #991b1b; font-size: 14px; padding: 10px 14px; } /* ---------- Footer ---------- */ .site-footer { text-align: center; color: var(--footer-text); font-size: 13px; padding: 16px 16px 26px; border-top: 1px solid var(--card-border); position: relative; z-index: 1; } .site-footer p { margin: 4px 0; } .site-footer a { color: var(--footer-link); } .site-footer a:visited { color: var(--footer-link); } /* ---------- Operator login (home page) ---------- */ .operator-area { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; } .operator-area input[type="password"] { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid #5a79c0; border-radius: 6px; background: #101c3c; color: #dce7ff; width: 210px; } .op-login-error { color: #ffb3b3; font-size: 13px; } .home-body .btn-small { display: inline-block; font: inherit; font-size: 13px; padding: 5px 12px; border: 2px solid #5a79c0; border-radius: 8px; background: #2c4a8f; color: #eaf1ff; cursor: pointer; text-decoration: none; } .home-body .btn-small:hover { background: #3a5fb0; color: #eaf1ff; } /* Operator page: logged-in bar */ .op-session { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; background: #eaf1fb; border: 2px solid #2b5cbb; border-radius: 8px; color: #16315f; font-size: 14px; padding: 8px 14px; } /* Comics/posts page: operator-only edit/delete strip */ .op-strip { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 2px; } /* ---------- Small screens ---------- */ @media (max-width: 560px) { .home-buttons { grid-template-columns: 1fr; } .hero-title { font-size: 40px; } .hero-card { padding: 28px 20px; } .menu a { margin-left: 10px; } .op-row { flex-direction: column; } .op-thumb { max-width: 100%; max-height: none; } .game-card { width: 100%; max-width: 300px; } } /* ================================================================== * * Reverse Nim game + background box * ================================================================== */ .nim-rules { margin: 0 0 4px; font-size: 15px; color: var(--text); } .nim-sub { font-size: 14px; color: var(--text-soft); font-weight: normal; } .nim-step-label { margin: 16px 0 8px; font-size: 14px; font-weight: bold; color: var(--heading); } .pill-group { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; } .pill { font: inherit; font-size: 14px; padding: 7px 16px; border: 2px solid var(--accent-border-light); border-radius: 999px; background: var(--surface); color: var(--accent); cursor: pointer; } .pill:hover { background: var(--accent-soft); } .pill.active { background: var(--accent); border-color: var(--accent); color: #ffffff; } .nim-opt-note { font-size: 13px; color: var(--text-soft); margin: 8px 0 0; } #nim-start { margin-top: 18px; } .nim-status { margin: 0 0 10px; font-size: 18px; font-weight: bold; color: var(--heading); } .nim-board { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: 16px 0 8px; } .nim-pile { display: flex; flex-direction: column; align-items: center; gap: 6px; } .nim-stack { display: flex; flex-direction: column-reverse; gap: 4px; } .nim-card { width: 66px; height: 32px; border: 2px solid var(--accent-border); border-radius: 7px; background: var(--surface); color: var(--heading); font: inherit; font-size: 14px; font-weight: bold; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .nim-card:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-hover); } .nim-card:disabled { opacity: 0.55; cursor: default; } .nim-empty { font-size: 13px; color: var(--text-faint); padding: 8px 0; } .nim-pile-count { font-size: 13px; font-weight: bold; color: var(--text-soft); } .nim-pile-label { font-size: 12px; color: var(--text-faint); letter-spacing: 1px; text-transform: uppercase; } .nim-hint { margin: 10px 0 0; font-size: 14px; color: var(--text-soft); } .nim-result { margin: 14px 0 4px; padding: 14px 16px; border: 2px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); text-align: center; } .nim-result-text { margin: 0 0 10px; font-size: 17px; font-weight: bold; color: var(--heading); } .nim-log-box { margin-top: 16px; } .nim-log-title { margin: 0 0 6px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-soft); } .nim-log { max-height: 130px; overflow-y: auto; background: var(--surface-soft); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-soft); } .nim-log-entry { padding: 2px 0; } .nim-quit-row { margin: 14px 0 0; } .games-subheading { margin: 26px 0 14px; } /* Background box (scrollable) */ .bg-card .card-heading { margin-bottom: 10px; } .bg-scroll { max-height: 300px; overflow-y: auto; padding-right: 8px; font-size: 14.5px; line-height: 1.65; color: var(--text); } .bg-scroll h3 { margin: 16px 0 6px; font-size: 16px; color: var(--heading); } .bg-scroll p { margin: 0 0 10px; } .bg-scroll ul { margin: 0 0 10px; padding-left: 22px; } .bg-scroll li { margin-bottom: 6px; } .bg-scroll code { background: var(--accent-soft); border: 1px solid var(--accent-border-light); border-radius: 4px; padding: 1px 6px; font-size: 13px; } /* ---------- Game hub: cards that link to a game page ---------- */ .game-link { display: block; text-decoration: none; color: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease; } .game-link:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); } .game-tag.playable { background: var(--accent); border-color: var(--accent); color: #ffffff; } /* ---------- Collapsible background box on game pages ---------- */ .bg-box { padding: 0; overflow: hidden; } .bg-summary { cursor: pointer; padding: 16px 20px; font-size: 16px; font-weight: bold; color: var(--heading); list-style: none; } .bg-summary::-webkit-details-marker { display: none; } .bg-summary::before { content: '▶ '; color: var(--accent); } .bg-box[open] .bg-summary { border-bottom: 1px solid var(--card-border); } .bg-box[open] .bg-summary::before { content: '▼ '; } .bg-box .bg-scroll { padding: 8px 20px 20px; } /* ================================================================== * * Hurdle (6-letter cryptic word game) * ================================================================== */ .hurdle-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; margin: 0 0 18px; font-size: 13px; color: var(--text-soft); } .hurdle-legend .swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; margin-right: 6px; vertical-align: -3px; border: 1px solid rgba(0, 0, 0, 0.15); } .swatch.exact-consonant { background: #166534; } .swatch.exact-vowel { background: #86efac; } .swatch.wrong-consonant { background: #b45309; } .swatch.wrong-vowel { background: #fde68a; } .hurdle-wrap { max-width: 420px; margin: 0 auto; } .hurdle-grid { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; } .hurdle-row { display: flex; gap: 6px; justify-content: center; } .hurdle-cell { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; text-transform: uppercase; color: var(--heading); background: var(--surface); border: 2px solid var(--card-border); border-radius: 8px; } .hurdle-cell.exact-consonant { background: #166534; border-color: #166534; color: #ffffff; } .hurdle-cell.exact-vowel { background: #86efac; border-color: #86efac; color: #14532d; } .hurdle-cell.wrong-consonant { background: #b45309; border-color: #b45309; color: #ffffff; } .hurdle-cell.wrong-vowel { background: #fde68a; border-color: #fde68a; color: #78350f; } .hurdle-counter { text-align: center; font-size: 13px; color: var(--text-soft); margin: 0 0 10px; } .hurdle-status { text-align: center; font-size: 17px; font-weight: bold; color: var(--heading); margin: 0 0 12px; min-height: 22px; } .hurdle-status.error { color: #dc2626; } .hurdle-row.shake { animation: hurdle-shake 0.35s ease; } @keyframes hurdle-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .hurdle-keyboard { margin: 6px 0 0; } .hurdle-key-row { display: flex; gap: 5px; justify-content: center; margin-bottom: 5px; } .hurdle-key { font: inherit; font-size: 14px; font-weight: bold; min-width: 34px; height: 46px; padding: 0 6px; border: 2px solid var(--accent-border-light); border-radius: 7px; background: var(--surface); color: var(--heading); cursor: pointer; } .hurdle-key:hover { background: var(--accent-soft); } .hurdle-key.wide { min-width: 62px; font-size: 12px; } .hurdle-actions { display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; flex-wrap: wrap; } /* Keep the text centered inside the back-to-games link */ .hurdle-actions a.btn, .nim-quit-row a.btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; text-align: center; } /* ================================================================== * * Cactus Run (Google-Dino-style parody) * ================================================================== */ .dino-panel { text-align: center; } #dino-canvas { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; background: #f7f7f7; border: 1px solid var(--card-border); border-radius: 8px; touch-action: none; cursor: pointer; } .dino-buttons, .dino-actions { display: flex; justify-content: center; gap: 10px; margin: 14px 0 0; flex-wrap: wrap; } .dino-actions a.btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; text-align: center; } kbd { font-family: inherit; background: var(--accent-soft); border: 1px solid var(--accent-border-light); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; font-size: 13px; } /* ================================================================== * * Off by One Error (24-game variant) * ================================================================== */ .oboe-panel { max-width: 560px; margin: 0 auto 22px; } .oboe-hud { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--text-soft); border-bottom: 1px solid var(--card-border); padding-bottom: 10px; margin-bottom: 14px; } .oboe-hud strong { color: var(--heading); } .oboe-time-low { color: var(--danger); } .oboe-start { text-align: center; padding: 26px 10px 16px; } .oboe-start p { margin: 0 0 16px; max-width: 420px; margin-left: auto; margin-right: auto; } .oboe-cards { display: flex; justify-content: center; gap: 12px; margin: 6px 0 16px; flex-wrap: wrap; } .oboe-card { position: relative; width: 64px; height: 92px; border: 2px solid var(--card-border); border-radius: 9px; background: #ffffff; color: var(--heading); font-family: inherit; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s ease; } .oboe-card:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14); } .oboe-card-used { opacity: 0.45; } .oboe-card-suit { position: absolute; top: 5px; left: 7px; font-size: 14px; color: var(--danger); } .oboe-card-suit-bottom { top: auto; bottom: 5px; left: auto; right: 7px; transform: rotate(180deg); } .oboe-card-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; margin: 0; } .oboe-input-row { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; } .oboe-input-row input { flex: 1; min-width: 0; font: inherit; font-size: 20px; padding: 10px 12px; border: 2px solid var(--card-border); border-radius: 8px; background: var(--surface); color: var(--heading); } .oboe-input-row input:focus { outline: none; border-color: var(--accent); } .oboe-preview { font: bold 20px "Courier New", monospace; color: var(--text-soft); min-width: 70px; text-align: center; } .oboe-preview-ok { color: #166534; } .oboe-pad { display: flex; justify-content: center; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; } .oboe-key { min-width: 42px; } .oboe-actions { display: flex; justify-content: center; gap: 10px; margin: 0; flex-wrap: wrap; } .oboe-actions a.btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; text-align: center; } .oboe-feedback { text-align: center; margin-top: 12px; font-weight: bold; min-height: 22px; color: var(--text-soft); } .oboe-feedback-ok { color: #166534; } .oboe-feedback-error { color: var(--danger); } .oboe-results { max-width: 640px; margin: 0 auto 22px; } .oboe-final { font-size: 18px; text-align: center; margin: 6px 0 4px; } .oboe-final strong { color: var(--accent); font-size: 26px; } .oboe-final-comment { text-align: center; color: var(--text-soft); margin: 0 0 14px; } .oboe-time-note { text-align: center; color: var(--danger); font-weight: bold; margin: 0 0 8px; } .oboe-table-wrap { overflow-x: auto; margin: 0 0 16px; } .oboe-table { width: 100%; border-collapse: collapse; font-size: 14px; } .oboe-table th, .oboe-table td { border: 1px solid var(--card-border); padding: 7px 9px; text-align: left; } .oboe-table th { background: var(--accent-soft); color: var(--heading); } .oboe-table td:last-child { text-align: center; }