/* ============================================================================
   event-cg.css: the single event page (Native\EventView) in cryptogames.gg's
   own skin. Owner 2026-10-04: same design as egamers.io, NOT identical, the
   site's colours, light AND dark.

   Loaded after stitch-tailwind.css, only when EventSingle::serves_cg(). Every
   rule sits under .cg-evx. The utilities read --c-* RGB triples; this file only
   re-points them at the homepage palette (events-os.css / home-os.css), so the
   markup is the shared view's and nothing is forked.
   Light/dark is the theme's: Foxiz stamps body[data-theme="dark"], anything
   else is light (the same rule home-os.css follows).
   ============================================================================ */

/* ---------------------------------------------------------------- palette */
.eg.cg-evx {
  --st-head: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --st-ui: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --c-background: 25 25 25; --c-surface: 33 33 33;
  --c-surface-container: 51 51 51; --c-surface-container-low: 33 33 33; --c-surface-container-lowest: 20 20 20;
  --c-surface-container-high: 63 63 63; --c-surface-container-highest: 74 74 74;
  --c-surface-bright: 63 63 63; --c-surface-variant: 63 63 63;
  --c-on-surface: 255 255 255; --c-on-surface-variant: 181 181 181;
  --c-outline: 138 138 138; --c-outline-variant: 74 74 74;
  --c-primary: 157 140 255; --c-on-primary: 25 25 25;
  --c-primary-container: 106 80 255; --c-on-primary-container: 255 255 255;
  --c-inverse-primary: 74 40 196; --c-primary-fixed: 199 146 255;
  --c-secondary: 95 212 154; --c-secondary-container: 53 180 119; --c-on-secondary: 10 40 26; --c-on-secondary-container: 255 255 255;
  --c-secondary-fixed-dim: 95 212 154;
  --c-tertiary: 79 209 224; --c-tertiary-container: 6 112 127; --c-on-tertiary: 5 40 46;
  --c-tertiary-fixed: 160 232 240; --c-tertiary-fixed-dim: 79 209 224;
  --c-error: 255 107 107; --c-on-error: 255 255 255;
  --cgx-line: rgba(255, 255, 255, .08);
  --cgx-grad: linear-gradient(135deg, #06707f 0%, #4a28c4 62%, #7b2fc0 100%);
  --cgx-title: linear-gradient(120deg, #4fd1e0 0%, #9d8cff 55%, #c792ff 100%);
  --cgx-glow: 0 0 22px rgba(123, 47, 192, .45);
}
body:not([data-theme="dark"]) .eg.cg-evx {
  --c-background: 255 255 255; --c-surface: 244 244 246;
  --c-surface-container: 233 233 238; --c-surface-container-low: 244 244 246; --c-surface-container-lowest: 255 255 255;
  --c-surface-container-high: 222 222 230; --c-surface-container-highest: 211 211 222;
  --c-surface-bright: 222 222 230; --c-surface-variant: 222 222 230;
  --c-on-surface: 25 25 25; --c-on-surface-variant: 107 107 107;
  --c-outline: 138 138 138; --c-outline-variant: 222 222 230;
  --c-primary: 74 40 196; --c-on-primary: 255 255 255;
  --c-primary-container: 123 47 192; --c-on-primary-container: 255 255 255;
  --c-inverse-primary: 157 140 255; --c-primary-fixed: 99 57 217;
  --c-secondary: 33 122 79; --c-secondary-container: 47 158 104; --c-on-secondary: 255 255 255; --c-on-secondary-container: 255 255 255;
  --c-secondary-fixed-dim: 33 122 79;
  --c-tertiary: 6 112 127; --c-tertiary-container: 79 209 224; --c-on-tertiary: 255 255 255;
  --c-tertiary-fixed: 6 90 102; --c-tertiary-fixed-dim: 6 112 127;
  --c-error: 200 40 60; --c-on-error: 255 255 255;
  --cgx-line: rgba(0, 0, 0, .09);
  --cgx-title: linear-gradient(120deg, #06707f 0%, #4a28c4 60%, #7b2fc0 100%);
  --cgx-glow: 0 0 18px rgba(74, 40, 196, .22);
}
.cg-evx { color: rgb(var(--c-on-surface) / 1); }
.cg-evx a { text-decoration: none; }
.cg-evx .material-symbols-outlined { line-height: 1; vertical-align: middle; }

/* ------------------------------------------------- not identical to egamers */
/* 1. Cards: a hairline, no drop shadow, tighter corners. */
.cg-evx .shadow-md, .cg-evx .shadow-lg, .cg-evx .shadow-2xl { box-shadow: none; }
.cg-evx .eg-evs-sec, .cg-evx .eg-evs-facts, .cg-evx .eg-evs-links, .cg-evx .eg-evs-others {
  border: 1px solid var(--cgx-line); border-radius: 14px;
}

/* 2. The rail sits on the LEFT on desktop, the story on the right. */
@media (min-width: 1024px) {
  .cg-evx aside { order: -1; position: sticky; top: 1rem; }
}

/* 3. The four KPI tiles are one joined strip, not four floating cards. */
.cg-evx .eg-evs-kpis {
  gap: 1px; background: var(--cgx-line); border: 1px solid var(--cgx-line); border-radius: 14px; overflow: hidden;
}
.cg-evx .eg-evs-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); width: 100%; }
.cg-evx .eg-evs-kpi { border-radius: 0; box-shadow: none; background: rgb(var(--c-surface-container-low) / 1); }
.cg-evx .eg-evs-kpi:hover { background: rgb(var(--c-surface-container) / 1); }

/* 4. The banner is lower and ends in a gradient hairline. */
.cg-evx .eg-evs-banner { border-radius: 14px; box-shadow: none; border: 1px solid var(--cgx-line); }
.cg-evx .eg-evs-banner > div { height: 300px; }
@media (min-width: 768px) { .cg-evx .eg-evs-banner > div { height: 380px; } }
.cg-evx .eg-evs-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cgx-grad); }

/* 5. The identity: gradient title, gradient date tile, gradient call to action. */
.cg-evx .eg-evs-head h1 {
  background: var(--cgx-title); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; letter-spacing: -.02em;
}
.cg-evx .eg-evs-head .bg-surface-container-high.min-w-\[70px\] {
  background: var(--cgx-grad); box-shadow: var(--cgx-glow);
}
.cg-evx .eg-evs-head .bg-surface-container-high.min-w-\[70px\] span { color: #fff; }
.cg-evx .bg-primary, .cg-evx .bg-primary-container { background-image: var(--cgx-grad); color: #fff; box-shadow: var(--cgx-glow); }
.cg-evx .bg-primary:hover, .cg-evx .bg-primary-container:hover { filter: brightness(1.12); background-color: transparent; }
.cg-evx .eg-evs-banner .bg-primary { color: #fff; }

/* Section headings carry the accent rule the homepage panels do. */
.cg-evx .eg-evs-sec > div:first-child h2 { letter-spacing: -.01em; }
.cg-evx .eg-evs-sec { border-left: 3px solid rgb(var(--c-primary) / .55); }

/* The Remind Me / Share / Edit buttons keep their own surface in both modes. */
.cg-evx .eg-evs-share { border: 1px solid var(--cgx-line); }

@media (prefers-reduced-motion: reduce) { .cg-evx .animate-ping, .cg-evx .animate-pulse { animation: none; } }

/* ---- /events/ list + calendar view: the egamers rules (egamers-stitch.css 1007-1053), copied so Foxiz never loads the Pixwell sheet. Scope .eg-events = the shell class. ---- */
/* ---- /events/ on the Stitch events design (events rework, 10-04). Scope: .eg-events only. ---- */
.eg-events .eg-prof-wrap{display:flex;flex-direction:column;gap:2rem}
.eg-events .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.eg-events .max-h-72{max-height:18rem}
@media (min-width:768px){.eg-events .md\:leading-\[40px\]{line-height:40px}.eg-events .md\:leading-\[48px\]{line-height:48px}}
.eg-events .eg-ev-card h3 a{color:inherit;text-decoration:none}
.eg-events .eg-ev-card h3 a::after{content:"";position:absolute;inset:0}
.eg-events .eg-ev-card{position:relative}
.eg-events .eg-ev-card .eg-ev-prize,.eg-events .eg-ev-card a[rel~="nofollow"],.eg-events .eg-ev-card a.font-label-md{position:relative;z-index:1}
.eg-events .eg-ev-filter summary::-webkit-details-marker{display:none}
.eg-events .eg-ev-filter[open]{background:rgb(var(--c-surface-container) / 1)}
.eg-events .eg-ev-filter-list a{display:block;text-decoration:none}
.eg-events .eg-ev-tabs{scrollbar-width:thin}
.eg-events .eg-ev-hero img{max-width:none}
.eg-events .eg-ev-majors a{text-decoration:none}
.eg-events .eg-ev-pager a{text-decoration:none}
.eg-events .eg-ev-submit a{text-decoration:none}
@media (prefers-reduced-motion:reduce){.eg-events .animate-ping,.eg-events .animate-pulse{animation:none}}

/* ---- Calendar view (events rework phase 5) ---- */
.eg-events .ev-view-toggle{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgb(var(--c-surface-container) / 1);align-self:flex-start}
.eg-events .ev-view-opt{padding:6px 16px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;color:rgb(var(--c-on-surface-variant) / 1)}
.eg-events .ev-view-opt.is-on{background:rgb(var(--c-primary) / 1);color:#fff}
.eg-events .ev-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.eg-events .ev-cal-title{font-size:22px;font-weight:800;color:rgb(var(--c-on-surface) / 1);margin:0}
.eg-events .ev-cal-nav{padding:6px 14px;border-radius:10px;background:rgb(var(--c-surface-container) / 1);color:rgb(var(--c-on-surface) / 1);text-decoration:none}
.eg-events .ev-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.eg-events .ev-cal-dow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--c-outline) / 1);padding:4px 6px}
.eg-events .ev-cal-cell{min-height:104px;padding:6px;border-radius:12px;background:rgb(var(--c-surface-container-low) / 1);display:flex;flex-direction:column;gap:4px;min-width:0}
.eg-events .ev-cal-cell.is-out{opacity:.45}
.eg-events .ev-cal-cell.is-today{outline:2px solid rgb(var(--c-primary) / 1)}
.eg-events .ev-cal-day{font-size:12px;font-weight:700;color:rgb(var(--c-on-surface-variant) / 1)}
.eg-events .ev-cal-chip{display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;font-size:11px;line-height:1.3;text-decoration:none;color:rgb(var(--c-on-surface) / 1);background:rgb(var(--c-primary) / .18);min-width:0}
.eg-events .ev-cal-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eg-events .ev-cal-chip img{border-radius:3px;flex:none}
.eg-events .ev-cal-chip.is-live{background:rgb(var(--c-secondary) / .22)}
.eg-events .ev-cal-chip.is-past{background:rgb(var(--c-surface-container-high) / 1);color:rgb(var(--c-outline) / 1)}
.eg-events .ev-cal-more summary{cursor:pointer;font-size:11px;color:rgb(var(--c-primary) / 1);list-style:none}
.eg-events .ev-cal-more summary::-webkit-details-marker{display:none}
.eg-events .ev-cal-more{display:flex;flex-direction:column;gap:4px}
.eg-events .ev-cal-undated{margin-top:12px;font-size:13px;color:rgb(var(--c-on-surface-variant) / 1)}
.eg-events .ev-cal-undated a{color:rgb(var(--c-primary) / 1)}
@media (max-width:640px){
  .eg-events .ev-cal-grid{display:block}
  .eg-events .ev-cal-dow,.eg-events .ev-cal-cell.is-out,.eg-events .ev-cal-cell:not(:has(.ev-cal-chip)){display:none}
  .eg-events .ev-cal-cell{min-height:0;margin-bottom:6px;flex-direction:row;flex-wrap:wrap;align-items:center}
  .eg-events .ev-cal-day{min-width:2ch}
}

/* ---- /events/ the cg look (not egamers): hairline cards that lift, gradient hero edge, joined stat strip ---- */
.cg-evx .eg-ev-card { border: 1px solid var(--cgx-line); border-radius: 14px; box-shadow: none; transition: transform .18s ease, border-color .18s ease; }
.cg-evx .eg-ev-card:hover { transform: translateY(-3px); border-color: rgb(var(--c-primary) / .55); }
.cg-evx .eg-ev-card-img { position: relative; }
.cg-evx .eg-ev-card-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cgx-grad); }
.cg-evx .eg-ev-hero { border: 1px solid var(--cgx-line); border-radius: 14px; box-shadow: none; }
.cg-evx .eg-ev-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cgx-grad); }
.cg-evx .eg-ev-hero h2, .cg-evx .eg-ev-head h1 {
  background: var(--cgx-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.cg-evx .eg-ev-strip > * { border: 1px solid var(--cgx-line); border-radius: 12px; box-shadow: none; }
.cg-evx .eg-ev-tab { border: 1px solid var(--cgx-line); }
.cg-evx .eg-ev-filter, .cg-evx .eg-ev-expired { border: 1px solid var(--cgx-line); border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .cg-evx .eg-ev-card { transition: none; } .cg-evx .eg-ev-card:hover { transform: none; } }

/* ---- full width, like the rest of cryptogames.gg's app pages (owner 10-04): the shell's 1400px column is lifted ---- */
body .cg-main .cg-content-area:has(> .cg-evx) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: clamp(16px, 2vw, 44px); padding-right: clamp(16px, 2vw, 44px); }
.cg-evx .eg-prof-wrap { max-width: none; padding-left: 0; padding-right: 0; }
.cg-evx .eg-ev-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.cg-evx .eg-ev-hero { min-height: 340px; }