/* Game listing page styles. Extracted from inline <style> in pages/games.php on 2026-05-10. */
.gp-wrap{
    --accent:var(--bmm-accent);
    --accent-deep:var(--bmm-accent-deep);
    --accent-soft:var(--bmm-accent-soft);
    --accent-wash:var(--bmm-accent-soft);
    --gold:#b88a2c;
    --gold-deep:#7c5c12;
    --gold-soft:#fcf5e4;
    --gold-wash:#fdfaf0;
    --line:#e7e4ef;
    --line-soft:#f1eff5;
    --ink:#14121a;
    --ink-soft:#4a4757;
    --muted:#8a8797;
    font-family:'Fraunces', Georgia, serif;
    color: var(--ink);
}
.gp-wrap *{ box-sizing:border-box; }

/* Admin strip */
.gp-admin{
    background:#fff; border:1px solid var(--line);
    border-radius:2px;
    padding: 10px 14px;
    font-size: 13px; color: var(--ink-soft);
    margin-bottom: 20px;
}
.gp-admin a{ color: var(--accent); text-decoration:none; border-bottom: 1px solid color-mix(in srgb, var(--bmm-accent) 3%, transparent); }

/* Breadcrumb */
.gp-crumb{
    display:flex; align-items:center; gap: 8px;
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
    margin-bottom: 12px;
}
.gp-crumb a{ color: var(--muted); text-decoration: none; }
.gp-crumb a:hover{ color: var(--accent); }
.gp-crumb .sep{ color: var(--line); }
.gp-crumb .cur{ color: var(--accent); }

/* Header card */
.gp-hdr{
    position:relative;
    background:#fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 22px clamp(18px, 2.6vw, 32px);
    margin-bottom: 22px;
}
.gp-hdr .crn{
    position:absolute; width:12px; height:12px;
    border: 1px solid var(--accent); opacity:.75;
}
.gp-hdr .crn.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.gp-hdr .crn.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.gp-hdr .crn.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.gp-hdr .crn.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* Premium treatment */
.gp-hdr.is-premium{
    border-color: rgba(184,138,44,.55);
    border-left: 3px solid var(--gold);
    background:
        linear-gradient(180deg, var(--gold-wash) 0%, #fff 180px),
        #fff;
    box-shadow:
        0 0 0 1px rgba(184,138,44,.08) inset,
        0 24px 60px -40px rgba(184,138,44,.35);
}
.gp-hdr.is-premium .crn{ border-color: var(--gold); }
.gp-hdr.is-premium .gp-ribbon{
    display:flex; align-items:center; justify-content:space-between;
    gap: 14px;
    margin: -22px -22px 20px;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(184,138,44,.28);
    background: linear-gradient(90deg, var(--gold-soft) 0%, #fff 90%);
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    font-weight: 600;
    color: var(--gold-deep);
}
.gp-hdr.is-premium .gp-ribbon .seal{
    display:inline-flex; align-items:center; gap: 8px;
}
.gp-hdr.is-premium .gp-ribbon .seal svg{ width: 12px; height: 12px; }
.gp-hdr.is-premium .gp-ribbon .serial{
    font-family: 'Fraunces', serif;
    letter-spacing: .12em;
    font-style: italic;
    color: var(--muted); font-weight: 500;
    text-transform: none;
    font-size: 11px;
}
.gp-hdr:not(.is-premium) .gp-ribbon{ display:none; }

/* Header grid */
.gp-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 900px){
    .gp-grid{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.gp-main{ min-width:0; }

/* Title row */
.gp-title-row{
    display:flex; align-items:flex-start; gap: 14px; flex-wrap: wrap;
}
.gp-title{
    font-family: 'Fraunces', serif;
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 0;
    flex: 1 1 auto; min-width:0;
}
.gp-title em{ font-style: italic; color: var(--accent); font-weight: 400; }

/* Verified stamp */
.gp-stamp{
    flex: 0 0 auto;
    display:inline-flex; align-items:center; gap: 10px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--bmm-accent) 35%, transparent);
    background: #fff;
    border-radius: 2px;
    position: relative;
}
.gp-hdr.is-premium .gp-stamp{
    border-color: rgba(184,138,44,.45);
    background: var(--gold-wash);
}
.gp-stamp::before, .gp-stamp::after{
    content:""; position:absolute; width: 6px; height: 6px;
    border: 1px solid var(--accent); opacity:.7;
}
.gp-stamp::before{ top: -1px; left: -1px; border-right:none; border-bottom:none; }
.gp-stamp::after{ bottom: -1px; right: -1px; border-left:none; border-top:none; }
.gp-hdr.is-premium .gp-stamp::before,
.gp-hdr.is-premium .gp-stamp::after{ border-color: var(--gold); }
.gp-stamp .ico{
    width: 34px; height: 34px; flex: 0 0 34px;
    display:grid; place-items: center;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: rotate(-6deg);
}
.gp-hdr.is-premium .gp-stamp .ico{
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-soft);
}
.gp-stamp .txt{ display:flex; flex-direction:column; gap:1px; }
.gp-stamp .t1{
    font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
}
.gp-stamp .t2{
    font-family:'Fraunces', serif; font-style: italic;
    font-size: 14px; color: var(--ink); font-weight: 500;
    letter-spacing: -0.005em;
}

/* Badge chips */
.gp-chips{
    display:flex; flex-wrap: wrap; gap: 6px;
    margin-top: 12px;
}
.gp-chip{
    display:inline-flex; align-items:center; gap: 6px;
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    border-radius: 2px;
}
.gp-chip .d{ width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.gp-chip.premium{
    color: var(--gold-deep);
    border-color: var(--gold);
    background: var(--gold-soft);
}
.gp-chip.premium .d{ background: var(--gold); box-shadow: 0 0 0 3px rgba(184,138,44,.18); }
.gp-chip.featured{
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.gp-chip.featured .d{ background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bmm-accent) 18%, transparent); }
.gp-chip.status-1 .d{ background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.gp-chip.status-0 .d{ background: #d97706; }
.gp-chip.status-2 .d, .gp-chip.status-4 .d{ background: #b91c1c; }

/* Facts row */
.gp-facts{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 22px;
    border: 1px solid var(--line-soft);
    border-radius: 2px;
}
.gp-fact{
    padding: 12px 16px;
    border-right: 1px solid var(--line-soft);
}
.gp-fact:last-child{ border-right: none; }
.gp-fact .l{
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
}
.gp-fact .v{
    font-family:'Fraunces', serif; font-size: 15px;
    color: var(--ink); margin-top: 4px;
    word-break: break-word;
}
.gp-fact .v a, .gp-fact .v button{
    color: var(--accent); text-decoration: none;
    font-family:'Fraunces', serif; font-size: 15px;
    font-weight: 500;
    background: none; border: none; padding: 0; cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--bmm-accent) 3%, transparent);
}
.gp-fact .v a:hover, .gp-fact .v button:hover{ border-bottom-color: var(--accent); }
@media (max-width: 620px){
    .gp-facts{ grid-template-columns: 1fr; }
    .gp-fact{ border-right: none; border-bottom: 1px solid var(--line-soft); }
    .gp-fact:last-child{ border-bottom: none; }
}

/* Stats row (votes/positive/registrations) */
.gp-stats{
    display:flex; flex-wrap: wrap; gap: 0;
    margin-top: 18px;
}
.gp-stat{
    padding: 0 18px;
    border-right: 1px solid var(--line-soft);
    min-width: 0;
}
.gp-stat:first-child{ padding-left: 0; }
.gp-stat:last-child{ border-right: none; padding-right: 0; }
.gp-stat .n{
    font-family:'Fraunces', serif; font-style: italic;
    font-size: 22px; font-weight: 400;
    color: var(--ink); font-variant-numeric: tabular-nums;
    line-height: 1;
}
.gp-stat .l{
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
    margin-top: 4px;
}
.gp-stat-registrations{ position: relative; }
.gp-stat-registrations .n, .gp-stat-registrations .l{ position: relative; z-index: 1; }
.gp-stat-registrations .gp-stat-chart{
    position: absolute;
    left: 18px;
    top: -4px;
    width: 160px;
    max-width: calc(100% - 18px);
    height: auto;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.gp-stat:first-child.gp-stat-registrations .gp-stat-chart{ left: 0; }

/* CTA row */
.gp-cta{
    display:flex; flex-wrap: wrap; gap: 10px;
    margin-top: 22px;
}
.gp-btn{
    display:inline-flex; align-items:center; gap: 8px;
    font-family:'Fraunces', serif; font-size: 15px; font-weight: 500;
    padding: 11px 22px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .2s ease;
    position: relative; overflow: hidden;
}
.gp-btn.primary{
    background: var(--accent); color: #fff;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--bmm-accent) 5%, transparent);
}
.gp-btn.primary:hover{ background: var(--accent-deep); transform: translateY(-1px); }
.gp-hdr.is-premium .gp-btn.primary{
    background: linear-gradient(180deg, #d9a747 0%, #b88a2c 50%, #8d6619 100%);
    box-shadow: 0 8px 20px -8px rgba(184,138,44,.55), inset 0 1px 0 rgba(255,255,255,.3);
    color: #fff;
}
.gp-hdr.is-premium .gp-btn.primary:hover{ filter: brightness(1.05); }
.gp-btn.primary::after{
    content:""; position:absolute; top:0; bottom:0; width:35%; left:-50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transform: skewX(-18deg);
    transition: left .7s cubic-bezier(.2,.7,.3,1);
}
.gp-btn.primary:hover::after{ left: 140%; }
.gp-btn.ghost{
    background: #fff; color: var(--accent);
    border-color: var(--accent);
}
.gp-btn.ghost:hover{ background: var(--accent); color: #fff; }
.gp-btn.muted{
    background: #fff; color: var(--ink-soft);
    border-color: var(--line);
}
.gp-btn.muted:hover{ color: var(--accent); border-color: var(--accent); }
.gp-btn.disabled{
    background: var(--line-soft); color: var(--muted);
    border-color: var(--line);
    cursor: not-allowed; pointer-events: none;
}

/* Badges (game_badges) */
.gp-badges{
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line-soft);
    display:flex; flex-wrap: wrap; gap: 10px;
}
.gp-badge{
    position: relative;
    width: 64px; height: 64px;
    border: 1px solid var(--line);
    background: #fff;
    overflow: hidden;
    transition: border-color .2s ease;
}
.gp-badge:hover{ border-color: var(--accent); }
.gp-badge img{ width:100%; height:100%; object-fit: cover; }
.gp-badge .ph{
    display:grid; place-items:center;
    height:100%; width:100%;
    font-size: 10px; letter-spacing:.1em;
    color: var(--accent); background: var(--accent-soft);
    text-transform: uppercase;
}
.gp-badge .tip{
    position:absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content; max-width: 240px;
    padding: 10px 12px;
    background: var(--ink); color: #f1eff5;
    font-size: 11px; line-height: 1.4;
    border-radius: 2px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 20;
    text-align: left;
    font-family:'Fraunces', serif;
    letter-spacing: 0;
    text-transform: none;
}
.gp-badge .tip::after{
    content:""; position:absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--ink);
}
.gp-badge:hover .tip{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.gp-badge .tip strong{ display:block; color: #fff; font-weight: 500; margin-bottom: 2px; }
.gp-badge .tip small{ color: #a9a5b8; display:block; margin-top: 4px; font-size: 10px; letter-spacing: .05em; }

/* Aside preview */
.gp-aside{ min-width:0; }
.gp-preview{
    position: relative;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
}
.gp-hdr.is-premium .gp-preview{
    border-color: rgba(184,138,44,.45);
    box-shadow: 0 14px 40px -24px rgba(184,138,44,.35);
}
.gp-preview .img{
    aspect-ratio: 16/9;
    background: var(--line-soft);
    overflow: hidden;
    position: relative;
}
.gp-preview .img img{ width:100%; height:100%; object-fit: cover; }
.gp-preview .img .overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 55%, rgba(20,18,26,.45));
    pointer-events: none;
}
.gp-preview .img .lbl{
    position:absolute; top: 10px; left: 10px;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    padding: 4px 10px;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    font-weight: 600;
    border: 1px solid rgba(20,18,26,.08);
}
.gp-hdr.is-premium .gp-preview .img .lbl{
    background: var(--gold);
    color: #fff;
    border-color: transparent;
}

.gp-preview-stats{
    display:grid; grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line-soft);
}
.gp-preview-stats > div{
    padding: 14px 16px;
    border-right: 1px solid var(--line-soft);
}
.gp-preview-stats > div:last-child{ border-right: none; }
.gp-preview-stats .l{
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
}
.gp-preview-stats .n{
    font-family:'Fraunces', serif;
    font-size: 22px; font-style: italic; font-weight: 400;
    color: var(--ink); font-variant-numeric: tabular-nums;
    line-height: 1; margin-top: 6px;
}
.gp-preview-stats .sub{
    font-size: 12px; color: var(--muted);
    margin-top: 4px;
}
.gp-preview-stats .pos{ color: var(--accent); }
.gp-hdr.is-premium .gp-preview-stats .pos{ color: var(--gold-deep); }

/* ==================================================================
   Flat-design overrides for the rest of the page
   ================================================================== */

/* Section cards — flatten the Flowbite-style Tailwind chrome */
.gp-wrap section,
.gp-wrap #gallery-ui,
.gp-wrap aside > div{
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    position: relative;
    overflow: hidden;
}
.gp-wrap section::before,
.gp-wrap section::after,
.gp-wrap #gallery-ui::before,
.gp-wrap #gallery-ui::after{
    content:""; position:absolute; width:10px; height:10px;
    border: 1px solid var(--accent); opacity:.35;
    pointer-events:none; z-index: 3;
    transition: opacity .2s ease;
}
.gp-wrap section::before,
.gp-wrap #gallery-ui::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.gp-wrap section::after,
.gp-wrap #gallery-ui::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* Inner / nested cards — flatten & re-border */
.gp-wrap section [class*="rounded-xl"],
.gp-wrap section [class*="rounded-2xl"],
.gp-wrap section [class*="rounded-lg"],
.gp-wrap aside [class*="rounded-xl"],
.gp-wrap aside [class*="rounded-2xl"]{
    border-radius: 2px !important;
}
.gp-wrap section .bg-white\/60,
.gp-wrap section .bg-white\/70,
.gp-wrap section .bg-white\/75,
.gp-wrap section .bg-white\/80,
.gp-wrap section .bg-white\/85,
.gp-wrap section .bg-white\/90,
.gp-wrap section .bg-white\/95,
.gp-wrap aside .bg-white\/75,
.gp-wrap aside .bg-white\/80,
.gp-wrap aside .bg-white\/85{
    background: #fff !important;
    backdrop-filter: none !important;
}
.gp-wrap section .bg-slate-50\/90{ background: var(--accent-wash) !important; }

/* Ring → flat border in accent tone */
.gp-wrap [class*="ring-purple-"],
.gp-wrap [class*="ring-emerald-"],
.gp-wrap [class*="ring-slate-"],
.gp-wrap [class*="ring-red-"],
.gp-wrap [class*="ring-amber-"]{
    box-shadow: none !important;
}
.gp-wrap section [class*="ring-1"][class*="ring-purple-"],
.gp-wrap aside [class*="ring-1"][class*="ring-purple-"]{
    border: 1px solid var(--line) !important;
}

/* Section headers (with border-b) — flatten */
.gp-wrap section .border-b,
.gp-wrap #gallery-ui > div:first-child{
    border-color: var(--line-soft) !important;
}
.gp-wrap section h2,
.gp-wrap section h3,
.gp-wrap aside h3,
.gp-wrap section .text-lg,
.gp-wrap aside .text-sm.font-semibold.text-slate-900{
    font-family: 'Fraunces', serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
}
.gp-wrap section h2{ font-size: 20px !important; }

/* Eyebrows / kickers */
.gp-wrap .text-purple-600,
.gp-wrap .text-purple-700,
.gp-wrap .text-purple-800,
.gp-wrap .text-emerald-300,
.gp-wrap .text-emerald-200,
.gp-wrap .text-emerald-100{
    color: var(--accent) !important;
}
.gp-wrap [class*="uppercase"][class*="tracking-"]{
    letter-spacing: .2em !important;
    font-weight: 500 !important;
}
.gp-wrap .text-slate-900,
.gp-wrap .text-slate-800,
.gp-wrap .text-white{ color: var(--ink) !important; }
.gp-wrap .text-slate-500,
.gp-wrap .text-slate-400,
.gp-wrap .text-slate-300{ color: var(--muted) !important; }
.gp-wrap .text-slate-700,
.gp-wrap .text-slate-600,
.gp-wrap .text-slate-200,
.gp-wrap .text-slate-100{ color: var(--ink-soft) !important; }

/* All "font-semibold" → lighter Fraunces weight */
.gp-wrap section .font-semibold,
.gp-wrap aside .font-semibold{ font-weight: 500 !important; }
.gp-wrap section p,
.gp-wrap aside p{ font-family: 'Fraunces', serif; }

/* Buttons & CTAs — flat, accent */
.gp-wrap a[class*="rounded-full"],
.gp-wrap button[class*="rounded-full"],
.gp-wrap a[class*="rounded-xl"],
.gp-wrap button[class*="rounded-xl"]{
    border-radius: 2px !important;
    box-shadow: none !important;
}
.gp-wrap .bg-gradient-to-r.from-purple-500,
.gp-wrap .bg-gradient-to-r.from-purple-600,
.gp-wrap .bg-gradient-to-r.from-emerald-500,
.gp-wrap .bg-purple-600,
.gp-wrap .bg-purple-700{
    background: var(--accent) !important;
    background-image: none !important;
    color: #fff !important;
    font-family:'Fraunces', serif !important;
    font-weight: 500 !important;
}
.gp-wrap .bg-gradient-to-r.from-purple-500:hover,
.gp-wrap .bg-gradient-to-r.from-purple-600:hover,
.gp-wrap .bg-purple-600:hover{
    background: var(--accent-deep) !important;
}

/* "See all" and link-style text */
.gp-wrap a.text-xs.font-semibold,
.gp-wrap .text-sm.font-semibold.text-purple-700{
    color: var(--accent) !important;
    text-decoration: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--bmm-accent) 3%, transparent);
    font-family:'Fraunces', serif !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Avatars — flat purple squares */
.gp-wrap .bg-gradient-to-br.from-purple-500\/80,
.gp-wrap .bg-gradient-to-br.from-emerald-500\/80{
    background: var(--accent) !important;
    background-image: none !important;
    border-radius: 2px !important;
    color: #fff !important;
    font-family:'Fraunces', serif !important;
    font-weight: 500 !important;
    font-style: italic;
}
.gp-wrap .rounded-full.bg-slate-200,
.gp-wrap .h-9.rounded-full,
.gp-wrap .h-10.rounded-full{
    border-radius: 2px !important;
}
.gp-wrap .rounded-full.bg-slate-200{
    background: var(--line-soft) !important;
    color: var(--ink-soft) !important;
    font-family:'Fraunces', serif !important;
    font-style: italic;
}

/* Status pills — monochrome flat */
.gp-wrap .bg-emerald-50,
.gp-wrap .bg-emerald-100{
    background: #fff !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 2px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    font-size: 10px !important;
    font-weight: 600 !important;
}
.gp-wrap .bg-red-50,
.gp-wrap .bg-red-100{
    background: #fff !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    border-radius: 2px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    font-size: 10px !important;
    font-weight: 600 !important;
}
.gp-wrap .bg-purple-50,
.gp-wrap .bg-purple-50\/80{
    background: var(--accent-soft) !important;
    color: var(--accent-deep) !important;
    border: 1px solid color-mix(in srgb, var(--bmm-accent) 25%, transparent) !important;
    border-radius: 2px !important;
}

/* Review tabs — underline style */
.gp-wrap [data-review-tab]{
    font-family:'Fraunces', serif !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
    padding: 6px 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 14px !important;
}
.gp-wrap [data-review-tab][data-active="true"]{
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
}
.gp-wrap [data-review-tab]:hover{ color: var(--accent) !important; }

/* Gallery — flat thumbs */
.gp-wrap #gallery-ui{
    padding: 18px !important;
}
.gp-wrap #gallery-main-image{
    border-radius: 0 !important;
}
.gp-wrap #gallery-main-image + div,
.gp-wrap #gallery-ui .relative.overflow-hidden{
    border-radius: 2px !important;
    border: 1px solid var(--line-soft) !important;
    box-shadow: none !important;
}
.gp-wrap #gallery-thumbs button{
    border: 1px solid var(--line) !important;
    border-radius: 2px !important;
    transition: border-color .2s ease;
}
.gp-wrap #gallery-thumbs button:hover{ border-color: var(--accent) !important; }
.gp-wrap #gallery-thumbs button.active,
.gp-wrap #gallery-thumbs button.group\/\.active\:flex{
    border-color: var(--accent) !important;
}
.gp-wrap #gallery-thumbs .bg-gradient-to-br.from-purple-500\/50{
    background: color-mix(in srgb, var(--bmm-accent) 3%, transparent) !important;
}

/* "Articles about this game" list */
.gp-wrap .divide-purple-50\/70 > a{
    transition: background .2s ease;
}
.gp-wrap .divide-purple-50\/70 > a:hover{
    background: var(--accent-wash) !important;
}
.gp-wrap .hover\:bg-purple-50\/40:hover{ background: var(--accent-wash) !important; }
.gp-wrap .divide-y.divide-purple-50\/70 > * + *{
    border-top-color: var(--line-soft) !important;
}

/* Prose / article body inside overview
   Renders plain semantic HTML produced by the AI reformat endpoint.
   Tailwind's prose plugin isn't loaded, so everything is styled explicitly. */
.gp-wrap .prose{
    font-family:'Fraunces', Georgia, serif;
    color: var(--ink) !important;
    font-size: 16px;
    line-height: 1.7;
    max-width: none;
}
.gp-wrap .prose > :first-child{ margin-top: 0 !important; }
.gp-wrap .prose > :last-child{ margin-bottom: 0 !important; }

.gp-wrap .prose p{
    margin: 0 0 18px;
    font-family:'Fraunces', serif;
    font-size: 16px; line-height: 1.7;
    color: var(--ink);
}
/* Drop-cap lede for the first paragraph — subtle editorial flourish */
.gp-wrap .prose > p:first-of-type{
    font-size: 17px;
    color: var(--ink);
}
.gp-wrap .prose > p:first-of-type::first-letter{
    font-family:'Fraunces', serif;
    font-weight: 400; font-style: italic;
    font-size: 3.2em;
    line-height: .9;
    float: left;
    color: var(--accent);
    padding: 4px 10px 0 0;
    margin-top: 2px;
}

.gp-wrap .prose h1,
.gp-wrap .prose h2,
.gp-wrap .prose h3,
.gp-wrap .prose h4,
.gp-wrap .prose h5,
.gp-wrap .prose h6{
    font-family:'Fraunces', serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.2;
}
.gp-wrap .prose h3{
    font-size: 22px !important;
    margin: 32px 0 10px !important;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    position: relative;
    display: flex; align-items: baseline; gap: 10px;
}
.gp-wrap .prose h3::before{
    content:"§";
    font-family:'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    font-size: .85em;
    line-height: 1;
    flex: 0 0 auto;
}
.gp-wrap .prose > h3:first-child{
    border-top: none; padding-top: 0;
    margin-top: 0 !important;
}
.gp-wrap .prose h4{
    font-size: 16px !important;
    font-style: italic;
    font-weight: 500 !important;
    color: var(--ink-soft);
    margin: 22px 0 8px !important;
    letter-spacing: 0;
}

.gp-wrap .prose em{
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
}
.gp-wrap .prose strong{
    font-weight: 600;
    color: var(--ink);
}

.gp-wrap .prose a{
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--bmm-accent) 35%, transparent);
    transition: border-color .2s ease;
}
.gp-wrap .prose a:hover{ border-bottom-color: var(--accent); }

.gp-wrap .prose ul,
.gp-wrap .prose ol{
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
}
.gp-wrap .prose ul li,
.gp-wrap .prose ol li{
    position: relative;
    padding: 4px 4px 4px 28px;
    line-height: 1.55;
    font-size: 15.5px;
    border-bottom: 1px dashed var(--line-soft);
}
.gp-wrap .prose ul li:last-child,
.gp-wrap .prose ol li:last-child{ border-bottom: none; }
.gp-wrap .prose ul > li::before{
    content:"✦";
    position: absolute;
    left: 6px; top: 6px;
    color: var(--accent);
    font-size: 11px;
    opacity: .85;
}
.gp-wrap .prose ol{ counter-reset: prose-ol; }
.gp-wrap .prose ol > li{ counter-increment: prose-ol; }
.gp-wrap .prose ol > li::before{
    content: counter(prose-ol, upper-roman) ".";
    position: absolute;
    left: 0; top: 6px;
    width: 24px;
    text-align: right;
    font-family:'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 12px;
    color: var(--accent);
    opacity: .85;
    letter-spacing: .05em;
}

.gp-wrap .prose blockquote{
    margin: 28px 0;
    padding: 14px 20px 14px 22px;
    border: none !important;
    border-left: 3px solid var(--accent) !important;
    background: var(--accent-wash);
    font-family:'Fraunces', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    position: relative;
}
.gp-wrap .prose blockquote::before{
    content:"\201C";
    position: absolute;
    top: -2px; right: 12px;
    font-size: 48px;
    line-height: 1;
    color: var(--accent);
    opacity: .35;
    font-family:'Fraunces', serif;
    font-style: normal;
}
.gp-wrap .prose blockquote p{
    margin: 0;
    font-size: 17px;
    font-style: italic;
}
.gp-wrap .prose blockquote p + p{ margin-top: 10px; }

.gp-wrap .prose hr{
    border: none;
    height: 1px;
    background: none;
    margin: 32px auto;
    text-align: center;
    position: relative;
    max-width: 200px;
}
.gp-wrap .prose hr::before{
    content:"✦";
    display: inline-block;
    color: var(--accent);
    opacity: .6;
    font-size: 12px;
    background: #fff;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}
.gp-wrap .prose hr::after{
    content:"";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--line);
    z-index: 0;
}

.gp-wrap .prose br{ line-height: 1.2; }

/* Mobile tweaks */
@media (max-width: 560px){
    .gp-wrap .prose{ font-size: 15.5px; }
    .gp-wrap .prose h3{ font-size: 20px !important; }
    .gp-wrap .prose > p:first-of-type::first-letter{ font-size: 2.8em; }
}

/* Form inputs */
.gp-wrap textarea,
.gp-wrap input[type="text"],
.gp-wrap input[type="email"]{
    font-family:'Fraunces', serif !important;
    border-radius: 2px !important;
    border: 1px solid var(--line) !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}
.gp-wrap textarea:focus,
.gp-wrap input:focus{
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bmm-accent) 15%, transparent) !important;
}

/* Dashed empty states */
.gp-wrap .border-dashed{
    border-radius: 2px !important;
    border-style: dashed !important;
    border-color: var(--line) !important;
    background: var(--paper-tint, #fbfafd) !important;
}

/* External link modal */
#external-link-modal .relative.z-10{
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 2px !important;
    box-shadow: 0 30px 80px -30px rgba(20,18,26,.35) !important;
    font-family:'Fraunces', serif;
    position: relative;
}
#external-link-modal .relative.z-10::before,
#external-link-modal .relative.z-10::after{
    content:""; position:absolute; width:12px; height:12px;
    border: 1px solid var(--accent); opacity:.75;
}
#external-link-modal .relative.z-10::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
#external-link-modal .relative.z-10::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
#external-link-modal .blur-3xl{ display: none !important; }
#external-link-modal #external-link-backdrop{ background: rgba(20,18,26,.45) !important; backdrop-filter: none !important; }
#external-link-modal h3{
    font-family:'Fraunces', serif !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    letter-spacing: -0.01em;
}
#external-link-modal .text-purple-600{ color: var(--accent) !important; }
#external-link-modal #external-link-url{
    font-family: 'Fraunces', serif !important;
    font-size: 13px !important;
    font-style: italic;
    color: var(--ink-soft) !important;
}
#external-link-modal a[id="external-link-open"],
#external-link-modal button[id="external-link-open"],
#external-link-modal button[data-close-external-modal]{
    border-radius: 2px !important;
    box-shadow: none !important;
    font-family:'Fraunces', serif !important;
    font-weight: 500 !important;
}
#external-link-modal a[id="external-link-open"],
#external-link-modal button[id="external-link-open"]{
    background: var(--accent) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--accent) !important;
}
#external-link-modal button[data-close-external-modal].rounded-full{
    border: 1px solid var(--line) !important;
    background: #fff !important;
}
#external-link-modal button[data-close-external-modal]:not(.rounded-full){
    background: #fff !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}
#external-link-modal button[data-close-external-modal]:not(.rounded-full):hover{
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* Arrow icons */
.gp-wrap svg.text-purple-500,
.gp-wrap svg.text-emerald-300{ color: var(--accent) !important; }

/* ==========================================================
   Recommended / Not recommended tag — mobile shows icon only
   ========================================================== */
.recommend-tag{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.recommend-tag-icon{
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.recommend-tag--positive .recommend-tag-icon{ background:#d1fae5; color:#047857; }
.recommend-tag--negative .recommend-tag-icon{ background:#fee2e2; color:#b91c1c; }
.dark .recommend-tag--positive .recommend-tag-icon{ background:rgba(16,185,129,.18); color:#6ee7b7; }
.dark .recommend-tag--negative .recommend-tag-icon{ background:rgba(244,63,94,.2); color:#fda4af; }

/* ==========================================================
   Mobile compaction — reclaim horizontal space, restructure reviews
   ========================================================== */
@media (max-width: 767px){
    .gp-wrap{
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
    .gp-wrap > * + *{ margin-top: 14px; }

    /* Admin owner strip */
    .gp-admin{ margin-bottom: 12px; padding: 8px 10px; font-size: 12px; }

    /* Header card */
    .gp-hdr{ padding: 14px 12px; margin-bottom: 14px; }
    .gp-hdr.is-premium .gp-ribbon{
        margin: -14px -12px 12px;
        padding: 6px 12px;
        gap: 8px;
        font-size: 9px;
    }
    .gp-hdr.is-premium .gp-ribbon .serial{ font-size: 10px; }
    .gp-crumb{ font-size: 10px; gap: 6px; margin-bottom: 8px; }

    /* Title row */
    .gp-title{ font-size: 26px; }
    .gp-stamp{ padding: 6px 10px; gap: 8px; }
    .gp-stamp .ico{ width: 28px; height: 28px; flex: 0 0 28px; }
    .gp-stamp .t2{ font-size: 13px; }

    /* Facts / stats */
    .gp-facts{ margin-top: 14px; }
    .gp-fact{ padding: 10px 12px; }
    .gp-fact .v{ font-size: 14px; }
    .gp-stats{ margin-top: 14px; }
    .gp-stat{ padding: 0 12px; }
    .gp-stat:first-child{ padding-left: 0; }
    .gp-stat:last-child{ padding-right: 0; }
    .gp-stat .n{ font-size: 18px; }

    /* CTAs full-width-ish */
    .gp-cta{ gap: 8px; margin-top: 14px; }
    .gp-btn{ font-size: 14px; padding: 10px 16px; }

    /* Section panels — tighten Tailwind paddings inside .gp-wrap */
    .gp-wrap section .px-6,
    .gp-wrap aside .px-6,
    .gp-wrap section .px-5,
    .gp-wrap aside .px-5{ padding-left: 12px !important; padding-right: 12px !important; }
    .gp-wrap section .py-6,
    .gp-wrap aside .py-6,
    .gp-wrap section .py-5,
    .gp-wrap aside .py-5{ padding-top: 14px !important; padding-bottom: 14px !important; }
    .gp-wrap section .py-4,
    .gp-wrap aside .py-4{ padding-top: 10px !important; padding-bottom: 10px !important; }
    .gp-wrap section .p-4,
    .gp-wrap aside .p-4{ padding: 12px !important; }
    .gp-wrap section .p-5,
    .gp-wrap aside .p-5{ padding: 14px !important; }

    /* Reviews list spacing */
    .gp-wrap section .space-y-5 > * + *{ margin-top: 12px !important; }
    .gp-wrap section .space-y-4 > * + *{ margin-top: 10px !important; }

    /* Review avatar slightly smaller, message goes full-width below header row */
    .gp-review-avatar{ width: 32px !important; height: 32px !important; font-size: 11px !important; }
    .gp-review-msg{ margin-top: 10px !important; }

    /* Recommended chip: hide text, show icon only */
    .recommend-tag-text{ display: none; }

    /* Force review header row to fit nicely (username may be long) */
    .gp-review-meta{ min-width: 0; }
}

@media (min-width: 768px){
    /* Desktop: text label, hide the icon */
    .recommend-tag-icon{ display: none; }
}
</content>
</invoke>