/* Grow & CEO Academy — CEO Game Center (generated by build.sh; edit src/) */ /* ========================================================================== GROW & CEO ACADEMY — CEO GAME CENTER · core styles Every rule is scoped under .gceo-game-center so nothing leaks into the host site. Quiet luxury: black is the room (70% charcoal), cream is the paper (20% ivory panels with a thin amber inner frame), gold is the jewelry (10% amber #cfa15a: hairlines, icons, flat buttons, active states). A small touch of emerald for progress/success. Fonts: Cinzel + Montserrat only. ========================================================================== */ .gceo-game-center { --gc-bg: #0e0e0d; --gc-surface: #161615; --gc-surface-2: #1c1b19; --gc-surface-3: #22211e; --gc-ink: #efe8da; --gc-white: #f6efe1; --gc-muted: #a9a192; --gc-faint: #7d766a; --gc-line: rgba(207, 161, 90, .26); --gc-line-soft: rgba(244, 238, 225, .09); --gc-gold: #cfa15a; --gc-gold-fill: #cfa15a; --gc-gold-hover: #dbb06c; --gc-gold-soft: rgba(207, 161, 90, .09); --gc-on-gold: #141413; --gc-emerald: #2f9a74; --gc-emerald-soft: rgba(47, 154, 116, .16); --gc-emerald-ink: #74d3ad; --gc-risk: #e58a7a; --gc-risk-soft: rgba(229, 138, 122, .14); --gc-warn: #e0a64a; --gc-warn-soft: rgba(224, 166, 74, .14); --gc-track: rgba(244, 238, 225, .10); --gc-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.32); --gc-display: "Cinzel", "Trajan Pro", "Times New Roman", serif; --gc-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif; --gc-r: 6px; --gc-accent: #cfa15a; --gc-paper: #f6f0e3; --gc-paper-ink: #1d1c19; --gc-on-dark: #efe8da; font-family: var(--gc-body); color: var(--gc-ink); background: var(--gc-bg); color-scheme: dark; font-size: 15px; line-height: 1.55; border-radius: var(--gc-r); padding: clamp(0px, 1.2vw, 12px); position: relative; isolation: isolate; container-type: inline-size; -webkit-font-smoothing: antialiased; } /* Cream "paper": highlight cards flip the tokens locally (thin inner gold frame). */ .gceo-game-center .gc-paper { --gc-surface: #f6f0e3; --gc-surface-2: #efe7d6; --gc-surface-3: #e8dfcb; --gc-ink: #1d1c19; --gc-white: #111110; --gc-muted: #5e584d; --gc-faint: #8a8170; --gc-line: rgba(160, 122, 38, .38); --gc-line-soft: rgba(29, 28, 25, .10); --gc-gold: #8a6418; --gc-gold-soft: #f1e3bf; --gc-emerald: #0f5c45; --gc-emerald-soft: #e0ece4; --gc-emerald-ink: #0b4a37; --gc-risk: #a83232; --gc-risk-soft: #f7e3df; --gc-warn: #8a5a0c; --gc-warn-soft: #f6ead2; --gc-track: rgba(29, 28, 25, .12); --gc-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.18); background: var(--gc-surface); color: var(--gc-ink); color-scheme: light; border: 1px solid rgba(207, 161, 90, .55); box-shadow: inset 0 0 0 5px #f6f0e3, inset 0 0 0 6px rgba(160, 122, 38, .45); } .gceo-game-center *, .gceo-game-center *::before, .gceo-game-center *::after { box-sizing: border-box; } .gceo-game-center [hidden] { display: none !important; } .gceo-game-center h2, .gceo-game-center h3, .gceo-game-center h4, .gceo-game-center p { margin: 0; } .gceo-game-center h2, .gceo-game-center h3, .gceo-game-center h4 { color: var(--gc-white); } .gceo-game-center button { font: inherit; color: inherit; cursor: pointer; } .gceo-game-center button:disabled { cursor: not-allowed; } .gceo-game-center :focus-visible { outline: 2px solid var(--gc-gold-fill); outline-offset: 2px; border-radius: 4px; } .gceo-game-center .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gceo-game-center .gc-ic { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.22em; color: var(--gc-gold); } .gceo-game-center .gc-emo { line-height: 1; } .gceo-game-center .gc-muted { color: var(--gc-muted); } .gceo-game-center .gc-center { text-align: center; } .gceo-game-center .gc-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--gc-gold); display: inline-flex; align-items: center; gap: 8px; } .gceo-game-center .gc-eyebrow .gc-ic { width: 15px; height: 15px; } .gceo-game-center .gc-title { font-family: var(--gc-display); font-weight: 600; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.12; letter-spacing: .04em; color: var(--gc-white); text-wrap: balance; } .gceo-game-center .gc-lead { font-size: 16.5px; color: var(--gc-muted); max-width: 60ch; } .gceo-game-center .gc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .gceo-game-center .gc-between { justify-content: space-between; } .gceo-game-center .gc-list { margin: 0; padding-left: 1.2em; display: grid; gap: 5px; } .gceo-game-center .gc-list li::marker { color: var(--gc-gold); } .gceo-game-center .gc-sub { font-family: var(--gc-body); font-weight: 500; font-size: 12.5px; letter-spacing: .34em; text-transform: uppercase; line-height: 1.4; color: var(--gc-ink); } .gceo-game-center .gc-rule { display: block; width: 72px; height: 1px; background: linear-gradient(90deg, var(--gc-gold-fill), transparent); } .gceo-game-center .gc-ring { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gc-gold-fill); box-shadow: inset 0 0 0 3px var(--gc-surface), inset 0 0 0 4px var(--gc-line); color: var(--gc-gold); } .gceo-game-center .gc-ring .gc-ic { width: 46%; height: 46%; vertical-align: 0; } .gceo-game-center .gc-ring.sm { width: 32px; height: 32px; box-shadow: none; } .gceo-game-center .gc-won { display: inline-flex; align-items: center; gap: 4px; color: var(--gc-emerald-ink); font-weight: 600; } .gceo-game-center .gc-won .gc-ic { color: var(--gc-emerald-ink); } /* ---------- Buttons ---------- */ .gceo-game-center .gc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 4px; border: 1px solid var(--gc-line); background: transparent; color: var(--gc-ink); font-weight: 500; font-size: 14px; letter-spacing: .03em; line-height: 1.2; text-decoration: none; transition: transform .12s ease, border-color .15s, background .15s, color .15s; } .gceo-game-center .gc-btn .gc-ic { width: 16px; height: 16px; vertical-align: 0; } .gceo-game-center .gc-btn:hover:not(:disabled) { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .gc-btn:active:not(:disabled) { transform: translateY(1px); } .gceo-game-center .gc-btn:disabled { opacity: .42; } .gceo-game-center .gc-btn.primary { background: var(--gc-gold-fill); border-color: var(--gc-gold-fill); color: var(--gc-on-gold); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; } .gceo-game-center .gc-btn.primary .gc-ic { color: var(--gc-on-gold); } .gceo-game-center .gc-btn.primary:hover:not(:disabled) { background: var(--gc-gold-hover); border-color: var(--gc-gold-hover); } .gceo-game-center .gc-btn.ink { background: #1d1c19; color: #efe8da; border-color: #cfa15a; } .gceo-game-center .gc-btn.ink .gc-ic { color: #cfa15a; } /* "emerald" = a positive action: a quiet outline with an emerald hairline, never a big green fill */ .gceo-game-center .gc-btn.emerald { background: rgba(47, 154, 116, .08); color: var(--gc-white); border-color: rgba(47, 154, 116, .7); font-weight: 600; } .gceo-game-center .gc-btn.emerald .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .gc-btn.emerald:hover:not(:disabled) { background: var(--gc-emerald-soft); border-color: var(--gc-emerald); } .gceo-game-center .gc-btn.danger { background: transparent; color: var(--gc-risk); border-color: var(--gc-risk); } .gceo-game-center .gc-btn.danger:hover:not(:disabled) { background: var(--gc-risk-soft); border-color: var(--gc-risk); } .gceo-game-center .gc-btn.danger .gc-ic { color: var(--gc-risk); } .gceo-game-center .gc-btn.primary.danger { background: #a8392c; border-color: #a8392c; color: #f6efe1; } .gceo-game-center .gc-btn.primary.danger:hover:not(:disabled) { background: #b9473a; border-color: #b9473a; } .gceo-game-center .gc-btn.small { min-height: 44px; padding: 6px 12px; font-size: 13px; } .gceo-game-center .gc-btn.primary.small { font-size: 12px; letter-spacing: .1em; } .gceo-game-center .gc-btn.big { min-height: 52px; padding: 12px 28px; font-size: 14px; } .gceo-game-center .gc-btn.block { width: 100%; } .gceo-game-center .gc-paper .gc-btn:not(.primary):not(.danger):not(.emerald) { background: #1d1c19; border-color: #1d1c19; color: #efe8da; } .gceo-game-center .gc-paper .gc-btn:not(.primary):not(.danger):not(.emerald) .gc-ic { color: #cfa15a; } .gceo-game-center .gc-paper .gc-btn:not(.primary):not(.danger):not(.emerald):hover:not(:disabled) { background: #2a2925; } /* ---------- Top bar ---------- */ .gceo-game-center .gc-top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; background: #121211; box-shadow: inset 0 -1px 0 rgba(207, 161, 90, .10); color: var(--gc-ink); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 14px; margin-bottom: 18px; } .gceo-game-center .gc-brand { display: flex; gap: 12px; align-items: center; background: none; border: 0; color: inherit; text-align: left; padding: 4px; min-width: 0; } .gceo-game-center .gc-crown { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gc-gold-fill); flex: none; } .gceo-game-center .gc-crown .gc-ic { width: 20px; height: 20px; vertical-align: 0; } .gceo-game-center .gc-brand small { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gc-gold); font-weight: 600; } .gceo-game-center .gc-brand b { font-family: var(--gc-display); font-weight: 600; font-size: 18px; letter-spacing: .06em; color: var(--gc-white); white-space: nowrap; } .gceo-game-center .gc-level { display: flex; gap: 10px; align-items: center; min-width: 0; } .gceo-game-center .gc-level-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gc-line); flex: none; } .gceo-game-center .gc-level-ico .gc-ic { width: 17px; height: 17px; vertical-align: 0; } .gceo-game-center .gc-level-txt small { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gc-muted); } .gceo-game-center .gc-level-txt b { font-family: var(--gc-display); font-weight: 600; font-size: 15px; letter-spacing: .05em; color: var(--gc-white); white-space: nowrap; } .gceo-game-center .gc-level-xp { display: grid; gap: 4px; font-size: 11.5px; min-width: 120px; color: var(--gc-muted); font-variant-numeric: tabular-nums; } .gceo-game-center .gc-nav { display: flex; flex-wrap: wrap; gap: 4px; } .gceo-game-center .gc-navbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 1px solid transparent; color: var(--gc-ink); border-radius: 4px; padding: 8px 12px; min-height: 40px; font-size: 13px; font-weight: 500; letter-spacing: .03em; } .gceo-game-center .gc-navbtn .gc-ic { width: 17px; height: 17px; vertical-align: 0; } .gceo-game-center .gc-navbtn:hover { background: var(--gc-gold-soft); border-color: var(--gc-line); } .gceo-game-center .gc-navbtn.on { border-color: var(--gc-line); background: linear-gradient(180deg, rgba(207, 161, 90, .12), rgba(207, 161, 90, .03)); color: var(--gc-white); } @container (max-width: 760px) { .gceo-game-center .gc-navbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gceo-game-center .gc-navbtn { min-width: 44px; min-height: 44px; padding: 8px; border-color: var(--gc-line-soft); } .gceo-game-center .gc-nav { width: 100%; justify-content: space-between; border-top: 1px solid var(--gc-line-soft); padding-top: 8px; } .gceo-game-center .gc-navbtn { flex: 1; } } @container (max-width: 420px) { .gceo-game-center .gc-level-xp { min-width: 92px; } .gceo-game-center .gc-brand small { display: none; } .gceo-game-center .gc-brand b { font-size: 16px; } .gceo-game-center .gc-crown { width: 34px; height: 34px; } } /* ---------- Meters, resources, pills, panels ---------- */ .gceo-game-center .gc-meter-wrap { display: grid; gap: 5px; } .gceo-game-center .gc-meter-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--gc-muted); font-variant-numeric: tabular-nums; } .gceo-game-center .gc-meter { height: 6px; border-radius: 999px; background: var(--gc-track); overflow: hidden; } .gceo-game-center .gc-meter > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gc-emerald), var(--gc-gold-fill)); transition: width .45s ease; } .gceo-game-center .gc-meter.gold > i { background: linear-gradient(90deg, #a97d36, #dbb06c); } .gceo-game-center .gc-meter.warn > i { background: var(--gc-warn); } .gceo-game-center .gc-meter.bad > i { background: var(--gc-risk); } .gceo-game-center .gc-top .gc-meter { height: 4px; } .gceo-game-center .gc-res { display: flex; gap: 10px; align-items: center; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 8px 10px; min-width: 0; } .gceo-game-center .gc-res-ico { font-size: 18px; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gc-line); } .gceo-game-center .gc-res-ico .gc-ic { width: 17px; height: 17px; vertical-align: 0; } .gceo-game-center .gc-res-ico .gc-emo { font-size: 18px; } .gceo-game-center .gc-res-txt { display: grid; min-width: 0; } .gceo-game-center .gc-res small { font-size: 10.5px; color: var(--gc-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .gc-res b { font-size: 17px; font-weight: 600; color: var(--gc-white); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .gc-res.warn { border-color: var(--gc-warn); background: var(--gc-warn-soft); } .gceo-game-center .gc-res.warn .gc-res-ico { border-color: var(--gc-warn); } .gceo-game-center .gc-res.warn .gc-ic { color: var(--gc-warn); } .gceo-game-center .gc-res.bad { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .gc-res.bad .gc-res-ico { border-color: var(--gc-risk); } .gceo-game-center .gc-res.bad .gc-ic { color: var(--gc-risk); } .gceo-game-center .gc-res.good { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .gc-res.good .gc-res-ico { border-color: var(--gc-emerald); } .gceo-game-center .gc-res.good .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .gc-res-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; } .gceo-game-center .gc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: transparent; color: var(--gc-ink); border: 1px solid var(--gc-line); white-space: nowrap; } .gceo-game-center .gc-pill .gc-ic { width: 13px; height: 13px; vertical-align: 0; } .gceo-game-center .gc-pill.good { background: var(--gc-emerald-soft); color: var(--gc-emerald-ink); border-color: transparent; } .gceo-game-center .gc-pill.good .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .gc-pill.warn { background: var(--gc-warn-soft); color: var(--gc-warn); border-color: transparent; } .gceo-game-center .gc-pill.bad { background: var(--gc-risk-soft); color: var(--gc-risk); border-color: transparent; } .gceo-game-center .gc-pill.gold { background: var(--gc-gold-soft); color: var(--gc-gold); border-color: var(--gc-line); } .gceo-game-center .gc-panel { background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 16px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; } .gceo-game-center .gc-panel.gc-paper { border-color: rgba(207, 161, 90, .55); padding: 20px 22px; } .gceo-game-center .gc-panel-title { font-family: var(--gc-display); font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--gc-white); display: flex; align-items: center; gap: 10px; } .gceo-game-center .gc-panel-title .gc-ic { width: 18px; height: 18px; vertical-align: 0; } .gceo-game-center .gc-stars { color: var(--gc-gold-fill); letter-spacing: 1px; } .gceo-game-center .gc-stars .off { color: var(--gc-track); } .gceo-game-center .gc-paper .gc-stars { color: #a07a26; } /* ---------- Bee coach ---------- */ .gceo-game-center .gc-coach { display: flex; gap: 14px; align-items: center; background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-left: 2px solid var(--gc-gold-fill); border-radius: var(--gc-r); padding: 10px 16px; color: var(--gc-ink); } .gceo-game-center .gc-coach .gc-bee { width: 44px; height: auto; flex: none; } .gceo-game-center .gc-coach p { font-weight: 500; font-size: 14.5px; line-height: 1.5; } .gceo-game-center .gc-coach.good { border-left-color: var(--gc-emerald); background: linear-gradient(90deg, var(--gc-emerald-soft), transparent 70%), var(--gc-surface-2); } .gceo-game-center .gc-coach.warn { border-left-color: var(--gc-warn); background: linear-gradient(90deg, var(--gc-warn-soft), transparent 70%), var(--gc-surface-2); } .gceo-game-center .gc-coach.bad { border-left-color: var(--gc-risk); background: linear-gradient(90deg, var(--gc-risk-soft), transparent 70%), var(--gc-surface-2); } .gceo-game-center .gc-paper .gc-coach { --gc-ink: #efe8da; --gc-emerald: #2f9a74; --gc-emerald-soft: rgba(47,154,116,.16); --gc-warn: #e0a64a; --gc-warn-soft: rgba(224,166,74,.14); background-color: #1d1c19; border-color: #1d1c19; border-left-color: #cfa15a; } .gceo-game-center .gc-paper .gc-coach.good { border-left-color: #2f9a74; } .gceo-game-center .gc-paper .gc-coach.warn { border-left-color: #e0a64a; } .gceo-game-center .gc-coach-slot { margin: 12px 0 14px; } .gceo-game-center .gc-coach-slot .gc-coach { animation: gc-pop .35s ease; } @keyframes gc-pop { from { transform: scale(.98); opacity: .4; } to { transform: none; opacity: 1; } } /* ---------- Lobby ---------- */ .gceo-game-center .gc-lobby { display: grid; gap: 18px; } .gceo-game-center .gc-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; background: radial-gradient(80% 120% at 100% 0%, rgba(207, 161, 90, .07), transparent 60%), var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: clamp(18px, 3.4vw, 34px); } .gceo-game-center .gc-hero-txt { display: grid; gap: 10px; align-content: start; justify-items: start; min-width: 0; } .gceo-game-center .gc-hero-title { font-size: clamp(30px, 5vw, 50px); letter-spacing: .06em; } .gceo-game-center .gc-hero .gc-sub { margin-top: 2px; } .gceo-game-center .gc-hero .gc-rule { margin: 4px 0 2px; } .gceo-game-center .gc-tag { font-size: 15.5px; color: var(--gc-muted); max-width: 52ch; } .gceo-game-center .gc-hero .gc-coach { margin-top: 6px; width: 100%; } .gceo-game-center .gc-hero-card { display: grid; gap: 12px; align-content: start; border-radius: 4px; padding: 22px; min-width: 0; } .gceo-game-center .gc-big-level { display: flex; gap: 14px; align-items: center; font-family: var(--gc-display); font-weight: 600; font-size: 26px; letter-spacing: .06em; color: var(--gc-white); } .gceo-game-center .gc-big-level .gc-ring { width: 54px; height: 54px; } .gceo-game-center .gc-ladder { display: flex; justify-content: space-between; gap: 4px; padding-top: 10px; border-top: 1px solid var(--gc-line); } .gceo-game-center .gc-ladder span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--gc-faint); opacity: .55; } .gceo-game-center .gc-ladder span .gc-ic { width: 16px; height: 16px; vertical-align: 0; color: var(--gc-faint); } .gceo-game-center .gc-ladder span.on { opacity: 1; border: 1px solid var(--gc-gold); } .gceo-game-center .gc-ladder span.on .gc-ic { color: var(--gc-gold); } @container (max-width: 760px) { .gceo-game-center .gc-hero { grid-template-columns: minmax(0, 1fr); } } .gceo-game-center .gc-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px 0; border-bottom: 1px solid var(--gc-line); padding-bottom: 10px; font-size: 13px; } .gceo-game-center .gc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; } .gceo-game-center .gc-card { display: grid; grid-template-rows: auto 1fr; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); overflow: hidden; transition: transform .15s ease, border-color .15s; min-width: 0; } .gceo-game-center .gc-card:hover { transform: translateY(-2px); border-color: rgba(207, 161, 90, .6); } .gceo-game-center .gc-card-art { position: relative; height: 104px; display: grid; place-items: center; background: radial-gradient(55% 110% at 50% 0%, rgba(207, 161, 90, .09), transparent 72%), linear-gradient(180deg, #121211, #0d0d0c); border-bottom: 1px solid var(--gc-line); } .gceo-game-center .gc-card-art::before { content: ""; position: absolute; left: 50%; top: 50%; width: 132px; height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(207, 161, 90, .35), transparent); } .gceo-game-center .gc-card-art .gc-ring { position: relative; width: 64px; height: 64px; background: #0f0f0e; box-shadow: inset 0 0 0 4px #0f0f0e, inset 0 0 0 5px var(--gc-line); } .gceo-game-center .gc-card-art .gc-ring .gc-ic { width: 28px; height: 28px; } .gceo-game-center .gc-card-num { position: absolute; top: 10px; left: 14px; font-family: var(--gc-display); font-weight: 600; font-size: 13px; letter-spacing: .14em; color: var(--gc-white); opacity: .8; } .gceo-game-center .gc-card-done { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--gc-emerald); display: grid; place-items: center; } .gceo-game-center .gc-card-done .gc-ic { width: 15px; height: 15px; color: #fff; vertical-align: 0; stroke-width: 2.2; } .gceo-game-center .gc-card-body { display: grid; gap: 8px; padding: 16px 18px 18px; align-content: start; } .gceo-game-center .gc-card h3 { font-family: var(--gc-display); font-weight: 600; font-size: 18.5px; letter-spacing: .03em; line-height: 1.2; } .gceo-game-center .gc-card p { font-size: 14px; color: var(--gc-muted); } .gceo-game-center .gc-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .gceo-game-center .gc-card-foot { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--gc-line-soft); font-size: 13px; } .gceo-game-center .gc-card.next { border-color: rgba(207, 161, 90, .7); } .gceo-game-center .gc-card.next .gc-card-art { background: radial-gradient(55% 110% at 50% 0%, rgba(207, 161, 90, .16), transparent 72%), linear-gradient(180deg, #141413, #0d0d0c); } .gceo-game-center .gc-badge-row { display: flex; flex-wrap: wrap; gap: 8px; } .gceo-game-center .gc-badge-mini { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--gc-faint); color: var(--gc-faint); opacity: .7; } .gceo-game-center .gc-badge-mini .gc-ic { width: 19px; height: 19px; vertical-align: 0; color: inherit; } .gceo-game-center .gc-badge-mini.on { opacity: 1; border: 1px solid var(--gc-gold-fill); color: var(--gc-gold); background: radial-gradient(circle at 35% 30%, rgba(207, 161, 90, .22), transparent 70%); } /* ---------- Intro / game shell ---------- */ .gceo-game-center .gc-intro { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 10px 0; } .gceo-game-center .gc-intro-art { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: var(--gc-gold); border: 1px solid var(--gc-gold-fill); box-shadow: inset 0 0 0 6px var(--gc-bg), inset 0 0 0 7px var(--gc-line); background: radial-gradient(circle at 50% 35%, rgba(207, 161, 90, .14), transparent 70%); } .gceo-game-center .gc-intro-art .gc-ic { width: 40px; height: 40px; vertical-align: 0; } .gceo-game-center .gc-intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; width: 100%; text-align: left; margin-top: 4px; } .gceo-game-center .gc-intro .gc-coach { width: 100%; max-width: 680px; text-align: left; } .gceo-game-center .gc-game { display: grid; gap: 0; } .gceo-game-center .gc-game-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--gc-line); } .gceo-game-center .gc-game-head > div:first-child { display: grid; gap: 4px; min-width: 0; } .gceo-game-center .gc-game-title { font-family: var(--gc-display); font-weight: 600; letter-spacing: .04em; font-size: clamp(21px, 3.4vw, 30px); display: flex; align-items: center; gap: 12px; line-height: 1.15; } .gceo-game-center .gc-game-title .gc-ic { width: .95em; height: .95em; vertical-align: 0; } .gceo-game-center .gc-objective { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; border: 1px solid var(--gc-line); color: var(--gc-ink); border-radius: 4px; padding: 7px 12px; max-width: 100%; } .gceo-game-center .gc-objective .gc-ic { width: 16px; height: 16px; vertical-align: 0; } .gceo-game-center .gc-stage { display: grid; gap: 12px; } /* ---------- Results ---------- */ .gceo-game-center .gc-results { margin-top: 18px; display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); border-radius: 4px; background: var(--gc-surface); border: 1px solid var(--gc-line); animation: gc-pop .4s ease; scroll-margin-top: 12px; } .gceo-game-center .gc-results.win { box-shadow: inset 0 0 0 6px #f6f0e3, inset 0 0 0 7px rgba(160,122,38,.45), var(--gc-shadow); } .gceo-game-center .gc-results.loss { box-shadow: inset 0 0 0 5px var(--gc-surface), inset 0 0 0 6px var(--gc-line-soft); } .gceo-game-center .gc-results-head { display: flex; gap: 16px; align-items: center; } .gceo-game-center .gc-results-ico.gc-ring { width: 64px; height: 64px; } .gceo-game-center .gc-results-head > div { display: grid; gap: 4px; min-width: 0; } .gceo-game-center .gc-results-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .gceo-game-center .gc-results-stats > div { background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: 4px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; } .gceo-game-center .gc-results-stats small { font-size: 10.5px; color: var(--gc-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; } .gceo-game-center .gc-results-stats b { font-size: 19px; font-weight: 600; color: var(--gc-white); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; } .gceo-game-center .gc-note { display: flex; justify-content: center; align-items: center; gap: 8px; } /* ---------- Stats / achievements / playbook pages ---------- */ .gceo-game-center .gc-page { display: grid; gap: 16px; } .gceo-game-center .gc-page-head { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--gc-line); } .gceo-game-center .gc-page-head .gc-title::after { content: ""; display: block; width: 56px; height: 1px; background: var(--gc-ink); opacity: .5; margin-top: 12px; } .gceo-game-center .gc-page-head .gc-muted { max-width: 64ch; } .gceo-game-center .gc-stat-tiles > div { background: var(--gc-surface); border-color: var(--gc-line); padding: 14px 16px; } .gceo-game-center .gc-stat-tiles b { font-family: var(--gc-display); font-weight: 500; font-size: 24px; letter-spacing: .03em; } .gceo-game-center .gc-stat-tiles b .gc-ic { width: 20px; height: 20px; } .gceo-game-center .gc-table-wrap { overflow-x: auto; } .gceo-game-center .gc-table { width: 100%; border-collapse: collapse; font-size: 14px; } .gceo-game-center .gc-table th, .gceo-game-center .gc-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--gc-line-soft); } .gceo-game-center .gc-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--gc-muted); border-bottom-color: var(--gc-line); } .gceo-game-center .gc-table td { font-variant-numeric: tabular-nums; } .gceo-game-center .gc-td-game { display: inline-flex; align-items: center; gap: 10px; } .gceo-game-center .gc-td-game .gc-ic { width: 17px; height: 17px; vertical-align: 0; } .gceo-game-center .gc-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; } .gceo-game-center .gc-levels > div { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 4px; border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); text-align: center; } .gceo-game-center .gc-levels > div > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px dashed var(--gc-faint); color: var(--gc-faint); } .gceo-game-center .gc-levels .gc-ic { width: 18px; height: 18px; vertical-align: 0; color: inherit; } .gceo-game-center .gc-levels b { font-size: 12px; font-weight: 600; letter-spacing: .1em; } .gceo-game-center .gc-levels > div:not(.on) b { color: var(--gc-muted); } .gceo-game-center .gc-levels > div.on { border-color: var(--gc-line); } .gceo-game-center .gc-levels > div.on > span { border: 1px solid var(--gc-gold-fill); color: var(--gc-gold); } .gceo-game-center .gc-levels small { color: var(--gc-muted); font-size: 11.5px; } .gceo-game-center .gc-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; } .gceo-game-center .gc-badge { display: grid; justify-items: center; align-content: start; text-align: center; gap: 8px; padding: 20px 14px; border-radius: var(--gc-r); background: var(--gc-surface); border: 1px solid var(--gc-line-soft); } .gceo-game-center .gc-badge b { font-family: var(--gc-display); font-weight: 600; font-size: 15px; letter-spacing: .04em; color: var(--gc-white); } .gceo-game-center .gc-badge-ico { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--gc-faint); color: var(--gc-faint); } .gceo-game-center .gc-badge-ico .gc-ic { width: 30px; height: 30px; vertical-align: 0; color: inherit; } .gceo-game-center .gc-badge.on { border-color: var(--gc-line); } .gceo-game-center .gc-badge.on .gc-badge-ico { border: 1px solid var(--gc-gold-fill); color: var(--gc-gold); box-shadow: inset 0 0 0 4px var(--gc-surface), inset 0 0 0 5px var(--gc-line); background: radial-gradient(circle at 35% 30%, rgba(207, 161, 90, .22), transparent 70%); } .gceo-game-center .gc-badge:not(.on) b { color: var(--gc-muted); } .gceo-game-center .gc-badge small { color: var(--gc-muted); font-size: 12.5px; } /* ---------- Toasts & modal ---------- */ .gceo-game-center .gc-toasts { position: fixed; z-index: 2147483000; left: 50%; bottom: 96px; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; } .gceo-game-center .gc-toast { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; background: #1c1b19; color: #efe8da; border: 1px solid var(--gc-line); padding: 11px 18px; border-radius: 4px; font-size: 14px; box-shadow: var(--gc-shadow); animation: gc-pop .3s ease; transition: opacity .4s, transform .4s; text-align: center; } .gceo-game-center .gc-toast .gc-ic { width: 17px; height: 17px; vertical-align: 0; } .gceo-game-center .gc-toast b { font-weight: 600; } .gceo-game-center .gc-toast.gold { border-color: #cfa15a; box-shadow: inset 0 0 0 3px #1d1c19, inset 0 0 0 4px rgba(207, 161, 90, .35), var(--gc-shadow); } .gceo-game-center .gc-toast.good { border-color: #2f9a74; border-left-width: 3px; } .gceo-game-center .gc-toast.good .gc-ic { color: #74d3ad; } .gceo-game-center .gc-toast.bad { border-color: #e58a7a; border-left-width: 3px; } .gceo-game-center .gc-toast.out { opacity: 0; transform: translateY(8px); } .gceo-game-center .gc-modal { position: fixed; inset: 0; z-index: 2147482000; background: rgba(5,5,5,.72); display: grid; place-items: center; padding: 16px; animation: gc-pop .2s ease; } .gceo-game-center .gc-modal-card { width: min(100%, 500px); max-height: 88vh; overflow: auto; background: var(--gc-surface); color: var(--gc-ink); border-radius: var(--gc-r); padding: 26px; display: grid; gap: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.55); border: 1px solid var(--gc-line); scrollbar-width: thin; scrollbar-color: #2d2b27 transparent; } .gceo-game-center .gc-modal-ico { justify-self: center; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--gc-gold-fill); box-shadow: inset 0 0 0 4px var(--gc-surface), inset 0 0 0 5px var(--gc-line); color: var(--gc-gold); font-size: 28px; line-height: 1; } .gceo-game-center .gc-modal-ico .gc-ic { width: 26px; height: 26px; vertical-align: 0; } .gceo-game-center .gc-modal-card h3 { font-family: var(--gc-display); font-weight: 600; letter-spacing: .04em; font-size: 22px; text-align: center; color: var(--gc-white); } .gceo-game-center .gc-modal-body { display: grid; gap: 8px; } .gceo-game-center .gc-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 4px; } /* ---------- Shared game furniture ---------- */ .gceo-game-center .gc-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; } .gceo-game-center .gc-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; } .gceo-game-center .gc-tile { background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 12px; display: grid; gap: 6px; text-align: left; color: var(--gc-ink); } .gceo-game-center button.gc-tile:hover:not(:disabled) { border-color: var(--gc-gold-fill); } .gceo-game-center .gc-tile.on { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .gc-log { max-height: 180px; overflow: auto; display: grid; gap: 4px; font-size: 13.5px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #2d2b27 transparent; } .gceo-game-center .gc-log > div { padding: 6px 10px; border-radius: 4px; background: var(--gc-surface-2); border-left: 2px solid var(--gc-line-soft); } .gceo-game-center .gc-log .good { background: var(--gc-emerald-soft); border-left-color: var(--gc-emerald); } .gceo-game-center .gc-log .bad { background: var(--gc-risk-soft); border-left-color: var(--gc-risk); } .gceo-game-center .gc-log .warn { background: var(--gc-warn-soft); border-left-color: var(--gc-warn); } .gceo-game-center .gc-float { position: absolute; pointer-events: none; font-weight: 700; animation: gc-float 1.1s ease forwards; } @keyframes gc-float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-34px); } } @media (prefers-reduced-motion: reduce) { .gceo-game-center *, .gceo-game-center *::before, .gceo-game-center *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } .gceo-game-center .gc-view:focus { outline: none; } .gceo-game-center input[type="range"] { accent-color: #cfa15a; } /* ---------- CEO Playbook ---------- */ .gceo-game-center .gc-modal.gc-wide .gc-modal-card { width: min(100%, 760px); text-align: left; } .gceo-game-center .gc-pb { display: grid; gap: 10px; font-size: 14.5px; } .gceo-game-center .gc-pb h4 { font-family: var(--gc-display); font-weight: 600; letter-spacing: .04em; font-size: 16px; margin: 10px 0 0; display: flex; align-items: center; gap: 10px; } .gceo-game-center .gc-pb h4 .gc-ic { width: 17px; height: 17px; vertical-align: 0; } .gceo-game-center .gc-pb-goal { display: flex; gap: 10px; align-items: flex-start; background: var(--gc-gold-soft); border: 1px solid var(--gc-line); border-radius: 4px; padding: 12px 14px; } .gceo-game-center .gc-pb-goal .gc-ic { margin-top: 2px; } .gceo-game-center .gc-pb-steps { margin: 0; padding-left: 1.5em; display: grid; gap: 8px; } .gceo-game-center .gc-pb-steps li::marker { font-weight: 600; color: var(--gc-gold); } .gceo-game-center .gc-pb-steps b { display: block; color: var(--gc-white); font-weight: 600; } .gceo-game-center .gc-pb-real { display: grid; gap: 8px; } .gceo-game-center .gc-pb-real > div { display: grid; gap: 2px; background: var(--gc-emerald-soft); border-left: 2px solid var(--gc-emerald); border-radius: 0 4px 4px 0; padding: 10px 14px; } .gceo-game-center .gc-pb-real b { color: var(--gc-emerald-ink); font-weight: 600; } .gceo-game-center .gc-pb-item summary { cursor: pointer; font-size: 15.5px; min-height: 36px; display: flex; gap: 12px; align-items: center; list-style: none; } .gceo-game-center .gc-pb-item summary::-webkit-details-marker { display: none; } .gceo-game-center .gc-pb-item summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--gc-gold); border-bottom: 1.5px solid var(--gc-gold); transform: rotate(45deg); transition: transform .2s; flex: none; } .gceo-game-center .gc-pb-item[open] summary::after { transform: rotate(-135deg); } .gceo-game-center .gc-pb-item summary b { font-weight: 600; color: var(--gc-white); } .gceo-game-center .gc-pb-item[open] summary { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--gc-line-soft); } .gceo-game-center .gc-card-body { display: flex; flex-direction: column; } .gceo-game-center .gc-card-foot { margin-top: auto; } .gceo-game-center .gc-card-meta { margin-bottom: 6px; } .gceo-game-center .gc-panel > .gc-btn { justify-self: start; } .gceo-game-center .gc-panel > .gc-btn.danger { background: transparent; color: var(--gc-risk); border-color: var(--gc-risk); } .gceo-game-center .gc-panel > .gc-btn.danger:hover:not(:disabled) { background: var(--gc-risk-soft); } /* Lobby: only the recommended card gets a filled amber button; the rest stay quiet outlines. */ .gceo-game-center .gc-btn.gc-play { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 600; color: var(--gc-white); border-color: rgba(207, 161, 90, .5); } .gceo-game-center .gc-btn.gc-play:hover:not(:disabled) { background: var(--gc-gold-fill); border-color: var(--gc-gold-fill); color: var(--gc-on-gold); } .gceo-game-center .gc-btn.gc-play:hover:not(:disabled) .gc-ic { color: var(--gc-on-gold); } /* Stat tiles: words never break mid-word (DREAMER, CEO EMPIRE) */ .gceo-game-center .gc-stat-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .gceo-game-center .gc-stat-tiles b { overflow-wrap: normal; word-break: keep-all; } .gceo-game-center .gc-stat-tiles > div:first-child b { font-size: 19px; letter-spacing: .05em; } /* Playbook "real-world lesson": quiet dark notes with an amber hairline, not big emerald blocks */ .gceo-game-center .gc-pb-real > div { background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-left: 2px solid var(--gc-gold-fill); border-radius: 0 4px 4px 0; } .gceo-game-center .gc-pb-real b { color: var(--gc-white); } .gceo-game-center .gc-pb-real span { color: var(--gc-muted); } /* Achievements: two per row on phones */ .gceo-game-center .gc-badges { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); } @container (max-width: 520px) { .gceo-game-center .gc-badge { padding: 16px 10px; gap: 6px; } .gceo-game-center .gc-badge-ico { width: 56px; height: 56px; } .gceo-game-center .gc-badge-ico .gc-ic { width: 24px; height: 24px; } .gceo-game-center .gc-badge b { font-size: 13.5px; } .gceo-game-center .gc-badge small { font-size: 12px; } } /* Mapped emoji in game headings become thin amber icons (core iconizeHeads) */ .gceo-game-center .gc-has-ic { display: flex; align-items: center; gap: 10px; } .gceo-game-center .gc-head-ic { width: 1.05em; height: 1.05em; vertical-align: 0; color: var(--gc-gold); } /* Shared "selected / active" state inside games: amber, not green */ .gceo-game-center .gc-stage .gc-btn.on:not(.primary) { background: var(--gc-gold-soft); border-color: var(--gc-gold-fill); color: var(--gc-white); } /* Lobby sections */ .gceo-game-center .gc-group { display: grid; gap: 16px; margin-top: 8px; } .gceo-game-center .gc-group + .gc-group { margin-top: 28px; } .gceo-game-center .gc-group-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--gc-line, rgba(207,161,90,.25)); } .gceo-game-center .gc-group-head .gc-ring { width: 44px; height: 44px; flex: none; } .gceo-game-center .gc-group-title { margin: 0; font-family: var(--gc-display, Cinzel, serif); font-size: 1.15rem; letter-spacing: .06em; } .gceo-game-center .gc-group-head p { margin: 2px 0 0; font-size: .85rem; } /* GAME 01 — CEO Startup Tycoon · all rules scoped to .gceo-game-center .g-01 */ /* ---------- setup ---------- */ .gceo-game-center .g-01 .t-setup { display: grid; gap: 14px; } .gceo-game-center .g-01 .t-setup-head { display: grid; gap: 4px; } .gceo-game-center .g-01 .t-h { font-family: var(--gc-display); font-size: clamp(19px, 2.6vw, 24px); } .gceo-game-center .g-01 .t-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; } .gceo-game-center .g-01 .t-type { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; padding: 14px; border-radius: 18px; border: 1.5px solid var(--gc-line); background: var(--gc-surface); box-shadow: var(--gc-shadow); transition: transform .15s ease, border-color .15s; min-height: 44px; } .gceo-game-center .g-01 .t-type:hover { transform: translateY(-2px); border-color: var(--gc-gold-fill); } .gceo-game-center .g-01 .t-type-art { width: 64px; height: 64px; display: grid; place-items: center; font-size: 36px; border-radius: 16px; background: radial-gradient(90% 100% at 30% 10%, color-mix(in srgb, var(--gc-emerald) 45%, transparent), transparent 75%), #111110; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gc-gold-fill) 70%, transparent); } .gceo-game-center .g-01 .t-type-body { display: grid; gap: 4px; min-width: 0; } .gceo-game-center .g-01 .t-type-body b { font-family: var(--gc-display); font-size: 17px; } .gceo-game-center .g-01 .t-type-body > small { color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-01 .t-type-stats { display: flex; flex-wrap: wrap; gap: 4px; } .gceo-game-center .g-01 .t-type-stats span { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); } .gceo-game-center .g-01 .t-type-body em { font-style: normal; font-size: 12.5px; color: var(--gc-muted); line-height: 1.4; } /* ---------- dashboard ---------- */ .gceo-game-center .g-01 .t-game { display: grid; gap: 12px; } .gceo-game-center .g-01 .t-dash { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: stretch; } .gceo-game-center .g-01 .t-day { display: grid; justify-items: center; align-content: center; padding: 6px 16px; border-radius: 14px; background: #111110; color: #f4eee1; box-shadow: inset 0 0 0 2px var(--gc-gold-fill); min-width: 86px; } .gceo-game-center .g-01 .t-day small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-gold-fill); font-weight: 800; } .gceo-game-center .g-01 .t-day b { font-family: var(--gc-display); font-size: 30px; line-height: 1; } .gceo-game-center .g-01 .t-day span { font-size: 11.5px; opacity: .8; } .gceo-game-center .g-01 .t-chips { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); } .gceo-game-center .g-01 .t-chips .gc-res { position: relative; } .gceo-game-center .g-01 .t-sub { font-size: 11px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-01 .t-floater { right: 8px; top: -6px; font-size: 13px; padding: 2px 8px; border-radius: 999px; } .gceo-game-center .g-01 .t-floater.up { background: var(--gc-emerald); color: #fff; } .gceo-game-center .g-01 .t-floater.down { background: var(--gc-risk); color: #fff; } .gceo-game-center .g-01 .t-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 14px; padding: 10px 14px; } /* ---------- main layout ---------- */ .gceo-game-center .g-01 .t-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; align-items: start; } .gceo-game-center .g-01 .t-world-col { display: grid; gap: 10px; } /* the business world: a little plaza of buildings */ .gceo-game-center .g-01 .t-world { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 46px 12px 14px; border-radius: 20px; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--gc-emerald) 22%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(180deg, color-mix(in srgb, var(--gc-emerald) 16%, var(--gc-surface)), color-mix(in srgb, var(--gc-emerald) 8%, var(--gc-surface))); border: 1px solid var(--gc-line); box-shadow: var(--gc-shadow); } .gceo-game-center .g-01 .t-sign { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; font-family: var(--gc-display); font-weight: 700; font-size: 14px; padding: 4px 14px; border-radius: 8px; background: #111110; color: #f4eee1; box-shadow: inset 0 0 0 1.5px var(--gc-gold-fill); } .gceo-game-center .g-01 .t-sign small { font-family: var(--gc-body); font-size: 10px; color: var(--gc-gold-fill); letter-spacing: .08em; text-transform: uppercase; margin-left: 4px; } .gceo-game-center .g-01 .t-area { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; padding: 14px 6px 10px; min-height: 118px; border-radius: 16px; border: 2px solid var(--gc-line); background: var(--gc-surface); box-shadow: 0 3px 0 color-mix(in srgb, var(--gc-ink) 14%, transparent); transition: transform .12s ease, border-color .15s, box-shadow .15s; overflow: hidden; } .gceo-game-center .g-01 .t-area::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--t-roof, var(--gc-emerald)); } .gceo-game-center .g-01 .t-area-office { --t-roof: #3d5a80; } .gceo-game-center .g-01 .t-area-store { --t-roof: #0f5c45; } .gceo-game-center .g-01 .t-area-marketing { --t-roof: #c0392b; } .gceo-game-center .g-01 .t-area-customers { --t-roof: #8e44ad; } .gceo-game-center .g-01 .t-area-bank { --t-roof: #b8860b; } .gceo-game-center .g-01 .t-area-upgrades { --t-roof: #2c7a7b; } .gceo-game-center .g-01 .t-area:hover { transform: translateY(-2px); border-color: var(--gc-gold-fill); } .gceo-game-center .g-01 .t-area.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-gold-fill) 35%, transparent), 0 3px 0 color-mix(in srgb, var(--gc-ink) 14%, transparent); } .gceo-game-center .g-01 .t-area-art { font-size: 40px; line-height: 1.15; filter: drop-shadow(0 3px 2px rgba(0,0,0,.18)); } .gceo-game-center .g-01 .t-area b { font-family: var(--gc-display); font-size: 15px; } .gceo-game-center .g-01 .t-area small { font-size: 11.5px; font-weight: 600; color: var(--gc-muted); line-height: 1.3; overflow-wrap: anywhere; } .gceo-game-center .g-01 .t-alert { position: absolute; top: 12px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gc-risk); color: #fff; font-weight: 800; font-size: 13px; animation: g01-pulse 1.4s ease-in-out infinite; } @keyframes g01-pulse { 50% { transform: scale(1.18); } } /* street of customers */ .gceo-game-center .g-01 .t-street-wrap { display: grid; gap: 6px; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 16px; padding: 10px 12px; } .gceo-game-center .g-01 .t-street-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 13.5px; } .gceo-game-center .g-01 .t-street-note { font-size: 12.5px; } .gceo-game-center .g-01 .t-street { position: relative; display: flex; flex-wrap: wrap; gap: 4px; align-items: end; min-height: 64px; padding: 8px 8px 14px; border-radius: 12px; background: linear-gradient(180deg, transparent 0 70%, color-mix(in srgb, var(--gc-ink) 10%, transparent) 70%), var(--gc-surface-2); overflow: hidden; } .gceo-game-center .g-01 .t-street::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; border-top: 2px dashed color-mix(in srgb, var(--gc-gold-fill) 70%, transparent); } .gceo-game-center .g-01 .t-street-empty { font-size: 13px; color: var(--gc-muted); align-self: center; } .gceo-game-center .g-01 .t-cust { position: relative; display: grid; justify-items: center; width: 38px; animation: g01-walk .5s ease both; } .gceo-game-center .g-01 .t-cface { font-size: 26px; line-height: 1; } .gceo-game-center .g-01 .t-ctag { font-size: 13px; line-height: 1; margin-top: 2px; } .gceo-game-center .g-01 .t-cust.price, .gceo-game-center .g-01 .t-cust.out, .gceo-game-center .g-01 .t-cust.full, .gceo-game-center .g-01 .t-cust.line { opacity: .62; } .gceo-game-center .g-01 .t-cust.out .t-cface, .gceo-game-center .g-01 .t-cust.full .t-cface, .gceo-game-center .g-01 .t-cust.line .t-cface { filter: grayscale(.8); } @keyframes g01-walk { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } } .gceo-game-center .g-01 .t-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .gceo-game-center .g-01 .t-daybtn { flex: 1 1 220px; } .gceo-game-center .g-01 .t-daybtn small { font-weight: 600; opacity: .75; } .gceo-game-center .g-01 .t-auto.on { background: var(--gc-gold-soft); border-color: var(--gc-gold-fill); color: var(--gc-white); } .gceo-game-center .g-01 .t-ctrl-note { font-size: 12.5px; flex-basis: 100%; } /* ---------- area panel ---------- */ .gceo-game-center .g-01 .t-panel-col { position: sticky; top: 8px; } .gceo-game-center .g-01 .t-area-panel { gap: 10px; } .gceo-game-center .g-01 .t-panel-head { display: flex; gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--gc-line); } .gceo-game-center .g-01 .t-panel-ico { font-size: 28px; } .gceo-game-center .g-01 .t-panel-head .gc-panel-title { font-size: 20px; } .gceo-game-center .g-01 .t-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 3px 0; } .gceo-game-center .g-01 .t-kv span { color: var(--gc-muted); } .gceo-game-center .g-01 .t-kv b { font-variant-numeric: tabular-nums; text-align: right; } .gceo-game-center .g-01 .t-kv.t-total { border-top: 1px solid var(--gc-line); padding-top: 6px; } .gceo-game-center .g-01 .t-kv.t-total span { color: var(--gc-ink); } .gceo-game-center .g-01 .t-sub-h { font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-gold); margin-top: 4px; } .gceo-game-center .g-01 .t-note { font-size: 12.5px; color: var(--gc-muted); background: var(--gc-surface-2); border-radius: 10px; padding: 8px 10px; } .gceo-game-center .g-01 .t-note.warn { background: var(--gc-warn-soft); color: var(--gc-warn); font-weight: 600; } .gceo-game-center .g-01 .t-bad { color: var(--gc-risk); } .gceo-game-center .g-01 .t-lbl { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted); } /* store */ .gceo-game-center .g-01 .t-product { display: flex; gap: 12px; align-items: center; } .gceo-game-center .g-01 .t-pico { font-size: 34px; width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); } .gceo-game-center .g-01 .t-product small { display: block; font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-01 .t-price-box { display: grid; gap: 6px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 14px; padding: 10px 12px; } .gceo-game-center .g-01 .t-price { display: flex; align-items: center; gap: 12px; } .gceo-game-center .g-01 .t-price output { font-family: var(--gc-display); font-size: 30px; font-weight: 700; min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; } .gceo-game-center .g-01 .t-pm { width: 48px; height: 48px; padding: 0; font-size: 24px; } .gceo-game-center .g-01 .t-price-notes { display: grid; gap: 0; } .gceo-game-center .g-01 .t-price-notes small { font-size: 11.5px; } .gceo-game-center .g-01 .t-shelf-wrap { display: grid; gap: 8px; } .gceo-game-center .g-01 .t-shelf { min-height: 64px; padding: 10px 10px 14px; border-radius: 12px; background: linear-gradient(180deg, transparent calc(100% - 8px), #8a5a2b calc(100% - 8px)), color-mix(in srgb, #c89b63 18%, var(--gc-surface-2)); border: 1px solid var(--gc-line); display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-end; } .gceo-game-center .g-01 .t-items { font-size: 19px; line-height: 1.25; letter-spacing: -2px; word-break: break-all; } .gceo-game-center .g-01 .t-shelf.empty { align-content: center; } .gceo-game-center .g-01 .t-empty { font-size: 13px; font-weight: 600; color: var(--gc-risk); } .gceo-game-center .g-01 .t-slot { font-size: 20px; } .gceo-game-center .g-01 .t-slot.used { opacity: .25; filter: grayscale(1); } .gceo-game-center .g-01 .t-batches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gceo-game-center .g-01 .t-batch { flex-direction: column; gap: 0; border-radius: 14px; padding: 8px 6px; } .gceo-game-center .g-01 .t-batch small { font-size: 11.5px; font-weight: 600; color: var(--gc-muted); } /* office */ .gceo-game-center .g-01 .t-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .gceo-game-center .g-01 .t-emp { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 8px 6px; border-radius: 12px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); } .gceo-game-center .g-01 .t-emp > span { font-size: 30px; } .gceo-game-center .g-01 .t-emp small { font-size: 11px; color: var(--gc-muted); line-height: 1.2; } .gceo-game-center .g-01 .t-emp.you { background: var(--gc-gold-soft); border-color: var(--gc-gold-fill); } .gceo-game-center .g-01 .t-emp .gc-btn { margin-top: 4px; min-height: 44px; } .gceo-game-center .g-01 .t-hire small, .gceo-game-center .g-01 .t-camp small, .gceo-game-center .g-01 .t-up small, .gceo-game-center .g-01 .t-fund small, .gceo-game-center .g-01 .t-loan small { font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-01 .gc-tile .gc-btn { justify-self: start; min-height: 44px; } /* marketing / upgrades */ .gceo-game-center .g-01 .t-camps, .gceo-game-center .g-01 .t-ups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; } .gceo-game-center .g-01 .t-camp.on { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .g-01 .t-dots { display: inline-flex; gap: 4px; } .gceo-game-center .g-01 .t-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--gc-gold); } .gceo-game-center .g-01 .t-dots i.on { background: var(--gc-gold-fill); border-color: var(--gc-gold-fill); } /* customers */ .gceo-game-center .g-01 .t-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-01 .t-funnel > div { display: grid; justify-items: center; text-align: center; padding: 8px 4px; border-radius: 12px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); } .gceo-game-center .g-01 .t-funnel b { font-size: 20px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-01 .t-funnel small { font-size: 11px; color: var(--gc-muted); line-height: 1.25; } .gceo-game-center .g-01 .t-reviews { display: grid; gap: 6px; } .gceo-game-center .g-01 .t-review { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); font-size: 13px; } .gceo-game-center .g-01 .t-review.good { border-color: color-mix(in srgb, var(--gc-emerald) 45%, var(--gc-line)); } .gceo-game-center .g-01 .t-review.bad { border-color: color-mix(in srgb, var(--gc-risk) 45%, var(--gc-line)); } .gceo-game-center .g-01 .t-rface { font-size: 26px; line-height: 1; } .gceo-game-center .g-01 .t-review p { color: var(--gc-muted); } /* bank */ .gceo-game-center .g-01 .t-bank-cash { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 12px 14px; border-radius: 14px; background: #111110; color: #f4eee1; box-shadow: inset 0 0 0 2px var(--gc-gold-fill); } .gceo-game-center .g-01 .t-bank-cash small { grid-column: 1 / -1; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-gold-fill); font-weight: 800; } .gceo-game-center .g-01 .t-bank-cash b { font-family: var(--gc-display); font-size: 28px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-01 .t-pl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-01 .t-pl > div { display: grid; padding: 8px 10px; border-radius: 12px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); min-width: 0; } .gceo-game-center .g-01 .t-pl small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gc-muted); } .gceo-game-center .g-01 .t-pl b { font-size: 18px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-01 .t-pl span { font-size: 11.5px; color: var(--gc-muted); } .gceo-game-center .g-01 .t-pl .pos { border-color: color-mix(in srgb, var(--gc-emerald) 50%, var(--gc-line)); } .gceo-game-center .g-01 .t-pl .neg { border-color: color-mix(in srgb, var(--gc-risk) 50%, var(--gc-line)); } .gceo-game-center .g-01 .t-det { font-size: 13px; } .gceo-game-center .g-01 .t-det summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; } .gceo-game-center .g-01 .t-logp .gc-log { max-height: 210px; } /* ---------- responsive ---------- */ @container (max-width: 860px) { .gceo-game-center .g-01 .t-main { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-01 .t-panel-col { position: static; } .gceo-game-center .g-01 .t-goals { grid-template-columns: minmax(0, 1fr); gap: 6px; } /* phone order: map → chosen area → customers → sticky day controls */ .gceo-game-center .g-01 .t-world-col { display: contents; } .gceo-game-center .g-01 .t-main { gap: 10px; } .gceo-game-center .g-01 .t-world { order: 1; } .gceo-game-center .g-01 .t-panel-col { order: 2; } .gceo-game-center .g-01 .t-street-wrap { order: 3; } .gceo-game-center .g-01 .t-controls { order: 4; position: sticky; bottom: 8px; z-index: 5; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--gc-surface) 92%, transparent); border: 1px solid var(--gc-line); box-shadow: var(--gc-shadow); backdrop-filter: blur(6px); } .gceo-game-center .g-01 .t-ctrl-note { display: none; } } @container (max-width: 560px) { .gceo-game-center .g-01 .t-dash { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-01 .t-day { grid-auto-flow: column; justify-content: center; gap: 8px; align-items: baseline; padding: 6px 12px; } .gceo-game-center .g-01 .t-day b { font-size: 22px; } .gceo-game-center .g-01 .t-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-01 .t-chips .gc-res { padding: 6px 8px; gap: 0; } .gceo-game-center .g-01 .t-chips .gc-res-ico { display: none; } .gceo-game-center .g-01 .t-chips .gc-res small { font-size: 9.5px; letter-spacing: .03em; } .gceo-game-center .g-01 .t-chips .gc-res b { font-size: 14.5px; } .gceo-game-center .g-01 .t-chips .t-sub { display: none; } .gceo-game-center .g-01 .t-auto { padding: 10px 12px; } .gceo-game-center .g-01 .t-daybtn { flex-basis: 150px; white-space: nowrap; } .gceo-game-center .g-01 .t-daybtn small { display: none; } .gceo-game-center .g-01 .t-world { gap: 6px; padding: 44px 8px 10px; } .gceo-game-center .g-01 .t-area { min-height: 96px; padding: 12px 3px 8px; } .gceo-game-center .g-01 .t-area-art { font-size: 30px; } .gceo-game-center .g-01 .t-area b { font-size: 12.5px; } .gceo-game-center .g-01 .t-area small { font-size: 10.5px; } .gceo-game-center .g-01 .t-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-01 .t-pl b { font-size: 15px; } .gceo-game-center .g-01 .t-cust { width: 32px; } .gceo-game-center .g-01 .t-cface { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .gceo-game-center .g-01 .t-alert { animation: none; } } /* GAME 02 — CEO CITY BUILDER */ .gceo-game-center .g-02 { --g02-road: #3b3b37; --g02-lot: color-mix(in srgb, var(--gc-emerald) 16%, var(--gc-surface)); --g02-grass: color-mix(in srgb, #3f8f4f 30%, var(--gc-surface)); } .gceo-game-center .g-02 .g02-small { font-size: 12.5px; } .gceo-game-center .g-02 .g02-hud { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } .gceo-game-center .g-02 .g02-prog { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .gceo-game-center .g-02 .g02-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; } .gceo-game-center .g-02 .g02-side { display: grid; gap: 12px; } /* board */ .gceo-game-center .g-02 .g02-boardwrap { background: linear-gradient(180deg, color-mix(in srgb, #5aa0d0 18%, var(--gc-surface)), var(--gc-surface) 90px); } .gceo-game-center .g-02 .g02-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 14px; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.12) 14px 22px) var(--g02-road); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 50%; background-color: var(--g02-road); box-shadow: inset 0 0 0 3px #2a2a27; } .gceo-game-center .g-02 .g02-tile { position: relative; aspect-ratio: 1 / 1.04; min-height: 48px; min-width: 0; border-radius: 10px; border: 2px solid transparent; display: grid; place-items: center; align-content: center; gap: 0; padding: 4px 2px; text-align: center; overflow: hidden; transition: transform .12s ease, box-shadow .15s; color: var(--gc-ink); } .gceo-game-center .g-02 .g02-tile small { font-size: 10.5px; font-weight: 700; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; } .gceo-game-center .g-02 .g02-tile:hover { transform: translateY(-2px); } .gceo-game-center .g-02 .g02-tile.sel { border-color: var(--gc-gold-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-gold-fill) 45%, transparent); z-index: 1; } .gceo-game-center .g-02 .g02-tile.locked { background: radial-gradient(circle at 30% 30%, color-mix(in srgb, #2e7d3c 55%, var(--gc-surface)), color-mix(in srgb, #1f5a2a 60%, var(--gc-surface))); } .gceo-game-center .g-02 .g02-tile.locked .g02-emo { font-size: clamp(18px, 4.6cqi, 30px); opacity: .9; } .gceo-game-center .g-02 .g02-tile.locked small { color: #fff; background: rgba(0,0,0,.45); border-radius: 6px; } .gceo-game-center .g-02 .g02-tile.empty { background: var(--g02-grass); border: 2px dashed color-mix(in srgb, var(--gc-emerald) 55%, transparent); } .gceo-game-center .g-02 .g02-plus { font-size: clamp(18px, 4cqi, 28px); font-weight: 800; color: var(--gc-emerald); line-height: 1; } .gceo-game-center .g-02 .g02-tile.empty small { color: var(--gc-emerald-ink); } .gceo-game-center .g-02 .g02-tile.built { background: linear-gradient(180deg, var(--gc-surface), var(--g02-lot)); box-shadow: 0 3px 0 rgba(0,0,0,.35); } .gceo-game-center .g-02 .g02-emo { font-size: clamp(22px, 5.4cqi, 40px); line-height: 1.05; } .gceo-game-center .g-02 .g02-tile.built .g02-emo { filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); } .gceo-game-center .g-02 .g02-tile.fresh .g02-emo { animation: g02-pop .5s cubic-bezier(.3,1.6,.5,1); } @keyframes g02-pop { from { transform: translateY(14px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } .gceo-game-center .g-02 .g02-pips { font-size: 10px; letter-spacing: 1px; color: #c48f2a; line-height: 1; } .gceo-game-center .g-02 .g02-pips span { color: color-mix(in srgb, var(--gc-ink) 20%, transparent); } .gceo-game-center .g-02 .g02-tile.dmg { background: linear-gradient(180deg, var(--gc-risk-soft), var(--gc-surface-2)); } .gceo-game-center .g-02 .g02-tile.dmg .g02-emo { filter: grayscale(.8); opacity: .65; } .gceo-game-center .g-02 .g02-dmg { position: absolute; top: 2px; right: 3px; font-size: 15px; animation: g02-shake 1.4s ease-in-out infinite; } @keyframes g02-shake { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } } .gceo-game-center .g-02 .g02-tile.t-park { background: var(--g02-grass); } .gceo-game-center .g-02 .g02-checklist { display: flex; flex-wrap: wrap; gap: 3px; } .gceo-game-center .g-02 .g02-chk { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: 16px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); filter: grayscale(1); opacity: .45; } .gceo-game-center .g-02 .g02-chk.on { filter: none; opacity: 1; background: var(--gc-gold-soft); border-color: var(--gc-gold-fill); } /* detail & build menu */ .gceo-game-center .g-02 .g02-hint { display: flex; gap: 12px; align-items: center; } .gceo-game-center .g-02 .g02-hint > span { font-size: 30px; } .gceo-game-center .g-02 .g02-menu { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; padding-right: 2px; } .gceo-game-center .g-02 .g02-opt { flex: none; display: flex; gap: 10px; align-items: center; width: 100%; min-height: 54px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--gc-line); background: var(--gc-surface-2); } .gceo-game-center .g-02 .g02-opt:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-02 .g02-opt.no { opacity: .62; } .gceo-game-center .g-02 .g02-opt.no:hover { border-color: var(--gc-line); } .gceo-game-center .g-02 .g02-opt-ico { font-size: 28px; flex: none; width: 36px; text-align: center; } .gceo-game-center .g-02 .g02-opt-txt { display: grid; gap: 1px; min-width: 0; } .gceo-game-center .g-02 .g02-opt-txt b { font-size: 14px; } .gceo-game-center .g-02 .g02-opt-txt b .gc-pill { font-size: 10.5px; padding: 1px 7px; vertical-align: 1px; } .gceo-game-center .g-02 .g02-opt-txt small { font-size: 12px; color: var(--gc-muted); } .gceo-game-center .g-02 .g02-opt-cost em { font-style: normal; font-weight: 700; color: var(--gc-warn); } .gceo-game-center .g-02 .g02-info-head { display: flex; gap: 12px; align-items: center; } .gceo-game-center .g-02 .g02-big { font-size: 44px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: var(--g02-lot); flex: none; } .gceo-game-center .g-02 .g02-actions .gc-btn { flex: 1 1 auto; } .gceo-game-center .g-02 .g02-warn { background: var(--gc-risk-soft); color: var(--gc-risk); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; } /* engine */ .gceo-game-center .g-02 .g02-flow { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1.5px solid transparent; } .gceo-game-center .g-02 .g02-flow.bottle { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-02 .g02-flow-ico { font-size: 22px; flex: none; } .gceo-game-center .g-02 .g02-flow-main { flex: 1; display: grid; gap: 4px; min-width: 0; font-size: 13.5px; } .gceo-game-center .g-02 .g02-flow-main b { font-variant-numeric: tabular-nums; } .gceo-game-center .g-02 .g02-flow .gc-pill { font-size: 10.5px; padding: 1px 7px; } .gceo-game-center .g-02 .g02-forecast { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; } .gceo-game-center .g-02 .pos { color: var(--gc-emerald); } .gceo-game-center .g-02 .neg { color: var(--gc-risk); } .gceo-game-center .g-02 .g02-team { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; font-size: 14px; } .gceo-game-center .g-02 .g02-team .gc-row { gap: 6px; } .gceo-game-center .g-02 .g02-team .gc-btn.small { min-height: 44px; } .gceo-game-center .g-02 .g02-next { background: var(--gc-gold-soft); color: var(--gc-ink); border-radius: 10px; padding: 8px 10px; font-size: 13px; } .gceo-game-center .g-02 .g02-floattxt { right: 10px; top: -6px; font-size: 14px; } .gceo-game-center .g-02 .g02-floattxt.up { color: var(--gc-emerald); } .gceo-game-center .g-02 .g02-floattxt.down { color: var(--gc-risk); } @container (max-width: 760px) { .gceo-game-center .g-02 .g02-main { grid-template-columns: 1fr; } .gceo-game-center .g-02 .g02-prog { grid-template-columns: 1fr; } .gceo-game-center .g-02 .g02-menu { max-height: none; } } @container (max-width: 480px) { .gceo-game-center .g-02 .g02-board { gap: 4px; padding: 4px; } .gceo-game-center .g-02 .g02-tile small { font-size: 8.5px; } .gceo-game-center .g-02 .g02-tile.built small, .gceo-game-center .g-02 .g02-tile.empty small { display: none; } .gceo-game-center .g-02 .g02-hud > :last-child { grid-column: 1 / -1; } .gceo-game-center .g-02 .g02-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-02 .gc-res b { font-size: 15px; } } /* monthly report (popup content is wrapped in a .g-02 element) */ .gceo-game-center .g-02.g02-report { display: grid; gap: 10px; font-size: 14px; } .gceo-game-center .g-02 .g02-rbars { display: grid; gap: 6px; } .gceo-game-center .g-02 .g02-rbar { display: grid; grid-template-columns: 9.5em 1fr 3.6em; gap: 8px; align-items: center; font-size: 13px; padding: 3px 6px; border-radius: 8px; } .gceo-game-center .g-02 .g02-rbar b { text-align: right; font-variant-numeric: tabular-nums; } .gceo-game-center .g-02 .g02-rbar.bottle { background: var(--gc-risk-soft); font-weight: 700; } .gceo-game-center .g-02 .g02-rtrack { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--gc-ink) 12%, transparent); overflow: hidden; } .gceo-game-center .g-02 .g02-rtrack i { display: block; height: 100%; background: var(--gc-emerald); border-radius: inherit; animation: g02-grow .7s ease; transform-origin: left; } .gceo-game-center .g-02 .g02-rbar.bottle .g02-rtrack i { background: var(--gc-risk); } @keyframes g02-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .gceo-game-center .g-02 .g02-lines { display: grid; border: 1px solid var(--gc-line); border-radius: 12px; overflow: hidden; } .gceo-game-center .g-02 .g02-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 13.5px; } .gceo-game-center .g-02 .g02-line:nth-child(odd) { background: var(--gc-surface-2); } .gceo-game-center .g-02 .g02-line b { font-variant-numeric: tabular-nums; white-space: nowrap; } .gceo-game-center .g-02 .g02-line.total { border-top: 2px solid var(--gc-line); font-weight: 800; background: var(--gc-surface); } .gceo-game-center .g-02 .g02-good { background: var(--gc-emerald-soft); border-radius: 10px; padding: 8px 10px; font-weight: 600; } .gceo-game-center .g-02 .g02-event { display: flex; gap: 10px; align-items: center; border-radius: 12px; padding: 10px; background: var(--gc-warn-soft); } .gceo-game-center .g-02 .g02-event.good { background: var(--gc-emerald-soft); } .gceo-game-center .g-02 .g02-event > span { font-size: 30px; } @container (max-width: 480px) { .gceo-game-center .g-02 .g02-rbar { grid-template-columns: 7.6em 1fr 3.4em; font-size: 12px; } } /* GAME 03 — CEO Marketplace. Every selector is scoped to .gceo-game-center .g-03 */ .gceo-game-center .g-03 .m3 { display: grid; gap: 12px; } .gceo-game-center .g-03 .m3-hud { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .gceo-game-center .g-03 .m3-news { background: var(--gc-surface); border: 1px dashed var(--gc-gold-fill); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14.5px; } .gceo-game-center .g-03 .m3-news-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-gold); margin-right: 6px; } .gceo-game-center .g-03 .m3-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; } @container (max-width: 860px) { .gceo-game-center .g-03 .m3-main { grid-template-columns: 1fr; } .gceo-game-center .g-03 .m3.is-open .m3-street { order: -1; } } /* ---------- product cards ---------- */ .gceo-game-center .g-03 .m3-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; } .gceo-game-center .g-03 .m3-prod { position: relative; display: grid; gap: 8px; align-content: start; background: var(--gc-surface-2); border: 1.5px solid var(--gc-line); border-radius: 14px; padding: 12px; } .gceo-game-center .g-03 .m3-prod.empty { border-color: #d28a1c; } .gceo-game-center .g-03 .m3-prod.locked { opacity: .6; border-style: dashed; } .gceo-game-center .g-03 .m3-prod.locked .m3-ico { filter: grayscale(1); } .gceo-game-center .g-03 .m3-prod-top { display: flex; gap: 10px; align-items: center; } .gceo-game-center .g-03 .m3-prod-top > div { display: grid; min-width: 0; flex: 1; } .gceo-game-center .g-03 .m3-prod-top small { font-size: 12px; line-height: 1.35; } .gceo-game-center .g-03 .m3-ico { font-size: 30px; width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--gc-surface); border-radius: 12px; border: 1px solid var(--gc-line); } .gceo-game-center .g-03 .m3-price-row { display: flex; gap: 6px; align-items: center; } .gceo-game-center .g-03 .m3-step { width: 44px; min-width: 44px; padding: 0; font-size: 22px; } .gceo-game-center .g-03 .m3-price, .gceo-game-center .g-03 .m3-margin { display: grid; text-align: center; line-height: 1.15; } .gceo-game-center .g-03 .m3-price { flex: 1; } .gceo-game-center .g-03 .m3-price small, .gceo-game-center .g-03 .m3-margin small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gc-muted); } .gceo-game-center .g-03 .m3-price b { font-size: 22px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-03 .m3-margin { min-width: 64px; padding: 4px 8px; border-radius: 10px; background: var(--gc-surface); border: 1px solid var(--gc-line); } .gceo-game-center .g-03 .m3-margin b { font-size: 16px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-03 .m3-margin.good { background: var(--gc-emerald-soft); border-color: transparent; color: var(--gc-emerald-ink); } .gceo-game-center .g-03 .m3-margin.warn { background: var(--gc-warn-soft); border-color: transparent; color: var(--gc-warn); } .gceo-game-center .g-03 .m3-margin.bad { background: var(--gc-risk-soft); border-color: transparent; color: var(--gc-risk); } .gceo-game-center .g-03 .m3-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .gceo-game-center .g-03 .m3-presets .gc-btn { min-height: 44px; padding: 4px 4px; font-size: 11.5px; border-radius: 10px; line-height: 1.15; } .gceo-game-center .g-03 .m3-comp-line { font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-03 .m3-comp-line.warn { color: var(--gc-warn); font-weight: 600; } .gceo-game-center .g-03 .m3-stock { display: grid; gap: 4px; font-size: 13px; font-weight: 700; } .gceo-game-center .g-03 .m3-shelf { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--gc-ink) 12%, transparent); overflow: hidden; } .gceo-game-center .g-03 .m3-shelf i { display: block; height: 100%; background: linear-gradient(90deg, #b5651d, #e3b04b); transition: width .3s ease; } .gceo-game-center .g-03 .m3-prod.empty .m3-stock span { color: var(--gc-warn); } .gceo-game-center .g-03 .m3-buy { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .gceo-game-center .g-03 .m3-buy .gc-btn { min-height: 44px; padding: 6px 8px; font-size: 13px; } .gceo-game-center .g-03 .m3-buy .gc-btn span { font-weight: 600; opacity: .85; } .gceo-game-center .g-03 .m3-float { top: 10px; right: 14px; font-size: 16px; z-index: 2; } .gceo-game-center .g-03 .m3-float.good { color: var(--gc-emerald); } .gceo-game-center .g-03 .m3-float.bad { color: var(--gc-risk); } /* ---------- market street ---------- */ .gceo-game-center .g-03 .m3-street { position: sticky; top: 8px; } @container (max-width: 860px) { .gceo-game-center .g-03 .m3-street { position: static; } } .gceo-game-center .g-03 .m3-queue { display: flex; gap: 4px; align-items: center; min-height: 52px; padding: 6px 10px; border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--gc-surface-2) 0 22px, color-mix(in srgb, var(--gc-ink) 4%, var(--gc-surface-2)) 22px 44px); border: 1px solid var(--gc-line); } .gceo-game-center .g-03 .m3-q { font-size: 28px; line-height: 1; animation: m3-walk .2s ease-out; } .gceo-game-center .g-03 .m3-q.more { font-size: 13px; font-weight: 800; color: var(--gc-muted); padding-left: 4px; } .gceo-game-center .g-03 .m3-q-empty { font-size: 13px; } @keyframes m3-walk { from { transform: translateX(14px); } to { transform: none; } } .gceo-game-center .g-03 .m3-counter { min-height: 132px; display: grid; align-items: center; border-radius: 14px; padding: 12px; background: linear-gradient(180deg, color-mix(in srgb, #b5651d 14%, var(--gc-surface)), var(--gc-surface)); border: 1px solid var(--gc-line); border-bottom: 6px solid #b5651d; } .gceo-game-center .g-03 .m3-counter-empty { text-align: center; font-weight: 700; font-size: 18px; } .gceo-game-center .g-03 .m3-cust { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; animation: m3-arrive .18s ease-out; } @keyframes m3-arrive { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } } .gceo-game-center .g-03 .m3-face { font-size: 52px; line-height: 1; grid-row: 1 / 3; } .gceo-game-center .g-03 .m3-cust-info { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-03 .m3-want, .gceo-game-center .g-03 .m3-budget { font-size: 14px; font-weight: 700; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .gceo-game-center .g-03 .m3-bubble { position: relative; justify-self: start; background: var(--gc-surface); color: var(--gc-ink); border: 2px solid var(--gc-line); border-radius: 16px; padding: 8px 12px; font-weight: 700; font-size: 14.5px; animation: gc-pop .18s ease; } .gceo-game-center .g-03 .m3-bubble::before { content: ""; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; background: inherit; border-left: 2px solid; border-bottom: 2px solid; border-color: inherit; transform: translateY(-50%) rotate(45deg); } .gceo-game-center .g-03 .m3-bubble.good { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .g-03 .m3-bubble.bad { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-03 .m3-bubble.warn { border-color: #d28a1c; background: var(--gc-warn-soft); } .gceo-game-center .g-03 .m3-tally { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; } .gceo-game-center .g-03 .m3-tally b { font-variant-numeric: tabular-nums; } .gceo-game-center .g-03 .m3-comp { border: 1px solid var(--gc-line); border-radius: 12px; padding: 8px 10px; display: grid; gap: 6px; background: var(--gc-surface-2); } .gceo-game-center .g-03 .m3-comp-head { font-size: 14px; } .gceo-game-center .g-03 .m3-comp-items { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-03 .m3-comp-item { font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--gc-surface); border: 1px solid var(--gc-line); font-variant-numeric: tabular-nums; } .gceo-game-center .g-03 .m3-comp-item.sale { border-color: var(--gc-risk); color: var(--gc-risk); } .gceo-game-center .g-03 .m3-log { max-height: 150px; } /* ---------- action bar ---------- */ .gceo-game-center .g-03 .m3-actions { position: sticky; bottom: 8px; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 16px; background: var(--gc-surface); border: 1px solid var(--gc-line); box-shadow: var(--gc-shadow); } .gceo-game-center .g-03 .m3-actions:empty { display: none; } .gceo-game-center .g-03 .m3-act-note { font-size: 13.5px; font-weight: 600; } @container (max-width: 520px) { .gceo-game-center .g-03 .m3-actions .gc-btn.big { width: 100%; } .gceo-game-center .g-03 .m3-actions > .gc-row { width: 100%; } .gceo-game-center .g-03 .m3-actions > .gc-row > .gc-btn { flex: 1; } } /* ---------- day summary popup (card is tagged g-03 m3-modal) ---------- */ .gceo-game-center .g-03.m3-modal { width: min(100%, 720px); } .gceo-game-center .g-03 .m3-sum { display: grid; gap: 10px; } .gceo-game-center .g-03 .m3-sum .gc-res-bar { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .gceo-game-center .g-03 .m3-table-wrap { overflow-x: auto; border: 1px solid var(--gc-line); border-radius: 10px; } .gceo-game-center .g-03 .m3-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-03 .m3-table th, .gceo-game-center .g-03 .m3-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--gc-line); white-space: nowrap; } .gceo-game-center .g-03 .m3-table th:first-child { text-align: left; } .gceo-game-center .g-03 .m3-table thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gc-muted); } .gceo-game-center .g-03 .m3-table td.neg { color: var(--gc-risk); font-weight: 700; } .gceo-game-center .g-03 .m3-formula { font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-03 .m3-lesson { font-weight: 600; background: var(--gc-emerald-soft); border-radius: 10px; padding: 8px 12px; } .gceo-game-center .g-03 .m3-speed { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); } .gceo-game-center .g-03 .m3-speed .gc-btn { min-height: 40px; min-width: 56px; border-color: transparent; background: transparent; } .gceo-game-center .g-03 .m3-speed .gc-btn.on { background: var(--gc-gold-soft); border-color: var(--gc-gold-fill); color: var(--gc-white); } /* GAME 04 — Brand Studio. Every selector is scoped to .gceo-game-center .g-04 */ .gceo-game-center .g-04 { --g4-r: 14px; } .gceo-game-center .g-04 .g4-studio { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; align-items: start; } @container (max-width: 820px) { .gceo-game-center .g-04 .g4-studio { grid-template-columns: 1fr; } } .gceo-game-center .g-04 .g4-preview-panel { position: sticky; top: 8px; } @container (max-width: 820px) { .gceo-game-center .g-04 .g4-preview-panel { position: static; } } /* ---------- live preview ---------- */ .gceo-game-center .g-04 .g4-preview { display: grid; gap: 10px; --bfont: sans-serif; } .gceo-game-center .g-04 .g4-bname { font-family: var(--bfont); font-weight: var(--bweight); font-style: var(--bstyle); line-height: 1.05; overflow-wrap: anywhere; } .gceo-game-center .g-04 .g4-logo-card { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--g4-r); background: var(--bbg); color: #1a1a18; border: 1px solid rgba(0,0,0,.08); transition: background .35s; min-height: 108px; } .gceo-game-center .g-04 .g4-logo-txt { display: grid; gap: 4px; min-width: 0; } .gceo-game-center .g-04 .g4-logo-card .g4-bname { font-size: clamp(22px, 4.2cqi, 34px); color: var(--b1); transition: color .35s; } .gceo-game-center .g-04 .g4-tagline { font-size: 13px; color: #4a463e; font-style: italic; } /* logo marks */ .gceo-game-center .g-04 .g4-mark { flex: none; display: inline-grid; place-items: center; width: 64px; height: 64px; color: var(--bink); background: var(--b1); font-family: var(--bfont); font-weight: var(--bweight); font-style: var(--bstyle); transition: background .35s, color .35s, border-radius .35s; position: relative; overflow: hidden; } .gceo-game-center .g-04 .g4-mark.lg { width: 78px; height: 78px; font-size: 30px; } .gceo-game-center .g-04 .g4-mark.sm { width: 42px; height: 42px; font-size: 18px; } .gceo-game-center .g-04 .g4-mark.xs { width: 30px; height: 30px; font-size: 13px; } .gceo-game-center .g-04 .g4-mk-wordmark { width: auto !important; min-width: 64px; padding: 0 10px; border-radius: 10px; background: transparent; color: var(--b1); border-bottom: 4px solid var(--b2); } .gceo-game-center .g-04 .g4-mk-wordmark b { font-weight: inherit; white-space: nowrap; } .gceo-game-center .g-04 .g4-mk-wordmark.lg { font-size: 22px; } .gceo-game-center .g-04 .g4-mk-wordmark.sm, .gceo-game-center .g-04 .g4-mk-wordmark.xs { font-size: 12px; padding: 0 6px; min-width: 0; border-bottom-width: 3px; } .gceo-game-center .g-04 .g4-mk-emblem { border-radius: 50%; box-shadow: inset 0 0 0 3px var(--b1), inset 0 0 0 5px var(--b2), inset 0 0 0 7px var(--b1); background: var(--bbg); color: var(--b1); grid-template-rows: 1fr auto; padding: 8px 0 6px; gap: 0; } .gceo-game-center .g-04 .g4-mk-emblem .g4-emb-ico { font-size: 1.05em; line-height: 1; align-self: end; } .gceo-game-center .g-04 .g4-mk-emblem small { font-family: var(--gc-body); font-style: normal; font-size: 7.5px; letter-spacing: .1em; font-weight: 800; } .gceo-game-center .g-04 .g4-mk-emblem.sm small, .gceo-game-center .g-04 .g4-mk-emblem.xs small { display: none; } .gceo-game-center .g-04 .g4-mk-emblem.sm, .gceo-game-center .g-04 .g4-mk-emblem.xs { padding: 0; grid-template-rows: 1fr; } .gceo-game-center .g-04 .g4-mk-emblem.sm .g4-emb-ico, .gceo-game-center .g-04 .g4-mk-emblem.xs .g4-emb-ico { align-self: center; } .gceo-game-center .g-04 .g4-mk-mascot { border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--b2), var(--b1)); font-size: 1.35em; } .gceo-game-center .g-04 .g4-mark.lg.g4-mk-mascot { font-size: 42px; } .gceo-game-center .g-04 .g4-mk-monogram { border-radius: 6px; transform: rotate(45deg) scale(.82); box-shadow: inset 0 0 0 3px var(--b2); } .gceo-game-center .g-04 .g4-mk-monogram b { transform: rotate(-45deg); font-weight: inherit; } .gceo-game-center .g-04 .g4-mk-abstract { background: transparent; } .gceo-game-center .g-04 .g4-mk-abstract i { position: absolute; display: block; border-radius: 50%; } .gceo-game-center .g-04 .g4-mk-abstract i:nth-child(1) { width: 62%; height: 62%; left: 6%; top: 8%; background: var(--b1); } .gceo-game-center .g-04 .g4-mk-abstract i:nth-child(2) { width: 52%; height: 52%; right: 6%; bottom: 8%; background: var(--b2); mix-blend-mode: multiply; } .gceo-game-center .g-04 .g4-mk-abstract i:nth-child(3) { width: 0; height: 0; border-radius: 0; left: 30%; top: 30%; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 22px solid var(--bbg); opacity: .9; } .gceo-game-center .g-04 .g4-mark.sm.g4-mk-abstract i:nth-child(3), .gceo-game-center .g-04 .g4-mark.xs.g4-mk-abstract i:nth-child(3) { border-left-width: 7px; border-right-width: 7px; border-bottom-width: 12px; } /* scenes */ .gceo-game-center .g-04 .g4-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gceo-game-center .g-04 .g4-scene { margin: 0; display: grid; gap: 6px; align-content: start; } .gceo-game-center .g-04 .g4-scene-wide { grid-column: 1 / -1; } .gceo-game-center .g-04 .g4-scene figcaption { font-size: 12px; font-weight: 700; color: var(--gc-muted); } @container (max-width: 420px) { .gceo-game-center .g-04 .g4-scenes { grid-template-columns: 1fr; } } /* package */ .gceo-game-center .g-04 .g4-pack { position: relative; height: 196px; border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: 22px 1fr; box-shadow: 0 10px 18px -10px rgba(0,0,0,.45); transition: background .35s; } .gceo-game-center .g-04 .g4-pack-lid { background: rgba(0,0,0,.14); } .gceo-game-center .g-04 .g4-pack-face { display: grid; place-items: center; align-content: center; gap: 6px; padding: 10px; text-align: center; } .gceo-game-center .g-04 .g4-pack-face .g4-bname { font-size: 19px; } .gceo-game-center .g-04 .g4-pack-line { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.75); color: #1a1a18; } .gceo-game-center .g-04 .g4-pk-kraft { background: repeating-linear-gradient(115deg, rgba(0,0,0,.035) 0 3px, transparent 3px 7px), #c49a6c; color: #2b1d10; } .gceo-game-center .g-04 .g4-pk-kraft .g4-pack-face { margin: 14px; border: 2px dashed rgba(43,29,16,.5); border-radius: 8px; background: #efe1c8; } .gceo-game-center .g-04 .g4-pk-kraft .g4-bname { color: var(--b1); } .gceo-game-center .g-04 .g4-pk-glossy { background: linear-gradient(135deg, rgba(255,255,255,.45) 0 18%, transparent 30%), linear-gradient(160deg, var(--b1), color-mix(in srgb, var(--b1) 60%, #000)); color: var(--bink); } .gceo-game-center .g-04 .g4-pk-glossy::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 12px; transform: translateX(-50%); background: var(--b2); opacity: .9; } .gceo-game-center .g-04 .g4-pk-glossy .g4-pack-face { position: relative; z-index: 1; } .gceo-game-center .g-04 .g4-pk-glossy .g4-bname { background: color-mix(in srgb, var(--b1) 85%, #000); padding: 2px 8px; border-radius: 6px; } .gceo-game-center .g-04 .g4-pk-minimal { background: #fbfbf9; color: #1a1a18; border: 1px solid #e3e1da; } .gceo-game-center .g-04 .g4-pk-minimal .g4-pack-lid { background: #eeede8; } .gceo-game-center .g-04 .g4-pk-minimal .g4-bname { color: var(--b1); font-size: 15px; letter-spacing: .06em; } .gceo-game-center .g-04 .g4-pk-colorful { background: radial-gradient(circle at 20% 30%, var(--b2) 0 7px, transparent 8px), radial-gradient(circle at 75% 20%, var(--bbg) 0 5px, transparent 6px), radial-gradient(circle at 60% 80%, var(--b2) 0 6px, transparent 7px), radial-gradient(circle at 15% 85%, var(--bbg) 0 4px, transparent 5px), var(--b1); background-size: 60px 60px; color: var(--bink); } .gceo-game-center .g-04 .g4-pk-colorful .g4-pack-face .g4-bname { background: var(--bbg); color: var(--b1); padding: 3px 10px; border-radius: 99px; } .gceo-game-center .g-04 .g4-pk-block { background: var(--b1); color: var(--bink); } .gceo-game-center .g-04 .g4-pk-block .g4-bname { font-size: 26px; text-transform: uppercase; } .gceo-game-center .g-04 .g4-pk-block .g4-pack-lid { background: var(--b2); } /* social post */ .gceo-game-center .g-04 .g4-post { background: #ffffff; color: #1a1a18; border-radius: 12px; border: 1px solid #e3e1da; overflow: hidden; display: grid; height: 196px; grid-template-rows: auto 1fr auto auto; } .gceo-game-center .g-04 .g4-post-head { display: flex; gap: 8px; align-items: center; padding: 6px 8px; min-width: 0; } .gceo-game-center .g-04 .g4-post-head span { display: grid; line-height: 1.15; min-width: 0; } .gceo-game-center .g-04 .g4-post-head b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gceo-game-center .g-04 .g4-post-head small { font-size: 10px; color: #6b665c; } .gceo-game-center .g-04 .g4-post-img { display: grid; place-items: center; align-content: center; gap: 2px; background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--bink); min-height: 0; transition: background .35s; } .gceo-game-center .g-04 .g4-post-img span { font-size: 30px; } .gceo-game-center .g-04 .g4-post-img .g4-bname { font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,.35); padding: 0 6px; text-align: center; } .gceo-game-center .g-04 .g4-post-cap { font-size: 11px; padding: 6px 8px 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gceo-game-center .g-04 .g4-post-acts { font-size: 12px; padding: 2px 8px 6px; color: #6b665c; letter-spacing: .3em; } /* storefront */ .gceo-game-center .g-04 .g4-store { border-radius: 10px; overflow: hidden; background: #d8d2c4; border: 1px solid rgba(0,0,0,.12); display: grid; } .gceo-game-center .g-04 .g4-awning { height: 26px; background: repeating-linear-gradient(90deg, var(--b1) 0 26px, var(--bbg) 26px 52px); -webkit-mask: radial-gradient(13px 9px at 13px 100%, transparent 98%, #000) -0px 0 / 26px 100%; mask: radial-gradient(13px 9px at 13px 100%, transparent 98%, #000) 0 0 / 26px 100%; transition: background .35s; } .gceo-game-center .g-04 .g4-sign { margin: 6px 12px 0; display: flex; gap: 10px; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 8px; background: var(--b1); color: var(--bink); box-shadow: inset 0 0 0 3px var(--b2); transition: background .35s; } .gceo-game-center .g-04 .g4-sign .g4-bname { font-size: 22px; } .gceo-game-center .g-04 .g4-sign .g4-mk-wordmark, .gceo-game-center .g-04 .g4-pack-face .g4-mk-wordmark { display: none; } .gceo-game-center .g-04 .g4-logo-card.is-wm .g4-bname { border-bottom: 5px solid var(--b2); padding-bottom: 2px; justify-self: start; } .gceo-game-center .g-04 .g4-sign .g4-mark:not(.g4-mk-wordmark) { box-shadow: 0 0 0 2px var(--bink); } .gceo-game-center .g-04 .g4-window { margin: 8px 12px 12px; padding: 10px; border-radius: 6px; background: linear-gradient(160deg, #eaf3f6, #c9dbe2); color: #1a1a18; display: flex; gap: 10px; align-items: center; font-size: 26px; flex-wrap: wrap; } .gceo-game-center .g-04 .g4-window em { font-size: 12.5px; font-weight: 700; margin-left: auto; color: #2c2a25; } /* ---------- drawers ---------- */ .gceo-game-center .g-04 .g4-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-04 .g4-tab { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 4px; border-radius: 12px; border: 1.5px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); font-size: 12px; font-weight: 700; } .gceo-game-center .g-04 .g4-tab span:first-child { font-size: 18px; line-height: 1; } .gceo-game-center .g-04 .g4-tab[aria-selected="true"] { background: var(--gc-ink); color: var(--gc-bg); border-color: var(--gc-ink); } .gceo-game-center .g-04 .g4-tab:hover { border-color: var(--gc-emerald); } .gceo-game-center .g-04 .g4-drawer { display: grid; gap: 10px; } .gceo-game-center .g-04 .g4-drawer-head { font-size: 13.5px; } .gceo-game-center .g-04 .g4-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; } .gceo-game-center .g-04 .g4-opt { position: relative; min-height: 44px; align-content: start; font-size: 13.5px; } .gceo-game-center .g-04 .g4-opt small { color: var(--gc-muted); font-size: 12px; line-height: 1.35; } .gceo-game-center .g-04 .g4-opt.on { box-shadow: 0 0 0 2px var(--gc-emerald); } .gceo-game-center .g-04 .g4-check { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gc-emerald); color: #fff; font-size: 12px; } .gceo-game-center .g-04 .g4-opt-art { display: flex; align-items: center; min-height: 48px; } .gceo-game-center .g-04 .g4-opt-ico { font-size: 24px; letter-spacing: -2px; } .gceo-game-center .g-04 .g4-sw { display: flex; gap: 4px; } .gceo-game-center .g-04 .g4-sw i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); } .gceo-game-center .g-04 .g4-font-sample { font-size: 22px; color: var(--gc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-04 .g4-mini-pack { display: block; height: 38px; border-radius: 6px; position: relative; overflow: hidden; } .gceo-game-center .g-04 .g4-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; } .gceo-game-center .g-04 .g4-chip b { font-size: 14.5px; padding-right: 22px; } @container (max-width: 380px) { .gceo-game-center .g-04 .g4-tab span:last-child { font-size: 10.5px; } } /* ---------- customer lab ---------- */ .gceo-game-center .g-04 .g4-lab-head { align-items: flex-end; } .gceo-game-center .g-04 .g4-cost { font-weight: 600; opacity: .8; } .gceo-game-center .g-04 .g4-lane { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; } @container (max-width: 520px) { .gceo-game-center .g-04 .g4-lane { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gceo-game-center .g-04 .g4-cust { padding: 10px; } .gceo-game-center .g-04 .g4-crowd { font-size: 21px; } .gceo-game-center .g-04 .g4-face { font-size: 26px; } .gceo-game-center .g-04 .g4-bubble { font-size: 12px; } .gceo-game-center .g-04 .g4-cust.target { grid-column: 1 / -1; } } .gceo-game-center .g-04 .g4-cust { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 14px; background: var(--gc-surface-2); border: 1.5px solid var(--gc-line); } .gceo-game-center .g-04 .g4-cust.target { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-04 .g4-cust-name { gap: 6px; } .gceo-game-center .g-04 .g4-crowd { font-size: 26px; letter-spacing: -4px; } .gceo-game-center .g-04 .g4-react { display: flex; align-items: center; gap: 8px; } .gceo-game-center .g-04 .g4-face { font-size: 32px; line-height: 1; } .gceo-game-center .g-04 .g4-word { font-weight: 800; font-size: 13px; } .gceo-game-center .g-04 .g4-bubble { position: relative; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 12px; padding: 8px 10px; font-size: 13px; line-height: 1.4; } .gceo-game-center .g-04 .g4-bubble::before { content: ""; position: absolute; top: -7px; left: 18px; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--gc-line); border-top: 1px solid var(--gc-line); transform: rotate(45deg); } .gceo-game-center .g-04 .g4-bubble.idle { color: var(--gc-muted); font-style: italic; } .gceo-game-center .g-04 .g4-cust.walk { animation: g4-walk .55s cubic-bezier(.2,.8,.3,1.2) both; animation-delay: var(--d); } .gceo-game-center .g-04 .g4-cust.walk .g4-crowd { animation: g4-bob .5s ease-in-out 2; animation-delay: var(--d); } .gceo-game-center .g-04 .g4-cust.walk .g4-react, .gceo-game-center .g-04 .g4-cust.walk .g4-bubble { animation: g4-pop .4s ease both; animation-delay: calc(var(--d) + .5s); } @keyframes g4-walk { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } @keyframes g4-bob { 50% { transform: translateY(-5px); } } @keyframes g4-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } } .gceo-game-center .g-04 .g4-fb-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; } @container (max-width: 700px) { .gceo-game-center .g-04 .g4-fb-grid { grid-template-columns: 1fr; } } .gceo-game-center .g-04 .g4-fb-side { display: grid; gap: 8px; align-content: start; } .gceo-game-center .g-04 .g4-h4 { font-size: 14px; margin: 0 0 6px; } .gceo-game-center .g-04 .g4-fb { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; } .gceo-game-center .g-04 .g4-fb li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: var(--gc-surface-2); } .gceo-game-center .g-04 .g4-fb li.good { background: var(--gc-emerald-soft); } .gceo-game-center .g-04 .g4-fb li.warn { background: var(--gc-warn-soft); } .gceo-game-center .g-04 .g4-fb li.bad { background: var(--gc-risk-soft); } .gceo-game-center .g-04 .g4-fb-ico { font-weight: 900; width: 1.2em; flex: none; text-align: center; } .gceo-game-center .g-04 .g4-fb li.good .g4-fb-ico { color: var(--gc-emerald-ink); } .gceo-game-center .g-04 .g4-fb li.warn .g4-fb-ico { color: var(--gc-warn); } .gceo-game-center .g-04 .g4-fb li.bad .g4-fb-ico { color: var(--gc-risk); } .gceo-game-center .g-04 .g4-small { font-size: 12.5px; } .gceo-game-center .g-04 .g4-dirty { color: var(--gc-warn); font-weight: 700; } /* GAME 05 — CEO Cash Flow Dash. Every selector is scoped to .gceo-game-center .g-05 */ .gceo-game-center .g-05 .c5 { display: grid; gap: 12px; } .gceo-game-center .g-05 .c5-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; } .gceo-game-center .g-05 .c5-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 12px; align-items: start; } @container (max-width: 980px) { .gceo-game-center .g-05 .c5-main { grid-template-columns: 1fr 1fr; } .gceo-game-center .g-05 .c5-tools { grid-column: 1 / -1; } } @container (max-width: 760px) { .gceo-game-center .g-05 .c5-top { grid-template-columns: 1fr; } } @container (max-width: 600px) { .gceo-game-center .g-05 .c5-main { grid-template-columns: 1fr; } } /* ---------- bank card ---------- */ .gceo-game-center .g-05 .c5-bank { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #1d7a4f 20%, transparent), transparent 60%), var(--gc-surface); } .gceo-game-center .g-05 .c5-date { font-weight: 700; font-size: 13.5px; } .gceo-game-center .g-05 .c5-balance { font-family: var(--gc-display); font-weight: 700; font-size: clamp(38px, 7vw, 58px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .01em; transition: color .3s; } .gceo-game-center .g-05 .c5-balance.good { color: var(--gc-emerald); } .gceo-game-center .g-05 .c5-balance.warn { color: var(--gc-warn); } .gceo-game-center .g-05 .c5-balance.bad { color: var(--gc-risk); animation: c5-blink 1s ease infinite; } @keyframes c5-blink { 50% { opacity: .55; } } .gceo-game-center .g-05 .c5-float { top: 46px; font-size: 18px; z-index: 2; } .gceo-game-center .g-05 .c5-float.in { color: var(--gc-emerald); } .gceo-game-center .g-05 .c5-float.out { color: var(--gc-risk); } .gceo-game-center .g-05 .c5-zones { position: relative; display: flex; height: 18px; border-radius: 999px; overflow: visible; } .gceo-game-center .g-05 .c5-zones .z { height: 100%; } .gceo-game-center .g-05 .c5-zones .z.bad { background: #c94a4a; border-radius: 999px 0 0 999px; } .gceo-game-center .g-05 .c5-zones .z.warn { background: #e0a23a; } .gceo-game-center .g-05 .c5-zones .z.good { flex: 1; background: linear-gradient(90deg, #4fae7f, #1d7a4f); border-radius: 0 999px 999px 0; } .gceo-game-center .g-05 .c5-needle { position: absolute; top: -5px; width: 6px; height: 28px; margin-left: -3px; border-radius: 3px; background: var(--gc-ink); box-shadow: 0 0 0 2px var(--gc-surface); transition: left .25s linear; } .gceo-game-center .g-05 .c5-gauge-lbl { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12.5px; } .gceo-game-center .g-05 .c5-chart svg { width: 100%; height: 130px; display: block; } .gceo-game-center .g-05 .c5-ch-line { fill: none; stroke: var(--gc-emerald); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .gceo-game-center .g-05 .c5-ch-area { fill: color-mix(in srgb, var(--gc-emerald) 16%, transparent); } .gceo-game-center .g-05 .c5-ch-low { fill: color-mix(in srgb, var(--gc-risk) 9%, transparent); } .gceo-game-center .g-05 .c5-ch-safe { stroke: var(--gc-risk); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; } .gceo-game-center .g-05 .c5-ch-month { stroke: var(--gc-line); stroke-width: 1; vector-effect: non-scaling-stroke; } .gceo-game-center .g-05 .c5-ch-dot { fill: var(--gc-gold-fill); stroke: var(--gc-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .gceo-game-center .g-05 .c5-ch-txt { fill: var(--gc-muted); font-size: 11px; font-weight: 700; } .gceo-game-center .g-05 .c5-ch-key { display: flex; gap: 14px; font-size: 11.5px; font-weight: 600; } .gceo-game-center .g-05 .c5-ch-key span:last-child { color: var(--gc-risk); } /* ---------- profit vs cash ---------- */ .gceo-game-center .g-05 .c5-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gceo-game-center .g-05 .c5-of { font-size: 11px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-05 .c5-note { font-size: 13px; } .gceo-game-center .g-05 .c5-note b { color: var(--gc-ink); } /* ---------- lanes ---------- */ .gceo-game-center .g-05 .c5-lane { min-height: 220px; } .gceo-game-center .g-05 .c5-list { display: flex; flex-direction: column; gap: 8px; } .gceo-game-center .g-05 .c5-empty { font-size: 13px; } .gceo-game-center .g-05 .c5-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico txt amt" "act act act"; gap: 6px 10px; align-items: center; padding: 10px 12px 14px; border-radius: 12px; background: var(--gc-surface-2); border: 1.5px solid var(--gc-line); overflow: hidden; animation: c5-in .35s ease; } @keyframes c5-in { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } } .gceo-game-center .g-05 .c5-ico { grid-area: ico; font-size: 24px; } .gceo-game-center .g-05 .c5-txt { grid-area: txt; display: grid; min-width: 0; line-height: 1.3; } .gceo-game-center .g-05 .c5-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gceo-game-center .g-05 .c5-txt small { font-size: 12px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-05 .c5-amt { grid-area: amt; font-size: 17px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-05 .c5-act { grid-area: act; display: flex; } .gceo-game-center .g-05 .c5-act .gc-btn { flex: 1; min-height: 44px; } .gceo-game-center .g-05 .c5-status { font-size: 13px; font-weight: 700; color: var(--gc-muted); padding: 4px 0; } .gceo-game-center .g-05 .c5-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: color-mix(in srgb, var(--gc-ink) 8%, transparent); } .gceo-game-center .g-05 .c5-timer i { display: block; height: 100%; width: 0; background: var(--gc-emerald); transition: width .2s linear; } .gceo-game-center .g-05 .c5-card.in { border-left: 5px solid var(--gc-emerald); } .gceo-game-center .g-05 .c5-card.in.sent .c5-amt { color: var(--gc-muted); } .gceo-game-center .g-05 .c5-card.in.stale { border-color: #d28a1c; background: var(--gc-warn-soft); } .gceo-game-center .g-05 .c5-card.in.stale .c5-timer i { background: #d28a1c; } .gceo-game-center .g-05 .c5-card.in.slow .c5-timer i { background: #d28a1c; } .gceo-game-center .g-05 .c5-card.out { border-left: 5px solid var(--gc-risk); } .gceo-game-center .g-05 .c5-card.out .c5-timer i { background: #d28a1c; } .gceo-game-center .g-05 .c5-card.out.auto { border-left-color: var(--gc-gold-fill); } .gceo-game-center .g-05 .c5-card.out.auto .c5-txt small::before { content: "🔁 "; } .gceo-game-center .g-05 .c5-card.out.urgent { border-color: #d28a1c; background: var(--gc-warn-soft); } .gceo-game-center .g-05 .c5-card.out.urgent .c5-txt small { color: var(--gc-warn); } .gceo-game-center .g-05 .c5-card.out.late { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-05 .c5-card.out.late .c5-txt small { color: var(--gc-risk); } .gceo-game-center .g-05 .c5-card.out.late .c5-timer i { background: var(--gc-risk); } .gceo-game-center .g-05 .c5-stream { position: relative; height: 26px; overflow: hidden; } .gceo-game-center .g-05 .c5-chip { position: absolute; top: 2px; left: 0; font-size: 12.5px; font-weight: 800; color: var(--gc-emerald-ink); background: var(--gc-emerald-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; animation: c5-flow 1.6s linear forwards; } @keyframes c5-flow { from { left: 100%; opacity: 0; } 15% { opacity: 1; } to { left: -40%; opacity: .2; } } /* ---------- tools ---------- */ .gceo-game-center .g-05 .c5-tools { gap: 14px; } .gceo-game-center .g-05 .c5-reserve { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: var(--gc-gold-soft); } .gceo-game-center .g-05 .c5-res-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; } .gceo-game-center .g-05 .c5-res-head b:last-child { font-size: 18px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-05 .c5-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .gceo-game-center .g-05 .c5-btns .gc-btn { min-height: 44px; padding: 6px 8px; } .gceo-game-center .g-05 .c5-tool { display: grid; gap: 6px; } .gceo-game-center .g-05 .c5-tool > .gc-btn { min-height: 44px; } .gceo-game-center .g-05 .c5-tool-head { font-size: 13.5px; } .gceo-game-center .g-05 .c5-tool-head .gc-muted { font-size: 12px; } .gceo-game-center .g-05 .c5-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 14px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); } .gceo-game-center .g-05 .c5-seg .gc-btn { flex-direction: column; gap: 0; min-height: 48px; padding: 4px; border-radius: 11px; border-color: transparent; background: transparent; } .gceo-game-center .g-05 .c5-seg .gc-btn small { font-size: 11px; font-weight: 600; opacity: .8; } .gceo-game-center .g-05 .c5-seg .gc-btn.on, .gceo-game-center .g-05 .c5-tool > .gc-btn.on { background: var(--gc-gold-soft); color: var(--gc-white); border-color: var(--gc-gold-fill); } .gceo-game-center .g-05 .c5-fx { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-05 .c5-fx .gc-pill { white-space: normal; } .gceo-game-center .g-05 .c5-logp .gc-log { max-height: 150px; } /* ---------- bottom bar ---------- */ .gceo-game-center .g-05 .c5-bar { position: sticky; bottom: 8px; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 16px; background: var(--gc-surface); border: 1px solid var(--gc-line); box-shadow: var(--gc-shadow); } .gceo-game-center .g-05 .c5-speed { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); } .gceo-game-center .g-05 .c5-speed .gc-btn { min-height: 44px; min-width: 52px; padding: 6px 10px; border-color: transparent; background: transparent; } .gceo-game-center .g-05 .c5-speed .gc-btn.on { background: var(--gc-gold-soft); border-color: var(--gc-gold-fill); color: var(--gc-white); } .gceo-game-center .g-05 .c5-bar-cash { font-size: 14px; } .gceo-game-center .g-05 .c5-bar-cash small { color: var(--gc-muted); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; } .gceo-game-center .g-05 .c5-bar-cash b { font-size: 18px; font-variant-numeric: tabular-nums; } /* ---------- month report popup (card is tagged g-05 c5-modal) ---------- */ .gceo-game-center .g-05.c5-modal { width: min(100%, 600px); } .gceo-game-center .g-05 .c5-report { display: grid; gap: 10px; } .gceo-game-center .g-05 .c5-report .gc-res-bar { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .gceo-game-center .g-05 .c5-formula { font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-05 .c5-lesson { font-weight: 600; background: var(--gc-emerald-soft); border-radius: 10px; padding: 8px 12px; } .gceo-game-center .g-05.c5-em .gc-modal-actions { flex-direction: column; align-items: stretch; } .gceo-game-center .g-05.c5-em .gc-modal-actions .gc-btn { white-space: normal; } .gceo-game-center .g-05 .c5.is-over .c5-bar { display: none; } @container (max-width: 520px) { .gceo-game-center .g-05 .c5-bar { flex-wrap: nowrap; padding: 6px 8px; gap: 6px; } .gceo-game-center .g-05 .c5-speed .gc-btn { min-width: 44px; padding: 6px 8px; font-size: 12.5px; } .gceo-game-center .g-05 .c5-bar-cash small { display: none; } .gceo-game-center .g-05 .c5-bar-cash b { font-size: 16px; } } /* GAME 06 — Marketing Wars. Every selector is scoped to .gceo-game-center .g-06 */ .gceo-game-center .g-06 .g6-small { font-size: 12.5px; } .gceo-game-center .g-06 .pos { color: var(--gc-emerald-ink); font-weight: 700; } .gceo-game-center .g-06 .neg { color: var(--gc-risk); font-weight: 700; } .gceo-game-center .g-06 .g6-bar { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } @container (max-width: 520px) { .gceo-game-center .g-06 .g6-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* scenario pick */ .gceo-game-center .g-06 .g6-scn { align-content: start; gap: 8px; } .gceo-game-center .g-06 .g6-scn-ico { font-size: 42px; line-height: 1; } .gceo-game-center .g-06 .g6-scn-name { font-family: var(--gc-display); font-size: 18px; } .gceo-game-center .g-06 .g6-scn .gc-pill { justify-self: start; } .gceo-game-center .g-06 .g6-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; } /* board */ .gceo-game-center .g-06 .g6-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 12px; align-items: start; } @container (max-width: 760px) { .gceo-game-center .g-06 .g6-board { grid-template-columns: 1fr; } } .gceo-game-center .g-06 .g6-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; } .gceo-game-center .g-06 .g6-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 8px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-top: 3px solid color-mix(in srgb, var(--gc-risk) calc(var(--rk) * 22%), var(--gc-emerald)); cursor: grab; transition: transform .15s, box-shadow .15s; } .gceo-game-center .g-06 .g6-card:hover { transform: translateY(-2px); box-shadow: var(--gc-shadow); } .gceo-game-center .g-06 .g6-card.in { background: linear-gradient(180deg, rgba(207, 161, 90, .10), transparent 60%), var(--gc-surface-2); border-color: var(--gc-gold-fill); } .gceo-game-center .g-06 .g6-card.dim { cursor: default; } .gceo-game-center .g-06 .g6-card.dim header, .gceo-game-center .g-06 .g6-card.dim .g6-stats { opacity: .6; } .gceo-game-center .g-06 .g6-card header { display: flex; align-items: center; gap: 8px; } .gceo-game-center .g-06 .g6-card header b { font-size: 15.5px; } .gceo-game-center .g-06 .g6-card-ico { font-size: 24px; } .gceo-game-center .g-06 .g6-count { margin-left: auto; background: var(--gc-gold-fill); color: var(--gc-on-gold); font-weight: 800; border-radius: 99px; padding: 1px 9px; font-size: 13px; } .gceo-game-center .g-06 .g6-stats { margin: 0; display: grid; gap: 3px; font-size: 12.5px; } .gceo-game-center .g-06 .g6-stats > div { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .gceo-game-center .g-06 .g6-stats dt { color: var(--gc-muted); font-weight: 600; white-space: nowrap; } .gceo-game-center .g-06 .g6-stats dd { margin: 0; text-align: right; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .gceo-game-center .g-06 .g6-stats small { font-size: 11.5px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-06 .g6-dots { color: var(--gc-gold-fill); letter-spacing: 1px; font-size: 10px; } .gceo-game-center .g-06 .g6-dots span { color: color-mix(in srgb, var(--gc-ink) 18%, transparent); } .gceo-game-center .g-06 .g6-note { font-size: 12px; color: var(--gc-muted); line-height: 1.4; } .gceo-game-center .g-06 .g6-last { font-size: 12px; padding: 4px 8px; border-radius: 8px; background: var(--gc-surface); } .gceo-game-center .g-06 .g6-card-acts { display: grid; grid-template-columns: 44px 1fr; gap: 6px; margin-top: auto; } .gceo-game-center .g-06 .g6-card-acts .gc-btn { min-height: 44px; padding: 6px 8px; } /* tray */ .gceo-game-center .g-06 .g6-tray { position: sticky; top: 8px; border: 2px dashed var(--gc-line); transition: border-color .15s, background .15s; } .gceo-game-center .g-06 .g6-tray.drop { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } @container (max-width: 760px) { .gceo-game-center .g-06 .g6-tray { top: auto; bottom: 6px; z-index: 5; gap: 6px; padding: 10px 12px; border-style: solid; border-color: var(--gc-gold-fill); box-shadow: 0 -6px 24px rgba(0,0,0,.18); } .gceo-game-center .g-06 .g6-tray .gc-panel-title { font-size: 14px; } .gceo-game-center .g-06 .g6-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gceo-game-center .g-06 .g6-slot { min-height: 44px; } .gceo-game-center .g-06 .g6-slot small { display: none; } .gceo-game-center .g-06 .g6-tray .gc-btn.big { min-height: 46px; } .gceo-game-center .g-06 .g6-sum { font-size: 12.5px; } } .gceo-game-center .g-06 .g6-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-06 .g6-slot { min-height: 58px; border-radius: 12px; border: 1.5px dashed var(--gc-line); display: grid; place-items: center; color: var(--gc-muted); font-size: 18px; background: var(--gc-surface-2); position: relative; padding: 4px; } .gceo-game-center .g-06 .g6-slot.full { border-style: solid; border-color: var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); font-size: 20px; animation: g6-drop .25s ease; } .gceo-game-center .g-06 .g6-slot small { font-size: 10.5px; font-weight: 700; line-height: 1.1; text-align: center; } .gceo-game-center .g-06 .g6-slot i { position: absolute; top: 2px; right: 5px; font-style: normal; font-size: 11px; color: var(--gc-risk); } @keyframes g6-drop { from { transform: scale(.8); opacity: .3; } to { transform: none; opacity: 1; } } .gceo-game-center .g-06 .g6-sum { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13.5px; } .gceo-game-center .g-06 .g6-sum b { text-align: right; font-variant-numeric: tabular-nums; } .gceo-game-center .g-06 .g6-warn { color: var(--gc-warn); font-weight: 600; } /* simulation */ .gceo-game-center .g-06 .g6-legend { display: flex; gap: 14px; } .gceo-game-center .g-06 .g6-funnels { display: grid; gap: 8px; } .gceo-game-center .g-06 .g6-fun { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); opacity: .35; transition: opacity .3s; } .gceo-game-center .g-06 .g6-fun.on { opacity: 1; } @container (max-width: 640px) { .gceo-game-center .g-06 .g6-fun { grid-template-columns: 1fr; gap: 6px; } } .gceo-game-center .g-06 .g6-fun-name { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; } .gceo-game-center .g-06 .g6-fun-name span { font-size: 24px; grid-row: span 2; } .gceo-game-center .g-06 .g6-fun-name small { font-size: 11px; color: var(--gc-muted); } .gceo-game-center .g-06 .g6-fun-bars { display: grid; gap: 3px; } .gceo-game-center .g-06 .g6-fb { position: relative; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--gc-ink) 6%, transparent); overflow: hidden; } .gceo-game-center .g-06 .g6-fb i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; transition: width .7s cubic-bezier(.2,.8,.3,1); } .gceo-game-center .g-06 .g6-fun.on .g6-fb i { width: var(--w); } .gceo-game-center .g-06 .g6-fun.on .g6-fb.click i { transition-delay: .26s; } .gceo-game-center .g-06 .g6-fun.on .g6-fb.buy i { transition-delay: .52s; } .gceo-game-center .g-06 .g6-fb.seen i { background: color-mix(in srgb, #3b82c4 45%, transparent); } .gceo-game-center .g-06 .g6-fb.click i { background: color-mix(in srgb, var(--gc-gold-fill) 70%, transparent); } .gceo-game-center .g-06 .g6-fb.buy i { background: color-mix(in srgb, var(--gc-emerald) 70%, transparent); } .gceo-game-center .g-06 .g6-fb span { position: relative; z-index: 1; font-size: 12px; padding-left: 8px; line-height: 20px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-06 .g6-fun-money { display: grid; gap: 2px; justify-items: end; text-align: right; } @container (max-width: 640px) { .gceo-game-center .g-06 .g6-fun-money { justify-items: start; text-align: left; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; } } .gceo-game-center .g-06 .g6-rev { font-size: 20px; color: var(--gc-emerald-ink); font-variant-numeric: tabular-nums; } .gceo-game-center .g-06 .g6-fun-money small { font-size: 11.5px; color: var(--gc-muted); } .gceo-game-center .g-06 .g6-total { display: grid; gap: 10px; animation: gc-pop .35s ease; } /* history */ .gceo-game-center .g-06 .g6-hist-grid { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; } @container (max-width: 640px) { .gceo-game-center .g-06 .g6-hist-grid { grid-template-columns: 1fr; } } .gceo-game-center .g-06 .g6-chart { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .gceo-game-center .g-06 .g6-col { display: grid; justify-items: center; gap: 2px; font-size: 11.5px; } .gceo-game-center .g-06 .g6-bars { height: 110px; display: flex; gap: 3px; align-items: flex-end; } .gceo-game-center .g-06 .g6-bars i, .gceo-game-center .g-06 .g6-key i { display: block; width: 16px; border-radius: 4px 4px 0 0; } .gceo-game-center .g-06 .g6-key { flex-basis: 100%; display: flex; gap: 12px; } .gceo-game-center .g-06 .g6-key span { display: flex; gap: 5px; align-items: center; } .gceo-game-center .g-06 .g6-key i { height: 10px; width: 10px; border-radius: 3px; } .gceo-game-center .g-06 i.rev { background: var(--gc-emerald); } .gceo-game-center .g-06 i.cost { background: repeating-linear-gradient(45deg, var(--gc-risk) 0 3px, color-mix(in srgb, var(--gc-risk) 55%, transparent) 3px 6px); } .gceo-game-center .g-06 .g6-table td, .gceo-game-center .g-06 .g6-table th { padding: 6px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } /* GAME 07 — CEO Crisis Command (all selectors scoped to .gceo-game-center .g-07) */ .gceo-game-center .g-07 { --cc-desk: color-mix(in srgb, #8a5a2b 16%, var(--gc-surface)); --cc-desk-edge: color-mix(in srgb, #8a5a2b 38%, var(--gc-line)); position: relative; } /* HUD */ .gceo-game-center .g-07 .cc-hud { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr); gap: 10px; align-items: stretch; } .gceo-game-center .g-07 .cc-meters { display: grid; gap: 8px; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 12px; padding: 10px 12px; } .gceo-game-center .g-07 .cc-meters .gc-meter { height: 12px; } .gceo-game-center .g-07 .cc-meters .gc-meter-label { color: var(--gc-ink); font-size: 13px; } .gceo-game-center .g-07 .cc-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* Desk */ .gceo-game-center .g-07 .cc-desk { position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, #8a5a2b 7%, transparent) 46px 48px), var(--cc-desk); border: 1px solid var(--cc-desk-edge); box-shadow: inset 0 -6px 0 var(--cc-desk-edge), var(--gc-shadow); } .gceo-game-center .g-07 .cc-devices { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; } .gceo-game-center .g-07 .cc-dev { display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--gc-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .gceo-game-center .g-07 .cc-dev > div:first-child { font-size: 26px; line-height: 1; } .gceo-game-center .g-07 .cc-laptop { width: 112px; padding: 5px 5px 8px; border-radius: 8px 8px 3px 3px; background: #1d1c19; position: relative; } .gceo-game-center .g-07 .cc-laptop::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -6px; height: 7px; border-radius: 0 0 8px 8px; background: #3b3934; } .gceo-game-center .g-07 .cc-screen { display: grid; justify-items: center; gap: 1px; border-radius: 4px; padding: 6px 4px; background: linear-gradient(160deg, #0f5c45, #0b3a2c); color: #f4eee1; font: 700 11px/1.2 var(--gc-body); letter-spacing: .08em; } .gceo-game-center .g-07 .cc-screen span { font-size: 15px; letter-spacing: 0; font-variant-numeric: tabular-nums; } .gceo-game-center .g-07 .cc-dev.ping > div:first-child { animation: cc-ping .7s ease 2; } @keyframes cc-ping { 0%, 100% { transform: none; } 25% { transform: rotate(-9deg) scale(1.12); } 75% { transform: rotate(9deg) scale(1.12); } } .gceo-game-center .g-07 .cc-mug { margin-left: auto; } .gceo-game-center .g-07 .cc-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; } .gceo-game-center .g-07 .cc-wave { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; } .gceo-game-center .g-07 .cc-ctrls { display: flex; gap: 6px; flex-wrap: wrap; } .gceo-game-center .g-07 .cc-ctrls .gc-btn { min-height: 44px; } .gceo-game-center .g-07 .cc-empty { text-align: center; padding: 26px 10px; font-weight: 600; } /* Notification cards */ .gceo-game-center .g-07 .cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; align-items: start; } .gceo-game-center .g-07 .cc-card { --u: #8a8270; position: relative; display: grid; background: var(--gc-surface); border: 1.5px solid var(--gc-line); border-left: 6px solid var(--u); border-radius: 14px; box-shadow: var(--gc-shadow); overflow: hidden; } .gceo-game-center .g-07 .cc-card.new { animation: cc-in .35s cubic-bezier(.2, 1.4, .5, 1); } @keyframes cc-in { from { transform: translateY(-12px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } .gceo-game-center .g-07 .cc-card.u-critical { --u: #c0262d; background: color-mix(in srgb, var(--gc-risk-soft) 55%, var(--gc-surface)); } .gceo-game-center .g-07 .cc-card.u-high { --u: #d1462f; } .gceo-game-center .g-07 .cc-card.u-medium { --u: #d28a1c; } .gceo-game-center .g-07 .cc-card.u-low { --u: #b9a03a; } .gceo-game-center .g-07 .cc-card.u-opp { --u: var(--gc-emerald); background: color-mix(in srgb, var(--gc-emerald-soft) 50%, var(--gc-surface)); } .gceo-game-center .g-07 .cc-card.hurry { animation: cc-shake 1s ease infinite; } @keyframes cc-shake { 0%, 88%, 100% { transform: none; } 92% { transform: translateX(-2px); } 96% { transform: translateX(2px); } } .gceo-game-center .g-07 .cc-card.sel { border-color: var(--gc-gold-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-gold-fill) 45%, transparent), var(--gc-shadow); } .gceo-game-center .g-07 .cc-card.working { opacity: .92; } .gceo-game-center .g-07 .cc-open { all: unset; box-sizing: border-box; display: grid; gap: 6px; padding: 10px 12px 12px; cursor: pointer; min-height: 44px; color: var(--gc-ink); } .gceo-game-center .g-07 .cc-open:disabled { cursor: default; } .gceo-game-center .g-07 .cc-open:focus-visible { outline: 3px solid var(--gc-gold-fill); outline-offset: -3px; border-radius: 12px; } .gceo-game-center .g-07 .cc-top { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; } .gceo-game-center .g-07 .cc-urg { color: var(--gc-ink); background: color-mix(in srgb, var(--u) 22%, transparent); padding: 2px 8px; border-radius: 999px; } .gceo-game-center .g-07 .cc-src { color: var(--gc-muted); text-transform: uppercase; } .gceo-game-center .g-07 .cc-title { display: flex; gap: 8px; align-items: center; font-size: 14.5px; line-height: 1.25; } .gceo-game-center .g-07 .cc-ico { font-size: 26px; flex: none; } .gceo-game-center .g-07 .cc-text { font-size: 13px; color: var(--gc-muted); } .gceo-game-center .g-07 .cc-hint { font-size: 12px; font-weight: 700; color: var(--gc-gold); } .gceo-game-center .g-07 .cc-timer { display: flex; gap: 8px; align-items: center; } .gceo-game-center .g-07 .cc-tbar { flex: 1; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--gc-ink) 12%, transparent); overflow: hidden; } .gceo-game-center .g-07 .cc-tbar > i { display: block; height: 100%; background: var(--gc-emerald); border-radius: inherit; transition: width .1s linear; } .gceo-game-center .g-07 .cc-tbar.warn > i { background: #d28a1c; } .gceo-game-center .g-07 .cc-tbar.bad > i { background: var(--gc-risk); } .gceo-game-center .g-07 .cc-tleft { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; } .gceo-game-center .g-07 .cc-work { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; color: var(--gc-emerald-ink); } .gceo-game-center .g-07 .cc-ring { --p: 0; width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--gc-emerald) calc(var(--p) * 1%), color-mix(in srgb, var(--gc-ink) 12%, transparent) 0); } .gceo-game-center .g-07 .cc-ring > span { width: 32px; height: 32px; border-radius: 50%; background: var(--gc-surface); display: grid; place-items: center; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--gc-ink); } .gceo-game-center .g-07 .cc-acts { display: grid; gap: 6px; padding: 0 10px 10px; } .gceo-game-center .g-07 .cc-actbtn { display: grid; gap: 1px; text-align: left; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--gc-emerald); background: var(--gc-emerald-soft); color: var(--gc-ink); } .gceo-game-center .g-07 .cc-actbtn:hover:not(:disabled) { background: color-mix(in srgb, var(--gc-emerald) 22%, var(--gc-surface)); } .gceo-game-center .g-07 .cc-actbtn:disabled { border-color: var(--gc-line); background: var(--gc-surface-2); opacity: .7; } .gceo-game-center .g-07 .cc-actbtn b { font-size: 13.5px; } .gceo-game-center .g-07 .cc-actbtn small { font-size: 12px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-07 .cc-actbtn .cc-gain { color: var(--gc-emerald-ink); } .gceo-game-center .g-07 .cc-actbtn:disabled .cc-gain { color: var(--gc-risk); } .gceo-game-center .g-07 .cc-close { justify-self: end; } .gceo-game-center .g-07 .cc-float { top: -6px; left: 50%; translate: -50% 0; z-index: 3; background: var(--gc-emerald); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 13px; white-space: nowrap; } /* Lower panels */ .gceo-game-center .g-07 .cc-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; } .gceo-game-center .g-07 .cc-team { display: grid; gap: 6px; } .gceo-game-center .g-07 .cc-mate { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); } .gceo-game-center .g-07 .cc-mate .cc-av { font-size: 24px; } .gceo-game-center .g-07 .cc-mate b { display: block; font-size: 14px; } .gceo-game-center .g-07 .cc-mate small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-07 .cc-mate em { font-style: normal; font-size: 12.5px; font-weight: 700; } .gceo-game-center .g-07 .cc-mate.free { border-color: var(--gc-emerald); } .gceo-game-center .g-07 .cc-mate.busy em { color: var(--gc-warn); } .gceo-game-center .g-07 .cc-mate.out { opacity: .7; } .gceo-game-center .g-07 .cc-mate.out em { color: var(--gc-risk); } .gceo-game-center .g-07 .cc-log { max-height: 190px; } .gceo-game-center .g-07.cc-over .cc-cards { filter: grayscale(.8); opacity: .55; } .gceo-game-center .g-07.cc-over .cc-hint { display: none; } .gceo-game-center .g-07.cc-paused .cc-cards { filter: grayscale(.6); opacity: .7; } @container (max-width: 760px) { .gceo-game-center .g-07 .cc-hud { grid-template-columns: 1fr; } .gceo-game-center .g-07 .cc-lower { grid-template-columns: 1fr; } } @container (max-width: 480px) { .gceo-game-center .g-07 .cc-res { gap: 6px; } .gceo-game-center .g-07 .cc-res .gc-res { padding: 6px 8px; gap: 6px; } .gceo-game-center .g-07 .cc-res .gc-res-ico { font-size: 17px; } .gceo-game-center .g-07 .cc-res .gc-res b { font-size: 14.5px; } .gceo-game-center .g-07 .cc-desk { padding: 10px; } .gceo-game-center .g-07 .cc-devices { gap: 10px; } .gceo-game-center .g-07 .cc-laptop { width: 92px; } .gceo-game-center .g-07 .cc-mug { display: none; } } /* GAME 08 — CEO Employee Manager (all selectors scoped to .gceo-game-center .g-08) */ .gceo-game-center .g-08 { --tm-floor: color-mix(in srgb, #6b4fa0 7%, var(--gc-surface-2)); } .gceo-game-center .g-08 .tm-hud { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } .gceo-game-center .g-08 .tm-goal { background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 12px; padding: 8px 12px; } .gceo-game-center .g-08 .tm-goal .gc-meter-label { color: var(--gc-ink); } .gceo-game-center .g-08 .tm-main { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1fr); grid-template-areas: "floor sel" "floor side"; grid-template-rows: auto 1fr; gap: 12px; align-items: start; } .gceo-game-center .g-08 .tm-selbar { grid-area: sel; min-width: 0; } .gceo-game-center .g-08 .tm-floorcol { grid-area: floor; display: grid; gap: 10px; min-width: 0; } .gceo-game-center .g-08 .tm-side { grid-area: side; display: grid; gap: 12px; min-width: 0; } /* Office floor */ .gceo-game-center .g-08 .tm-floor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: 18px; background: repeating-linear-gradient(0deg, transparent 0 38px, color-mix(in srgb, var(--gc-ink) 5%, transparent) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, color-mix(in srgb, var(--gc-ink) 5%, transparent) 38px 39px), var(--tm-floor); border: 1px solid var(--gc-line); } .gceo-game-center .g-08 .tm-zone, .gceo-game-center .g-08 .tm-bench { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 14px; background: var(--gc-surface); border: 2px solid var(--gc-line); min-width: 0; transition: border-color .15s, box-shadow .15s, transform .15s; } .gceo-game-center .g-08 .tm-zone { border-top-width: 5px; } .gceo-game-center .g-08 .tm-zone.good { border-top-color: var(--gc-emerald); } .gceo-game-center .g-08 .tm-zone.warn { border-top-color: #d28a1c; } .gceo-game-center .g-08 .tm-zone.bad { border-top-color: var(--gc-risk); } .gceo-game-center .g-08 .tm-bench { background: color-mix(in srgb, var(--gc-gold-soft) 60%, var(--gc-surface)); border-style: dashed; } .gceo-game-center .g-08.tm-dragging .tm-zone, .gceo-game-center .g-08.tm-dragging .tm-bench { border-style: dashed; border-color: var(--gc-gold-fill); } .gceo-game-center .g-08 .tm-zone.over, .gceo-game-center .g-08 .tm-bench.over { border-color: var(--gc-emerald); border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-emerald) 25%, transparent); transform: scale(1.01); } .gceo-game-center .g-08 .tm-zone-head { display: flex; gap: 8px; align-items: center; min-height: 44px; width: 100%; padding: 4px 6px; border-radius: 10px; border: 0; background: transparent; text-align: left; color: var(--gc-ink); } .gceo-game-center .g-08 .tm-zone-head:not([aria-disabled]) { background: var(--gc-gold-soft); outline: 1px dashed var(--gc-gold-fill); outline-offset: -2px; } .gceo-game-center .g-08 .tm-zone-head:not([aria-disabled]):hover { background: rgba(207, 161, 90, .16); } .gceo-game-center .g-08 .tm-zone-head[aria-disabled] { cursor: default; } .gceo-game-center .g-08 .tm-zone-ico { font-size: 24px; flex: none; } .gceo-game-center .g-08 .tm-zone-name { display: grid; min-width: 0; } .gceo-game-center .g-08 .tm-zone-name b { font-size: 14.5px; line-height: 1.2; } .gceo-game-center .g-08 .tm-zone-name small { font-size: 12px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-08 .tm-load { display: grid; gap: 4px; } .gceo-game-center .g-08 .tm-load-txt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; font-size: 12px; color: var(--gc-muted); font-variant-numeric: tabular-nums; } .gceo-game-center .g-08 .tm-load-txt b { color: var(--gc-ink); } .gceo-game-center .g-08 .tm-tag { font-weight: 800; color: var(--gc-ink); } .gceo-game-center .g-08 .tm-tag.bad { color: var(--gc-risk); } .gceo-game-center .g-08 .tm-tag.warn { color: var(--gc-warn); } .gceo-game-center .g-08 .tm-tag.good { color: var(--gc-emerald-ink); } .gceo-game-center .g-08 .tm-loadbar { position: relative; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--gc-ink) 12%, transparent); overflow: hidden; } .gceo-game-center .g-08 .tm-loadbar > i { display: block; height: 100%; background: var(--gc-emerald); border-radius: inherit; transition: width .3s; } .gceo-game-center .g-08 .tm-loadbar.warn > i { background: #d28a1c; } .gceo-game-center .g-08 .tm-loadbar.bad > i { background: var(--gc-risk); } .gceo-game-center .g-08 .tm-mark { position: absolute; left: 80%; top: 0; bottom: 0; width: 2px; background: var(--gc-ink); opacity: .5; } .gceo-game-center .g-08 .tm-backlog { font-size: 11.5px; color: var(--gc-warn); font-weight: 700; } .gceo-game-center .g-08 .tm-members { display: grid; gap: 6px; min-height: 48px; } .gceo-game-center .g-08 .tm-bench .tm-members { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); } .gceo-game-center .g-08 .tm-drop-hint { display: grid; place-items: center; min-height: 48px; border: 1.5px dashed var(--gc-line); border-radius: 10px; font-size: 12px; color: var(--gc-muted); text-align: center; padding: 4px 8px; } /* Employee chip */ .gceo-game-center .g-08 .tm-emp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 48px; width: 100%; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); text-align: left; cursor: grab; touch-action: manipulation; } .gceo-game-center .g-08 .tm-emp:hover { border-color: var(--gc-emerald); } .gceo-game-center .g-08 .tm-emp.sel { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-gold-fill) 40%, transparent); } .gceo-game-center .g-08 .tm-emp.dragging { opacity: .45; } .gceo-game-center .g-08 .tm-emp.tired { border-color: var(--gc-risk); } .gceo-game-center .g-08 .tm-av { font-size: 26px; line-height: 1; flex: none; } .gceo-game-center .g-08 .tm-emp-txt { display: grid; min-width: 0; gap: 1px; } .gceo-game-center .g-08 .tm-emp-txt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-08 .tm-emp-txt small { font-size: 11.5px; color: #c18a1e; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-08 .tm-lvl { color: var(--gc-gold) !important; font-size: 10.5px !important; text-transform: uppercase; letter-spacing: .05em; } .gceo-game-center .g-08 .tm-mini { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--gc-ink) 12%, transparent); overflow: hidden; margin-top: 2px; } .gceo-game-center .g-08 .tm-mini > i { display: block; height: 100%; background: var(--gc-emerald); } .gceo-game-center .g-08 .tm-mini > i.warn { background: #d28a1c; } .gceo-game-center .g-08 .tm-mini > i.bad { background: var(--gc-risk); } .gceo-game-center .g-08 .tm-mood { font-size: 20px; } /* Selected employee panel */ .gceo-game-center .g-08 .tm-detail { display: grid; gap: 10px; background: var(--gc-surface); border: 1.5px solid var(--gc-gold-fill); border-radius: 14px; padding: 12px; box-shadow: var(--gc-shadow); } .gceo-game-center .g-08 .tm-detail.empty { display: flex; gap: 10px; align-items: center; border-color: var(--gc-line); border-style: dashed; box-shadow: none; font-size: 13.5px; color: var(--gc-muted); } .gceo-game-center .g-08 .tm-detail.empty > span { font-size: 24px; } .gceo-game-center .g-08 .tm-d-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; } .gceo-game-center .g-08 .tm-d-av { font-size: 36px; } .gceo-game-center .g-08 .tm-d-head b { font-size: 17px; } .gceo-game-center .g-08 .tm-d-head small { display: block; font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-08 .tm-x { min-width: 44px; min-height: 44px; } .gceo-game-center .g-08 .tm-under { color: var(--gc-risk); font-weight: 700; } .gceo-game-center .g-08 .tm-d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; } .gceo-game-center .g-08 .tm-skills { display: grid; gap: 2px; font-size: 13px; } .gceo-game-center .g-08 .tm-skills > div { display: flex; justify-content: space-between; gap: 8px; } .gceo-game-center .g-08 .tm-best { font-size: 12px; margin-top: 4px; justify-content: flex-start !important; } .gceo-game-center .g-08 .tm-bars { display: grid; gap: 8px; } .gceo-game-center .g-08 .tm-acts { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-08 .tm-acts .gc-btn { min-height: 44px; } .gceo-game-center .g-08 .gc-btn small { font-weight: 600; opacity: .8; font-size: 11.5px; } /* Side panels */ .gceo-game-center .g-08 .gc-panel-title small { font-family: var(--gc-body); font-size: 12px; font-weight: 600; } .gceo-game-center .g-08 .tm-cands { display: grid; gap: 8px; } .gceo-game-center .g-08 .tm-cand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); } .gceo-game-center .g-08 .tm-cand-txt { display: grid; min-width: 0; font-size: 12.5px; } .gceo-game-center .g-08 .tm-cand-txt small { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; } .gceo-game-center .g-08 .tm-cand .gc-btn { min-height: 44px; flex-direction: column; gap: 0; padding: 6px 12px; } .gceo-game-center .g-08 .tm-pay { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-08 .tm-pay b { text-align: right; } .gceo-game-center .g-08 .tm-neg { color: var(--gc-risk); } .gceo-game-center .g-08 .tm-warn { font-size: 13px; color: var(--gc-risk); font-weight: 700; } .gceo-game-center .g-08 .tm-warn.tm-soft { color: var(--gc-warn); } .gceo-game-center .g-08 .tm-pay b:last-of-type { border-top: 1px solid var(--gc-line); } .gceo-game-center .g-08 .tm-pay span:last-of-type { border-top: 1px solid var(--gc-line); font-weight: 700; } .gceo-game-center .g-08 .tm-run .gc-btn.big { flex-direction: column; gap: 0; } .gceo-game-center .g-08 .tm-spark { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 70px; padding-top: 4px; border-bottom: 1px solid var(--gc-line); } .gceo-game-center .g-08 .tm-spark > span { flex: 1; background: var(--gc-emerald); border-radius: 4px 4px 0 0; min-width: 4px; } .gceo-game-center .g-08 .tm-spark > span.hit { background: #d79f33; } .gceo-game-center .g-08 .tm-goalline { position: absolute; left: 0; right: 0; top: 4px; border-top: 2px dashed #d79f33; } @container (max-width: 980px) { .gceo-game-center .g-08 .tm-floor { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 820px) { .gceo-game-center .g-08 .tm-main { grid-template-columns: 1fr; grid-template-areas: "sel" "floor" "side"; grid-template-rows: auto; } } @container (max-width: 520px) { .gceo-game-center .g-08 .tm-floor { gap: 8px; padding: 8px; } .gceo-game-center .g-08 .tm-zone { padding: 8px 6px; } .gceo-game-center .g-08 .tm-zone-head { padding: 4px; gap: 6px; } .gceo-game-center .g-08 .tm-zone-ico { font-size: 20px; } .gceo-game-center .g-08 .tm-zone-name b { font-size: 13px; } .gceo-game-center .g-08 .tm-emp { padding: 6px; gap: 6px; } .gceo-game-center .g-08 .tm-av { font-size: 22px; } .gceo-game-center .g-08 .tm-mood { font-size: 17px; } .gceo-game-center .g-08 .tm-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-08 .tm-d-grid { grid-template-columns: 1fr; } } @container (max-width: 340px) { .gceo-game-center .g-08 .tm-floor { grid-template-columns: 1fr; } } /* GAME 09 — CEO EMPIRE TYCOON */ .gceo-game-center .g-09 { --g09-violet: #7a7466; --g09-land: color-mix(in srgb, #7fb069 30%, var(--gc-surface)); --g09-sea: color-mix(in srgb, #4a8fc2 26%, var(--gc-surface)); } .gceo-game-center .g-09 .g09-small { font-size: 12.5px; } .gceo-game-center .g-09 .pos { color: var(--gc-emerald); } .gceo-game-center .g-09 .neg { color: var(--gc-risk); } .gceo-game-center .g-09 .g09-hud { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .gceo-game-center .g-09 .g09-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: start; } .gceo-game-center .g-09 .g09-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; } /* map */ .gceo-game-center .g-09 .g09-map { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 16px; overflow: hidden; background: radial-gradient(38% 46% at 26% 55%, var(--g09-land) 0 98%, transparent 100%), radial-gradient(34% 40% at 58% 40%, var(--g09-land) 0 98%, transparent 100%), radial-gradient(30% 42% at 80% 58%, var(--g09-land) 0 98%, transparent 100%), radial-gradient(24% 30% at 70% 22%, var(--g09-land) 0 98%, transparent 100%), radial-gradient(22% 30% at 46% 74%, var(--g09-land) 0 98%, transparent 100%), linear-gradient(0deg, color-mix(in srgb, var(--gc-ink) 5%, transparent) 1px, transparent 1px) 0 0 / 100% 12.5%, linear-gradient(90deg, color-mix(in srgb, var(--gc-ink) 5%, transparent) 1px, transparent 1px) 0 0 / 8% 100%, var(--g09-sea); box-shadow: inset 0 0 0 2px var(--gc-line); } .gceo-game-center .g-09 .g09-routes { position: absolute; inset: 0; width: 100%; height: 100%; } .gceo-game-center .g-09 .g09-routes line { stroke: var(--gc-gold-fill); stroke-width: .6; stroke-dasharray: 1.6 1.2; vector-effect: non-scaling-stroke; stroke-width: 2.5; opacity: .9; } .gceo-game-center .g-09 .g09-pin { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px; z-index: 1; } .gceo-game-center .g-09 .g09-pin b { width: clamp(30px, 6.4cqi, 46px); height: clamp(30px, 6.4cqi, 46px); display: grid; place-items: center; border-radius: 50%; font-size: clamp(16px, 3.6cqi, 26px); background: color-mix(in srgb, var(--gc-surface) 70%, transparent); border: 2px dashed color-mix(in srgb, var(--gc-ink) 30%, transparent); color: var(--gc-muted); font-weight: 800; } .gceo-game-center .g-09 .g09-pin small { font-size: 10px; font-weight: 800; background: color-mix(in srgb, var(--gc-surface) 85%, transparent); color: var(--gc-muted); padding: 0 6px; border-radius: 6px; white-space: nowrap; } .gceo-game-center .g-09 .g09-pin.on b { background: var(--gc-surface); border: 2px solid var(--gc-gold-fill); box-shadow: 0 4px 10px rgba(0,0,0,.25); color: var(--gc-ink); } .gceo-game-center .g-09 .g09-pin.on small { color: var(--gc-ink); } .gceo-game-center .g-09 .g09-pin.new b { animation: g09-drop .7s cubic-bezier(.3,1.6,.5,1); } @keyframes g09-drop { from { transform: translateY(-30px) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } } .gceo-game-center .g-09 .g09-crowd, .gceo-game-center .g-09 .g09-team { position: absolute; font-size: clamp(11px, 2.2cqi, 16px); letter-spacing: -2px; background: color-mix(in srgb, var(--gc-surface) 80%, transparent); border-radius: 999px; padding: 2px 8px 2px 6px; max-width: 46%; overflow: hidden; white-space: nowrap; } .gceo-game-center .g-09 .g09-crowd { left: 8px; bottom: 8px; } .gceo-game-center .g-09 .g09-team { right: 8px; bottom: 8px; } /* ladder */ .gceo-game-center .g-09 .g09-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .gceo-game-center .g-09 .g09-step { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 10px; border: 1.5px solid var(--gc-line); background: var(--gc-surface-2); } .gceo-game-center .g-09 .g09-step-ico { font-size: 20px; width: 26px; text-align: center; } .gceo-game-center .g-09 .g09-step-txt { flex: 1; display: grid; line-height: 1.2; min-width: 0; } .gceo-game-center .g-09 .g09-step-txt small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--gc-muted); font-weight: 700; } .gceo-game-center .g-09 .g09-step-txt b { font-size: 13.5px; } .gceo-game-center .g-09 .g09-step-st { font-weight: 800; font-size: 13px; } .gceo-game-center .g-09 .g09-step.done { background: var(--gc-emerald-soft); border-color: transparent; } .gceo-game-center .g-09 .g09-step.done .g09-step-st { color: var(--gc-emerald); } .gceo-game-center .g-09 .g09-step.next { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-gold-fill) 25%, transparent); } .gceo-game-center .g-09 .g09-step.lock { opacity: .55; } .gceo-game-center .g-09 .g09-ready { display: grid; gap: 6px; border-top: 1px solid var(--gc-line); padding-top: 10px; } .gceo-game-center .g-09 .g09-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; } .gceo-game-center .g-09 .g09-checks small { color: var(--gc-muted); } .gceo-game-center .g-09 .g09-checks .risk { color: var(--gc-warn); } .gceo-game-center .g-09 .g09-checks .no { color: var(--gc-risk); } /* controls */ .gceo-game-center .g-09 .g09-stepper { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; text-align: center; } .gceo-game-center .g-09 .g09-stepper .gc-btn { padding: 0; font-size: 22px; min-height: 48px; } .gceo-game-center .g-09 .g09-stepper small { display: block; font-size: 11.5px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-09 .g09-bignum { font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1.1; } .gceo-game-center .g-09 .g09-quick { justify-content: center; } .gceo-game-center .g-09 .g09-quick .gc-btn { min-height: 44px; min-width: 64px; } .gceo-game-center .g-09 .g09-range { width: 100%; accent-color: var(--gc-gold-fill); min-height: 32px; } .gceo-game-center .g-09 .g09-prods { display: grid; gap: 6px; } .gceo-game-center .g-09 .g09-prod { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); } .gceo-game-center .g-09 .g09-prod.weak { border-color: var(--gc-warn); background: var(--gc-warn-soft); } .gceo-game-center .g-09 .g09-prod.fresh { animation: g09-in .5s ease; } @keyframes g09-in { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } } .gceo-game-center .g-09 .g09-prod-ico { font-size: 22px; } .gceo-game-center .g-09 .g09-prod-txt { flex: 1; display: grid; min-width: 0; line-height: 1.25; font-size: 13px; } .gceo-game-center .g-09 .g09-prod-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-09 .g09-weak { color: var(--gc-warn); font-weight: 700; font-size: 11px; } .gceo-game-center .g-09 .g09-prod .gc-btn.small { min-height: 44px; padding: 6px 10px; } .gceo-game-center .g-09 .g09-lines { display: grid; border: 1px solid var(--gc-line); border-radius: 12px; overflow: hidden; } .gceo-game-center .g-09 .g09-line { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; font-size: 12.5px; } .gceo-game-center .g-09 .g09-line:nth-child(odd) { background: var(--gc-surface-2); } .gceo-game-center .g-09 .g09-line b { white-space: nowrap; font-variant-numeric: tabular-nums; } .gceo-game-center .g-09 .g09-line.total { border-top: 2px solid var(--gc-line); font-weight: 800; font-size: 13.5px; background: var(--gc-surface); } .gceo-game-center .g-09 .g09-ev { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--gc-warn-soft); font-size: 13px; } .gceo-game-center .g-09 .g09-ev.good { background: var(--gc-emerald-soft); } .gceo-game-center .g-09 .g09-ev > span:first-child { font-size: 24px; } .gceo-game-center .g-09 .g09-float { right: 10px; top: -6px; font-size: 14px; } .gceo-game-center .g-09 .g09-float.up { color: var(--gc-emerald); } .gceo-game-center .g-09 .g09-float.down { color: var(--gc-risk); } /* chart */ .gceo-game-center .g-09 .g09-chart { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; height: 170px; align-items: end; padding-top: 4px; } .gceo-game-center .g-09 .g09-bar { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; min-width: 0; } .gceo-game-center .g-09 .g09-bar i { align-self: end; display: flex; align-items: flex-end; background: linear-gradient(180deg, #a9a192, var(--g09-violet)); border-radius: 6px 6px 2px 2px; overflow: hidden; transition: height .6s ease; animation: g09-rise .7s ease; transform-origin: bottom; } .gceo-game-center .g-09 .g09-bar i em { display: block; width: 100%; background: var(--gc-gold-fill); } @keyframes g09-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } .gceo-game-center .g-09 .g09-bar.empty i { display: none; } .gceo-game-center .g-09 .g09-bar.empty { background: repeating-linear-gradient(0deg, transparent 0 8px, color-mix(in srgb, var(--gc-ink) 4%, transparent) 8px 9px); border-radius: 6px; } .gceo-game-center .g-09 .g09-bar small { font-size: 10px; font-weight: 700; color: var(--gc-muted); } .gceo-game-center .g-09 .g09-bar.loss small { color: var(--gc-risk); } .gceo-game-center .g-09 .g09-bar-val { font-size: 9.5px; font-weight: 700; color: var(--gc-muted); white-space: nowrap; overflow: hidden; } .gceo-game-center .g-09 .g09-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-09 .g09-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; } .gceo-game-center .g-09 .g09-legend i.rev { background: var(--g09-violet); } .gceo-game-center .g-09 .g09-legend i.pro { background: var(--gc-gold-fill); } /* popups (content wrapped in a .g-09 element) */ .gceo-game-center .g-09.g09-report { display: grid; gap: 10px; font-size: 14px; } .gceo-game-center .g-09 .g09-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-09 .g09-kpis > div { background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 10px; padding: 6px 8px; display: grid; text-align: center; } .gceo-game-center .g-09 .g09-kpis small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gc-muted); font-weight: 700; } .gceo-game-center .g-09 .g09-kpis b { font-size: 16px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-09 .g09-note { padding: 6px 10px; border-radius: 10px; font-size: 13px; background: var(--gc-surface-2); } .gceo-game-center .g-09 .g09-note.good { background: var(--gc-emerald-soft); } .gceo-game-center .g-09 .g09-note.bad { background: var(--gc-risk-soft); } .gceo-game-center .g-09 .g09-note.warn { background: var(--gc-warn-soft); } .gceo-game-center .g-09 .g09-riskbox { background: var(--gc-risk-soft); color: var(--gc-risk); padding: 8px 10px; border-radius: 10px; font-weight: 600; } .gceo-game-center .g-09 .g09-okbox { background: var(--gc-emerald-soft); padding: 8px 10px; border-radius: 10px; font-weight: 600; } @container (max-width: 1000px) { .gceo-game-center .g-09 .g09-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 760px) { .gceo-game-center .g-09 .g09-top { grid-template-columns: 1fr; } } @container (max-width: 560px) { .gceo-game-center .g-09 .g09-controls { grid-template-columns: 1fr; } .gceo-game-center .g-09 .g09-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-09 .gc-res b { font-size: 15px; } .gceo-game-center .g-09 .g09-map { aspect-ratio: 4 / 3; } .gceo-game-center .g-09 .g09-chart { gap: 2px; height: 130px; } .gceo-game-center .g-09 .g09-bar-val { display: none; } .gceo-game-center .g-09 .g09-bar small { font-size: 8px; letter-spacing: -.3px; } .gceo-game-center .g-09 .g09-pin small { display: none; } .gceo-game-center .g-09 .g09-pin.on small { display: block; font-size: 8.5px; padding: 0 3px; } } /* GAME 10 — CEO Deal Maker. Every selector is scoped to .gceo-game-center .g-10 */ .gceo-game-center .g-10 .g10-small { font-size: 12.5px; } .gceo-game-center .g-10 .g10-bar { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } @container (max-width: 520px) { .gceo-game-center .g-10 .g10-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* progress track */ .gceo-game-center .g-10 .g10-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-10 .g10-track li { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; background: var(--gc-surface); border: 1.5px solid var(--gc-line); font-size: 22px; opacity: .55; } .gceo-game-center .g-10 .g10-track small { font-size: 10.5px; font-weight: 700; white-space: nowrap; color: var(--gc-muted); } .gceo-game-center .g-10 .g10-track li.now { opacity: 1; border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: 0 0 0 2px var(--gc-gold-fill); } .gceo-game-center .g-10 .g10-track li.won { opacity: 1; border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .g-10 .g10-track li.won small { color: var(--gc-emerald-ink); } .gceo-game-center .g-10 .g10-track li.lost { opacity: .85; border-style: dashed; } @container (max-width: 520px) { .gceo-game-center .g-10 .g10-track { gap: 3px; } .gceo-game-center .g-10 .g10-track li { font-size: 18px; padding: 5px 0; } .gceo-game-center .g-10 .g10-track small { font-size: 8.5px; } } /* the table */ .gceo-game-center .g-10 .g10-table { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; border-radius: 22px; overflow: hidden; background: radial-gradient(140% 120% at 50% 0%, #1f5c4a, #0d3528); border: 3px solid #6b4a1f; box-shadow: inset 0 0 0 6px #8a6125, var(--gc-shadow); padding: 18px; } @container (max-width: 680px) { .gceo-game-center .g-10 .g10-table { grid-template-columns: 1fr; padding: 12px; gap: 12px; } } .gceo-game-center .g-10 .g10-them { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; align-content: start; color: #f4eee1; padding: 6px 14px 6px 4px; } .gceo-game-center .g-10 .g10-avatar { grid-row: span 2; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; font-size: 44px; background: #f4eee1; box-shadow: 0 0 0 4px #e3b04b; transition: box-shadow .3s, transform .3s; } .gceo-game-center .g-10 .g10-avatar.mood-0, .gceo-game-center .g-10 .g10-avatar.mood-1 { box-shadow: 0 0 0 4px #f08a8a; animation: g10-shake .4s ease; } .gceo-game-center .g-10 .g10-avatar.mood-4, .gceo-game-center .g-10 .g10-avatar.mood-5 { box-shadow: 0 0 0 4px #74d3ad; } @keyframes g10-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .gceo-game-center .g-10 .g10-who b { display: block; font-family: var(--gc-display); font-size: 19px; } .gceo-game-center .g-10 .g10-who small { font-size: 12.5px; opacity: .85; } .gceo-game-center .g-10 .g10-mood { font-size: 14px; } .gceo-game-center .g-10 .g10-mood span { font-size: 20px; vertical-align: -2px; } .gceo-game-center .g-10 .g10-pat { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; } .gceo-game-center .g-10 .g10-pat i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #e3b04b; display: inline-block; } .gceo-game-center .g-10 .g10-pat i.on { background: #e3b04b; } .gceo-game-center .g-10 .g10-bubble { grid-column: 1 / -1; position: relative; margin-top: 8px; background: #f6f0e3; color: #1d1c19; border-radius: 16px; padding: 10px 14px; font-weight: 600; font-size: 15px; animation: gc-pop .3s ease; } .gceo-game-center .g-10 .g10-bubble::before { content: ""; position: absolute; top: -8px; left: 30px; border: 8px solid transparent; border-top: 0; border-bottom-color: #f6f0e3; } .gceo-game-center .g-10 .g10-contract { --gc-ink: #1d1c19; --gc-white: #111110; --gc-muted: #5e584d; background: #f6f0e3; color: #1d1c19; border: 1px solid rgba(207, 161, 90, .55); box-shadow: inset 0 0 0 5px #f6f0e3, inset 0 0 0 6px rgba(160, 122, 38, .4), 0 8px 20px rgba(0,0,0,.35) !important; border-radius: 6px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; transform: rotate(-.6deg); box-shadow: 0 8px 20px rgba(0,0,0,.35); } .gceo-game-center .g-10 .g10-contract .gc-eyebrow { color: #8a6418; } .gceo-game-center .g-10 .g10-what { font-size: 16px; line-height: 1.3; color: #1d1c19; } .gceo-game-center .g-10 .g10-offer { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border-top: 1px dashed #d5c9ae; border-bottom: 1px dashed #d5c9ae; padding: 6px 0; } .gceo-game-center .g-10 .g10-offer small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #5e584d; } .gceo-game-center .g-10 .g10-offer b { font-size: 28px; font-variant-numeric: tabular-nums; color: #0f5c45; } .gceo-game-center .g-10 .g10-offer span { font-size: 13px; color: #5e584d; } .gceo-game-center .g-10 .g10-terms-on { display: flex; flex-wrap: wrap; gap: 4px; } .gceo-game-center .g-10 .g10-contract .gc-pill.good { background: #e0ece4; color: #0b4a37; white-space: normal; } .gceo-game-center .g-10 .g10-contract .gc-muted { color: #5e584d; } .gceo-game-center .g-10 .g10-mine { background: #f4e6c3; border-radius: 10px; padding: 8px 10px; font-size: 13px; display: grid; gap: 2px; } /* moves */ .gceo-game-center .g-10 .g10-moves-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 16px; } @container (max-width: 680px) { .gceo-game-center .g-10 .g10-moves-grid { grid-template-columns: 1fr; } } .gceo-game-center .g-10 .g10-counter, .gceo-game-center .g-10 .g10-addterms { display: grid; gap: 8px; align-content: start; } .gceo-game-center .g-10 .g10-presets { gap: 6px; } .gceo-game-center .g-10 .g10-preset { min-height: 44px; flex: 1; } .gceo-game-center .g-10 .g10-preset.on { background: var(--gc-ink); color: var(--gc-bg); border-color: var(--gc-ink); } .gceo-game-center .g-10 .g10-amt { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; align-items: center; } .gceo-game-center .g-10 .g10-amt output { text-align: center; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--gc-surface-2); border: 1.5px solid var(--gc-line); border-radius: 12px; padding: 4px; } .gceo-game-center .g-10 .g10-amt .gc-btn { font-size: 22px; padding: 0; } .gceo-game-center .g-10 .g10-termlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px; } .gceo-game-center .g-10 .g10-term { grid-template-columns: auto 1fr; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; font-size: 13.5px; font-weight: 600; } .gceo-game-center .g-10 .g10-term > span:first-child { font-size: 20px; } .gceo-game-center .g-10 .g10-term small { display: block; font-weight: 500; font-size: 11.5px; color: var(--gc-muted); } .gceo-game-center .g-10 .g10-term:disabled:not(.on) { opacity: .5; } .gceo-game-center .g-10 .g10-term.on { opacity: 1; } .gceo-game-center .g-10 .g10-final { justify-content: center; } .gceo-game-center .g-10 .g10-final .gc-btn { flex: 1 1 200px; } .gceo-game-center .g-10 .g10-log { max-height: 150px; } .gceo-game-center .g-10 .g10-log .you { background: var(--gc-gold-soft); } /* GAME 11 — CEO Empire Challenge. Every selector is scoped to .gceo-game-center .g-11 */ .gceo-game-center .g-11 .c11-wrap { display: grid; gap: 12px; min-width: 0; } .gceo-game-center .g-11 .c11-banner { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: center; text-align: center; padding: 10px 14px; border-radius: 14px; background: linear-gradient(90deg, #111110, #2a2418 50%, #111110); color: #f4e6c3; font-family: var(--gc-display); font-weight: 700; letter-spacing: .08em; box-shadow: inset 0 0 0 2px var(--gc-gold-fill); } .gceo-game-center .g-11 .c11-banner.anim { animation: c11-in .5s ease; } .gceo-game-center .g-11 .c11-banner span { font-family: var(--gc-body); font-weight: 600; letter-spacing: 0; font-size: 13.5px; color: #f2c869; } @keyframes c11-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } } .gceo-game-center .g-11 .c11-res { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .gceo-game-center .g-11 .c11-res .gc-res { padding: 7px 9px; } /* ---- 30-day timeline ---- */ .gceo-game-center .g-11 .c11-timeline { background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 12px; display: grid; gap: 6px; } .gceo-game-center .g-11 .c11-tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13.5px; } .gceo-game-center .g-11 .c11-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; } .gceo-game-center .g-11 .c11-tl li { height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--gc-ink) 8%, transparent); display: grid; place-items: center; font-size: 9px; line-height: 1; color: var(--gc-muted); overflow: hidden; } .gceo-game-center .g-11 .c11-tl li.cp { box-shadow: inset 0 -3px 0 var(--gc-gold-fill); } .gceo-game-center .g-11 .c11-tl li.up { background: var(--gc-emerald-soft); color: var(--gc-emerald-ink); } .gceo-game-center .g-11 .c11-tl li.down { background: var(--gc-risk-soft); color: var(--gc-risk); } .gceo-game-center .g-11 .c11-tl li.now { background: var(--gc-gold-fill); color: #111110; box-shadow: 0 0 0 2px var(--gc-gold); } /* ---- layout ---- */ .gceo-game-center .g-11 .c11-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: start; } .gceo-game-center .g-11 .c11-left, .gceo-game-center .g-11 .c11-right { display: grid; gap: 12px; min-width: 0; } @container (max-width: 860px) { .gceo-game-center .g-11 .c11-main { grid-template-columns: 1fr; } } /* ---- storefront scene ---- */ .gceo-game-center .g-11 .c11-scene { --aw1: #8d877b; --aw2: #c9c2b2; --wall: #b9ae98; --sign: #5e584d; --signink: #f4eee1; position: relative; overflow: hidden; border-radius: var(--gc-r); border: 1px solid var(--gc-line); height: 260px; padding: 14px 12px 0; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: end; background: linear-gradient(180deg, color-mix(in srgb, var(--gc-emerald) 16%, var(--gc-surface)) 0%, var(--gc-surface-2) 70%); transition: background .6s; } .gceo-game-center .g-11 .c11-scene.lv2 { --aw1: #0f5c45; --aw2: #f4eee1; --wall: #d8cbb0; --sign: #0f5c45; } .gceo-game-center .g-11 .c11-scene.lv3 { --aw1: #0f5c45; --aw2: #e3b04b; --wall: #e6d7b6; --sign: #111110; --signink: #f2c869; } .gceo-game-center .g-11 .c11-scene.lv4 { --aw1: #111110; --aw2: #e3b04b; --wall: #efe2c4; --sign: #111110; --signink: #f2c869; } .gceo-game-center .g-11 .c11-scene.lv5 { --aw1: #8a6418; --aw2: #f2c869; --wall: #f6ead2; --sign: linear-gradient(90deg, #8a6418, #e3b04b, #8a6418); --signink: #111110; background: radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--gc-gold-fill) 35%, transparent), transparent 70%), var(--gc-surface-2); } .gceo-game-center .g-11 .c11-bldg { width: min(100%, 400px); display: grid; position: relative; z-index: 1; transition: transform .4s; } .gceo-game-center .g-11 .c11-sign { justify-self: center; display: flex; gap: 8px; align-items: center; max-width: 100%; padding: 6px 14px; border-radius: 10px 10px 4px 4px; background: var(--sign); color: var(--signink); box-shadow: 0 2px 0 rgba(0,0,0,.25); min-width: 0; } .gceo-game-center .g-11 .c11-sign b { font-family: var(--gc-display); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .gceo-game-center .g-11 .c11-sign small { font-size: 11px; letter-spacing: 1px; white-space: nowrap; } .gceo-game-center .g-11 .c11-sign-ic { font-size: 18px; } .gceo-game-center .g-11 .lv1 .c11-sign { transform: rotate(-2deg); opacity: .9; } .gceo-game-center .g-11 .lv3 .c11-sign, .gceo-game-center .g-11 .lv4 .c11-sign, .gceo-game-center .g-11 .lv5 .c11-sign { box-shadow: 0 0 0 2px #e3b04b, 0 0 18px rgba(227,176,75,.45); } .gceo-game-center .g-11 .c11-awning { height: 22px; margin-top: 6px; border-radius: 6px 6px 12px 12px; background: repeating-linear-gradient(90deg, var(--aw1) 0 22px, var(--aw2) 22px 44px); box-shadow: 0 4px 0 rgba(0,0,0,.12); } .gceo-game-center .g-11 .c11-front { display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: 8px; background: var(--wall); padding: 10px 10px 0; border-radius: 0 0 4px 4px; min-height: 118px; } .gceo-game-center .g-11 .c11-win { background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(214,234,226,.6)); border: 3px solid rgba(17,17,16,.55); border-radius: 6px; margin-bottom: 10px; padding: 4px; display: grid; align-content: end; min-width: 0; } .gceo-game-center .g-11 .c11-shelf { display: flex; flex-wrap: wrap; gap: 0 2px; font-size: 15px; line-height: 1.25; border-bottom: 3px solid #8a6418; justify-content: center; min-height: 22px; } .gceo-game-center .g-11 .c11-shelf em { font-size: 11px; color: #5e584d; } .gceo-game-center .g-11 .c11-door { background: linear-gradient(180deg, #2a2418, #111110); border-radius: 26px 26px 0 0; display: grid; align-items: end; justify-items: center; padding: 6px 2px; border: 3px solid rgba(17,17,16,.55); border-bottom: 0; } .gceo-game-center .g-11 .c11-staff { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; font-size: 17px; line-height: 1.15; } .gceo-game-center .g-11 .c11-deco { align-content: center; justify-items: center; gap: 2px; font-size: 18px; text-align: center; } .gceo-game-center .g-11 .c11-tag { font-size: 10px; font-weight: 800; background: #111110; color: #f2c869; border-radius: 999px; padding: 1px 6px; white-space: nowrap; } .gceo-game-center .g-11 .c11-bldg2 { position: absolute; right: 8px; bottom: 34px; width: 64px; height: 92px; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(180deg, #111110 0 14px, #e3b04b 14px 16px); display: grid; place-items: start center; padding-top: 6px; color: #f2c869; font-size: 12px; } .gceo-game-center .g-11 .c11-crown { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 22px; animation: c11-bob 2.4s ease-in-out infinite; } @keyframes c11-bob { 50% { transform: translate(-50%, -3px); } } .gceo-game-center .g-11 .c11-street { width: 100%; height: 34px; display: flex; align-items: center; justify-content: center; gap: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--gc-ink) 22%, transparent) 0 18px, transparent 18px 30px) bottom/100% 3px no-repeat, color-mix(in srgb, var(--gc-ink) 10%, var(--gc-surface-2)); font-size: 20px; position: relative; z-index: 2; } .gceo-game-center .g-11 .c11-scene.anim .c11-street span { animation: c11-walk .5s ease both; animation-delay: calc(var(--i, 0) * 60ms); } .gceo-game-center .g-11 .c11-buzz { margin-left: 6px; } @keyframes c11-walk { from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } } .gceo-game-center .g-11 .c11-floats { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; } .gceo-game-center .g-11 .c11-floats .gc-float { position: static; background: var(--gc-ink); color: var(--gc-bg); padding: 4px 10px; border-radius: 999px; font-size: 14px; } /* ---- report & log ---- */ .gceo-game-center .g-11 .c11-rep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-11 .c11-rep > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--gc-surface-2); border-radius: 10px; font-size: 13px; min-width: 0; } .gceo-game-center .g-11 .c11-rep span { color: var(--gc-muted); } .gceo-game-center .g-11 .c11-rep b { font-variant-numeric: tabular-nums; white-space: nowrap; } .gceo-game-center .g-11 .pos { color: var(--gc-emerald-ink); } .gceo-game-center .g-11 .neg { color: var(--gc-risk); } .gceo-game-center .g-11 .c11-warn { font-size: 13px; font-weight: 600; color: var(--gc-warn); background: var(--gc-warn-soft); border-radius: 10px; padding: 6px 10px; } .gceo-game-center .g-11 .c11-logp .gc-log { max-height: 170px; } .gceo-game-center .g-11 .c11-logp small { color: var(--gc-muted); font-weight: 700; margin-right: 4px; } /* ---- tabs ---- */ .gceo-game-center .g-11 .c11-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 6px; } .gceo-game-center .g-11 .c11-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--gc-line); background: var(--gc-surface); font-size: 13px; font-weight: 700; color: var(--gc-ink); } .gceo-game-center .g-11 .c11-tab:hover { border-color: var(--gc-emerald); } .gceo-game-center .g-11 .c11-tab.on { background: var(--gc-ink); color: var(--gc-bg); border-color: var(--gc-ink); } .gceo-game-center .g-11 .c11-badge { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gc-risk); color: #fff; font-style: normal; font-size: 11.5px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--gc-bg); } @container (max-width: 520px) { .gceo-game-center .g-11 .c11-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gceo-game-center .g-11 .c11-tab { flex-direction: column; gap: 0; font-size: 11.5px; padding: 4px; } } /* ---- panel contents ---- */ .gceo-game-center .g-11 .c11-panel { min-height: 280px; } .gceo-game-center .g-11 .c11-card { background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; min-width: 0; } .gceo-game-center .g-11 .c11-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; } .gceo-game-center .g-11 .c11-btns { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-11 .c11-btns .gc-btn.small, .gceo-game-center .g-11 .c11-seg .gc-btn.small, .gceo-game-center .g-11 .c11-stepper .gc-btn.small, .gceo-game-center .g-11 .c11-speed .gc-btn.small { min-height: 44px; } .gceo-game-center .g-11 .c11-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--gc-muted); } .gceo-game-center .g-11 .c11-facts b { color: var(--gc-ink); } .gceo-game-center .g-11 .c11-note { font-size: 13.5px; background: var(--gc-gold-soft); border-radius: 10px; padding: 8px 12px; } .gceo-game-center .g-11 .c11-h4 { font-size: 14px; font-weight: 800; margin: 4px 0 0; } .gceo-game-center .g-11 .c11-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 26px 10px; font-size: 34px; } .gceo-game-center .g-11 .c11-empty p { font-size: 14px; color: var(--gc-muted); max-width: 36ch; } .gceo-game-center .g-11 .c11-price { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .gceo-game-center .g-11 .c11-price-name { display: grid; min-width: 0; } .gceo-game-center .g-11 .c11-stepper { display: flex; align-items: center; gap: 6px; } .gceo-game-center .g-11 .c11-stepper .gc-btn { min-width: 44px; padding: 6px; font-size: 18px; } .gceo-game-center .g-11 .c11-pr { min-width: 48px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-11 .c11-mood { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12.5px; } .gceo-game-center .g-11 .c11-mood .gc-pill { white-space: normal; } .gceo-game-center .g-11 .c11-seg { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-11 .c11-staff-card.tired { border-color: var(--gc-risk); } .gceo-game-center .g-11 .c11-quote { font-style: italic; background: var(--gc-surface); border-left: 3px solid var(--gc-gold-fill); padding: 6px 10px; border-radius: 0 8px 8px 0; } .gceo-game-center .g-11 .c11-msg.complaint { border-left: 4px solid var(--gc-risk); } .gceo-game-center .g-11 .c11-msg.question { border-left: 4px solid var(--gc-gold-fill); } .gceo-game-center .g-11 .c11-msg.review { border-left: 4px solid var(--gc-emerald); } .gceo-game-center .g-11 .c11-crisis { border: 2px solid var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-11 .c11-bills { display: grid; gap: 6px; } .gceo-game-center .g-11 .c11-bill { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 10px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 10px; font-size: 13.5px; } .gceo-game-center .g-11 .c11-bill.soon { border-color: #d28a1c; background: var(--gc-warn-soft); } .gceo-game-center .g-11 .c11-bill.paid { opacity: .75; } .gceo-game-center .g-11 .c11-exp.locked { opacity: .7; } @container (max-width: 520px) { .gceo-game-center .g-11 .c11-rep { grid-template-columns: 1fr; } .gceo-game-center .g-11 .c11-bill { grid-template-columns: minmax(0, 1fr) auto; } .gceo-game-center .g-11 .c11-bill > :last-child { grid-column: 1 / -1; justify-self: start; } .gceo-game-center .g-11 .c11-scene { height: 236px; } .gceo-game-center .g-11 .c11-front { grid-template-columns: 1.2fr .8fr 1fr; gap: 5px; padding: 8px 6px 0; } .gceo-game-center .g-11 .c11-bldg2 { width: 44px; height: 70px; font-size: 10px; right: 4px; } .gceo-game-center .g-11 .c11-res .gc-res b { font-size: 15px; } } /* ---- day controls (stick to the bottom of the screen while playing) ---- */ .gceo-game-center .g-11 .c11-ctrl { position: sticky; bottom: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--gc-surface) 92%, transparent); border: 1px solid var(--gc-line); box-shadow: var(--gc-shadow); backdrop-filter: blur(6px); } .gceo-game-center .g-11 .c11-next small { font-weight: 600; opacity: .75; font-size: 12.5px; } .gceo-game-center .g-11 .c11-speed { display: flex; gap: 4px; } @container (max-width: 520px) { .gceo-game-center .g-11 .c11-next { flex: 1 1 100%; } .gceo-game-center .g-11 .c11-ctrl { padding: 8px; gap: 6px; } } /* GAME 12 — Business Plan Builder. Every selector is scoped to .gceo-game-center .g-12 */ .gceo-game-center .g-12 { --bp-gap: 14px; } .gceo-game-center .g-12 .bp-wrap { display: grid; gap: var(--bp-gap); min-width: 0; } .gceo-game-center .g-12 .bp-hud { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } @container (max-width: 900px) { .gceo-game-center .g-12 .bp-hud { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } .gceo-game-center .g-12 .bp-small { font-size: 13px; } .gceo-game-center .g-12 .bp-sub { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-gold); margin: 6px 0 2px; } /* steps bar */ .gceo-game-center .g-12 .bp-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gc-line); padding-bottom: 12px; } .gceo-game-center .g-12 .bp-steps { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .gceo-game-center .g-12 .bp-step { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 6px; border: 1px solid var(--gc-line-soft); border-radius: 999px; background: var(--gc-surface); color: var(--gc-ink); font-size: 13px; font-weight: 500; } .gceo-game-center .g-12 .bp-step > .gc-ic { width: 16px; height: 16px; } .gceo-game-center .g-12 .bp-step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gc-line); font-size: 12px; font-weight: 600; color: var(--gc-muted); flex: none; } .gceo-game-center .g-12 .bp-step-n .gc-ic { width: 14px; height: 14px; vertical-align: 0; color: var(--gc-emerald-ink); } .gceo-game-center .g-12 .bp-step.done .bp-step-n { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .g-12 .bp-step.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); color: var(--gc-white); } .gceo-game-center .g-12 .bp-step.on .bp-step-n { border-color: var(--gc-gold-fill); color: var(--gc-gold); } .gceo-game-center .g-12 .bp-step:hover:not(:disabled) { border-color: var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-step:disabled { opacity: .4; } .gceo-game-center .g-12 .bp-tools { display: flex; flex-wrap: wrap; gap: 8px; } .gceo-game-center .g-12 .bp-lockbar, .gceo-game-center .g-12 .bp-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--gc-line); border-left: 2px solid var(--gc-gold-fill); border-radius: var(--gc-r); background: var(--gc-surface-2); font-size: 14px; } .gceo-game-center .g-12 .bp-lockbar .gc-ic, .gceo-game-center .g-12 .bp-note .gc-ic { margin-top: 3px; } .gceo-game-center .g-12 .bp-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--gc-line-soft); } /* sections */ .gceo-game-center .g-12 .bp-sec { display: grid; gap: var(--bp-gap); min-width: 0; } .gceo-game-center .g-12 .bp-sec-head { display: grid; gap: 4px; } .gceo-game-center .g-12 .bp-h { font-family: var(--gc-display); font-weight: 600; font-size: clamp(20px, 3vw, 26px); letter-spacing: .04em; } .gceo-game-center .g-12 .bp-h4 { font-family: var(--gc-display); font-weight: 600; font-size: 16px; letter-spacing: .04em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--gc-white); } .gceo-game-center .g-12 .bp-h4 .gc-ic { width: 18px; height: 18px; vertical-align: 0; } .gceo-game-center .g-12 .bp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--bp-gap); align-items: start; } .gceo-game-center .g-12 .bp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; align-items: start; } .gceo-game-center .g-12 .bp-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; align-items: start; } /* form fields */ .gceo-game-center .g-12 .bp-fld { display: grid; gap: 6px; min-width: 0; } .gceo-game-center .g-12 .bp-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-muted); } .gceo-game-center .g-12 .bp-hint { font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-12 .bp-in { width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--gc-line); border-radius: 4px; background: var(--gc-surface-2); color: var(--gc-white); font: inherit; font-size: 15px; } .gceo-game-center .g-12 textarea.bp-in { resize: vertical; line-height: 1.45; } .gceo-game-center .g-12 select.bp-in { appearance: auto; } .gceo-game-center .g-12 .bp-in::placeholder { color: var(--gc-faint); } .gceo-game-center .g-12 .bp-in:focus { outline: 2px solid var(--gc-gold-fill); outline-offset: 1px; border-color: var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-in:disabled { opacity: .6; cursor: not-allowed; } .gceo-game-center .g-12 .bp-money { position: relative; display: block; min-width: 0; } .gceo-game-center .g-12 .bp-money > span { position: absolute; left: 11px; top: 50%; translate: 0 -50%; color: var(--gc-gold); font-weight: 600; pointer-events: none; } .gceo-game-center .g-12 .bp-money .bp-in { padding-left: 24px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-12 .bp-static { min-height: 44px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14.5px; } .gceo-game-center .g-12 .bp-link { background: none; border: 0; color: var(--gc-gold); text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; min-height: 44px; font-size: 13px; } /* step 1: business paths */ .gceo-game-center .g-12 .bp-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--bp-gap); } .gceo-game-center .g-12 .bp-path { display: grid; gap: 8px; align-content: start; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 14px; } .gceo-game-center .g-12 .bp-path-head { display: flex; gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--gc-line-soft); } .gceo-game-center .g-12 .bp-path-head b { display: block; font-family: var(--gc-display); font-weight: 600; letter-spacing: .03em; color: var(--gc-white); } .gceo-game-center .g-12 .bp-path-head small { color: var(--gc-muted); font-size: 12.5px; } .gceo-game-center .g-12 .bp-biz { display: flex; gap: 12px; align-items: flex-start; text-align: left; min-height: 64px; padding: 10px 12px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface-2); color: var(--gc-ink); } .gceo-game-center .g-12 .bp-biz > .gc-ic { width: 22px; height: 22px; margin-top: 2px; } .gceo-game-center .g-12 .bp-biz b { display: block; color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-12 .bp-biz small { display: block; color: var(--gc-muted); font-size: 12.5px; line-height: 1.4; } .gceo-game-center .g-12 .bp-biz:hover:not(:disabled) { border-color: var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-biz.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-12 .bp-biz:disabled { opacity: .5; } .gceo-game-center .g-12 .bp-seg { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-12 .bp-chosen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; } .gceo-game-center .g-12 .bp-chosen .gc-ic { color: var(--gc-emerald-ink); } /* step 2: research */ .gceo-game-center .g-12 .bp-segs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; } .gceo-game-center .g-12 .bp-segcard { display: grid; gap: 6px; align-content: start; text-align: left; padding: 12px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface-2); color: var(--gc-ink); min-height: 44px; } .gceo-game-center .g-12 .bp-segcard:hover:not(:disabled) { border-color: var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-segcard.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-segtop { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; } .gceo-game-center .g-12 .bp-segtop b { color: var(--gc-white); font-size: 15px; } .gceo-game-center .g-12 .bp-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; border-bottom: 1px dashed var(--gc-line-soft); padding-bottom: 4px; } .gceo-game-center .g-12 .bp-kv small { color: var(--gc-muted); } .gceo-game-center .g-12 .bp-kv b { font-variant-numeric: tabular-nums; color: var(--gc-white); } .gceo-game-center .g-12 .bp-segnote { font-size: 13px; color: var(--gc-muted); line-height: 1.45; } .gceo-game-center .g-12 .bp-chfit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .gceo-game-center .g-12 .bp-chfit > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gc-line); } .gceo-game-center .g-12 .bp-chfit > span .gc-ic { width: 14px; height: 14px; vertical-align: 0; } .gceo-game-center .g-12 .bp-chfit small { color: var(--gc-faint); font-size: 11.5px; } .gceo-game-center .g-12 .bp-comp td, .gceo-game-center .g-12 .bp-comp th { white-space: normal; } .gceo-game-center .g-12 .bp-comp b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-12 .bp-avg td { border-top: 1px solid var(--gc-line); font-weight: 500; } .gceo-game-center .g-12 .bp-season { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 110px; padding: 6px 4px 0; border-bottom: 1px solid var(--gc-line); } .gceo-game-center .g-12 .bp-sbar { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; justify-items: center; gap: 2px; } .gceo-game-center .g-12 .bp-sbar i { display: block; width: 100%; max-width: 22px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(207, 161, 90, .55), rgba(207, 161, 90, .2)); border: 1px solid rgba(207, 161, 90, .6); border-bottom: 0; } .gceo-game-center .g-12 .bp-sbar.hi i { background: linear-gradient(180deg, var(--gc-gold-fill), rgba(207, 161, 90, .45)); } .gceo-game-center .g-12 .bp-sbar.lo i { background: var(--gc-track); border-color: var(--gc-line-soft); } .gceo-game-center .g-12 .bp-sbar small { font-size: 10.5px; color: var(--gc-muted); line-height: 1.6; } .gceo-game-center .g-12 .bp-pos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; } .gceo-game-center .g-12 .bp-poscard, .gceo-game-center .g-12 .bp-staffcard { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 12px; min-height: 44px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface-2); color: var(--gc-ink); } .gceo-game-center .g-12 .bp-poscard b, .gceo-game-center .g-12 .bp-staffcard b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-12 .bp-poscard small, .gceo-game-center .g-12 .bp-staffcard small { color: var(--gc-muted); font-size: 12.5px; line-height: 1.4; } .gceo-game-center .g-12 .bp-staffcard span { font-size: 12.5px; color: var(--gc-ink); font-variant-numeric: tabular-nums; } .gceo-game-center .g-12 .bp-poscard:hover:not(:disabled), .gceo-game-center .g-12 .bp-staffcard:hover:not(:disabled) { border-color: var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-poscard.on, .gceo-game-center .g-12 .bp-staffcard.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-staff { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; } /* step 3: offer */ .gceo-game-center .g-12 .bp-diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; } .gceo-game-center .g-12 .bp-diff { display: flex; gap: 10px; align-items: center; text-align: left; min-height: 48px; padding: 8px 12px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface-2); color: var(--gc-ink); font-size: 13.5px; } .gceo-game-center .g-12 .bp-diff:hover:not(:disabled) { border-color: var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-diff.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); color: var(--gc-white); } .gceo-game-center .g-12 .bp-live li .gc-ic { width: 15px; height: 15px; } /* step 4: budget */ .gceo-game-center .g-12 .bp-budget { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--bp-gap); align-items: start; } .gceo-game-center .g-12 .bp-col { display: grid; gap: var(--bp-gap); min-width: 0; align-content: start; } .gceo-game-center .g-12 .bp-side { position: sticky; top: 8px; } @container (max-width: 860px) { .gceo-game-center .g-12 .bp-budget { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-12 .bp-side { position: static; } } .gceo-game-center .g-12 .bp-lines { display: grid; gap: 6px; } .gceo-game-center .g-12 .bp-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px auto; gap: 10px; align-items: center; padding: 6px 8px 6px 6px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface-2); } .gceo-game-center .g-12 .bp-line.on { border-color: var(--gc-line); } .gceo-game-center .g-12 .bp-line:not(.on) .bp-line-t { color: var(--gc-muted); } .gceo-game-center .g-12 .bp-line-t { font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .gceo-game-center .g-12 .bp-check { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--gc-gold-fill); background: transparent; } .gceo-game-center .g-12 .bp-line.on .bp-check { background: var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-line.on .bp-check .gc-ic { color: var(--gc-on-gold); width: 20px; height: 20px; vertical-align: 0; stroke-width: 2.4; } .gceo-game-center .g-12 .bp-x { min-width: 44px; min-height: 44px; padding: 6px; } .gceo-game-center .g-12 .bp-addline { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; } .gceo-game-center .g-12 .bp-total { font-size: 15px; text-align: right; } .gceo-game-center .g-12 .bp-total b { color: var(--gc-white); font-size: 17px; } @container (max-width: 520px) { .gceo-game-center .g-12 .bp-line { grid-template-columns: 44px minmax(0, 1fr) auto; } .gceo-game-center .g-12 .bp-line .bp-money { grid-column: 2 / 3; } .gceo-game-center .g-12 .bp-line .bp-x { grid-column: 3; grid-row: 1; } .gceo-game-center .g-12 .bp-addline { grid-template-columns: minmax(0, 1fr) 110px; } .gceo-game-center .g-12 .bp-addline .gc-btn { grid-column: 1 / -1; } } .gceo-game-center .g-12 .bp-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border-left: 2px solid var(--gc-line-soft); background: var(--gc-surface-2); border-radius: 0 4px 4px 0; } .gceo-game-center .g-12 .bp-mrow span { font-size: 13px; color: var(--gc-muted); } .gceo-game-center .g-12 .bp-mrow b { font-size: 16px; color: var(--gc-white); font-variant-numeric: tabular-nums; text-align: right; } .gceo-game-center .g-12 .bp-mrow small { grid-column: 1 / -1; font-size: 11.5px; color: var(--gc-faint); } .gceo-game-center .g-12 .bp-mrow.good { border-left-color: var(--gc-emerald); } .gceo-game-center .g-12 .bp-mrow.good b { color: var(--gc-emerald-ink); } .gceo-game-center .g-12 .bp-mrow.warn { border-left-color: var(--gc-warn); } .gceo-game-center .g-12 .bp-mrow.warn b { color: var(--gc-warn); } .gceo-game-center .g-12 .bp-mrow.bad { border-left-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-12 .bp-mrow.bad b { color: var(--gc-risk); } .gceo-game-center .g-12 .bp-live-panel { gap: 6px; } .gceo-game-center .g-12 .bp-chart { width: 100%; height: auto; display: block; } .gceo-game-center .g-12 .bp-rev { fill: rgba(207, 161, 90, .35); stroke: #cfa15a; stroke-width: .8; } .gceo-game-center .g-12 .bp-cost { fill: none; stroke: #e58a7a; stroke-width: 1.6; } .gceo-game-center .g-12 .bp-costdot { fill: #e58a7a; } .gceo-game-center .g-12 .bp-axis { stroke: rgba(244, 238, 225, .2); } .gceo-game-center .g-12 .bp-mlab { fill: #a9a192; font-size: 9px; text-anchor: middle; font-family: var(--gc-body); } .gceo-game-center .g-12 .bp-legend { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--gc-muted); flex-wrap: wrap; } .gceo-game-center .g-12 .bp-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; } .gceo-game-center .g-12 .bp-key.rev { background: rgba(207, 161, 90, .45); border: 1px solid #cfa15a; } .gceo-game-center .g-12 .bp-key.cost { height: 2px; background: #e58a7a; margin-left: 10px; } .gceo-game-center .g-12 .bp-ptable { font-size: 12.5px; } .gceo-game-center .g-12 .bp-ptable th, .gceo-game-center .g-12 .bp-ptable td { padding: 6px 6px; white-space: nowrap; text-align: right; } .gceo-game-center .g-12 .bp-ptable th:first-child, .gceo-game-center .g-12 .bp-ptable td:first-child { text-align: left; } .gceo-game-center .g-12 .neg { color: var(--gc-risk); } /* step 5: marketing */ .gceo-game-center .g-12 .bp-chans { display: grid; gap: 10px; } .gceo-game-center .g-12 .bp-chan { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface); } .gceo-game-center .g-12 .bp-chan.on { border-color: var(--gc-line); border-left: 2px solid var(--gc-gold-fill); } .gceo-game-center .g-12 .bp-chan-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .gceo-game-center .g-12 .bp-chan-head b { color: var(--gc-white); font-weight: 600; margin-right: auto; } .gceo-game-center .g-12 .bp-lv { display: grid; grid-template-columns: 70px repeat(2, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-12 .bp-lv .gc-btn { flex-direction: column; gap: 2px; line-height: 1.25; text-align: center; min-height: 52px; } .gceo-game-center .g-12 .bp-lv .gc-btn small { font-size: 11px; color: var(--gc-muted); font-variant-numeric: tabular-nums; } .gceo-game-center .g-12 .bp-chan-out { font-size: 13.5px; color: var(--gc-muted); } .gceo-game-center .g-12 .bp-chan-out b { color: var(--gc-white); } @container (max-width: 420px) { .gceo-game-center .g-12 .bp-lv { grid-template-columns: 1fr 1fr; } .gceo-game-center .g-12 .bp-lv .gc-btn:first-child { grid-column: 1 / -1; min-height: 44px; } } .gceo-game-center .g-12 .bp-goal { gap: 10px; } /* step 6: submit, documents (cream paper) */ .gceo-game-center .g-12 .bp-submit { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-color: rgba(207, 161, 90, .55); } .gceo-game-center .g-12 .bp-submit b { font-family: var(--gc-display); font-size: 17px; letter-spacing: .03em; color: var(--gc-white); } .gceo-game-center .g-12 .bp-prev summary { cursor: pointer; display: flex; gap: 10px; align-items: center; min-height: 40px; font-weight: 500; } .gceo-game-center .g-12 .bp-prev[open] summary { margin-bottom: 10px; } .gceo-game-center .g-12 .bp-doc, .gceo-game-center .g-12 .bp-eval { border-radius: 4px; padding: clamp(18px, 4vw, 40px) clamp(16px, 4.5vw, 48px); display: grid; gap: 16px; min-width: 0; background: radial-gradient(120% 70% at 50% 0%, #fbf7ee, transparent 70%), linear-gradient(180deg, #f7f1e4, #f1e9d7); box-shadow: inset 0 0 0 6px #f6f0e3, inset 0 0 0 7px rgba(160, 122, 38, .5), inset 0 0 0 9px #f6f0e3, inset 0 0 0 10px rgba(160, 122, 38, .22), 0 14px 34px rgba(0, 0, 0, .35); } .gceo-game-center .g-12 .bp-doc-head { display: grid; gap: 6px; justify-items: center; text-align: center; } .gceo-game-center .g-12 .bp-doc-eyebrow { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: #8a6418; } .gceo-game-center .g-12 .bp-doc-title { font-family: var(--gc-display); font-weight: 600; font-size: clamp(22px, 4vw, 32px); letter-spacing: .05em; color: #111110; line-height: 1.15; overflow-wrap: anywhere; } .gceo-game-center .g-12 .bp-doc-sub { color: #5e584d; font-size: 14px; } .gceo-game-center .g-12 .bp-doc-rule { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, #a07a26, transparent); margin-top: 4px; } .gceo-game-center .g-12 .bp-doc-sec { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(160, 122, 38, .28); } .gceo-game-center .g-12 .bp-doc-sec h4 { font-family: var(--gc-display); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #8a6418; } .gceo-game-center .g-12 .bp-doc-sec p { font-size: 15px; line-height: 1.65; color: #1d1c19; } .gceo-game-center .g-12 .bp-doc dl { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr); gap: 6px 18px; margin: 0; font-size: 14px; } .gceo-game-center .g-12 .bp-doc dt { font-weight: 600; color: #5e584d; } .gceo-game-center .g-12 .bp-doc dd { margin: 0; color: #1d1c19; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } @container (max-width: 560px) { .gceo-game-center .g-12 .bp-doc dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .gceo-game-center .g-12 .bp-doc dd { margin-bottom: 8px; } } .gceo-game-center .g-12 .bp-doc-foot { font-size: 12px; color: #8a8170; text-align: center; font-style: italic; padding-top: 10px; border-top: 1px solid rgba(160, 122, 38, .28); } /* evaluation report */ .gceo-game-center .g-12 .bp-eval-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(160, 122, 38, .3); } .gceo-game-center .g-12 .bp-stamp { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 2px solid currentColor; border-radius: 4px; font-family: var(--gc-display); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; rotate: -2deg; box-shadow: inset 0 0 0 2px #f6f0e3, inset 0 0 0 3px currentColor; } .gceo-game-center .g-12 .bp-stamp .gc-ic { color: currentColor; width: 20px; height: 20px; vertical-align: 0; } .gceo-game-center .g-12 .bp-stamp.good { color: #0f5c45; } .gceo-game-center .g-12 .bp-stamp.warn { color: #8a5a0c; } .gceo-game-center .g-12 .bp-stamp.bad { color: #a83232; } .gceo-game-center .g-12 .bp-eval-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 22px; } @container (max-width: 760px) { .gceo-game-center .g-12 .bp-eval-grid { grid-template-columns: minmax(0, 1fr); } } .gceo-game-center .g-12 .bp-score { display: grid; gap: 10px; align-content: start; } .gceo-game-center .g-12 .bp-score > small, .gceo-game-center .g-12 .bp-outlook small { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a6418; } .gceo-game-center .g-12 .bp-score > b { font-family: var(--gc-display); font-size: 52px; line-height: 1; color: #111110; font-weight: 600; } .gceo-game-center .g-12 .bp-score > b span { font-size: 20px; color: #5e584d; } .gceo-game-center .g-12 .bp-cats { display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed rgba(160, 122, 38, .35); } .gceo-game-center .g-12 .bp-outlook { display: grid; gap: 4px; } .gceo-game-center .g-12 .bp-outlook b { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gc-display); font-size: 19px; letter-spacing: .04em; } .gceo-game-center .g-12 .bp-outlook b .gc-ic { color: currentColor; } .gceo-game-center .g-12 .bp-outlook b.good { color: #0f5c45; } .gceo-game-center .g-12 .bp-outlook b.warn { color: #8a5a0c; } .gceo-game-center .g-12 .bp-outlook b.bad { color: #a83232; } .gceo-game-center .g-12 .bp-crit { display: grid; gap: 8px; } .gceo-game-center .g-12 .bp-critrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(160, 122, 38, .25); border-radius: 4px; } .gceo-game-center .g-12 .bp-critrow > div { display: grid; gap: 2px; } .gceo-game-center .g-12 .bp-critrow b { color: #111110; font-weight: 600; } .gceo-game-center .g-12 .bp-critrow small { color: #5e584d; font-size: 12px; } .gceo-game-center .g-12 .bp-critval { font-variant-numeric: tabular-nums; font-size: 13.5px; color: #1d1c19; text-align: right; } .gceo-game-center .g-12 .bp-critrow .gc-pill { grid-column: 1 / -1; justify-self: start; } .gceo-game-center .g-12 .bp-why { color: #5e584d; margin-top: 8px; } .gceo-game-center .g-12 .bp-fb { display: grid; gap: 6px; } .gceo-game-center .g-12 .bp-fblist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .gceo-game-center .g-12 .bp-fblist li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 0 4px 4px 0; border-left: 3px solid; font-size: 14px; line-height: 1.5; } .gceo-game-center .g-12 .bp-fblist li .gc-ic { margin-top: 2px; color: currentColor; flex: none; } .gceo-game-center .g-12 .bp-fblist li.bad { background: #f7e3df; border-color: #a83232; color: #5a1a1a; } .gceo-game-center .g-12 .bp-fblist li.warn { background: #f6ead2; border-color: #8a5a0c; color: #4a3207; } .gceo-game-center .g-12 .bp-fblist li.good { background: #e0ece4; border-color: #0f5c45; color: #0b3f30; } .gceo-game-center .g-12 .bp-fblist li b { font-weight: 600; } .gceo-game-center .g-12 .bp-fact { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #3d3a33; background: rgba(255, 255, 255, .5); border: 1px solid rgba(160, 122, 38, .3); border-radius: 4px; padding: 10px 14px; } .gceo-game-center .g-12 .bp-fact .gc-ic { margin-top: 2px; } .gceo-game-center .g-12 .bp-eval-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 4px; } .gceo-game-center .g-12 .bp-eval .gc-sub, .gceo-game-center .g-12 .bp-eval .bp-sub { color: #8a6418; } @container (max-width: 560px) { .gceo-game-center .g-12 .bp-step { padding: 4px; border-radius: 50%; } .gceo-game-center .g-12 .bp-step > .gc-ic { display: none; } .gceo-game-center .g-12 .bp-step-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gceo-game-center .g-12 .bp-step-n { width: 34px; height: 34px; } .gceo-game-center .g-12 .bp-steps { width: 100%; justify-content: space-between; } .gceo-game-center .g-12 .bp-step.on .bp-step-n { background: var(--gc-gold-fill); color: var(--gc-on-gold); } .gceo-game-center .g-12 .bp-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-12 .bp-hud .gc-res:first-child { grid-column: 1 / -1; } .gceo-game-center .g-12 .bp-score > b { font-size: 44px; } .gceo-game-center .g-12 .bp-submit .gc-btn { width: 100%; } .gceo-game-center .g-12 .bp-eval-actions .gc-btn { width: 100%; } } /* GAME 13 — Logo Lab. Every selector is scoped to .gceo-game-center .g-13 */ .gceo-game-center .g-13 .l13 { display: grid; gap: 14px; } .gceo-game-center .g-13 .l13-hud { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .gceo-game-center .g-13 .l13-h { font-family: var(--gc-display); font-weight: 600; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: .04em; line-height: 1.15; color: var(--gc-white); } .gceo-game-center .g-13 .l13-small { font-size: 12.5px; line-height: 1.5; } .gceo-game-center .g-13 .l13-small .gc-ic { width: 14px; height: 14px; } .gceo-game-center .g-13 .l13-lbl { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gc-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .gceo-game-center .g-13 .l13-lbl .gc-muted { letter-spacing: .02em; text-transform: none; font-weight: 500; } .gceo-game-center .g-13 .l13-hr { border: 0; border-top: 1px solid var(--gc-line-soft); margin: 4px 0; width: 100%; } /* ---------- menu ---------- */ .gceo-game-center .g-13 .l13-menu { display: grid; gap: 14px; } .gceo-game-center .g-13 .l13-hero { gap: 10px; } .gceo-game-center .g-13 .l13-hero p { max-width: 70ch; } .gceo-game-center .g-13 .l13-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; } .gceo-game-center .g-13 .l13-mode { gap: 12px; padding: 22px; } .gceo-game-center .g-13 .l13-mode > .gc-btn { justify-self: start; margin-top: auto; } .gceo-game-center .g-13 .l13-brieflist { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; } .gceo-game-center .g-13 .l13-brieflist li::marker { color: var(--gc-gold); font-weight: 600; } .gceo-game-center .g-13 .l13-brieflist b { display: block; color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-13 .l13-brieflist span { font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-13 .l13-saved { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .gceo-game-center .g-13 .l13-legal { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--gc-muted); border-top: 1px solid var(--gc-line-soft); padding-top: 12px; } .gceo-game-center .g-13 .l13-legal .gc-ic { margin-top: 2px; } /* ---------- brief ---------- */ .gceo-game-center .g-13 .l13-brief { gap: 12px; max-width: 820px; justify-self: center; width: 100%; } .gceo-game-center .g-13 .l13-quote { margin: 4px 0; padding: 12px 16px; border-left: 2px solid var(--gc-gold); background: var(--gc-surface-2); font-size: 15.5px; font-style: italic; border-radius: 0 4px 4px 0; } .gceo-game-center .g-13 .l13-need { display: grid; gap: 6px; } .gceo-game-center .g-13 .l13-need > b { font-family: var(--gc-display); font-weight: 600; letter-spacing: .04em; color: var(--gc-white); } .gceo-game-center .g-13 .l13-budget { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- setup ---------- */ .gceo-game-center .g-13 .l13-setup { gap: 16px; } .gceo-game-center .g-13 .l13-step { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-13 .l13-step h4 { font-family: var(--gc-display); font-weight: 600; font-size: 16px; letter-spacing: .04em; } .gceo-game-center .g-13 .l13-inds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; } .gceo-game-center .g-13 .l13-ind { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; text-align: left; font-size: 13.5px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: 4px; } .gceo-game-center .g-13 .l13-ind .gc-ic { width: 20px; height: 20px; } .gceo-game-center .g-13 .l13-ind:hover:not(:disabled) { border-color: var(--gc-gold-fill); } .gceo-game-center .g-13 .l13-ind.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); color: var(--gc-white); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); } .gceo-game-center .g-13 .l13-ind:disabled { opacity: .35; } .gceo-game-center .g-13 .l13-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; } .gceo-game-center .g-13 .l13-field { display: grid; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted); } .gceo-game-center .g-13 .l13-field input, .gceo-game-center .g-13 .l13-field select { font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--gc-white); background: var(--gc-surface-3); border: 1px solid var(--gc-line); border-radius: 4px; min-height: 44px; padding: 8px 12px; width: 100%; min-width: 0; } .gceo-game-center .g-13 .l13-field select { appearance: auto; } .gceo-game-center .g-13 .l13-field input[readonly] { opacity: .75; border-style: dashed; } .gceo-game-center .g-13 .l13-field input:focus, .gceo-game-center .g-13 .l13-field select:focus { border-color: var(--gc-gold-fill); outline: none; box-shadow: 0 0 0 2px var(--gc-gold-soft); } .gceo-game-center .g-13 .l13-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; } .gceo-game-center .g-13 .l13-lay { display: grid; gap: 4px; padding: 8px 8px 12px; text-align: left; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: 4px; } .gceo-game-center .g-13 .l13-lay:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-13 .l13-lay.on { border-color: var(--gc-gold-fill); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-13 .l13-lay-art { display: block; border-radius: 3px; overflow: hidden; margin-bottom: 4px; border: 1px solid var(--gc-line-soft); } .gceo-game-center .g-13 .l13-lay-art svg { display: block; width: 100%; height: auto; } .gceo-game-center .g-13 .l13-lay b { color: var(--gc-white); font-weight: 600; padding: 0 4px; } .gceo-game-center .g-13 .l13-lay small { color: var(--gc-muted); font-size: 12px; padding: 0 4px; } /* ---------- studio ---------- */ .gceo-game-center .g-13 .l13-studio-wrap { display: grid; gap: 12px; } .gceo-game-center .g-13 .l13-strip { padding: 10px 16px; } .gceo-game-center .g-13 .l13-strip summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; min-height: 40px; } .gceo-game-center .g-13 .l13-strip summary::-webkit-details-marker { display: none; } .gceo-game-center .g-13 .l13-strip summary > span:last-child { display: grid; min-width: 0; } .gceo-game-center .g-13 .l13-strip summary b { color: var(--gc-white); font-family: var(--gc-display); letter-spacing: .04em; font-weight: 600; } .gceo-game-center .g-13 .l13-strip summary small { color: var(--gc-muted); font-size: 12.5px; } .gceo-game-center .g-13 .l13-strip p { margin-top: 8px; font-style: italic; } .gceo-game-center .g-13 .l13-studio { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 12px; align-items: start; } .gceo-game-center .g-13 .l13-right { display: grid; gap: 12px; min-width: 0; } .gceo-game-center .g-13 .l13-ctrl { gap: 12px; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; scrollbar-width: thin; scrollbar-color: #2d2b27 transparent; } .gceo-game-center .g-13 .l13-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; border-bottom: 1px solid var(--gc-line); padding-bottom: 8px; } .gceo-game-center .g-13 .l13-tab { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 2px; background: transparent; border: 1px solid transparent; border-radius: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--gc-muted); } .gceo-game-center .g-13 .l13-tab .gc-ic { width: 18px; height: 18px; vertical-align: 0; } .gceo-game-center .g-13 .l13-tab:hover { border-color: var(--gc-line); } .gceo-game-center .g-13 .l13-tab.on { color: var(--gc-white); border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-13 .l13-tabbody { display: grid; gap: 12px; align-content: start; } .gceo-game-center .g-13 .l13-undo { display: flex; gap: 8px; border-top: 1px solid var(--gc-line-soft); padding-top: 10px; } .gceo-game-center .g-13 .l13-undo .gc-btn { flex: 1; } .gceo-game-center .g-13 .l13-range { display: grid; gap: 4px; } .gceo-game-center .g-13 .l13-range > span { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gc-muted); } .gceo-game-center .g-13 .l13-range output { color: var(--gc-white); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; } .gceo-game-center .g-13 .l13-range input { width: 100%; min-height: 32px; margin: 0; } .gceo-game-center .g-13 .l13-segrow { display: grid; gap: 6px; } .gceo-game-center .g-13 .l13-seg { display: flex; gap: 4px; flex-wrap: nowrap; } .gceo-game-center .g-13 .l13-seg.wrap { flex-wrap: wrap; } .gceo-game-center .g-13 .l13-seg .gc-btn { flex: 1 1 auto; min-height: 40px; padding: 6px 8px; font-size: 12.5px; min-width: 0; } .gceo-game-center .g-13 .l13-seg .gc-btn .gc-ic { width: 15px; height: 15px; } .gceo-game-center .g-13 .l13-segrow .l13-seg { flex-wrap: wrap; } .gceo-game-center .g-13 .l13-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-13 .l13-pair { display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 6px 10px; text-align: left; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: 4px; min-width: 0; } .gceo-game-center .g-13 .l13-pair:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-13 .l13-pair.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-13 .l13-pair > span:last-child { display: grid; min-width: 0; } .gceo-game-center .g-13 .l13-pair b { font-size: 12.5px; font-weight: 600; color: var(--gc-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-13 .l13-pair small { font-size: 11px; color: var(--gc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-13 .l13-aa { font-size: 24px; line-height: 1; color: var(--gc-gold); flex: none; width: 34px; text-align: center; } .gceo-game-center .g-13 .l13-pals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-13 .l13-pal { display: grid; gap: 4px; padding: 6px; min-height: 44px; text-align: left; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: 4px; } .gceo-game-center .g-13 .l13-pal:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-13 .l13-pal.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-13 .l13-sw { display: grid; grid-template-columns: repeat(4, 1fr); height: 18px; border-radius: 2px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); } .gceo-game-center .g-13 .l13-sw i { display: block; } .gceo-game-center .g-13 .l13-pal small { font-size: 11.5px; color: var(--gc-ink); } .gceo-game-center .g-13 .l13-color { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 10px; align-items: center; } .gceo-game-center .g-13 .l13-color input[type="color"] { width: 48px; height: 44px; padding: 2px; border: 1px solid var(--gc-line); border-radius: 4px; background: var(--gc-surface-3); cursor: pointer; grid-row: span 2; } .gceo-game-center .g-13 .l13-hex { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gc-muted); } .gceo-game-center .g-13 .l13-hex span { width: 52px; flex: none; } .gceo-game-center .g-13 .l13-hex input { flex: 1; min-width: 0; font: inherit; font-family: "Courier New", monospace; font-size: 14px; letter-spacing: .04em; color: var(--gc-white); background: var(--gc-surface-3); border: 1px solid var(--gc-line); border-radius: 4px; min-height: 36px; padding: 4px 10px; text-transform: uppercase; } .gceo-game-center .g-13 .l13-hex input:focus { border-color: var(--gc-gold-fill); outline: none; } .gceo-game-center .g-13 .l13-hex input.bad { border-color: var(--gc-risk); box-shadow: 0 0 0 2px var(--gc-risk-soft); } .gceo-game-center .g-13 .l13-color small { font-size: 11.5px; color: var(--gc-muted); line-height: 1.3; } .gceo-game-center .g-13 .l13-err { color: var(--gc-risk); font-size: 12.5px; } .gceo-game-center .g-13 .l13-syms { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; } .gceo-game-center .g-13 .l13-sym { display: grid; place-items: center; height: 44px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: 4px; padding: 0; } .gceo-game-center .g-13 .l13-sym .gc-ic { width: 20px; height: 20px; vertical-align: 0; } .gceo-game-center .g-13 .l13-sym:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-13 .l13-sym.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); } /* ---------- previews ---------- */ .gceo-game-center .g-13 .l13-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gceo-game-center .g-13 .l13-board { margin: 0; display: grid; gap: 6px; } .gceo-game-center .g-13 .l13-board svg { display: block; width: 100%; height: auto; border-radius: 3px; border: 1px solid var(--gc-line-soft); } .gceo-game-center .g-13 .l13-board figcaption, .gceo-game-center .g-13 .l13-smalls figcaption { font-size: 11.5px; color: var(--gc-muted); display: flex; gap: 6px; align-items: center; letter-spacing: .04em; } .gceo-game-center .g-13 .l13-board figcaption .gc-ic { width: 14px; height: 14px; } .gceo-game-center .g-13 .l13-smalls { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-13 .l13-smalls figure { margin: 0; display: grid; gap: 6px; justify-items: start; min-width: 0; } .gceo-game-center .g-13 .l13-tabs2 { display: grid; gap: 4px; } .gceo-game-center .g-13 .l13-tabmock { display: flex; align-items: center; gap: 8px; width: 170px; max-width: 100%; height: 40px; padding: 0 8px 0 4px; border-radius: 6px 6px 0 0; font-size: 12px; } .gceo-game-center .g-13 .l13-tabmock.light { background: #e9e6df; color: #222; } .gceo-game-center .g-13 .l13-tabmock.dark { background: #2a2a2a; color: #eee; } .gceo-game-center .g-13 .l13-fav { width: 32px; height: 32px; flex: none; border-radius: 4px; overflow: hidden; } .gceo-game-center .g-13 .l13-fav svg { display: block; } .gceo-game-center .g-13 .l13-tabname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-13 .l13-x .gc-ic { width: 12px; height: 12px; color: inherit; opacity: .6; } .gceo-game-center .g-13 .l13-avatar svg { display: block; border-radius: 50%; box-shadow: 0 0 0 1px var(--gc-line); } .gceo-game-center .g-13 .l13-sticker svg { display: block; border-radius: 50%; box-shadow: 0 0 0 1px var(--gc-line), 0 4px 12px rgba(0, 0, 0, .35); } .gceo-game-center .g-13 .l13-headfig { flex: 1 1 200px; } .gceo-game-center .g-13 .l13-header { width: 100%; height: 48px; padding: 4px 10px; background: #141414; border: 1px solid var(--gc-line-soft); border-radius: 4px; display: flex; align-items: center; overflow: hidden; } .gceo-game-center .g-13 .l13-header svg { display: block; max-width: 100%; height: 40px; width: auto; } /* brand board */ .gceo-game-center .g-13 .l13-bboard { display: grid; gap: 16px; padding: 22px; border-radius: 4px; } .gceo-game-center .g-13 .l13-bb-head h4 { font-family: var(--gc-display); font-size: 24px; font-weight: 600; letter-spacing: .05em; color: var(--gc-white); margin-top: 4px; } .gceo-game-center .g-13 .l13-bb-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gceo-game-center .g-13 .l13-bb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; border-top: 1px solid var(--gc-line); padding-top: 14px; } .gceo-game-center .g-13 .l13-bb-row > div { display: grid; gap: 8px; align-content: start; } .gceo-game-center .g-13 .l13-bb-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; } .gceo-game-center .g-13 .l13-bb-sw > div { display: grid; gap: 2px; } .gceo-game-center .g-13 .l13-bb-sw i { display: block; height: 44px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); } .gceo-game-center .g-13 .l13-bb-sw b { font-family: "Courier New", monospace; font-size: 12.5px; color: var(--gc-white); } .gceo-game-center .g-13 .l13-bb-sw small, .gceo-game-center .g-13 .l13-bb-fonts small { font-size: 11.5px; color: var(--gc-muted); } .gceo-game-center .g-13 .l13-bb-fonts { display: grid; gap: 8px; } .gceo-game-center .g-13 .l13-bb-fonts > div { display: grid; } .gceo-game-center .g-13 .l13-bb-fonts span { font-size: 26px; line-height: 1.2; color: var(--gc-white); } .gceo-game-center .g-13 .l13-bb-small { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .gceo-game-center .g-13 .l13-bb-small svg { display: block; border-radius: 4px; box-shadow: 0 0 0 1px var(--gc-line); } .gceo-game-center .g-13 .l13-bb-small svg:last-child { border-radius: 50%; } /* ---------- checks ---------- */ .gceo-game-center .g-13 .l13-cklist { display: grid; gap: 6px; } .gceo-game-center .g-13 .l13-ck { background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-left: 2px solid var(--gc-faint); border-radius: 0 4px 4px 0; } .gceo-game-center .g-13 .l13-ck summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; min-height: 44px; } .gceo-game-center .g-13 .l13-ck summary::-webkit-details-marker { display: none; } .gceo-game-center .g-13 .l13-ck summary > .gc-ic { width: 20px; height: 20px; color: var(--gc-faint); } .gceo-game-center .g-13 .l13-ck-t { display: grid; min-width: 0; flex: 1; } .gceo-game-center .g-13 .l13-ck-t b { font-weight: 600; color: var(--gc-white); font-size: 14px; } .gceo-game-center .g-13 .l13-ck-t small { font-size: 12.5px; color: var(--gc-muted); font-variant-numeric: tabular-nums; } .gceo-game-center .g-13 .l13-ck.pass { border-left-color: var(--gc-emerald); } .gceo-game-center .g-13 .l13-ck.pass summary > .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-13 .l13-ck.fail { border-left-color: var(--gc-risk); background: linear-gradient(90deg, var(--gc-risk-soft), transparent 60%), var(--gc-surface-2); } .gceo-game-center .g-13 .l13-ck.fail summary > .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-13 .l13-ck-body { display: grid; gap: 6px; padding: 0 12px 12px 42px; font-size: 13px; color: var(--gc-ink); } .gceo-game-center .g-13 .l13-ck-body b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-13 .l13-reqlbl { margin-top: 10px; } .gceo-game-center .g-13 .l13-reqlbl .gc-ic { width: 14px; height: 14px; } .gceo-game-center .g-13 .l13-submit { border-top: 1px solid var(--gc-line-soft); padding-top: 12px; } .gceo-game-center .g-13 .l13-export .gc-row .gc-btn { flex: 1 1 160px; } .gceo-game-center .g-13 .l13-check { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 13.5px; cursor: pointer; } .gceo-game-center .g-13 .l13-check input { width: 20px; height: 20px; accent-color: #cfa15a; } /* ---------- narrow ---------- */ @container (max-width: 900px) { .gceo-game-center .g-13 .l13-studio { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-13 .l13-ctrl { position: static; max-height: none; order: 2; } .gceo-game-center .g-13 .l13-right { display: contents; } .gceo-game-center .g-13 .l13-prev { order: 1; } .gceo-game-center .g-13 .l13-checks { order: 3; } .gceo-game-center .g-13 .l13-export { order: 4; } } @container (max-width: 560px) { .gceo-game-center .g-13 .l13-boards, .gceo-game-center .g-13 .l13-bb-logos { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-13 .l13-tab span { font-size: 10.5px; } .gceo-game-center .g-13 .l13-mode, .gceo-game-center .g-13 .l13-bboard { padding: 16px; } .gceo-game-center .g-13 .l13-ck-body { padding-left: 12px; } .gceo-game-center .g-13 .l13-pairs { grid-template-columns: minmax(0, 1fr); } } /* GAME 14 — Website Design Studio. Every selector is scoped to .gceo-game-center .g-14 (the player's site preview CSS is injected by the game under .gceo-game-center .g-14 .ws-site) */ .gceo-game-center .g-14 .ws { position: relative; display: grid; gap: 14px; min-width: 0; } .gceo-game-center .g-14 .ws-h { font-family: var(--gc-display); font-size: clamp(22px, 3.4vw, 30px); letter-spacing: .04em; color: var(--gc-white); line-height: 1.2; } .gceo-game-center .g-14 .ws-center { justify-content: center; } .gceo-game-center .g-14 .ws-small { font-size: 12.5px; } .gceo-game-center .g-14 .ws-future { display: flex; gap: 8px; align-items: center; font-size: 13px; } /* ---------- home ---------- */ .gceo-game-center .g-14 .ws-home { display: grid; gap: 16px; } .gceo-game-center .g-14 .ws-home-head { display: grid; gap: 6px; max-width: 70ch; } .gceo-game-center .g-14 .ws-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: stretch; } .gceo-game-center .g-14 .ws-mode { gap: 14px; align-content: start; } .gceo-game-center .g-14 .ws-mode > .gc-btn { margin-top: auto; } .gceo-game-center .g-14 .ws-clients { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .gceo-game-center .g-14 .ws-clients li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--gc-line); border-radius: var(--gc-r); } .gceo-game-center .g-14 .ws-clients li > div { display: grid; flex: 1; min-width: 0; line-height: 1.3; } .gceo-game-center .g-14 .ws-clients small { color: var(--gc-muted); font-size: 12.5px; } /* ---------- setup ---------- */ .gceo-game-center .g-14 .ws-setup { display: grid; gap: 14px; } .gceo-game-center .g-14 .ws-step { display: flex; align-items: center; gap: 10px; font-family: var(--gc-display); font-size: 16px; letter-spacing: .04em; color: var(--gc-white); } .gceo-game-center .g-14 .ws-step > span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gc-gold-fill); color: var(--gc-gold); font-family: var(--gc-body); font-size: 13px; font-weight: 600; flex: none; } .gceo-game-center .g-14 .ws-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; } .gceo-game-center .g-14 .ws-tile { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; text-align: left; border: 1px solid var(--gc-line); border-radius: var(--gc-r); background: var(--gc-surface-2); color: var(--gc-ink); font-size: 13.5px; line-height: 1.25; } .gceo-game-center .g-14 .ws-tile .gc-ic { width: 20px; height: 20px; } .gceo-game-center .g-14 .ws-tile:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-14 .ws-tile.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-14 .ws-tile.sm { min-height: 44px; font-size: 12.5px; padding: 6px 10px; } .gceo-game-center .g-14 .ws-fields2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; align-items: end; } .gceo-game-center .g-14 .ws-span2 { grid-column: 1 / -1; } .gceo-game-center .g-14 .ws-brandrow { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .gceo-game-center .g-14 .ws-brandlogo { width: 160px; height: 90px; display: grid; place-items: center; background: #fff; border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 8px; color: #111; } .gceo-game-center .g-14 .ws-brandlogo svg { max-width: 100%; max-height: 100%; width: auto; height: auto; } /* ---------- swatches, themes, palettes ---------- */ .gceo-game-center .g-14 .ws-sw { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid var(--gc-line-soft); flex: none; } .gceo-game-center .g-14 .ws-sw i { display: block; width: 14px; height: 22px; } .gceo-game-center .g-14 .ws-sw.big i { width: 26px; height: 26px; } .gceo-game-center .g-14 .ws-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; } .gceo-game-center .g-14 .ws-theme { display: grid; gap: 6px; justify-items: start; align-content: start; min-height: 44px; padding: 10px; border: 1px solid var(--gc-line); border-radius: var(--gc-r); background: var(--gc-surface-2); color: var(--gc-ink); text-align: left; position: relative; } .gceo-game-center .g-14 .ws-theme:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-14 .ws-theme.on { border-color: var(--gc-gold-fill); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-14 .ws-theme-name { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; } .gceo-game-center .g-14 .ws-theme-name .gc-ic { width: 15px; height: 15px; } .gceo-game-center .g-14 .ws-theme .gc-pill { font-size: 10.5px; padding: 1px 8px; } .gceo-game-center .g-14 .ws-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 6px; } .gceo-game-center .g-14 .ws-pal { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding: 7px 8px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface-2); color: var(--gc-ink); font-size: 12px; text-align: left; } .gceo-game-center .g-14 .ws-pal:hover, .gceo-game-center .g-14 .ws-pal.on { border-color: var(--gc-gold-fill); } .gceo-game-center .g-14 .ws-pal.on { box-shadow: inset 0 0 0 1px var(--gc-gold-fill); } /* ---------- builder ---------- */ .gceo-game-center .g-14 .ws-builder { display: grid; gap: 12px; min-width: 0; } .gceo-game-center .g-14 .ws-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; } .gceo-game-center .g-14 .ws-res { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .gceo-game-center .g-14 .ws-hud-act .gc-btn { white-space: nowrap; } .gceo-game-center .g-14 .ws-brief { gap: 8px; } .gceo-game-center .g-14 .ws-brief summary { cursor: pointer; display: grid; gap: 4px; list-style: none; min-height: 44px; } .gceo-game-center .g-14 .ws-brief summary::-webkit-details-marker { display: none; } .gceo-game-center .g-14 .ws-brief summary b { font-family: var(--gc-display); font-size: 18px; letter-spacing: .03em; color: var(--gc-white); } .gceo-game-center .g-14 .ws-brief summary small { font-family: var(--gc-body); font-size: 13px; color: var(--gc-muted); letter-spacing: 0; } .gceo-game-center .g-14 .ws-notes { margin: 0; padding: 10px 14px; border-left: 2px solid var(--gc-gold-fill); background: var(--gc-surface-2); font-style: italic; border-radius: 0 var(--gc-r) var(--gc-r) 0; } .gceo-game-center .g-14 .ws-notes cite { display: block; font-style: normal; font-size: 12.5px; color: var(--gc-muted); margin-top: 4px; } .gceo-game-center .g-14 .ws-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; } .gceo-game-center .g-14 .ws-reqs li { display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13.5px; } .gceo-game-center .g-14 .ws-main { display: grid; grid-template-columns: minmax(320px, 410px) minmax(0, 1fr); gap: 12px; align-items: start; } .gceo-game-center .g-14 .ws-editor { padding: 0; gap: 0; overflow: hidden; } .gceo-game-center .g-14 .ws-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--gc-line); } .gceo-game-center .g-14 .ws-tab { display: grid; justify-items: center; gap: 2px; min-height: 56px; padding: 8px 4px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--gc-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; text-align: center; } .gceo-game-center .g-14 .ws-tab .gc-ic { width: 18px; height: 18px; } .gceo-game-center .g-14 .ws-tab:hover { color: var(--gc-ink); background: var(--gc-gold-soft); } .gceo-game-center .g-14 .ws-tab[aria-selected="true"] { color: var(--gc-white); border-bottom-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-14 .ws-tabbody { padding: 14px; display: grid; gap: 12px; align-content: start; min-width: 0; } .gceo-game-center .g-14 .ws-fh { display: flex; align-items: center; gap: 8px; font-family: var(--gc-display); font-size: 15px; letter-spacing: .04em; color: var(--gc-white); margin-top: 4px; } .gceo-game-center .g-14 .ws-fh small { font-family: var(--gc-body); letter-spacing: 0; font-size: 12px; } .gceo-game-center .g-14 .ws-hint { display: flex; gap: 8px; align-items: center; font-size: 13px; } /* fields */ .gceo-game-center .g-14 .ws-field { display: grid; gap: 4px; min-width: 0; } .gceo-game-center .g-14 .ws-field > span { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gc-muted); } .gceo-game-center .g-14 .ws-field input, .gceo-game-center .g-14 .ws-field select, .gceo-game-center .g-14 .ws-field textarea, .gceo-game-center .g-14 .ws-color input[type="text"] { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--gc-line); border-radius: 4px; background: var(--gc-surface-2); color: var(--gc-ink); font: inherit; font-size: 14px; } .gceo-game-center .g-14 .ws-field textarea { resize: vertical; line-height: 1.45; } .gceo-game-center .g-14 .ws-field input:focus, .gceo-game-center .g-14 .ws-field select:focus, .gceo-game-center .g-14 .ws-field textarea:focus, .gceo-game-center .g-14 .ws-color input:focus { border-color: var(--gc-gold-fill); outline: 2px solid var(--gc-gold-fill); outline-offset: 0; } .gceo-game-center .g-14 [aria-invalid="true"] { border-color: var(--gc-risk) !important; } .gceo-game-center .g-14 .ws-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 14px; } .gceo-game-center .g-14 .ws-check input { width: 20px; height: 20px; accent-color: var(--gc-gold-fill); } .gceo-game-center .g-14 .ws-sub { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-14 .ws-linkrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 44px; gap: 8px; align-items: end; } .gceo-game-center .g-14 .ws-fields { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--gc-line); border-radius: var(--gc-r); background: var(--gc-surface-2); } .gceo-game-center .g-14 .ws-fields .ws-field input, .gceo-game-center .g-14 .ws-fields .ws-field select, .gceo-game-center .g-14 .ws-fields .ws-field textarea { background: var(--gc-surface); } /* section list */ .gceo-game-center .g-14 .ws-seclist { display: grid; gap: 6px; } .gceo-game-center .g-14 .ws-secrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px; gap: 4px; align-items: center; padding: 3px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface-2); transition: box-shadow .15s, opacity .15s; } .gceo-game-center .g-14 .ws-secrow.sel { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-14 .ws-secrow.dragging { opacity: .85; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); border-color: var(--gc-gold-fill); position: relative; z-index: 2; } .gceo-game-center .g-14 .ws-grip { touch-action: none; user-select: none; cursor: grab; min-height: 44px; width: 44px; display: grid; place-items: center; background: transparent; border: 1px dashed var(--gc-line); border-radius: 4px; } .gceo-game-center .g-14 .ws-grip:active { cursor: grabbing; } .gceo-game-center .g-14 .ws-secname { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; padding: 0 8px; background: transparent; border: 0; text-align: left; font-weight: 600; font-size: 14px; color: var(--gc-ink); } .gceo-game-center .g-14 .ws-secname span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gceo-game-center .g-14 .ws-edit-ic { opacity: .5; } .gceo-game-center .g-14 .ws-ib { width: 44px; min-height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid var(--gc-line-soft); border-radius: 4px; color: var(--gc-ink); } .gceo-game-center .g-14 .ws-ib:hover:not(:disabled) { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-14 .ws-ib:disabled { opacity: .3; } .gceo-game-center .g-14 .ws-down .gc-ic { transform: rotate(180deg); } .gceo-game-center .g-14 .ws-rm .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-14 .ws-add { display: grid; gap: 8px; } /* items */ .gceo-game-center .g-14 .ws-itemgroup { display: grid; gap: 10px; } .gceo-game-center .g-14 .ws-itemgroup + .ws-itemgroup { padding-top: 12px; border-top: 1px solid var(--gc-line); } .gceo-game-center .g-14 .ws-item { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface-2); } .gceo-game-center .g-14 .ws-item .ws-field input, .gceo-game-center .g-14 .ws-item .ws-field select { background: var(--gc-surface); } .gceo-game-center .g-14 .ws-item-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 10px; align-items: center; } .gceo-game-center .g-14 .ws-item-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gceo-game-center .g-14 .ws-thumb { width: 40px; height: 40px; display: grid; place-items: center; background: var(--gc-gold-soft); border-radius: 6px; } .gceo-game-center .g-14 .ws-thumb i { display: grid; place-items: center; width: 26px; height: 26px; background: var(--gc-gold-fill); color: var(--gc-on-gold); border-radius: 50%; } .gceo-game-center .g-14 .ws-thumb.shape-square i, .gceo-game-center .g-14 .ws-thumb.shape-diamond i { border-radius: 4px; } .gceo-game-center .g-14 .ws-thumb.shape-arch i { border-radius: 99px 99px 4px 4px; } .gceo-game-center .g-14 .ws-thumb i .gc-ic { width: 15px; height: 15px; color: var(--gc-on-gold); } .gceo-game-center .g-14 .ws-warn { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--gc-warn); font-weight: 600; } .gceo-game-center .g-14 .ws-warn .gc-ic { color: var(--gc-warn); } /* style */ .gceo-game-center .g-14 .ws-colors { display: grid; gap: 6px; } .gceo-game-center .g-14 .ws-color { display: grid; grid-template-columns: minmax(0, 1fr) 48px 108px; gap: 8px; align-items: center; } .gceo-game-center .g-14 .ws-color label { font-size: 13.5px; font-weight: 500; } .gceo-game-center .g-14 .ws-color input[type="color"] { width: 48px; height: 44px; padding: 3px; border: 1px solid var(--gc-line); border-radius: 4px; background: var(--gc-surface-2); cursor: pointer; } .gceo-game-center .g-14 .ws-color input[type="text"] { font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; } .gceo-game-center .g-14 .ws-contrast { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-14 .ws-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--gc-line); } .gceo-game-center .g-14 .ws-chip b { font-variant-numeric: tabular-nums; } .gceo-game-center .g-14 .ws-chip.ok { background: var(--gc-emerald-soft); color: var(--gc-emerald-ink); border-color: transparent; } .gceo-game-center .g-14 .ws-chip.ok .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-14 .ws-chip.bad { background: var(--gc-risk-soft); color: var(--gc-risk); border-color: var(--gc-risk); } .gceo-game-center .g-14 .ws-chip.bad .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-14 .ws-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 6px; } .gceo-game-center .g-14 .ws-pair { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface-2); color: var(--gc-ink); text-align: left; } .gceo-game-center .g-14 .ws-pair:hover, .gceo-game-center .g-14 .ws-pair.on { border-color: var(--gc-gold-fill); } .gceo-game-center .g-14 .ws-pair.on { box-shadow: inset 0 0 0 1px var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-14 .ws-aa { font-size: 24px; line-height: 1; color: var(--gc-white); width: 36px; text-align: center; flex: none; } .gceo-game-center .g-14 .ws-pl { display: grid; min-width: 0; line-height: 1.25; } .gceo-game-center .g-14 .ws-pl small { font-size: 11.5px; color: var(--gc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gceo-game-center .g-14 .ws-seg { display: inline-flex; border: 1px solid var(--gc-line); border-radius: 4px; overflow: hidden; } .gceo-game-center .g-14 .ws-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 14px; background: transparent; border: 0; border-right: 1px solid var(--gc-line); color: var(--gc-ink); font-size: 13.5px; font-weight: 500; } .gceo-game-center .g-14 .ws-seg button:last-child { border-right: 0; } .gceo-game-center .g-14 .ws-seg button[aria-pressed="true"] { background: var(--gc-gold-fill); color: var(--gc-on-gold); font-weight: 600; } .gceo-game-center .g-14 .ws-seg button[aria-pressed="true"] .gc-ic { color: var(--gc-on-gold); } .gceo-game-center .g-14 .ws-seg small { opacity: .75; font-size: 11px; } .gceo-game-center .g-14 .ws-seg.wide { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .gceo-game-center .g-14 .ws-seg.wide button { padding: 6px 4px; } .gceo-game-center .g-14 .ws-shape-demo { display: inline-block; width: 18px; height: 10px; background: currentColor; flex: none; } .gceo-game-center .g-14 .ws-shape-demo.s-rounded { border-radius: 3px; } .gceo-game-center .g-14 .ws-shape-demo.s-pill { border-radius: 9px; } .gceo-game-center .g-14 .ws-shape-demo.s-outline { background: transparent; border: 2px solid currentColor; border-radius: 3px; } .gceo-game-center .g-14 .ws-decos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 6px; } /* test & launch */ .gceo-game-center .g-14 .ws-testrow { gap: 8px; } .gceo-game-center .g-14 .ws-testing { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--gc-gold); } .gceo-game-center .g-14 .ws-checklist ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; } .gceo-game-center .g-14 .ws-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; } .gceo-game-center .g-14 .ws-checklist li > span { display: grid; line-height: 1.35; } .gceo-game-center .g-14 .ws-checklist small { color: var(--gc-muted); } .gceo-game-center .g-14 .ws-visitors { display: grid; gap: 8px; margin-top: 8px; } .gceo-game-center .g-14 .ws-visitor { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--gc-line-soft); border-left: 3px solid var(--gc-emerald); border-radius: var(--gc-r); background: var(--gc-surface-2); animation: g14-ws-in .3s ease both; } .gceo-game-center .g-14 .ws-visitor.bad { border-left-color: var(--gc-risk); } .gceo-game-center .g-14 .ws-v-body { display: grid; gap: 3px; min-width: 0; } .gceo-game-center .g-14 .ws-v-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .gceo-game-center .g-14 .ws-v-head small { color: var(--gc-muted); font-size: 12px; flex: 1; } .gceo-game-center .g-14 .ws-v-check { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gc-gold); } .gceo-game-center .g-14 .ws-v-quote { font-size: 14px; } .gceo-game-center .g-14 .ws-v-fix { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--gc-muted); } .gceo-game-center .g-14 .ws-v-fix .gc-ic { margin-top: 2px; } .gceo-game-center .g-14 .ws-verdict { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--gc-r); border: 1px solid; } .gceo-game-center .g-14 .ws-verdict > .gc-ic { width: 26px; height: 26px; } .gceo-game-center .g-14 .ws-verdict > div { display: grid; gap: 2px; } .gceo-game-center .g-14 .ws-verdict span { font-size: 13px; } .gceo-game-center .g-14 .ws-verdict.good { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .g-14 .ws-verdict.good .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-14 .ws-verdict.bad { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-14 .ws-verdict.bad .gc-ic { color: var(--gc-risk); } @keyframes g14-ws-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------- preview ---------- */ .gceo-game-center .g-14 .ws-preview { position: sticky; top: 8px; gap: 10px; } .gceo-game-center .g-14 .ws-pv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } .gceo-game-center .g-14 .ws-browser { border: 1px solid var(--gc-line); border-radius: 8px; overflow: hidden; background: #2a2926; margin: 0 auto; width: 100%; } .gceo-game-center .g-14 .ws-browser.mobile { max-width: 392px; border: 10px solid #2a2926; border-radius: 30px; } .gceo-game-center .g-14 .ws-chrome { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #2a2926; } .gceo-game-center .g-14 .ws-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #55534d; flex: none; } .gceo-game-center .g-14 .ws-url { flex: 1; min-width: 0; margin-left: 8px; padding: 3px 10px; border-radius: 99px; background: #1a1917; color: #b9b2a3; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gceo-game-center .g-14 .ws-frame { height: min(620px, 72vh); overflow: auto; background: #fff; overscroll-behavior: contain; } .gceo-game-center .g-14 .ws-browser.mobile .ws-frame { height: min(640px, 72vh); } .gceo-game-center .g-14 .ws-scaler { position: relative; overflow: hidden; } .gceo-game-center .g-14 .ws-browser.mobile .ws-scaler { overflow: visible; } .gceo-game-center .g-14 .ws-scaler > .ws-site { transform-origin: 0 0; } .gceo-game-center .g-14 .ws-pv-note { min-height: 22px; font-size: 13.5px; display: flex; gap: 6px; align-items: center; } .gceo-game-center .g-14 .ws-pv-note:empty { min-height: 0; } .gceo-game-center .g-14 .ws-tip { display: flex; gap: 6px; align-items: center; font-size: 12.5px; } .gceo-game-center .g-14 .ws-measure { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; pointer-events: none; } .gceo-game-center .g-14 .ws-measure > .ws-site { width: 360px; } @container (max-width: 900px) { .gceo-game-center .g-14 .ws-main { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-14 .ws-preview { position: static; } } @container (max-width: 560px) { .gceo-game-center .g-14 .ws-hud { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-14 .ws-hud-act .gc-btn { width: 100%; } .gceo-game-center .g-14 .ws-res { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-14 .ws-tabbody { padding: 12px 10px; } .gceo-game-center .g-14 .ws-tab { font-size: 10.5px; } .gceo-game-center .g-14 .ws-pv-bar .gc-btn { width: 100%; } .gceo-game-center .g-14 .ws-pv-bar .ws-seg { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .gceo-game-center .g-14 .ws-color { grid-template-columns: minmax(0, 1fr) 44px 96px; } .gceo-game-center .g-14 .ws-linkrow { grid-template-columns: minmax(0, 1fr) 44px; } .gceo-game-center .g-14 .ws-linkrow .ws-field:nth-child(2) { grid-column: 1; grid-row: 2; } .gceo-game-center .g-14 .ws-linkrow .ws-rm { grid-row: 1 / 3; grid-column: 2; align-self: center; } .gceo-game-center .g-14 .ws-seg.wide button { font-size: 12px; flex-direction: column; gap: 2px; } } .gceo-game-center .g-14 .ws-visitor.still { animation: none; } .gceo-game-center .g-14 .ws-res .gc-res b, .gceo-game-center .g-14 .ws-res .gc-res small { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; } @container (max-width: 560px) { .gceo-game-center .g-14 .ws-edit-ic { display: none; } .gceo-game-center .g-14 .ws-secname { padding: 0 4px; gap: 6px; font-size: 13.5px; } .gceo-game-center .g-14 .ws-secname span { white-space: normal; line-height: 1.2; } .gceo-game-center .g-14 .ws-res .gc-res b { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .gceo-game-center .g-14 .ws-visitor { animation: none; } } /* GAME 15 — Business Budget & Tax Prep. Every selector is scoped to .gceo-game-center .g-15 */ .gceo-game-center .g-15 .t15 { display: grid; gap: 12px; min-width: 0; } .gceo-game-center .g-15 .gc-btn.small { min-height: 44px; } .gceo-game-center .g-15 .gc-btn[aria-pressed="true"] { background: var(--gc-gold-soft); border-color: var(--gc-gold-fill); color: var(--gc-white); } .gceo-game-center .g-15 .t15-disclaim { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; padding: 10px 14px; border: 1px solid var(--gc-line); border-left: 2px solid var(--gc-gold-fill); border-radius: var(--gc-r); background: var(--gc-surface); } .gceo-game-center .g-15 .t15-disclaim .gc-ic { margin-top: 2px; } .gceo-game-center .g-15 .t15-hud { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .gceo-game-center .g-15 .t15-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; } .gceo-game-center .g-15 .t15-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-15 .t15-steps li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; padding: 5px 12px 5px 5px; border: 1px solid var(--gc-line-soft); border-radius: 999px; color: var(--gc-muted); } .gceo-game-center .g-15 .t15-steps li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gc-line); font-size: 11.5px; font-weight: 700; } .gceo-game-center .g-15 .t15-steps li > span .gc-ic { width: 14px; height: 14px; vertical-align: 0; color: var(--gc-emerald-ink); } .gceo-game-center .g-15 .t15-steps li.on { color: var(--gc-white); border-color: var(--gc-gold-fill); } .gceo-game-center .g-15 .t15-steps li.on > span { background: var(--gc-gold-fill); color: var(--gc-on-gold); border-color: var(--gc-gold-fill); } .gceo-game-center .g-15 .t15-steps li.done { color: var(--gc-ink); } .gceo-game-center .g-15 .t15-steps li.done > span { border-color: var(--gc-emerald); } .gceo-game-center .g-15 .t15-tools { display: flex; flex-wrap: wrap; gap: 8px; } .gceo-game-center .g-15 .t15-main { display: grid; gap: 12px; min-width: 0; } .gceo-game-center .g-15 .t15-warn, .gceo-game-center .g-15 .t15-ok, .gceo-game-center .g-15 .t15-tip, .gceo-game-center .g-15 .t15-rate { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 500; } .gceo-game-center .g-15 .t15-warn { color: var(--gc-warn); } .gceo-game-center .g-15 .t15-warn .gc-ic { color: var(--gc-warn); } .gceo-game-center .g-15 .t15-ok { color: var(--gc-emerald-ink); } .gceo-game-center .g-15 .t15-ok .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-15 .t15-tip, .gceo-game-center .g-15 .t15-rate { font-weight: 400; background: var(--gc-surface-2); border-radius: var(--gc-r); padding: 10px 12px; } .gceo-game-center .g-15 .t15-small { font-size: 12.5px; } .gceo-game-center .g-15 .t15-next { justify-content: flex-end; padding-top: 4px; } /* ---------- budget plan ---------- */ .gceo-game-center .g-15 .t15-btable { display: grid; gap: 4px; } .gceo-game-center .g-15 .t15-brow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) auto; gap: 10px; align-items: center; padding: 4px 8px; border-radius: 4px; background: var(--gc-surface-2); } .gceo-game-center .g-15 .t15-bhead { background: none; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-15 .t15-bcat { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; } .gceo-game-center .g-15 .t15-step { display: inline-flex; align-items: center; gap: 6px; } .gceo-game-center .g-15 .t15-step .gc-btn { width: 44px; padding: 0; } .gceo-game-center .g-15 .t15-step b { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; color: var(--gc-white); } /* ---------- inbox ---------- */ .gceo-game-center .g-15 .t15-sort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; align-items: start; } .gceo-game-center .g-15 .t15-hint { font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .gceo-game-center .g-15 .t15-cards { display: grid; gap: 8px; max-height: 640px; overflow: auto; padding: 2px; scrollbar-width: thin; } .gceo-game-center .g-15 .t15-card { display: flex; gap: 6px; align-items: stretch; text-align: left; width: 100%; padding: 10px 12px 10px 4px; border-radius: var(--gc-r); border: 1px solid var(--gc-line); background: var(--gc-paper); color: var(--gc-paper-ink); box-shadow: inset 0 0 0 3px var(--gc-paper), inset 0 0 0 4px rgba(160, 122, 38, .3); cursor: grab; user-select: none; -webkit-user-select: none; transition: transform .12s, box-shadow .15s; } .gceo-game-center .g-15 .t15-card:hover { transform: translateY(-1px); } .gceo-game-center .g-15 .t15-card.sel { outline: 2px solid var(--gc-gold-fill); outline-offset: 2px; box-shadow: inset 0 0 0 3px var(--gc-paper), inset 0 0 0 4px #8a6418, 0 6px 18px rgba(0,0,0,.35); } .gceo-game-center .g-15 .t15-card.dragging { opacity: .35; } .gceo-game-center .g-15 .t15-card.flagged { box-shadow: inset 0 0 0 3px var(--gc-paper), inset 0 0 0 5px #b07a1a; } .gceo-game-center .g-15 .t15-grip { display: grid; place-items: center; width: 30px; flex: none; touch-action: none; cursor: grab; border-right: 1px dashed rgba(160, 122, 38, .35); } .gceo-game-center .g-15 .t15-grip .gc-ic { color: #8a6418; } .gceo-game-center .g-15 .t15-card-body { display: grid; gap: 2px; min-width: 0; flex: 1; padding-left: 6px; } .gceo-game-center .g-15 .t15-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .gceo-game-center .g-15 .t15-src { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5e584d; font-weight: 600; } .gceo-game-center .g-15 .t15-src .gc-ic { color: #8a6418; width: 14px; height: 14px; } .gceo-game-center .g-15 .t15-amt { font-variant-numeric: tabular-nums; font-size: 16px; color: #1d1c19; white-space: nowrap; } .gceo-game-center .g-15 .t15-amt.in, .gceo-game-center .g-15 .t15-la.in { color: #0f5c45; } .gceo-game-center .g-15 .t15-la.in { color: var(--gc-emerald-ink); } .gceo-game-center .g-15 .t15-who { font-size: 15px; color: #111110; } .gceo-game-center .g-15 .t15-memo { font-size: 13px; color: #3d3a33; line-height: 1.4; } .gceo-game-center .g-15 .t15-card .gc-pill.warn { justify-self: start; margin-top: 4px; background: #f6ead2; color: #8a5a0c; } .gceo-game-center .g-15 .t15-empty { display: flex; gap: 8px; align-items: center; padding: 18px; border: 1px dashed var(--gc-line); border-radius: var(--gc-r); color: var(--gc-emerald-ink); } .gceo-game-center .g-15 .t15-ghost { position: fixed; left: 0; top: 0; z-index: 2147481000; pointer-events: none; opacity: .92; transform-origin: 0 0; box-shadow: 0 16px 40px rgba(0,0,0,.5); rotate: -1.5deg; } .gceo-game-center .g-15 .t15-bins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; } .gceo-game-center .g-15 .t15-bin { display: flex; gap: 10px; align-items: center; text-align: left; min-height: 64px; padding: 8px 10px; border-radius: var(--gc-r); border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); transition: border-color .15s, background .15s, transform .12s; min-width: 0; } .gceo-game-center .g-15 .t15-bin.off { border-style: dashed; } .gceo-game-center .g-15 .t15-bin.inc, .gceo-game-center .g-15 .t15-bin.ret { border-color: rgba(47, 154, 116, .55); } .gceo-game-center .g-15 .t15-bins.placing .t15-bin { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-15 .t15-bin:hover, .gceo-game-center .g-15 .t15-bin.hover { border-color: var(--gc-gold-hover); background: rgba(207, 161, 90, .2); transform: translateY(-1px); } .gceo-game-center .g-15 .t15-bin-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--gc-line); } .gceo-game-center .g-15 .t15-bin-txt { display: grid; min-width: 0; line-height: 1.25; } .gceo-game-center .g-15 .t15-bin-txt small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-gold); font-weight: 600; } .gceo-game-center .g-15 .t15-bin-txt b { font-size: 14px; font-weight: 600; color: var(--gc-white); } .gceo-game-center .g-15 .t15-bin-txt .gc-muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- ledger ---------- */ .gceo-game-center .g-15 .t15-tabs { gap: 6px; } .gceo-game-center .g-15 .t15-lrows { display: grid; gap: 6px; } .gceo-game-center .g-15 .t15-lrow { display: grid; grid-template-columns: 56px minmax(0, 1.3fr) 190px 110px minmax(0, 1.8fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 4px; background: var(--gc-surface-2); border-left: 2px solid var(--gc-line-soft); font-size: 13.5px; } .gceo-game-center .g-15 .t15-lrow.flagged { border-left-color: var(--gc-warn); background: linear-gradient(90deg, var(--gc-warn-soft), transparent 60%), var(--gc-surface-2); } .gceo-game-center .g-15 .t15-lrow.t15-flash { animation: t15-flash 1s ease; } @keyframes t15-flash { from { background: var(--gc-gold-soft); } } .gceo-game-center .g-15 .t15-ld { color: var(--gc-muted); font-size: 12.5px; white-space: nowrap; } .gceo-game-center .g-15 .t15-lw { display: grid; min-width: 0; } .gceo-game-center .g-15 .t15-lw small { display: flex; gap: 4px; align-items: flex-start; font-size: 12px; } .gceo-game-center .g-15 .t15-la { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gc-white); } .gceo-game-center .g-15 .t15-la small { display: block; font-weight: 400; font-size: 11.5px; } .gceo-game-center .g-15 .t15-ldocs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .gceo-game-center .g-15 .t15-pct { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; } .gceo-game-center .g-15 .t15-pct .gc-btn { width: 44px; padding: 0; } .gceo-game-center .g-15 .t15-pct b { min-width: 42px; text-align: center; color: var(--gc-white); } /* ---------- mileage ---------- */ .gceo-game-center .g-15 .t15-trips { display: grid; gap: 6px; } .gceo-game-center .g-15 .t15-trip { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--gc-surface-2); border-radius: 4px; } .gceo-game-center .g-15 .t15-trip > span:first-child { display: grid; min-width: 0; flex: 1 1 240px; } .gceo-game-center .g-15 .t15-toggle { display: inline-flex; gap: 6px; } .gceo-game-center .g-15 .t15-calc { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px; border: 1px solid var(--gc-line); border-radius: var(--gc-r); } .gceo-game-center .g-15 .t15-calc b { color: var(--gc-white); font-variant-numeric: tabular-nums; } .gceo-game-center .g-15 .t15-in { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .gceo-game-center .g-15 .t15-in input { width: 120px; min-height: 44px; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-white); font: inherit; font-variant-numeric: tabular-nums; text-align: right; } .gceo-game-center .g-15 .t15-in input:focus { outline: 2px solid var(--gc-gold-fill); outline-offset: 1px; } .gceo-game-center .g-15 .t15-in input:disabled { opacity: .55; } /* ---------- budget vs actual ---------- */ .gceo-game-center .g-15 .t15-bva { display: grid; gap: 6px; } .gceo-game-center .g-15 .t15-bvrow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(60px, 1fr) minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 8px 10px; background: var(--gc-surface-2); border-radius: 4px; } .gceo-game-center .g-15 .t15-bvrow.over { border-left: 2px solid var(--gc-risk); } .gceo-game-center .g-15 .t15-bvbar { height: 8px; border-radius: 999px; background: var(--gc-track); overflow: hidden; } .gceo-game-center .g-15 .t15-bvbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gc-emerald), var(--gc-gold-fill)); } .gceo-game-center .g-15 .t15-bvrow.over .t15-bvbar i { background: var(--gc-risk); } .gceo-game-center .g-15 .t15-bvnum { font-variant-numeric: tabular-nums; font-size: 13.5px; } .gceo-game-center .g-15 .t15-react { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; } /* ---------- estimated tax ---------- */ .gceo-game-center .g-15 .t15-taxgrid, .gceo-game-center .g-15 .t15-formgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; } .gceo-game-center .g-15 .t15-dl { display: grid; gap: 0; margin: 0; font-size: 14px; } .gceo-game-center .g-15 .t15-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--gc-line-soft); } .gceo-game-center .g-15 .t15-dl dt { display: flex; gap: 6px; align-items: center; min-width: 0; } .gceo-game-center .g-15 .t15-dl dt small { color: var(--gc-muted); font-size: 11.5px; } .gceo-game-center .g-15 .t15-dl dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; } .gceo-game-center .g-15 .t15-dl .tot { border-bottom: 1px solid var(--gc-line); font-weight: 700; color: var(--gc-white); } .gceo-game-center .g-15 .t15-pay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gceo-game-center .g-15 .t15-pay .t15-step b { font-size: 20px; min-width: 90px; } /* ---------- Schedule C ---------- */ .gceo-game-center .g-15 .t15-fh { font-family: var(--gc-display); font-size: 14px; letter-spacing: .06em; margin-top: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--gc-line); display: flex; gap: 8px; align-items: center; } .gceo-game-center .g-15 .t15-frow { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 86px; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 4px; font-size: 13.5px; } .gceo-game-center .g-15 .t15-frow.calc { background: var(--gc-surface-2); } .gceo-game-center .g-15 .t15-frow.ok { box-shadow: inset 2px 0 0 var(--gc-emerald); } .gceo-game-center .g-15 .t15-frow.bad { box-shadow: inset 2px 0 0 var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-15 .t15-fline { font-weight: 700; color: var(--gc-gold); font-size: 12.5px; } .gceo-game-center .g-15 .t15-frow .t15-in input { background: #fffaf0; color: #111110; width: 112px; } .gceo-game-center .g-15 .t15-fmark { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; } .gceo-game-center .g-15 .t15-frow.ok .t15-fmark, .gceo-game-center .g-15 .t15-frow.ok .t15-fmark .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-15 .t15-frow.bad .t15-fmark, .gceo-game-center .g-15 .t15-frow.bad .t15-fmark .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-15 .t15-booksum { position: sticky; top: 8px; } /* ---------- audit ---------- */ .gceo-game-center .g-15 .t15-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; } .gceo-game-center .g-15 .t15-case { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: var(--gc-r); border: 1px solid var(--gc-line); background: var(--gc-surface-2); } .gceo-game-center .g-15 .t15-case header { display: grid; gap: 2px; } .gceo-game-center .g-15 .t15-case header .gc-muted { font-size: 13px; } .gceo-game-center .g-15 .t15-case.good { border-color: var(--gc-emerald); } .gceo-game-center .g-15 .t15-case.bad { border-color: var(--gc-risk); } .gceo-game-center .g-15 .t15-case.warn { border-color: var(--gc-warn); } .gceo-game-center .g-15 .t15-case-meta { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-15 .t15-res { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; } .gceo-game-center .g-15 .t15-case.good .t15-res .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-15 .t15-case.bad .t15-res .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-15 .t15-wrong { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; } /* ---------- guide popup (core modal gets kind "g-15") ---------- */ .gceo-game-center .g-15 .t15-guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; } .gceo-game-center .g-15 .t15-guide > div { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 4px; background: var(--gc-surface-2); font-size: 13.5px; } .gceo-game-center .g-15 .t15-guide b { display: flex; gap: 8px; align-items: center; color: var(--gc-white); } .gceo-game-center .g-15 .t15-guide small { color: var(--gc-muted); font-weight: 500; } @container (max-width: 860px) { .gceo-game-center .g-15 .t15-sort, .gceo-game-center .g-15 .t15-taxgrid, .gceo-game-center .g-15 .t15-formgrid { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-15 .t15-cards { max-height: 420px; } .gceo-game-center .g-15 .t15-booksum { position: static; order: -1; } .gceo-game-center .g-15 .t15-lrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d d" "w a" "c m" "x x"; gap: 6px 10px; } .gceo-game-center .g-15 .t15-ld { grid-area: d; } .gceo-game-center .g-15 .t15-lw { grid-area: w; } .gceo-game-center .g-15 .t15-la { grid-area: a; } .gceo-game-center .g-15 .t15-lc { grid-area: c; } .gceo-game-center .g-15 .t15-lmove { grid-area: m; justify-self: end; } .gceo-game-center .g-15 .t15-ldocs { grid-area: x; } .gceo-game-center .g-15 .t15-ldocs:empty { display: none; } } @container (max-width: 520px) { .gceo-game-center .g-15 .t15-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-15 .t15-hud .gc-res b { white-space: normal; font-size: 15px; line-height: 1.25; } .gceo-game-center .g-15 .t15-hud .gc-res small { white-space: normal; } .gceo-game-center .g-15 .t15-bins { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-15 .t15-brow { grid-template-columns: minmax(0, 1fr) auto; } .gceo-game-center .g-15 .t15-brow > :nth-child(2) { display: none; } .gceo-game-center .g-15 .t15-bvrow { grid-template-columns: minmax(0, 1fr) auto; } .gceo-game-center .g-15 .t15-bvbar { grid-column: 1 / -1; grid-row: 2; } .gceo-game-center .g-15 .t15-frow { grid-template-columns: 38px minmax(0, 1fr) auto; } .gceo-game-center .g-15 .t15-frow label { grid-column: 2 / -1; } .gceo-game-center .g-15 .t15-frow .t15-in { grid-column: 2; } .gceo-game-center .g-15 .t15-frow .t15-fmark { grid-column: 3; } .gceo-game-center .g-15 .t15-tools .gc-btn { flex: 1 1 auto; } } /* GAME 16 — Cash Register & Cash Control. Every selector is scoped to .gceo-game-center .g-16 */ .gceo-game-center .g-16 .r16 { display: grid; gap: 12px; } .gceo-game-center .g-16 .r16-hud { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); } .gceo-game-center .g-16 .r16-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: start; } .gceo-game-center .g-16 .r16-lower { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: start; } .gceo-game-center .g-16 .r16-brief, .gceo-game-center .g-16 .r16-close { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; } .gceo-game-center .g-16 .r16-bigtitle { font-size: clamp(20px, 3vw, 26px); } .gceo-game-center .g-16 .r16-small { font-size: 12.5px; } .gceo-game-center .g-16 .r16-center { justify-content: center; } .gceo-game-center .g-16 .r16-ok { color: var(--gc-emerald-ink); font-weight: 600; } .gceo-game-center .g-16 .r16-bad { color: var(--gc-risk); font-weight: 600; } .gceo-game-center .g-16 .r16-empty { font-size: 11px; color: var(--gc-faint); font-style: italic; } /* ---------- money art ---------- */ .gceo-game-center .g-16 .r16-bill { --w: 46px; display: inline-grid; place-items: center; width: var(--w); height: calc(var(--w) * .46); border-radius: 2px; border: 1px solid #55614f; color: #2e3b2c; font-weight: 700; font-family: Georgia, "Times New Roman", serif; position: relative; flex: none; box-shadow: inset 0 0 0 2px var(--r16-bt, #dfe5d3), inset 0 0 0 3px rgba(85, 97, 79, .55); background: var(--r16-bt, #dfe5d3); line-height: 1; } .gceo-game-center .g-16 .r16-bill::before { content: ""; position: absolute; width: 34%; height: 64%; border-radius: 50%; border: 1px solid rgba(85, 97, 79, .35); } .gceo-game-center .g-16 .r16-bill i { font-style: normal; position: relative; font-size: calc(var(--w) * .26); } .gceo-game-center .g-16 .r16-bill.b100 { --r16-bt: #dfe5d3; } .gceo-game-center .g-16 .r16-bill.b500 { --r16-bt: #e4dccf; } .gceo-game-center .g-16 .r16-bill.b1000 { --r16-bt: #eadcc0; } .gceo-game-center .g-16 .r16-bill.b2000 { --r16-bt: #d5e1cc; } .gceo-game-center .g-16 .r16-bill.b5000 { --r16-bt: #e8d6d2; } .gceo-game-center .g-16 .r16-bill.b10000 { --r16-bt: #d0e0e4; } .gceo-game-center .g-16 .r16-bill.xs { --w: 25px; } .gceo-game-center .g-16 .r16-bill.xs::before { display: none; } .gceo-game-center .g-16 .r16-bill.sm { --w: 44px; } .gceo-game-center .g-16 .r16-bill.md { --w: 54px; } .gceo-game-center .g-16 .r16-coin { --s: 24px; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .35); background: radial-gradient(circle at 35% 30%, #f4f4ef, #b9bab2 60%, #8f9089); color: #2b2b28; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); } .gceo-game-center .g-16 .r16-coin i { font-style: normal; font-weight: 700; font-size: calc(var(--s) * .34); line-height: 1; } .gceo-game-center .g-16 .r16-coin.c25 { --s: 26px; } .gceo-game-center .g-16 .r16-coin.c10 { --s: 20px; } .gceo-game-center .g-16 .r16-coin.c5 { --s: 23px; } .gceo-game-center .g-16 .r16-coin.c1 { --s: 21px; background: radial-gradient(circle at 35% 30%, #f1bf92, #c27a48 60%, #8e5129); color: #2b1a0e; } .gceo-game-center .g-16 .r16-coin.xs { --s: 17px; } .gceo-game-center .g-16 .r16-coin.c25.xs { --s: 19px; } .gceo-game-center .g-16 .r16-coin.c10.xs { --s: 15px; } .gceo-game-center .g-16 .r16-coin.xs i { font-size: 7px; } /* ---------- drawer ---------- */ .gceo-game-center .g-16 .r16-drawer-body { display: grid; gap: 8px; background: linear-gradient(#1a1917, #121211); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px; } .gceo-game-center .g-16 .gc-paper .r16-drawer-body { background: #1d1c19; } .gceo-game-center .g-16 .r16-slots { display: grid; gap: 6px; } .gceo-game-center .g-16 .r16-slots.bills { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gceo-game-center .g-16 .r16-slots.coins { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gceo-game-center .g-16 .r16-slot { display: grid; gap: 6px; justify-items: center; align-content: space-between; min-height: 96px; padding: 8px 4px; border-radius: 4px; border: 1px solid rgba(207, 161, 90, .28); background: #22211e; color: #efe8da; } .gceo-game-center .g-16 .r16-slot:hover:not(:disabled) { border-color: var(--gc-gold-fill); background: #2a2925; } .gceo-game-center .g-16 .r16-slot:disabled { cursor: default; opacity: 1; } .gceo-game-center .g-16 .r16-slot:disabled .r16-stack { opacity: .8; } .gceo-game-center .g-16 .r16-stack { position: relative; display: grid; place-items: center; width: 100%; height: 44px; } .gceo-game-center .g-16 .r16-st { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + var(--i) * 2px), calc(-50% - var(--i) * 3px)); } .gceo-game-center .g-16 .r16-slots.coins .r16-st { transform: translate(-50%, calc(-50% + 8px - var(--i) * 4px)); } .gceo-game-center .g-16 .r16-slot-lbl { display: flex; gap: 6px; align-items: baseline; } .gceo-game-center .g-16 .r16-slot-lbl b { font-size: 14px; color: #f6efe1; } .gceo-game-center .g-16 .r16-slot-lbl small { font-size: 12px; color: #a9a192; font-variant-numeric: tabular-nums; } .gceo-game-center .g-16 .r16-dt { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--gc-white); } /* counting view */ .gceo-game-center .g-16 .r16-slots.counting.bills { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .gceo-game-center .g-16 .r16-slots.counting.coins { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .gceo-game-center .g-16 .r16-cslot { display: grid; gap: 8px; align-content: space-between; padding: 8px; border: 1px solid rgba(207, 161, 90, .28); border-radius: 4px; background: #22211e; color: #efe8da; min-width: 0; } .gceo-game-center .g-16 .r16-pile { display: grid; grid-template-columns: repeat(5, max-content); gap: 4px 2px; justify-content: center; align-items: center; min-height: 40px; } .gceo-game-center .g-16 .r16-clabel { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #a9a192; text-align: center; } .gceo-game-center .g-16 .r16-stepper { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 4px; } .gceo-game-center .g-16 .r16-stepper .gc-btn { min-height: 40px; padding: 0; background: #1d1c19; border-color: rgba(207, 161, 90, .4); color: #efe8da; } .gceo-game-center .g-16 .r16-stepper input, .gceo-game-center .g-16 .r16-field input, .gceo-game-center .g-16 .r16-field select { min-height: 40px; width: 100%; min-width: 0; border-radius: 4px; border: 1px solid rgba(207, 161, 90, .5); background: #faf6ec; color: #1d1c19; font: inherit; font-weight: 600; text-align: center; padding: 4px 8px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-16 .r16-count-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .gceo-game-center .g-16 .r16-count-tot { display: grid; gap: 2px; } .gceo-game-center .g-16 .r16-count-tot small { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-16 .r16-count-tot b { font-size: 26px; font-family: var(--gc-display); color: var(--gc-white); font-variant-numeric: tabular-nums; } /* ---------- brief / settings ---------- */ .gceo-game-center .g-16 .r16-memo { display: flex; gap: 12px; align-items: flex-start; border: 1px dashed var(--gc-warn); background: var(--gc-warn-soft); border-radius: 4px; padding: 10px 12px; } .gceo-game-center .g-16 .r16-memo .gc-ic { color: var(--gc-warn); width: 22px; height: 22px; margin-top: 2px; } .gceo-game-center .g-16 .r16-set-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--gc-line-soft); font-size: 14px; } .gceo-game-center .g-16 .r16-set-row b { font-variant-numeric: tabular-nums; text-align: right; } .gceo-game-center .g-16 .r16-set-row.big b { font-size: 20px; color: var(--gc-white); } .gceo-game-center .g-16 .r16-set-col { display: grid; gap: 8px; padding-top: 6px; } .gceo-game-center .g-16 .r16-toggle { display: grid; gap: 6px; } .gceo-game-center .g-16 .r16-toggle .gc-btn { justify-content: flex-start; text-align: left; min-height: 44px; white-space: normal; } .gceo-game-center .g-16 .r16-toggle .gc-btn:disabled { opacity: .55; } .gceo-game-center .g-16 .r16-toggle .gc-btn.on:disabled { opacity: 1; } /* ---------- customer ---------- */ .gceo-game-center .g-16 .r16-cust-head { display: flex; gap: 12px; align-items: center; } .gceo-game-center .g-16 .r16-cust-head > div:nth-child(2) { display: grid; flex: 1; min-width: 0; } .gceo-game-center .g-16 .r16-cust-head small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-16 .r16-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gc-gold-fill); color: var(--gc-gold); font-family: var(--gc-display); font-weight: 600; flex: none; } .gceo-game-center .g-16 .r16-timer { display: grid; gap: 4px; width: 84px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .gceo-game-center .g-16 .r16-timer.slow { color: var(--gc-risk); } .gceo-game-center .g-16 .r16-say { background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-left: 2px solid var(--gc-gold-fill); border-radius: 4px; padding: 8px 12px; font-style: italic; } .gceo-game-center .g-16 .r16-basket { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .gceo-game-center .g-16 .r16-basket li { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 4px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); } .gceo-game-center .g-16 .r16-basket li.back { opacity: .6; } .gceo-game-center .g-16 .r16-basket li.back b { text-decoration: line-through; } .gceo-game-center .g-16 .r16-pi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gc-line); flex: none; } .gceo-game-center .g-16 .r16-pn { display: grid; flex: 1; min-width: 0; } .gceo-game-center .g-16 .r16-pn em { font-style: normal; color: var(--gc-gold); } .gceo-game-center .g-16 .r16-pn small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-16 .r16-coupon { display: grid; gap: 8px; border: 1px dashed var(--gc-gold-fill); border-radius: 4px; padding: 10px; background: var(--gc-gold-soft); } .gceo-game-center .g-16 .r16-cp-t { display: flex; gap: 10px; align-items: flex-start; } .gceo-game-center .g-16 .r16-cp-t span { display: grid; } .gceo-game-center .g-16 .r16-cp-t small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-16 .r16-ledge { display: grid; gap: 8px; padding: 10px; border-radius: 4px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); justify-items: start; } .gceo-game-center .g-16 .r16-ledge > small { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-16 .r16-ledge-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .gceo-game-center .g-16 .r16-ledge-row b { margin-left: 6px; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--gc-white); } .gceo-game-center .g-16 .r16-cardv { display: flex; gap: 12px; align-items: center; color: var(--gc-muted); font-size: 13px; } .gceo-game-center .g-16 .r16-card { position: relative; width: 86px; height: 54px; border-radius: 6px; background: linear-gradient(135deg, #2b2a26, #44413a); border: 1px solid var(--gc-gold-fill); flex: none; } .gceo-game-center .g-16 .r16-card i { position: absolute; left: 10px; top: 14px; width: 16px; height: 12px; border-radius: 2px; background: linear-gradient(#e2c27d, #b98f45); } .gceo-game-center .g-16 .r16-card em { position: absolute; left: 10px; bottom: 6px; font-style: normal; font-size: 10px; color: #efe8da; letter-spacing: .08em; } .gceo-game-center .g-16 .r16-done { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-16 .r16-rcpt-mini { display: grid; gap: 4px; padding: 12px 14px; border-radius: 4px; font-size: 13.5px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-16 .r16-rcpt-mini small { color: var(--gc-muted); } /* ---------- register ---------- */ .gceo-game-center .g-16 .r16-screen { background: #0b0f0c; border: 1px solid rgba(207, 161, 90, .4); border-radius: 4px; padding: 10px 12px; color: #d9f2df; font-variant-numeric: tabular-nums; display: grid; gap: 6px; font-size: 14px; } .gceo-game-center .g-16 .r16-scr-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8fbf9d; border-bottom: 1px dashed rgba(143, 191, 157, .35); padding-bottom: 5px; flex-wrap: wrap; } .gceo-game-center .g-16 .r16-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 150px; overflow: auto; } .gceo-game-center .g-16 .r16-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 8px; align-items: center; min-height: 30px; } .gceo-game-center .g-16 .r16-lines li.disc { color: #f0c987; } .gceo-game-center .g-16 .r16-empty-l { color: #8fbf9d; } .gceo-game-center .g-16 .r16-void { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 4px; border: 1px solid rgba(229, 138, 122, .6); background: transparent; color: #e58a7a; } .gceo-game-center .g-16 .r16-void .gc-ic { color: #e58a7a; width: 14px; height: 14px; vertical-align: 0; } .gceo-game-center .g-16 .r16-tots { display: grid; gap: 2px; border-top: 1px dashed rgba(143, 191, 157, .35); padding-top: 6px; } .gceo-game-center .g-16 .r16-tots > div { display: flex; justify-content: space-between; gap: 8px; } .gceo-game-center .g-16 .r16-tots > div.big { font-size: 16.5px; font-weight: 700; color: #f2fff5; } .gceo-game-center .g-16 .r16-tots > div.chg b { color: #f0c987; } .gceo-game-center .g-16 .r16-entry { display: flex; gap: 10px; align-items: baseline; border-top: 1px dashed rgba(143, 191, 157, .35); padding-top: 6px; } .gceo-game-center .g-16 .r16-entry span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8fbf9d; } .gceo-game-center .g-16 .r16-entry em { margin-left: auto; font-style: normal; color: #f0c987; font-weight: 700; } .gceo-game-center .g-16 .r16-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--gc-ink); } .gceo-game-center .g-16 .r16-hint .gc-ic { margin-top: 2px; } .gceo-game-center .g-16 .r16-round { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--gc-gold-fill); border-radius: 4px; background: var(--gc-gold-soft); } .gceo-game-center .g-16 .r16-round > span { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 13.5px; } .gceo-game-center .g-16 .r16-padwrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; align-items: start; } .gceo-game-center .g-16 .r16-pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-16 .r16-key { min-height: 44px; border-radius: 4px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-white); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-16 .r16-key:hover { border-color: var(--gc-gold-fill); background: var(--gc-surface-3); } .gceo-game-center .g-16 .r16-key.fn { font-size: 12px; letter-spacing: .06em; color: var(--gc-gold); } .gceo-game-center .g-16 .r16-key.wide { grid-column: span 2; } .gceo-game-center .g-16 .r16-fns { display: grid; gap: 6px; } .gceo-game-center .g-16 .r16-fkey { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; border-radius: 4px; border: 1px solid var(--gc-gold-fill); background: transparent; color: var(--gc-white); font-weight: 600; font-size: 14px; } .gceo-game-center .g-16 .r16-fkey:hover { background: var(--gc-gold-soft); } .gceo-game-center .g-16 .r16-qt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-16 .r16-fkey.q { border-style: dashed; } .gceo-game-center .g-16 .r16-pkeys { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; } .gceo-game-center .g-16 .r16-pkey { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 6px 4px; border-radius: 4px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); font-size: 12.5px; text-align: center; line-height: 1.2; } .gceo-game-center .g-16 .r16-pkey:hover:not(:disabled) { border-color: var(--gc-gold-fill); } .gceo-game-center .g-16 .r16-pkey:disabled { opacity: .45; } .gceo-game-center .g-16 .r16-pkey small { color: var(--gc-muted); font-variant-numeric: tabular-nums; } /* ---------- side: tray, terminal, receipt ---------- */ .gceo-game-center .g-16 .r16-tray { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 64px; padding: 10px; border-radius: 4px; border: 1px dashed var(--gc-line); background: var(--gc-surface-2); } .gceo-game-center .g-16 .r16-tray.bag { background: rgba(29, 28, 25, .08); } .gceo-game-center .g-16 .r16-tp { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 2px; background: transparent; border: 1px solid transparent; border-radius: 4px; } .gceo-game-center .g-16 .r16-tp:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-16 .r16-term { display: grid; gap: 10px; justify-items: center; padding: 14px; border-radius: 14px; background: linear-gradient(#2a2925, #1a1917); border: 1px solid var(--gc-line); max-width: 260px; width: 100%; justify-self: center; } .gceo-game-center .g-16 .r16-term-scr { width: 100%; min-height: 84px; display: grid; place-items: center; text-align: center; border-radius: 6px; background: #0b0f0c; color: #d9f2df; font-weight: 700; font-size: 20px; letter-spacing: .06em; padding: 8px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-16 .r16-term-scr small { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: #8fbf9d; } .gceo-game-center .g-16 .r16-term.approved .r16-term-scr { color: #74d3ad; box-shadow: inset 0 0 0 2px #2f9a74; } .gceo-game-center .g-16 .r16-term.declined .r16-term-scr { color: #ff9c8c; box-shadow: inset 0 0 0 2px #e58a7a; } .gceo-game-center .g-16 .r16-term.proc .r16-term-scr { color: #f0c987; } .gceo-game-center .g-16 .r16-term-keys { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 36px; } .gceo-game-center .g-16 .r16-term-dot { width: 10px; height: 10px; border-radius: 50%; background: #cfa15a; align-self: center; } .gceo-game-center .g-16 .r16-receipt { display: grid; gap: 3px; font-family: "Courier New", monospace; font-size: 13px; font-variant-numeric: tabular-nums; background: #fffdf6; color: #1d1c19; padding: 12px 14px; border-radius: 2px; border: 1px dashed rgba(29, 28, 25, .25); } .gceo-game-center .g-16 .r16-receipt > div { display: flex; justify-content: space-between; gap: 8px; } .gceo-game-center .g-16 .r16-receipt > div.big { font-weight: 700; border-top: 1px dashed rgba(29, 28, 25, .35); padding-top: 3px; } .gceo-game-center .g-16 .r16-receipt small { color: #5e584d; margin-bottom: 4px; } .gceo-game-center .g-16 .r16-field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; } .gceo-game-center .g-16 .r16-field input, .gceo-game-center .g-16 .r16-field select { text-align: left; } .gceo-game-center .g-16 .r16-field .gc-row { flex-wrap: nowrap; } .gceo-game-center .g-16 .r16-field .gc-row select { width: auto; flex: none; } /* ---------- closing ---------- */ .gceo-game-center .g-16 .r16-report { display: grid; gap: 2px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-16 .r16-report > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--gc-line-soft); } .gceo-game-center .g-16 .r16-report > div.muted { color: var(--gc-muted); } .gceo-game-center .g-16 .r16-report > div.big { font-weight: 700; font-size: 16px; } .gceo-game-center .g-16 .r16-report b { text-align: right; } .gceo-game-center .g-16 .r16-form > .gc-btn { justify-self: start; } .gceo-game-center .g-16 .r16-logp .gc-log { max-height: 150px; } /* ---------- overlay (PIN, bill check) ---------- */ .gceo-game-center .g-16 .r16-ov { position: fixed; inset: 0; z-index: 2147481000; background: rgba(5, 5, 5, .72); display: grid; place-items: center; padding: 16px; } .gceo-game-center .g-16 .r16-ov-card { width: min(100%, 440px); max-height: 90vh; overflow: auto; border-radius: var(--gc-r); padding: 22px; display: grid; gap: 12px; } .gceo-game-center .g-16 .r16-ov-card.wide { width: min(100%, 680px); } .gceo-game-center .g-16 .r16-ov-card h3 { font-family: var(--gc-display); font-size: 20px; text-align: center; display: flex; gap: 10px; align-items: center; justify-content: center; } .gceo-game-center .g-16 .r16-ov-ico { justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--gc-gold); } .gceo-game-center .g-16 .r16-ov-ico .gc-ic { width: 24px; height: 24px; } .gceo-game-center .g-16 .r16-big { width: 100%; max-width: 520px; height: auto; justify-self: center; display: block; } .gceo-game-center .g-16 .r16-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gceo-game-center .g-16 .r16-feat { display: flex; gap: 10px; align-items: flex-start; text-align: left; min-height: 56px; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); } .gceo-game-center .g-16 .r16-feat span { display: grid; gap: 2px; } .gceo-game-center .g-16 .r16-feat small { font-size: 12px; color: var(--gc-muted); } .gceo-game-center .g-16 .r16-feat small .gc-ic { width: 13px; height: 13px; margin-right: 3px; } .gceo-game-center .g-16 .r16-feat.pass { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .g-16 .r16-feat.pass small, .gceo-game-center .g-16 .r16-feat.pass small .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-16 .r16-feat.fail { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-16 .r16-feat.fail small, .gceo-game-center .g-16 .r16-feat.fail small .gc-ic { color: var(--gc-risk); } /* ---------- responsive ---------- */ @container (max-width: 900px) { .gceo-game-center .g-16 .r16-main, .gceo-game-center .g-16 .r16-lower, .gceo-game-center .g-16 .r16-brief, .gceo-game-center .g-16 .r16-close { grid-template-columns: minmax(0, 1fr); } } @container (max-width: 560px) { .gceo-game-center .g-16 .r16-padwrap { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-16 .r16-fns { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gceo-game-center .g-16 .r16-qt { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } .gceo-game-center .g-16 .r16-slots.bills { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gceo-game-center .g-16 .r16-slots.counting.bills, .gceo-game-center .g-16 .r16-slots.counting.coins { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-16 .r16-feats { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-16 .r16-pkeys { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gceo-game-center .g-16 .r16-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-16 .r16-pile { grid-template-columns: repeat(5, max-content); gap: 3px 2px; } } .gceo-game-center .g-16 .r16-stepper input { -moz-appearance: textfield; appearance: textfield; padding: 4px 2px; } .gceo-game-center .g-16 .r16-stepper input::-webkit-outer-spin-button, .gceo-game-center .g-16 .r16-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } @container (max-width: 560px) { .gceo-game-center .g-16 .r16-stepper { grid-template-columns: 44px minmax(36px, 1fr) 44px; gap: 3px; } .gceo-game-center .g-16 .r16-cslot { padding: 6px; } } /* GAME 17 — Customer Service Center. Every selector is scoped to .gceo-game-center .g-17 */ .gceo-game-center .g-17 .s17 { display: grid; gap: 12px; } .gceo-game-center .g-17 .s17-hud { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .gceo-game-center .g-17 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* shift bar */ .gceo-game-center .g-17 .s17-bar { position: relative; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 14px 14px; overflow: hidden; } .gceo-game-center .g-17 .s17-shift { display: flex; gap: 12px; align-items: center; min-width: 0; } .gceo-game-center .g-17 .s17-shift b { display: block; font-family: var(--gc-display); font-size: 19px; font-weight: 600; letter-spacing: .04em; color: var(--gc-white); font-variant-numeric: tabular-nums; } .gceo-game-center .g-17 .s17-shift b small { font-family: var(--gc-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0; } .gceo-game-center .g-17 .gc-ring.sm { width: 38px; height: 38px; } .gceo-game-center .g-17 .s17-bar-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gceo-game-center .g-17 .s17-speed { display: inline-flex; gap: 4px; } .gceo-game-center .g-17 .s17-day { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gc-track); } .gceo-game-center .g-17 .s17-day i { display: block; height: 100%; background: linear-gradient(90deg, var(--gc-emerald), var(--gc-gold-fill)); transition: width .25s linear; } /* main layout */ .gceo-game-center .g-17 .s17-main { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(280px, 340px); gap: 12px; align-items: start; } @container (max-width: 1150px) { .gceo-game-center .g-17 .s17-main { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } .gceo-game-center .g-17 .s17-queue { grid-column: 1 / -1; } .gceo-game-center .g-17 .s17-qlist { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } } @container (max-width: 760px) { .gceo-game-center .g-17 .s17-main { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-17 .s17-panel, .gceo-game-center .g-17 .gc-panel { padding: 14px 12px; } .gceo-game-center .g-17 .s17-tool { max-height: none; } } /* queue */ .gceo-game-center .g-17 .s17-qcount { font-size: 12.5px; } .gceo-game-center .g-17 .s17-qlist { display: grid; gap: 8px; } .gceo-game-center .g-17 .s17-q { display: grid; gap: 8px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-left: 3px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px; min-width: 0; } .gceo-game-center .g-17 .s17-q.ch-phone { border-left-color: var(--gc-gold-fill); } .gceo-game-center .g-17 .s17-q.ch-chat { border-left-color: var(--gc-emerald); } .gceo-game-center .g-17 .s17-q-top { display: flex; gap: 10px; align-items: center; min-width: 0; } .gceo-game-center .g-17 .s17-q-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--gc-line); } .gceo-game-center .g-17 .s17-q.ringing .s17-q-ico { animation: s17-ring 1.2s ease-in-out infinite; border-color: var(--gc-gold-fill); } @keyframes s17-ring { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } } .gceo-game-center .g-17 .s17-q-who { display: grid; min-width: 0; } .gceo-game-center .g-17 .s17-q-who b { color: var(--gc-white); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gceo-game-center .g-17 .s17-q-who small { color: var(--gc-muted); font-size: 12px; line-height: 1.35; } .gceo-game-center .g-17 .s17-q-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; } .gceo-game-center .g-17 .s17-q-foot .gc-pill { font-variant-numeric: tabular-nums; } .gceo-game-center .g-17 .s17-q-note, .gceo-game-center .g-17 .s17-tip { font-size: 12.5px; } .gceo-game-center .g-17 .s17-empty { display: flex; gap: 8px; align-items: center; padding: 14px 4px; font-size: 13.5px; } /* workspace */ .gceo-game-center .g-17 .s17-ws { gap: 12px; } .gceo-game-center .g-17 .s17-idle { display: grid; gap: 10px; justify-items: start; padding: 6px 0; } .gceo-game-center .g-17 .s17-steps { margin: 4px 0 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 14px; color: var(--gc-muted); } .gceo-game-center .g-17 .s17-steps b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-17 .s17-steps li::marker { color: var(--gc-gold); font-weight: 600; } .gceo-game-center .g-17 .s17-ws-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; } .gceo-game-center .g-17 .s17-who { display: flex; gap: 10px; align-items: center; min-width: 0; } .gceo-game-center .g-17 .s17-who small { display: block; font-size: 12.5px; overflow-wrap: anywhere; } .gceo-game-center .g-17 .s17-who h3:focus { outline: none; } .gceo-game-center .g-17 .s17-who-tags { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-17 .s17-who-tags .gc-pill { font-variant-numeric: tabular-nums; } /* transcript (cream paper) */ .gceo-game-center .g-17 .s17-convo { display: grid; gap: 8px; align-content: start; border-radius: var(--gc-r); padding: 16px 18px; max-height: 300px; overflow-y: auto; font-size: 14.5px; scrollbar-width: thin; } .gceo-game-center .g-17 .s17-line { display: grid; gap: 2px; max-width: 88%; } .gceo-game-center .g-17 .s17-line p { padding: 8px 12px; border-radius: 10px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); line-height: 1.45; } .gceo-game-center .g-17 .s17-line.agent { justify-self: end; text-align: left; } .gceo-game-center .g-17 .s17-line.agent p { background: #1d1c19; color: #efe8da; border-color: #1d1c19; } .gceo-game-center .g-17 .s17-line.agent .s17-line-who { justify-self: end; } .gceo-game-center .g-17 .s17-line-who { display: inline-flex; gap: 5px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-gold); } .gceo-game-center .g-17 .ch-phone .s17-line { max-width: 100%; } .gceo-game-center .g-17 .ch-phone .s17-line p { background: transparent; border: 0; border-left: 2px solid var(--gc-line); border-radius: 0; padding: 2px 0 2px 12px; } .gceo-game-center .g-17 .ch-phone .s17-line.agent { justify-self: stretch; } .gceo-game-center .g-17 .ch-phone .s17-line.agent .s17-line-who { justify-self: start; } .gceo-game-center .g-17 .ch-phone .s17-line.agent p { background: transparent; color: var(--gc-ink); border-left-color: var(--gc-gold); font-style: italic; } .gceo-game-center .g-17 .s17-sys { font-size: 12.5px; color: var(--gc-muted); text-align: center; font-style: italic; } .gceo-game-center .g-17 .s17-att { display: flex; gap: 8px; align-items: center; font-size: 13px; background: var(--gc-gold-soft); border: 1px dashed var(--gc-line); border-radius: 6px; padding: 6px 10px; } .gceo-game-center .g-17 .s17-mailhead { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--gc-line-soft); font-size: 13.5px; } .gceo-game-center .g-17 .s17-mailhead div { display: flex; gap: 10px; flex-wrap: wrap; } .gceo-game-center .g-17 .s17-mailhead small { min-width: 64px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-muted); padding-top: 2px; } .gceo-game-center .g-17 .s17-mailhead b { font-weight: 600; overflow-wrap: anywhere; color: var(--gc-white); } .gceo-game-center .g-17 .s17-mailbody { line-height: 1.6; } /* asks */ .gceo-game-center .g-17 .s17-askrow { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-17 .s17-asknote { display: flex; gap: 8px; align-items: center; font-size: 13px; } .gceo-game-center .g-17 .s17-chatin { display: flex; gap: 6px; margin-top: 8px; } .gceo-game-center .g-17 input[type="text"], .gceo-game-center .g-17 input[type="search"], .gceo-game-center .g-17 input[type="number"], .gceo-game-center .g-17 textarea { font: inherit; font-size: 14.5px; color: var(--gc-ink); background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 4px; padding: 10px 12px; min-height: 44px; min-width: 0; width: 100%; } .gceo-game-center .g-17 input:focus-visible, .gceo-game-center .g-17 textarea:focus-visible { outline: 2px solid var(--gc-gold-fill); outline-offset: 1px; } .gceo-game-center .g-17 input::placeholder, .gceo-game-center .g-17 textarea::placeholder { color: var(--gc-faint); } .gceo-game-center .g-17 .s17-chatin input { flex: 1; } /* steps */ .gceo-game-center .g-17 .s17-step { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-17 .s17-step h4 { display: flex; gap: 10px; align-items: center; font-family: var(--gc-display); font-size: 15.5px; font-weight: 600; letter-spacing: .05em; } .gceo-game-center .g-17 .s17-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gc-gold-fill); color: var(--gc-gold); font-family: var(--gc-body); font-size: 12px; font-weight: 600; } .gceo-game-center .g-17 .s17-linked { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: 13.5px; background: var(--gc-emerald-soft); border: 1px solid var(--gc-emerald); border-radius: var(--gc-r); padding: 8px 10px; } .gceo-game-center .g-17 .s17-linked span { flex: 1 1 200px; } .gceo-game-center .g-17 .s17-linked.none { background: var(--gc-surface-2); border-color: var(--gc-line-soft); } .gceo-game-center .g-17 .s17-linked.bad { background: var(--gc-risk-soft); border-color: var(--gc-risk); } .gceo-game-center .g-17 .s17-linked.bad .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-17 .s17-acts { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-17 .s17-amt, .gceo-game-center .g-17 .s17-note { display: grid; gap: 4px; font-size: 13px; } .gceo-game-center .g-17 .s17-amt { grid-template-columns: auto minmax(90px, 140px) 1fr; align-items: center; gap: 8px 10px; } .gceo-game-center .g-17 .s17-amt label, .gceo-game-center .g-17 .s17-note label, .gceo-game-center .g-17 .s17-msg-l { font-weight: 600; color: var(--gc-white); font-size: 13px; } @container (max-width: 520px) { .gceo-game-center .g-17 .s17-amt { grid-template-columns: 1fr; } } .gceo-game-center .g-17 .s17-extra { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; } .gceo-game-center .g-17 .s17-cost { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--gc-muted); } .gceo-game-center .g-17 .s17-cost b { color: var(--gc-white); } .gceo-game-center .g-17 .s17-cost.bad, .gceo-game-center .g-17 .s17-cost.bad b { color: var(--gc-risk); } /* composer */ .gceo-game-center .g-17 .s17-parts { display: grid; gap: 6px; } .gceo-game-center .g-17 .s17-part { display: grid; grid-template-columns: 104px 1fr; gap: 8px; align-items: center; } .gceo-game-center .g-17 .s17-part-l { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted); } .gceo-game-center .g-17 .s17-chips { display: flex; flex-wrap: wrap; gap: 4px; } .gceo-game-center .g-17 .s17-chips .gc-btn { padding: 6px 12px; } .gceo-game-center .g-17 .s17-auto { font-size: 12.5px; font-style: italic; } @container (max-width: 520px) { .gceo-game-center .g-17 .s17-part { grid-template-columns: 1fr; gap: 4px; } } .gceo-game-center .g-17 .s17-msg { line-height: 1.5; resize: vertical; } .gceo-game-center .g-17 .s17-msg-foot { align-items: flex-start; } .gceo-game-center .g-17 .s17-check { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 260px; } .gceo-game-center .g-17 .s17-chk { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--gc-line-soft); color: var(--gc-muted); } .gceo-game-center .g-17 .s17-chk.ok { color: var(--gc-emerald-ink); border-color: transparent; background: var(--gc-emerald-soft); } .gceo-game-center .g-17 .s17-chk.ok .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-17 .s17-chk.no { color: var(--gc-risk); border-color: var(--gc-risk-soft); } .gceo-game-center .g-17 .s17-chk.no .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-17 .s17-edited { font-size: 12.5px; display: flex; gap: 6px; align-items: center; } .gceo-game-center .g-17 .s17-send { display: grid; gap: 6px; justify-items: end; padding-top: 12px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-17 .s17-send-note { font-size: 13px; text-align: right; } .gceo-game-center .g-17 .s17-send-note.bad { color: var(--gc-risk); } .gceo-game-center .g-17 .s17-send-note .gc-ic { color: var(--gc-risk); } /* tools */ .gceo-game-center .g-17 .s17-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .gceo-game-center .g-17 .s17-tabs .gc-btn { padding: 8px 6px; } .gceo-game-center .g-17 .s17-tool { display: grid; gap: 10px; max-height: 74vh; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; } .gceo-game-center .g-17 .s17-search { display: flex; gap: 6px; } .gceo-game-center .g-17 .s17-search input { flex: 1; } .gceo-game-center .g-17 .s17-results { display: grid; gap: 6px; font-size: 13.5px; } .gceo-game-center .g-17 .s17-res { display: grid; gap: 2px; text-align: left; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 10px 12px; min-height: 44px; color: var(--gc-ink); } .gceo-game-center .g-17 .s17-res:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-17 .s17-res b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-17 .s17-res span { overflow-wrap: anywhere; } .gceo-game-center .g-17 .s17-res small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-17 .s17-order { display: grid; gap: 10px; font-size: 13.5px; } .gceo-game-center .g-17 .s17-oid { display: flex; gap: 8px; align-items: center; font-family: var(--gc-display); font-size: 17px; letter-spacing: .05em; } .gceo-game-center .g-17 .s17-dl { display: grid; grid-template-columns: 104px 1fr; gap: 4px 10px; margin: 0; font-size: 13.5px; } .gceo-game-center .g-17 .s17-dl dt { color: var(--gc-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; } .gceo-game-center .g-17 .s17-dl dd { margin: 0; overflow-wrap: anywhere; } .gceo-game-center .g-17 .s17-items { font-size: 13px; } .gceo-game-center .g-17 .s17-items td, .gceo-game-center .g-17 .s17-items th { padding: 6px 6px; } .gceo-game-center .g-17 .s17-items td:last-child, .gceo-game-center .g-17 .s17-items th:last-child { text-align: right; white-space: nowrap; } .gceo-game-center .g-17 .s17-items .gc-pill { font-size: 10.5px; padding: 1px 7px; white-space: normal; } .gceo-game-center .g-17 .s17-sub { display: grid; gap: 4px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 8px 10px; } .gceo-game-center .g-17 .s17-sub > b { display: flex; gap: 6px; align-items: center; font-weight: 600; color: var(--gc-white); font-size: 13px; } .gceo-game-center .g-17 .s17-sub ul { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; } .gceo-game-center .g-17 .s17-sub li span { color: var(--gc-muted); margin-right: 4px; } .gceo-game-center .g-17 .s17-sub li.ok { color: var(--gc-emerald-ink); } .gceo-game-center .g-17 .s17-sub.warn { border-color: var(--gc-warn); background: var(--gc-warn-soft); } .gceo-game-center .g-17 .s17-sub.warn .gc-ic { color: var(--gc-warn); } .gceo-game-center .g-17 .gc-btn.block { width: 100%; } .gceo-game-center .g-17 .s17-linked-ok { display: flex; gap: 6px; align-items: center; color: var(--gc-emerald-ink); font-weight: 600; } .gceo-game-center .g-17 .s17-linked-ok .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-17 .s17-pol { display: grid; gap: 8px; } .gceo-game-center .g-17 .s17-pcard { display: grid; gap: 4px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-left: 2px solid var(--gc-gold-fill); border-radius: 0 var(--gc-r) var(--gc-r) 0; padding: 9px 12px; } .gceo-game-center .g-17 .s17-pcard h4 { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; font-family: var(--gc-body); } .gceo-game-center .g-17 .s17-pcard p { font-size: 13px; color: var(--gc-muted); line-height: 1.5; } .gceo-game-center .g-17 .s17-metrics { display: grid; gap: 12px; } .gceo-game-center .g-17 .s17-smart { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; background: var(--gc-gold-soft); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 12px; } .gceo-game-center .g-17 .s17-smart .gc-ic { margin-top: 2px; } /* log */ .gceo-game-center .g-17 .s17-log { max-height: 160px; } .gceo-game-center .g-17 .s17-ltime { font-size: 11px; color: var(--gc-muted); font-variant-numeric: tabular-nums; margin-right: 4px; } /* popups (rendered in the core modal host, outside .g-17) use the s17- prefix under the game center root */ .gceo-game-center .s17-fb, .gceo-game-center .s17-report { display: grid; gap: 10px; text-align: left; font-size: 14px; } .gceo-game-center .s17-fb-stars { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 18px; } .gceo-game-center .s17-fb-stars span:last-child { font-size: 13.5px; color: var(--gc-muted); } .gceo-game-center .s17-fb-row { display: grid; gap: 4px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-left: 2px solid var(--gc-gold-fill); border-radius: 0 4px 4px 0; padding: 8px 12px; } .gceo-game-center .s17-fb-row > b { display: flex; gap: 6px; align-items: center; color: var(--gc-white); font-weight: 600; } .gceo-game-center .s17-fb-row.ok { border-left-color: var(--gc-emerald); } .gceo-game-center .s17-fb-row.ok > b .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .s17-fb-row.bad { border-left-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .s17-fb-row.bad > b .gc-ic { color: var(--gc-risk); } .gceo-game-center .s17-fb-row ul, .gceo-game-center .s17-fb-notes { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; } .gceo-game-center .s17-fb-notes { font-size: 13px; color: var(--gc-muted); } .gceo-game-center .s17-warnline { display: flex; gap: 8px; align-items: center; color: var(--gc-warn); font-size: 13.5px; } .gceo-game-center .s17-warnline .gc-ic { color: var(--gc-warn); } .gceo-game-center .s17-rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; } .gceo-game-center .s17-rep-grid div { display: grid; gap: 2px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: 4px; padding: 8px 10px; } .gceo-game-center .s17-rep-grid small { font-size: 11px; color: var(--gc-muted); text-transform: uppercase; letter-spacing: .06em; } .gceo-game-center .s17-rep-grid b { font-size: 18px; color: var(--gc-white); font-variant-numeric: tabular-nums; } .gceo-game-center .s17-report .s17-smart { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; background: var(--gc-gold-soft); border: 1px solid var(--gc-line); border-radius: 6px; padding: 10px 12px; } /* ===== Career Simulator (g17-career.js) · classes start with cx- ===== */ .gceo-game-center .g-17 .gc-input { font: inherit; font-size: 14.5px; color: var(--gc-ink); background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 4px; padding: 10px 12px; min-height: 44px; min-width: 0; width: 100%; } .gceo-game-center .g-17 select.gc-input { cursor: pointer; } .gceo-game-center .g-17 .gc-input:focus-visible { outline: 2px solid var(--gc-gold-fill); outline-offset: 1px; } .gceo-game-center .g-17 .cx-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; } .gceo-game-center .g-17 .cx-mode { display: grid; gap: 10px; align-content: start; justify-items: start; } .gceo-game-center .g-17 .cx-mode h3, .gceo-game-center .g-17 .cx-h { font-family: var(--gc-display); font-size: 22px; font-weight: 600; color: var(--gc-white); margin: 0; } .gceo-game-center .g-17 .cx-mode.featured { border-color: var(--gc-gold-fill); } .gceo-game-center .g-17 .cx { display: grid; gap: 12px; } .gceo-game-center .g-17 .cx-hero { display: grid; gap: 12px; } .gceo-game-center .g-17 .cx-tag { color: var(--gc-gold); font-size: 13px; letter-spacing: .04em; } .gceo-game-center .g-17 .cx-ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; } .gceo-game-center .g-17 .cx-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 12px; } .gceo-game-center .g-17 .cx-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--gc-white); } .gceo-game-center .g-17 .cx-form label small { font-weight: 400; } .gceo-game-center .g-17 .cx-form .cx-wide, .gceo-game-center .g-17 .cx-acts { grid-column: 1 / -1; } .gceo-game-center .g-17 .cx-acts { border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; } .gceo-game-center .g-17 .cx-acts legend { font-size: 13px; font-weight: 600; color: var(--gc-white); padding: 0 4px; } .gceo-game-center .g-17 .cx-check { display: inline-flex !important; grid-template-columns: none; align-items: center; gap: 8px; font-weight: 400 !important; color: var(--gc-ink) !important; min-height: 36px; } .gceo-game-center .g-17 .cx-check input { width: 18px; height: 18px; accent-color: #cfa15a; flex: none; } .gceo-game-center .g-17 .cx-badge { display: flex; gap: 14px; align-items: center; } .gceo-game-center .g-17 .cx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; } .gceo-game-center .g-17 .cx-stats > div { background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 8px 12px; display: grid; gap: 2px; } .gceo-game-center .g-17 .cx-stats small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-17 .cx-stats b { color: var(--gc-white); font-weight: 600; font-variant-numeric: tabular-nums; } .gceo-game-center .g-17 .cx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; } .gceo-game-center .g-17 .cx-grid .gc-panel { display: grid; gap: 10px; align-content: start; } .gceo-game-center .g-17 .cx-callout { display: flex; gap: 8px; align-items: flex-start; background: var(--gc-gold-soft); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 12px; font-size: 14px; margin: 0; } .gceo-game-center .g-17 .cx-callout.good { background: var(--gc-emerald-soft); } .gceo-game-center .g-17 .cx-callout.warn { background: var(--gc-warn-soft); } .gceo-game-center .g-17 .cx-callout.bad { background: var(--gc-risk-soft); } .gceo-game-center .g-17 .cx-callout .gc-ic { flex: none; margin-top: 2px; } .gceo-game-center .g-17 .cx-top { display: flex; } /* desk */ .gceo-game-center .g-17 .cx-hud { position: relative; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 14px 14px; overflow: hidden; } .gceo-game-center .g-17 .cx-hud-l, .gceo-game-center .g-17 .cx-hud-r { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .gceo-game-center .g-17 .cx-time { font-family: var(--gc-display); font-size: 22px; font-weight: 600; color: var(--gc-white); font-variant-numeric: tabular-nums; min-width: 6.2ch; } .gceo-game-center .g-17 .cx-state { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--gc-line); } .gceo-game-center .g-17 .cx-state.good { border-color: var(--gc-emerald); color: var(--gc-emerald-ink); background: var(--gc-emerald-soft); } .gceo-game-center .g-17 .cx-state.warn { border-color: var(--gc-warn); background: var(--gc-warn-soft); } .gceo-game-center .g-17 .cx-speed { display: inline-flex; gap: 4px; flex-wrap: wrap; } .gceo-game-center .g-17 .cx-day { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gc-track); } .gceo-game-center .g-17 .cx-day i { display: block; height: 100%; background: linear-gradient(90deg, var(--gc-emerald), var(--gc-gold-fill)); } .gceo-game-center .g-17 .cx-paused { flex-basis: 100%; display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--gc-gold); } .gceo-game-center .g-17 .cx-clock { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--gc-surface); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 10px 14px; } .gceo-game-center .g-17 .cx-clock .gc-eyebrow { margin-right: 4px; } .gceo-game-center .g-17 .cx-paid { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-17 .cx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gc-risk); margin-left: 4px; } .gceo-game-center .g-17 .cx-desk { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(280px, 340px); gap: 12px; align-items: start; } .gceo-game-center .g-17 .cx-desk:not(:has(.cx-queue)) { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } @container (max-width: 1150px) { .gceo-game-center .g-17 .cx-desk { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); } .gceo-game-center .g-17 .cx-queue { grid-column: 1 / -1; } } @container (max-width: 760px) { .gceo-game-center .g-17 .cx-desk, .gceo-game-center .g-17 .cx-desk:not(:has(.cx-queue)) { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-17 .cx-paid { margin-left: 0; flex-basis: 100%; } } .gceo-game-center .g-17 .cx-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .gceo-game-center .g-17 .cx-q { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-left: 3px solid var(--gc-gold-fill); border-radius: var(--gc-r); padding: 10px; } .gceo-game-center .g-17 .cx-q.hot { border-left-color: var(--gc-risk); } .gceo-game-center .g-17 .cx-q > div { display: grid; min-width: 0; } .gceo-game-center .g-17 .cx-q b { color: var(--gc-white); font-weight: 600; overflow-wrap: anywhere; } .gceo-game-center .g-17 .cx-q small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-17 .cx-q .gc-btn { grid-column: 1 / -1; } .gceo-game-center .g-17 .gc-ring.sm { width: 36px; height: 36px; } .gceo-game-center .g-17 .cx-ws { display: grid; gap: 12px; min-width: 0; } .gceo-game-center .g-17 .cx-idle { display: grid; gap: 8px; justify-items: start; padding: 8px 0; } .gceo-game-center .g-17 .cx-idle h3 { margin: 0; color: var(--gc-white); font-family: var(--gc-display); font-size: 20px; font-weight: 600; } .gceo-game-center .g-17 .cx-chead { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .gceo-game-center .g-17 .cx-chead > div { display: grid; min-width: 0; flex: 1; } .gceo-game-center .g-17 .cx-chead b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-17 .cx-chead small { color: var(--gc-muted); font-size: 12.5px; } .gceo-game-center .g-17 .cx-pill { display: inline-flex; align-items: center; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gc-line); white-space: nowrap; } .gceo-game-center .g-17 .cx-pill.live { border-color: var(--gc-emerald); color: var(--gc-emerald-ink); background: var(--gc-emerald-soft); } .gceo-game-center .g-17 .cx-pill.warn { border-color: var(--gc-warn); background: var(--gc-warn-soft); } .gceo-game-center .g-17 .cx-timer { font-variant-numeric: tabular-nums; color: var(--gc-muted); font-size: 13px; } .gceo-game-center .g-17 .cx-hist { border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 8px 12px; font-size: 13.5px; } .gceo-game-center .g-17 .cx-hist summary { cursor: pointer; display: flex; gap: 6px; align-items: center; font-weight: 600; color: var(--gc-white); min-height: 32px; } .gceo-game-center .g-17 .cx-hist ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 4px; } .gceo-game-center .g-17 .cx-hint { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 13px; color: var(--gc-gold); margin: 0; } .gceo-game-center .g-17 .cx-link { background: none; border: 0; padding: 4px 2px; color: var(--gc-gold); text-decoration: underline; font: inherit; cursor: pointer; min-height: 32px; } .gceo-game-center .g-17 .cx-tr { display: grid; gap: 8px; align-content: start; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 12px; max-height: 340px; overflow-y: auto; scrollbar-width: thin; } .gceo-game-center .g-17 .cx-tr.small { max-height: 220px; font-size: 13px; margin-top: 8px; } .gceo-game-center .g-17 .cx-line { display: flex; gap: 6px; max-width: 90%; } .gceo-game-center .g-17 .cx-line p { margin: 0; padding: 8px 12px; border-radius: 10px; line-height: 1.45; background: var(--gc-surface); border: 1px solid var(--gc-line-soft); } .gceo-game-center .g-17 .cx-line.a { justify-self: end; } .gceo-game-center .g-17 .cx-line.a p { background: #1d1c19; color: #efe8da; border-color: #1d1c19; } .gceo-game-center .g-17 .cx-line.a.mail p { white-space: pre-wrap; } .gceo-game-center .g-17 .cx-line.s { justify-self: center; max-width: 100%; color: var(--gc-muted); font-size: 12.5px; font-style: italic; align-items: center; } .gceo-game-center .g-17 .cx-line.s p { background: transparent; border: 0; padding: 0; } .gceo-game-center .g-17 .cx-opts { display: grid; gap: 8px; } .gceo-game-center .g-17 .cx-opt { text-align: left; font: inherit; font-size: 14.5px; line-height: 1.45; color: var(--gc-ink); background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 14px; cursor: pointer; min-height: 44px; } .gceo-game-center .g-17 .cx-opt:hover:not(:disabled) { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-17 .cx-opt:focus-visible { outline: 2px solid var(--gc-gold-fill); outline-offset: 2px; } .gceo-game-center .g-17 .cx-opt:disabled { opacity: .55; cursor: not-allowed; } .gceo-game-center .g-17 .cx-compose { display: grid; gap: 8px; } .gceo-game-center .g-17 .cx-note { min-height: 1.2em; margin: 0; font-size: 13.5px; color: var(--gc-risk); } .gceo-game-center .g-17 .cx-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--gc-line-soft); padding-bottom: 8px; margin-bottom: 10px; } .gceo-game-center .g-17 .cx-tab { display: inline-flex; gap: 6px; align-items: center; font: inherit; font-size: 13px; color: var(--gc-muted); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 6px 10px; min-height: 40px; cursor: pointer; } .gceo-game-center .g-17 .cx-tab.on { color: var(--gc-white); border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-17 .cx-tab:focus-visible { outline: 2px solid var(--gc-gold-fill); } .gceo-game-center .g-17 .cx-tool { display: grid; gap: 10px; max-height: 640px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; } .gceo-game-center .g-17 .cx-kb, .gceo-game-center .g-17 .cx-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .gceo-game-center .g-17 .cx-kb li { border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); } .gceo-game-center .g-17 .cx-kb li.open { border-color: var(--gc-gold-fill); } .gceo-game-center .g-17 .cx-kb p { margin: 0; padding: 0 12px 10px; font-size: 13.5px; line-height: 1.5; } .gceo-game-center .g-17 .cx-kbh { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; font: inherit; font-size: 13.5px; color: var(--gc-ink); background: none; border: 0; padding: 8px 12px; min-height: 44px; cursor: pointer; } .gceo-game-center .g-17 .cx-kbh b { color: var(--gc-gold); font-weight: 600; margin-right: 4px; } .gceo-game-center .g-17 .cx-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13.5px; } .gceo-game-center .g-17 .cx-dl dt { color: var(--gc-muted); } .gceo-game-center .g-17 .cx-dl dd { margin: 0; overflow-wrap: anywhere; } .gceo-game-center .g-17 .cx-filters { display: flex; flex-wrap: wrap; gap: 4px; } .gceo-game-center .g-17 .cx-filters .gc-btn.small { min-height: 36px; padding: 4px 10px; } .gceo-game-center .g-17 .cx-case { border: 1px solid var(--gc-line-soft); border-left: 3px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 12px; display: grid; gap: 6px; font-size: 13.5px; } .gceo-game-center .g-17 .cx-case.st-draft { border-left-color: var(--gc-warn); } .gceo-game-center .g-17 .cx-case.st-followup, .gceo-game-center .g-17 .cx-case.st-escalated, .gceo-game-center .g-17 .cx-case.st-unresolved { border-left-color: var(--gc-gold-fill); } .gceo-game-center .g-17 .cx-case.st-resolved, .gceo-game-center .g-17 .cx-case.st-closed { border-left-color: var(--gc-emerald); } .gceo-game-center .g-17 .cx-case-h { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; } .gceo-game-center .g-17 .cx-case-h b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-17 .cx-notetext { margin: 0; white-space: pre-wrap; line-height: 1.5; } .gceo-game-center .g-17 .cx-corr { margin: 0; padding: 6px 10px; border-radius: 6px; background: var(--gc-warn-soft); display: flex; gap: 6px; align-items: flex-start; } .gceo-game-center .g-17 .cx-corrbox { display: grid; gap: 6px; } .gceo-game-center .g-17 .cx-corrbox label { display: grid; gap: 4px; font-size: 13px; } .gceo-game-center .g-17 .cx-tl { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 3px; font-size: 12.5px; } .gceo-game-center .g-17 .cx-case details summary { cursor: pointer; color: var(--gc-muted); font-size: 12.5px; min-height: 28px; display: flex; align-items: center; } .gceo-game-center .g-17 .cx-punch, .gceo-game-center .g-17 .cx-flags, .gceo-game-center .g-17 .cx-qa, .gceo-game-center .g-17 .cx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; } .gceo-game-center .g-17 .cx-flags li, .gceo-game-center .g-17 .cx-qa li, .gceo-game-center .g-17 .cx-checks li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; } .gceo-game-center .g-17 .cx-flags li > span, .gceo-game-center .g-17 .cx-checks li > span { flex: 1; min-width: 160px; } .gceo-game-center .g-17 .cx-flags .cx-corrbox { flex-basis: 100%; } .gceo-game-center .g-17 .cx-flags li .gc-ic, .gceo-game-center .g-17 .cx-qa .no .gc-ic, .gceo-game-center .g-17 .cx-checks .no .gc-ic { color: var(--gc-warn); } .gceo-game-center .g-17 .cx-flags li.ok .gc-ic, .gceo-game-center .g-17 .cx-qa .ok .gc-ic, .gceo-game-center .g-17 .cx-checks .ok .gc-ic { color: var(--gc-emerald); } .gceo-game-center .g-17 .cx-ws h4, .gceo-game-center .g-17 .cx-tool h4, .gceo-game-center .g-17 .cx-report h4, .gceo-game-center .g-17 .cx-coach h4 { margin: 4px 0; color: var(--gc-white); font-size: 14px; font-weight: 600; display: flex; gap: 6px; align-items: center; } .gceo-game-center .g-17 .cx-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; } .gceo-game-center .g-17 .cx-sum p { margin: 0 0 6px; } .gceo-game-center .g-17 .cx-stars { font-size: 22px; color: var(--gc-gold-fill); letter-spacing: 2px; } .gceo-game-center .g-17 .cx-coach { background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 10px 14px; } .gceo-game-center .g-17 .cx-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-17 .cx-tbl th, .gceo-game-center .g-17 .cx-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--gc-line-soft); text-align: right; } .gceo-game-center .g-17 .cx-tbl th[scope="row"] { text-align: left; font-weight: 400; } .gceo-game-center .g-17 .cx-tbl th small { display: block; color: var(--gc-muted); font-size: 11.5px; } .gceo-game-center .g-17 .cx-tbl tr.tot th, .gceo-game-center .g-17 .cx-tbl tr.tot td { font-weight: 700; color: var(--gc-white); } .gceo-game-center .g-17 .cx-report, .gceo-game-center .g-17 .cx-stub { display: grid; gap: 10px; } .gceo-game-center .g-17 .cx-round { display: flex; gap: 12px; align-items: baseline; } .gceo-game-center .g-17 .cx-round b { font-family: var(--gc-display); font-size: 44px; color: var(--gc-gold); line-height: 1; } .gceo-game-center .g-17 .cx-assess { margin: 0; padding-left: 1.2em; display: grid; gap: 12px; } .gceo-game-center .g-17 .cx-assess fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; } .gceo-game-center .g-17 .cx-assess legend { font-weight: 600; color: var(--gc-white); margin-bottom: 4px; } .gceo-game-center .g-17 .cx-main-act { flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .gceo-game-center .g-17 .cx-day i { transition: none; } } /* Career ladder, case files, team and business panels */ .gceo-game-center .g-17 .cx-ladder { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; } .gceo-game-center .g-17 .cx-ladder li span { display: block; color: var(--gc-muted); font-size: 13.5px; } .gceo-game-center .g-17 .cx-ladder b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-17 .cx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-17 .cx-steps li { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--gc-line); color: var(--gc-muted); } .gceo-game-center .g-17 .cx-steps li.done { border-color: var(--gc-emerald); color: var(--gc-emerald-ink); background: var(--gc-emerald-soft); } .gceo-game-center .g-17 .cx-steps li.now { border-color: var(--gc-gold-fill); color: var(--gc-white); background: var(--gc-gold-soft); } .gceo-game-center .g-17 .cx-facts .cx-dl { margin-top: 6px; } .gceo-game-center .g-17 .cx-kbfor { margin: 0; font-size: 12.5px; } .gceo-game-center .g-17 .meter-cx { height: 6px; border-radius: 999px; background: var(--gc-track); overflow: hidden; } .gceo-game-center .g-17 .meter-cx i { display: block; height: 100%; background: linear-gradient(90deg, var(--gc-emerald), var(--gc-gold-fill)); } .gceo-game-center .g-17 .cx-tbl thead th { text-align: right; font-weight: 600; color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-17 .cx-tbl thead th:first-child { text-align: left; } .gceo-game-center .g-17 .cx-modes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .gceo-game-center .g-17 .cx-modes-note { margin: 8px 0 0; font-size: 13px; } /* GAME 18 — Fraud Detective: Protect the Business. Every selector is scoped to .gceo-game-center .g-18 */ .gceo-game-center .g-18 .fd { display: grid; gap: 12px; } .gceo-game-center .g-18 .fd-h { font-family: var(--gc-display); font-size: 21px; font-weight: 600; letter-spacing: .03em; line-height: 1.25; color: var(--gc-white); } .gceo-game-center .g-18 .fd-small { font-size: 12.5px; } .gceo-game-center .g-18 .fd-center { justify-content: center; } .gceo-game-center .g-18 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- academy ---------- */ .gceo-game-center .g-18 .fd-acad-head { gap: 12px; } .gceo-game-center .g-18 .fd-acad-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; } .gceo-game-center .g-18 .fd-acad-rules > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 12px; } .gceo-game-center .g-18 .fd-acad-rules .gc-ic { width: 20px; height: 20px; margin-top: 2px; } .gceo-game-center .g-18 .fd-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; align-items: start; } .gceo-game-center .g-18 .fd-topic { background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: var(--gc-r); } .gceo-game-center .g-18 .fd-topic summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; } .gceo-game-center .g-18 .fd-topic summary::-webkit-details-marker { display: none; } .gceo-game-center .g-18 .fd-topic summary::after { content: "+"; margin-left: auto; color: var(--gc-gold); font-size: 18px; } .gceo-game-center .g-18 .fd-topic[open] summary::after { content: "−"; } .gceo-game-center .g-18 .fd-topic[open] { border-color: var(--gc-gold); } .gceo-game-center .g-18 .fd-topic .fd-pol-body { padding: 0 14px 14px; } .gceo-game-center .g-18 .fd-pol-body { display: grid; gap: 6px; font-size: 13.5px; } .gceo-game-center .g-18 .fd-pol-body h5 { margin: 6px 0 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gc-gold); display: flex; align-items: center; gap: 6px; } .gceo-game-center .g-18 .fd-pol-body h5 .gc-ic { width: 14px; height: 14px; } /* ---------- HUD ---------- */ .gceo-game-center .g-18 .fd-hud { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .gceo-game-center .g-18 .fd-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; } .gceo-game-center .g-18 .fd-fair { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 8px 14px; border: 1px dashed var(--gc-line); border-radius: var(--gc-r); color: var(--gc-muted); } .gceo-game-center .g-18 .fd-fair b { color: var(--gc-white); } .gceo-game-center .g-18 .fd-fair .gc-ic { width: 20px; height: 20px; } /* ---------- layout ---------- */ .gceo-game-center .g-18 .fd-main { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 310px); gap: 12px; align-items: start; } @container (max-width: 1120px) { .gceo-game-center .g-18 .fd-main { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } .gceo-game-center .g-18 .fd-queue { grid-column: 1 / -1; } .gceo-game-center .g-18 .fd-q-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: max-content; max-height: 280px; } } @container (max-width: 760px) { .gceo-game-center .g-18 .fd-main { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-18 .fd-meters { grid-template-columns: 1fr; } .gceo-game-center .g-18 .fd-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-18 .fd-case.gc-paper { padding: 14px 12px; } } /* ---------- queue ---------- */ .gceo-game-center .g-18 .fd-q-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .gceo-game-center .g-18 .fd-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 0 10px; background: var(--gc-surface-2); min-height: 44px; } .gceo-game-center .g-18 .fd-search input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--gc-ink); font: inherit; font-size: 14px; padding: 10px 0; outline: none; } .gceo-game-center .g-18 .fd-search:focus-within { border-color: var(--gc-gold); } .gceo-game-center .g-18 .fd-filter { display: flex; gap: 6px; flex-wrap: wrap; } .gceo-game-center .g-18 .fd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--gc-line); background: transparent; font-size: 12.5px; font-weight: 600; } .gceo-game-center .g-18 .fd-chip .gc-ic { width: 14px; height: 14px; } .gceo-game-center .g-18 .fd-chip.on { background: var(--gc-gold-soft); border-color: var(--gc-gold); color: var(--gc-white); } .gceo-game-center .g-18 .fd-filter .fd-chip { min-height: 44px; flex: 1; justify-content: center; } .gceo-game-center .g-18 .fd-queue, .gceo-game-center .g-18 .fd-side { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-18 .fd-q-list { display: flex; flex-direction: column; gap: 6px; max-height: 640px; overflow-y: auto; padding-right: 2px; } .gceo-game-center .g-18 .fd-q-list > * { flex: none; } .gceo-game-center .g-18 .fd-q { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 10px; border-radius: var(--gc-r); border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); min-height: 44px; } .gceo-game-center .g-18 .fd-q:hover { border-color: var(--gc-line); } .gceo-game-center .g-18 .fd-q.on { border-color: var(--gc-gold); box-shadow: inset 3px 0 0 var(--gc-gold-fill); } .gceo-game-center .g-18 .fd-q.closed { opacity: .82; } .gceo-game-center .g-18 .fd-q-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gc-line); } .gceo-game-center .g-18 .fd-q-ico .gc-ic { width: 16px; height: 16px; } .gceo-game-center .g-18 .fd-q-txt { display: grid; gap: 3px; min-width: 0; justify-items: start; } .gceo-game-center .g-18 .fd-q-txt small { font-size: 11px; color: var(--gc-muted); font-variant-numeric: tabular-nums; } .gceo-game-center .g-18 .fd-q-txt b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--gc-white); } .gceo-game-center .g-18 .fd-q-txt .gc-pill { font-size: 11px; padding: 1px 8px; } /* ---------- case file (cream paper) ---------- */ .gceo-game-center .g-18 .fd-case { gap: 12px; container-type: inline-size; grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-18 .fd-case-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .gceo-game-center .g-18 .fd-case-head > div:nth-child(2) { flex: 1; min-width: 180px; } .gceo-game-center .g-18 .fd-case-ico { width: 46px; height: 46px; flex: none; } .gceo-game-center .g-18 .fd-amt { display: grid; text-align: right; line-height: 1.2; } .gceo-game-center .g-18 .fd-amt small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-18 .fd-amt b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--gc-white); } .gceo-game-center .g-18 .fd-req-text { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; background: var(--gc-surface-2); border-left: 2px solid var(--gc-gold); padding: 10px 12px; border-radius: 0 var(--gc-r) var(--gc-r) 0; } .gceo-game-center .g-18 .fd-req-text .gc-ic { margin-top: 2px; } .gceo-game-center .g-18 .fd-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; margin: 0; } .gceo-game-center .g-18 .fd-profile div { border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 6px 10px; } .gceo-game-center .g-18 .fd-profile dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-18 .fd-profile dd { margin: 0; font-size: 13.5px; font-weight: 600; } .gceo-game-center .g-18 .fd-guide { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; background: var(--gc-gold-soft); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 8px 12px; } .gceo-game-center .g-18 .fd-guide .gc-ic { margin-top: 2px; } .gceo-game-center .g-18 .fd-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; } .gceo-game-center .g-18 .fd-tool { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 64px; padding: 8px 6px; border-radius: var(--gc-r); border: 1px solid var(--gc-line); background: var(--gc-surface); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; } .gceo-game-center .g-18 .fd-tool .gc-ic { width: 20px; height: 20px; } .gceo-game-center .g-18 .fd-tool.none { opacity: .55; border-style: dashed; } .gceo-game-center .g-18 .fd-tool:hover { border-color: var(--gc-gold); } .gceo-game-center .g-18 .fd-tool.on { background: #1d1c19; color: #efe8da; border-color: #1d1c19; opacity: 1; } .gceo-game-center .g-18 .fd-tool.on .gc-ic { color: #cfa15a; } .gceo-game-center .g-18 .fd-tool.mark:not(.on) { border: 2px dashed var(--gc-gold); } .gceo-game-center .g-18 .fd-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gc-gold); } .gceo-game-center .g-18 .fd-seen { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--gc-emerald); } .gceo-game-center .g-18 .fd-seen .gc-ic { width: 11px; height: 11px; color: #fff; stroke-width: 2.4; } .gceo-game-center .g-18 .fd-viewer { border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 12px; display: grid; gap: 10px; background: var(--gc-surface); min-height: 140px; align-content: start; } .gceo-game-center .g-18 .fd-viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .gceo-game-center .g-18 .fd-viewer-head h4, .gceo-game-center .g-18 .fd-pol-main h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; flex-wrap: wrap; } .gceo-game-center .g-18 .fd-empty { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--gc-muted); padding: 22px 10px; font-size: 13.5px; } .gceo-game-center .g-18 .fd-empty .gc-ic { width: 26px; height: 26px; } .gceo-game-center .g-18 .fd-evlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .gceo-game-center .g-18 .fd-ev { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--gc-r); border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); } .gceo-game-center .g-18 .fd-ev p { flex: 1; min-width: 0; font-size: 13.5px; display: grid; gap: 4px; } .gceo-game-center .g-18 .fd-ev-ico .gc-ic { width: 16px; height: 16px; } .gceo-game-center .g-18 .fd-ev.tagged { border-color: var(--gc-gold); background: var(--gc-gold-soft); } .gceo-game-center .g-18 .fd-tag { flex: none; min-width: 92px; min-height: 44px; } .gceo-game-center .g-18 .fd-tag.on { background: #1d1c19; color: #efe8da; } .gceo-game-center .g-18 .fd-sig { justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--gc-line); } .gceo-game-center .g-18 .fd-sig.s-r { color: var(--gc-risk); background: var(--gc-risk-soft); border-color: transparent; } .gceo-game-center .g-18 .fd-sig.s-g { color: var(--gc-emerald-ink); background: var(--gc-emerald-soft); border-color: transparent; } .gceo-game-center .g-18 .fd-sig.s-l { color: var(--gc-warn); background: var(--gc-warn-soft); border-color: transparent; } .gceo-game-center .g-18 .fd-sig.s-b { color: #fff; background: #a8392c; border-color: transparent; } .gceo-game-center .g-18 .fd-req { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; padding: 8px 10px; border: 1px dashed var(--gc-gold); border-radius: var(--gc-r); } .gceo-game-center .g-18 .fd-req > span { flex: 1; min-width: 160px; } .gceo-game-center .g-18 .fd-pol { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 12px; } @container (max-width: 640px) { .gceo-game-center .g-18 .fd-pol { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-18 .fd-pol-list { max-height: 210px; } } .gceo-game-center .g-18 .fd-pol-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; } .gceo-game-center .g-18 .fd-pol-list { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 4px; max-height: 340px; overflow-y: auto; } .gceo-game-center .g-18 .fd-pol-btn { display: flex; gap: 8px; align-items: center; text-align: left; width: 100%; min-height: 44px; padding: 6px 10px; border-radius: var(--gc-r); border: 1px solid var(--gc-line-soft); background: transparent; font-size: 13px; font-weight: 600; } .gceo-game-center .g-18 .fd-pol-btn.on { border-color: var(--gc-gold); background: var(--gc-gold-soft); } .gceo-game-center .g-18 .fd-pol-main { display: grid; gap: 8px; align-content: start; } .gceo-game-center .g-18 .fd-result { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--gc-r); border: 1px solid var(--gc-line); font-size: 13.5px; } .gceo-game-center .g-18 .fd-result h4 { display: flex; gap: 8px; align-items: center; font-size: 15px; } .gceo-game-center .g-18 .fd-result.good { background: var(--gc-emerald-soft); border-color: var(--gc-emerald); } .gceo-game-center .g-18 .fd-result.warn { background: var(--gc-warn-soft); border-color: var(--gc-warn); } .gceo-game-center .g-18 .fd-result.bad { background: var(--gc-risk-soft); border-color: var(--gc-risk); } /* ---------- side: checklist, notes, decisions ---------- */ .gceo-game-center .g-18 .fd-side { gap: 12px; } .gceo-game-center .g-18 .fd-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; } .gceo-game-center .g-18 .fd-check li { display: flex; gap: 8px; align-items: center; color: var(--gc-muted); } .gceo-game-center .g-18 .fd-check li .gc-ic { color: var(--gc-faint); } .gceo-game-center .g-18 .fd-check li.ok { color: var(--gc-ink); } .gceo-game-center .g-18 .fd-check li.ok .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-18 .fd-label { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 13.5px; } .gceo-game-center .g-18 .fd-note { width: 100%; resize: vertical; min-height: 84px; font: inherit; font-size: 13.5px; color: var(--gc-ink); background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 8px 10px; } .gceo-game-center .g-18 .fd-note:focus { outline: 2px solid var(--gc-gold-fill); outline-offset: 1px; } .gceo-game-center .g-18 .fd-cited { display: grid; gap: 4px; font-size: 12.5px; } .gceo-game-center .g-18 .fd-cited b { display: flex; gap: 6px; align-items: center; font-size: 13px; } .gceo-game-center .g-18 .fd-cited ul { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; color: var(--gc-muted); } .gceo-game-center .g-18 .fd-decs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-18 .fd-dec { display: flex; gap: 8px; align-items: flex-start; text-align: left; min-height: 56px; padding: 8px 10px; border-radius: var(--gc-r); border: 1px solid var(--gc-line); background: var(--gc-surface-2); } .gceo-game-center .g-18 .fd-dec .gc-ic { margin-top: 2px; } .gceo-game-center .g-18 .fd-dec span { display: grid; gap: 2px; min-width: 0; } .gceo-game-center .g-18 .fd-dec b { font-size: 13.5px; font-weight: 700; color: var(--gc-white); } .gceo-game-center .g-18 .fd-dec small { font-size: 11.5px; color: var(--gc-muted); line-height: 1.3; } .gceo-game-center .g-18 .fd-dec:hover { border-color: var(--gc-gold); } .gceo-game-center .g-18 .fd-dec.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); } .gceo-game-center .g-18 .fd-ch { border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 8px 10px 10px; margin: 0; display: grid; gap: 6px; } .gceo-game-center .g-18 .fd-ch legend { font-size: 12.5px; font-weight: 700; padding: 0 4px; color: var(--gc-gold); } .gceo-game-center .g-18 .fd-drafts { display: grid; gap: 6px; } .gceo-game-center .g-18 .fd-draft { display: flex; gap: 10px; align-items: flex-start; text-align: left; min-height: 44px; padding: 10px 12px; border-radius: var(--gc-r); border: 1px solid var(--gc-line); background: var(--gc-surface-2); font-size: 13px; line-height: 1.45; } .gceo-game-center .g-18 .fd-draft .gc-ic { margin-top: 1px; } .gceo-game-center .g-18 .fd-draft.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } /* ---------- outcome popup + summaries (popups get the g-18 class via popup kind) ---------- */ .gceo-game-center .g-18 .fd-out { display: grid; gap: 10px; text-align: left; font-size: 14px; } .gceo-game-center .g-18 .fd-out-truth { font-family: var(--gc-display); font-size: 16px; color: var(--gc-white); } .gceo-game-center .g-18 .fd-out-fx { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-18 .fd-out-fx span { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--gc-line); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; } .gceo-game-center .g-18 .fd-fb { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; } .gceo-game-center .g-18 .fd-fb li { display: flex; gap: 8px; align-items: flex-start; } .gceo-game-center .g-18 .fd-fb .gc-ic { margin-top: 1px; } .gceo-game-center .g-18 .fd-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-bottom: 8px; } .gceo-game-center .g-18 .fd-sum div { display: grid; border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 8px 10px; text-align: left; } .gceo-game-center .g-18 .fd-sum small { font-size: 10.5px; color: var(--gc-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; } .gceo-game-center .g-18 .fd-sum b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--gc-white); } /* ---------- report ---------- */ .gceo-game-center .g-18 .fd-report .gc-panel { gap: 14px; } .gceo-game-center .g-18 .fd-wi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; } .gceo-game-center .g-18 .fd-wi > div { display: grid; gap: 6px; align-content: start; font-size: 13.5px; } .gceo-game-center .g-18 .fd-wi h4 { display: flex; gap: 8px; align-items: center; font-size: 15px; } .gceo-game-center .g-18 .fd-table-wrap { overflow-x: auto; border: 1px solid var(--gc-line); border-radius: var(--gc-r); } .gceo-game-center .g-18 .fd-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; } .gceo-game-center .g-18 .fd-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gc-muted); padding: 8px 10px; border-bottom: 1px solid var(--gc-line); } .gceo-game-center .g-18 .fd-table td { padding: 8px 10px; border-bottom: 1px solid var(--gc-line-soft); vertical-align: top; } .gceo-game-center .g-18 .fd-table .gc-pill { white-space: normal; } /* GAME 19 — Warehouse & Inventory Academy. Every selector is scoped to the stage (or a g-19 popup). */ .gceo-game-center .g-19 .w19 { display: grid; gap: 12px; min-width: 0; } .gceo-game-center .g-19 .w19-small { font-size: 12.5px; } .gceo-game-center .g-19 .w19-mono { white-space: nowrap; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .02em; } .gceo-game-center .g-19 .w19-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .gceo-game-center .g-19 .w19-h { font-family: var(--gc-display); font-weight: 600; font-size: 19px; letter-spacing: .04em; color: var(--gc-white); line-height: 1.2; } .gceo-game-center .g-19 .w19-h4 { font-family: var(--gc-display); font-weight: 600; font-size: 15px; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; margin-top: 4px; } .gceo-game-center .g-19 .w19-col { display: grid; gap: 12px; align-content: start; min-width: 0; } .gceo-game-center .g-19 .w19-split { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; } @container (min-width: 1100px) { .gceo-game-center .g-19 .w19-split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } } .gceo-game-center .g-19 .w19-hud { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* stations stepper */ .gceo-game-center .g-19 .w19-steplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; counter-reset: st; } .gceo-game-center .g-19 .w19-steplist li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--gc-line-soft); border-radius: 4px; background: var(--gc-surface); color: var(--gc-muted); font-size: 13px; font-weight: 500; min-width: 0; } .gceo-game-center .g-19 .w19-steplist li.on { border-color: var(--gc-gold-fill); color: var(--gc-white); background: linear-gradient(180deg, rgba(207, 161, 90, .14), rgba(207, 161, 90, .03)); } .gceo-game-center .g-19 .w19-steplist li.done { color: var(--gc-emerald-ink); border-color: rgba(47, 154, 116, .45); } .gceo-game-center .g-19 .w19-steplist li.done .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-19 .w19-stepico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gc-line); flex: none; } .gceo-game-center .g-19 .w19-stepico .gc-ic { width: 14px; height: 14px; vertical-align: 0; } .gceo-game-center .g-19 .w19-steptxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container (max-width: 700px) { .gceo-game-center .g-19 .w19-steplist li { justify-content: center; padding: 6px 4px; } .gceo-game-center .g-19 .w19-steplist li:not(.on) .w19-steptxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gceo-game-center .g-19 .w19-steplist { display: flex; } .gceo-game-center .g-19 .w19-steplist li { flex: none; min-width: 44px; } .gceo-game-center .g-19 .w19-steplist li.on { flex: 1 1 auto; justify-content: flex-start; padding-inline: 8px; } } /* toolbar */ .gceo-game-center .g-19 .w19-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gceo-game-center .g-19 .w19-sim { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gc-muted); margin-left: auto; } .gceo-game-center .g-19 .w19-sim .gc-ic { width: 14px; height: 14px; vertical-align: 0; } @container (max-width: 700px) { .gceo-game-center .g-19 .w19-sim { margin-left: 0; width: 100%; } .gceo-game-center .g-19 .w19-tools .gc-btn { flex: 1 1 auto; } } /* RF scanner device */ .gceo-game-center .g-19 .w19-scanner { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(180deg, #1a1917, #121211); border: 1px solid rgba(207, 161, 90, .5); box-shadow: inset 0 0 0 3px #141413, inset 0 0 0 4px rgba(207, 161, 90, .18); } .gceo-game-center .g-19 .w19-scan-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: #cfa15a; } .gceo-game-center .g-19 .w19-scan-name { display: inline-flex; align-items: center; gap: 8px; } .gceo-game-center .g-19 .w19-scan-mode { color: #a9a192; letter-spacing: .12em; } .gceo-game-center .g-19 .w19-screen { background: #0a0b0a; border: 1px solid #2d2b27; border-radius: 6px; padding: 10px 12px; min-height: 64px; display: grid; gap: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: #e9e2d2; } .gceo-game-center .g-19 .w19-scr-status { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; } .gceo-game-center .g-19 .w19-scr-status .gc-ic { width: 18px; height: 18px; margin-top: 1px; vertical-align: 0; } .gceo-game-center .g-19 .w19-scr-status b { letter-spacing: .12em; margin-right: 4px; } .gceo-game-center .g-19 .w19-scr-status.good b, .gceo-game-center .g-19 .w19-scr-status.good .gc-ic { color: #74d3ad; } .gceo-game-center .g-19 .w19-scr-status.bad b, .gceo-game-center .g-19 .w19-scr-status.bad .gc-ic { color: #ef9a8b; } .gceo-game-center .g-19 .w19-scr-status.warn b, .gceo-game-center .g-19 .w19-scr-status.warn .gc-ic { color: #e9b45e; } .gceo-game-center .g-19 .w19-rec { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 14px; border-top: 1px dashed #2d2b27; padding-top: 8px; } .gceo-game-center .g-19 .w19-rec div { min-width: 0; } .gceo-game-center .g-19 .w19-rec dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8d8577; } .gceo-game-center .g-19 .w19-rec dd { margin: 0; color: #f3ecdd; overflow-wrap: anywhere; } .gceo-game-center .g-19 .w19-scr-hist { font-size: 11px; color: #8d8577; overflow-wrap: anywhere; } .gceo-game-center .g-19 .w19-scan-form { display: flex; gap: 8px; flex-wrap: wrap; } .gceo-game-center .g-19 .w19-scan-form input { flex: 1 1 220px; min-width: 0; min-height: 44px; border-radius: 4px; border: 1px solid rgba(207, 161, 90, .55); background: #0a0b0a; color: #f3ecdd; padding: 8px 12px; font: 600 15px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; } .gceo-game-center .g-19 .w19-scan-form input::placeholder { color: #7d766a; font-weight: 400; letter-spacing: .02em; font-family: var(--gc-body); font-size: 13.5px; } .gceo-game-center .g-19 .w19-hint { font-size: 11.5px; color: #8d8577; } /* forms */ .gceo-game-center .g-19 input[type="number"], .gceo-game-center .g-19 .w19-qty input, .gceo-game-center .g-19 .w19-search input { min-height: 44px; border-radius: 4px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); padding: 8px 10px; font: inherit; font-size: 15px; min-width: 0; } .gceo-game-center .g-19 .w19-qty { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-19 .w19-qty input { width: 120px; } .gceo-game-center .g-19 .w19-qty label { font-size: 13.5px; } .gceo-game-center .g-19 .w19-stepf { display: grid; gap: 4px; } .gceo-game-center .g-19 .w19-stepf label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gc-muted); } .gceo-game-center .g-19 .w19-stepper { display: flex; gap: 6px; align-items: center; } .gceo-game-center .g-19 .w19-stepper input { width: 70px; text-align: center; } .gceo-game-center .g-19 .w19-stepper .gc-btn { min-width: 44px; min-height: 44px; padding: 6px; } /* tables & documents */ .gceo-game-center .g-19 .w19-tw { overflow-x: auto; max-width: 100%; } .gceo-game-center .g-19 .w19-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .gceo-game-center .g-19 .w19-table th, .gceo-game-center .g-19 .w19-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--gc-line-soft); vertical-align: top; } .gceo-game-center .g-19 .w19-table th { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--gc-muted); border-bottom-color: var(--gc-line); white-space: nowrap; } .gceo-game-center .g-19 .w19-table th.w19-num { text-align: right; } .gceo-game-center .g-19 .w19-table td small { display: block; color: var(--gc-muted); font-size: 11.5px; } .gceo-game-center .g-19 .w19-table tr.done td { opacity: .6; } .gceo-game-center .g-19 .w19-table tr.cur td { background: var(--gc-gold-soft); } .gceo-game-center .g-19 .w19-doc { gap: 10px; } .gceo-game-center .g-19 .w19-doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: flex-end; padding-bottom: 8px; border-bottom: 1px solid var(--gc-line); } .gceo-game-center .g-19 .w19-doc-meta { display: grid; gap: 2px; font-size: 13px; text-align: right; color: var(--gc-muted); justify-items: end; } .gceo-game-center .g-19 .w19-doc-meta b { color: var(--gc-white); } .gceo-game-center .g-19 .w19-doc > .gc-btn { justify-self: start; } /* barcode labels (always white paper, black bars) */ .gceo-game-center .g-19 .w19-bctag { display: inline-grid; justify-items: center; gap: 1px; background: #fff; color: #111; padding: 4px 6px 3px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); flex: none; } .gceo-game-center .g-19 .w19-bc { display: block; width: 116px; height: 30px; } .gceo-game-center .g-19 .w19-bctag.sm .w19-bc { width: 96px; height: 24px; } .gceo-game-center .g-19 .w19-bcnum { font: 600 10.5px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .18em; color: #111; } /* briefing */ .gceo-game-center .g-19 .w19-brief { display: grid; gap: 12px; } .gceo-game-center .g-19 .w19-brief-head p { max-width: 75ch; } .gceo-game-center .g-19 .w19-savebox { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: 4px; padding: 10px 12px; font-size: 13.5px; } .gceo-game-center .g-19 .w19-savebox p { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 260px; } .gceo-game-center .g-19 .w19-inv { display: grid; gap: 10px; min-width: 0; } .gceo-game-center .g-19 .w19-inv-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gceo-game-center .g-19 .w19-search { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 0; } .gceo-game-center .g-19 .w19-search input { flex: 1; width: 100%; } .gceo-game-center .g-19 .w19-invtable { min-width: 760px; } .gceo-game-center .g-19.w19-invmodal .gc-modal-card { width: min(100%, 980px); } /* receiving dock */ .gceo-game-center .g-19 .w19-recv { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; } @container (min-width: 1000px) { .gceo-game-center .g-19 .w19-recv { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } } .gceo-game-center .g-19 .w19-cartons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; } .gceo-game-center .g-19 .w19-carton { display: grid; grid-template-rows: 34px auto auto; border-radius: 6px; overflow: hidden; background: #b88b55; border: 1px solid #8d6634; color: #1d1c19; min-width: 0; } .gceo-game-center .g-19 .w19-box { position: relative; background: repeating-linear-gradient(90deg, #c39760 0 6px, #bb8d55 6px 12px); } .gceo-game-center .g-19 .w19-tape { position: absolute; left: 50%; top: 0; bottom: 0; width: 34px; translate: -50% 0; background: rgba(225, 205, 160, .75); border-inline: 1px solid rgba(120, 90, 40, .3); } .gceo-game-center .g-19 .w19-carton.crushed .w19-box { clip-path: polygon(0 0, 100% 0, 100% 55%, 88% 100%, 0 100%); background: repeating-linear-gradient(90deg, #a07343 0 6px, #966a3b 6px 12px); } .gceo-game-center .g-19 .w19-stamp { position: absolute; left: 8px; top: 7px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7a1f1f; border: 1.5px solid #7a1f1f; padding: 1px 6px; transform: rotate(-3deg); background: rgba(255, 240, 230, .6); } .gceo-game-center .g-19 .w19-label { margin: 0 10px; background: #fbf8f1; border-radius: 3px; padding: 8px 10px; display: grid; gap: 4px; justify-items: start; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); color: #1d1c19; } .gceo-game-center .g-19 .w19-label small { font-size: 11.5px; color: #4d473d; } .gceo-game-center .g-19 .w19-label-top { display: flex; justify-content: space-between; gap: 8px; width: 100%; align-items: baseline; flex-wrap: wrap; } .gceo-game-center .g-19 .w19-lname { font-weight: 600; font-size: 13.5px; line-height: 1.25; } .gceo-game-center .g-19 .w19-label .w19-bctag { border: 0; padding: 2px 0; } .gceo-game-center .g-19 .w19-dmgnote { display: inline-flex; gap: 4px; align-items: center; color: #7a1f1f !important; font-weight: 600; } .gceo-game-center .g-19 .w19-dmgnote .gc-ic { color: #7a1f1f; width: 13px; height: 13px; } .gceo-game-center .g-19 .w19-cfoot { display: grid; gap: 8px; padding: 10px; } .gceo-game-center .g-19 .w19-cfoot .gc-pill { background: rgba(20, 20, 19, .85); color: #efe8da; border-color: transparent; justify-self: start; white-space: normal; } .gceo-game-center .g-19 .w19-cfoot .gc-pill .gc-ic { color: #cfa15a; } .gceo-game-center .g-19 .w19-cfoot .gc-pill.good { background: #0f5c45; color: #e8f6ef; } .gceo-game-center .g-19 .w19-cfoot .gc-pill.good .gc-ic, .gceo-game-center .g-19 .w19-cfoot .gc-pill.warn .gc-ic { color: #fff; } .gceo-game-center .g-19 .w19-cfoot .gc-pill.warn { background: #7a4a08; color: #fff3df; } .gceo-game-center .g-19 .w19-cfoot .gc-row { gap: 6px; } .gceo-game-center .g-19 .w19-cfoot .gc-btn:not(.primary):not(.danger) { background: #1d1c19; border-color: #1d1c19; color: #efe8da; } .gceo-game-center .g-19 .w19-cfoot .gc-btn.danger { background: #fbf8f1; border-color: #7a1f1f; color: #7a1f1f; } .gceo-game-center .g-19 .w19-cfoot .gc-btn.danger .gc-ic { color: #7a1f1f; } .gceo-game-center .g-19 .w19-carton.st-refused, .gceo-game-center .g-19 .w19-carton.st-held { opacity: .62; } .gceo-game-center .g-19 .w19-carton.st-open { outline: 2px solid var(--gc-gold-fill); outline-offset: 2px; } .gceo-game-center .g-19 .w19-countst { display: grid; gap: 10px; border-radius: 6px; padding: 14px 16px; } .gceo-game-center .g-19 .w19-countst .w19-label-top b { display: inline-flex; gap: 8px; align-items: center; } .gceo-game-center .g-19 .w19-countform { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } /* units: little boxes in groups of five */ .gceo-game-center .g-19 .w19-units { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 8px; border-radius: 4px; background: var(--gc-surface-2); border: 1px dashed var(--gc-line); } .gceo-game-center .g-19 .w19-five { display: inline-flex; gap: 3px; } .gceo-game-center .g-19 .w19-u { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, #d5ab70 0 42%, #e8d2a6 42% 58%, #c99c5f 58%); border: 1px solid #8d6634; } .gceo-game-center .g-19 .w19-u.dmg { background: #3a1d19; border: 1px dashed #e58a7a; } .gceo-game-center .g-19 .w19-u.dmg .gc-ic { width: 14px; height: 14px; color: #ef9a8b; stroke-width: 2.4; vertical-align: 0; } /* put-away */ .gceo-game-center .g-19 .w19-chips { display: grid; gap: 8px; } .gceo-game-center .g-19 .w19-chip { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 56px; padding: 8px 12px 8px 6px; border-radius: 6px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); touch-action: none; user-select: none; cursor: grab; } .gceo-game-center .g-19 .w19-chip:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-19 .w19-chip.sel { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); box-shadow: inset 3px 0 0 var(--gc-gold-fill); } .gceo-game-center .g-19 .w19-chip.dragging { opacity: .45; } .gceo-game-center .g-19 .w19-grip .gc-ic { width: 20px; height: 20px; color: var(--gc-faint); } .gceo-game-center .g-19 .w19-chip-main { display: grid; min-width: 0; flex: 1; } .gceo-game-center .g-19 .w19-chip-main b { font-weight: 600; color: var(--gc-white); } .gceo-game-center .g-19 .w19-chip-main small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-19 .w19-chip-to { display: inline-flex; align-items: center; gap: 4px; font: 600 13px ui-monospace, Menlo, Consolas, monospace; color: var(--gc-gold); white-space: nowrap; } .gceo-game-center .g-19 .w19-chip-to .gc-ic { width: 14px; height: 14px; } .gceo-game-center .g-19 .w19-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 6px; background: #1d1c19; color: #efe8da; border: 1px solid #cfa15a; box-shadow: var(--gc-shadow); font-size: 13px; font-weight: 600; white-space: nowrap; } .gceo-game-center .g-19 .w19-rules, .gceo-game-center .g-19 .w19-exc, .gceo-game-center .g-19 .w19-var { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 4px; background: var(--gc-gold-soft); border: 1px solid var(--gc-line); font-size: 13.5px; } .gceo-game-center .g-19 .w19-rules > .gc-ic, .gceo-game-center .g-19 .w19-exc > .gc-ic, .gceo-game-center .g-19 .w19-var > .gc-ic { margin-top: 2px; } .gceo-game-center .g-19 .w19-exc { background: var(--gc-warn-soft); border-color: var(--gc-warn); flex-wrap: wrap; } .gceo-game-center .g-19 .w19-exc > div { flex: 1 1 200px; } .gceo-game-center .g-19 .w19-var { background: var(--gc-warn-soft); border-color: var(--gc-warn); } .gceo-game-center .g-19 .w19-selnote, .gceo-game-center .g-19 .w19-excnote { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--gc-white); } /* map */ .gceo-game-center .g-19 .w19-mappanel { gap: 12px; } .gceo-game-center .g-19 .w19-zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-19 .w19-zone { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(207, 161, 90, .07) 0 6px, transparent 6px 12px), var(--gc-surface-2); border: 1px solid var(--gc-line-soft); min-width: 0; } .gceo-game-center .g-19 .w19-zone span { display: grid; min-width: 0; line-height: 1.25; } .gceo-game-center .g-19 .w19-zone b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gc-white); } .gceo-game-center .g-19 .w19-zone small { font-size: 11px; color: var(--gc-muted); } .gceo-game-center .g-19 .w19-aisles { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr); gap: 0; } .gceo-game-center .g-19 .w19-aisle { display: grid; gap: 6px; min-width: 0; align-content: start; } .gceo-game-center .g-19 .w19-aisle header { display: grid; line-height: 1.2; } .gceo-game-center .g-19 .w19-aisle header b { font-family: var(--gc-display); font-size: 14px; letter-spacing: .06em; color: var(--gc-white); } .gceo-game-center .g-19 .w19-aisle header small { font-size: 11px; color: var(--gc-muted); } .gceo-game-center .g-19 .w19-rack-grid { display: grid; grid-template-columns: 22px repeat(3, minmax(0, 1fr)); gap: 4px; } .gceo-game-center .g-19 .w19-rh { font-size: 10px; text-align: center; color: var(--gc-muted); letter-spacing: .04em; white-space: nowrap; overflow: hidden; } .gceo-game-center .g-19 .w19-sh { display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--gc-faint); } .gceo-game-center .g-19 .w19-walk { position: relative; background: repeating-linear-gradient(0deg, rgba(207, 161, 90, .22) 0 8px, transparent 8px 16px); margin: 26px 5px 0; border-radius: 2px; } .gceo-game-center .g-19 .w19-walk span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gceo-game-center .g-19 .w19-bin { display: grid; align-content: space-between; gap: 2px; min-height: 54px; min-width: 0; padding: 4px; border-radius: 3px; border: 1px solid var(--gc-line); background: linear-gradient(180deg, var(--gc-surface-3), var(--gc-surface-2)); color: var(--gc-ink); text-align: left; box-shadow: inset 0 -3px 0 rgba(207, 161, 90, .25); transition: border-color .15s, background .15s; touch-action: manipulation; } .gceo-game-center .g-19 .w19-bin:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-19 .w19-bin.empty { background: transparent; border-style: dashed; border-color: var(--gc-line-soft); box-shadow: none; } .gceo-game-center .g-19 .w19-bin-code { font: 600 10.5px ui-monospace, Menlo, Consolas, monospace; color: var(--gc-white); letter-spacing: 0; white-space: nowrap; overflow: hidden; } .gceo-game-center .g-19 .w19-bin-items { display: flex; flex-wrap: wrap; gap: 2px; } .gceo-game-center .g-19 .w19-bin-items i { font: 600 9.5px ui-monospace, Menlo, Consolas, monospace; font-style: normal; padding: 1px 3px; border-radius: 2px; background: #c99c5f; color: #1d1c19; } .gceo-game-center .g-19 .w19-bin-items i.hasd { background: #e58a7a; } .gceo-game-center .g-19 .w19-bin-items i.w19-open { background: transparent; color: var(--gc-faint); padding: 0; font-weight: 500; } .gceo-game-center .g-19 .w19-bin.target { border-color: rgba(207, 161, 90, .6); } .gceo-game-center .g-19 .w19-bin.drop-over { border: 2px solid var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-19 .w19-bin.here { border: 2px solid var(--gc-emerald); box-shadow: 0 0 0 2px var(--gc-emerald-soft); } .gceo-game-center .g-19 .w19-bin.cc { border: 2px dotted var(--gc-gold-fill); } .gceo-game-center .g-19 .w19-bin.flash-bad { border: 2px solid var(--gc-risk); background: var(--gc-risk-soft); animation: w19-shake .4s ease; } .gceo-game-center .g-19 .w19-bin.flash-good { border: 2px solid var(--gc-emerald); background: var(--gc-emerald-soft); } @keyframes w19-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } .gceo-game-center .g-19 .w19-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--gc-muted); } .gceo-game-center .g-19 .w19-legend span { display: inline-flex; align-items: center; gap: 6px; } .gceo-game-center .g-19 .lg { display: inline-block; width: 14px; height: 12px; border-radius: 2px; border: 1px solid var(--gc-line); } .gceo-game-center .g-19 .lg.has { background: var(--gc-surface-3); } .gceo-game-center .g-19 .lg.empty { border-style: dashed; } .gceo-game-center .g-19 .lg.hasd { background: #e58a7a; border-color: #e58a7a; } .gceo-game-center .g-19 .lg.here { border: 2px solid var(--gc-emerald); } .gceo-game-center .g-19 .lg.cc { border: 2px dotted var(--gc-gold-fill); } .gceo-game-center .g-19 .w19-fold { background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 14px; } .gceo-game-center .g-19 .w19-fold summary { cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 36px; font-family: var(--gc-display); font-weight: 600; letter-spacing: .04em; color: var(--gc-white); } .gceo-game-center .g-19 .w19-fold[open] summary { margin-bottom: 10px; } .gceo-game-center .g-19 .w19-fold .w19-mappanel { border: 0; padding: 0; background: transparent; } @container (max-width: 600px) { .gceo-game-center .g-19 .w19-aisles { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-19 .w19-walk { height: 12px; margin: 8px 0; background: repeating-linear-gradient(90deg, rgba(207, 161, 90, .22) 0 8px, transparent 8px 16px); } .gceo-game-center .g-19 .w19-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-19 .w19-bin-code { font-size: 11.5px; } } /* product cards (bin view, tote) */ .gceo-game-center .g-19 .w19-binview { gap: 10px; } .gceo-game-center .g-19 .w19-pcard { display: grid; gap: 8px; padding: 10px 12px; border-radius: 6px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); min-width: 0; } .gceo-game-center .g-19 .w19-pcard.ok { border-color: var(--gc-emerald); } .gceo-game-center .g-19 .w19-pcard.bad { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-19 .w19-pcard-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .gceo-game-center .g-19 .w19-pcard-head > div { display: grid; min-width: 0; flex: 1 1 150px; } .gceo-game-center .g-19 .w19-pcard-head b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-19 .w19-pcard-head small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-19 .w19-pcard-foot { gap: 8px; } .gceo-game-center .g-19 .w19-pcard-foot:empty { display: none; } /* pack station */ .gceo-game-center .g-19 .w19-packwrap { display: grid; gap: 10px; } .gceo-game-center .g-19 .w19-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-19 .w19-queue li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--gc-line-soft); font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-19 .w19-queue li span { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--gc-ink); } .gceo-game-center .g-19 .w19-queue li.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-19 .w19-queue li.done .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-19 .w19-queue .gc-ic { width: 14px; height: 14px; } .gceo-game-center .g-19 .w19-packsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-19 .w19-packsteps li { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--gc-line-soft); color: var(--gc-muted); min-width: 0; } .gceo-game-center .g-19 .w19-packsteps li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-19 .w19-packsteps li.on { border-color: var(--gc-gold-fill); color: var(--gc-white); } .gceo-game-center .g-19 .w19-packsteps li.done { color: var(--gc-emerald-ink); } .gceo-game-center .g-19 .w19-packsteps li.done .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-19 .w19-packsteps .gc-ic { width: 14px; height: 14px; } @container (max-width: 700px) { .gceo-game-center .g-19 .w19-packsteps li:not(.on) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gceo-game-center .g-19 .w19-packsteps li { justify-content: center; } .gceo-game-center .g-19 .w19-packsteps { grid-template-columns: repeat(5, auto); justify-content: start; } } .gceo-game-center .g-19 .w19-packbody { display: grid; gap: 10px; } .gceo-game-center .g-19 .w19-packbody > .gc-btn { justify-self: start; } .gceo-game-center .g-19 .w19-needs { font-size: 13.5px; padding: 8px 10px; border-left: 2px solid var(--gc-gold-fill); background: var(--gc-surface-2); border-radius: 0 4px 4px 0; } .gceo-game-center .g-19 .w19-tote { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .gceo-game-center .g-19 .w19-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gceo-game-center .g-19 .w19-boxopt { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 6px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); text-align: center; min-width: 0; } .gceo-game-center .g-19 .w19-boxopt:hover { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-19 .w19-boxopt small { font-size: 11.5px; color: var(--gc-muted); } .gceo-game-center .g-19 .w19-boxart { display: block; background: linear-gradient(180deg, #c99c5f 0 30%, #b88b55 30%); border: 1px solid #8d6634; border-radius: 2px; } .gceo-game-center .g-19 .w19-boxart.s-S { width: 34px; height: 22px; } .gceo-game-center .g-19 .w19-boxart.s-M { width: 46px; height: 30px; } .gceo-game-center .g-19 .w19-boxart.s-L { width: 58px; height: 40px; } .gceo-game-center .g-19 .w19-slip, .gceo-game-center .g-19 .w19-shiplabel { display: grid; gap: 6px; padding: 14px 16px; border-radius: 4px; max-width: 420px; } .gceo-game-center .g-19 .w19-shiplabel { background: #fbf8f1; color: #1d1c19; border: 1px solid #1d1c19; justify-items: start; } .gceo-game-center .g-19 .w19-shiplabel p small { display: block; font-size: 10px; letter-spacing: .14em; color: #4d473d; } .gceo-game-center .g-19 .w19-shiplabel small { color: #4d473d; } .gceo-game-center .g-19 .w19-shiplabel .w19-bctag { border: 0; padding: 0; } .gceo-game-center .g-19 .w19-scale { display: inline-grid; justify-items: center; gap: 2px; padding: 12px 22px; border-radius: 8px; background: #0a0b0a; border: 1px solid #2d2b27; justify-self: start; } .gceo-game-center .g-19 .w19-scale-read { font: 700 28px ui-monospace, Menlo, Consolas, monospace; color: #74d3ad; letter-spacing: .06em; } .gceo-game-center .g-19 .w19-scale small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8d8577; } /* detective */ .gceo-game-center .g-19 .w19-evid { display: grid; gap: 8px; } .gceo-game-center .g-19 .w19-evid > div { display: grid; gap: 6px; justify-items: start; } .gceo-game-center .g-19 .w19-evres { font-size: 13px; padding: 6px 10px; border-left: 2px solid var(--gc-gold-fill); background: var(--gc-surface-2); border-radius: 0 4px 4px 0; width: 100%; } .gceo-game-center .g-19 .w19-causes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } .gceo-game-center .g-19 .w19-cause { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); min-height: 44px; } .gceo-game-center .g-19 .w19-cause:hover { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-19 .w19-cause b { display: flex; align-items: center; gap: 6px; color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-19 .w19-cause small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-19 .w19-done { display: flex; gap: 8px; align-items: flex-start; color: var(--gc-emerald-ink); } .gceo-game-center .g-19 .w19-done .gc-ic { color: var(--gc-emerald-ink); margin-top: 2px; } /* popups */ .gceo-game-center .g-19 .w19-report, .gceo-game-center .g-19 .w19-sum { display: grid; gap: 10px; text-align: left; font-size: 14px; } .gceo-game-center .g-19 .w19-sum p { display: flex; gap: 8px; align-items: flex-start; } .gceo-game-center .g-19 .w19-sumgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .gceo-game-center .g-19 .w19-sumgrid div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 4px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); } .gceo-game-center .g-19 .w19-sumgrid small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-19 .w19-sumgrid b { font-size: 18px; color: var(--gc-white); font-variant-numeric: tabular-nums; } .gceo-game-center .g-19 .w19-cam video { width: 100%; border-radius: 6px; background: #000; aspect-ratio: 4 / 3; } @container (max-width: 520px) { .gceo-game-center .g-19 .w19-doc-meta { text-align: left; justify-items: start; } .gceo-game-center .g-19 .w19-boxes { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-19 .w19-boxopt { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; } .gceo-game-center .g-19 .w19-boxopt .w19-boxart { grid-row: span 3; align-self: center; } } .gceo-game-center .g-19 .w19-boxopt { align-content: start; } @container (max-width: 520px) { .gceo-game-center .g-19 .w19-table { font-size: 12.5px; } .gceo-game-center .g-19 .w19-table th, .gceo-game-center .g-19 .w19-table td { padding: 6px 5px; } } /* GAME 20 — Tech Support Academy. Every selector is scoped to .gceo-game-center .g-20 */ .gceo-game-center .g-20 .t20 { display: grid; gap: 12px; } .gceo-game-center .g-20 .t20-hud { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .gceo-game-center .g-20 .t20-main { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 12px; align-items: start; } .gceo-game-center .g-20 .t20-left { display: grid; gap: 12px; min-width: 0; } .gceo-game-center .g-20 .t20-right { min-width: 0; } @container (max-width: 1000px) { .gceo-game-center .g-20 .t20-main { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-20 .t20-right { position: static; } } .gceo-game-center .g-20 .t20-small { font-size: 12.5px; } /* ---------- queue ---------- */ .gceo-game-center .g-20 .t20-qlist { display: grid; gap: 8px; } .gceo-game-center .g-20 .t20-q { display: grid; gap: 5px; text-align: left; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-left: 2px solid var(--gc-line); border-radius: var(--gc-r); padding: 10px 12px; min-height: 44px; color: var(--gc-ink); } .gceo-game-center .g-20 .t20-q:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-20 .t20-q.on { border-color: var(--gc-gold-fill); border-left-width: 3px; background: linear-gradient(90deg, var(--gc-gold-soft), transparent 80%), var(--gc-surface-2); } .gceo-game-center .g-20 .t20-q b { display: flex; align-items: center; gap: 8px; color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-20 .t20-q-top, .gceo-game-center .g-20 .t20-q-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; } .gceo-game-center .g-20 .t20-q-meta { justify-content: flex-start; } .gceo-game-center .g-20 .t20-q-no { font-size: 12px; color: var(--gc-muted); font-variant-numeric: tabular-nums; } .gceo-game-center .g-20 .t20-q-who { font-size: 13px; color: var(--gc-muted); } .gceo-game-center .g-20 .t20-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 14px 8px; color: var(--gc-muted); } .gceo-game-center .g-20 .t20-empty > .gc-ic { width: 26px; height: 26px; } .gceo-game-center .g-20 .t20-qfoot { padding-top: 8px; border-top: 1px solid var(--gc-line-soft); font-size: 13px; } /* ---------- ticket ---------- */ .gceo-game-center .g-20 .t20-t-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: flex-start; } .gceo-game-center .g-20 .t20-t-head > div:first-child { display: grid; gap: 2px; } .gceo-game-center .g-20 .t20-t-pills { gap: 6px; } .gceo-game-center .g-20 .t20-caller { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; } .gceo-game-center .g-20 .t20-caller .gc-ic { margin-top: 3px; } .gceo-game-center .g-20 .t20-say { margin: 0; padding: 10px 14px; border-left: 2px solid var(--gc-gold-fill); background: var(--gc-surface-2); border-radius: 0 var(--gc-r) var(--gc-r) 0; font-style: italic; color: var(--gc-white); } .gceo-game-center .g-20 .t20-qas { display: grid; gap: 8px; } .gceo-game-center .g-20 .t20-qa { display: grid; gap: 4px; font-size: 13.5px; } .gceo-game-center .g-20 .t20-qa p { display: flex; gap: 8px; align-items: flex-start; } .gceo-game-center .g-20 .t20-qa .gc-ic { margin-top: 2px; width: 15px; height: 15px; } .gceo-game-center .g-20 .t20-q-line { color: var(--gc-muted); } .gceo-game-center .g-20 .t20-a-line { color: var(--gc-white); padding-left: 10px; } .gceo-game-center .g-20 .t20-asks { display: grid; gap: 8px; } .gceo-game-center .g-20 .t20-ask { min-height: 44px; text-align: left; justify-content: flex-start; white-space: normal; } .gceo-game-center .g-20 .t20-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; background: var(--gc-gold-soft); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 9px 12px; } .gceo-game-center .g-20 .t20-hint.off { background: transparent; color: var(--gc-muted); } .gceo-game-center .g-20 .t20-hint .gc-ic { margin-top: 2px; } .gceo-game-center .g-20 .t20-ticket > .gc-btn { justify-self: start; } .gceo-game-center .g-20 .t20-check ul, .gceo-game-center .g-20 .t20-ck { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; } .gceo-game-center .g-20 .t20-check li, .gceo-game-center .g-20 .t20-ck li { display: flex; gap: 8px; align-items: center; color: var(--gc-muted); } .gceo-game-center .g-20 .t20-check li.on, .gceo-game-center .g-20 .t20-ck li.on { color: var(--gc-white); } .gceo-game-center .g-20 .t20-check li.on .gc-ic, .gceo-game-center .g-20 .t20-ck li.on .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-20 .t20-ck li:not(.on) .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-20 .t20-notes { display: grid; gap: 6px; } .gceo-game-center .g-20 .t20-notes textarea { width: 100%; resize: vertical; min-height: 72px; font: inherit; font-size: 13.5px; color: var(--gc-ink); background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 8px 10px; } .gceo-game-center .g-20 .t20-notes textarea:focus { outline: 2px solid var(--gc-gold-fill); outline-offset: 1px; } .gceo-game-center .g-20 .t20-log { max-height: 150px; font-size: 12.5px; } .gceo-game-center .g-20 .t20-log b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gc-muted); margin-right: 4px; } .gceo-game-center .g-20 .t20-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 8px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-20 .t20-acts .gc-btn { padding: 8px 10px; font-size: 13px; } .gceo-game-center .g-20 .t20-acts .gc-btn.primary { font-size: 12px; letter-spacing: .08em; } @container (max-width: 460px) { .gceo-game-center .g-20 .t20-acts { grid-template-columns: minmax(0, 1fr); } } /* ---------- monitor ---------- */ .gceo-game-center .g-20 .t20-monitor { background: linear-gradient(180deg, #1b1a18, #121211); border: 1px solid var(--gc-line); border-radius: 10px; padding: 10px; box-shadow: var(--gc-shadow); display: grid; gap: 8px; } .gceo-game-center .g-20 .t20-bezel-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; color: var(--gc-muted); letter-spacing: .08em; text-transform: uppercase; padding: 0 4px; } .gceo-game-center .g-20 .t20-bezel-top span { display: inline-flex; gap: 6px; align-items: center; } .gceo-game-center .g-20 .t20-bezel-top b { color: var(--gc-white); font-weight: 600; text-transform: none; letter-spacing: .02em; font-size: 13px; text-align: right; } .gceo-game-center .g-20 .t20-screen { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 6px; min-height: 420px; background: radial-gradient(80% 90% at 85% 0%, rgba(207, 161, 90, .16), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(47, 154, 116, .10), transparent 60%), #0b0b0a; border: 1px solid rgba(244, 238, 225, .06); } .gceo-game-center .g-20 .t20-dock { display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; } .gceo-game-center .g-20 .t20-app { display: grid; justify-items: center; gap: 3px; padding: 6px 4px; min-height: 52px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: #efe8da; font-size: 11.5px; line-height: 1.2; text-align: center; } .gceo-game-center .g-20 .t20-app .gc-ic { width: 20px; height: 20px; color: #cfa15a; } .gceo-game-center .g-20 .t20-app:hover { background: rgba(207, 161, 90, .08); border-color: rgba(207, 161, 90, .26); } .gceo-game-center .g-20 .t20-app.on { background: rgba(207, 161, 90, .14); border-color: #cfa15a; } .gceo-game-center .g-20 .t20-window { border-radius: 6px; padding: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-width: 0; align-self: start; } .gceo-game-center .g-20 .t20-win-bar { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--gc-surface-3); border-bottom: 1px solid var(--gc-line); } .gceo-game-center .g-20 .t20-win-bar b { display: inline-flex; gap: 6px; align-items: center; font-family: var(--gc-display); font-weight: 600; letter-spacing: .04em; color: var(--gc-white); } .gceo-game-center .g-20 .t20-win-bar small { margin-left: auto; color: var(--gc-muted); font-size: 12px; text-align: right; } .gceo-game-center .g-20 .t20-dots { display: inline-flex; gap: 5px; } .gceo-game-center .g-20 .t20-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gc-line); background: var(--gc-surface); } .gceo-game-center .g-20 .t20-win-body { padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; } .gceo-game-center .g-20 .t20-taskbar { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; font-size: 12px; color: #a9a192; padding: 4px 6px; border-top: 1px solid rgba(207, 161, 90, .18); } .gceo-game-center .g-20 .t20-taskbar span { display: inline-flex; gap: 6px; align-items: center; } @container (max-width: 640px) { .gceo-game-center .g-20 .t20-screen { grid-template-columns: minmax(0, 1fr); padding: 8px; min-height: 0; } .gceo-game-center .g-20 .t20-dock { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gceo-game-center .g-20 .t20-app { font-size: 10.5px; padding: 6px 2px; } .gceo-game-center .g-20 .t20-win-body { padding: 12px 10px; } .gceo-game-center .g-20 .t20-win-bar small { display: none; } } /* ---------- panel furniture (inside the cream window) ---------- */ .gceo-game-center .g-20 .t20-stat { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 500; padding: 8px 10px; border-radius: 4px; background: var(--gc-surface-2); border-left: 2px solid var(--gc-line); } .gceo-game-center .g-20 .t20-stat .gc-ic { margin-top: 2px; } .gceo-game-center .g-20 .t20-stat.good { background: var(--gc-emerald-soft); border-left-color: var(--gc-emerald); } .gceo-game-center .g-20 .t20-stat.good .gc-ic { color: var(--gc-emerald); } .gceo-game-center .g-20 .t20-stat.warn { background: var(--gc-warn-soft); border-left-color: var(--gc-warn); } .gceo-game-center .g-20 .t20-stat.warn .gc-ic { color: var(--gc-warn); } .gceo-game-center .g-20 .t20-stat.bad { background: var(--gc-risk-soft); border-left-color: var(--gc-risk); } .gceo-game-center .g-20 .t20-stat.bad .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-20 .t20-rows { display: grid; border: 1px solid var(--gc-line-soft); border-radius: 4px; overflow: hidden; } .gceo-game-center .g-20 .t20-row { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: 13.5px; } .gceo-game-center .g-20 .t20-row + .t20-row { border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-20 .t20-row > div:first-child { display: grid; min-width: 0; } .gceo-game-center .g-20 .t20-row b { font-weight: 600; color: var(--gc-white); } .gceo-game-center .g-20 .t20-row small { font-size: 12px; color: var(--gc-muted); } .gceo-game-center .g-20 .t20-row-r { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; } .gceo-game-center .g-20 .t20-row code { font-size: 12px; overflow-wrap: anywhere; background: var(--gc-surface-3); padding: 2px 6px; border-radius: 3px; } .gceo-game-center .g-20 .t20-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--gc-line); color: var(--gc-ink); } .gceo-game-center .g-20 .t20-tag.good { background: var(--gc-emerald-soft); color: var(--gc-emerald-ink); border-color: transparent; } .gceo-game-center .g-20 .t20-tag.warn { background: var(--gc-warn-soft); color: var(--gc-warn); border-color: transparent; } .gceo-game-center .g-20 .t20-tag.bad { background: var(--gc-risk-soft); color: var(--gc-risk); border-color: transparent; } .gceo-game-center .g-20 .t20-sub { display: flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-gold); margin-top: 2px; } .gceo-game-center .g-20 .t20-sub .gc-ic { width: 14px; height: 14px; } .gceo-game-center .g-20 .t20-win-body .gc-row { gap: 6px; } .gceo-game-center .g-20 .t20-win-body .gc-btn.small { min-height: 44px; } .gceo-game-center .g-20 .t20-tog { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); font-size: 13.5px; justify-self: start; } .gceo-game-center .g-20 .t20-knob { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--gc-track); border: 1px solid var(--gc-line); flex: none; transition: background .2s; } .gceo-game-center .g-20 .t20-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #8a8170; transition: transform .2s, background .2s; } .gceo-game-center .g-20 .t20-tog.on .t20-knob { background: rgba(207, 161, 90, .35); border-color: #a07a26; } .gceo-game-center .g-20 .t20-tog.on .t20-knob::after { transform: translateX(18px); background: #8a6418; } .gceo-game-center .g-20 .t20-tog b { font-weight: 700; } .gceo-game-center .g-20 .t20-router { display: grid; gap: 10px; } .gceo-game-center .g-20 .t20-router-box { position: relative; height: 54px; border-radius: 8px; background: linear-gradient(180deg, #2a2925, #1a1917); border: 1px solid #3a372f; display: flex; align-items: center; padding: 0 14px; } .gceo-game-center .g-20 .t20-router-name { font-family: var(--gc-display); letter-spacing: .2em; font-size: 12px; color: #cfa15a; } .gceo-game-center .g-20 .t20-antenna { position: absolute; right: 18px; bottom: 100%; width: 4px; height: 22px; background: #2a2925; border-radius: 2px; box-shadow: -26px 6px 0 #2a2925; } .gceo-game-center .g-20 .t20-router { padding-top: 22px; } .gceo-game-center .g-20 .t20-leds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-20 .t20-led-row { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; font-size: 13px; padding: 6px 8px; background: var(--gc-surface-2); border-radius: 4px; } .gceo-game-center .g-20 .t20-led-row small { grid-column: 2; font-size: 12px; color: var(--gc-muted); } .gceo-game-center .g-20 .t20-led { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: #2f9a74; box-shadow: 0 0 0 3px rgba(47, 154, 116, .2); } .gceo-game-center .g-20 .t20-led.bad { background: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .2); animation: t20-blink 1s steps(2) infinite; } .gceo-game-center .g-20 .t20-led.blink { background: #e0a64a; box-shadow: 0 0 0 3px rgba(224, 166, 74, .2); animation: t20-blink .5s steps(2) infinite; } @keyframes t20-blink { 50% { opacity: .25; } } @container (max-width: 420px) { .gceo-game-center .g-20 .t20-leds { grid-template-columns: minmax(0, 1fr); } } .gceo-game-center .g-20 .t20-lcd { display: grid; gap: 2px; padding: 10px 12px; border-radius: 4px; background: #1d2a22; color: #9fe0c2; font-family: ui-monospace, Menlo, Consolas, monospace; border: 1px solid #2f4a3b; } .gceo-game-center .g-20 .t20-lcd small { font-family: var(--gc-body); font-size: 11px; color: #74a892; letter-spacing: .1em; text-transform: uppercase; } .gceo-game-center .g-20 .t20-lcd b { font-size: 15px; letter-spacing: .06em; } .gceo-game-center .g-20 .t20-lcd.bad { background: #2c1a17; color: #f1a493; border-color: #5a2a22; } .gceo-game-center .g-20 .t20-lcd.bad small { color: #c98272; } .gceo-game-center .g-20 .t20-pos { display: grid; justify-items: center; } .gceo-game-center .g-20 .t20-pos-screen { width: min(100%, 280px); display: grid; gap: 2px; text-align: center; padding: 12px; border-radius: 8px 8px 2px 2px; background: #141c26; color: #cfe3f5; border: 6px solid #2a2925; font-family: ui-monospace, Menlo, Consolas, monospace; } .gceo-game-center .g-20 .t20-pos-screen small { font-size: 11px; letter-spacing: .2em; color: #8fa6bb; } .gceo-game-center .g-20 .t20-pos-screen b { font-size: 18px; letter-spacing: .08em; } .gceo-game-center .g-20 .t20-pos-screen span { font-size: 12px; } .gceo-game-center .g-20 .t20-pos-base { width: 90px; height: 14px; background: #2a2925; border-radius: 0 0 6px 6px; } .gceo-game-center .g-20 .t20-user { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--gc-line); border-radius: 4px; } .gceo-game-center .g-20 .t20-user > .gc-ic { width: 26px; height: 26px; } .gceo-game-center .g-20 .t20-user div { display: grid; } .gceo-game-center .g-20 .t20-user b { color: var(--gc-white); } .gceo-game-center .g-20 .t20-user small { font-size: 12px; color: var(--gc-muted); } .gceo-game-center .g-20 .t20-email { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--gc-line); border-radius: 4px; } .gceo-game-center .g-20 .t20-email-h { display: grid; } .gceo-game-center .g-20 .t20-email-h b { color: var(--gc-white); } .gceo-game-center .g-20 .t20-email-h small { font-size: 13px; color: var(--gc-muted); } .gceo-game-center .g-20 .t20-inbox .t20-row { padding: 6px 10px; } /* ---------- popups (card tagged with g-20) ---------- */ .gceo-game-center .g-20.t20-modal .t20-close, .gceo-game-center .g-20.t20-modal .t20-sum { display: grid; gap: 10px; font-size: 14px; } .gceo-game-center .g-20.t20-modal .t20-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .gceo-game-center .g-20.t20-modal .t20-ck li { display: flex; gap: 8px; align-items: center; color: var(--gc-muted); } .gceo-game-center .g-20.t20-modal .t20-ck li.on { color: var(--gc-white); } .gceo-game-center .g-20.t20-modal .t20-ck li.on .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-20.t20-modal .t20-ck li:not(.on) .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-20.t20-modal .t20-sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; } .gceo-game-center .g-20.t20-modal .t20-sum-list li { display: flex; gap: 8px; align-items: flex-start; } .gceo-game-center .g-20.t20-modal .t20-sum-list .gc-ic { margin-top: 2px; } .gceo-game-center .g-20.t20-modal .t20-warnline { display: flex; gap: 8px; align-items: center; color: var(--gc-gold); font-weight: 600; } .gceo-game-center .g-20.t20-modal .gc-res-bar { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } /* GAME 21 — Time Clock & Payroll. Every selector is scoped to .gceo-game-center .g-21 */ .gceo-game-center .g-21 .p21 { display: grid; gap: 14px; } .gceo-game-center .g-21 .p21-body { display: grid; gap: 14px; min-width: 0; } .gceo-game-center .g-21 .p21-small { font-size: 12.5px; } .gceo-game-center .g-21 .p21-h4 { font-family: var(--gc-display); font-size: 14px; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; margin-top: 4px; } .gceo-game-center .g-21 .p21-lbl { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-muted); margin-bottom: 6px; } /* ---------- stepper ---------- */ .gceo-game-center .g-21 .p21-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-21 .p21-steps li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); background: var(--gc-surface); min-width: 0; } .gceo-game-center .g-21 .p21-steps li.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-21 .p21-steps li.done { border-color: var(--gc-emerald); } .gceo-game-center .g-21 .p21-step-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gc-line); } .gceo-game-center .g-21 .p21-steps li.done .p21-step-ic { border-color: var(--gc-emerald); } .gceo-game-center .g-21 .p21-steps li.done .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-21 .p21-step-ic .gc-ic { width: 15px; height: 15px; vertical-align: 0; } .gceo-game-center .g-21 .p21-step-txt { display: grid; min-width: 0; line-height: 1.25; } .gceo-game-center .g-21 .p21-step-txt small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-21 .p21-step-txt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container (max-width: 860px) { .gceo-game-center .g-21 .p21-steps li:not(.on) .p21-step-txt { display: none; } .gceo-game-center .g-21 .p21-steps { grid-template-columns: auto auto 1fr auto auto; } .gceo-game-center .g-21 .p21-steps li { justify-content: center; } .gceo-game-center .g-21 .p21-steps li.on { justify-content: flex-start; } } .gceo-game-center .g-21 .p21-hud { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } /* ---------- shared bits ---------- */ .gceo-game-center .g-21 .p21-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } @container (max-width: 820px) { .gceo-game-center .g-21 .p21-cols { grid-template-columns: 1fr; } } .gceo-game-center .g-21 .p21-okline, .gceo-game-center .g-21 .p21-warnline, .gceo-game-center .g-21 .p21-waitline, .gceo-game-center .g-21 .p21-ask, .gceo-game-center .g-21 .p21-policy, .gceo-game-center .g-21 .p21-disclaimer { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--gc-r); line-height: 1.45; } .gceo-game-center .g-21 .p21-okline { background: var(--gc-emerald-soft); color: var(--gc-emerald-ink); font-weight: 500; } .gceo-game-center .g-21 .p21-okline .gc-ic { color: var(--gc-emerald-ink); margin-top: 2px; } .gceo-game-center .g-21 .p21-warnline { background: var(--gc-risk-soft); color: var(--gc-ink); border-left: 2px solid var(--gc-risk); } .gceo-game-center .g-21 .p21-warnline .gc-ic { color: var(--gc-risk); margin-top: 2px; } .gceo-game-center .g-21 .p21-waitline { background: var(--gc-gold-soft); } .gceo-game-center .g-21 .p21-ask { border: 1px dashed var(--gc-line); font-weight: 600; } .gceo-game-center .g-21 .p21-policy { background: var(--gc-surface-2); font-size: 13.5px; } .gceo-game-center .g-21 .p21-disclaimer { border: 1px solid var(--gc-line); background: var(--gc-surface); font-size: 13.5px; font-weight: 500; } .gceo-game-center .g-21 .p21-ask .gc-ic, .gceo-game-center .g-21 .p21-policy .gc-ic, .gceo-game-center .g-21 .p21-disclaimer .gc-ic, .gceo-game-center .g-21 .p21-waitline .gc-ic { margin-top: 2px; } .gceo-game-center .g-21 .p21-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; } .gceo-game-center .g-21 .p21-form label, .gceo-game-center .g-21 .p21-inline { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--gc-muted); min-width: 0; } .gceo-game-center .g-21 .p21-form .p21-wide { grid-column: 1 / -1; } .gceo-game-center .g-21 input, .gceo-game-center .g-21 select, .gceo-game-center .g-21 textarea { font: inherit; font-size: 15px; font-weight: 500; color: var(--gc-ink); background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 4px; padding: 9px 10px; min-height: 44px; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; } .gceo-game-center .g-21 textarea { resize: vertical; min-height: 64px; } .gceo-game-center .g-21 input:disabled { opacity: .7; } .gceo-game-center .g-21 input:focus-visible, .gceo-game-center .g-21 select:focus-visible, .gceo-game-center .g-21 textarea:focus-visible { outline: 2px solid var(--gc-gold-fill); outline-offset: 1px; } .gceo-game-center .g-21 .gc-paper input, .gceo-game-center .g-21 .gc-paper select, .gceo-game-center .g-21 .gc-paper textarea { background: #fffdf8; } .gceo-game-center .g-21 .p21-tablewrap { overflow-x: auto; max-width: 100%; min-width: 0; scrollbar-width: thin; } .gceo-game-center .g-21 .p21-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-21 .p21-table th, .gceo-game-center .g-21 .p21-table td { position: relative; padding: 8px 9px; text-align: left; border-bottom: 1px solid var(--gc-line-soft); white-space: nowrap; } .gceo-game-center .g-21 .p21-table th { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-muted); border-bottom-color: var(--gc-line); } .gceo-game-center .g-21 .p21-table.sm td, .gceo-game-center .g-21 .p21-table.sm th { padding: 6px 8px; } .gceo-game-center .g-21 .p21-table .p21-total td { border-top: 1px solid var(--gc-line); } .gceo-game-center .g-21 .p21-off { color: var(--gc-faint); font-size: 12px; } .gceo-game-center .g-21 .p21-miss { display: inline-flex; align-items: center; gap: 4px; color: var(--gc-risk); font-weight: 600; font-size: 12.5px; } .gceo-game-center .g-21 .p21-miss .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-21 .p21-edited { margin-left: 4px; } .gceo-game-center .g-21 .p21-edited .gc-ic { width: 13px; height: 13px; } .gceo-game-center .g-21 .p21-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; } .gceo-game-center .g-21 .p21-rules li { display: flex; gap: 10px; align-items: flex-start; } .gceo-game-center .g-21 .p21-rules .gc-ic { margin-top: 2px; } /* ---------- stage 1: kiosk ---------- */ .gceo-game-center .g-21 .p21-train { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; align-items: start; } @container (max-width: 760px) { .gceo-game-center .g-21 .p21-train { grid-template-columns: 1fr; } } .gceo-game-center .g-21 .p21-kiosk { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: linear-gradient(180deg, #1f1e1b, #121211); border: 1px solid var(--gc-gold-fill); box-shadow: inset 0 0 0 4px #121211, inset 0 0 0 5px rgba(207, 161, 90, .35), var(--gc-shadow); color: #efe8da; } .gceo-game-center .g-21 .p21-kiosk-head { display: flex; gap: 8px; align-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #cfa15a; } .gceo-game-center .g-21 .p21-kiosk-head .gc-ic { color: #cfa15a; } .gceo-game-center .g-21 .p21-kiosk-screen { background: #0a0a09; border: 1px solid rgba(207, 161, 90, .3); border-radius: 8px; padding: 14px; text-align: center; } .gceo-game-center .g-21 .p21-bigclock { display: block; font-family: var(--gc-body); font-weight: 600; font-size: clamp(34px, 7cqi, 46px); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #f6efe1; line-height: 1.1; } .gceo-game-center .g-21 .p21-bigclock.sm { font-size: clamp(28px, 5cqi, 38px); } .gceo-game-center .g-21 .p21-kiosk-sub { font-size: 12.5px; color: #a9a192; margin-top: 4px; } .gceo-game-center .g-21 .p21-idrow { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #a9a192; } .gceo-game-center .g-21 .p21-kiosk input { background: #0a0a09; color: #f6efe1; text-align: center; font-size: 22px; letter-spacing: .4em; border-color: rgba(207, 161, 90, .4); } .gceo-game-center .g-21 .p21-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .gceo-game-center .g-21 .p21-key { min-height: 44px; border-radius: 6px; border: 1px solid rgba(207, 161, 90, .3); background: #1a1917; color: #efe8da; font-size: 17px; font-weight: 600; display: grid; place-items: center; } .gceo-game-center .g-21 .p21-key:hover { border-color: #cfa15a; } .gceo-game-center .g-21 .p21-key .gc-ic { color: #cfa15a; } .gceo-game-center .g-21 .p21-punchbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gceo-game-center .g-21 .p21-punch { color: #efe8da; border-color: rgba(207, 161, 90, .45); font-size: 13px; } .gceo-game-center .g-21 .p21-punch .gc-ic { color: #cfa15a; } .gceo-game-center .g-21 .p21-kmsg { min-height: 1.5em; font-size: 13px; display: flex; gap: 6px; align-items: flex-start; color: #efe8da; } .gceo-game-center .g-21 .p21-kmsg .gc-ic { color: #cfa15a; margin-top: 2px; } .gceo-game-center .g-21 .p21-badge { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--gc-line); border-radius: var(--gc-r); } .gceo-game-center .g-21 .p21-badge > .gc-ic { width: 26px; height: 26px; } .gceo-game-center .g-21 .p21-badge div { display: grid; } .gceo-game-center .g-21 .p21-badge small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-muted); } .gceo-game-center .g-21 .p21-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .gceo-game-center .g-21 .p21-plist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "i n w" "i g g"; gap: 0 10px; align-items: center; padding: 8px 10px; border-radius: 4px; background: var(--gc-surface-2); } .gceo-game-center .g-21 .p21-plist li > span:first-child { grid-area: i; display: grid; } .gceo-game-center .g-21 .p21-plist li b { grid-area: n; } .gceo-game-center .g-21 .p21-plist .p21-when { grid-area: w; font-variant-numeric: tabular-nums; font-weight: 600; } .gceo-game-center .g-21 .p21-plist .p21-got { grid-area: g; font-size: 12px; color: var(--gc-muted); } .gceo-game-center .g-21 .p21-plist li.done { background: var(--gc-emerald-soft); } .gceo-game-center .g-21 .p21-plist li.done .gc-ic { color: var(--gc-emerald); } .gceo-game-center .g-21 .p21-plist li.next { outline: 1px solid var(--gc-gold-fill); } .gceo-game-center .g-21 .p21-corr { display: grid; gap: 10px; } .gceo-game-center .g-21 .p21-trainside .gc-row .gc-btn { flex: 1 1 140px; } /* ---------- stage 2: live week ---------- */ .gceo-game-center .g-21 .p21-week { display: grid; gap: 14px; } .gceo-game-center .g-21 .p21-console { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 20px; background: linear-gradient(180deg, #1c1b19, #141413); } .gceo-game-center .g-21 .p21-console-clock { display: grid; gap: 2px; } .gceo-game-center .g-21 .p21-console-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; } .gceo-game-center .g-21 .p21-console-meter { grid-column: 1 / -1; } @container (max-width: 640px) { .gceo-game-center .g-21 .p21-console { grid-template-columns: 1fr; } .gceo-game-center .g-21 .p21-console-ctl { justify-content: flex-start; } } .gceo-game-center .g-21 .p21-speed { display: inline-flex; gap: 4px; } .gceo-game-center .g-21 .p21-speed .gc-btn { min-width: 48px; } .gceo-game-center .g-21 .p21-board { display: grid; gap: 6px; } .gceo-game-center .g-21 .p21-brow { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 4px; background: var(--gc-surface-2); min-width: 0; } .gceo-game-center .g-21 .p21-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; border: 1px solid var(--gc-gold-fill); color: var(--gc-gold); } .gceo-game-center .g-21 .p21-bname { display: grid; min-width: 0; flex: 1; line-height: 1.25; } .gceo-game-center .g-21 .p21-bname b { font-size: 13.5px; font-weight: 600; } .gceo-game-center .g-21 .p21-bname small { font-size: 11.5px; color: var(--gc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-21 .p21-brow .gc-pill { white-space: normal; text-align: right; } .gceo-game-center .g-21 .p21-feed { max-height: 190px; font-size: 12.5px; } .gceo-game-center .g-21 .p21-inbox { display: grid; gap: 6px; } .gceo-game-center .g-21 .p21-xitem { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 10px; min-height: 52px; border-radius: var(--gc-r); border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); color: var(--gc-ink); } .gceo-game-center .g-21 .p21-xitem:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-21 .p21-xitem.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-21 .p21-xitem.done { opacity: .72; } .gceo-game-center .g-21 .p21-xic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gc-line); } .gceo-game-center .g-21 .p21-xtxt { display: grid; flex: 1; min-width: 0; line-height: 1.3; } .gceo-game-center .g-21 .p21-xtxt b { font-size: 13.5px; font-weight: 600; } .gceo-game-center .g-21 .p21-xtxt small { font-size: 11.5px; color: var(--gc-muted); } .gceo-game-center .g-21 .p21-xitem .gc-pill { flex: none; } @container (max-width: 480px) { .gceo-game-center .g-21 .p21-xitem { flex-wrap: wrap; } .gceo-game-center .g-21 .p21-xitem .gc-pill { margin-left: 42px; } } .gceo-game-center .g-21 .p21-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; } .gceo-game-center .g-21 .p21-facts li { display: flex; gap: 10px; align-items: flex-start; } .gceo-game-center .g-21 .p21-facts .gc-ic { margin-top: 3px; width: 15px; height: 15px; } .gceo-game-center .g-21 .p21-tc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-21 .p21-tc > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 4px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); min-width: 0; } .gceo-game-center .g-21 .p21-tc small { font-size: 10.5px; color: var(--gc-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .gceo-game-center .g-21 .p21-tc b { font-variant-numeric: tabular-nums; font-size: 14px; } @container (max-width: 560px) { .gceo-game-center .g-21 .p21-tc { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gceo-game-center .g-21 .p21-cands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; } .gceo-game-center .g-21 .p21-cand, .gceo-game-center .g-21 .p21-opt { display: grid; gap: 2px; text-align: left; padding: 10px 12px; min-height: 52px; border-radius: var(--gc-r); border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); } .gceo-game-center .g-21 .p21-cand:hover:not(:disabled), .gceo-game-center .g-21 .p21-opt:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-21 .p21-cand small, .gceo-game-center .g-21 .p21-opt small { font-size: 12px; color: var(--gc-muted); } .gceo-game-center .g-21 .p21-cand:disabled { opacity: .55; } .gceo-game-center .g-21 .p21-closebar { padding-top: 6px; } /* ---------- stage 3: schedule ---------- */ .gceo-game-center .g-21 .p21-sched { display: grid; gap: 14px; } .gceo-game-center .g-21 .p21-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; } .gceo-game-center .g-21 .p21-hchip { display: grid; gap: 4px; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); font-size: 13px; } .gceo-game-center .g-21 .p21-hchip span { font-variant-numeric: tabular-nums; color: var(--gc-muted); } .gceo-game-center .g-21 .p21-hchip.bad { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-21 .p21-hchip.bad span { color: var(--gc-risk); font-weight: 600; } .gceo-game-center .g-21 .p21-hchip.full { border-color: var(--gc-emerald); } .gceo-game-center .g-21 .p21-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; align-items: start; } .gceo-game-center .g-21 .p21-day { display: grid; gap: 6px; padding: 12px; border-radius: var(--gc-r); background: var(--gc-surface); border: 1px solid var(--gc-line); } .gceo-game-center .g-21 .p21-day h4 { font-family: var(--gc-display); font-size: 16px; letter-spacing: .04em; } .gceo-game-center .g-21 .p21-day h4 small { font-family: var(--gc-body); font-size: 12px; color: var(--gc-muted); letter-spacing: 0; font-weight: 500; } .gceo-game-center .g-21 .p21-slot { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 4px; border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); color: var(--gc-ink); text-align: left; } .gceo-game-center .g-21 .p21-slot small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-21 .p21-slot b { font-weight: 600; font-size: 14px; } .gceo-game-center .g-21 .p21-slot:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-21 .p21-slot.empty { border-style: dashed; border-color: var(--gc-warn); } .gceo-game-center .g-21 .p21-slot.empty b { color: var(--gc-warn); font-weight: 500; } .gceo-game-center .g-21 .p21-slot.bad { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-21 .p21-slot.bad .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-21 .p21-slot:not(.bad):not(.empty) .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-21 .p21-slot.picking { outline: 2px solid var(--gc-gold-fill); } .gceo-game-center .g-21 .p21-picker { display: grid; gap: 6px; padding: 10px; border-radius: var(--gc-r); border: 1px solid var(--gc-gold-fill); background: var(--gc-surface-3); } .gceo-game-center .g-21 .p21-opt { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; } .gceo-game-center .g-21 .p21-opt span { display: grid; } .gceo-game-center .g-21 .p21-opt .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-21 .p21-opt.warn .gc-ic { color: var(--gc-warn); } .gceo-game-center .g-21 .p21-opt.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } /* ---------- stage 4: register ---------- */ .gceo-game-center .g-21 .p21-reg, .gceo-game-center .g-21 .p21-audit { display: grid; gap: 14px; } .gceo-game-center .g-21 .p21-calcout { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 1.4em; } .gceo-game-center .g-21 .p21-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-21 .p21-tab { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--gc-line); background: transparent; color: var(--gc-ink); font-size: 13.5px; font-weight: 500; } .gceo-game-center .g-21 .p21-tab .gc-ic { width: 15px; height: 15px; } .gceo-game-center .g-21 .p21-tab.on { background: var(--gc-paper-ink); color: #f6efe1; border-color: var(--gc-paper-ink); } .gceo-game-center .g-21 .p21-tab.on .gc-ic { color: #cfa15a; } .gceo-game-center .g-21 .p21-tab.ok:not(.on) { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); color: var(--gc-emerald-ink); } .gceo-game-center .g-21 .p21-tab.ok .gc-ic { color: var(--gc-emerald); } .gceo-game-center .g-21 .p21-packet { display: grid; gap: 6px; padding: 12px; border-radius: 4px; background: var(--gc-surface-2); font-size: 14px; } .gceo-game-center .g-21 .p21-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; } .gceo-game-center .g-21 .p21-cell { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gc-muted); align-content: start; } .gceo-game-center .g-21 .p21-cell input { text-align: right; font-size: 16px; } .gceo-game-center .g-21 .p21-cell.bad input { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-21 .p21-cell.bad small { color: var(--gc-risk); display: inline-flex; gap: 4px; align-items: center; } .gceo-game-center .g-21 .p21-cell.bad small .gc-ic { color: var(--gc-risk); width: 13px; height: 13px; } .gceo-game-center .g-21 .p21-cell.ok input { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); color: var(--gc-emerald-ink); opacity: 1; } /* ---------- stage 5: audit ---------- */ .gceo-game-center .g-21 .p21-arows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; } .gceo-game-center .g-21 .p21-arow { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: var(--gc-r); border: 1px solid var(--gc-line); background: var(--gc-surface); } .gceo-game-center .g-21 .p21-arow.flag { border-color: var(--gc-warn); } .gceo-game-center .g-21 .p21-arow.ok { border-color: var(--gc-emerald); } .gceo-game-center .g-21 .p21-arow.bad { border-color: var(--gc-risk); } .gceo-game-center .g-21 .p21-arow-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .gceo-game-center .g-21 .p21-arow-head b { font-family: var(--gc-display); font-size: 16px; letter-spacing: .03em; } .gceo-game-center .g-21 .p21-arow-head small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-21 .p21-dl { margin: 0; display: grid; gap: 4px; font-size: 13.5px; } .gceo-game-center .g-21 .p21-dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; } .gceo-game-center .g-21 .p21-dl dt { color: var(--gc-muted); font-size: 12px; font-weight: 600; } .gceo-game-center .g-21 .p21-dl dd { margin: 0; font-variant-numeric: tabular-nums; } .gceo-game-center .g-21 .p21-amark .gc-btn { flex: 1 1 120px; } /* GAME 22 — Hiring & HR Manager. Every selector is scoped to .gceo-game-center .g-22 */ .gceo-game-center .g-22 .h22 { display: grid; gap: 14px; } .gceo-game-center .g-22 .h22-body { display: grid; gap: 14px; } .gceo-game-center .g-22 .h22-hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .gceo-game-center .g-22 .h22-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 2px 4px; } .gceo-game-center .g-22 .h22-h4 { font-family: var(--gc-display); font-weight: 600; font-size: 14.5px; letter-spacing: .04em; color: var(--gc-white); display: flex; align-items: center; gap: 8px; margin-top: 6px; } .gceo-game-center .g-22 .h22-h4 .gc-ic { width: 16px; height: 16px; } .gceo-game-center .g-22 .h22-small { font-size: 12.5px; } .gceo-game-center .g-22 .h22-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } .gceo-game-center .g-22 .h22-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 4px; } /* stage stepper */ .gceo-game-center .g-22 .h22-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-22 .h22-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--gc-line-soft); border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--gc-muted); min-width: 0; } .gceo-game-center .g-22 .h22-steps li > span:last-child { display: grid; min-width: 0; line-height: 1.25; } .gceo-game-center .g-22 .h22-steps small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gc-faint); } .gceo-game-center .g-22 .h22-step-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px dashed var(--gc-faint); } .gceo-game-center .g-22 .h22-step-ico .gc-ic { width: 14px; height: 14px; vertical-align: 0; color: var(--gc-faint); } .gceo-game-center .g-22 .h22-steps li.on { border-color: var(--gc-gold-fill); color: var(--gc-white); background: var(--gc-gold-soft); } .gceo-game-center .g-22 .h22-steps li.on .h22-step-ico { border: 1px solid var(--gc-gold-fill); } .gceo-game-center .g-22 .h22-steps li.on .gc-ic { color: var(--gc-gold); } .gceo-game-center .g-22 .h22-steps li.done { color: var(--gc-ink); } .gceo-game-center .g-22 .h22-steps li.done .h22-step-ico { border: 1px solid var(--gc-emerald); } .gceo-game-center .g-22 .h22-steps li.done .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-22 .h22-legal { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--gc-muted); border-top: 1px solid var(--gc-line-soft); padding: 12px 4px 0; } .gceo-game-center .g-22 .h22-legal .gc-ic { margin-top: 2px; } .gceo-game-center .g-22 .h22-alert { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 4px; font-size: 13.5px; border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); } .gceo-game-center .g-22 .h22-alert .gc-ic { margin-top: 2px; } .gceo-game-center .g-22 .h22-alert.bad { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-22 .h22-alert.bad .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-22 .h22-alert.warn { border-color: var(--gc-warn); background: var(--gc-warn-soft); } .gceo-game-center .g-22 .h22-alert.warn .gc-ic { color: var(--gc-warn); } .gceo-game-center .g-22 .h22-alert.good { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .g-22 .h22-alert.gold { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } /* job post blocks */ .gceo-game-center .g-22 .h22-blocks { display: grid; gap: 6px; } .gceo-game-center .g-22 .h22-block { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 44px; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); font-size: 13.5px; line-height: 1.35; } .gceo-game-center .g-22 .h22-block:hover { border-color: var(--gc-gold-fill); } .gceo-game-center .g-22 .h22-block.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); color: var(--gc-white); } .gceo-game-center .g-22 .h22-block small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; } .gceo-game-center .g-22 .h22-block.flagged { border-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-22 .h22-block.flagged .gc-ic, .gceo-game-center .g-22 .h22-block.flagged small { color: var(--gc-risk); } .gceo-game-center .g-22 .h22-block.barrier { border-color: var(--gc-warn); background: var(--gc-warn-soft); } .gceo-game-center .g-22 .h22-block.barrier .gc-ic, .gceo-game-center .g-22 .h22-block.barrier small { color: var(--gc-warn); } .gceo-game-center .g-22 .h22-custom { display: flex; gap: 8px; flex-wrap: wrap; } .gceo-game-center .g-22 .h22-custom input { flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); color: var(--gc-ink); font: inherit; font-size: 14px; } .gceo-game-center .g-22 .h22-custom input:focus-visible { outline: 2px solid var(--gc-gold-fill); } .gceo-game-center .g-22 .h22-pay { display: grid; gap: 8px; } .gceo-game-center .g-22 .h22-payrow { display: flex; align-items: center; gap: 8px; } .gceo-game-center .g-22 .h22-payrow > span { min-width: 54px; font-size: 13px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-22 .h22-payrow b { min-width: 76px; text-align: center; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--gc-white); } .gceo-game-center .g-22 .h22-step { width: 44px; min-width: 44px; padding: 0; } /* paper preview */ .gceo-game-center .g-22 .h22-doc { position: sticky; top: 10px; } .gceo-game-center .g-22 .h22-doc-title { font-family: var(--gc-display); font-size: 22px; letter-spacing: .04em; } .gceo-game-center .g-22 .h22-doc-co { font-size: 13px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-22 .h22-doc-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 14px; } .gceo-game-center .g-22 .h22-doc-list li::marker { color: var(--gc-gold); } .gceo-game-center .g-22 .h22-doc-list mark, .gceo-game-center .g-22 .h22-mark { background: var(--gc-risk-soft); color: var(--gc-risk); padding: 1px 4px; border-radius: 3px; text-decoration: underline wavy; text-underline-offset: 3px; } .gceo-game-center .g-22 .h22-doc-list li.warnl span { text-decoration: underline dotted var(--gc-warn); text-underline-offset: 3px; } .gceo-game-center .g-22 .h22-why { cursor: pointer; font: inherit; font-size: 11.5px; min-height: 28px; margin: 2px 0; white-space: normal; } .gceo-game-center .g-22 .h22-x { display: inline-grid; place-items: center; width: 32px; height: 32px; vertical-align: middle; border-radius: 50%; border: 1px solid var(--gc-line); background: transparent; } .gceo-game-center .g-22 .h22-x .gc-ic { width: 14px; height: 14px; vertical-align: 0; } .gceo-game-center .g-22 .h22-doc-foot { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--gc-line-soft); } /* screening */ .gceo-game-center .g-22 .h22-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: sticky; top: 0; z-index: 2; background: var(--gc-surface); padding: 8px 0; } .gceo-game-center .g-22 .h22-toolbar .gc-eyebrow { margin-right: 6px; } .gceo-game-center .g-22 .h22-resumes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; } .gceo-game-center .g-22 .h22-resume { border-radius: 4px; padding: 16px; display: grid; gap: 10px; align-content: start; } .gceo-game-center .g-22 .h22-resume.adv { box-shadow: inset 0 0 0 5px #f6f0e3, inset 0 0 0 6px var(--gc-emerald); } .gceo-game-center .g-22 .h22-resume.pass { opacity: .72; } .gceo-game-center .g-22 .h22-resume header, .gceo-game-center .g-22 .h22-final header { display: flex; gap: 10px; align-items: center; } .gceo-game-center .g-22 .h22-resume header > div, .gceo-game-center .g-22 .h22-final header > div { display: grid; min-width: 0; flex: 1; } .gceo-game-center .g-22 .h22-resume header small, .gceo-game-center .g-22 .h22-final header small { font-size: 12px; color: var(--gc-muted); line-height: 1.3; } .gceo-game-center .g-22 .h22-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--gc-display); font-weight: 600; font-size: 14px; letter-spacing: .05em; border: 1px solid var(--gc-gold); color: var(--gc-gold); } .gceo-game-center .g-22 .h22-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .gceo-game-center .g-22 .h22-line { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; text-align: left; min-height: 44px; padding: 6px 10px; border-radius: 4px; border: 1px dashed var(--gc-line); background: transparent; font-size: 13.5px; line-height: 1.35; } .gceo-game-center .g-22 .h22-line:hover { border-style: solid; border-color: var(--gc-gold); background: var(--gc-gold-soft); } .gceo-game-center .g-22 .h22-line.tagged { border-style: solid; border-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .g-22 .h22-line > span:first-child { flex: 1 1 180px; min-width: 0; } .gceo-game-center .g-22 .h22-resume footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid var(--gc-line-soft); padding-top: 10px; } .gceo-game-center .g-22 .h22-ev { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; } .gceo-game-center .g-22 .h22-dec { display: flex; gap: 6px; } .gceo-game-center .g-22 .gc-paper .gc-btn.small.on { background: var(--gc-gold-soft); color: var(--gc-ink); border-color: var(--gc-gold); } .gceo-game-center .g-22 .gc-paper .gc-btn.small.on .gc-ic { color: var(--gc-gold); } /* interviews */ .gceo-game-center .g-22 .h22-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .gceo-game-center .g-22 .h22-slot { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 12px; border-radius: 4px; border: 1px solid var(--gc-line); background: var(--gc-surface-2); min-width: 0; } .gceo-game-center .g-22 .h22-slot.done { border-color: var(--gc-emerald); } .gceo-game-center .g-22 .h22-slot-day { font-family: var(--gc-display); font-weight: 600; font-size: 18px; color: var(--gc-white); letter-spacing: .06em; } .gceo-game-center .g-22 .h22-slot-time { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gc-muted); } .gceo-game-center .g-22 .h22-slot b { font-size: 14px; } .gceo-game-center .g-22 .h22-room-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; } .gceo-game-center .g-22 .h22-transcript { display: grid; gap: 10px; align-content: start; min-height: 220px; max-height: 520px; overflow: auto; padding: 12px; border-radius: 4px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); } .gceo-game-center .g-22 .h22-qa { display: grid; gap: 4px; justify-items: start; padding-bottom: 10px; border-bottom: 1px solid var(--gc-line-soft); } .gceo-game-center .g-22 .h22-q, .gceo-game-center .g-22 .h22-a { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; } .gceo-game-center .g-22 .h22-q .gc-ic, .gceo-game-center .g-22 .h22-a .gc-ic { margin-top: 2px; } .gceo-game-center .g-22 .h22-a { color: var(--gc-white); } .gceo-game-center .g-22 .h22-bank { display: grid; gap: 6px; } .gceo-game-center .g-22 .h22-qbtn { display: flex; gap: 8px; align-items: flex-start; text-align: left; min-height: 44px; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); font-size: 13.5px; line-height: 1.35; } .gceo-game-center .g-22 .h22-qbtn .gc-ic { margin-top: 1px; } .gceo-game-center .g-22 .h22-qbtn:hover:not(:disabled) { border-color: var(--gc-gold-fill); } .gceo-game-center .g-22 .h22-qbtn:disabled { opacity: .5; } .gceo-game-center .g-22 .h22-qbtn.asked { opacity: .6; border-style: dashed; } .gceo-game-center .g-22 .h22-rate { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gc-line-soft); } .gceo-game-center .g-22 .h22-rate > span { display: grid; font-weight: 600; min-width: 0; flex: 1 1 200px; } .gceo-game-center .g-22 .h22-rate small { font-weight: 400; font-size: 12px; color: var(--gc-muted); } .gceo-game-center .g-22 .h22-stars { display: flex; gap: 4px; } .gceo-game-center .g-22 .h22-star { width: 44px; height: 44px; border-radius: 4px; border: 1px solid var(--gc-line); background: transparent; font-weight: 600; font-size: 15px; } .gceo-game-center .g-22 .h22-star.on { background: #1d1c19; color: #efe8da; border-color: #1d1c19; } /* finalists & offer */ .gceo-game-center .g-22 .h22-finals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; } .gceo-game-center .g-22 .h22-final { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 4px; border: 1px solid var(--gc-line); background: var(--gc-surface); } .gceo-game-center .g-22 .h22-final.sel { border-color: var(--gc-gold-fill); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); } .gceo-game-center .g-22 .h22-final.closed { opacity: .66; } .gceo-game-center .g-22 .h22-final header .gc-pill { flex: none; } .gceo-game-center .g-22 .h22-final-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .gceo-game-center .g-22 .h22-final-stats span { display: grid; padding: 6px 8px; border-radius: 4px; background: var(--gc-surface-2); min-width: 0; } .gceo-game-center .g-22 .h22-final-stats small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-22 .h22-final-stats b { font-size: 14px; color: var(--gc-white); } .gceo-game-center .g-22 .h22-ref { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 8px 10px; border-left: 2px solid var(--gc-gold-fill); background: var(--gc-surface-2); border-radius: 0 4px 4px 0; } .gceo-game-center .g-22 .h22-ref .gc-ic { margin-top: 2px; } .gceo-game-center .g-22 .h22-final-act { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-22 .h22-letter { white-space: pre-wrap; font-family: var(--gc-body); font-size: 13px; line-height: 1.55; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-left: 2px solid var(--gc-gold-fill); padding: 12px 14px; border-radius: 4px; margin: 0; } /* HR desk */ .gceo-game-center .g-22 .h22-tl { position: relative; height: 54px; margin: 6px 16px 4px; } .gceo-game-center .g-22 .h22-tl-bar { position: absolute; left: 0; right: 0; top: 25px; height: 4px; border-radius: 4px; background: var(--gc-track); overflow: hidden; } .gceo-game-center .g-22 .h22-tl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gc-emerald), var(--gc-gold-fill)); transition: width .5s ease; } .gceo-game-center .g-22 .h22-tl-m { position: absolute; top: 12px; translate: -50% 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gc-surface); border: 1px dashed var(--gc-faint); } .gceo-game-center .g-22 .h22-tl-m .gc-ic { width: 14px; height: 14px; vertical-align: 0; color: var(--gc-faint); } .gceo-game-center .g-22 .h22-tl-m.done { border: 1px solid var(--gc-emerald); } .gceo-game-center .g-22 .h22-tl-m.done .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-22 .h22-tl-m.next { border: 1px solid var(--gc-gold-fill); box-shadow: 0 0 0 3px var(--gc-gold-soft); } .gceo-game-center .g-22 .h22-tl-m.next .gc-ic { color: var(--gc-gold); } .gceo-game-center .g-22 .h22-next { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--gc-line); border-radius: 4px; background: var(--gc-surface-2); } .gceo-game-center .g-22 .h22-next > span { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gc-gold-fill); } .gceo-game-center .g-22 .h22-next > div { display: grid; flex: 1 1 220px; min-width: 0; } .gceo-game-center .g-22 .h22-perf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gceo-game-center .g-22 .h22-perf > div { display: grid; justify-items: center; padding: 10px; border-radius: 4px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); } .gceo-game-center .g-22 .h22-perf small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-22 .h22-perf b { font-family: var(--gc-display); font-size: 24px; color: var(--gc-white); } .gceo-game-center .g-22 .h22-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .gceo-game-center .g-22 .h22-hist li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 4px; background: var(--gc-surface-2); } .gceo-game-center .g-22 .h22-hist li > span:nth-child(2) { display: grid; flex: 1; min-width: 0; font-size: 13.5px; } .gceo-game-center .g-22 .h22-hist small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-22 .h22-case-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } .gceo-game-center .g-22 .h22-file { display: grid; gap: 10px; padding: 18px; border-radius: 4px; } .gceo-game-center .g-22 .h22-who { font-weight: 600; font-size: 14px; color: var(--gc-white); } .gceo-game-center .g-22 .h22-find { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .gceo-game-center .g-22 .h22-find li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 8px 10px; border-radius: 4px; background: var(--gc-surface-2); border-left: 2px solid var(--gc-gold); } .gceo-game-center .g-22 .h22-find .gc-ic { margin-top: 2px; } .gceo-game-center .g-22 .h22-board { display: grid; gap: 8px; align-content: start; } .gceo-game-center .g-22 .h22-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px; } .gceo-game-center .g-22 .h22-act { display: flex; gap: 8px; align-items: center; text-align: left; min-height: 44px; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--gc-line-soft); background: var(--gc-surface-2); font-size: 13.5px; line-height: 1.3; } .gceo-game-center .g-22 .h22-act > span { flex: 1; min-width: 0; } .gceo-game-center .g-22 .h22-act small { font-size: 11.5px; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-22 .h22-act:hover:not(:disabled) { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-22 .h22-act.done { border-color: var(--gc-emerald); background: var(--gc-emerald-soft); opacity: 1; } .gceo-game-center .g-22 .h22-act.done .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-22 .h22-act:disabled:not(.done) { opacity: .45; } .gceo-game-center .g-22 .h22-act.dec { border-color: var(--gc-line); } .gceo-game-center .g-22 .h22-ladder { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .gceo-game-center .g-22 .h22-ladder .h22-act { flex: 1 1 110px; justify-content: center; text-align: center; } .gceo-game-center .g-22 .h22-arrow .gc-ic { width: 14px; height: 14px; vertical-align: 0; } .gceo-game-center .g-22 .h22-big { display: flex; align-items: baseline; justify-content: center; gap: 8px; } .gceo-game-center .g-22 .h22-big small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-22 .h22-big b { font-family: var(--gc-display); font-size: 40px; color: var(--gc-white); } @container (max-width: 900px) { .gceo-game-center .g-22 .h22-cal { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); } .gceo-game-center .g-22 .h22-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gceo-game-center .g-22 .h22-steps li > span:last-child { display: none; } .gceo-game-center .g-22 .h22-steps li { justify-content: center; } .gceo-game-center .g-22 .h22-steps li.on > span:last-child { display: grid; } .gceo-game-center .g-22 .h22-steps li.on { grid-column: span 1; } } @container (max-width: 760px) { .gceo-game-center .g-22 .h22-grid, .gceo-game-center .g-22 .h22-room-grid, .gceo-game-center .g-22 .h22-case-grid { grid-template-columns: minmax(0, 1fr); } .gceo-game-center .g-22 .h22-doc { position: static; } .gceo-game-center .g-22 .h22-meters { grid-template-columns: minmax(0, 1fr); gap: 8px; } .gceo-game-center .g-22 .h22-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-22 .h22-steps { display: flex; } .gceo-game-center .g-22 .h22-steps li { flex: none; } .gceo-game-center .g-22 .h22-steps li.on { flex: 1; min-width: 0; } } @container (max-width: 420px) { .gceo-game-center .g-22 .h22-final-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gceo-game-center .g-22 .h22-tl { margin: 6px 10px 4px; height: 40px; } .gceo-game-center .g-22 .h22-tl-bar { top: 18px; } .gceo-game-center .g-22 .h22-tl-m { top: 14px; width: 12px; height: 12px; } .gceo-game-center .g-22 .h22-tl-m .gc-ic { display: none; } .gceo-game-center .g-22 .h22-tl-m.done { background: var(--gc-emerald); } .gceo-game-center .g-22 .h22-tl-m.next { background: var(--gc-gold-fill); } } .gceo-game-center .g-22.h22-pop { display: grid; gap: 8px; } /* GAME 23 — Business Turnaround Room. Every selector is scoped to .gceo-game-center .g-23 */ .gceo-game-center .g-23 .t23 { display: grid; gap: 14px; } .gceo-game-center .g-23 h4 { font-family: var(--gc-display); font-weight: 600; font-size: 15px; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; margin: 0; } .gceo-game-center .g-23 h4 .gc-ic { width: 16px; height: 16px; vertical-align: 0; } .gceo-game-center .g-23 .t23-intro { color: var(--gc-muted); max-width: 78ch; font-size: 14.5px; } /* ---------- dashboard ---------- */ .gceo-game-center .g-23 .t23-dash { display: grid; gap: 10px; background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 14px 16px; } .gceo-game-center .g-23 .t23-dash-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: space-between; } .gceo-game-center .g-23 .t23-dash-when { font-size: 12.5px; } .gceo-game-center .g-23 .t23-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .gceo-game-center .g-23 .t23-kpi { align-items: flex-start; } .gceo-game-center .g-23 .t23-kpi .gc-res-txt { gap: 1px; } .gceo-game-center .g-23 .t23-d { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--gc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-23 .t23-d .gc-ic { width: 12px; height: 12px; vertical-align: 0; color: currentColor; } .gceo-game-center .g-23 .t23-d.up { color: var(--gc-emerald-ink); } .gceo-game-center .g-23 .t23-d.down { color: var(--gc-risk); } .gceo-game-center .g-23 .t23-morale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; padding-top: 10px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-23 .t23-sub { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: end; } .gceo-game-center .g-23 .t23-sub > .gc-ic { width: 16px; height: 16px; margin-bottom: 2px; } @container (max-width: 900px) { .gceo-game-center .g-23 .t23-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gceo-game-center .g-23 .t23-morale { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- stepper ---------- */ .gceo-game-center .g-23 .t23-steps { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .gceo-game-center .g-23 .t23-month { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gc-display); font-weight: 600; letter-spacing: .06em; color: var(--gc-white); font-size: 15px; } .gceo-game-center .g-23 .t23-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; gap: 4px; min-width: 0; } .gceo-game-center .g-23 .t23-steps li { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--gc-line-soft); font-size: 12px; color: var(--gc-muted); min-width: 0; } .gceo-game-center .g-23 .t23-step-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gc-line); flex: none; } .gceo-game-center .g-23 .t23-step-ic .gc-ic { width: 12px; height: 12px; vertical-align: 0; } .gceo-game-center .g-23 .t23-step-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gceo-game-center .g-23 .t23-steps li.on { border-color: var(--gc-gold-fill); background: var(--gc-gold-soft); color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-23 .t23-steps li.done { color: var(--gc-emerald-ink); } .gceo-game-center .g-23 .t23-steps li.done .t23-step-ic { border-color: var(--gc-emerald); } .gceo-game-center .g-23 .t23-steps li.done .gc-ic { color: var(--gc-emerald-ink); } @container (max-width: 900px) { .gceo-game-center .g-23 .t23-steps ol { flex-basis: 100%; } .gceo-game-center .g-23 .t23-steps li { justify-content: center; padding: 6px 2px; } .gceo-game-center .g-23 .t23-steps li:not(.on) .t23-step-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gceo-game-center .g-23 .t23-steps li.on { flex: 3; } } /* ---------- phase panel ---------- */ .gceo-game-center .g-23 .t23-phase { gap: 14px; padding: 18px; } .gceo-game-center .g-23 .t23-phase-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--gc-line-soft); } .gceo-game-center .g-23 .t23-next { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--gc-line-soft); } .gceo-game-center .g-23 .t23-acts { display: flex; flex-wrap: wrap; gap: 8px; } .gceo-game-center .g-23 .t23-acts .gc-btn.small, .gceo-game-center .g-23 .t23-prop .gc-btn.small, .gceo-game-center .g-23 .t23-case .gc-btn.small, .gceo-game-center .g-23 .t23-filters .gc-btn { min-height: 44px; } .gceo-game-center .g-23 .t23-resp { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--gc-emerald-ink); } .gceo-game-center .g-23 .t23-resp .gc-ic { color: currentColor; } .gceo-game-center .g-23 .t23-resp.skip { color: var(--gc-muted); } /* initials avatars */ .gceo-game-center .g-23 .t23-av { --t: #cfa15a; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--t); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--t) 28%, transparent), color-mix(in srgb, var(--t) 8%, #121211) 75%); color: #f6efe1; font-family: var(--gc-display); font-weight: 600; font-size: 14px; letter-spacing: .06em; } .gceo-game-center .g-23 .t23-av.sm { width: 32px; height: 32px; font-size: 11px; } .gceo-game-center .g-23 .t23-av.anon { --t: #8a8170; } .gceo-game-center .g-23 .t23-av.anon .gc-ic { width: 15px; height: 15px; vertical-align: 0; color: #cfa15a; } .gceo-game-center .g-23 .t23-tone-0 { --t: #cfa15a; } .gceo-game-center .g-23 .t23-tone-1 { --t: #2f9a74; } .gceo-game-center .g-23 .t23-tone-2 { --t: #b07ac9; } .gceo-game-center .g-23 .t23-tone-3 { --t: #c9785f; } .gceo-game-center .g-23 .t23-tone-4 { --t: #5f9fc9; } .gceo-game-center .g-23 .t23-tone-5 { --t: #a9a192; } .gceo-game-center .g-23 .t23-tone-6 { --t: #d4b45f; } .gceo-game-center .g-23 .t23-tone-7 { --t: #6fbfa8; } .gceo-game-center .g-23 .t23-who { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .gceo-game-center .g-23 .t23-who > div { display: grid; min-width: 0; flex: 1; } .gceo-game-center .g-23 .t23-who b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-23 .t23-who small { color: var(--gc-muted); font-size: 12px; } /* ---------- meeting ---------- */ .gceo-game-center .g-23 .t23-room { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; padding: 16px 12px 12px; border-radius: 999px / 60px; background: radial-gradient(ellipse at center, #1f1d19 0 38%, transparent 39%), var(--gc-surface-2); border: 1px solid var(--gc-line-soft); } .gceo-game-center .g-23 .t23-seat { display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--gc-muted); opacity: .75; transition: opacity .2s, transform .2s; } .gceo-game-center .g-23 .t23-seat.talking { opacity: 1; transform: translateY(-3px); color: var(--gc-white); } .gceo-game-center .g-23 .t23-seat.talking .t23-av { box-shadow: 0 0 0 3px var(--gc-surface-2), 0 0 0 4px var(--gc-gold-fill); } .gceo-game-center .g-23 .t23-opening { display: grid; gap: 8px; padding: 12px 14px; border-left: 2px solid var(--gc-gold-fill); background: var(--gc-surface-2); border-radius: 0 4px 4px 0; } .gceo-game-center .g-23 .t23-quote { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .gceo-game-center .g-23 .t23-quote b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-23 .t23-agenda { display: grid; gap: 12px; } .gceo-game-center .g-23 .t23-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; } .gceo-game-center .g-23 .t23-topic { justify-content: flex-start; text-align: left; min-height: 52px; } .gceo-game-center .g-23 .t23-agenda-on { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gceo-game-center .g-23 .t23-speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; } .gceo-game-center .g-23 .t23-speaker { display: grid; gap: 10px; align-content: start; background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 14px; } .gceo-game-center .g-23 .t23-speaker.answered { border-color: var(--gc-line-soft); } .gceo-game-center .g-23 .t23-said { margin: 0; font-size: 15px; line-height: 1.5; color: var(--gc-ink); padding-left: 12px; border-left: 2px solid var(--gc-gold-fill); } .gceo-game-center .g-23 .t23-follow { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; background: var(--gc-gold-soft); border: 1px solid var(--gc-line); border-radius: 4px; padding: 8px 10px; } .gceo-game-center .g-23 .t23-follow .gc-ic { margin-top: 2px; } .gceo-game-center .g-23 .t23-follow b { color: var(--gc-white); font-weight: 600; } /* ---------- suggestion box ---------- */ .gceo-game-center .g-23 .t23-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; } .gceo-game-center .g-23 .t23-note { --gc-ink: #1d1c19; --gc-muted: #5e584d; --gc-white: #111110; --gc-emerald-ink: #0b4a37; display: grid; gap: 10px; align-content: start; background: #f6f0e3; color: #1d1c19; border-radius: 3px; padding: 16px 16px 14px; box-shadow: inset 0 0 0 4px #f6f0e3, inset 0 0 0 5px rgba(160, 122, 38, .4), 0 8px 18px rgba(0, 0, 0, .35); } .gceo-game-center .g-23 .t23-note:nth-child(odd) { transform: rotate(-.6deg); } .gceo-game-center .g-23 .t23-note:nth-child(even) { transform: rotate(.5deg); } .gceo-game-center .g-23 .t23-note p { font-size: 14.5px; } .gceo-game-center .g-23 .t23-note.done { opacity: .78; } .gceo-game-center .g-23 .t23-note-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8a6418; } .gceo-game-center .g-23 .t23-note-tag .gc-ic { color: #8a6418; width: 14px; height: 14px; vertical-align: 0; } .gceo-game-center .g-23 .t23-note .gc-btn:not(.emerald) { background: #1d1c19; border-color: #1d1c19; color: #efe8da; } .gceo-game-center .g-23 .t23-note .gc-btn.emerald { background: #0f5c45; border-color: #0f5c45; color: #f6efe1; } .gceo-game-center .g-23 .t23-note .gc-btn.emerald .gc-ic { color: #bfe9d6; } .gceo-game-center .g-23 .t23-note .t23-resp .gc-ic { color: currentColor; } .gceo-game-center .g-23 .t23-reply { display: flex; } /* ---------- investigation ---------- */ .gceo-game-center .g-23 .t23-hours { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; border: 1px solid var(--gc-line); border-radius: 999px; padding: 4px 12px; } .gceo-game-center .g-23 .t23-hours b { color: var(--gc-white); } .gceo-game-center .g-23 .t23-inv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px; align-items: start; } @container (max-width: 820px) { .gceo-game-center .g-23 .t23-inv { grid-template-columns: minmax(0, 1fr); } } .gceo-game-center .g-23 .t23-board-col, .gceo-game-center .g-23 .t23-files { display: grid; gap: 10px; align-content: start; min-width: 0; } .gceo-game-center .g-23 .t23-concerns { display: grid; gap: 8px; } .gceo-game-center .g-23 .t23-concern { display: grid; gap: 6px; text-align: left; width: 100%; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 10px 12px; color: var(--gc-ink); min-height: 44px; } .gceo-game-center .g-23 .t23-concern:hover { border-color: var(--gc-line); } .gceo-game-center .g-23 .t23-concern.sel { border-color: var(--gc-gold-fill); box-shadow: inset 3px 0 0 var(--gc-gold-fill); background: var(--gc-gold-soft); } .gceo-game-center .g-23 .t23-concern.confirmed { border-left: 3px solid var(--gc-emerald); } .gceo-game-center .g-23 .t23-concern.refuted .t23-concern-txt { text-decoration: line-through; text-decoration-color: var(--gc-risk); } .gceo-game-center .g-23 .t23-concern-top { display: flex; gap: 10px; align-items: center; } .gceo-game-center .g-23 .t23-concern-txt { font-size: 14px; font-weight: 500; } .gceo-game-center .g-23 .t23-concern-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gceo-game-center .g-23 .t23-root { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gc-emerald-ink); font-weight: 500; } .gceo-game-center .g-23 .t23-root.bad { color: var(--gc-risk); } .gceo-game-center .g-23 .t23-root .gc-ic { color: currentColor; width: 14px; height: 14px; vertical-align: 0; } .gceo-game-center .g-23 .t23-reps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .gceo-game-center .g-23 .t23-rep { justify-content: flex-start; min-height: 44px; text-align: left; } .gceo-game-center .g-23 .t23-rep span { flex: 1; } .gceo-game-center .g-23 .t23-rep small { font-size: 11px; color: var(--gc-muted); } .gceo-game-center .g-23 .t23-selnote { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--gc-muted); } .gceo-game-center .g-23 .t23-selnote b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-23 .t23-rep-empty { display: flex; gap: 8px; align-items: center; padding: 18px; border: 1px dashed var(--gc-line); border-radius: var(--gc-r); } .gceo-game-center .g-23 .t23-report { --gc-ink: #1d1c19; --gc-muted: #5e584d; --gc-white: #111110; --gc-gold: #8a6418; background: #f6f0e3; color: #1d1c19; border-radius: 3px; padding: 14px 16px; display: grid; gap: 8px; box-shadow: inset 0 0 0 4px #f6f0e3, inset 0 0 0 5px rgba(160, 122, 38, .4); } .gceo-game-center .g-23 .t23-report ul { list-style: none; margin: 0; padding: 0; display: grid; } .gceo-game-center .g-23 .t23-report li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(29, 28, 25, .12); font-size: 14px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-23 .t23-report li:last-child { border-bottom: 0; } .gceo-game-center .g-23 .t23-report .gc-btn { flex: none; min-height: 44px; background: #1d1c19; border-color: #1d1c19; color: #efe8da; } .gceo-game-center .g-23 .t23-report .gc-btn .gc-ic { color: #cfa15a; } .gceo-game-center .g-23 .t23-diag { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--gc-line); border-radius: var(--gc-r); background: var(--gc-surface-2); } .gceo-game-center .g-23 .t23-diag .gc-pill { white-space: normal; } /* ---------- reset ---------- */ .gceo-game-center .g-23 .t23-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; } .gceo-game-center .g-23 .t23-case { display: grid; gap: 10px; align-content: start; background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: var(--gc-r); padding: 14px; } .gceo-game-center .g-23 .t23-case.closed.best { border-color: var(--gc-emerald); } .gceo-game-center .g-23 .t23-case.closed.bad { border-color: var(--gc-risk); } .gceo-game-center .g-23 .t23-case > .gc-btn { justify-self: start; } .gceo-game-center .g-23 .t23-facts { font-size: 14px; } .gceo-game-center .g-23 .t23-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: 6px; } .gceo-game-center .g-23 .t23-action { justify-content: flex-start; text-align: left; min-height: 48px; } .gceo-game-center .g-23 .t23-action span { display: grid; line-height: 1.25; } .gceo-game-center .g-23 .t23-action small { font-size: 11px; color: var(--gc-muted); font-weight: 400; } .gceo-game-center .g-23 .t23-outcome { display: grid; gap: 4px; padding: 10px 12px; border-radius: 4px; background: var(--gc-surface-3); border-left: 2px solid var(--gc-line); font-size: 14px; } .gceo-game-center .g-23 .t23-outcome b { display: flex; gap: 8px; align-items: center; color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-23 .t23-outcome.best { border-left-color: var(--gc-emerald); background: var(--gc-emerald-soft); } .gceo-game-center .g-23 .t23-outcome.best .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-23 .t23-outcome.ok { border-left-color: var(--gc-warn); background: var(--gc-warn-soft); } .gceo-game-center .g-23 .t23-outcome.bad { border-left-color: var(--gc-risk); background: var(--gc-risk-soft); } .gceo-game-center .g-23 .t23-outcome.bad .gc-ic { color: var(--gc-risk); } /* ---------- decision board ---------- */ .gceo-game-center .g-23 .t23-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; border: 1px solid var(--gc-line); border-radius: 999px; padding: 4px 12px; } .gceo-game-center .g-23 .t23-cap b { color: var(--gc-white); } .gceo-game-center .g-23 .t23-budget { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 13.5px; padding: 10px 14px; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); } .gceo-game-center .g-23 .t23-budget > span { display: inline-flex; gap: 6px; align-items: center; } .gceo-game-center .g-23 .t23-budget b { color: var(--gc-white); font-variant-numeric: tabular-nums; } .gceo-game-center .g-23 .t23-filters { display: flex; flex-wrap: wrap; gap: 6px; } .gceo-game-center .g-23 .t23-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; } .gceo-game-center .g-23 .t23-prop, .gceo-game-center .g-23 .t23-item { display: grid; gap: 9px; align-content: start; background: var(--gc-surface-2); border: 1px solid var(--gc-line-soft); border-radius: var(--gc-r); padding: 14px; } .gceo-game-center .g-23 .t23-prop.on { border-color: var(--gc-gold-fill); box-shadow: inset 0 0 0 1px var(--gc-gold-fill); } .gceo-game-center .g-23 .t23-prop .gc-pill { justify-self: start; white-space: normal; } .gceo-game-center .g-23 .t23-prop > .gc-btn { justify-self: stretch; margin-top: auto; } .gceo-game-center .g-23 .t23-prop-top { display: flex; gap: 10px; align-items: center; } .gceo-game-center .g-23 .t23-prop-top h4 { font-family: var(--gc-body); font-size: 14.5px; letter-spacing: 0; font-weight: 600; color: var(--gc-white); } .gceo-game-center .g-23 .t23-by { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--gc-muted); } .gceo-game-center .g-23 .t23-prop-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .gceo-game-center .g-23 .t23-prop-nums span { display: grid; padding: 6px 8px; background: var(--gc-surface); border: 1px solid var(--gc-line-soft); border-radius: 4px; min-width: 0; } .gceo-game-center .g-23 .t23-prop-nums small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-muted); font-weight: 600; } .gceo-game-center .g-23 .t23-prop-nums b { font-size: 14px; color: var(--gc-white); font-variant-numeric: tabular-nums; font-weight: 600; } .gceo-game-center .g-23 .t23-prop-nums b.risk-high { color: var(--gc-risk); } .gceo-game-center .g-23 .t23-prop-nums b.risk-medium { color: var(--gc-warn); } .gceo-game-center .g-23 .t23-eff { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--gc-muted); } .gceo-game-center .g-23 .t23-eff .gc-ic { margin-top: 2px; width: 15px; height: 15px; } .gceo-game-center .g-23 .t23-eff.good { color: var(--gc-ink); } .gceo-game-center .g-23 .t23-eff b { color: var(--gc-white); } /* ---------- plan ---------- */ .gceo-game-center .g-23 .t23-items { display: grid; gap: 12px; } .gceo-game-center .g-23 .t23-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.5fr); gap: 10px; } @container (max-width: 760px) { .gceo-game-center .g-23 .t23-fields { grid-template-columns: minmax(0, 1fr); } } .gceo-game-center .g-23 .t23-field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-muted); min-width: 0; } .gceo-game-center .g-23 .t23-field select { width: 100%; min-height: 44px; font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--gc-ink); background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 4px; padding: 8px 10px; } .gceo-game-center .g-23 .t23-field select:focus-visible { outline: 2px solid var(--gc-gold-fill); } .gceo-game-center .g-23 .t23-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--gc-warn); } .gceo-game-center .g-23 .t23-why li { display: flex; gap: 6px; align-items: center; } .gceo-game-center .g-23 .t23-why .gc-ic { color: currentColor; width: 14px; height: 14px; vertical-align: 0; } /* ---------- follow-up ---------- */ .gceo-game-center .g-23 .t23-advance { display: grid; gap: 14px; justify-items: center; padding: 18px 0; } .gceo-game-center .g-23 .t23-clock { width: min(100%, 360px); display: grid; gap: 6px; text-align: center; } .gceo-game-center .g-23 .t23-day b { font-family: var(--gc-display); font-size: 22px; color: var(--gc-white); } .gceo-game-center .g-23 .t23-follow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; } .gceo-game-center .g-23 .t23-follow-grid > div { display: grid; gap: 10px; min-width: 0; } .gceo-game-center .g-23 .t23-pl { --gc-ink: #1d1c19; --gc-muted: #5e584d; --gc-white: #111110; --gc-gold: #8a6418; background: #f6f0e3; color: #1d1c19; border-radius: 3px; padding: 14px 16px; box-shadow: inset 0 0 0 4px #f6f0e3, inset 0 0 0 5px rgba(160, 122, 38, .4); } .gceo-game-center .g-23 .t23-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .gceo-game-center .g-23 .t23-table td { padding: 6px 0; border-bottom: 1px solid rgba(29, 28, 25, .12); } .gceo-game-center .g-23 .t23-table td:last-child { text-align: right; white-space: nowrap; padding-left: 10px; } .gceo-game-center .g-23 .t23-table tr.tot td { font-weight: 700; border-top: 1.5px solid #1d1c19; } .gceo-game-center .g-23 .t23-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; } .gceo-game-center .g-23 .t23-track li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-radius: 4px; background: var(--gc-surface-2); border-left: 2px solid var(--gc-line-soft); } .gceo-game-center .g-23 .t23-track li > span { display: grid; gap: 2px; min-width: 0; } .gceo-game-center .g-23 .t23-track li .gc-ic { margin-top: 2px; } .gceo-game-center .g-23 .t23-track small { color: var(--gc-muted); font-size: 12px; } .gceo-game-center .g-23 .t23-track b { color: var(--gc-white); font-weight: 600; } .gceo-game-center .g-23 .t23-track li.done { border-left-color: var(--gc-emerald); } .gceo-game-center .g-23 .t23-track li.done .gc-ic { color: var(--gc-emerald-ink); } .gceo-game-center .g-23 .t23-track li.late { border-left-color: var(--gc-warn); } .gceo-game-center .g-23 .t23-track li.late .gc-ic { color: var(--gc-warn); } .gceo-game-center .g-23 .t23-track li.miss { border-left-color: var(--gc-risk); } .gceo-game-center .g-23 .t23-track li.miss .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-23 .t23-cons { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--gc-line); border-radius: var(--gc-r); background: var(--gc-surface-2); font-size: 14px; } .gceo-game-center .g-23 .t23-cons b { color: var(--gc-white); } .gceo-game-center .g-23 .t23-reveal { display: grid; gap: 10px; } @container (max-width: 520px) { .gceo-game-center .g-23 .t23-phase { padding: 14px 12px; } .gceo-game-center .g-23 .t23-dash { padding: 12px; } .gceo-game-center .g-23 .t23-next { justify-content: stretch; } .gceo-game-center .g-23 .t23-next .gc-btn { width: 100%; } .gceo-game-center .g-23 .t23-report li { flex-direction: column; align-items: stretch; gap: 6px; } .gceo-game-center .g-23 .t23-report li .gc-btn { align-self: flex-end; } .gceo-game-center .g-23 .t23-room { border-radius: 16px; gap: 8px; } .gceo-game-center .g-23 .t23-av:not(.sm) { width: 38px; height: 38px; font-size: 12px; } } .gceo-game-center .g-23 .t23-topic-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gc-gold); } .gceo-game-center .g-23 .t23-topic-tag .gc-ic { width: 13px; height: 13px; vertical-align: 0; } .gceo-game-center .g-23 .t23-topic-tag.bad, .gceo-game-center .g-23 .t23-topic-tag.bad .gc-ic { color: var(--gc-risk); } .gceo-game-center .g-23 .t23-goal { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; } .gceo-game-center .g-23 .t23-goal .gc-ic { margin-top: 2px; width: 15px; height: 15px; }