:root { --ink: #253b4a; --muted: #6a7e86; --paper: #fffefa; --cream: #f4fbf5; --yellow: #ffc857; --orange: #ff815e; --teal: #39bda8; --blue: #568fe8; --line: #dcebe3; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 8% 5%, #fff0bc 0 9rem, transparent 22rem), radial-gradient(circle at 93% 28%, #d7f3ee 0 12rem, transparent 25rem), var(--cream); font-family: "Be Vietnam Pro", sans-serif; }
button, input { font: inherit; }
button, a { cursor: pointer; }
.arcade-shell { max-width: 1160px; margin: auto; padding: 0 24px 42px; }
.arcade-topbar { display: flex; justify-content: space-between; align-items: center; min-height: 76px; }
.arcade-brand { color: var(--ink); text-decoration: none; font: 800 25px "Baloo 2", sans-serif; }.arcade-brand span { display: inline-grid; place-items: center; width: 33px; height: 33px; margin-right: 6px; border-radius: 12px 12px 12px 4px; color: white; background: var(--orange); transform: rotate(-8deg); }
.back-link { color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; }.back-link:hover, footer a:hover { color: var(--orange); }
.arcade-hero { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 290px; margin-bottom: 28px; padding: 40px 58px; overflow: hidden; border-radius: 29px 29px 29px 7px; color: white; background: linear-gradient(125deg, #254b58, #367f83 58%, #58b29c); box-shadow: 0 12px 0 #dce9de; }
.arcade-hero::after { content: ""; position: absolute; width: 310px; height: 310px; right: -65px; top: -104px; border-radius: 50%; background: rgba(255,255,255,.1); }.arcade-hero h1 { position: relative; z-index: 1; margin: 0; font: 800 clamp(42px, 7vw, 72px)/.9 "Baloo 2", sans-serif; letter-spacing: -2px; }.arcade-hero h1 em { color: var(--yellow); font-style: normal; }.arcade-hero p:not(.arcade-kicker) { max-width: 420px; margin: 18px 0 0; color: #d8efeb; font-size: 13px; line-height: 1.7; }.arcade-kicker { margin: 0 0 8px; color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }.arcade-hero .arcade-kicker { color: #ffe08a; }.arcade-hero-art { position: relative; z-index: 1; width: 280px; height: 200px; }.arcade-hero-art span, .arcade-hero-art i, .arcade-hero-art b { position: absolute; display: grid; place-items: center; border: 5px solid var(--ink); box-shadow: 0 7px 0 var(--ink); font: 800 72px/1 "Baloo 2", sans-serif; font-style: normal; }.arcade-hero-art span { width: 112px; height: 124px; right: 82px; top: 23px; border-radius: 28px; color: var(--ink); background: var(--yellow); transform: rotate(8deg); }.arcade-hero-art i { width: 91px; height: 97px; right: 2px; top: 84px; border-width: 4px; border-radius: 25px; color: white; background: var(--orange); font-size: 55px; transform: rotate(-9deg); }.arcade-hero-art b { left: 2px; top: 12px; width: 59px; height: 59px; border-width: 4px; border-radius: 50%; color: var(--ink); background: white; font-size: 42px; transform: rotate(-12deg); }.arcade-hero-art small { position: absolute; right: 0; top: 18px; color: #ffe08a; font-size: 25px; }
.arcade-section, .arcade-leaderboard { margin-top: 45px; }.arcade-section-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 17px; }.arcade-section-head h2 { margin: 0; font: 800 31px/1 "Baloo 2", sans-serif; letter-spacing: -.6px; }.arcade-count { padding: 8px 13px; border-radius: 20px; color: #9a7129; background: #fff0c9; font-size: 10px; font-weight: 800; }
.existing-games { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }.existing-card { position: relative; min-height: 155px; padding: 17px; overflow: hidden; border-radius: 17px; color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }.existing-card:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 13px 22px rgba(45,70,75,.12); }.existing-card::after { content: ""; position: absolute; width: 95px; height: 95px; right: -28px; bottom: -29px; border-radius: 50%; background: rgba(255,255,255,.3); }.existing-card span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 17px; border-radius: 11px; background: rgba(255,255,255,.65); font-size: 20px; }.existing-card strong, .existing-card small, .existing-card b { position: relative; z-index: 1; display: block; }.existing-card strong { font: 800 16px "Baloo 2", sans-serif; }.existing-card small { margin-top: 2px; color: #637278; font-size: 9px; }.existing-card b { margin-top: 15px; color: #637278; font-size: 9px; }.orange { background: #ffdca6; }.green { background: #cceee2; }.blue { background: #cfe9f7; }.pink { background: #f8d6d1; }.purple { background: #dfd8f8; }
.new-games-section { padding: 28px; border: 1px solid var(--line); border-radius: 23px; background: rgba(255,255,255,.62); }.new-game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.new-game-card { display: grid; grid-template-columns: 43px 1fr; grid-template-rows: auto auto; column-gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-align: left; text-decoration: none; background: white; transition: .2s; }.new-game-card span { grid-row: span 2; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: #fff0c9; font-size: 23px; }.new-game-card:nth-child(2) span { background: #d9f2eb; }.new-game-card:nth-child(3) span { background: #d9ebfb; }.new-game-card strong { align-self: end; font: 800 16px "Baloo 2", sans-serif; }.new-game-card small { align-self: start; color: var(--muted); font-size: 9px; line-height: 1.4; }.new-game-card:hover, .new-game-card.active { border-color: var(--yellow); box-shadow: 0 5px 0 #f3dfab; transform: translateY(-2px); }
.arcade-playground { min-height: 285px; margin-top: 18px; padding: 24px; border-radius: 17px; color: white; background: linear-gradient(135deg, #274b58, #2d656d); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }.playground-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }.playground-head h3 { margin: 0; font: 800 25px "Baloo 2", sans-serif; }.playground-head p { margin: 3px 0 0; color: #c8e3dc; font-size: 10px; }.playground-score { color: var(--yellow); font: 800 20px "Baloo 2", sans-serif; }.arcade-question { margin-top: 22px; color: #fff1bf; font: 800 25px "Baloo 2", sans-serif; }.arcade-hint { margin-top: 6px; color: #bcd8d2; font-size: 10px; }.arcade-options { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 9px; max-width: 530px; margin-top: 17px; }.arcade-option, .arcade-action { border: 1px solid #5e8583; border-radius: 9px; padding: 11px; color: white; background: #315b63; font: 800 16px "Baloo 2", sans-serif; }.arcade-option:hover, .arcade-action:hover { border-color: var(--yellow); transform: translateY(-2px); }.arcade-option.correct { background: #258a79; border-color: #8ff0cb; }.arcade-option.wrong { background: #a95355; border-color: #ffb3a8; }.arcade-action { color: var(--ink); background: var(--yellow); font-size: 11px; }.arcade-feedback { min-height: 18px; margin-top: 14px; color: var(--yellow); font-size: 11px; }.arcade-name-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 11px; background: white; }.arcade-name-row label { font-size: 10px; font-weight: 700; }.arcade-name-row input { width: 150px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--ink); outline: none; }.arcade-name-row span { margin-left: auto; color: var(--muted); font-size: 10px; }.arcade-ranking { display: grid; gap: 6px; margin: 13px 0 0; padding: 0; list-style: none; }.arcade-rank-row { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; min-height: 35px; gap: 8px; padding: 5px 11px; border-radius: 9px; background: white; font-size: 11px; }.arcade-rank-row:nth-child(-n+3) { background: #fff6d9; }.arcade-rank { text-align: center; font-size: 16px; }.arcade-rank-score { color: #ae7825; font: 800 14px "Baloo 2", sans-serif; }.arcade-empty { padding: 15px; border-radius: 10px; color: var(--muted); background: white; text-align: center; font-size: 10px; }
.arcade-start-screen { display: grid; min-height: 285px; place-content: center; justify-items: center; gap: 7px; padding: 25px; border-radius: 14px; color: white; text-align: center; background: radial-gradient(circle at 50% 15%, #3b7775, transparent 45%), linear-gradient(145deg, #274b58, #2d656d); }.arcade-start-icon { font-size: 46px; animation: arcade-start-float 2s ease-in-out infinite; }.arcade-start-kicker { color: #9ddfd3; font-size: 9px; font-weight: 800; letter-spacing: 1.7px; }.arcade-start-screen h3 { margin: 0; color: #fff1bf; font: 800 31px "Baloo 2", sans-serif; }.arcade-start-screen p { max-width: 430px; margin: 0; color: #c8e3dc; font-size: 10px; line-height: 1.5; }.arcade-start-button { margin-top: 10px; border: 0; border-radius: 11px 11px 11px 4px; padding: 13px 23px; color: var(--ink); background: var(--yellow); box-shadow: 0 4px 0 #dca94a; font-size: 12px; font-weight: 800; cursor: pointer; }.arcade-start-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #dca94a; }@keyframes arcade-start-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
footer { display: flex; justify-content: space-between; margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }footer b { color: var(--yellow); margin: 0 5px; }footer a { color: var(--muted); font-weight: 700; text-decoration: none; }
.arcade-standalone .arcade-topbar, .arcade-standalone .arcade-hero, .arcade-standalone .arcade-section:not(.new-games-section), .arcade-standalone .arcade-section-head, .arcade-standalone .new-game-grid, .arcade-standalone .arcade-leaderboard, .arcade-standalone footer { display: none; }.arcade-standalone .arcade-shell { width: 100%; max-width: 1120px; min-height: 100vh; padding: 12px 18px; }.arcade-standalone .new-games-section { min-height: 100vh; margin-top: 0; padding: 0; border: 0; background: transparent; }.arcade-standalone .arcade-playground { min-height: calc(100vh - 24px); height: auto; margin-top: 0; padding: 30px 38px; overflow: hidden; border-radius: 24px; }.arcade-standalone .playground-head h3 { font-size: 34px; }.arcade-standalone .arcade-question { font-size: 32px; }.arcade-standalone .arcade-option { min-height: 62px; font-size: 21px; }
@media (max-width: 850px) { .existing-games { grid-template-columns: repeat(3, 1fr); }.arcade-hero { padding: 33px; }.arcade-hero-art { transform: scale(.82); transform-origin: right center; margin-right: -35px; } }
@media (max-width: 560px) { .arcade-shell { padding: 0 15px 28px; }.arcade-topbar { min-height: 64px; }.arcade-brand { font-size: 22px; }.back-link { max-width: 155px; text-align: right; }.arcade-hero { min-height: 375px; padding: 28px 23px; align-items: flex-start; }.arcade-hero-art { position: absolute; right: -40px; bottom: -19px; transform: scale(.72); }.arcade-hero h1 { font-size: 49px; }.arcade-section-head { align-items: start; }.arcade-section-head h2 { font-size: 27px; }.existing-games { grid-template-columns: repeat(2, 1fr); }.existing-card { min-height: 143px; padding: 13px; }.existing-card strong { font-size: 14px; }.new-games-section { padding: 17px 13px; }.new-game-grid { grid-template-columns: 1fr; }.arcade-playground { padding: 18px 14px; }.playground-head h3 { font-size: 22px; }.arcade-options { grid-template-columns: repeat(2, 1fr); }.arcade-name-row { flex-wrap: wrap; }.arcade-name-row span { flex-basis: 100%; margin-left: 0; }footer { gap: 10px; flex-wrap: wrap; } }