/* PlumFox Games — site styles. Design source: Claude Design "PlumFox Games brand refresh" (project/site.css). */
@font-face{font-family:"Fredoka";font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/fredoka-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:"Fredoka";font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/fredoka-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}
html,body{margin:0}
html{background:#FFF7EE}
@media (prefers-color-scheme: dark){html{background:#1A0D21}}
.site{
  --bg:#FFF7EE; --raised:#FFFDF9; --surface:#F7E8D8; --surface-2:#F0DCC8;
  --text:#2B0F36; --muted:#5E4868; --border:#2B0F36; --shadow:#2B0F36; --line:rgba(43,15,54,.16);
  --primary:#5B1F72; --on-primary:#FFF7EE; --accent:#F28C28; --on-accent:#2B0F36;
  --highlight:#7E3496; --wm-plum:#6E2A88; --wm-fox:#2B0F36;
  --disc:#EED6F3; --panel:#5B1F72; --on-panel:#FFF7EE; --panel-muted:#E9D3EF;
  --display:"Fredoka", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body:system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  background:var(--bg); color:var(--text); font-family:var(--body);
  font-size:17px; line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: dark){
  .site:not([data-theme="light"]){
    --bg:#1A0D21; --raised:#241330; --surface:#2E1A3A; --surface-2:#3A2348;
    --text:#FBEFE3; --muted:#D3C0D9; --border:#5E4170; --shadow:#0B040F; --line:rgba(251,239,227,.14);
    --primary:#F59A3C; --on-primary:#2B0F36; --accent:#F59A3C; --on-accent:#2B0F36;
    --highlight:#F5A54F; --wm-plum:#D9AAEB; --wm-fox:#FBEFE3;
    --disc:#3E2550; --panel:#2E1A3A; --on-panel:#FBEFE3; --panel-muted:#D3C0D9;
  }
}
.site[data-theme="dark"]{
  --bg:#1A0D21; --raised:#241330; --surface:#2E1A3A; --surface-2:#3A2348;
  --text:#FBEFE3; --muted:#D3C0D9; --border:#5E4170; --shadow:#0B040F; --line:rgba(251,239,227,.14);
  --primary:#F59A3C; --on-primary:#2B0F36; --accent:#F59A3C; --on-accent:#2B0F36;
  --highlight:#F5A54F; --wm-plum:#D9AAEB; --wm-fox:#FBEFE3;
  --disc:#3E2550; --panel:#2E1A3A; --on-panel:#FBEFE3; --panel-muted:#D3C0D9;
}
@media (min-width:900px){ .site{font-size:18px} }
.site *,.site *::before,.site *::after{box-sizing:border-box}
.site img{max-width:100%}
.site a{color:var(--highlight); text-underline-offset:3px}
.site :focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; background:var(--raised); padding:12px 16px; z-index:10}

/* Layout */
.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.section{padding-block:clamp(56px,8vw,104px)}
.eyebrow{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--highlight); margin:0 0 10px}
.h2{font-family:var(--display); font-weight:700; font-size:clamp(32px,4.4vw,52px); line-height:1.05; letter-spacing:-.01em; margin:0 0 16px; text-wrap:balance}
.lede{font-size:clamp(18px,1.6vw,21px); color:var(--muted); max-width:56ch; margin:0; text-wrap:pretty}

/* Wordmark */
.wm{font-family:var(--display); font-weight:700; letter-spacing:-.015em; line-height:1; color:var(--wm-plum); white-space:nowrap; display:inline-block}
.wm .fox{color:var(--wm-fox)}
.wm .o{position:relative; display:inline-block}
.wm .leaf{position:absolute; width:.34em; height:auto; left:.21em; top:.08em; max-width:none}

/* Header */
.hdr{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 24px; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-height:48px}
.brand img{width:44px; height:44px; display:block}
.brand .wm{font-size:28px}
.nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0}
.nav a{display:flex; align-items:center; min-height:48px; padding:0 16px; border-radius:999px; font-family:var(--display); font-weight:600; font-size:17px; color:var(--text); text-decoration:none}
.nav a:hover{background:var(--surface)}
.nav a[aria-current="page"]{background:var(--surface-2)}
@media (max-width:640px){
  .nav{width:100%}
  .nav ul{justify-content:space-between}
  .nav a{padding:0 12px; font-size:16px}
}

/* Buttons */
.btns{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 26px; border-radius:999px; border:2.5px solid var(--border); box-shadow:0 4px 0 var(--shadow); font-family:var(--display); font-weight:600; font-size:18px; text-decoration:none; transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--shadow)}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--shadow)}
.site .btn-primary{background:var(--primary); color:var(--on-primary)}
.site .btn-accent{background:var(--accent); color:var(--on-accent)}
.site .btn-ghost{background:var(--raised); color:var(--text)}
.btn svg{width:22px; height:22px; flex:none}
@media (max-width:520px){ .btns .btn{width:100%} }

/* Hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:48px; padding-block:48px 88px}
.hero h1{font-family:var(--display); font-weight:700; font-size:clamp(46px,7vw,88px); line-height:.98; letter-spacing:-.02em; margin:0 0 20px; text-wrap:balance}
.hero h1 span{color:var(--highlight)}
.hero .lede{margin-bottom:32px}
.stage{position:relative; aspect-ratio:1; max-width:480px; width:100%; justify-self:center}
.stage .disc{position:absolute; inset:6%; border-radius:50%; background:var(--disc)}
.stage .mascot{position:absolute; inset:14%; width:72%; height:auto}
.tile{position:absolute; width:14%; aspect-ratio:1; border-radius:22%; border:2.5px solid var(--border); box-shadow:0 4px 0 var(--shadow)}
.t1{background:var(--accent); top:8%; left:2%; transform:rotate(-12deg)}
.t2{background:#5FAE45; bottom:10%; right:0; transform:rotate(10deg); width:11%}
.t3{background:var(--raised); bottom:4%; left:12%; transform:rotate(18deg); width:9%}
@media (max-width:820px){
  .hero{grid-template-columns:1fr; text-align:center; gap:16px; padding-block:16px 64px}
  .hero .stage{order:-1; max-width:300px}
  .hero .lede{margin-inline:auto}
  .hero .btns{justify-content:center}
}

/* Game card */
.games-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px; margin-bottom:32px}
.game{display:grid; grid-template-columns:1.15fr 1fr; background:var(--raised); border:2.5px solid var(--border); border-radius:32px; overflow:hidden; box-shadow:0 6px 0 var(--shadow)}
.game-art{position:relative; background:#7E3496; min-height:340px; display:grid; place-items:center; border-right:2.5px solid var(--border)}
.game-art svg{width:86%; height:auto}
.ph-label{position:absolute; left:16px; top:16px; background:rgba(43,15,54,.78); color:#FFF7EE; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px}
.game-body{padding:clamp(24px,3.5vw,48px); display:flex; flex-direction:column; gap:16px; justify-content:center}
.game-body h3{font-family:var(--display); font-weight:700; font-size:clamp(28px,3vw,40px); line-height:1.05; margin:0}
.game-body p{margin:0; color:var(--muted)}
.badge{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--on-accent); border:2px solid var(--border); border-radius:999px; padding:6px 14px; font-family:var(--display); font-weight:600; font-size:15px}
.badge svg{width:18px; height:18px}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.chips li{background:var(--surface); border-radius:999px; padding:4px 12px; font-size:15px; font-weight:600}
@media (max-width:820px){
  .game{grid-template-columns:1fr}
  .game-art{min-height:240px; border-right:0; border-bottom:2.5px solid var(--border)}
}

/* About */
.about{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:20px; margin-top:40px}
.point{background:var(--raised); border:2px solid var(--line); border-radius:24px; padding:28px}
.point .ic{width:56px; height:56px; border-radius:18px; background:var(--surface); display:grid; place-items:center; margin-bottom:16px; color:var(--highlight)}
.point .ic svg{width:30px; height:30px}
.point h3{font-family:var(--display); font-weight:600; font-size:24px; margin:0 0 6px}
.point p{margin:0; color:var(--muted)}

/* Contact */
.contact{background:var(--panel); color:var(--on-panel); border-radius:36px; border:2.5px solid var(--border); padding:clamp(32px,6vw,72px); display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center}
.contact img{width:clamp(96px,14vw,160px); height:auto}
.contact .h2{color:var(--on-panel)}
.contact p{color:var(--panel-muted); margin:0 0 24px; max-width:48ch}
.mail{font-size:clamp(17px,2vw,22px); word-break:break-all}
@media (max-width:720px){ .contact{grid-template-columns:1fr; text-align:center; justify-items:center} .contact p{margin-inline:auto} }

/* Footer */
.ftr{border-top:2px solid var(--line); margin-top:clamp(56px,8vw,104px); padding-block:32px 40px}
.ftr-in{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px 32px}
.ftr ul{display:flex; flex-wrap:wrap; gap:4px 8px; list-style:none; margin:0; padding:0}
.ftr ul a{display:flex; align-items:center; min-height:48px; padding:0 12px; color:var(--text); font-weight:600}
.ftr small{color:var(--muted); font-size:15px}
.brand.sm img{width:36px; height:36px}
.brand.sm .wm{font-size:24px}

/* Privacy page */
.doc-hero{padding-block:32px 24px}
.doc-hero h1{font-family:var(--display); font-weight:700; font-size:clamp(40px,6vw,68px); line-height:1; margin:0 0 12px}
.meta{color:var(--muted); margin:0}
.doc{display:grid; grid-template-columns:260px minmax(0,1fr); gap:56px; align-items:start; padding-bottom:24px}
.toc{background:var(--raised); border:2px solid var(--line); border-radius:24px; padding:20px}
.toc h2{font-family:var(--display); font-size:18px; margin:0 0 8px}
.toc ol{margin:0; padding:0; list-style:none; counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex; gap:10px; align-items:center; min-height:44px; padding:0 8px; border-radius:12px; color:var(--text); text-decoration:none; font-weight:600; font-size:16px}
.toc a::before{content:counter(t); font-family:var(--display); color:var(--highlight); min-width:1.2em}
.toc a:hover{background:var(--surface)}
.prose{max-width:70ch}
.prose h2{font-family:var(--display); font-weight:700; font-size:clamp(26px,3vw,32px); line-height:1.15; margin:56px 0 12px; scroll-margin-top:24px}
.prose h3{font-family:var(--display); font-weight:600; font-size:21px; margin:28px 0 8px}
.prose p,.prose li{text-wrap:pretty}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:6px}
.summary{background:var(--surface); border:2.5px solid var(--border); border-radius:28px; padding:clamp(22px,3vw,36px); box-shadow:0 5px 0 var(--shadow)}
.summary h2{margin:0 0 12px; display:flex; align-items:center; gap:12px}
.summary h2 img{width:44px; height:44px}
.summary ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.summary li{display:grid; grid-template-columns:28px 1fr; gap:10px; margin:0}
.summary li svg{width:24px; height:24px; margin-top:3px; color:var(--highlight)}
.tbl{width:100%; border-collapse:separate; border-spacing:0; border:2px solid var(--line); border-radius:20px; overflow:hidden; font-size:16px; margin:16px 0}
.tbl th{background:var(--surface); text-align:left; font-family:var(--display); font-weight:600; padding:14px 16px}
.tbl td{padding:14px 16px; border-top:1px solid var(--line); vertical-align:top}
.tbl td:first-child{font-weight:700}
@media (max-width:860px){
  .doc{grid-template-columns:1fr; gap:24px}
}
@media (max-width:700px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block; width:100%}
  .tbl{border:0; border-radius:0}
  .tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .tbl tr{background:var(--raised); border:2px solid var(--line); border-radius:20px; padding:6px 18px; margin-bottom:14px}
  .tbl td{display:grid; grid-template-columns:7.5em 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
  .tbl td:first-child{border-top:0; display:block; font-family:var(--display); font-size:20px; padding-top:12px}
  .tbl td:first-child::before{content:none}
  .tbl td::before{content:attr(data-label); font-weight:700; color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:.04em; padding-top:2px}
}

/* Game page */
.app-hero{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; padding-block:32px 48px}
.app-icon{width:clamp(112px,14vw,168px); aspect-ratio:1; border-radius:24%; border:2.5px solid var(--border); box-shadow:0 6px 0 var(--shadow); background:#7E3496; display:grid; place-items:center; overflow:hidden}
.app-icon svg{width:78%; height:auto}
.app-hero h1{font-family:var(--display); font-weight:700; font-size:clamp(36px,5vw,60px); line-height:1; margin:0 0 8px}
.app-hero .by{margin:0 0 16px; color:var(--muted); font-weight:600}
.app-hero .chips{margin-bottom:24px}
@media (max-width:640px){ .app-hero{grid-template-columns:1fr; justify-items:center; text-align:center} .app-hero .chips,.app-hero .btns{justify-content:center} }
.shots{display:grid; grid-auto-flow:column; grid-auto-columns:min(250px,64%); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 20px; margin-inline:-4px; overscroll-behavior-x:contain}
.shot{scroll-snap-align:start; aspect-ratio:9/19.5; border-radius:30px; border:2.5px solid var(--border); background:var(--surface); display:grid; place-items:center; color:var(--muted); font-weight:600; font-size:15px; text-align:center; padding:16px}
.shot:nth-child(odd){background:var(--surface-2)}
.hint{color:var(--muted); font-size:15px; margin:0 0 12px}
.cols{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px; align-items:start}
@media (max-width:860px){ .cols{grid-template-columns:1fr; gap:32px} }
.facts{background:var(--raised); border:2px solid var(--line); border-radius:24px; padding:8px 24px; margin:0}
.facts div{display:grid; grid-template-columns:8em 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line)}
.facts div:first-child{border-top:0}
.facts dt{font-weight:700; color:var(--muted)}
.facts dd{margin:0}

/* Live-site additions: replace inline styles (CSP style-src 'self') */
.section.flush-top{padding-top:0}
.summary h2{font-family:var(--display); font-size:26px}
.shots-h{font-size:clamp(26px,3vw,34px)}
.shots-sec{padding-bottom:56px}
.lede.spaced{margin-bottom:16px}
.muted-p{margin:0; color:var(--muted)}

/* 404 */
.nf{text-align:center; padding-block:64px 24px}
.nf img{width:min(240px,60vw); height:auto}
.nf h1{font-family:var(--display); font-weight:700; font-size:clamp(40px,6vw,68px); line-height:1; margin:24px 0 12px}
.nf h1 span{color:var(--highlight)}
.nf .btns{justify-content:center; margin-top:24px}