/* GuessMate site pages: ONE stylesheet for every page (the designer, 30 Oct: "make all the pages match").
   Themed like the game: the sunburst, the logo, Baloo headings, gold on navy, poster cards and fans of real card art.
   The game itself (index.html) doesn't use this file. */

:root{color-scheme:dark;--navy:#062b68;--blue:#0d5db5;--gold:#ffc21a;--cream:#fff8e9;--ink:#09265b;--red:#c42d22}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 22%,#0A6FD8 0%,#0159BC 42%,#002D83 100%) fixed;color:#fff;font:600 16px/1.62 Nunito,Arial,sans-serif}
/* the game's sunburst behind everything (the designer, 29 Oct: themed like the game) */
body::before{content:"";position:fixed;left:50%;top:22%;width:250vmax;height:250vmax;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.075) 0deg 7deg,rgba(255,255,255,0) 7deg 14deg)}
.logo{display:block;width:fit-content;margin:0 auto}
.logo img{display:block;width:min(230px,60vw);height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
main{width:min(760px,100% - 28px);margin:26px auto 48px}
header{text-align:center;margin:0 auto 22px}
.brand{font:800 clamp(32px,8vw,48px)/1.05 "Baloo 2",sans-serif;letter-spacing:-.03em;text-shadow:0 3px 0 #05245b}
.brand span{color:var(--gold)}
.eyebrow{margin:8px 0 0;color:#ffe27a;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.intro,.guide-section{background:rgba(2,28,73,.66);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:20px 22px;margin:14px 0;box-shadow:0 8px 22px rgba(0,0,0,.14)}
.intro{font-size:17px}
h1,h2,h3{font-family:"Baloo 2",Nunito,sans-serif;line-height:1.15}
h1{font-size:clamp(27px,6vw,38px);margin:0 0 10px}
h2{font-size:25px;margin:0 0 10px;color:var(--gold)}
h3{font-size:19px;margin:16px 0 5px}
p{margin:8px 0}
ol,ul{padding-left:23px;margin:8px 0}
li{padding-left:3px;margin:7px 0}
.steps li::marker{color:var(--gold);font-weight:900}
strong{color:#fff}
.note{border-left:4px solid var(--gold);padding:8px 12px;margin:12px 0;background:rgba(255,194,26,.1);border-radius:0 10px 10px 0}
.cta{display:block;width:fit-content;margin:22px auto 12px;border-radius:14px;padding:13px 25px;background:var(--gold);color:var(--ink);font:800 18px "Baloo 2",sans-serif;text-decoration:none;box-shadow:0 4px 0 #a87500}
.cta:hover{filter:brightness(1.07)}
footer{text-align:center;color:rgba(255,255,255,.82);font-size:14px;padding:10px}
footer a{color:#ffe27a}
.footnav{font-weight:800;margin:0 0 6px}
.footnav span{color:#fff}
.footsocial{display:flex;justify-content:center;gap:14px;margin:10px 0}
.footsocial a{display:block;padding:4px}
.footsocial img{display:block;width:32px;height:32px}
footer p{margin:4px 0;opacity:.8}
@media(max-width:520px){main{width:calc(100% - 20px);margin-top:14px}.intro,.guide-section{padding:17px 16px;border-radius:15px}}
.shots{display:flex;gap:10px;margin:14px 0 4px;overflow-x:auto;padding-bottom:4px}
.shots img{flex:none;width:150px;height:auto;aspect-ratio:9/16;border-radius:14px;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.3);background:#062b68}
table.unl{border-collapse:collapse;width:100%;margin:6px 0 12px;font-size:15px}
table.unl td{border-top:1px solid rgba(255,255,255,.18);padding:5px 6px 5px 0}
table.unl td:last-child{text-align:right;color:#ffe27a;white-space:nowrap}
table.lv td{text-align:left!important;white-space:normal!important;color:#fff!important}
table.lv td:first-child{color:#ffe27a!important;white-space:nowrap!important}
@media(max-width:520px){.shots img{width:128px}}

/* ---- added 30 Oct: the same look as the Coming soon page ---- */
/* the headline under the logo, with a line under it, instead of inside the first box */
header h1{font-size:clamp(30px,7vw,46px);text-shadow:0 3px 0 #05245b;margin:4px 0 0}
.lead{max-width:600px;margin:8px auto 0;font-size:17px;color:rgba(255,255,255,.9)}
/* every box is a poster card */
.intro,.guide-section{border-radius:20px;background:rgba(2,28,73,.7);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.guide-section h2{font-size:clamp(23px,4.5vw,28px)}
/* a little fan of real cards from the game */
.cards{display:flex;justify-content:center;margin:16px 0 4px;padding:6px 0 4px}
.cards img{width:min(96px,21%);aspect-ratio:44/56;object-fit:cover;border-radius:9px;border:3px solid #fff;background:#e9e6dc;
  box-shadow:0 6px 14px rgba(0,0,0,.35);margin:0 -6px}
.cards img:nth-child(1){transform:rotate(-9deg) translateY(6px)}
.cards img:nth-child(2){transform:rotate(-3deg)}
.cards img:nth-child(3){transform:rotate(3deg)}
.cards img:nth-child(4){transform:rotate(9deg) translateY(6px)}
header .cards img{width:min(104px,22%);border-color:#ffd23f}
.backs img{border-color:var(--red)}
.tag{display:inline-block;font:800 12px/1 Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;
  background:var(--gold);color:var(--ink);margin-bottom:10px}
.tag.soon{background:#fff;color:var(--ink)}
.tag.work{background:rgba(255,255,255,.14);color:#ffe27a;box-shadow:inset 0 0 0 1.5px rgba(255,226,122,.55)}

/* FAQs and "more" links (Custom boards, Play online) */
.faq h3{font-size:18px;margin:14px 0 2px}
.faq p{margin:2px 0 8px}
.more{text-align:center;margin:6px 0 0}
.more a{color:#ffe27a;font-weight:800}
.shots img{object-fit:cover;object-position:top}

/* Privacy */
.privacy h2{font-size:22px}
.privacy a{color:#ffe27a}
.updated{color:#ffe27a;font-size:14px;font-weight:800;margin:0 0 6px}
.contact{text-align:center;font-size:17px}
.contact strong{display:block;font:800 21px "Baloo 2",sans-serif;color:var(--gold);margin-bottom:4px}

/* Coming soon: the posters */
.coming main{width:min(860px,100% - 28px)}
.posters{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0}
.poster{position:relative;background:rgba(2,28,73,.7);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:18px 18px 20px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);overflow:hidden}
.poster.big{grid-column:1/-1;background:linear-gradient(135deg,rgba(150,20,20,.82),rgba(2,28,73,.82) 70%)}
.poster h2{font-size:clamp(23px,4.5vw,30px);color:var(--gold);margin:0}
.poster p{margin:6px 0 0;color:rgba(255,255,255,.9)}
.big .cards img{width:min(120px,22%);border-color:#ffd23f}
/* Story mode (31 Oct): the 3D card figures standing in a row on a floor, swaying; Captain Jetty face-plants every
   few seconds and gets back up. All feet on one line (align-items:flex-end), all the same height. */
.figs{--fh:clamp(74px,19vw,150px);display:flex;justify-content:center;align-items:flex-end;gap:min(14px,2vw);margin:18px auto 4px;
  padding-bottom:calc(var(--fh) * .42);
  max-width:620px;background:radial-gradient(ellipse 60% 14px at 50% calc(100% - 7px),rgba(0,0,0,.35),transparent 70%);background-position:0 calc(var(--fh) * -.42 + 0px)}
.figs > img,.figs .topple{height:var(--fh);width:auto;display:block;flex:none}
.figs > img{transform-origin:50% 100%;animation:figSway 2.6s ease-in-out infinite}
.figs > img:nth-child(2n){animation-delay:-1.3s}
.figs > img:nth-child(3n){animation-duration:3.1s}
@keyframes figSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.figs .topple{position:relative;perspective:600px;perspective-origin:50% -70%}
/* phones: four figures, so the row fits */
@media (max-width:520px){ .figs > img:last-child{display:none} }
.figs .topple img,.figs .topple i{position:absolute;inset:0;transform-origin:50% 100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  animation:figTopple 5s cubic-bezier(.5,0,.6,1) infinite}
.figs .topple img{position:relative;height:100%;width:auto}
/* the back of the card, seen when she's down */
.figs .topple i{animation-name:figToppleBack;
  background:linear-gradient(#1d3f8f,#0e2763);-webkit-mask:url(./art/story-jetty.webp) center/100% 100%;mask:url(./art/story-jetty.webp) center/100% 100%}
.figs .topple i::after{content:"";position:absolute;left:18%;right:15%;top:1%;bottom:30%;border-radius:8%/6%;
  background:url(./cardback.jpg) center/cover;box-shadow:0 0 0 2px #fff inset}
@keyframes figTopple{
  0%,30%{transform:rotateX(0) rotateZ(0)} 34%{transform:rotateX(6deg) rotateZ(-4deg)} 38%{transform:rotateX(5deg) rotateZ(4deg)}
  42%{transform:rotateX(9deg)} 56%{transform:rotateX(-90deg)} 60%{transform:rotateX(-74deg)} 64%,84%{transform:rotateX(-90deg)}
  92%{transform:rotateX(8deg)} 96%{transform:rotateX(-3deg)} 100%{transform:rotateX(0)}}
@keyframes figToppleBack{
  0%,30%{transform:rotateY(180deg) rotateX(0)} 34%{transform:rotateY(180deg) rotateX(-6deg) rotateZ(4deg)} 38%{transform:rotateY(180deg) rotateX(-5deg) rotateZ(-4deg)}
  42%{transform:rotateY(180deg) rotateX(-9deg)} 56%{transform:rotateY(180deg) rotateX(90deg)} 60%{transform:rotateY(180deg) rotateX(74deg)} 64%,84%{transform:rotateY(180deg) rotateX(90deg)}
  92%{transform:rotateY(180deg) rotateX(-8deg)} 96%{transform:rotateY(180deg) rotateX(3deg)} 100%{transform:rotateY(180deg) rotateX(0)}}
@media (prefers-reduced-motion: reduce){ .figs > img,.figs .topple img,.figs .topple i{animation:none} }
/* GuessMate on a computer screen, drawn rather than a photo */
.pc{width:min(200px,70%);margin:16px auto 6px}
.pc .scr{aspect-ratio:16/10;border-radius:10px;border:6px solid #1b2a44;background:radial-gradient(circle at 50% 40%,#0A6FD8,#002D83);
  display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.pc .scr img{width:62%;height:auto}
.pc .stand{width:26%;height:14px;margin:0 auto;background:#1b2a44;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.idea{text-align:center;background:rgba(255,194,26,.12);border:1px solid rgba(255,226,122,.45);border-radius:18px;padding:18px;margin:8px 0 0}
.idea h2{font-size:24px;color:var(--gold);margin:0}
.idea a{color:#ffe27a;font-weight:800}
@media(max-width:620px){.posters{grid-template-columns:1fr}.coming main{width:calc(100% - 20px);margin-top:14px}.poster{padding:16px 15px 18px}}

/* 7 Nov 2026 (the designer): on a big computer screen the pages used about 760px in the middle. Wider, bigger text,
   logo and pictures, and three posters across on Coming soon. Phones and small laptops unchanged. */
@media (min-width:1200px){
  body{font-size:18px}
  main{width:min(1080px,100% - 64px)}
  .coming main{width:min(1240px,100% - 64px)}
  .logo img{width:300px}
  h1{font-size:44px} h2{font-size:28px} .intro{font-size:19px} .lead{max-width:760px;font-size:19px}
  .posters{gap:20px}   /* two across: the four smaller posters pair up (7 Nov) */
  .shots img{width:180px}
  table.unl{font-size:17px}
}