/* Cagadales feed — all colors/fonts come from CSS vars set by the shortcode. */

.cg-root{
	--cg-shadow: 0 2px 0 rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
	max-width: var(--cg-maxw);
	margin: 0 auto;
	padding: 20px 14px 80px;
	background: var(--cg-bg);
	color: var(--cg-text);
	font-family: var(--cg-font-body);
	font-size: var(--cg-fs);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.cg-root *{box-sizing:border-box}

/* Header */
.cg-header{ text-align:center; margin-bottom: 18px; }
.cg-title{
	font-family: var(--cg-font-display);
	font-weight: 900;
	font-size: clamp(30px, 7vw, 52px);
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin: 0;
	color: var(--cg-text);
	transform: rotate(-1.2deg);
}
.cg-title::after{
	content:"";
	display:block;
	width:70px;height:6px;
	margin:8px auto 0;
	background: var(--cg-primary);
	border-radius:6px;
	transform: rotate(1deg);
}
.cg-tagline{ color: var(--cg-muted); margin: 12px 0 0; font-size: .95em; }

/* Composer */
.cg-composer{
	background: var(--cg-surface);
	border: 2px solid var(--cg-border);
	border-radius: var(--cg-radius);
	padding: var(--cg-pad);
	box-shadow: var(--cg-shadow);
	margin-bottom: 18px;
}
.cg-input, .cg-name, .cg-reply-input{
	width:100%;
	border:1.5px solid var(--cg-border);
	border-radius: 10px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 1em;
	color: var(--cg-text);
	background: #fff;
	resize: vertical;
}
.cg-input:focus, .cg-name:focus, .cg-reply-input:focus{
	outline:none; border-color: var(--cg-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cg-primary) 22%, transparent);
}
.cg-composer-row{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.cg-name{ flex:1 1 160px; width:auto; }
.cg-count{ color: var(--cg-muted); font-size:.8em; margin-left:auto; white-space:nowrap; }
.cg-imgbtn{
	cursor:pointer; border:1.5px solid var(--cg-border); border-radius:10px;
	padding:8px 10px; background:#fff; line-height:1; font-size:1.1em;
	display:inline-flex; align-items:center;
}
.cg-imgbtn:hover{ border-color: var(--cg-primary); }

.cg-preview{ position:relative; margin-top:10px; display:inline-block; }
.cg-preview img{ max-width:100%; max-height:260px; border-radius:10px; display:block; }
.cg-preview-x{
	position:absolute; top:6px; right:6px; width:28px;height:28px;
	border:none; border-radius:50%; background:rgba(0,0,0,.65); color:#fff;
	font-size:18px; cursor:pointer; line-height:1;
}

/* Buttons */
.cg-btn{
	font-family: var(--cg-font-display);
	font-weight:700; letter-spacing:.01em;
	border:none; border-radius:10px; padding:10px 18px;
	cursor:pointer; font-size:.95em; transition: transform .06s ease, filter .15s ease;
}
.cg-btn:active{ transform: translateY(1px); }
.cg-btn-primary{ background: var(--cg-primary); color:#fff; }
.cg-btn-primary:hover{ filter: brightness(1.06); }
.cg-btn-primary:disabled{ opacity:.6; cursor:default; }
.cg-btn-ghost{
	background: transparent; color: var(--cg-text);
	border:2px solid var(--cg-border);
}
.cg-btn-ghost:hover{ border-color: var(--cg-primary); }

.cg-error{ color:#c0392b; font-size:.85em; margin-top:8px; }

/* Toolbar */
.cg-toolbar{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.cg-sort-label{ font-size:.8em; color:var(--cg-muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.cg-sort{
	border:1.5px solid var(--cg-border); border-radius:10px; padding:7px 10px;
	background:var(--cg-surface); color:var(--cg-text); font-family:inherit; font-size:.9em; cursor:pointer;
}

/* Feed + cards */
.cg-feed{ display:flex; flex-direction:column; gap: var(--cg-gap); }
.cg-card{
	position: relative;
	background: var(--cg-surface);
	border: 2px solid var(--cg-border);
	border-radius: var(--cg-radius);
	padding: var(--cg-pad);
	box-shadow: var(--cg-shadow);
	animation: cg-pop .25s ease;
}
@keyframes cg-pop{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

/* Winning-verdict ribbon — the signature tag on each card. */
.cg-ribbon{
	position:absolute; top:-9px; right:14px; z-index:2;
	max-width: 70%;
	padding:4px 10px; border-radius:999px;
	font-family: var(--cg-font-display); font-weight:800;
	font-size:.66em; text-transform:uppercase; letter-spacing:.03em;
	color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
	transform: rotate(1.5deg);
}
.cg-ribbon[hidden]{ display:none; }
.cg-ribbon[data-k="r1"]{ background: var(--cg-r1); }
.cg-ribbon[data-k="r2"]{ background: var(--cg-r2); }
.cg-ribbon[data-k="r3"]{ background: var(--cg-r3); }
.cg-ribbon[data-k="r4"]{ background: var(--cg-r4); }
.cg-ribbon[data-k="r5"]{ background: var(--cg-r5); }
.cg-ribbon[data-k="r6"]{ background: var(--cg-r6); }
.cg-ribbon[data-k="r7"]{ background: var(--cg-r7); }
.cg-ribbon[data-k="r8"]{ background: var(--cg-r8); }
.cg-ribbon[data-k="r9"]{ background: var(--cg-r9); }
.cg-ribbon[data-k="r10"]{ background: var(--cg-r10); }

.cg-meta{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:.85em; }
.cg-idchip{
	font-family: ui-monospace, monospace; font-weight:700; font-size:.85em;
	padding:2px 7px; border-radius:6px; color:#fff; letter-spacing:.02em;
}
.cg-name-label{ font-weight:700; }
.cg-dot{ color:var(--cg-muted); }
.cg-ago{ color:var(--cg-muted); }

/* The confession is the hero: larger, tighter, more air than the controls. */
.cg-body{
	white-space:pre-wrap; word-wrap:break-word;
	margin: 6px 0 14px;
	font-size: 1.14em;
	line-height: 1.45;
	letter-spacing: -.005em;
	color: var(--cg-text);
}
.cg-card-img{ max-width:100%; border-radius:10px; margin: 4px 0 14px; display:block; }

/* Reactions: quiet by default so they never outshout the confession.
   No fills, muted text, hairline borders. Color shows up on hover and
   when you've actually cast a verdict. */
.cg-reactions{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cg-react{
	display:inline-flex; align-items:center; gap:6px;
	border:1px solid var(--cg-border); background:transparent;
	border-radius:999px; padding:5px 11px; cursor:pointer;
	font-size:.78em; font-weight:600; color:var(--cg-muted);
	transition: transform .06s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.cg-react:hover{ transform: translateY(-1px); color: var(--cg-text); }
.cg-react:focus-visible{ outline:2px solid var(--cg-primary); outline-offset:2px; }
.cg-react .cg-react-count{ font-variant-numeric: tabular-nums; opacity:.8; }
/* Voted: the button takes on its verdict's color, filled. */
.cg-react[data-on="1"]{ color:#fff; border-color: transparent; }

/* Locked: you voted on a verdict that's since been hidden. */
.cg-reactions.is-locked .cg-react{ opacity:.45; cursor:default; }
.cg-reactions.is-locked .cg-react:hover{ transform:none; color:var(--cg-muted); }
.cg-locked-note{ font-size:.72em; color:var(--cg-muted); font-style:italic; }

/* Per-slot verdict colors (10 slots). */
.cg-react[data-k="r1"][data-on="1"]{ background: var(--cg-r1); }
.cg-react[data-k="r2"][data-on="1"]{ background: var(--cg-r2); }
.cg-react[data-k="r3"][data-on="1"]{ background: var(--cg-r3); }
.cg-react[data-k="r4"][data-on="1"]{ background: var(--cg-r4); }
.cg-react[data-k="r5"][data-on="1"]{ background: var(--cg-r5); }
.cg-react[data-k="r6"][data-on="1"]{ background: var(--cg-r6); }
.cg-react[data-k="r7"][data-on="1"]{ background: var(--cg-r7); }
.cg-react[data-k="r8"][data-on="1"]{ background: var(--cg-r8); }
.cg-react[data-k="r9"][data-on="1"]{ background: var(--cg-r9); }
.cg-react[data-k="r10"][data-on="1"]{ background: var(--cg-r10); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r1"]:hover{ border-color: var(--cg-r1); color: var(--cg-r1); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r1"][data-on="1"]:hover{ color:#fff; }
.cg-reactions:not(.is-locked) .cg-react[data-k="r2"]:hover{ border-color: var(--cg-r2); color: var(--cg-r2); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r2"][data-on="1"]:hover{ color:#fff; }
.cg-reactions:not(.is-locked) .cg-react[data-k="r3"]:hover{ border-color: var(--cg-r3); color: var(--cg-r3); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r3"][data-on="1"]:hover{ color:#fff; }
.cg-reactions:not(.is-locked) .cg-react[data-k="r4"]:hover{ border-color: var(--cg-r4); color: var(--cg-r4); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r4"][data-on="1"]:hover{ color:#fff; }
.cg-reactions:not(.is-locked) .cg-react[data-k="r5"]:hover{ border-color: var(--cg-r5); color: var(--cg-r5); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r5"][data-on="1"]:hover{ color:#fff; }
.cg-reactions:not(.is-locked) .cg-react[data-k="r6"]:hover{ border-color: var(--cg-r6); color: var(--cg-r6); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r6"][data-on="1"]:hover{ color:#fff; }
.cg-reactions:not(.is-locked) .cg-react[data-k="r7"]:hover{ border-color: var(--cg-r7); color: var(--cg-r7); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r7"][data-on="1"]:hover{ color:#fff; }
.cg-reactions:not(.is-locked) .cg-react[data-k="r8"]:hover{ border-color: var(--cg-r8); color: var(--cg-r8); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r8"][data-on="1"]:hover{ color:#fff; }
.cg-reactions:not(.is-locked) .cg-react[data-k="r9"]:hover{ border-color: var(--cg-r9); color: var(--cg-r9); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r9"][data-on="1"]:hover{ color:#fff; }
.cg-reactions:not(.is-locked) .cg-react[data-k="r10"]:hover{ border-color: var(--cg-r10); color: var(--cg-r10); }
.cg-reactions:not(.is-locked) .cg-react[data-k="r10"][data-on="1"]:hover{ color:#fff; }

/* Card footer */
.cg-cardfoot{ display:flex; align-items:center; gap:14px; margin-top:10px; font-size:.82em; }
.cg-link{ background:none; border:none; cursor:pointer; color:var(--cg-muted); font:inherit; padding:0; }
.cg-link:hover{ color:var(--cg-primary); text-decoration:underline; }

/* Replies */
.cg-replies{ margin-top:12px; border-top:1.5px dashed var(--cg-border); padding-top:12px; display:none; }
.cg-replies.open{ display:block; }
.cg-reply{ padding:8px 0; border-bottom:1px solid var(--cg-border); }
.cg-reply:last-child{ border-bottom:none; }
.cg-reply-body{ white-space:pre-wrap; word-wrap:break-word; margin:4px 0 6px; font-size:.95em; }
.cg-votes{ display:flex; align-items:center; gap:10px; font-size:.85em; }
.cg-vote{ background:none; border:none; cursor:pointer; color:var(--cg-muted); font:inherit; display:inline-flex; align-items:center; gap:4px; padding:2px 4px; border-radius:6px; }
.cg-vote:hover{ color:var(--cg-text); background:color-mix(in srgb, var(--cg-border) 40%, transparent); }
/* Active state keys off which button it is, since data-on is just 1/0. */
.cg-vote[data-vote="1"][data-on="1"]{ color: var(--cg-r2); font-weight:700; }
.cg-vote[data-vote="-1"][data-on="1"]{ color: var(--cg-primary); font-weight:700; }
.cg-votes .cg-report-reply{ margin-left:auto; font-size:.92em; }
.cg-votes .cg-report-reply:disabled{ opacity:.6; cursor:default; text-decoration:none; }
.cg-reply-form{ display:flex; gap:8px; margin-top:10px; align-items:flex-start; }
.cg-reply-form .cg-reply-input{ flex:1; min-height:38px; }
.cg-reply-name{ display:flex; gap:8px; margin-top:8px; }
.cg-reply-name .cg-name{ flex:1 1 auto; }

/* Footer of feed */
.cg-feed-foot{ text-align:center; margin-top:22px; }
.cg-end{ color:var(--cg-muted); font-family:var(--cg-font-display); font-weight:700; }
.cg-empty{ text-align:center; color:var(--cg-muted); padding:40px 0; }
.cg-loading{ text-align:center; color:var(--cg-muted); padding:16px; }

@media (max-width:520px){
	.cg-composer-row{ gap:6px; }
	.cg-name{ flex:1 1 100%; }
}

@media (prefers-reduced-motion: reduce){
	.cg-card{ animation:none; }
	.cg-btn, .cg-react{ transition:none; }
}

/* ---------------------------------------------------------------- */
/* Header nav + About modal                                          */
/* ---------------------------------------------------------------- */
.cg-nav{ margin-top:10px; display:flex; gap:8px; justify-content:center; align-items:center; font-size:.85em; }
.cg-nav .cg-link{ font-weight:600; }
.cg-nav a.cg-link{ text-decoration:none; }

.cg-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.cg-modal[hidden]{ display:none; }
.cg-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.cg-modal-panel{
	position:relative; z-index:1;
	background: var(--cg-surface); color: var(--cg-text);
	border:2px solid var(--cg-border); border-radius: var(--cg-radius);
	max-width: 560px; width:100%; max-height: 82vh; overflow-y:auto;
	padding: 26px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.3);
	animation: cg-modal-in .18s ease;
}
@keyframes cg-modal-in{ from{opacity:0; transform:translateY(10px) scale(.99);} to{opacity:1; transform:none;} }
.cg-modal-x{
	position:absolute; top:10px; right:12px; width:32px; height:32px;
	border:none; background:transparent; font-size:26px; line-height:1;
	color:var(--cg-muted); cursor:pointer; border-radius:8px;
}
.cg-modal-x:hover{ color:var(--cg-primary); background:rgba(0,0,0,.05); }
.cg-modal-title{
	font-family: var(--cg-font-display); font-weight:900;
	font-size:1.5em; margin:0 0 12px; letter-spacing:-.01em;
}
.cg-modal-body{ font-size:.95em; line-height:1.6; }
.cg-modal-body h3{
	font-family: var(--cg-font-display); font-weight:800;
	font-size:1em; margin:18px 0 6px; text-transform:uppercase;
	letter-spacing:.04em; color:var(--cg-primary);
}
.cg-modal-body ul{ padding-left:20px; margin:6px 0; }
.cg-modal-body li{ margin:4px 0; }
.cg-modal-body code{ background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px; font-size:.9em; }
.cg-modal-contact a{ font-weight:700; color:var(--cg-primary); }

/* ---------------------------------------------------------------- */
/* Leaderboard                                                       */
/* ---------------------------------------------------------------- */
.cg-podium-controls{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:14px; }
.cg-tabs{ display:inline-flex; border:1.5px solid var(--cg-border); border-radius:999px; overflow:hidden; }
.cg-tab{
	padding:7px 16px; font-size:.85em; font-weight:700; text-decoration:none;
	color:var(--cg-muted); background:transparent; font-family:var(--cg-font-display);
}
.cg-tab.is-on{ background:var(--cg-primary); color:#fff; }
.cg-period-form{ display:flex; gap:6px; align-items:center; }
.cg-podium-back{ margin:0 0 18px; font-size:.85em; }

.cg-board{
	background: var(--cg-surface);
	border:2px solid var(--cg-border);
	border-radius: var(--cg-radius);
	padding: var(--cg-pad);
	margin-bottom: var(--cg-gap);
}
.cg-board-title{
	display:flex; align-items:center; gap:8px;
	font-family: var(--cg-font-display); font-weight:800;
	font-size:1em; margin:0 0 10px; text-transform:uppercase; letter-spacing:.03em;
}
.cg-board-dot{ width:12px; height:12px; border-radius:50%; background:var(--cg-board, var(--cg-primary)); flex:none; }
.cg-board-list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.cg-board-row{
	display:flex; align-items:center; gap:12px;
	padding:9px 0; border-bottom:1px solid var(--cg-border);
}
.cg-board-row:last-child{ border-bottom:none; }
.cg-rank{ flex:none; width:30px; text-align:center; font-weight:800; color:var(--cg-muted); font-size:.95em; }
.cg-board-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cg-board-text{ overflow:hidden; text-overflow:ellipsis; }
.cg-board-meta{ font-size:.78em; color:var(--cg-muted); }
.cg-board-count{
	flex:none; font-weight:800; font-variant-numeric:tabular-nums;
	color:var(--cg-board, var(--cg-primary)); font-size:1.05em;
}
.cg-empty-sm{ padding:14px 0; font-size:.9em; }

@media (max-width:520px){
	.cg-podium-controls{ flex-direction:column; align-items:stretch; }
	.cg-modal-panel{ padding:22px 18px; }
}
@media (prefers-reduced-motion: reduce){
	.cg-modal-panel{ animation:none; }
}

/* Honeypot: must be invisible to humans but present in the DOM. Bots skip
   display:none, so push it out of view instead. */
.cg-hp{
	position:absolute !important;
	left:-9999px !important;
	top:auto !important;
	width:1px; height:1px; overflow:hidden;
}