/* Look copied from game15.h5crazygame.com (measured 21 October 2026): white 360px column on #f7f7f7, Montserrat,
   red pill buttons with a moving shine, white cards with a light grey border. The reference's #e00000 red, link blue and
   our green are a shade darker here so text on and in them is easy to read (contrast of at least 4.5:1). */
/* Montserrat (SIL Open Font License, fonts/OFL.txt) is served from this site instead of Google Fonts, so visitors' IP
   addresses are not sent to Google before they consent. One variable file covers weights 400–700; the latin-ext file
   only downloads on pages that use one of its letters. Unicode ranges copied from Google Fonts. */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* Read out by screen readers, not shown. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The reference hides its scroll gutter; scrolling still works with touch, wheel and keyboard. */
html{height:100%;scrollbar-width:none}
/* Arial scaled to Montserrat's size, shown until the web font arrives, so text does not rewrap (and the page
   jump) when Montserrat replaces it. */
@font-face{font-family:Montserrat Fallback;src:local('Arial'),local('ArialMT');size-adjust:112.8%;ascent-override:85.8%;descent-override:22.3%;line-gap-override:0%}
body{margin:0;min-height:100%;background:#f7f7f7;font:400 14.4px/1.6 Montserrat,Montserrat Fallback,sans-serif;color:#212529;-webkit-text-size-adjust:100%}
a{color:#1f6fb2;text-decoration:none}
img{max-width:100%}
/* Match the reference: full-width phones up to 576px, then a centered 360px column. */
.app{position:relative;width:100%;max-width:360px;min-height:100vh;margin:0 auto;background:#fff;overflow-x:hidden}
@media(max-width:576px){.app{max-width:100%}}
/* A play page must not show advertisements before its quiz has been validated. */
body[data-page=play]:not([data-quiz-ready]) .ad{display:none}
.container{width:100%;margin-inline:auto;padding:0 15px}
@media(min-width:576px){.container{max-width:540px}}
.navbar{display:flex;justify-content:center;align-items:center;padding:8px 16px;background:#f3f3f3}
.navbar img{display:block;max-height:30px;width:auto}

/* Headings are 17px/600 like the reference's h3 (some are h1/h2 here so each page has a proper outline). */
.h3,h1.h3,h2.h3{margin:0 0 5px;font-size:17px;font-weight:600;line-height:1.2;color:#18181c}
.center{text-align:center}
/* Running text is left-aligned (justified text left wide gaps between words on phones). */
.text{text-align:left}
p{margin:0 0 16px}
ul{margin:0 0 16px;padding-left:15px}
.tips-list{margin:16px;padding-left:15px;columns:2;column-gap:24px}

/* The white bordered box that holds the main button. */
.box{margin-top:24px;padding:8px;border:1px solid #e6e7e8;border-radius:5px;background:#fff;text-align:center;font-size:17px;font-weight:600;line-height:1.2;color:#18181c}
.box .line{margin:16px 0}
.box .line+.line{margin-top:0}
.btn-row{display:flex;justify-content:space-around;padding-bottom:4px}
.btn{position:relative;display:block;overflow:hidden;padding:10px 20px;border:0;border-radius:100px;background:#e00000;box-shadow:2px 2px 14px rgb(0 0 0/40%);font:600 17px/1.2 Montserrat,Montserrat Fallback,sans-serif;color:#fff!important;text-align:center;cursor:pointer;transition:all .3s ease-in-out}
.btn.wide{width:100%;font-size:14.4px;font-weight:400;line-height:1.6}
.btn.shine::after{content:"";position:absolute;top:0;left:-120%;width:120%;height:100%;background:linear-gradient(90deg,rgb(255 255 255/10%),rgb(255 255 255/50%),rgb(255 255 255/10%));animation:shine 1.3s infinite}
@keyframes shine{to{transform:translateX(200%)}}

/* Quiz cards: two per row. */
.list-title{margin:16px 0 0}
.cards{display:flex;flex-wrap:wrap;margin:20px -5px 0}
.cards>div{width:50%;padding:0 5px}
/* A card left alone in the last row (an odd number of quizzes) is centred, not left with an empty space beside it. */
.cards{justify-content:center}
.card{margin:0 0 10px;padding:8px;border:1px solid #e6e7e8;border-radius:5px;background:#fff}
.card .art{display:block;width:92%;height:140px;margin:0 auto;overflow:hidden;border-radius:10px}
.card .art img{display:block;width:100%;height:100%;object-fit:cover}
/* Names wrap to at most two lines (some are long); every name area is two lines tall so the cards line up. */
.card .name{display:flex;align-items:center;justify-content:center;min-height:2.6em;margin:4px 0;font-weight:700;line-height:1.3;color:#18181c;text-align:center}
.card .play{display:block;padding:6px 10px;border-radius:100px;background:#e00000;color:#fff!important;text-align:center;font-weight:600}

/* Quiz start page (the reference's game page). */
.quiz-title{margin:10px 0 5px;font-size:20px;font-style:italic;text-transform:uppercase;line-height:1.2}
.quiz-logo{display:inline-block;width:100px;height:100px;margin:20px 20px 8px;border-radius:10px;box-shadow:0 0 10px #0074e4;object-fit:cover;vertical-align:middle}

.quiz-meta{margin:0 0 8px;font-size:13px;font-weight:400;color:#555}
.quiz-desc{margin:14px 4px 8px;font-size:14px;font-weight:400;line-height:1.5;color:#333}
.how-to{margin:18px 0 0;padding:12px 14px;border:1px solid #e6e7e8;border-radius:5px;font-size:13.5px;line-height:1.5}
.how-to h2{margin:0 0 6px}
.how-to ul{margin:0;padding-left:18px}
.bonus{display:block;width:100%;margin:14px 0 6px;padding:9px 12px;border:1px dashed #e00000;border-radius:100px;background:#fff5f5;font:600 13.5px/1.3 Montserrat,Montserrat Fallback,sans-serif;color:#b00000;cursor:pointer}
.bonus:disabled{cursor:progress;opacity:.7}
.bonus-note{margin:6px 4px 4px;font-size:13px;font-weight:400;line-height:1.4;color:#444}
.bonus-note.good{margin:0 0 6px;font-weight:600;color:#15803d}

/* Quiz play page. */
.quiz-top{display:flex;justify-content:space-between;align-items:center;margin:8px 0 12px;font-size:14.4px;font-weight:600;color:#18181c}
.quiz-top .score{color:#e00000}
.quiz-question{margin:0 0 16px;font-size:17px;font-weight:600;line-height:1.35;color:#18181c}
.options{display:grid;gap:10px;margin:0 0 14px}
.option{width:100%;padding:11px 14px;border:1px solid #e6e7e8;border-radius:100px;background:#fff;font:600 14.4px/1.35 Montserrat,Montserrat Fallback,sans-serif;color:#18181c;text-align:center;cursor:pointer;transition:background .2s,border-color .2s}
.option:hover:not(:disabled){border-color:#e00000}
.option:disabled{cursor:default}
.option.correct{border-color:#15803d;background:#15803d;color:#fff}
.option.wrong{border-color:#e00000;background:#e00000;color:#fff}
.feedback{margin:0 0 14px;font-size:14.4px;font-weight:600}
.feedback.good{color:#15803d}
.feedback.bad{color:#e00000}
.explanation{margin:-6px 0 14px;font-size:13.5px;font-weight:400;line-height:1.5;color:#444}
.quiz-question:focus,.box h2[tabindex]:focus{outline:none}
.result-score{margin:12px 0 4px;font-size:40px;font-weight:700;line-height:1.1;color:#e00000}
.result-text{margin:0 0 18px;font-size:14.4px;font-weight:400;color:#212529}
.stack{display:grid;gap:14px;padding:4px 0 8px}

/* Footer and other pages. */
footer{padding:16px 0;text-align:center}
.footer-links a{display:inline-flex;align-items:center;min-height:32px;padding:0 6px}
/* Stacked links on the start page get a finger-sized tap area. */
.popular a,.see-all{display:inline-block;padding:4px 0}
.page-text h2{margin:22px 0 6px;font-size:17px;font-weight:600;color:#18181c}
.page-text .updated{font-style:italic;color:#5c636a}
.page-text a{text-decoration:underline}
.not-found{padding:60px 15px;text-align:center}
.not-found .code{margin:0;font-size:40px;font-weight:700;line-height:1.2;color:#e00000}
.not-found h1{margin:0 0 8px;font-size:22px;color:#18181c}

/* ---------- Ads ---------- */
.ad{display:block;margin:10px 0;text-align:center}
.ad.top{margin-top:0;margin-bottom:0}
.ad.top.short{margin-top:10px;margin-bottom:16px}
.navbar+.ad.top.short{margin-top:10px}
/* Ads keep a clear gap from buttons and links around them, so nobody taps an ad by accident. */
.ad.mid{margin-top:28px;margin-bottom:12px}
.ad.mid.spaced{margin-top:24px;margin-bottom:24px}
/* Reserve the reference's minimum slot height before initialization. Creatives are centered within the slot. */
.ad.top,.ad.mid{min-height:250px}
body[data-page=index] .ad.top{min-height:150px}
/* Live units fit the creative Google serves, including taller formats. */
.ad[data-filled=live]{aspect-ratio:auto;min-height:250px}
body[data-page=index] .ad.top[data-filled=live]{min-height:150px}
/* A fixed-size unit (data-size) sits on the top edge of its box, with no gap under it. */
.ad[data-size] ins{vertical-align:top}
/* Google's ad script could not load (blocked): no ad will come, so no empty boxes either. */
.ads-failed .ad{display:none} /* No publisher ID and not on this computer: the site runs without ads (see build.py). */ .ads-off .ad{display:none!important}
.ad-demo{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:100%;height:100%;margin:0;border:1px dashed #c9cdd2;background:#eef0f2;color:#545a62;font-size:12px;line-height:1.3}
.ad-demo b{font-size:15px;color:#3f444a}
/* The reference's standard display creative is 300x250 (336x280 is also eligible).
   Its landing-page top creative is 300x150. Keep the slot and creative dimensions distinct. */
.ad[data-filled=demo]{height:250px;aspect-ratio:auto}
.ad[data-filled=demo] .ad-demo{width:300px;max-width:100%;margin:0 auto}
/* On a 320px screen the content area is only 290px. Let the ad use 5px of each
   side's padding to preserve its 300px creative, centered within the screen. */
.container .ad[data-filled=demo]{min-width:min(300px,100vw);position:relative;left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}
body[data-page=index] .ad.top[data-filled=demo]{height:150px}
.ad-label{display:block;font-size:10px;letter-spacing:2px;color:#545a62}
.anchor-demo{position:fixed;left:50%;z-index:900;display:flex;align-items:center;justify-content:center;width:min(100%,728px);height:60px;transform:translateX(-50%);border:1px dashed #c9cdd2;background:#eef0f2;color:#3f444a;font-size:12px;box-shadow:0 0 8px rgb(0 0 0/15%)}
.anchor-demo.bottom{bottom:0}
.anchor-demo button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:#fff;color:#444;font-size:18px;cursor:pointer}
body.anchor-bottom{padding-bottom:60px}
/* Reference catalog and genre pages use a top anchor on viewports up to 500px. */
@media(max-width:500px){
 body[data-anchor=auto].anchor-bottom{padding-top:60px;padding-bottom:0}
 body[data-anchor=auto] .anchor-demo.bottom{top:0;bottom:auto}
 /* Keep keyboard focus below the 60px top anchor, with a 12px visible gap.
    Closing the demo removes anchor-bottom, so the offset disappears with the ad. */
 html:has(body[data-anchor=auto].anchor-bottom){scroll-padding-top:72px}
}
/* The reference's tips page always uses a top anchor. */
body[data-anchor=top].anchor-bottom{padding-top:60px;padding-bottom:0}
body[data-anchor=top] .anchor-demo.bottom{top:0;bottom:auto}
html:has(body[data-anchor=top].anchor-bottom){scroll-padding-top:72px}
/* A <dialog> gets size limits from the browser (fit-content, max-width/height); lift them so the demo ad covers the
   whole screen like a real full-screen ad: solid background, a bar with "Ad" and the close button, the ad in the middle. */
.fullscreen-demo{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;z-index:1000;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:56px 16px 24px;border:0;background:#121212;color:#fff;text-align:center;font-family:Montserrat,Montserrat Fallback,sans-serif}
.fullscreen-demo::backdrop{background:#121212}
.fullscreen-demo .bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#000;font-size:13px}
.fullscreen-demo .close{min-width:36px;height:36px;border:0;border-radius:18px;background:#fff;color:#111;font:600 14px Montserrat,Montserrat Fallback,sans-serif;cursor:pointer}
.fullscreen-demo .creative{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:min(100%,400px);aspect-ratio:4/5;max-height:100%;padding:20px;border:1px dashed #c9cdd2;border-radius:6px;background:#eef0f2;color:#545a62;font-size:13px;line-height:1.35}
.fullscreen-demo .creative strong{font-size:20px;color:#3f444a}
.fullscreen-demo .creative small{font-size:11px;color:#545a62}
.box h1.line{font:inherit;color:inherit} /* The start page shows the logo as its title. */ h1.start-logo{line-height:0} h1.start-logo img{display:inline-block;width:213px;max-width:70%;height:auto}
.box h1.page-heading{font-size:21px;font-weight:700}
h2.h3.list-title{margin:21px 0 5px}
.ad.gap{margin-top:16px;margin-bottom:16px}
.ad.ad-empty{display:none}
.btn-row{gap:8px}
.btn-row .btn{white-space:nowrap}
/* Buttons in a .btn-row (Let's Start, Start Quiz) stay on one line in the 360px column and on narrow phones. */
@media(max-width:400px),(min-width:577px){.btn-row .btn{padding:10px 14px;font-size:16px}}
@media(max-width:340px){.btn-row .btn{padding:10px 10px;font-size:15px}}

/* Visitors who turn off motion in their device settings get still buttons. */
@media(prefers-reduced-motion:reduce){.btn.shine::after{animation:none;display:none}.btn,.option{transition:none}}
/* While the quiz loads, its box keeps about a question's height so the ad and cards below do not jump down; once a
   question is shown the box fits it exactly. */
#quiz:not(.ready){min-height:330px}
/* "Up next" suggestion on the result screen. */
.up-next{margin:6px 0 4px;padding-top:12px;border-top:1px solid #e6e7e8;text-align:left}
.up-next-title{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#5c636a}
.up-next-card+.up-next-card{margin-top:8px}
.up-next-card{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid #e6e7e8;border-radius:10px;color:#18181c!important}
.up-next-card img{flex:none;width:62px;height:auto;aspect-ratio:31/28;border-radius:6px}
.up-next-card span{display:flex;flex-direction:column;min-width:0;flex:1;font-size:14.4px;line-height:1.3}
.up-next-card small{font-size:12.5px;font-weight:400;color:#5c636a}
.up-next-card .up-next-go{flex:none;display:block;padding:8px 14px;border-radius:100px;background:#e00000;color:#fff;font-weight:600;font-size:14px}
@media(hover:hover){.up-next-card:hover{border-color:#e00000}}
/* Start page teaser question. */
.try{padding:12px 12px 8px;text-align:left}
.try h2{margin:4px 0 6px}
/* The answers sit two by two, so the whole question fits above the bottom anchor ad when the start page opens on a phone. */
.try .options{grid-template-columns:1fr 1fr;gap:8px}
.try .option{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 10px;border-radius:16px}
.try-from{margin:0 0 10px;font-size:12.5px;font-weight:500;color:#5c636a;text-align:center}
.try-again{min-height:40px;border:0;background:none;font:600 14.4px Montserrat,Montserrat Fallback,sans-serif;color:#1f6fb2;cursor:pointer}
.how-to ol{margin:0 0 6px;padding-left:18px}
.how-to ol+p{margin:0;color:#5c636a}

/* ---------- Design pass (21 October 2026) ---------- */
/* The column fills the screen height, so the footer sits at the bottom of short pages (404, quiz not found). */
.app{display:flex;flex-direction:column}
.app>main{flex:1}
/* Match the reference's 140px card artwork area; keep each quiz poster's full title visible. */
.card .art{height:140px;aspect-ratio:auto}
.card .art img{object-fit:contain}
.quiz-logo{width:120px;height:auto;aspect-ratio:31/28}
/* Main buttons are at least 44px tall, an easy tap on a phone. */
.card .play{display:flex;align-items:center;justify-content:center;min-height:44px}
body[data-page=quiz] #startBtn{min-width:220px;padding:12px 32px}
.bonus{padding:12px}
/* Two-line answers stay rounded buttons, not long ovals. */
.option{border-radius:24px}
/* Even line breaks: no single word left alone on the last line. */
.box .line,#genreLine,.quiz-desc,.option{text-wrap:balance}
.quiz-question,.feedback,.explanation,.text{text-wrap:pretty}
.bonus-note.good{text-align:center}
.bonus-note:empty{margin:0}
.status-msg{margin:12px 4px 16px;font-size:14.4px;font-weight:400;line-height:1.5}
.faq-q{margin-bottom:4px}
/* Mouse users see which button they are on. */
@media(hover:hover){.btn:hover,.card .play:hover{background:#c40000}.footer-links a:hover,.popular a:hover,.page-text a:hover{text-decoration:underline}}
/* The demo anchor's label leaves room for its close button. */
.anchor-demo{padding:0 52px 0 12px;text-align:center;line-height:1.3}
.anchor-demo button{width:40px;height:40px}
/* Very small phones: the same buttons a little smaller. */
@media(max-width:300px){.btn-row .btn{padding:9px 8px;font-size:13px}}

/* Category buttons on the quiz list: all ten categories in one row that scrolls sideways, so the quiz cards start on
   the first screen. On each side that still has more buttons, the row fades and an arrow button scrolls it (app.js sets
   .more-left and .more-right). */
.chip-scroller{position:relative}
.cat-chips{display:flex;gap:8px;margin:4px -8px 8px;padding:2px 8px 4px;overflow-x:auto;scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.more-right .cat-chips{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.more-left .cat-chips{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%);mask-image:linear-gradient(90deg,transparent,#000 20%)}
.more-left.more-right .cat-chips{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.chip-arrow{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-top:-17px;padding:0 0 3px;border:1px solid #e6e7e8;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgb(0 0 0/20%);font:600 24px/1 Montserrat,Montserrat Fallback,sans-serif;color:#c40000;cursor:pointer}
.chip-arrow.prev{left:-4px}
.chip-arrow.next{right:-4px}
@media(hover:hover){.chip-arrow:hover{background:#fff1f1}}
.chip{flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:1px solid #e00000;border-radius:100px;background:#fff;font:600 14px/1.2 Montserrat,Montserrat Fallback,sans-serif;color:#c40000!important;white-space:nowrap}
@media(hover:hover){.chip:hover{background:#fff1f1}}
.chip:focus-visible{outline:2px solid #1f6fb2;outline-offset:-2px}
/* Narrow phones: smaller category buttons, so they take fewer rows and the first quiz cards show sooner. */
@media(max-width:400px){.cat-chips{gap:6px}.chip{min-height:36px;padding:5px 10px;gap:4px;font-size:13px}}


/* Short phones (an iPhone SE is 667px tall): tighter spacing on the start and quiz pages, so the teaser question's
   answers and the bonus button sit above the bottom anchor ad when the page opens. The ads keep their size. */
@media(max-height:700px){
 body[data-page=index] .ad.top.short,body[data-page=quiz] .ad.top.short{margin-bottom:10px}
 body[data-page=index] .box,body[data-page=quiz] .box{margin-top:12px}
 body[data-page=index] .box .line{margin:8px 0}
 body[data-page=index] .box .line+.line{margin-top:0}
 .try{padding:8px 12px 6px}
 .try-from{margin-bottom:6px}
 .try .option{min-height:44px}
 body[data-page=quiz] .quiz-title{margin-top:6px}
 body[data-page=quiz] .quiz-logo{width:100px;margin-top:8px}
}