/* Fidgit visual identity. Flat surfaces throughout — no shadows, no gradients.
   Old-Reddit-style flat list: hairline dividers, not boxed cards. */

:root {
  /* Terracotta-sage palette. Token names kept from the original scheme so every
     existing var() reference picks up the new colors automatically —
     --pond now holds the sage primary, --ember the terracotta accent. */
  --pond: #6B8E5A;          /* sage — primary: nav bar, links, tag text, upvote */
  --ember: #C96A43;         /* terracotta — accent: submit/primary buttons, trending, downvote */
  --ink: #1C1B18;           /* body text + one placeholder background */
  --paper: #FBF4EA;         /* page background */
  --sand: #F0E4CC;          /* sidebar widget background */
  --border: #E8DCC0;        /* hairline dividers / card borders */
  --muted: #8A7F6A;         /* meta text: author, comment count, tagline */
  --muted-strong: #5C5340;  /* sidebar "About" body text */
  --nav-link: #E3EEDD;      /* secondary links sitting on the sage nav */
  --arrow: #B5A98D;         /* inactive vote arrows */
  --tag-bg: #FFFFFF;        /* tag pill background */
  --on-accent: #FFF6EE;     /* text on the terracotta buttons */
  --sans: "Inter", system-ui, sans-serif;
  --display: "Baloo 2", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--pond); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Top nav ---- */
.nav { background: var(--pond); }
.nav-inner {
  max-width: 960px; margin: 0 auto; padding: 16px 16px;
  display: flex; align-items: center; gap: 20px;
}
.nav .brand {
  margin-right: auto; display: flex; align-items: center;
}
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 42px;
  color: var(--paper); line-height: 1.1; letter-spacing: -.5px;
}

/* The word "fidgit" in official (non-user) copy, set in the logo face so the
   brand reads consistently wherever it appears inline. Headings already use
   --display; this covers body text, labels, nav, and muted copy. */
.fidgit { font-family: var(--display); font-weight: 600; font-size: 1.06em; }
.nav a { color: var(--nav-link); font-weight: 500; font-size: 14px; }
.nav .submit {
  background: var(--ember); color: var(--on-accent);
  padding: 6px 15px; border-radius: 999px; font-weight: 600;
}
.nav .submit:hover { text-decoration: none; filter: brightness(1.05); }
.nav .plus { display: none; } /* mobile only */

/* ---- Page shell ---- */
.wrap { max-width: 960px; margin: 0 auto; padding: 16px; }
.columns { display: grid; grid-template-columns: 1fr 200px; gap: 28px; align-items: start; }

.pill-tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.pill-tabs a {
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 4px 12px; border-radius: 999px;
}
.pill-tabs a.active { background: var(--sand); color: var(--pond); }

/* ---- Feed item (grid so the same markup reflows to mobile) ---- */
.feed-item {
  display: flex; gap: 12px;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--border);
}
.feed-item .vote { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.feed-item .vote button { background: none; border: none; padding: 0; cursor: pointer; color: var(--arrow); display: flex; line-height: 1; }
.feed-item .vote button.up.active { color: var(--pond); }
.feed-item .vote button.down.active { color: var(--ember); }
/* a lit-up vote arrow pops slightly bigger + bolder */
.feed-item .vote button svg, .feed-item .actions .a svg { transition: transform .12s ease, stroke-width .12s ease; }
.feed-item .vote button.up.active svg, .feed-item .vote button.down.active svg,
.feed-item .actions .a.up.active svg, .feed-item .actions .a.down.active svg { transform: scale(1.15); stroke-width: 3.6; }
.feed-item .vote .count { font-size: 12px; font-weight: 700; color: var(--ink); }
.feed-item .vote svg { width: 16px; height: 16px; display: block; }

.feed-item .thumb {
  flex: 0 0 auto; width: 240px; aspect-ratio: 16 / 9; border-radius: 6px;
  background: var(--ink); align-self: flex-start; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--sand); font-family: var(--display); font-size: 12px;
}
.feed-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* text column: fills the thumbnail's height and spreads its rows evenly —
   tags pinned to the top, Save/Share bar to the bottom, the rest spaced out */
.fi-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; row-gap: 4px; }

.feed-item .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  background: var(--tag-bg); color: var(--pond); border: 1px solid var(--border);
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.tag:hover { text-decoration: none; filter: brightness(0.97); }

.feed-item .title {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  color: var(--ink); line-height: 1.2; margin: 1px 0;
}
.feed-item .tagline {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.feed-item .meta { font-size: 12px; color: var(--muted); display: flex; gap: 4px 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.feed-item .meta > span { white-space: nowrap; }
.feed-item .meta .trending { color: var(--ember); font-weight: 600; display: flex; align-items: center; gap: 3px; }
.feed-item .meta svg { width: 13px; height: 13px; vertical-align: -2px; }

/* Save / Share buttons (feed cards + game page) */
.post-bar { display: flex; gap: 6px; }
.post-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px; cursor: pointer; color: var(--muted);
  font-size: 12px; font-weight: 600; font-family: inherit;
}
.post-btn:hover { color: var(--ink); border-color: var(--muted); }
.post-btn.active { color: var(--pond); border-color: var(--pond); }
.post-btn svg { width: 15px; height: 15px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 10px);
  background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; opacity: 0; z-index: 100; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Mobile-only bottom action row (hidden on desktop) */
.feed-item .actions { grid-area: actions; display: none; }

/* ---- Sidebar widgets (these ARE allowed to be boxed) ---- */
.widget { background: var(--sand); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.widget h4 { margin: 0 0 8px; font-family: var(--display); font-size: 14px; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.widget li .n { color: var(--muted); }
.widget p { margin: 0; font-size: 13px; color: var(--muted-strong); }

/* ---- Content typography ---- */
h1 { font-family: var(--display); font-weight: 700; font-size: 26px; margin: 4px 0 10px; }
h2 { font-family: var(--display); font-weight: 600; font-size: 19px; margin: 20px 0 8px; }
.muted { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

/* ---- Forms & buttons ---- */
.card { max-width: 440px; }
label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 13px; }
label .hint { font-weight: 400; color: var(--muted); }
input, textarea, select {
  font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; color: var(--ink);
}
input:focus, textarea:focus { outline: none; border-color: var(--pond); }
.counter { float: right; font-weight: 400; color: var(--muted); font-size: 12px; }
.counter.over { color: var(--ember); }
.btn {
  font: inherit; font-weight: 600; cursor: pointer; border: none; border-radius: 999px;
  padding: 9px 18px; background: var(--ember); color: var(--on-accent);
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.secondary { background: var(--sand); color: var(--ink); }
.btn.small { padding: 5px 12px; font-size: 13px; }
/* ---- Site footer (legal links + newsletter opt-in) ---- */
.site-footer { border-top: 1px solid var(--border); margin-top: 48px; background: var(--sand); }
.foot-inner {
  max-width: 960px; margin: 0 auto; padding: 24px 16px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
}
.foot-col { max-width: 420px; }
.foot-col strong { font-family: var(--display); }
.foot-col p { margin: 4px 0 10px; }
.nl-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nl-form input { width: auto; flex: 1 1 200px; }
.nl-form .btn { flex: none; }
.nl-status { font-size: 13px; flex-basis: 100%; }
.foot-links { display: flex; align-items: center; gap: 16px; font-size: 14px; padding-top: 4px; }
@media (max-width: 640px) { .foot-inner { flex-direction: column; gap: 18px; } }

/* Checkbox + label row (e.g. the Terms agreement on signup). */
.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 14px; margin-top: 12px; }
.check input[type="checkbox"] { width: auto; margin-top: 3px; flex: none; }
.error { color: #b02; margin: 10px 0; font-size: 13px; }
.ok { color: var(--pond); margin: 10px 0; font-size: 13px; font-weight: 600; }

/* ---- Submit page: parameters + how-to ---- */
.intro { max-width: 620px; }
.lead { font-weight: 600; font-size: 14px; color: var(--ink); margin: 20px 0 2px; }
.rules, .steps { padding-left: 22px; margin: 8px 0 14px; }
.rules li, .steps li { font-size: 13.5px; color: var(--muted-strong); line-height: 1.45; margin: 5px 0; }
.rules code, .steps code { background: var(--sand); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

/* ---- Tag input (submit page) ---- */
.taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: #fff; }
.taginput input { border: none; padding: 4px; flex: 1; min-width: 120px; }
.taginput input:focus { outline: none; }
.chip { background: var(--sand); color: var(--pond); font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 999px; display: inline-flex; gap: 5px; align-items: center; }
.chip button { border: none; background: none; color: var(--pond); cursor: pointer; font-size: 13px; padding: 0; line-height: 1; }
.suggest { position: relative; }
.suggest-list { position: absolute; z-index: 10; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; margin-top: 4px; overflow: hidden; }
.suggest-list div { padding: 7px 11px; cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; }
.suggest-list div:hover, .suggest-list div.hi { background: var(--sand); }
.suggest-list .n { color: var(--muted); }

/* ---- Game page ---- */
.game-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.frame-wrap { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 14px 0; background: #fff; }
iframe.game { width: 100%; height: 520px; border: 0; display: block; }

/* Full-window mode: the game fills the entire browser window. */
.expand-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer;
  background: rgba(28, 27, 24, .70); color: #fff;
  font: 600 13px var(--sans); line-height: 1;
  display: inline-flex; align-items: center; gap: 6px;
  opacity: .55; transition: opacity .15s ease, background .15s ease;
}
.frame-wrap:hover .expand-btn { opacity: 1; }
.expand-btn:hover { background: rgba(28, 27, 24, .9); opacity: 1; }
.frame-wrap.full-window {
  position: fixed; inset: 0; z-index: 1000; margin: 0;
  border: 0; border-radius: 0;
}
.frame-wrap.full-window iframe.game { height: 100vh; height: 100dvh; }
.frame-wrap.full-window .expand-btn { opacity: 1; }

/* Real fullscreen (used on mobile, where a fixed overlay still sits under the
   browser's toolbars). Separate rules per prefix: a browser that doesn't know one
   pseudo-class would otherwise drop the whole grouped selector. */
.frame-wrap:fullscreen { border: 0; border-radius: 0; background: #fff; }
.frame-wrap:fullscreen iframe.game { height: 100vh; height: 100dvh; }
.frame-wrap:fullscreen .expand-btn { opacity: 1; }
.frame-wrap:-webkit-full-screen { border: 0; border-radius: 0; background: #fff; }
.frame-wrap:-webkit-full-screen iframe.game { height: 100vh; }
.frame-wrap:-webkit-full-screen .expand-btn { opacity: 1; }
/* Touch devices have no hover, so keep the button fully visible. */
@media (pointer: coarse) { .expand-btn { opacity: 1; } }

.vote-bar { display: flex; align-items: center; gap: 10px; }
.vote-bar .score { font-weight: 700; }
.vote-bar button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--muted); font-weight: 600; }
.vote-bar button.up.active { color: var(--pond); border-color: var(--pond); }
.vote-bar button.down.active { color: var(--ember); border-color: var(--ember); }

/* ---- Comments ---- */
.comment { display: flex; align-items: stretch; margin: 4px 0; }
.comment-main { flex: 1 1 auto; min-width: 0; padding-left: 8px; }
/* clickable thread line — thin line, wide hit area */
.thread-line { flex: 0 0 auto; width: 11px; padding: 0; margin: 2px 0; border: none; background: none; cursor: pointer; position: relative; align-self: stretch; }
.thread-line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border); transform: translateX(-50%); border-radius: 2px; }
.thread-line:hover::before { background: var(--pond); }
.comment .byline { font-size: 12px; color: var(--muted); }
.comment .ctext { margin: 2px 0; }
.collapse-hint { display: none; color: var(--pond); font-weight: 600; }
/* collapsed: keep only the byline, and reveal the [+N] hint */
.comment.collapsed > .comment-main > *:not(.byline) { display: none; }
.comment.collapsed > .comment-main .collapse-hint { display: inline; }
.comment .replies { margin-top: 2px; }

.comment-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; font-size: 12px; }
.comment-actions .cvotes { display: flex; align-items: center; gap: 5px; }
.comment-actions .cvote { background: none; border: none; padding: 0; cursor: pointer; color: var(--arrow); display: flex; }
.comment-actions .cvote svg { width: 15px; height: 15px; transition: transform .12s ease, stroke-width .12s ease; }
.comment-actions .cvote.up.active { color: var(--pond); }
.comment-actions .cvote.down.active { color: var(--ember); }
.comment-actions .cvote.up.active svg, .comment-actions .cvote.down.active svg { transform: scale(1.15); stroke-width: 3.6; }
.comment-actions .cscore { font-size: 12px; font-weight: 700; color: var(--ink); min-width: 8px; text-align: center; }
.comment-actions .clink { background: none; border: none; padding: 0; cursor: pointer; color: var(--muted); font-weight: 600; font-family: inherit; font-size: 12px; }
.comment-actions .clink:hover { color: var(--ink); }
form.reply { margin: 6px 0; }

/* clickable usernames */
.user-link { color: var(--muted); font-weight: 600; }
.user-link:hover { color: var(--pond); }

/* ---- Downvote gut-check modal ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(20, 18, 14, .45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.modal { background: var(--paper); border-radius: 12px; padding: 22px; max-width: 400px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal h3 { margin: 0 0 8px; font-family: var(--display); font-size: 19px; }
.modal p { margin: 0 0 18px; font-size: 14px; line-height: 1.4; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; }
.modal-actions .btn { width: 100%; text-align: center; }
.modal-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; resize: vertical; margin-bottom: 4px; }
.modal-input:focus { outline: none; border-color: var(--pond); }
.report-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.report-reason { background: var(--sand); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.report-reason:hover { border-color: var(--muted); }
.report-reason.selected { background: var(--pond); color: var(--paper); border-color: var(--pond); }
.char-counter { text-align: right; font-size: 11px; color: var(--muted); margin: 0 0 14px; }

/* ---- Public profile stats ---- */
.stats { display: flex; gap: 26px; margin-top: 12px; }
.stat-n { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1; }
.stat-l { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---- Status badges (me / admin) ---- */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--sand); color: var(--muted); }
.badge.pending { background: #FCEED0; color: #8A6D1B; }
.badge.approved { background: #D6EEE4; color: #14684F; }
.badge.rejected, .badge.removed { background: #F7D9CE; color: #A33417; }
.badge.flagged { background: #FBE3CE; color: #9A4A16; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .nav .submit { display: none; }
  .nav .plus { display: flex; color: var(--paper); }
  .columns { grid-template-columns: 1fr; gap: 0; }
  .sidebar { display: none; }

  .feed-item { flex-direction: column; gap: 8px; }
  .feed-item .vote, .feed-item .meta { display: none; }
  .feed-item .thumb { width: 100%; align-self: stretch; }
  .feed-item .actions {
    display: flex; gap: 18px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 4px;
  }
  .feed-item .actions .a { display: flex; align-items: center; gap: 5px; }
  .feed-item .actions .a.up.active { color: var(--pond); }
  .feed-item .actions svg { width: 16px; height: 16px; }
  .feed-item .actions .author { margin-left: auto; }
}