/*
Theme Name: SKINT?
Theme URI: https://skintdaily.com
Author: SKINT Daily
Author URI: https://skintdaily.com
Description: Merged SKINT? + CHECKED. design for skintdaily.com — viral money tools and a daily challenge game for under-25s in the UK and Europe. Black base, hot pink, lime and purple gradient, sticker-style cards. Standalone theme, no page builders, no external assets.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skint
*/

/* ============ Base (from demo5-merged) ============ */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Arial Black',Arial,Helvetica,sans-serif}
html{scroll-behavior:smooth}
body{background:#0f0f12;color:#fff;line-height:1.4}
a{color:inherit}
img{max-width:100%;height:auto}
.ticker{background:#c8ff00;color:#000;font-size:13px;padding:8px 14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #2a2a33;flex-wrap:wrap}
.logo{background:#ff2e88;color:#fff;font-size:24px;font-weight:900;padding:8px 14px;border-radius:10px;transform:rotate(-2deg);text-decoration:none;line-height:1}
.site-header h1,.site-header .site-name{font-size:27px;letter-spacing:-1px;line-height:1}
.site-header h1 span,.site-header .site-name span{color:#c8ff00}
.site-header .tagline{font-family:Arial;font-size:12px;color:#a7a7b3;font-weight:700;margin-top:3px}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:6px;list-style:none;flex-wrap:wrap}
.site-nav a{font-family:Arial;font-weight:800;font-size:13px;text-decoration:none;background:#1e1e26;border:1px solid #333340;padding:8px 13px;border-radius:999px;display:block}
.site-nav a:hover{background:#ff2e88}
.streak{background:#22114d;border:1px solid #7b2fff;color:#fff;padding:9px 14px;border-radius:999px;font-family:Arial;font-weight:900;font-size:13px}
.wrap{max-width:1180px;margin:0 auto;padding:20px 16px 32px}
.hero{text-align:center;padding:6px 8px 18px}
.hero h2{font-size:44px;line-height:1.02;letter-spacing:-1px;text-transform:uppercase}
.hero h2 .pink{color:#ff2e88}.hero h2 .lime{color:#c8ff00}
.hero h2 .grad{background:linear-gradient(90deg,#3ef2c5,#7b2fff,#ff3ea5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-family:Arial;font-weight:700;color:#c9c9d4;font-size:15px;margin-top:10px}

/* ============ Hero duo cards ============ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.game{background:#fff;color:#17122e;border-radius:20px;padding:19px;box-shadow:8px 8px 0 #7b2fff}
.game h3,.calc h3{font-size:19px}
.game h3{text-transform:none}
.calc h3{text-transform:uppercase}
.game .sub,.calc .sub{font-family:Arial;font-size:12px;color:#666;font-weight:800;margin-top:3px}
.arena{margin-top:12px;background:linear-gradient(135deg,#7b2fff,#ff3ea5);color:#fff;border-radius:14px;padding:18px;text-align:center}
.arena small{font-family:Arial;font-weight:900;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.arena .big{font-size:31px;margin:6px 0}
.arena p{font-family:Arial;font-size:12px;color:#ffe3f3;font-weight:700}
.gscore{display:flex;gap:8px;margin-top:11px}
.gscore div{flex:1;background:#f2efff;border-radius:10px;padding:8px;text-align:center;font-family:Arial;font-size:11px;font-weight:800;color:#555}
.gscore b{display:block;font-size:16px;color:#17122e}
.calc{background:#fff;color:#111;border-radius:20px;padding:19px;box-shadow:8px 8px 0 #ff2e88}
.calc label,.panel label{font-family:Arial;font-size:11px;font-weight:900;color:#888;display:block;margin:11px 0 5px;text-transform:uppercase;letter-spacing:.4px}
.field,.calc input[type=number],.calc select,.panel input[type=number],.panel input[type=text],.panel select{background:#f2f2f5;border:2px solid #111;border-radius:11px;padding:11px;font-family:Arial;font-weight:900;font-size:15px;width:100%;color:#111}
.game input[type=number],.game input[type=text],.calc input[type=text]{background:#f2f2f5;border:2px solid #111;border-radius:11px;padding:11px;font-family:Arial;font-weight:900;font-size:15px;width:100%;color:#111}
button,.btn{width:100%;margin-top:12px;background:#111;color:#c8ff00;border:0;padding:13px;border-radius:11px;font-size:15px;font-weight:900;cursor:pointer;font-family:'Arial Black',Arial,sans-serif;text-align:center;text-decoration:none;display:block}
button:hover,.btn:hover{opacity:.88}
.game button{background:#17122e;color:#fff}
.result{margin-top:11px;background:#111;color:#fff;border-radius:11px;padding:13px;text-align:center;font-family:Arial;display:none}
.result.show{display:block}
.result b{font-size:22px;color:#c8ff00}
.result p{font-size:12px;color:#ddd;font-weight:700;margin-top:3px}
.countdown{font-family:Arial;font-size:12px;font-weight:800;color:#666;text-align:center;margin-top:9px}
.src-note{font-family:Arial;font-size:11px;font-weight:700;color:#888;line-height:1.5;margin-top:10px}

/* ============ Sections / tool panels ============ */
.section{margin-top:28px}
.section>h3{font-size:24px;text-transform:uppercase;margin-bottom:13px}
.section>h3 span{color:#ff2e88}.section>h3 em{font-style:normal;color:#3ef2c5}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.tool{border-radius:16px;padding:15px;color:#111;min-height:122px;text-decoration:none;display:block;transition:transform .12s}
.tool:hover{transform:translateY(-3px) rotate(-.5deg)}
.tool .ic{font-size:25px}.tool h4{font-size:15px;margin:7px 0 4px;text-transform:uppercase}
.tool p{font-family:Arial;font-size:12.5px;font-weight:700;line-height:1.45;color:#333}
.panel{background:#fff;color:#111;border-radius:20px;padding:19px;margin-top:14px}
.panel h4{font-size:19px;text-transform:uppercase}
.panel .sub{font-family:Arial;font-size:12px;color:#666;font-weight:800;margin-top:3px}
.panel .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel .result{background:#17122e}
.panel .result b{color:#3ef2c5}
.adslot{margin-top:26px;border:2px dashed #3a3a46;border-radius:14px;color:#55555f;text-align:center;padding:16px;font-family:Arial;font-weight:900;font-size:12px;letter-spacing:2px}

/* Reaction game */
.reaction-box{margin-top:12px;border-radius:14px;padding:34px 16px;text-align:center;font-size:20px;cursor:pointer;background:#2a2a33;color:#fff;user-select:none}
.reaction-box.wait{background:#d92638}
.reaction-box.go{background:#1db954;color:#062b14}
.reaction-box small{display:block;font-family:Arial;font-weight:700;font-size:13px;margin-top:6px}

/* Flag game */
.flag-stage{margin-top:12px;background:#17122e;color:#fff;border-radius:14px;padding:20px;text-align:center}
.flag-stage .flag{font-size:64px;line-height:1.1}
.flag-stage .timer{font-family:Arial;font-weight:900;color:#ffb020;font-size:14px}
.flag-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.flag-choices button{margin-top:0;background:#f2f2f5;color:#111;border:2px solid #111;font-family:Arial;font-size:14px;padding:11px 6px}
.flag-choices button.right{background:#c8ff00}
.flag-choices button.wrong{background:#ff2e88;color:#fff}

/* Quiz */
.quiz-q{margin-top:14px;border-top:2px solid #eee;padding-top:12px}
.quiz-q p{font-family:Arial;font-weight:900;font-size:15px}
.quiz-opts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.quiz-opts button{width:auto;margin-top:0;background:#f2f2f5;color:#111;border:2px solid #111;font-family:Arial;font-size:14px;padding:9px 14px}
.quiz-opts button.picked{background:#111;color:#c8ff00}

/* ============ News cards ============ */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.card{background:#1b1b22;border:1px solid #2e2e3a;border-radius:16px;overflow:hidden}
.card .img{height:100px;display:flex;align-items:center;justify-content:center;font-size:36px;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .b{padding:13px}
.card .tag{font-family:Arial;font-size:11px;font-weight:900;color:#c8ff00;text-transform:uppercase}
.card h4{font-size:15px;line-height:1.3;margin:6px 0}
.card h4 a{text-decoration:none}
.card h4 a:hover{color:#ff8ac2}
.card p{font-family:Arial;font-size:12.5px;color:#a7a7b3;line-height:1.5;font-weight:700}
.empty-note{font-family:Arial;font-weight:700;color:#a7a7b3;background:#1b1b22;border:1px solid #2e2e3a;border-radius:16px;padding:18px}

/* ============ Article / archive ============ */
.article{max-width:760px;margin:0 auto}
.article .tag{display:inline-block;font-family:Arial;font-size:11px;font-weight:900;color:#000;background:#c8ff00;padding:5px 10px;border-radius:999px;text-transform:uppercase}
.article h1,.page-title{font-size:36px;line-height:1.08;letter-spacing:-.5px;margin:14px 0 8px;text-transform:none}
.article .meta{font-family:Arial;font-size:13px;color:#a7a7b3;font-weight:700;margin-bottom:16px}
.article .feat{border-radius:16px;overflow:hidden;margin-bottom:18px}
.article .body{font-family:Arial;font-size:17px;line-height:1.65;color:#e8e8ee}
.article .body p{margin-bottom:16px}
.article .body h2,.article .body h3{font-family:'Arial Black',Arial,sans-serif;margin:24px 0 10px;line-height:1.2}
.article .body a{color:#3ef2c5}
.article .body ul,.article .body ol{margin:0 0 16px 22px}
.article .body img{border-radius:12px}
.backlink{font-family:Arial;font-weight:900;font-size:13px;color:#3ef2c5;text-decoration:none}
.cta-band{margin-top:26px;background:linear-gradient(135deg,#7b2fff,#ff3ea5);border-radius:16px;padding:20px;text-align:center}
.cta-band h3{font-size:21px;text-transform:uppercase}
.cta-band p{font-family:Arial;font-weight:700;font-size:14px;margin-top:5px;color:#ffe3f3}
.cta-band .btn{background:#111;color:#c8ff00;max-width:340px;margin:13px auto 0}
.pagination{margin-top:22px;font-family:Arial;font-weight:900;text-align:center}
.pagination a,.pagination span{display:inline-block;background:#1e1e26;border:1px solid #333340;padding:8px 13px;border-radius:999px;text-decoration:none;margin:2px}
footer.site-footer{margin-top:30px;border-top:1px solid #2a2a33;padding:22px 16px 28px;text-align:center;color:#777;font-family:Arial;font-size:12px;font-weight:700}
footer.site-footer .flogo{display:inline-block;background:#ff2e88;color:#fff;font-weight:900;padding:5px 10px;border-radius:8px;transform:rotate(-2deg);margin-bottom:9px;font-family:'Arial Black',Arial,sans-serif}
footer.site-footer a{color:#a7a7b3}

/* ============ Responsive (demo breakpoint) ============ */
@media(max-width:700px){
  .duo{grid-template-columns:1fr}
  .hero h2{font-size:30px}
  .tools{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:1fr}
  .streak{display:none}
  .panel .row{grid-template-columns:1fr}
  .flag-choices{grid-template-columns:1fr}
  .article h1,.page-title{font-size:27px}
  .site-nav{margin-left:0}
  .gscore b{font-size:14px}
}