/* FYSK Quiz 2 — follows the visual system of the original Two Truths and a Lie quiz.
   Original FYSK colors, grid paper, DM Sans / Space Grotesk, outlined cards,
   and the authentic FYSK monogram asset are intentionally reused. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body.fysk-quiz{--ink:#17203b;--blue:#294dff;--yellow:#ffe34d;--coral:#ff9278;--paper:#f8faff;--border:#ced6e9;--gray:#59647b;min-width:0;min-height:100vh;margin:0;color:var(--ink);font:16px/1.55 'DM Sans',Inter,Arial,sans-serif;background-color:var(--paper);background-image:linear-gradient(#c6d1eb55 1px,transparent 1px),linear-gradient(90deg,#c6d1eb55 1px,transparent 1px);background-size:26px 26px;-webkit-font-smoothing:antialiased}
body.fysk-quiz{overflow-wrap:break-word}
a{color:inherit}
button,input{font:inherit}
button{touch-action:manipulation}
button:disabled{opacity:.45;cursor:not-allowed}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.wrap{max-width:1230px;padding-left:28px;padding-right:28px;margin-left:auto;margin-right:auto}
.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;color:var(--ink)}
.brand .fysk-logo{display:block;width:68px;height:auto;flex:none}
.brand>span{font-size:11px;letter-spacing:1.2px;font-weight:700;line-height:1.5}
.edition{font-size:12px;letter-spacing:1.8px;font-weight:700;text-align:right}
main{padding-top:30px;padding-bottom:55px;min-height:calc(100vh - 185px)}
.screen{animation:appear .22s ease-out}
@keyframes appear{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
h1,h2,h3{font-family:'Space Grotesk',Inter,Arial,sans-serif;line-height:1.07;letter-spacing:-.045em;margin:0}
h1{font-size:clamp(43px,6.2vw,74px);font-weight:700}
h2{font-size:clamp(30px,3vw,43px)}
h3{font-size:23px;letter-spacing:-.035em}
p{margin:12px 0}
.blue-mark{color:var(--blue)}
.eyebrow{display:inline-block;max-width:100%;background:var(--yellow);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:5px 12px;transform:rotate(-2deg);font-size:12px;letter-spacing:.7px;font-weight:700;margin:4px 0 23px}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:2px solid var(--ink);border-radius:10px;padding:13px 19px;min-height:47px;font-size:16px;line-height:1.25;font-weight:700;white-space:normal;text-decoration:none;text-align:center;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .13s,box-shadow .13s}
.primary{background:var(--blue);color:white}
.secondary{background:white;color:var(--ink)}
@media(hover:hover){.primary:hover:not(:disabled),.secondary:hover:not(:disabled){transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}}
.primary:active:not(:disabled),.secondary:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.small-note{font-size:13px;color:var(--gray);line-height:1.55}
.small-note a{font-weight:700;color:var(--blue);text-underline-offset:2px}
/* Landing screen. The mascot and original FYSK logo are authentic assets from Quiz 1. */
.intro-layout{min-height:615px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:center;gap:34px}
.intro-copy{max-width:660px}
.intro-copy h1{max-width:720px}
.intro-copy .lead{max-width:610px;margin:25px 0 13px;font-size:clamp(18px,2vw,21px);line-height:1.55}
.intro-subtext{color:var(--gray);margin:0 0 31px;font-size:16px}
.big-button{padding:15px 28px;font-size:17px;min-height:55px}
.intro-copy .small-note{margin-top:22px;max-width:530px}
.intro-art{display:flex;justify-content:center;align-items:center;min-width:0}
.mascot-box{display:flex;flex-direction:column;align-items:center;justify-content:center}
.mascot{display:block;width:min(100%,350px);max-height:380px;object-fit:contain;filter:drop-shadow(6px 8px 0 #17203b12)}
.mascot-caption{text-align:center;font-size:12px;font-weight:700;color:var(--gray);margin-top:-3px;line-height:1.7}
/* Game */
.game-heading{margin:0 0 26px}
.game-heading h1{font-size:clamp(43px,5.2vw,64px)}
.game-heading .eyebrow{margin-bottom:18px}
.game-instructions{font-size:17px;max-width:850px;margin:15px 0 0;color:#3e4a63}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 318px;align-items:start;gap:25px}
.puzzle-panel,.entry-card{min-width:0;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);padding:24px}
.puzzle-progress-head{display:flex;align-items:center;justify-content:space-between;gap:16px;text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:1px}
.puzzle-progress-head span{color:var(--gray);font-weight:600}
.puzzle-progress{height:7px;background:#ebefff;border-radius:8px;overflow:hidden;margin:13px 0 20px}
.puzzle-progress>div{height:100%;width:0;background:var(--blue);border-radius:8px;transition:width .2s}
.solved-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:0}
.solved-rows:not(:empty){margin-bottom:12px}
.solved-row{border-radius:11px;border:1px solid var(--ink);padding:13px 16px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:3px;animation:appear .16s ease-out}
.solved-row.sea{background:#e4e8ff}
.solved-row.engines{background:#d9f1ec}
.solved-row.circuit{background:#ffdace}
.solved-row.services{background:#ecdefa}
.solved-left{display:flex;align-items:center;justify-content:center;gap:7px 14px;flex-wrap:wrap}
.solved-index{font-size:11px;line-height:1.5;letter-spacing:.5px;font-weight:800;text-transform:uppercase}
.solved-title{font:700 clamp(14px,1.6vw,17px)/1.25 'Space Grotesk',Inter,Arial,sans-serif;letter-spacing:-.02em}
.solved-terms{font-size:12px;line-height:1.4;color:#4b546b}
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:73px;padding:10px 6px;line-height:1.25;text-align:center;text-transform:uppercase;hyphens:auto;overflow-wrap:anywhere;border:2px solid var(--ink);border-radius:9px;background:#f2f5fe;color:var(--ink);font:700 clamp(12px,1.38vw,15px)/1.2 'DM Sans',Inter,Arial,sans-serif;cursor:pointer;transition:background .13s,transform .13s;box-shadow:2px 2px 0 #17203b19}
.tile.is-selected{background:var(--yellow);box-shadow:2px 2px 0 var(--ink);transform:translateY(-1px)}
@media(hover:hover){.tile:hover:not(.is-selected){background:#e6ebff}}
.tile:focus-visible{z-index:1}
.selection-status{min-height:30px;margin-top:15px;text-align:center;font-size:13px;color:var(--gray);font-weight:600}
.selection-status.success{color:#196651}
.selection-status.error{color:#ae3425}
.selection-status.one-away{color:#9f5a0b}
.mistake-zone{display:flex;align-items:center;justify-content:center;gap:13px;margin:8px 0 22px;font-size:12px;font-weight:700;color:#5a6275}
.mistake-dots{display:flex;gap:8px}
.mistake-dot{display:block;width:13px;height:13px;border-radius:50%;background:var(--blue);border:1px solid var(--ink)}
.mistake-dot.spent{background:white;border-color:#b8c2d7}
.puzzle-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.puzzle-controls-secondary{display:flex;gap:12px;flex-wrap:wrap}
.puzzle-controls .primary,.puzzle-controls .secondary{font-size:14px;padding:12px 15px;min-height:44px}
.puzzle-controls .secondary{box-shadow:2px 2px 0 var(--ink)}
.is-shaking{animation:shake .25s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}33%{transform:translateX(-5px)}66%{transform:translateX(5px)}}
/* Showcase panel: no duplicate directions, only the event CTA + prize requirement. */
.showcase-panel,.results-sidebar{min-width:0}
.showcase-card{background:#e9edff;border:2px solid var(--ink);border-radius:16px;padding:28px 25px;box-shadow:5px 5px 0 var(--ink)}
.side-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:1.3px;color:var(--blue);margin-bottom:17px}
.showcase-card h2{font-size:clamp(31px,3.1vw,40px)}
.showcase-card p{margin:18px 0 23px;font-size:16px;line-height:1.55}
.apply-link{width:100%;font-size:15px;min-height:50px}
.prize-callout{border-top:1px solid #b5bfd6;margin-top:26px;padding-top:19px;display:flex;flex-direction:column;gap:7px}
.prize-callout strong{font-size:14px;line-height:1.35}
.prize-callout span{font-size:13px;color:#4e5771;line-height:1.5}
/* Results / guessing entry */
.results-hero{padding-bottom:18px}
.results-hero .eyebrow{margin-bottom:17px}
.results-hero h1{font-size:clamp(45px,5.8vw,67px)}
.results-hero #resultCopy{max-width:820px;font-size:18px;color:#4e5974;margin:17px 0 19px}
.stats-strip{display:flex;flex-wrap:wrap;gap:10px}
.stats-strip>div{min-width:128px;background:white;border:1px solid var(--ink);border-radius:9px;display:flex;align-items:baseline;gap:8px;padding:7px 12px}
.stats-strip strong{font-family:'Space Grotesk',Inter,Arial,sans-serif;font-size:19px;white-space:nowrap}
.stats-strip span{font-size:11px;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.results-layout{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:25px;align-items:start;margin-top:21px}
.entry-card{padding:30px}
.entry-card h2{font-size:33px}
.entry-header>p{color:#525f77;margin:11px 0 24px}
.form-guesses{display:flex;flex-direction:column;gap:10px}
.guess-row{display:grid;grid-template-columns:31px minmax(0,.88fr) minmax(180px,1fr);align-items:center;gap:12px;min-width:0;background:#f7f9ff;border:1px solid #c5cfe3;border-radius:9px;padding:13px 12px}
.guess-number{color:var(--blue);font-weight:700;font-size:12px}
.guess-description{min-width:0;display:flex;flex-direction:column;gap:2px}
.guess-description strong{font-size:14px;line-height:1.35}
.guess-description small{font-size:11px;line-height:1.4;color:var(--gray)}
input:not([type="checkbox"]){width:100%;max-width:100%;min-width:0;padding:10px 12px;min-height:43px;border:1.5px solid #8e9bb6;border-radius:8px;background:white;color:var(--ink);font:500 14px/1.4 'DM Sans',Inter,Arial,sans-serif}
input::placeholder{color:#808da7}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:23px 0 18px}
.contact-fields label{font-size:13px;font-weight:700;display:flex;flex-direction:column;gap:7px}
.eligibility-check{border:1px solid #b6c5e6;background:#edf2ff;border-radius:10px;padding:14px 13px;display:flex;align-items:flex-start;gap:12px;font-size:14px;font-weight:700;line-height:1.45;cursor:pointer}
.eligibility-check input{accent-color:var(--blue);width:19px;height:19px;flex-shrink:0;margin:1px 0 0;cursor:pointer}
.eligibility-check a{color:var(--blue);text-underline-offset:2px}
.eligibility-check small{display:block;font-size:12px;font-weight:400;color:#5a667b;margin-top:5px}
.entry-submit{margin:20px 0 10px}
.fine-print{font-size:12px;color:var(--gray);line-height:1.6;margin:0}
.honeypot{position:absolute;left:-200vw;width:1px;height:1px;overflow:hidden}
.results-sidebar{display:flex;flex-direction:column;gap:20px}
.result-apply h2{font-size:33px}
.result-apply p{font-size:15px}
.share-panel{padding:23px;background:white;border:2px solid var(--ink);border-radius:14px}
.share-panel h3{font-size:22px}
.share-panel p{font-size:14px;color:var(--gray);line-height:1.45}
.share-btn{font-size:14px;width:100%;padding:11px;margin-top:7px}
.plain-link{display:inline-block;padding:8px 2px;border:0;background:transparent;color:var(--blue);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.replay-btn{align-self:start}
/* Confirmation page */
.thanks-main{display:flex;justify-content:center;align-items:center;min-height:610px}
.thanks-card{background:white;border:2px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink);padding:50px;max-width:720px;width:100%}
.thanks-card h1{font-size:clamp(48px,6vw,70px);margin-bottom:23px}
.thanks-card p{color:#4d5871;font-size:18px;line-height:1.6}
.thanks-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:27px}
/* Footer */
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:26px;font-size:12px;color:#6b7286}
.site-footer a{text-decoration:none;font-weight:700;color:var(--ink)}
.site-footer a:hover{text-decoration:underline}
@media(max-width:980px){
  .game-layout,.results-layout{grid-template-columns:minmax(0,1fr) 280px;gap:18px}
  .puzzle-panel{padding:20px}
  .showcase-card{padding:23px 19px}
  .guess-row{grid-template-columns:24px 1fr;gap:7px 10px}
  .guess-row input{grid-column:2}
}
@media(max-width:760px){
  .wrap{padding-left:18px;padding-right:18px}
  .site-header{height:93px}
  .brand .fysk-logo{width:60px}
  .brand>span{font-size:10px}
  .edition{font-size:10px;max-width:150px;letter-spacing:.7px}
  main{padding-top:14px;padding-bottom:40px}
  .intro-layout{grid-template-columns:1fr;gap:12px;min-height:0}
  .intro-copy{grid-row:2}
  .intro-art{grid-row:1;justify-content:flex-start}
  .mascot{width:122px;max-height:135px}
  .mascot-caption{display:none}
  .intro-copy h1{font-size:clamp(42px,10vw,56px)}
  .intro-copy .eyebrow{margin-bottom:16px}
  .intro-copy .lead{font-size:18px;margin-top:20px}
  .intro-subtext{margin-bottom:24px}
  .game-layout,.results-layout{grid-template-columns:1fr;gap:21px}
  .game-heading{margin-bottom:23px}
  .game-heading h1{font-size:clamp(41px,9vw,54px)}
  .game-instructions{font-size:15px}
  .showcase-card{padding:25px 22px}
  .showcase-card h2{font-size:33px}
  .showcase-panel{grid-row:2}
  .results-sidebar{gap:20px}
  .result-apply h2{font-size:33px}
  .result-apply .apply-link{max-width:310px}
  .entry-card{padding:23px}
  .guess-row{grid-template-columns:31px minmax(0,.8fr) minmax(125px,1fr)}
  .guess-row input{grid-column:auto}
  .site-footer{flex-direction:column;align-items:flex-start}
}
@media(max-width:470px){
  .site-header{height:84px}
  .edition{display:none}
  .intro-art .mascot{width:100px;max-height:104px}
  .intro-copy .eyebrow{font-size:11px;padding:5px 9px}
  .intro-copy h1{font-size:44px}
  .intro-copy .lead{font-size:17px}
  .puzzle-panel{padding:15px 12px 19px;box-shadow:3px 3px 0 var(--ink)}
  .puzzle-progress-head{font-size:10px;letter-spacing:.5px}
  .tile-grid{gap:7px}
  .tile{min-height:70px;font-size:clamp(10px,2.55vw,12px);padding:8px 4px;border-width:1.5px;letter-spacing:-.18px;box-shadow:none}
  .tile.tile-long{font-size:clamp(7.6px,2.15vw,10px);letter-spacing:-.28px;overflow-wrap:normal;word-break:normal}
  .mistake-zone{margin-bottom:19px}
  .puzzle-controls{gap:14px;flex-wrap:wrap}
  .puzzle-controls-secondary{gap:8px}
  .puzzle-controls .secondary{font-size:13px;padding:9px 11px}
  .puzzle-controls .primary{font-size:13px;padding:10px 13px}
  .solved-title{font-size:14px}
  .solved-terms{font-size:11px}
  .entry-card{padding:19px 15px}
  .entry-card h2{font-size:30px}
  .guess-row{grid-template-columns:22px minmax(0,1fr);padding:12px}
  .guess-row input{grid-column:2}
  .contact-fields{grid-template-columns:1fr}
  .stats-strip>div{min-width:0}
  .thanks-card{padding:32px 24px}
  .thanks-card p{font-size:16px}
  .thanks-actions{flex-direction:column}
}
@media(max-width:350px){.tile{font-size:10px;min-height:76px}.wrap{padding-left:13px;padding-right:13px}.puzzle-panel{padding:12px 9px}.puzzle-controls-secondary{gap:6px}.puzzle-controls .secondary,.puzzle-controls .primary{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Quiet category guide: the themes are visible from the start; no extra instructions. */
.category-guide{margin:0 0 15px}
.category-guide-title{display:block;font-size:10px;letter-spacing:1.1px;font-weight:800;color:#667187;margin-bottom:9px}
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.category-pill{min-width:0;display:flex;align-items:center;gap:8px;border:1px solid #d5dced;background:#f8faff;border-radius:7px;padding:10px 12px;font-size:13px;line-height:1.35;color:#303d58;font-weight:700}
.category-mark{display:inline-block;flex:0 0 14px;text-align:center;font-size:15px;line-height:1;color:#294dff;font-weight:700}
.category-pill.is-found{background:#f0f5f1;border-color:#d1e2d5;color:#547065}
.category-pill.is-found .category-mark{color:#36775a}
@media(max-width:470px){
  .category-guide{margin-bottom:14px}
  .category-grid{gap:6px}
  .category-pill{font-size:11.5px;gap:5px;padding:9px 7px;letter-spacing:-.05px}
  .category-mark{flex-basis:12px;font-size:13px}
}
@media(max-width:350px){.category-pill{font-size:10.5px}}