*{box-sizing:border-box}body{margin:0;font-family:"Comic Sans MS","Chalkboard SE","Trebuchet MS",system-ui,sans-serif;background:#fff8e1;color:#2d2d2d;font-size:20px;line-height:1.5}
header{background:#2ecc71;color:#fff;padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
header a.brand{color:#fff;font-size:28px;font-weight:bold;text-decoration:none}
nav a{display:inline-block;background:#fff;color:#27ae60;padding:12px 18px;border-radius:30px;margin:4px;text-decoration:none;font-weight:bold;min-height:48px}
main{max-width:900px;margin:auto;padding:16px}
.hero{text-align:center}.hero svg{width:min(260px,70vw);height:auto}
h1{color:#e67e22;font-size:clamp(32px,6vw,52px);margin:.3em 0}h2{color:#8e44ad}
.btn{display:inline-block;background:#ff6b6b;color:#fff;font-size:26px;padding:18px 30px;border-radius:40px;text-decoration:none;font-weight:bold;border:0;cursor:pointer;min-height:64px;box-shadow:0 6px 0 #c0392b;margin:8px}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c0392b}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:#fff;border-radius:24px;padding:20px;box-shadow:0 4px 12px #0002;text-align:center}
.card.soon{opacity:.6}
footer{text-align:center;padding:24px;font-size:16px}footer a{color:#8e44ad}
.notice{background:#fdebd0;border:3px dashed #e67e22;border-radius:16px;padding:12px 16px}
.picks{border:4px solid #8e44ad;border-radius:20px;padding:16px;background:#f5eefa}
.tag{background:#8e44ad;color:#fff;border-radius:8px;padding:2px 10px;font-size:16px}
.pg-bg{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999}
.pg-box{background:#fff;border-radius:20px;padding:20px;max-width:320px;width:90%;text-align:center}
.pg-q{font-size:32px;font-weight:bold;margin:8px 0}.pg-out{font-size:28px;min-height:40px;border:3px solid #8e44ad;border-radius:12px;margin-bottom:10px}
.pg-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pg-key{font-size:26px;padding:12px;border-radius:12px;border:0;background:#f5eefa;cursor:pointer}
.pg-close{margin-top:12px;background:none;border:0;color:#8e44ad;font-size:18px;cursor:pointer}
.sponsor-card{margin:32px auto 0;max-width:520px;border:2px solid #bbb;border-radius:16px;padding:10px 14px;background:#fafafa;font-size:16px;text-align:center}
.sponsor-card a{color:#333;text-decoration:none}.sponsor-tag{display:inline-block;background:#666;color:#fff;border-radius:6px;padding:1px 8px;font-size:13px;margin-bottom:6px}
.sponsor-img{display:block;max-height:60px;margin:0 auto 6px}
.pg-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.pg-box{background:#fff;border-radius:20px;padding:20px;max-width:340px;width:100%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3);color:#222}
.pg-q{font-size:30px;font-weight:bold;margin:8px 0}
.pg-out{font-size:28px;min-height:40px;border:2px solid #ddd;border-radius:12px;margin:8px 0 12px;padding:4px}
.pg-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pg-key{font-size:24px;padding:14px 0;border:none;border-radius:12px;background:#e8f0ff;cursor:pointer}
.pg-key:active{background:#c9dbff}
.pg-close{margin-top:12px;font-size:18px;padding:10px 24px;border:none;border-radius:12px;background:#eee;cursor:pointer}