/* =====================================================================
   Kytech theme for GetSimple CMS
   Palette: Bootswatch "Superhero" by default, square corners, Poppins.
   Change the colours in :root below to re-skin the whole theme.
   ===================================================================== */
/* ---------- Poppins, hosted on your own server (assets/fonts, SIL Open Font Licence) ---------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-latin-ext-300-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-latin-300-normal.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}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.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}

:root{
  /* Default variables (Superhero). The active scheme is set in settings.inc.php
     ('scheme' => 'midnight' etc.) and applied as a class on <body> below. */
  --bg:#2b3e50;--fg:#ebebeb;--hi:#fff;--mut:#b4bcc2;--card:#4e5d6c;--nav:#4e5d6c;--sub:#3e4f60;--line:transparent;
  --btn:#df691a;--btnhov:#b15315;--btnfg:#fff;--def:#4e5d6c;--defhov:#3e4a56;--deffg:#fff;
  --red:#d9534f;--gold:#f0ad4e;--sky:#5bc0de;
  --c1:#df691a;--c2:#f0ad4e;--c3:#5bc0de;--c4:#5cb85c;--c5:#d9534f;   /* accent colours */
  --tix:#2b3e50;     /* text on tickets */
  --inbg:#fff;--infg:#2b3e50;
  --wrap:1050px;   /* page width: header, content and footer all line up to this. Try 900px-1200px */
  --wide:1280px;   /* width of pages using the wide.php template */
  color-scheme:dark;
}

/* ===================== COLOUR SCHEMES =====================
   Pick one in settings.inc.php:  'scheme' => 'midnight'
   To make your own, copy a block, rename it, and change the colours. */

/* Header + footer bar text: follows the scheme unless a scheme sets its own */
body{--navfg:var(--fg);--navhi:var(--hi);--navmut:var(--mut);--navacc:var(--btn)}

/* Superhero - slate blue and orange */
body.scheme-superhero{}

/* Midnight - deep indigo with gold */
body.scheme-midnight{
  --bg:#12132b;--fg:#ecebf7;--hi:#fff;--mut:#a9a8c9;--card:#1f2147;--nav:#1a1c3d;--sub:#16183a;
  --btn:#f5b942;--btnhov:#d99c1f;--btnfg:#12132b;--def:#2c2f63;--defhov:#383c7a;--deffg:#ecebf7;
  --red:#ff6b8b;--gold:#f5b942;--sky:#7c83ff;
  --c1:#f5b942;--c2:#ff6b8b;--c3:#7c83ff;--c4:#36d1b0;--c5:#ff9f5a;--tix:#12132b;
  --inbg:#ecebf7;--infg:#12132b;
}

/* Emerald - dark green with mint */
body.scheme-emerald{
  --bg:#0e2620;--fg:#e8f3ef;--hi:#fff;--mut:#9fbdb3;--card:#18392f;--nav:#143229;--sub:#102b23;
  --btn:#2fd18b;--btnhov:#22a86f;--btnfg:#08201a;--def:#1f4a3d;--defhov:#2a5c4d;--deffg:#e8f3ef;
  --red:#eb5757;--gold:#f2c94c;--sky:#56ccf2;
  --c1:#2fd18b;--c2:#f2c94c;--c3:#56ccf2;--c4:#f2994a;--c5:#eb5757;--tix:#0e2620;
  --inbg:#fff;--infg:#0e2620;
}

/* Kytech - ink blue with amber, cream text (the theme's signature scheme) */
body.scheme-kytech{
  --bg:#1b2333;--fg:#f4efe6;--hi:#fff;--mut:#b0b6c3;--card:#252f43;
  --nav:#131a27;--sub:#1d2535;--navacc:#f2a900;
  --btn:#f2a900;--btnhov:#d99700;--btnfg:#0f1420;--def:#303b52;--defhov:#3b4762;--deffg:#f4efe6;
  --red:#ff6b6b;--gold:#f2a900;--sky:#4fd1c5;
  --c1:#f2a900;--c2:#ff7a59;--c3:#4fd1c5;--c4:#b39ddb;--c5:#f6e7c1;--tix:#0f1420;
  --inbg:#f4efe6;--infg:#0f1420;
}
body.scheme-kytech .site-header{box-shadow:0 1px 0 rgba(255,255,255,.06)}
body.scheme-kytech section{border-top-color:#2f3a50}
body.scheme-kytech .timer,body.scheme-kytech .games a{box-shadow:0 1px 0 rgba(255,255,255,.04) inset}

/* Crazy - neon confetti, animated rainbows, tilted glowing cards. Calms down for reduced-motion users. */
body.scheme-crazy{
  --bg:#170a2b;--fg:#fff7fe;--hi:#fff;--mut:#d3c3ee;--card:#241040;--line:rgba(255,255,255,.14);
  --nav:#12061f;--sub:#1f0b38;--navfg:#fff;--navhi:#fff;--navmut:#e8d8ff;--navacc:#b6ff3b;
  --btn:#ff2bd6;--btnhov:#ff5fe0;--btnfg:#170a2b;--def:#34195c;--defhov:#43206f;--deffg:#fff;
  --red:#ff6b6b;--gold:#ffe14d;--sky:#22e1ff;
  --c1:#ff2bd6;--c2:#b6ff3b;--c3:#22e1ff;--c4:#ffe14d;--c5:#ff8a00;--tix:#170a2b;
  --inbg:#fff;--infg:#170a2b;
  --crazy:linear-gradient(90deg,#ff2bd6,#ff8a00,#ffe14d,#b6ff3b,#22e1ff,#7c4dff,#ff2bd6);
  color-scheme:dark;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,43,214,.30) 0 3px,transparent 4px),
    radial-gradient(circle at 70% 60%,rgba(182,255,59,.26) 0 3px,transparent 4px),
    radial-gradient(circle at 40% 85%,rgba(34,225,255,.28) 0 2px,transparent 3px),
    radial-gradient(circle at 85% 15%,rgba(255,225,77,.30) 0 2px,transparent 3px),
    radial-gradient(circle at 55% 45%,rgba(255,138,0,.26) 0 2px,transparent 3px);
  background-size:140px 140px,190px 190px,110px 110px,170px 170px,230px 230px;
  background-attachment:fixed;
}
@keyframes kz-flow{to{background-position:200% 0}}
@keyframes kz-hue{to{filter:hue-rotate(360deg)}}
@keyframes kz-pulse{50%{box-shadow:0 0 0 2px var(--g),0 0 26px var(--g)}}
body.scheme-crazy .site-header{background:var(--nav);box-shadow:0 4px 0 0 transparent}
body.scheme-crazy .site-header::after{content:"";display:block;height:5px;background:var(--crazy);background-size:200% 100%;animation:kz-flow 4s linear infinite}
body.scheme-crazy .logo,body.scheme-crazy section>h2,body.scheme-crazy .pot,body.scheme-crazy .hero h1{background:var(--crazy);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:kz-flow 6s linear infinite}
body.scheme-crazy section>h2{display:inline-block}
body.scheme-crazy .pot small{-webkit-text-fill-color:var(--mut);color:var(--mut)}
body.scheme-crazy .logo svg{animation:kz-hue 5s linear infinite}
body.scheme-crazy .site-footer{background:var(--nav);position:relative}
body.scheme-crazy .site-footer::before{content:"";display:block;height:5px;background:var(--crazy);background-size:200% 100%;animation:kz-flow 4s linear infinite reverse}
body.scheme-crazy .btn,body.scheme-crazy .coins button[aria-pressed=true]{background:var(--crazy);background-size:200% 100%;color:#170a2b;border:0;animation:kz-flow 5s linear infinite;box-shadow:0 0 14px rgba(255,43,214,.45)}
body.scheme-crazy .btn:hover{animation-duration:1.2s;transform:translateY(-1px) scale(1.03)}
body.scheme-crazy .btn.ghost{background:var(--def);color:var(--deffg);animation:none;box-shadow:0 0 0 1px #22e1ff inset}
body.scheme-crazy .timer,body.scheme-crazy .games a,body.scheme-crazy .cdr,body.scheme-crazy .hash,body.scheme-crazy .rules details,body.scheme-crazy .tk,body.scheme-crazy .cform,body.scheme-crazy .content blockquote{--g:var(--c,#ff2bd6);border-color:var(--g);box-shadow:0 0 0 1px var(--g),0 0 16px color-mix(in srgb,var(--g) 55%,transparent);transition:transform .25s}
body.scheme-crazy .timer{animation:kz-pulse 3s ease-in-out infinite}
body.scheme-crazy .timer:nth-child(odd),body.scheme-crazy .games a:nth-child(odd){transform:rotate(-1.4deg)}
body.scheme-crazy .timer:nth-child(even),body.scheme-crazy .games a:nth-child(even){transform:rotate(1.4deg)}
body.scheme-crazy .cdr:nth-child(2){transform:translateX(10px)}
body.scheme-crazy .timer:hover,body.scheme-crazy .games a:hover,body.scheme-crazy .cdr:hover{transform:rotate(0) scale(1.03)}
body.scheme-crazy .games a:hover{background:var(--crazy);background-size:200% 100%;animation:kz-flow 2s linear infinite;color:#170a2b}
body.scheme-crazy .games a:hover span,body.scheme-crazy .games a:hover em,body.scheme-crazy .games a:hover .rname{color:#170a2b}
body.scheme-crazy .games em{color:#b6ff3b}
body.scheme-crazy .tbox div:nth-child(1){box-shadow:inset 0 3px 0 #ff2bd6}
body.scheme-crazy .tbox div:nth-child(2){box-shadow:inset 0 3px 0 #ffe14d}
body.scheme-crazy .tbox div:nth-child(3){box-shadow:inset 0 3px 0 #b6ff3b}
body.scheme-crazy .tbox div:nth-child(4){box-shadow:inset 0 3px 0 #22e1ff}
body.scheme-crazy #balls{animation:kz-hue 10s linear infinite}
body.scheme-crazy .glass{stroke:#22e1ff;stroke-opacity:.8}
body.scheme-crazy .rules details:nth-of-type(3n+1){--c:#ff2bd6}
body.scheme-crazy .rules details:nth-of-type(3n+2){--c:#22e1ff}
body.scheme-crazy .rules details:nth-of-type(3n){--c:#b6ff3b}
body.scheme-crazy .content a,body.scheme-crazy .rules a{color:#22e1ff}
body.scheme-crazy .sp-toggle{border-color:#b6ff3b;animation:kz-hue 6s linear infinite}
body.scheme-crazy .coin{background:#2c1450;border-color:rgba(255,255,255,.18)}
body.scheme-crazy .pay-box{border-top:0;box-shadow:0 0 0 2px #ff2bd6,0 0 40px rgba(255,43,214,.5)}
@media (prefers-reduced-motion:reduce){
  body.scheme-crazy *,body.scheme-crazy *::before,body.scheme-crazy *::after{animation:none!important}
  body.scheme-crazy .timer,body.scheme-crazy .games a,body.scheme-crazy .cdr{transform:none!important}
}

/* Crazy Light - the Crazy scheme on a bright cream page. Calms down for reduced-motion users. */
body.scheme-crazylight{
  --bg:#fffaf0;--fg:#22113d;--hi:#12081f;--mut:#5f4c7d;--card:#fff;--line:#eadff7;
  --nav:#fff;--sub:#f4ecff;--navfg:#2a1546;--navhi:#12081f;--navmut:#5f4c7d;--navacc:#ff2bd6;
  --btn:#ff2bd6;--btnhov:#ff5fe0;--btnfg:#1a0b2e;--def:#f1e8ff;--defhov:#e5d6fb;--deffg:#22113d;
  --red:#d92d20;--gold:#b45309;--sky:#0089c7;
  --c1:#ff2bd6;--c2:#6fcf00;--c3:#00b8e6;--c4:#ffb800;--c5:#ff6a00;--tix:#1a0b2e;
  --inbg:#fff;--infg:#22113d;
  --crazy:linear-gradient(90deg,#ff4fd8,#ff9a1f,#ffd91f,#9be22d,#29d3f0,#9b6bff,#ff4fd8);
  --crazytext:linear-gradient(90deg,#d6008f,#e85d00,#b98600,#2f8f00,#0080bb,#6a2bd9,#d6008f);
  color-scheme:light;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,43,214,.45) 0 3px,transparent 4px),
    radial-gradient(circle at 70% 60%,rgba(111,207,0,.45) 0 3px,transparent 4px),
    radial-gradient(circle at 40% 85%,rgba(0,184,230,.45) 0 2px,transparent 3px),
    radial-gradient(circle at 85% 15%,rgba(255,184,0,.55) 0 2px,transparent 3px),
    radial-gradient(circle at 55% 45%,rgba(255,106,0,.40) 0 2px,transparent 3px);
  background-size:140px 140px,190px 190px,110px 110px,170px 170px,230px 230px;
  background-attachment:fixed;
}
body.scheme-crazylight .site-header{background:var(--nav);box-shadow:0 2px 10px rgba(80,30,140,.10)}
body.scheme-crazylight .site-header::after{content:"";display:block;height:5px;background:var(--crazy);background-size:200% 100%;animation:kz-flow 4s linear infinite}
body.scheme-crazylight .logo,body.scheme-crazylight section>h2,body.scheme-crazylight .pot,body.scheme-crazylight .hero h1{background:var(--crazytext);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:kz-flow 6s linear infinite}
body.scheme-crazylight section>h2{display:inline-block}
body.scheme-crazylight .pot small{-webkit-text-fill-color:var(--mut);color:var(--mut)}
body.scheme-crazylight .logo svg{animation:kz-hue 5s linear infinite}
body.scheme-crazylight .site-footer{background:var(--nav);position:relative}
body.scheme-crazylight .site-footer::before{content:"";display:block;height:5px;background:var(--crazy);background-size:200% 100%;animation:kz-flow 4s linear infinite reverse}
body.scheme-crazylight .btn,body.scheme-crazylight .coins button[aria-pressed=true]{background:var(--crazy);background-size:200% 100%;color:#1a0b2e;border:0;animation:kz-flow 5s linear infinite;box-shadow:0 2px 12px rgba(255,43,214,.35)}
body.scheme-crazylight .btn:hover{animation-duration:1.2s;transform:translateY(-1px) scale(1.03)}
body.scheme-crazylight .btn.ghost{background:var(--def);color:var(--deffg);animation:none;box-shadow:0 0 0 1px #00b8e6 inset}
body.scheme-crazylight .timer,body.scheme-crazylight .games a,body.scheme-crazylight .cdr,body.scheme-crazylight .hash,body.scheme-crazylight .rules details,body.scheme-crazylight .tk,body.scheme-crazylight .cform,body.scheme-crazylight .content blockquote{--g:var(--c,#ff2bd6);border-color:var(--g);box-shadow:0 0 0 2px var(--g),0 4px 18px color-mix(in srgb,var(--g) 40%,transparent);transition:transform .25s}
body.scheme-crazylight .timer{animation:kz-pulse 3s ease-in-out infinite}
body.scheme-crazylight .timer:nth-child(odd),body.scheme-crazylight .games a:nth-child(odd){transform:rotate(-1.4deg)}
body.scheme-crazylight .timer:nth-child(even),body.scheme-crazylight .games a:nth-child(even){transform:rotate(1.4deg)}
body.scheme-crazylight .cdr:nth-child(2){transform:translateX(10px)}
body.scheme-crazylight .timer:hover,body.scheme-crazylight .games a:hover,body.scheme-crazylight .cdr:hover{transform:rotate(0) scale(1.03)}
body.scheme-crazylight .games a:hover{background:var(--crazy);background-size:200% 100%;animation:kz-flow 2s linear infinite;color:#170a2b}
body.scheme-crazylight .games a:hover span,body.scheme-crazylight .games a:hover em,body.scheme-crazylight .games a:hover .rname{color:#170a2b}
body.scheme-crazylight .games em{color:#c2008a}
body.scheme-crazylight .tbox div{background:#fbf6ff}
body.scheme-crazylight .tbox div:nth-child(1){box-shadow:inset 0 3px 0 #ff2bd6}
body.scheme-crazylight .tbox div:nth-child(2){box-shadow:inset 0 3px 0 #ffb800}
body.scheme-crazylight .tbox div:nth-child(3){box-shadow:inset 0 3px 0 #6fcf00}
body.scheme-crazylight .tbox div:nth-child(4){box-shadow:inset 0 3px 0 #00b8e6}
body.scheme-crazylight #balls{animation:kz-hue 10s linear infinite}
body.scheme-crazylight .glass{stroke:#9b6bff;stroke-opacity:.8;fill:#9b6bff;fill-opacity:.05}
body.scheme-crazylight .rules details:nth-of-type(3n+1){--c:#ff2bd6}
body.scheme-crazylight .rules details:nth-of-type(3n+2){--c:#00b8e6}
body.scheme-crazylight .rules details:nth-of-type(3n){--c:#6fcf00}
body.scheme-crazylight .content a,body.scheme-crazylight .rules a{color:#0074b0}
body.scheme-crazylight .sp-toggle{background:#fff;color:#6a2bd9;border-color:#ff2bd6;animation:kz-hue 6s linear infinite}
body.scheme-crazylight .coin{background:#fff;border-color:#eadff7}
body.scheme-crazylight .pay-box{border-top:0;box-shadow:0 0 0 2px #ff2bd6,0 10px 40px rgba(255,43,214,.35)}
@media (prefers-reduced-motion:reduce){
  body.scheme-crazylight *,body.scheme-crazylight *::before,body.scheme-crazylight *::after{animation:none!important}
  body.scheme-crazylight .timer,body.scheme-crazylight .games a,body.scheme-crazylight .cdr{transform:none!important}
}

body.scheme-crazylight .site-footer .inner,body.scheme-crazylight .site-footer a{color:var(--navfg)}
body.scheme-crazylight .site-footer{box-shadow:0 -2px 10px rgba(80,30,140,.08)}
body.scheme-crazylight .site-header .bar a,body.scheme-crazylight .subnav a{text-shadow:none}

/* Pink - shades of pink on a light pink page */
body.scheme-pink{
  --bg:#fdeef5;--fg:#3d0d26;--hi:#22041a;--mut:#86475f;--card:#fff;--line:#f5c6dc;
  --nav:#6d1048;--sub:#9c1a66;--navfg:#ffe3f0;--navhi:#fff;--navmut:#f5b3d2;--navacc:#ff8fc4;
  --btn:#e0368a;--btnhov:#b8246f;--btnfg:#fff;--def:#f9d6e7;--defhov:#f3c0d9;--deffg:#3d0d26;
  --red:#b42318;--gold:#b8246f;--sky:#e0368a;
  --c1:#e0368a;--c2:#f06aa6;--c3:#9c1a66;--c4:#ff6fae;--c5:#c2185b;--tix:#fff;
  --inbg:#fff;--infg:#3d0d26;
  color-scheme:light;
}
body.scheme-pink .timer,body.scheme-pink .cdr,body.scheme-pink .games a,body.scheme-pink .hash,body.scheme-pink .tk,body.scheme-pink .content blockquote,body.scheme-pink .rules details,body.scheme-pink .cform{box-shadow:0 1px 3px rgba(109,16,72,.12)}
body.scheme-pink .f input{border-color:var(--line)}
body.scheme-pink .games a:hover em{color:var(--btnfg)}
body.scheme-pink .msg.err{text-decoration:underline}

/* Multicolour - rainbow gradient header and footer, bright mixed accents on pale lavender */
body.scheme-multicolour{
  --bg:#fbf7ff;--fg:#261a3a;--hi:#12081f;--mut:#665683;--card:#fff;--line:#e7dcf5;
  --nav:#3b1f6b;--sub:#2a1650;--navfg:#fff;--navhi:#fff;--navmut:#f1e6ff;--navacc:#ffe14d;
  --btn:#ff3d81;--btnhov:#e02a6b;--btnfg:#fff;--def:#efe6fb;--defhov:#e3d5f7;--deffg:#261a3a;
  --red:#d92d20;--gold:#b4570d;--sky:#7c3aed;
  --c1:#ff3d81;--c2:#ff8a00;--c3:#00a99d;--c4:#7c3aed;--c5:#1e88e5;--tix:#fff;
  --inbg:#fff;--infg:#261a3a;
  --rainbow:linear-gradient(90deg,#7c3aed 0%,#ff3d81 16%,#ff8a00 31%,#ffc400 43%,#00a99d 58%,#1e88e5 76%,#5b3ad6 100%);
  color-scheme:light;
}
body.scheme-multicolour .site-header{background:var(--rainbow)}
body.scheme-multicolour .site-header .bar a,body.scheme-multicolour .logo{text-shadow:0 1px 2px rgba(0,0,0,.35)}
body.scheme-multicolour .subnav{background:rgba(28,10,56,.45)}
body.scheme-multicolour .site-footer{background:#2a1650;border-top:6px solid transparent;border-image:var(--rainbow) 1}
body.scheme-multicolour .btn{background:linear-gradient(90deg,#ff3d81,#ff8a00);border:0}
body.scheme-multicolour .btn:hover{background:linear-gradient(90deg,#e02a6b,#e67a00)}
body.scheme-multicolour .btn.ghost{background:var(--def);color:var(--deffg)}
body.scheme-multicolour .btn.ghost:hover{background:var(--defhov)}
body.scheme-multicolour .site-header .bar>.btn{background:#fff;color:#7c3aed;text-shadow:none}
body.scheme-multicolour .site-header .bar>.btn:hover{background:#ffe14d;color:#3b1f6b}
body.scheme-multicolour .pot{background:linear-gradient(90deg,#7c3aed,#ff3d81,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent}
body.scheme-multicolour .pot small{-webkit-text-fill-color:var(--mut);color:var(--mut)}
body.scheme-multicolour .timer,body.scheme-multicolour .cdr,body.scheme-multicolour .games a,body.scheme-multicolour .hash,body.scheme-multicolour .tk,body.scheme-multicolour .content blockquote,body.scheme-multicolour .rules details,body.scheme-multicolour .cform{box-shadow:0 2px 8px rgba(60,20,110,.10)}
body.scheme-multicolour .f input{border-color:var(--line)}
body.scheme-multicolour .games em,body.scheme-multicolour .content a,body.scheme-multicolour .rules a{color:#c2185b}
body.scheme-multicolour .games a:hover{background:linear-gradient(135deg,#7c3aed,#ff3d81)}
body.scheme-multicolour .games a:hover em{color:#fff}
body.scheme-multicolour .coins button[aria-pressed=true]{background:linear-gradient(90deg,#7c3aed,#ff3d81);color:#fff}
body.scheme-multicolour section>h2{background:linear-gradient(90deg,#7c3aed,#ff3d81 55%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
body.scheme-multicolour .sp-toggle{background:#3b1f6b;border-color:#ffe14d}

/* Green - shades of green on a light green page */
body.scheme-green{
  --bg:#e9f7ee;--fg:#0f2e1b;--hi:#061a0e;--mut:#4b6b58;--card:#fff;--line:#bfe3cc;
  --nav:#0f3d24;--sub:#17603a;--navfg:#ddf3e5;--navhi:#fff;--navmut:#a6d4b7;--navacc:#5fd38d;
  --btn:#1f9d55;--btnhov:#187a42;--btnfg:#fff;--def:#cdeed9;--defhov:#b6e4c6;--deffg:#0f2e1b;
  --red:#c0392b;--gold:#187a42;--sky:#1f9d55;
  --c1:#1f9d55;--c2:#34b86c;--c3:#0f5f34;--c4:#5cc58a;--c5:#2a7a4b;--tix:#fff;
  --inbg:#fff;--infg:#0f2e1b;
  color-scheme:light;
}
body.scheme-green .timer,body.scheme-green .cdr,body.scheme-green .games a,body.scheme-green .hash,body.scheme-green .tk,body.scheme-green .content blockquote,body.scheme-green .rules details{box-shadow:0 1px 3px rgba(15,61,36,.12)}
body.scheme-green .f input{border-color:var(--line)}
body.scheme-green .games a:hover em{color:var(--btnfg)}

/* Yellow - shades of yellow on a light yellow page */
body.scheme-yellow{
  --bg:#fff8e1;--fg:#3d3200;--hi:#1f1900;--mut:#76662a;--card:#fff;--line:#efdc9a;
  --nav:#2b2616;--sub:#4a4120;--navfg:#fff6d6;--navhi:#fff;--navmut:#d9cfa3;--navacc:#ffd23f;
  --btn:#f5c400;--btnhov:#ddb000;--btnfg:#2b2616;--def:#fbeeb8;--defhov:#f6e29a;--deffg:#3d3200;
  --red:#b42318;--gold:#9a7400;--sky:#b38f00;
  --c1:#f5c400;--c2:#ffb300;--c3:#e0a800;--c4:#ffdd57;--c5:#c99700;--tix:#2b2616;
  --inbg:#fff;--infg:#3d3200;
  color-scheme:light;
}
body.scheme-yellow .timer,body.scheme-yellow .cdr,body.scheme-yellow .games a,body.scheme-yellow .hash,body.scheme-yellow .tk,body.scheme-yellow .content blockquote,body.scheme-yellow .rules details{box-shadow:0 1px 3px rgba(61,50,0,.12)}
body.scheme-yellow .f input{border-color:var(--line)}
/* yellow is too light for text on a pale page, so text that would be yellow uses deep gold */
body.scheme-yellow .pot,body.scheme-yellow .games em,body.scheme-yellow .content a,body.scheme-yellow .rules a,body.scheme-yellow .rules summary::after{color:#9a7400}
body.scheme-yellow .games a:hover em{color:var(--btnfg)}
body.scheme-yellow .sp-menu button[aria-checked=true]::after{color:#9a7400}
body.scheme-yellow .sp-menu button[aria-checked=true]{outline-color:#c99700}

/* Grey - shades of grey on a light grey page */
body.scheme-grey{
  --bg:#eceef0;--fg:#202124;--hi:#000;--mut:#5f6368;--card:#fff;--line:#d2d5d9;
  --nav:#2b2d30;--sub:#44474b;--navfg:#e8eaed;--navhi:#fff;--navmut:#b0b4b9;--navacc:#c4c7cc;
  --btn:#3c4043;--btnhov:#202124;--btnfg:#fff;--def:#dadce0;--defhov:#c8cbcf;--deffg:#202124;
  --red:#b3261e;--gold:#6b6f74;--sky:#3c4043;
  --c1:#3c4043;--c2:#6b6f74;--c3:#202124;--c4:#8a8e93;--c5:#54585c;--tix:#fff;
  --inbg:#fff;--infg:#202124;
  color-scheme:light;
}
body.scheme-grey .timer,body.scheme-grey .cdr,body.scheme-grey .games a,body.scheme-grey .hash,body.scheme-grey .tk,body.scheme-grey .content blockquote{box-shadow:0 1px 3px rgba(0,0,0,.12)}
body.scheme-grey .f input{border-color:var(--line)}
body.scheme-grey .games a:hover em{color:var(--btnfg)}
body.scheme-grey .content a{color:var(--fg)}
body.scheme-grey .site-header .bar>.btn{background:#5f6368}
body.scheme-grey .site-header .bar>.btn:hover{background:#80868b}
body.scheme-grey .logo circle:first-child{fill:#9aa0a6!important}

/* Red - shades of red on a light red page */
body.scheme-red{
  --bg:#fdecec;--fg:#3a0d12;--hi:#1f0508;--mut:#8a4a51;--card:#fff;--line:#f2c4c8;
  --nav:#7a0f1c;--sub:#a3172a;--navfg:#fde3e5;--navhi:#fff;--navmut:#f0aab2;--navacc:#ff8a96;
  --btn:#d32f2f;--btnhov:#a82424;--btnfg:#fff;--def:#f8d3d6;--defhov:#f2bcc1;--deffg:#3a0d12;
  --red:#b71c1c;--gold:#e53950;--sky:#d32f2f;
  --c1:#d32f2f;--c2:#ef5350;--c3:#7a0f1c;--c4:#e57373;--c5:#b0213a;--tix:#fff;
  --inbg:#fff;--infg:#3a0d12;
  color-scheme:light;
}
body.scheme-red .timer,body.scheme-red .cdr,body.scheme-red .games a,body.scheme-red .hash,body.scheme-red .tk,body.scheme-red .content blockquote{box-shadow:0 1px 3px rgba(122,15,28,.12)}
body.scheme-red .f input{border-color:var(--line)}
body.scheme-red .games a:hover em{color:var(--btnfg)}
body.scheme-red .msg.err{font-weight:400;text-decoration:underline}

/* Sky - shades of blue on a light blue page */
body.scheme-sky{
  --bg:#e3effc;--fg:#0f2a4a;--hi:#061a33;--mut:#4b6b90;--card:#fff;--line:#bcd4ee;
  --nav:#0b3d6e;--sub:#155a9c;--navfg:#dcebfb;--navhi:#fff;--navmut:#a9c8ea;--navacc:#5bc0eb;
  --btn:#1e6fd9;--btnhov:#1558b0;--btnfg:#fff;--def:#cfe2f7;--defhov:#b9d4f2;--deffg:#0f2a4a;
  --red:#c62f3a;--gold:#39a0ed;--sky:#1e6fd9;
  --c1:#1e6fd9;--c2:#39a0ed;--c3:#0b3d6e;--c4:#5bc0eb;--c5:#2a4fa8;--tix:#fff;
  --inbg:#fff;--infg:#0f2a4a;
  color-scheme:light;
}
body.scheme-sky .timer,body.scheme-sky .cdr,body.scheme-sky .games a,body.scheme-sky .hash,body.scheme-sky .tk,body.scheme-sky .content blockquote{box-shadow:0 1px 3px rgba(11,61,110,.12)}
body.scheme-sky .f input{border-color:var(--line)}
body.scheme-sky .games a:hover em{color:var(--btnfg)}

/* Light - white and grey with orange */
body.scheme-light{
  --bg:#f4f5f8;--fg:#1f2a37;--hi:#000;--mut:#5b6676;--card:#fff;--nav:#fff;--sub:#eef0f4;--line:#d5dae2;
  --btn:#df691a;--btnhov:#b15315;--btnfg:#fff;--def:#e3e7ee;--defhov:#d3d9e3;--deffg:#1f2a37;
  --red:#c9302c;--gold:#e8a33d;--sky:#2f9fd0;
  --c1:#df691a;--c2:#e8a33d;--c3:#2f9fd0;--c4:#3fa34d;--c5:#d9534f;--tix:#1f2a37;
  --inbg:#fff;--infg:#1f2a37;
  color-scheme:light;
}
body.scheme-light .site-header{border-bottom:1px solid var(--line)}
body.scheme-light .site-footer{border-top:1px solid var(--line)}
body.scheme-light .card-line,body.scheme-light .timer,body.scheme-light .cdr,body.scheme-light .games a,body.scheme-light .hash,body.scheme-light .tk{box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* ========================================================== */
html{scroll-padding-top:110px;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.6 Poppins,"Segoe UI",Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}
/* Narrow, centred site: the whole page (menu, content and footer) is one column.
   Its width is --wrap at the top of this file. The column uses the colour scheme; outside it is white. */
html{background:#000}
body{width:100%;max-width:var(--wrap);margin:0 auto;box-shadow:0 0 40px rgba(0,0,0,.18)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:#fff;pointer-events:none}   /* the white area either side of the column */
a{color:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
img{max-width:100%;height:auto}
b,strong,th,h1,h2,h3,h4,h5,h6{font-weight:400}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--nav)}
.bar{max-width:var(--wrap);margin:auto;padding:10px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.logo{font-weight:400;font-size:1.35rem;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:8px;margin-right:auto;color:var(--navhi)}
.site-nav{min-width:0}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 18px;flex-wrap:wrap;justify-content:flex-end}
.site-footer .inner{padding-right:84px}
@media (min-width:821px){.site-header .bar{flex-wrap:nowrap}}
.site-nav a{text-decoration:none;color:var(--navfg);text-transform:uppercase;letter-spacing:.04em;font-size:.9rem}
.site-nav a{display:block;padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--navhi)}
.site-nav li.current a,.site-nav li.active a{color:var(--navhi);border-bottom-color:var(--navacc)}
.menu-toggle{display:none;background:transparent;border:1px solid var(--navmut);color:var(--navfg);padding:7px 10px;cursor:pointer;font:inherit;align-items:center;gap:4px;flex-direction:column}
.menu-toggle span{display:block;width:20px;height:2px;background:currentColor}
.menu-toggle b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- visitor colour picker ---------- */
.scheme-picker{position:fixed;right:18px;bottom:18px;z-index:40}
.sp-toggle{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--nav);border:2px solid var(--navacc);color:var(--navfg);cursor:pointer;padding:0;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform .15s}
.sp-toggle:hover,.sp-toggle[aria-expanded=true]{color:var(--navhi);transform:scale(1.06)}
.sp-toggle svg{width:22px;height:22px}
.sp-toggle b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sp-menu{position:absolute;right:0;bottom:calc(100% + 10px);z-index:30;min-width:210px;background:var(--card);color:var(--fg);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.25);padding:6px}
.sp-menu[hidden]{display:none}
.sp-title{margin:4px 8px 6px;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.sp-menu button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;color:var(--fg);font:inherit;font-size:.92rem;text-align:left;padding:7px 8px;cursor:pointer}
.sp-menu button:hover,.sp-menu button:focus-visible{background:var(--bg)}
.sp-menu button[aria-checked=true]{outline:1px solid var(--btn);outline-offset:-1px}
.sp-menu button[aria-checked=true]::after{content:"\2713";margin-left:auto;color:var(--btn)}
.sw{position:relative;display:inline-block;width:22px;height:22px;border:1px solid rgba(128,128,128,.45);flex:none}
.sw i{position:absolute;right:3px;bottom:3px;width:9px;height:9px}
.sp-menu .sp-reset{margin-top:4px;border-top:1px solid var(--line);color:var(--mut);font-size:.85rem;padding-top:9px}
body.scheme-kytech .sp-menu,body.scheme-midnight .sp-menu,body.scheme-superhero .sp-menu,body.scheme-emerald .sp-menu{border-color:rgba(255,255,255,.08)}

/* ---------- buttons ---------- */
.btn{font:inherit;font-weight:400;background:var(--btn);color:var(--btnfg);border:1px solid transparent;border-radius:0;padding:8px 16px;line-height:1.42857;cursor:pointer;text-decoration:none;display:inline-block;transition:background-color .15s}
.btn:hover{background:var(--btnhov)}
.btn.ghost{background:var(--def);color:var(--deffg)}
.btn.ghost:hover{background:var(--defhov)}

/* ---------- layout ---------- */
main{flex:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1{font-size:clamp(1.8rem,3.8vw,2.75rem);line-height:1.15;letter-spacing:-.02em;font-weight:300;margin:0}
h2{font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.1;margin:0 0 10px;font-weight:300}
h3{font-weight:400}
section{padding:44px 0;border-top:1px solid var(--card)}
.sub{color:var(--mut);max-width:58ch;margin:0 0 22px}
code{font:.85rem ui-monospace,Menlo,monospace;color:var(--mut);word-break:break-all}

/* ---------- normal pages (template.php) ---------- */
.page article{padding:40px 0 56px}
.page-title{margin-bottom:24px}
.content a{color:var(--btn)}
.content a:hover{color:var(--gold)}
.content blockquote,.content pre{color:var(--fg)}
.content h2{margin:32px 0 10px}
.content h3{font-size:1.25rem;font-weight:400;margin:24px 0 8px}
.content p,.content ul,.content ol{margin:0 0 16px}
.content ul,.content ol{padding-left:22px}
.content blockquote{margin:0 0 16px;padding:12px 18px;background:var(--card);border-left:4px solid var(--btn)}
.content hr{border:0;border-top:1px solid var(--card);margin:28px 0}
.content pre{background:var(--card);padding:14px;overflow:auto}
.content table{border-collapse:collapse;width:100%;margin:0 0 16px}
.content th,.content td{text-align:left;padding:8px 14px;border-top:1px solid var(--card)}
.content th{font-weight:400;border-top:0;border-bottom:2px solid var(--card)}
.content tbody tr:nth-child(odd){background:var(--card)}
/* wide.php: the column widens to --wide on that page */
body.tpl-wide{max-width:var(--wide)}
main.plain{max-width:none}

/* ---------- 404 page (paste kytech-404.html into the 404 content) ---------- */
body[class] .content a.btn{color:var(--btnfg);text-decoration:none}
body[class] .content a.btn.ghost{color:var(--deffg)}
.k404{text-align:center;max-width:640px;margin:0 auto;padding:4px 0 10px}
.k404 .k404-code{margin:0;font-size:clamp(3.2rem,9vw,5rem);font-weight:300;line-height:1;letter-spacing:.06em;color:var(--btn)}
.k404 .k404-title{margin:6px 0 14px;font-size:clamp(1.5rem,3.4vw,2rem);font-weight:300}
.k404 p{color:var(--mut)}
.k404-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 16px!important}
.k404-small{font-size:.9rem}
body.scheme-yellow .k404 .k404-code{color:#9a7400}
body.scheme-multicolour .k404 .k404-code,body.scheme-crazy .k404 .k404-code,body.scheme-crazylight .k404 .k404-code{background:var(--crazytext,var(--crazy,linear-gradient(90deg,#7c3aed,#ff3d81,#ff8a00)));-webkit-background-clip:text;background-clip:text;color:transparent}
body.scheme-multicolour .k404 .k404-code{background:linear-gradient(90deg,#7c3aed,#ff3d81,#ff8a00);-webkit-background-clip:text;background-clip:text}

/* ---------- contact form (contact.php) ---------- */
.cform-wrap{margin-top:8px}
.cform{background:var(--card);border:1px solid var(--line);padding:22px}
.cf-row{margin:0 0 16px}
.cf-row label{display:block;margin:0 0 6px;font-size:.95rem}
.cform input[type=text],.cform input[type=email],.cform select,.cform textarea{width:100%;font:inherit;font-size:.95rem;padding:9px 12px;border-radius:0;border:1px solid var(--line);background:var(--inbg);color:var(--infg)}
.cform textarea{resize:vertical;min-height:140px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--sky);outline-offset:1px}
.cf-help{margin:8px 0 0;font-size:.85rem;color:var(--mut)}
.cf-shield{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:14px 0 0;padding:8px 14px;font-size:.88rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--btn)}
.cf-shield svg{flex:none;width:22px;height:22px;color:var(--btn)}
.cf-pow{margin:8px 0 0;font-size:.85rem;color:var(--mut);min-height:1.2em}
.cf-pow:empty{display:none}
.cform .btn{margin-top:4px}
.cf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cform-ok,.cform-err{padding:16px 20px;margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--btn)}
.cform-err{border-left-color:var(--red);color:var(--fg)}
.cform-err ul{margin:0;padding-left:18px}
.cform-ok p{margin:0}.cform-ok .cf-big{font-size:1.15rem;margin-bottom:4px}

/* ---------- footer ---------- */
.site-footer{background:var(--nav);margin-top:auto}
.site-footer .inner{max-width:var(--wrap);margin:auto;padding:20px;color:var(--navmut);font-size:.9rem}
.site-footer p{margin:0 0 6px}
.site-footer p:last-child{margin:0}
.site-footer a{color:var(--navfg)}
.site-footer .copy{color:var(--navfg)}
.foot-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:6px 22px;margin:0 0 6px}
.foot-row .copy{margin:0}
.foot-links{display:flex;gap:18px}
.foot-links a{color:var(--navfg);text-decoration:none;font-size:.9rem}
.foot-links a:hover{color:var(--navhi);text-decoration:underline}

/* ---------- small screens ---------- */
@media (max-width:820px){
  .menu-toggle{display:flex}
  .site-nav{order:5;flex-basis:100%;display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:6px 0 4px}
  .site-nav a{padding:8px 0;border-bottom:1px solid var(--bg)}
  .site-nav li.current a{border-bottom-color:var(--navacc)}
  .site-header .bar{gap:10px}
  .scheme-picker{right:12px;bottom:12px}
  .site-footer .inner{padding-right:20px;padding-bottom:72px}
}
@media (max-width:520px){
  .logo{font-size:1.15rem;min-width:0}
}