.jcg-shell,
.jcg-shell * {
box-sizing: border-box;
}
.jcg-shell {
--jcg-text: #25252b;
--jcg-muted: #666;
--jcg-border: #ddd;
--jcg-border-strong: #bbb;
--jcg-surface: #fff;
--jcg-surface-soft: #f7f7f7;
--jcg-surface-muted: #eee;
--jcg-dark: #222;
--jcg-danger: #a40000;
--jcg-warning-bg: #fff8df;
--jcg-warning-border: #e4cf77;
width: 100% !important;
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 !important;
color: var(--jcg-text) !important;
background: transparent !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 16px !important;
line-height: 1.5 !important;
text-align: left !important;
} .jcg-shell h1,
.jcg-shell h2,
.jcg-shell h3,
.jcg-shell h4,
.jcg-shell p,
.jcg-shell ul,
.jcg-shell ol,
.jcg-shell figure,
.jcg-shell form,
.jcg-shell table {
margin-top: 0;
}
.jcg-shell h1,
.jcg-shell h2,
.jcg-shell h3,
.jcg-shell h4 {
color: var(--jcg-text) !important;
font-family: inherit !important;
line-height: 1.2 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.jcg-shell p,
.jcg-shell li,
.jcg-shell label,
.jcg-shell td,
.jcg-shell th,
.jcg-shell input,
.jcg-shell button,
.jcg-shell select,
.jcg-shell textarea {
font-family: inherit !important;
}
.jcg-shell a {
color: inherit;
}
.jcg-shell img,
.jcg-shell video {
max-width: 100%;
height: auto;
} .jcg-topbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
width: 100% !important;
min-height: 76px !important;
padding: 14px 12px !important;
margin: 0 !important;
border-bottom: 1px solid var(--jcg-border) !important;
background: var(--jcg-surface) !important;
color: var(--jcg-text) !important;
}
.jcg-topbar > a:first-child {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
text-decoration: none !important;
border: 0 !important;
box-shadow: none !important;
}
.jcg-logo {
display: block !important;
width: auto !important;
height: 48px !important;
max-width: 220px !important;
object-fit: contain !important;
border: 0 !important;
box-shadow: none !important;
}
.jcg-topbar nav {
display: flex !important;
align-items: center !important;
gap: 18px !important;
margin: 0 !important;
padding: 0 !important;
}
.jcg-topbar nav a {
display: inline-block !important;
padding: 8px 4px !important;
margin: 0 !important;
color: var(--jcg-text) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-size: .95rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
text-decoration: none !important;
}
.jcg-topbar nav a:hover,
.jcg-topbar nav a:focus-visible {
text-decoration: underline !important;
}
.jcg-home,
.jcg-stats {
width: 100% !important;
padding: 28px 14px !important;
margin: 0 !important;
}
.jcg-heading {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 20px !important;
margin-bottom: 18px !important;
}
.jcg-heading h1 {
margin: .25rem 0 !important;
font-size: clamp(1.8rem, 5vw, 3rem) !important;
font-weight: 800 !important;
}
.jcg-heading p {
margin: 0 !important;
}
.jcg-eyebrow {
display: inline-block !important;
margin: 0 !important;
color: var(--jcg-text) !important;
font-size: .75rem !important;
font-weight: 800 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.jcg-current {
font-weight: 700 !important;
}
.jcg-unicorn {
display: block !important;
width: 120px !important;
max-width: 120px !important;
max-height: 140px !important;
object-fit: contain !important;
border: 0 !important;
box-shadow: none !important;
}
.jcg-muted,
.jcg-no-stay,
.jcg-scanner p {
color: var(--jcg-muted) !important;
} .jcg-scanner,
.jcg-entry-card,
.jcg-stat-card,
.jcg-admin-game,
.jcg-admin-cards a,
.jcg-unplayed-card {
background: var(--jcg-surface) !important;
border: 1px solid var(--jcg-border) !important;
box-shadow: 0 5px 18px rgba(0, 0, 0, .045) !important;
}
.jcg-scanner,
.jcg-entry-card {
border-radius: 20px !important;
padding: 22px !important;
margin: 24px 0 !important;
}
.jcg-stat-card {
border-radius: 16px !important;
padding: 18px !important;
}
.jcg-stat-card h2,
.jcg-entry-card h2 {
margin: 0 0 12px !important;
font-weight: 800 !important;
}
.jcg-entry-card h2 {
font-size: 2rem !important;
}
.jcg-entry-card h3 {
margin: 24px 0 10px !important;
font-size: 1.05rem !important;
font-weight: 800 !important;
}
.jcg-section-title {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 16px !important;
}
.jcg-section-title h2 {
margin: 0 0 6px !important;
}
.jcg-section-title p {
margin: 0 !important;
color: var(--jcg-muted) !important;
}
.jcg-step {
display: grid !important;
place-items: center !important;
min-width: 34px !important;
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
background: var(--jcg-dark) !important;
color: #fff !important;
font-weight: 900 !important;
} .jcg-shell button,
.jcg-shell .jcg-btn,
.jcg-shell .jcg-save,
.jcg-shell input[type="submit"],
.jcg-shell input[type="button"] {
appearance: none !important;
-webkit-appearance: none !important;
border-radius: 12px !important;
font-family: inherit !important;
font-weight: 800 !important;
line-height: 1.2 !important;
cursor: pointer !important;
box-shadow: none !important;
text-transform: none !important;
}
.jcg-btn,
.jcg-save {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 46px !important;
padding: 12px 16px !important;
margin: 0 !important;
border: 1px solid transparent !important;
font-size: 1rem !important;
text-decoration: none !important;
}
.jcg-btn {
background: var(--jcg-surface-muted) !important;
color: var(--jcg-text) !important;
border-color: var(--jcg-border) !important;
}
.jcg-btn.primary,
.jcg-save {
background: var(--jcg-dark) !important;
color: #fff !important;
border-color: var(--jcg-dark) !important;
}
.jcg-btn:hover,
.jcg-btn:focus-visible {
filter: brightness(.96);
}
.jcg-save {
width: 100% !important;
min-height: 58px !important;
margin-top: 28px !important;
font-size: 1rem !important;
}
.jcg-big-btn {
width: 100% !important;
min-height: 58px !important;
margin-top: 18px !important;
font-size: 1.08rem !important;
} .jcg-scanner-box {
margin-top: 18px !important;
text-align: center !important;
}
.jcg-scanner-box video {
display: block !important;
width: 100% !important;
max-width: 520px !important;
margin: 0 auto !important;
border-radius: 18px !important;
background: #111 !important;
}
.jcg-manual {
margin-top: 18px !important;
}
.jcg-manual > div {
display: flex !important;
gap: 8px !important;
} .jcg-shell input[type="text"],
.jcg-shell input[type="number"],
.jcg-shell input[type="search"],
.jcg-shell input[type="email"],
.jcg-shell input[type="date"],
.jcg-shell select,
.jcg-shell textarea {
width: auto;
max-width: 100%;
min-height: 46px;
padding: 11px 13px !important;
margin: 0 !important;
border: 1px solid var(--jcg-border-strong) !important;
border-radius: 10px !important;
background: #fff !important;
color: var(--jcg-text) !important;
box-shadow: none !important;
font-size: 1rem !important;
line-height: 1.25 !important;
}
.jcg-shell input:focus,
.jcg-shell select:focus,
.jcg-shell textarea:focus {
outline: 2px solid rgba(34, 34, 34, .18) !important;
outline-offset: 1px !important;
}
.jcg-manual input[type="text"],
.jcg-manual input[type="search"] {
flex: 1 1 auto !important;
width: 100% !important;
}
.jcg-duration {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.jcg-duration input {
width: 80px !important;
} .jcg-players,
.jcg-discovery {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.jcg-players label,
.jcg-discovery label {
cursor: pointer !important;
}
.jcg-players input,
.jcg-discovery input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
opacity: 0 !important;
}
.jcg-players span,
.jcg-discovery label {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 10px 16px !important;
border: 1px solid var(--jcg-border-strong) !important;
border-radius: 12px !important;
background: #fff !important;
color: var(--jcg-text) !important;
text-align: center !important;
font-weight: 700 !important;
}
.jcg-players input:checked + span {
background: var(--jcg-dark) !important;
color: #fff !important;
border-color: var(--jcg-dark) !important;
}
.jcg-discovery label {
flex: 1 1 140px !important;
}
.jcg-discovery input:checked + label,
.jcg-discovery label:has(input:checked) {
background: var(--jcg-dark) !important;
color: #fff !important;
border-color: var(--jcg-dark) !important;
}
.jcg-checks {
display: grid !important;
gap: 8px !important;
}
.jcg-checks label {
padding: 12px !important;
border: 1px solid var(--jcg-border) !important;
border-radius: 10px !important;
background: #fff !important;
} .jcg-game-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 10px !important;
margin-bottom: 28px !important;
}
.jcg-card {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-height: 64px !important;
padding: 12px !important;
margin: 0 !important;
border: 1px solid var(--jcg-border) !important;
border-radius: 14px !important;
background: #fff !important;
color: var(--jcg-text) !important;
text-decoration: none !important;
box-shadow: none !important;
}
.jcg-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, .06) !important;
}
.jcg-card > span:last-child {
font-weight: 750 !important;
}
.jcg-mini-cover,
.jcg-mini-placeholder {
flex: 0 0 auto !important;
width: 48px !important;
height: 60px !important;
border-radius: 7px !important;
}
.jcg-mini-cover {
object-fit: cover !important;
background: var(--jcg-surface-soft) !important;
}
.jcg-mini-placeholder {
display: grid !important;
place-items: center !important;
background: var(--jcg-surface-muted) !important;
font-size: 1.5rem !important;
}
.jcg-search {
margin: 24px 0 !important;
}
.jcg-search > label {
display: block !important;
margin-bottom: 8px !important;
font-weight: 700 !important;
}
.jcg-search input[type="search"] {
width: 100% !important;
box-sizing: border-box !important;
}
.jcg-cover {
display: block !important;
width: auto !important;
max-width: 180px !important;
max-height: 240px !important;
margin: 0 auto 18px !important;
border-radius: 14px !important;
object-fit: contain !important;
border: 0 !important;
box-shadow: none !important;
}
.jcg-back {
display: inline-block !important;
margin-bottom: 18px !important;
font-weight: 800 !important;
} .jcg-success,
.jcg-success-card {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
.jcg-success-card {
padding: 18px !important;
border: 2px solid var(--jcg-dark) !important;
border-radius: 16px !important;
background: #fff !important;
}
.jcg-success-card > div:nth-child(2) {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.jcg-success-card .jcg-btn {
margin-left: auto !important;
}
.jcg-success-icon {
display: grid !important;
place-items: center !important;
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
background: var(--jcg-dark) !important;
color: #fff !important;
font-size: 1.25rem !important;
font-weight: 900 !important;
}
.jcg-success strong {
font-size: 1.05rem !important;
}
.jcg-success span {
margin-right: auto !important;
font-weight: 700 !important;
}
.jcg-inline-error {
margin: .6rem 0 0 !important;
color: var(--jcg-danger) !important;
font-weight: 700 !important;
}
.jcg-alert {
margin: 20px 0 !important;
padding: 16px !important;
border-radius: 12px !important;
background: #fee !important;
}
.jcg-alert[hidden] {
display: none !important;
} .jcg-filters {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 18px 0 !important;
}
.jcg-filters a {
display: inline-flex !important;
align-items: center !important;
min-height: 40px !important;
padding: 8px 12px !important;
border: 1px solid var(--jcg-border) !important;
border-radius: 999px !important;
background: #fff !important;
color: var(--jcg-text) !important;
text-decoration: none !important;
font-weight: 700 !important;
}
.jcg-filters a.selected {
background: var(--jcg-dark) !important;
color: #fff !important;
border-color: var(--jcg-dark) !important;
}
.jcg-kpis {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
}
.jcg-kpis > div {
min-width: 0 !important;
padding: 18px !important;
border: 1px solid var(--jcg-border) !important;
border-radius: 16px !important;
background: #fff !important;
text-align: center !important;
}
.jcg-kpis b,
.jcg-kpis strong,
.jcg-kpis span {
display: block !important;
}
.jcg-kpis strong {
font-size: 2rem !important;
font-weight: 800 !important;
}
.jcg-stat-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 18px !important;
margin-top: 18px !important;
}
.jcg-stat-card table {
width: 100% !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
background: transparent !important;
}
.jcg-stat-card th,
.jcg-stat-card td {
padding: 8px !important;
border-bottom: 1px solid #eee !important;
background: transparent !important;
color: var(--jcg-text) !important;
text-align: left !important;
vertical-align: middle !important;
}
.jcg-stat-card th {
font-weight: 800 !important;
}
.jcg-unplayed-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
gap: 12px !important;
margin-top: 12px !important;
}
.jcg-unplayed-card {
overflow: hidden !important;
border-radius: 12px !important;
}
.jcg-unplayed-card img,
.jcg-unplayed-card .jcg-placeholder {
display: block !important;
width: 100% !important;
aspect-ratio: 1 / 1.25 !important;
object-fit: cover !important;
border: 0 !important;
}
.jcg-unplayed-card .jcg-placeholder,
.jcg-placeholder {
display: grid !important;
place-items: center !important;
background: var(--jcg-surface-muted) !important;
font-size: 2rem !important;
}
.jcg-unplayed-card span {
display: block !important;
padding: 9px !important;
font-weight: 700 !important;
} .jcg-admin-warning {
display: flex !important;
gap: 12px !important;
margin: 20px 0 !important;
padding: 14px !important;
border: 1px solid var(--jcg-warning-border) !important;
border-radius: 10px !important;
background: var(--jcg-warning-bg) !important;
}
.jcg-admin-warning span {
display: block !important;
}
.jcg-admin-cards {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
.jcg-admin-cards a {
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
padding: 18px !important;
color: inherit !important;
text-decoration: none !important;
border-radius: 14px !important;
}
.jcg-admin-cards b {
font-size: 1.6rem !important;
}
.jcg-admin-form {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 15px 0 !important;
}
.jcg-admin-form input,
.jcg-admin-form select {
min-height: 36px !important;
}
.jcg-admin-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
}
.jcg-admin-game {
padding: 12px !important;
border-radius: 12px !important;
}
.jcg-admin-game img {
display: block !important;
width: 100% !important;
aspect-ratio: 1 / 1.25 !important;
object-fit: cover !important;
border-radius: 8px !important;
background: var(--jcg-surface-soft) !important;
}
.jcg-admin-game strong {
display: block !important;
margin-top: 8px !important;
}
.jcg-admin-game input[name="ean"] {
width: 100% !important;
box-sizing: border-box !important;
margin: 8px 0 !important;
}
.jcg-admin-game input[type="file"] {
width: 100% !important;
font-size: .8rem !important;
}
.jcg-ean-video {
display: none;
width: 100% !important;
max-width: 320px !important;
margin-top: 8px !important;
border-radius: 10px !important;
}
.jcg-admin table input {
max-width: 100% !important;
}
.jcg-diagnostic {
max-width: 1100px !important;
}
.jcg-diagnostic h2 {
margin-top: 28px !important;
}
.jcg-diagnostic table {
margin: 12px 0 24px !important;
}
.jcg-diagnostic code {
font-size: .9em !important;
} @media (max-width: 700px) {
.jcg-topbar {
position: sticky !important;
top: 0 !important;
z-index: 20 !important;
min-height: 64px !important;
padding: 10px 4px !important;
}
.jcg-logo {
height: 42px !important;
max-width: 180px !important;
}
.jcg-topbar nav {
gap: 4px !important;
}
.jcg-topbar nav a {
padding: 9px 7px !important;
font-size: .88rem !important;
}
.jcg-home,
.jcg-stats {
padding: 18px 10px !important;
}
.jcg-heading {
align-items: flex-start !important;
gap: 8px !important;
}
.jcg-heading h1 {
font-size: 1.65rem !important;
}
.jcg-unicorn {
width: 68px !important;
max-width: 68px !important;
max-height: 90px !important;
}
.jcg-scanner,
.jcg-entry-card {
padding: 16px !important;
border-radius: 16px !important;
margin: 16px 0 !important;
}
.jcg-manual > div {
flex-direction: column !important;
}
.jcg-manual .jcg-btn {
width: 100% !important;
}
.jcg-game-list {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.jcg-card {
min-height: 58px !important;
padding: 9px !important;
font-size: .9rem !important;
}
.jcg-mini-cover,
.jcg-mini-placeholder {
width: 42px !important;
height: 52px !important;
}
.jcg-success-card {
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 10px !important;
}
.jcg-success-card .jcg-btn {
grid-column: 1 / -1 !important;
width: 100% !important;
margin-left: 0 !important;
text-align: center !important;
}
.jcg-duration {
display: grid !important;
grid-template-columns: 1fr auto 1fr auto !important;
}
.jcg-duration input {
width: 100% !important;
}
.jcg-duration span {
font-size: .82rem !important;
}
.jcg-entry-card h2 {
font-size: 1.45rem !important;
}
.jcg-cover {
max-width: 145px !important;
max-height: 190px !important;
}
.jcg-kpis,
.jcg-stat-grid,
.jcg-admin-cards {
grid-template-columns: 1fr !important;
}
.jcg-kpis {
grid-template-columns: 1fr 1fr !important;
}
.jcg-kpis > div {
padding: 12px !important;
}
.jcg-kpis > div:first-child {
grid-column: 1 / -1 !important;
}
.jcg-kpis strong {
font-size: 1.6rem !important;
}
.jcg-stat-card {
padding: 12px !important;
overflow-x: auto !important;
}
.jcg-stat-card table {
min-width: 100% !important;
font-size: .9rem !important;
}
.jcg-admin-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.jcg-unplayed-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 420px) {
.jcg-topbar nav a {
font-size: .8rem !important;
padding-inline: 5px !important;
}
.jcg-heading h1 {
font-size: 1.5rem !important;
}
.jcg-kpis {
grid-template-columns: 1fr !important;
}
.jcg-kpis > div:first-child {
grid-column: auto !important;
}
.jcg-duration {
grid-template-columns: 1fr auto !important;
}
.jcg-duration input:nth-of-type(2) {
grid-column: 1 !important;
}
} .jcg-shell {
position: relative !important;
isolation: isolate !important;
overflow: visible !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
hyphens: auto !important;
}
.jcg-shell a,
.jcg-shell button,
.jcg-shell input,
.jcg-shell select,
.jcg-shell textarea {
box-sizing: border-box !important;
}
.jcg-shell a {
border-bottom: 0 !important;
outline-offset: 3px !important;
}
.jcg-shell a:focus-visible,
.jcg-shell button:focus-visible,
.jcg-shell input:focus-visible,
.jcg-shell select:focus-visible,
.jcg-shell textarea:focus-visible {
outline: 3px solid rgba(34, 34, 34, .28) !important;
} .jcg-home,
.jcg-stats {
min-width: 0 !important;
overflow: visible !important;
}
.jcg-topbar {
border-radius: 0 !important;
position: relative !important;
}
.jcg-topbar nav a {
white-space: nowrap !important;
}
.jcg-topbar nav a.jcg-current-link {
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 4px !important;
}
.jcg-heading > div {
min-width: 0 !important;
}
.jcg-heading h1,
.jcg-heading p,
.jcg-entry-card h2,
.jcg-stat-card h2,
.jcg-card > span,
.jcg-unplayed-card span {
overflow-wrap: anywhere !important;
} .jcg-entry-card form {
width: 100% !important;
min-width: 0 !important;
}
.jcg-players label,
.jcg-discovery label,
.jcg-checks label {
max-width: 100% !important;
}
.jcg-checks {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.jcg-checks label {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
min-width: 0 !important;
padding: 10px 12px !important;
border: 1px solid var(--jcg-border) !important;
border-radius: 10px !important;
background: var(--jcg-surface-soft) !important;
line-height: 1.35 !important;
}
.jcg-checks input {
flex: 0 0 auto !important;
margin-top: .2em !important;
} .jcg-game-list {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
min-width: 0 !important;
}
.jcg-card {
min-width: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
overflow: hidden !important;
}
.jcg-card > span:last-child {
min-width: 0 !important;
} .jcg-kpis,
.jcg-stat-grid,
.jcg-unplayed-grid {
min-width: 0 !important;
}
.jcg-stat-card {
min-width: 0 !important;
overflow: hidden !important;
}
.jcg-stat-card table {
table-layout: auto !important;
}
.jcg-stat-card th,
.jcg-stat-card td {
overflow-wrap: anywhere !important;
}
.jcg-stat-card th:first-child,
.jcg-stat-card td:first-child {
width: 2.5rem !important;
white-space: nowrap !important;
}
.jcg-filters {
align-items: stretch !important;
overflow-x: auto !important;
padding-bottom: 4px !important;
scrollbar-width: thin !important;
}
.jcg-filters a {
flex: 0 0 auto !important;
white-space: nowrap !important;
} .jcg-cover,
.jcg-mini-cover,
.jcg-unplayed-card img,
.jcg-admin-game img {
height: auto !important;
} .jcg-admin {
min-width: 0 !important;
overflow-wrap: anywhere !important;
}
.jcg-admin table {
max-width: 100% !important;
} @media (min-width: 701px) and (max-width: 980px) {
.jcg-shell {
max-width: 940px !important;
}
.jcg-game-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jcg-kpis {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
} @media (max-width: 700px) {
.jcg-topbar {
gap: 8px !important;
}
.jcg-topbar > a:first-child {
min-width: 0 !important;
flex: 1 1 auto !important;
}
.jcg-logo {
max-width: min(180px, 48vw) !important;
}
.jcg-topbar nav {
flex: 0 0 auto !important;
}
.jcg-home,
.jcg-stats {
padding-top: 16px !important;
padding-bottom: 24px !important;
}
.jcg-heading {
margin-bottom: 12px !important;
}
.jcg-heading > div {
flex: 1 1 auto !important;
}
.jcg-heading h1 {
line-height: 1.12 !important;
}
.jcg-section-title {
gap: 10px !important;
}
.jcg-section-title > div {
min-width: 0 !important;
}
.jcg-section-title h2 {
font-size: 1.15rem !important;
}
.jcg-game-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jcg-card {
min-height: 62px !important;
}
.jcg-checks {
grid-template-columns: 1fr !important;
}
.jcg-kpis {
gap: 8px !important;
}
.jcg-stat-grid {
gap: 12px !important;
}
.jcg-stat-card h2 {
font-size: 1.1rem !important;
}
.jcg-stat-card table {
font-size: .86rem !important;
}
.jcg-stat-card th,
.jcg-stat-card td {
padding: 7px 6px !important;
}
.jcg-unplayed-grid {
gap: 8px !important;
}
} @media (max-width: 380px) {
.jcg-topbar {
align-items: flex-start !important;
}
.jcg-logo {
height: 38px !important;
max-width: 45vw !important;
}
.jcg-topbar nav {
gap: 0 !important;
}
.jcg-topbar nav a {
padding: 8px 5px !important;
font-size: .76rem !important;
}
.jcg-heading h1 {
font-size: 1.38rem !important;
}
.jcg-unicorn {
width: 56px !important;
max-width: 56px !important;
max-height: 72px !important;
}
.jcg-game-list {
grid-template-columns: 1fr !important;
}
.jcg-card {
min-height: 58px !important;
}
.jcg-kpis {
grid-template-columns: 1fr 1fr !important;
}
.jcg-kpis > div:first-child {
grid-column: 1 / -1 !important;
}
.jcg-duration {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 6px !important;
}
.jcg-duration input {
width: 100% !important;
min-width: 0 !important;
}
.jcg-duration input:nth-of-type(2) {
grid-column: 1 !important;
}
.jcg-duration span:nth-of-type(2) {
grid-column: 2 !important;
grid-row: 2 !important;
}
.jcg-unplayed-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
} @media (prefers-reduced-motion: reduce) {
.jcg-shell *,
.jcg-shell *::before,
.jcg-shell *::after {
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
} :root {
--jcg-v019-fond:#0d0c0b;
--jcg-v019-panel:#171513;
--jcg-v019-border:#6f4a1b;
--jcg-v019-or:#e5a52b;
--jcg-v019-violet:#7d2bc2;
--jcg-v019-texte:#f5f1eb;
--jcg-v019-gris:#aaa29a;
}
body:has(.jcg-shell) {
margin:0 !important;
color:var(--jcg-v019-texte) !important;
background:
radial-gradient(circle at 15% 15%,rgba(125,43,194,.12),transparent 28%),
radial-gradient(circle at 85% 70%,rgba(190,105,20,.12),transparent 30%),
var(--jcg-v019-fond) !important;
}
.jcg-shell {
--jcg-text:var(--jcg-v019-texte) !important;
--jcg-muted:var(--jcg-v019-gris) !important;
--jcg-border:#3b2b19 !important;
--jcg-border-strong:#6f4a1b !important;
--jcg-surface:#141311 !important;
--jcg-surface-soft:#1b1815 !important;
--jcg-surface-muted:#211c17 !important;
--jcg-dark:#0d0c0b !important;
width:100% !important;
max-width:none !important;
min-height:100vh !important;
margin:0 !important;
padding:0 !important;
color:var(--jcg-v019-texte) !important;
background:transparent !important;
font-family:Inter,"Segoe UI",system-ui,sans-serif !important;
}
.jcg-shell h1,.jcg-shell h2,.jcg-shell h3,.jcg-shell h4,
.jcg-shell p,.jcg-shell label,.jcg-shell td,.jcg-shell th,
.jcg-shell input,.jcg-shell button,.jcg-shell select,.jcg-shell textarea,
.jcg-shell span,.jcg-shell a { color:inherit; }
.jcg-topbar {
height:82px !important;
min-height:82px !important;
padding:8px 4vw !important;
border-bottom:1px solid #3b2b19 !important;
background:rgba(9,8,7,.92) !important;
color:var(--jcg-v019-texte) !important;
position:sticky !important;
top:0 !important;
z-index:10 !important;
}
.jcg-logo { height:64px !important; max-width:260px !important; width:auto !important; }
.jcg-topbar nav { display:flex !important; gap:8px !important; }
.jcg-topbar nav a {
padding:10px 18px !important;
border-radius:22px !important;
color:#c9c1b8 !important;
font-weight:600 !important;
}
.jcg-topbar nav a.jcg-current-link {
background:#5d238d !important;
color:#fff !important;
text-decoration:none !important;
}
.jcg-topbar nav a:hover,.jcg-topbar nav a:focus-visible { color:#fff !important; text-decoration:none !important; }
.jcg-home,.jcg-stats { max-width:1200px !important; margin:auto !important; padding:32px 24px !important; }
.jcg-heading {
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:20px !important;
border-bottom:1px solid #4b3824 !important;
padding-bottom:12px !important;
margin-bottom:20px !important;
}
.jcg-heading h1 { font-size:34px !important; margin:4px 0 8px !important; color:var(--jcg-v019-texte) !important; }
.jcg-eyebrow { font-size:12px !important; letter-spacing:2px !important; color:var(--jcg-v019-or) !important; font-weight:800 !important; }
.jcg-current {
display:inline-block !important;
color:#ead8bb !important;
background:#241b12 !important;
border:1px solid #60431e !important;
border-radius:20px !important;
padding:7px 12px !important;
margin:6px 0 0 !important;
}
.jcg-unicorn { width:130px !important; height:130px !important; max-width:130px !important; max-height:130px !important; object-fit:contain !important; }
.jcg-muted,.jcg-no-stay,.jcg-scanner p { color:var(--jcg-v019-gris) !important; }
.jcg-no-stay { background:#351b1b !important; border:1px solid #6d3030 !important; color:#e4a9a9 !important; }
.jcg-scanner,.jcg-entry-card,.jcg-search,.jcg-stat-card,.jcg-card,.jcg-unplayed-card {
background:#141311 !important;
border:1px solid #493a29 !important;
box-shadow:none !important;
color:var(--jcg-v019-texte) !important;
}
.jcg-scanner,.jcg-entry-card { border-radius:20px !important; padding:28px !important; margin:20px 0 !important; }
.jcg-search { border-radius:15px !important; padding:20px !important; margin:20px 0 !important; }
.jcg-section-title { border-bottom:1px solid #3c3024 !important; padding-bottom:12px !important; }
.jcg-section-title h2,.jcg-entry-card h2,.jcg-stat-card h2 { color:var(--jcg-v019-or) !important; }
.jcg-section-title p { color:var(--jcg-v019-gris) !important; }
.jcg-step { background:#211c17 !important; border:1px solid #59452d !important; color:var(--jcg-v019-or) !important; width:32px !important; height:32px !important; border-radius:50% !important; }
.jcg-btn,.jcg-save {
border-radius:10px !important;
border:1px solid #59452d !important;
background:#211c17 !important;
color:#eee !important;
font-weight:700 !important;
box-shadow:none !important;
}
.jcg-btn:hover,.jcg-btn:focus-visible { border-color:var(--jcg-v019-or) !important; color:#fff !important; }
.jcg-btn.primary,.jcg-save {
background:linear-gradient(90deg,#6520a0,#842fc8) !important;
border-color:#8d3fc4 !important;
color:#fff !important;
}
.jcg-big-btn { padding:16px 20px !important; }
.jcg-scanner-box { background:#0e0d0c !important; border:1px solid #493a29 !important; border-radius:12px !important; }
.jcg-scanner-box video { background:#000 !important; border-radius:8px !important; }
.jcg-manual input,#jcgGameSearch,.jcg-duration input {
background:#211c17 !important;
border:1px solid #59452d !important;
color:#fff !important;
border-radius:10px !important;
}
.jcg-manual input::placeholder,#jcgGameSearch::placeholder { color:#8e8174 !important; }
.jcg-game-list { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:10px !important; }
.jcg-card { display:block !important; padding:16px !important; text-decoration:none !important; border-radius:12px !important; }
.jcg-card:hover { border-color:var(--jcg-v019-or) !important; background:#252019 !important; }
.jcg-mini-cover { border-radius:8px !important; border:1px solid #4b3824 !important; }
.jcg-entry-card { max-width:850px !important; margin:0 auto !important; }
.jcg-cover { display:block !important; width:150px !important; max-height:190px !important; object-fit:contain !important; border-radius:12px !important; border:1px solid #4b3824 !important; margin:14px auto 20px !important; }
.jcg-back { color:#d5b6eb !important; text-decoration:none !important; }
.jcg-back:hover { color:#fff !important; }
.jcg-players { display:grid !important; grid-template-columns:repeat(7,1fr) !important; gap:9px !important; margin-top:18px !important; }
.jcg-players label span { display:block !important; text-align:center !important; padding:18px 5px !important; border:1px solid #4d4842 !important; border-radius:11px !important; background:#22201e !important; font-size:22px !important; }
.jcg-players input { display:none !important; }
.jcg-players input:checked + span { background:var(--jcg-v019-violet) !important; border-color:var(--jcg-v019-or) !important; box-shadow:0 0 0 2px var(--jcg-v019-or) !important; }
.jcg-checks { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
.jcg-checks label { display:flex !important; align-items:center !important; gap:12px !important; padding:14px !important; border:1px solid #494039 !important; background:#1d1a17 !important; border-radius:11px !important; }
.jcg-checks input { width:20px !important; height:20px !important; accent-color:var(--jcg-v019-violet) !important; }
.jcg-discovery { display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
.jcg-discovery label { display:block !important; text-align:center !important; padding:16px !important; border:1px solid #4a4540 !important; border-radius:11px !important; background:#22201e !important; }
.jcg-discovery input { margin-right:7px !important; accent-color:var(--jcg-v019-violet) !important; }
.jcg-save { width:100% !important; margin-top:22px !important; padding:17px !important; font-size:17px !important; cursor:pointer !important; }
.jcg-success-card { background:#141311 !important; border:1px solid #6f4a1b !important; border-radius:20px !important; padding:28px !important; }
.jcg-success-icon { background:#7026a5 !important; border:2px solid var(--jcg-v019-or) !important; }
.jcg-filters { display:flex !important; flex-wrap:wrap !important; gap:8px !important; align-items:center !important; margin:20px 0 8px !important; padding:12px !important; border:1px solid #3d3329 !important; border-radius:12px !important; background:#141210 !important; }
.jcg-filters a { padding:10px 14px !important; border-radius:10px !important; border:1px solid #59452d !important; color:#eee !important; background:#211c17 !important; text-decoration:none !important; font-size:13px !important; }
.jcg-filters a.selected { background:#6d279f !important; border-color:#a74cd3 !important; }
.jcg-kpis { display:grid !important; grid-template-columns:repeat(6,1fr) !important; gap:10px !important; margin:24px 0 !important; }
.jcg-kpis>div { border:1px solid #483d31 !important; border-radius:15px !important; padding:15px !important; background:linear-gradient(145deg,#1d1a17,#131210) !important; color:var(--jcg-v019-texte) !important; }
.jcg-kpis strong { font-size:25px !important; color:#fff !important; }
.jcg-kpis span { color:var(--jcg-v019-gris) !important; font-size:12px !important; }
.jcg-stat-grid { display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; }
.jcg-stat-card { border:1px solid var(--jcg-v019-border) !important; border-radius:15px !important; background:#141311 !important; padding:17px !important; }
.jcg-stat-card h2 { font-size:18px !important; margin:0 0 13px !important; }
.jcg-stat-card table { width:100% !important; border-collapse:collapse !important; }
.jcg-stat-card th,.jcg-stat-card td { text-align:left !important; padding:9px !important; border-bottom:1px solid #302a24 !important; font-size:13px !important; color:var(--jcg-v019-texte) !important; }
.jcg-stat-card th { color:#a9a199 !important; font-weight:500 !important; }
.jcg-unplayed-grid { display:grid !important; grid-template-columns:repeat(6,1fr) !important; gap:12px !important; margin-top:16px !important; }
.jcg-unplayed-card { overflow:hidden !important; border-radius:12px !important; }
.jcg-unplayed-card img,.jcg-placeholder { display:block !important; width:100% !important; height:150px !important; object-fit:cover !important; background:#211d19 !important; }
.jcg-placeholder { display:grid !important; place-items:center !important; font-size:38px !important; color:#8e8174 !important; }
.jcg-unplayed-card span { display:block !important; padding:9px !important; font-size:12px !important; line-height:1.25 !important; } .wp-admin:has(.jcg-admin) #wpcontent,
.wp-admin:has(.jcg-admin) #wpbody-content { background:var(--jcg-v019-fond) !important; }
.jcg-admin,.jcg-admin * { box-sizing:border-box; }
.jcg-admin { color:var(--jcg-v019-texte) !important; }
.jcg-admin h1,.jcg-admin h2,.jcg-admin h3 { color:var(--jcg-v019-or) !important; }
.jcg-admin-card,.jcg-admin-cards a,.jcg-admin-game,.jcg-diagnostic { background:#141311 !important; border:1px solid #493a29 !important; color:var(--jcg-v019-texte) !important; box-shadow:none !important; }
.jcg-admin-cards a:hover { border-color:#a74cd3 !important; background:#241a2b !important; }
.jcg-admin input,.jcg-admin select,.jcg-admin textarea { background:#211c17 !important; color:#fff !important; border:1px solid #59452d !important; }
.jcg-admin .button,.jcg-admin button { border-radius:10px !important; }
@media(max-width:1000px){.jcg-kpis{grid-template-columns:repeat(3,1fr) !important}.jcg-unplayed-grid{grid-template-columns:repeat(4,1fr) !important}}
@media(max-width:800px){
.jcg-topbar{padding:8px 14px !important}.jcg-logo{height:54px !important}
.jcg-home,.jcg-stats{padding:18px 12px !important}
.jcg-heading{align-items:flex-start !important;flex-direction:column !important}
.jcg-home .jcg-unicorn,.jcg-stats .jcg-unicorn{align-self:center !important}
.jcg-players{grid-template-columns:repeat(4,1fr) !important}
.jcg-checks,.jcg-stat-grid{grid-template-columns:1fr !important}
.jcg-game-list{grid-template-columns:1fr !important}
.jcg-kpis{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:600px){.jcg-unplayed-grid{grid-template-columns:repeat(2,1fr) !important}} .jcg-auth-page{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:30px 16px;background:radial-gradient(circle at top,rgba(115,72,180,.22),transparent 45%);}
.jcg-auth-card{width:min(440px,100%);padding:28px;border:1px solid rgba(197,145,67,.55);border-radius:20px;background:rgba(25,18,38,.96);box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:center;}
.jcg-auth-logo{display:block;max-width:150px;max-height:90px;margin:0 auto 12px;object-fit:contain;}
.jcg-auth-card h1{margin:8px 0 12px;}
.jcg-auth-card p{line-height:1.55;}
.jcg-auth-form{display:flex;flex-direction:column;gap:10px;text-align:left;margin-top:22px;}
.jcg-auth-form input[type=password]{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px;border:1px solid rgba(197,145,67,.55);background:#17111f;color:inherit;}
.jcg-auth-error{margin:16px 0;padding:11px 13px;border-radius:10px;background:rgba(155,45,65,.2);border:1px solid rgba(210,80,100,.5);} .jcg-auth-page input[type=password], .jcg-auth-page input[type=text]{display:block !important; width:100% !important; min-height:46px !important; box-sizing:border-box !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; position:relative !important; z-index:5 !important; font-size:16px !important; -webkit-appearance:textfield !important;}
.jcg-auth-page label{display:block !important; cursor:text !important;}
.jcg-auth-form button{position:relative !important; z-index:5 !important; pointer-events:auto !important;}