/* Nikash's Website — shared styles (mobile-first) */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --red: #e3350d; --dark-red: #b32a0a; --yellow: #ffcb05; --blue: #3b4cca;
  --bg: #f4f6fb; --card: #ffffff; --ink: #22283a; --muted: #6b7280;
  --green: #16a34a; --radius: 14px;
}
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; }

header.site {
  background: linear-gradient(135deg, var(--red), var(--dark-red));
  color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 50;
}
header.site .logo { font-size: 1.25rem; font-weight: 800; text-decoration: none; color: #fff; display: flex; align-items: center; gap: 8px; }
header.site .logo .ball { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(to bottom, #fff 45%, #fff 45%, var(--ink) 45%, var(--ink) 55%, var(--red) 55%); border: 2px solid #fff; display: inline-block; position: relative; background: linear-gradient(to bottom, var(--red) 45%, var(--ink) 45%, var(--ink) 55%, #fff 55%); }
header.site nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
header.site nav a { color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 8px; font-weight: 600; font-size: .92rem; }
header.site nav a:hover, header.site nav a.active { background: rgba(255,255,255,.22); }

main { max-width: 900px; margin: 0 auto; padding: 20px 14px 60px; }
h1 { font-size: 1.7rem; margin: 10px 0 4px; }
h2 { font-size: 1.2rem; margin: 18px 0 8px; }
p.sub { color: var(--muted); margin-bottom: 16px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.card { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
a.card { text-decoration: none; color: var(--ink); transition: transform .12s, box-shadow .12s; display: block; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.13); }
.card .emoji { font-size: 2rem; }
.card h3 { margin: 8px 0 4px; }
.card p { color: var(--muted); font-size: .92rem; }

button, .btn {
  background: var(--red); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px;
  font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--dark-red); }
button.secondary, .btn.secondary { background: var(--blue); }
button.small { padding: 5px 10px; font-size: .85rem; }
button.ghost { background: #e5e7eb; color: var(--ink); }
button.danger { background: #991b1b; }
button:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  width: 100%; padding: 11px 12px; border: 2px solid #d8dce6; border-radius: 10px; font-size: 1rem; margin: 6px 0 12px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
label { font-weight: 600; font-size: .92rem; }
form.auth { max-width: 380px; margin: 30px auto; }

table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef0f5; font-size: .95rem; }
th { background: #f1f3f9; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .78rem; font-weight: 700; }
.badge.gold { background: var(--yellow); color: #7a5c00; }
.badge.green { background: #dcfce7; color: var(--green); }
.badge.red { background: #fee2e2; color: #b91c1c; }
.badge.blue { background: #dbeafe; color: #1d4ed8; }
.badge.gray { background: #e5e7eb; color: #4b5563; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 12px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 200; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; }
.toast.error { background: #b91c1c; }

.checklist { list-style: none; }
.checklist li { background: var(--card); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.checklist input[type=checkbox] { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--green); }
.checklist .pts { margin-left: auto; font-weight: 800; color: var(--blue); white-space: nowrap; }
.checklist li.done { opacity: .65; }
.checklist li.done .label { text-decoration: line-through; }

.statrow { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.stat { flex: 1; min-width: 120px; background: var(--card); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.stat .num { font-size: 1.8rem; font-weight: 800; color: var(--red); }
.stat .lbl { color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; }

.hero { text-align: center; padding: 36px 10px 10px; }
.hero h1 { font-size: 2.2rem; }
.hero .tag { color: var(--muted); font-size: 1.05rem; }

.gameframe { width: 100%; height: calc(100vh - 130px); min-height: 500px; border: 0; border-radius: var(--radius); background: #000; box-shadow: 0 4px 16px rgba(0,0,0,.2); }

.msg { padding: 12px 14px; border-radius: 10px; margin: 10px 0; font-weight: 600; }
.msg.info { background: #dbeafe; color: #1e40af; }
.msg.warn { background: #fef9c3; color: #854d0e; }

.progressbar { height: 12px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.progressbar > div { height: 100%; background: linear-gradient(90deg, var(--yellow), var(--green)); border-radius: 99px; transition: width .3s; }

.comment { background: #fffbeb; border-left: 4px solid var(--yellow); padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; }
.comment .who { font-weight: 700; font-size: .85rem; color: #92400e; }

@media (max-width: 600px) {
  header.site nav a { padding: 6px 8px; font-size: .82rem; }
  .hero h1 { font-size: 1.6rem; }
  th, td { padding: 8px 8px; font-size: .85rem; }
}