/* Knight Shift: chess. Neon board in a walnut rail, cream/amber White, dark/cyan Black. Mobile first at 390px; squares shrink on narrower phones. */ .ks { --sq: min(45px, calc((100vw - 30px) / 8)); --ks-cream: #fff4d6; --ks-amber: #ffbf3f; --ks-cyan: #53e0ff; --ks-red: #ff4a5e; --ks-muted: #c9b891; --ks-dim: #8a6a2a; color: var(--ks-amber); display: flex; flex-direction: column; font-family: 'VT323', monospace; gap: .7rem; margin: 0 auto; max-width: 26rem; padding: .25rem 0 1rem; } .loyalty-site .ks h1, .loyalty-site .ks h2, .loyalty-site .ks p { margin: 0; } .loyalty-site .ks h1, .loyalty-site .ks h2 { font-family: 'VT323', monospace; font-weight: 400; letter-spacing: 0; text-transform: none; } /* House buttons are pills; the board's own buttons start from nothing. */ .loyalty-site .ks :is(.ks-btn, .ks-sq, .ks-promo-choice, .ks-promo-cancel, .ks-chicken) { box-shadow: none; font-weight: 400; letter-spacing: normal; text-transform: none; } .loyalty-site .ks .ks-find input[type=text] { min-width: 0; width: auto; } .loyalty-site .ks .ks-find button { flex: none; width: auto; } .loyalty-site .ks .ks-top { display: flex; justify-content: space-between; } .loyalty-site .ks .arcade-back-link { font-size: 1.25rem; text-decoration: none; } .loyalty-site .ks .ks-sign { color: #e6fbff; font-family: 'Yellowtail', cursive; font-size: 3.1rem; font-weight: 400; line-height: 1; text-shadow: 0 0 2px #b8f3ff, 0 0 8px var(--ks-cyan), 0 0 18px rgba(83,224,255,.8), 0 0 36px rgba(83,224,255,.45); } .loyalty-site .ks .ks-sign-small { font-size: 2rem; text-align: center; } .loyalty-site .ks .ks-dim { color: var(--ks-dim); } .loyalty-site .ks .ks-fine { color: var(--ks-dim); font-size: 1.1rem; line-height: 1.2; text-align: center; } .loyalty-site .ks .ks-center { text-align: center; } .loyalty-site .ks .ks-empty { color: var(--ks-muted); font-size: 1.15rem; } .loyalty-site .ks .ks-face { border-radius: 50%; box-shadow: 0 0 0 2px var(--ks-cyan), 0 0 10px rgba(83,224,255,.5); height: 3rem; object-fit: cover; width: 3rem; } .loyalty-site .ks .ks-face.is-amber { box-shadow: 0 0 0 2px var(--ks-amber), 0 0 12px rgba(255,191,63,.6); } .loyalty-site .ks .ks-face.is-small { height: 2.4rem; width: 2.4rem; } .loyalty-site .ks .ks-face.is-large { height: 4.2rem; width: 4.2rem; } .loyalty-site .ks .ks-face-blank { align-items: center; background: radial-gradient(circle at 50% 40%, #1b2a48, #0b1224); color: var(--ks-cyan); display: inline-flex; font-size: 1.6rem; justify-content: center; } .loyalty-site .ks .ks-section-head { align-items: baseline; display: flex; justify-content: space-between; } .loyalty-site .ks .ks-section-head h2 { color: var(--ks-cyan); font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .16em; } .loyalty-site .ks .ks-section-head span { color: var(--ks-dim); font-size: 1.15rem; } /* ---- home ---- */ .loyalty-site .ks .ks-home-head { align-items: center; display: flex; justify-content: space-between; gap: .5rem; } .loyalty-site .ks .ks-elo-box { align-items: center; background: #050608; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(83,224,255,.35); display: flex; flex-direction: column; line-height: 1; padding: .35rem .7rem; } .loyalty-site .ks .ks-elo-box small { color: var(--ks-muted); font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .12em; } .loyalty-site .ks .ks-elo-box b { color: #e6fbff; font-size: 2.2rem; font-weight: 400; text-shadow: 0 0 8px rgba(83,224,255,.7); } .loyalty-site .ks .ks-cards { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .loyalty-site .ks .ks-card { border: 2px solid var(--ks-amber); border-radius: 6px; box-shadow: 0 0 12px rgba(255,191,63,.25); display: flex; flex-direction: column; gap: .5rem; padding: .6rem; } .loyalty-site .ks .ks-card p { color: var(--ks-cream); font-size: 1.15rem; line-height: 1.12; } .loyalty-site .ks .ks-card-challenge { border-color: var(--ks-cyan); box-shadow: 0 0 12px rgba(83,224,255,.3); } .loyalty-site .ks .ks-card-challenge p { color: var(--ks-cyan); } .loyalty-site .ks .ks-bernie-id { align-items: center; display: flex; gap: .5rem; } .loyalty-site .ks .ks-bernie-id h2 { color: var(--ks-cream); font-size: 1.6rem; font-weight: 400; line-height: 1; } .loyalty-site .ks .ks-bernie-id span { color: var(--ks-dim); font-size: 1.1rem; } .loyalty-site .ks .ks-card form { display: contents; } .loyalty-site .ks .ks-card-button { margin-top: auto; width: 100%; } .loyalty-site .ks .ks-card-foot { color: var(--ks-dim); font-size: 1.05rem; text-align: center; } .loyalty-site .ks .ks-card-foot.is-cyan { color: #3f7d86; } .loyalty-site .ks .ks-card-record { color: var(--ks-muted); font-size: .95rem; text-align: center; } .loyalty-site .ks .ks-faces { align-items: center; display: flex; } .loyalty-site .ks .ks-faces .ks-face { margin-right: -.55rem; } .loyalty-site .ks .ks-face-add { align-items: center; border: 2px dashed var(--ks-cyan); box-shadow: none; color: var(--ks-cyan); display: inline-flex; font-size: 1.8rem; justify-content: center; text-decoration: none; } .loyalty-site .ks .ks-challenger { align-items: center; border: 2px solid var(--ks-red); box-shadow: 0 0 14px rgba(255,74,94,.45), inset 0 0 12px rgba(255,74,94,.12); display: flex; gap: .6rem; padding: .55rem; } .loyalty-site .ks .ks-challenger > img, .loyalty-site .ks .ks-challenger > .ks-face-blank { border-radius: 4px; height: 3.4rem; object-fit: cover; width: 3.4rem; } .loyalty-site .ks .ks-challenger-text { display: flex; flex: 1; flex-direction: column; line-height: 1.05; min-width: 0; } .loyalty-site .ks .ks-challenger-text strong { color: #ff8a98; font-size: 1.4rem; font-weight: 400; text-shadow: 0 0 8px rgba(255,74,94,.8); } .loyalty-site .ks .ks-challenger-text span { color: var(--ks-cream); font-size: 1.2rem; } .loyalty-site .ks .ks-decline-link { color: var(--ks-muted) !important; font-size: 1.1rem; } .loyalty-site .ks .ks-fight { min-width: 5.5rem; } .loyalty-site .ks .ks-game-row { align-items: center; border: 2px solid rgba(255,191,63,.45); border-radius: 6px; color: inherit; display: flex; gap: .55rem; margin-top: .45rem; padding: .3rem .45rem; text-decoration: none; } .loyalty-site .ks .ks-game-row.is-hot { border-color: var(--ks-amber); box-shadow: 0 0 10px rgba(255,191,63,.3); } .loyalty-site .ks .ks-game-row-text { display: flex; flex: 1; flex-direction: column; line-height: 1.05; min-width: 0; } .loyalty-site .ks .ks-game-row-text b { color: var(--ks-cream); font-size: 1.45rem; font-weight: 400; } .loyalty-site .ks .ks-game-row-text small { color: var(--ks-dim); font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .loyalty-site .ks .ks-game-row-status { color: var(--ks-cyan); font-size: 1.25rem; white-space: nowrap; } .loyalty-site .ks .ks-game-row.is-hot .ks-game-row-status { background: var(--ks-amber); border-radius: 3px; color: #1a1000; padding: 0 .35rem; } .loyalty-site .ks .ks-mini { display: grid; flex: none; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); height: 2.6rem; width: 2.6rem; box-shadow: 0 0 0 1px rgba(83,224,255,.5); } .loyalty-site .ks .ks-mini i { background: #34476d; position: relative; } .loyalty-site .ks .ks-mini i.d { background: #111a2d; } .loyalty-site .ks .ks-mini i.w::after, .loyalty-site .ks .ks-mini i.b::after { border-radius: 1px; content: ''; inset: 22%; position: absolute; } .loyalty-site .ks .ks-mini i.w::after { background: var(--ks-amber); box-shadow: 0 0 3px var(--ks-amber); } .loyalty-site .ks .ks-mini i.b::after { background: var(--ks-cyan); box-shadow: 0 0 3px var(--ks-cyan); } .loyalty-site .ks .ks-recent { display: flex; flex-direction: column; gap: .3rem; list-style: none; margin: .35rem 0 0; padding: 0; } .loyalty-site .ks .ks-recent li, .loyalty-site .ks .ks-recent a { align-items: center; color: inherit; display: flex; gap: .55rem; text-decoration: none; } .loyalty-site .ks .ks-recent a { width: 100%; } .loyalty-site .ks .ks-letter { align-items: center; border: 1.5px solid; border-radius: 3px; display: inline-flex; flex: none; font-size: 1.3rem; font-style: normal; height: 1.9rem; justify-content: center; width: 1.9rem; } .loyalty-site .ks .ks-letter.is-win { background: var(--ks-amber); border-color: var(--ks-amber); color: #1a1000; } .loyalty-site .ks .ks-letter.is-loss { border-color: var(--ks-red); color: #ff8a98; } .loyalty-site .ks .ks-letter.is-draw { border-color: var(--ks-cyan); color: var(--ks-cyan); } .loyalty-site .ks .ks-letter.is-muted { border-color: #3a4866; color: #6a7896; } .loyalty-site .ks .ks-recent-text { color: var(--ks-cream); flex: 1; font-size: 1.3rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .loyalty-site .ks .ks-recent-delta { font-size: 1.25rem; white-space: nowrap; } .loyalty-site .ks .ks-recent-delta.is-win, .loyalty-site .ks .ks-recent-delta.is-draw { color: var(--ks-cyan); } .loyalty-site .ks .ks-recent-delta.is-loss { color: #ff8a98; } .loyalty-site .ks .ks-recent-delta.is-muted { color: var(--ks-dim); } .loyalty-site .ks .ks-recent.is-compact .ks-recent-text { font-size: 1.2rem; } .loyalty-site .ks .ks-letters { display: flex; gap: .25rem; } .loyalty-site .ks .ks-letters .ks-letter { font-size: 1.05rem; height: 1.5rem; width: 1.5rem; } /* ---- new challenge ---- */ .loyalty-site .ks .ks-pick-row { display: grid; gap: .4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: .5rem 0; padding: 0; } .loyalty-site .ks .ks-pick-row a { align-items: center; color: var(--ks-cream); display: flex; flex-direction: column; font-size: 1.3rem; line-height: 1; text-decoration: none; } .loyalty-site .ks .ks-pick-row img, .loyalty-site .ks .ks-pick-row .ks-face-blank, .loyalty-site .ks .ks-pick-row .ks-face-add { border-radius: 50%; box-shadow: 0 0 0 2px #2f7f93; height: 4rem; object-fit: cover; width: 4rem; } .loyalty-site .ks .ks-pick-row a.is-picked img { box-shadow: 0 0 0 3px var(--ks-amber), 0 0 14px rgba(255,191,63,.8); } .loyalty-site .ks .ks-pick-row b { font-weight: 400; margin-top: .35rem; } .loyalty-site .ks .ks-pick-row small { color: #3f7d86; font-size: 1.1rem; } .loyalty-site .ks .ks-anyone { color: var(--ks-dim) !important; } .loyalty-site .ks .ks-find { display: flex; gap: .5rem; } .loyalty-site .ks .ks-find input[type=text] { flex: 1; font-family: 'VT323', monospace; font-size: 1.35rem; } .loyalty-site .ks .ks-versus { border: 2px solid var(--ks-amber); border-radius: 6px; box-shadow: 0 0 12px rgba(255,191,63,.3); padding: .6rem .7rem; } .loyalty-site .ks .ks-versus-row { align-items: center; display: flex; justify-content: space-between; } .loyalty-site .ks .ks-versus-side { align-items: center; display: flex; gap: .5rem; } .loyalty-site .ks .ks-versus-side span { display: flex; flex-direction: column; line-height: 1; } .loyalty-site .ks .ks-versus-side.is-them span { align-items: flex-end; } .loyalty-site .ks .ks-versus-side b { color: var(--ks-cream); font-size: 1.6rem; font-weight: 400; } .loyalty-site .ks .ks-versus-side small { color: var(--ks-cyan); font-size: 1.4rem; } .loyalty-site .ks .ks-vs { color: #ffe6e9; font-family: 'Yellowtail', cursive; font-size: 2rem; font-weight: 400; text-shadow: 0 0 8px var(--ks-red); } .loyalty-site .ks .ks-h2h { border-bottom: 1px solid rgba(255,191,63,.3); display: flex; justify-content: space-between; margin: .5rem 0; padding-bottom: .4rem; } .loyalty-site .ks .ks-h2h span { color: var(--ks-dim); font-size: 1.2rem; } .loyalty-site .ks .ks-h2h b { color: var(--ks-cream); font-size: 1.2rem; font-weight: 400; } .loyalty-site .ks .ks-stake-row { display: flex; font-size: 1.35rem; justify-content: space-around; } .loyalty-site .ks .is-win { color: var(--ks-cyan); } .loyalty-site .ks .is-draw { color: var(--ks-muted); } .loyalty-site .ks .is-loss { color: #ff8a98; } .loyalty-site .ks .ks-rules p { color: var(--ks-muted); font-size: 1.2rem; line-height: 1.15; margin-bottom: .5rem; } .loyalty-site .ks .ks-rules b { color: var(--ks-cream); font-weight: 400; } .loyalty-site .ks .ks-big-fight { display: flex; flex-direction: column; min-height: 3.6rem; width: 100%; } .loyalty-site .ks .ks-big-fight b { font-size: 1.1rem; letter-spacing: .2em; } .loyalty-site .ks .ks-big-fight small { font-family: 'VT323', monospace; font-size: 1.15rem; font-weight: 400; letter-spacing: .04em; } /* ---- incoming ---- */ .loyalty-site .ks .ks-banner { color: #ff9aa8; font-size: 2.6rem; font-weight: 400; letter-spacing: .06em; text-align: center; text-shadow: 0 0 6px var(--ks-red), 0 0 18px rgba(255,46,77,.7); } .loyalty-site .ks .ks-challenger-card { align-items: flex-start; display: flex; gap: .8rem; } .loyalty-site .ks .ks-big-portrait { border-radius: 8px; box-shadow: 0 0 0 3px var(--ks-red), 0 0 14px rgba(255,74,94,.6); flex: none; height: 9rem; object-fit: cover; width: 9rem; } .loyalty-site .ks .ks-challenger-facts { display: flex; flex-direction: column; font-size: 1.15rem; gap: .1rem; line-height: 1.1; min-width: 0; } .loyalty-site .ks .ks-challenger-facts h2 { color: var(--ks-cream); font-size: 1.9rem; font-weight: 400; line-height: 1; text-transform: uppercase; } .loyalty-site .ks .ks-handle { color: var(--ks-dim); } .loyalty-site .ks .ks-elo { color: var(--ks-cyan); font-size: 1.7rem; font-weight: 400; } .loyalty-site .ks .ks-terms { border: 2px solid var(--ks-amber); border-radius: 6px; box-shadow: 0 0 12px rgba(255,191,63,.3); margin: 0; padding: .45rem .7rem; } .loyalty-site .ks .ks-terms div { display: grid; font-size: 1.2rem; grid-template-columns: 6.5rem 1fr; line-height: 1.35; } .loyalty-site .ks .ks-terms dt { color: var(--ks-dim); } .loyalty-site .ks .ks-terms dd { color: var(--ks-cream); margin: 0; } .loyalty-site .ks .ks-terms dd.is-win { color: var(--ks-cyan); } .loyalty-site .ks .ks-terms dd.is-loss { color: #ff8a98; } .loyalty-site .ks .ks-decline summary { align-items: center; color: var(--ks-dim); cursor: pointer; display: flex; font-size: 1.1rem; gap: .6rem; line-height: 1.15; list-style: none; } .loyalty-site .ks .ks-decline summary::-webkit-details-marker { display: none; } .loyalty-site .ks .ks-decline summary b { color: var(--ks-amber); font-weight: 400; } .loyalty-site .ks .ks-decline summary u { color: var(--ks-muted); font-size: 1.35rem; } .loyalty-site .ks .ks-chicken { background: transparent; border: 2px solid var(--ks-red); border-radius: 999px; color: #ff8a98; cursor: pointer; font-family: 'Silkscreen', monospace; font-size: .7rem; margin-top: .5rem; min-height: 2.75rem; width: 100%; } .loyalty-site .ks .ks-waiting, .loyalty-site .ks .ks-closed { color: var(--ks-cream); font-size: 1.3rem; text-align: center; } /* ---- the board page ---- */ .loyalty-site .ks.ks-game { gap: .32rem; } .loyalty-site .ks .ks-game-head { align-items: center; display: grid; grid-template-columns: 5rem 1fr 5rem; } .loyalty-site .ks .ks-mode { align-items: flex-end; display: flex; flex-direction: column; line-height: 1; } .loyalty-site .ks .ks-mode b { color: var(--ks-cream); font-size: 1.2rem; font-weight: 400; white-space: nowrap; } .loyalty-site .ks .ks-mode small { color: var(--ks-dim); font-family: 'Silkscreen', monospace; font-size: .5rem; } .loyalty-site .ks .ks-mode small.is-rated { color: var(--ks-cyan); } .loyalty-site .ks .ks-player { align-items: center; display: flex; gap: .55rem; min-height: 2.8rem; padding: 0 .1rem; } .loyalty-site .ks .ks-portrait, .loyalty-site .ks .ks-portrait-wrap .ks-face-blank { border-radius: 50%; box-shadow: 0 0 0 2px #2a3550; display: block; filter: saturate(.7) brightness(.8); height: 2.65rem; object-fit: cover; width: 2.65rem; } .loyalty-site .ks .ks-player.is-active .ks-portrait { box-shadow: 0 0 0 2px var(--ks-amber), 0 0 12px rgba(255,191,63,.8); filter: none; } .loyalty-site .ks .ks-portrait-wrap { flex: none; } .loyalty-site .ks .ks-portrait-wrap .ks-face-blank { align-items: center; display: flex; justify-content: center; } .loyalty-site .ks .ks-player-text { flex: 1; line-height: 1; min-width: 0; } .loyalty-site .ks .ks-player-name { align-items: center; color: var(--ks-cream); display: flex; font-size: 1.4rem; gap: .35rem; overflow: hidden; white-space: nowrap; } .loyalty-site .ks .ks-side-icon { height: 1rem; width: 1rem; } .loyalty-site .ks .ks-player-line { align-items: center; display: flex; font-size: 1.1rem; gap: .35rem; margin-top: .2rem; white-space: nowrap; } .loyalty-site .ks .ks-rating { color: var(--ks-cyan); } .loyalty-site .ks .ks-caps { align-items: center; display: flex; } .loyalty-site .ks .ks-cap { height: 1.1rem; width: 1.1rem; } .loyalty-site .ks .ks-cap.is-stacked { margin-left: -.45rem; } .loyalty-site .ks .ks-player[data-side=black] .ks-cap { filter: drop-shadow(0 0 2px rgba(83,224,255,.9)); } .loyalty-site .ks .ks-player[data-side=white] .ks-cap { filter: drop-shadow(0 0 2px rgba(83,224,255,.9)); } .loyalty-site .ks .ks-cap-count, .loyalty-site .ks .ks-plus { color: var(--ks-muted); font-size: 1rem; } .loyalty-site .ks .ks-clock { align-items: center; background: #050608; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,191,63,.2); display: flex; flex: none; flex-direction: column; height: 2.65rem; justify-content: center; line-height: .9; width: 5.75rem; } .loyalty-site .ks .ks-clock small { color: #5a6a80; font-family: 'Silkscreen', monospace; font-size: .45rem; letter-spacing: .06em; } .loyalty-site .ks .ks-clock b { color: #6a5a3a; font-size: 1.9rem; font-weight: 400; } .loyalty-site .ks .ks-clock.is-running { box-shadow: inset 0 0 0 1.5px #ff4a3a, 0 0 12px rgba(255,74,58,.45); } .loyalty-site .ks .ks-clock.is-running small { color: #ff8a98; } .loyalty-site .ks .ks-clock.is-running b { color: #ffe0da; text-shadow: 0 0 6px #ff4a3a, 0 0 14px rgba(255,74,58,.6); } .loyalty-site .ks .ks-clock.is-low b { animation: ks-blink 1s steps(1) infinite; color: #ff4a3a; } .loyalty-site .ks .ks-bubble { background: #10182a; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(83,224,255,.45); color: var(--ks-cream); font-size: 1.15rem; line-height: 1.05; margin: -.2rem 0 0 3.2rem; padding: .2rem .55rem; position: relative; } .loyalty-site .ks .ks-bubble::before { border-bottom: 5px solid transparent; border-right: 6px solid rgba(83,224,255,.6); border-top: 5px solid transparent; content: ''; left: -6px; position: absolute; top: .45rem; } .loyalty-site .ks .ks-walnut { align-self: center; background-image: linear-gradient(180deg, rgba(255,230,190,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,.45)), linear-gradient(90deg, #5a3217, #7a4722 30%, #4d2a12 60%, #6d3d1c); border-radius: 7px; box-shadow: 0 0 0 1px #000, 0 12px 30px rgba(0,0,0,.7), 0 0 26px rgba(83,224,255,.12); padding: 6px; position: relative; } .loyalty-site .ks .ks-board { box-shadow: 0 0 0 2px rgba(83,224,255,.55), 0 0 16px rgba(83,224,255,.3); display: grid; grid-template-columns: repeat(8, var(--sq)); grid-template-rows: repeat(8, var(--sq)); } .loyalty-site .ks .ks-sq { align-items: center; background: #34476d; border: 0; border-radius: 0; box-shadow: inset 0 0 0 .5px rgba(83,224,255,.08); cursor: default; display: flex; height: var(--sq); justify-content: center; min-height: 0; padding: 0; position: relative; transition: background 90ms; width: var(--sq); } .loyalty-site .ks .ks-sq.is-dark { background: #111a2d; box-shadow: inset 0 0 10px rgba(0,0,0,.35); } .loyalty-site .ks .ks-sq.is-movable, .loyalty-site .ks .ks-sq:has(.ks-dot) { cursor: pointer; } .loyalty-site .ks .ks-sq.is-last { background: #6a5528; box-shadow: inset 0 0 0 2px rgba(255,191,63,.55), inset 0 0 12px rgba(255,191,63,.35); } .loyalty-site .ks .ks-sq.is-dark.is-last { background: #4a3a18; } .loyalty-site .ks .ks-sq.is-sel { background: #1f5a6e; box-shadow: inset 0 0 0 2px var(--ks-cyan), inset 0 0 14px rgba(83,224,255,.6); } .loyalty-site .ks .ks-sq.is-dark.is-sel { background: #15475a; } .loyalty-site .ks .ks-sq.is-check { background: radial-gradient(circle at 50% 55%, #ff6a7a 0%, #e0203c 38%, rgba(120,10,30,.9) 62%, #3a0a14 100%); box-shadow: inset 0 0 0 2px var(--ks-red), 0 0 18px rgba(255,46,77,.95), 0 0 34px rgba(255,46,77,.5); z-index: 2; } .loyalty-site .ks .ks-sq:focus-visible { outline: 2px solid var(--ks-cream); outline-offset: -2px; z-index: 3; } .loyalty-site .ks .ks-piece { display: block; filter: drop-shadow(0 0 2px rgba(83,224,255,.95)) drop-shadow(0 0 6px rgba(83,224,255,.5)); height: 92%; pointer-events: none; position: relative; width: 92%; z-index: 1; } .loyalty-site .ks .ks-piece.is-white { filter: drop-shadow(0 0 2px rgba(255,191,63,.9)) drop-shadow(0 0 6px rgba(255,191,63,.45)); } .loyalty-site .ks .ks-sq.is-check .ks-piece { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #ff2e4d); } .loyalty-site .ks .ks-dot { background: var(--ks-cyan); border-radius: 50%; box-shadow: 0 0 6px var(--ks-cyan), 0 0 12px rgba(83,224,255,.7); height: 30%; pointer-events: none; position: absolute; width: 30%; z-index: 2; } .loyalty-site .ks .ks-dot.is-ring { background: transparent; box-shadow: inset 0 0 0 3px var(--ks-cyan), 0 0 10px rgba(83,224,255,.8); height: auto; inset: 3px; width: auto; } .loyalty-site .ks .ks-rank, .loyalty-site .ks .ks-file { color: rgba(83,224,255,.45); font-size: 12px; line-height: 1; pointer-events: none; position: absolute; } .loyalty-site .ks .ks-sq.is-light .ks-rank, .loyalty-site .ks .ks-sq.is-light .ks-file { color: rgba(20,29,51,.9); } .loyalty-site .ks .ks-rank { left: 2px; top: 1px; } .loyalty-site .ks .ks-file { bottom: 0; right: 2px; } .loyalty-site .ks .ks-promo { align-items: center; background: rgba(5,7,12,.62); display: flex; inset: 0; justify-content: center; position: absolute; z-index: 5; } .loyalty-site .ks .ks-promo[hidden] { display: none; } .loyalty-site .ks .ks-promo-box { align-items: center; background: #070b14; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--ks-amber), 0 0 20px rgba(255,191,63,.45); display: flex; flex-direction: column; gap: .5rem; padding: .6rem .75rem .75rem; } .loyalty-site .ks .ks-promo-title { color: var(--ks-amber); font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .12em; } .loyalty-site .ks .ks-promo-choices { display: grid; gap: .5rem; grid-template-columns: repeat(4, 4.1rem); } .loyalty-site .ks .ks-promo-choice { align-items: center; background: #10182a; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(83,224,255,.45); cursor: pointer; display: flex; flex-direction: column; gap: 2px; height: 4.6rem; padding: .25rem 0 0; } .loyalty-site .ks .ks-promo-choice.is-first { background: #2b2410; box-shadow: inset 0 0 0 2px var(--ks-amber), 0 0 12px rgba(255,191,63,.5); } .loyalty-site .ks .ks-promo-choice img { filter: drop-shadow(0 0 2px rgba(255,191,63,.9)) drop-shadow(0 0 6px rgba(255,191,63,.45)); height: 3rem; width: 3rem; } .loyalty-site .ks .ks-promo-choice span { color: var(--ks-muted); font-family: 'Silkscreen', monospace; font-size: .45rem; } .loyalty-site .ks .ks-promo-cancel { background: transparent; border: 0; color: var(--ks-dim); cursor: pointer; font-family: 'VT323', monospace; font-size: 1.1rem; min-height: 1.8rem; text-decoration: underline; } .loyalty-site .ks .ks-status { align-items: center; background: #050608; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,191,63,.35); display: flex; justify-content: space-between; min-height: 2.15rem; padding: 0 .6rem; } .loyalty-site .ks .ks-status [data-ks-status-text] { color: #53e0ff; font-size: 1.4rem; line-height: 1; text-shadow: 0 0 6px rgba(83,224,255,.8); } .loyalty-site .ks .ks-status.is-mine [data-ks-status-text] { color: var(--ks-cream); text-shadow: 0 0 8px rgba(255,191,63,.9); } .loyalty-site .ks .ks-status.is-check { box-shadow: inset 0 0 0 1.5px var(--ks-red), 0 0 14px rgba(255,46,77,.5); } .loyalty-site .ks .ks-status.is-check [data-ks-status-text] { animation: ks-blink 1s steps(1) infinite; color: #ff8a98; text-shadow: 0 0 8px #ff2e4d; } .loyalty-site .ks .ks-status.is-over, .loyalty-site .ks .ks-status.is-offer { box-shadow: inset 0 0 0 1.5px var(--ks-amber), 0 0 14px rgba(255,191,63,.45); } .loyalty-site .ks .ks-status.is-over [data-ks-status-text], .loyalty-site .ks .ks-status.is-offer [data-ks-status-text] { color: var(--ks-cream); text-shadow: 0 0 8px var(--ks-amber); } .loyalty-site .ks .ks-status.is-alert [data-ks-status-text] { color: #ff8a98; font-size: 1.15rem; text-shadow: none; } .loyalty-site .ks .ks-status-meta { color: var(--ks-dim); font-size: 1.15rem; white-space: nowrap; } .loyalty-site .ks .ks-moves { align-content: start; column-gap: .35rem; display: grid; font-size: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); line-height: 1.15; list-style: none; margin: 0; min-height: 2.6rem; padding: 0; row-gap: 1px; } .loyalty-site .ks .ks-move { display: flex; gap: .3rem; white-space: nowrap; } .loyalty-site .ks .ks-move-n { color: #3f7d86; } .loyalty-site .ks .ks-move-w { color: var(--ks-cream); } .loyalty-site .ks .ks-move-b { color: var(--ks-muted); } .loyalty-site .ks .ks-move .is-last { background: var(--ks-amber); box-shadow: 0 0 8px rgba(255,191,63,.6); color: #1a1000; padding: 0 3px; } .loyalty-site .ks .ks-stakes { align-items: center; border: 1.5px dashed rgba(255,191,63,.35); border-radius: 6px; display: flex; gap: .6rem; padding: .35rem .6rem; } .loyalty-site .ks .ks-stakes > img, .loyalty-site .ks .ks-stakes > .ks-face-blank { border-radius: 4px; box-shadow: 0 0 0 1.5px var(--ks-amber), 0 0 10px rgba(255,191,63,.5); height: 2.4rem; object-fit: cover; width: 2.4rem; } .loyalty-site .ks .ks-stakes-text { color: var(--ks-muted); flex: 1; font-size: 1.1rem; line-height: 1.05; } .loyalty-site .ks .ks-stakes-text b { color: var(--ks-cream); font-weight: 400; } .loyalty-site .ks .ks-stakes-deltas { align-items: flex-end; display: flex; flex-direction: column; font-size: 1.2rem; line-height: 1; } .loyalty-site .ks .ks-actions { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; } .loyalty-site .ks .ks-actions.is-single { grid-template-columns: 1fr; } .loyalty-site .ks .ks-actions[hidden] { display: none; } .loyalty-site .ks .ks-btn { background: transparent; border-radius: 999px; cursor: pointer; font-family: 'Silkscreen', monospace; font-size: .7rem; font-weight: 700; min-height: 2.6rem; } .loyalty-site .ks .ks-btn[hidden] { display: none; } .loyalty-site .ks .ks-btn:disabled { cursor: default; opacity: .4; } .loyalty-site .ks .ks-btn-resign { border: 2px solid rgba(255,74,94,.7); color: #ff8a98; text-shadow: 0 0 6px rgba(255,74,94,.8); } .loyalty-site .ks .ks-btn-resign.is-armed { background: #ff3048; border: 0; box-shadow: 0 0 8px rgba(255,48,72,.8), 0 0 18px rgba(255,48,72,.45); color: #fff; text-shadow: 1px 1px 0 #6a0010; } .loyalty-site .ks .ks-btn-draw { border: 2px solid var(--ks-cyan); box-shadow: 0 0 10px rgba(83,224,255,.35), inset 0 0 8px rgba(83,224,255,.2); color: #d6f7ff; text-shadow: 0 0 6px var(--ks-cyan); } .loyalty-site .ks .ks-result-link { color: var(--ks-cyan); font-size: 1.4rem; text-align: center; } .loyalty-site .ks .ks-result-link[hidden] { display: none; } @keyframes ks-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .3; } } /* ---- game over ---- */ .loyalty-site .ks .ks-sign-over { font-size: 3.6rem; text-align: center; } .loyalty-site .ks .ks-sign-over.is-win { color: #fff4d6; text-shadow: 0 0 2px #ffe7a8, 0 0 10px var(--ks-amber), 0 0 22px rgba(255,191,63,.85), 0 0 44px rgba(255,191,63,.45); } .loyalty-site .ks .ks-sign-over.is-loss { color: #ffe6e9; text-shadow: 0 0 2px #ff9aa8, 0 0 8px var(--ks-red), 0 0 20px rgba(255,46,77,.85), 0 0 42px rgba(255,46,77,.55); } .loyalty-site .ks .ks-over-headline { color: var(--ks-cream); font-size: 1.6rem; text-align: center; } .loyalty-site .ks .ks-over-detail { color: var(--ks-dim); font-size: 1.3rem; margin-top: -.5rem !important; text-align: center; } .loyalty-site .ks .ks-prize { align-items: center; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,191,63,.06) 0deg 10deg, transparent 10deg 20deg), #0a0f1c; border: 2px solid rgba(255,191,63,.6); border-radius: 10px; display: flex; gap: .8rem; padding: 1rem .8rem; } .loyalty-site .ks .ks-prize.is-loss { background: #0a0f1c; border-color: rgba(255,74,94,.6); box-shadow: 0 0 14px rgba(255,74,94,.3); } .loyalty-site .ks .ks-prize.is-draw { border-color: rgba(83,224,255,.5); } .loyalty-site .ks .ks-prize-art { align-items: center; display: flex; flex: none; flex-direction: column; width: 9.5rem; } .loyalty-site .ks .ks-prize-art img, .loyalty-site .ks .ks-prize-blank { border-radius: 50%; box-shadow: 0 0 0 3px var(--ks-amber), 0 0 18px rgba(255,191,63,.6); height: 7.5rem; object-fit: cover; position: relative; width: 7.5rem; z-index: 1; } .loyalty-site .ks .ks-prize.is-loss .ks-prize-art img, .loyalty-site .ks .ks-prize.is-loss .ks-prize-blank { box-shadow: 0 0 0 3px var(--ks-red), 0 0 18px rgba(255,74,94,.6); } .loyalty-site .ks .ks-prize-blank { align-items: center; background: #13213b; display: flex; justify-content: center; } .loyalty-site .ks .ks-prize-blank img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 6px rgba(83,224,255,.8)); height: 60%; width: 60%; } .loyalty-site .ks .ks-prize-plinth { background: repeating-conic-gradient(#fff4d6 0 25%, #151515 0 50%) 50% / 14px 14px; border-radius: 50%; box-shadow: 0 0 0 3px #7a4722, 0 8px 0 #4d2a12; height: 1.6rem; margin-top: -.6rem; width: 9rem; } .loyalty-site .ks .ks-prize-text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .loyalty-site .ks .ks-prize-text small { color: var(--ks-amber); font-family: 'Silkscreen', monospace; font-size: .6rem; letter-spacing: .14em; } .loyalty-site .ks .ks-prize.is-loss .ks-prize-text small { color: #ff8a98; } .loyalty-site .ks .ks-prize-text h2 { color: var(--ks-cream); font-size: 1.7rem; font-weight: 400; line-height: 1; } .loyalty-site .ks .ks-prize-text p { color: var(--ks-muted); font-size: 1.2rem; line-height: 1.1; } .loyalty-site .ks .ks-over-grid { display: grid; gap: .7rem; grid-template-columns: 9.5rem 1fr; } .loyalty-site .ks .ks-mini.is-large { border: 4px solid #6d3d1c; border-radius: 4px; height: 9.5rem; width: 9.5rem; box-sizing: content-box; } .loyalty-site .ks .ks-mini.is-large i { align-items: center; display: flex; justify-content: center; } .loyalty-site .ks .ks-mini.is-large i.l { background: #6a5528; } .loyalty-site .ks .ks-mini.is-large img { height: 92%; min-height: 0; width: 92%; } .loyalty-site .ks .ks-mini.is-large i { min-height: 0; min-width: 0; } .loyalty-site .ks .ks-over-side { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .loyalty-site .ks .ks-elo-panel { background: #050608; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(83,224,255,.35); display: flex; flex-direction: column; padding: .4rem .6rem; } .loyalty-site .ks .ks-elo-panel small { color: #3f7d86; font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .12em; } .loyalty-site .ks .ks-elo-change { color: #6a7896; font-size: 1.6rem; } .loyalty-site .ks .ks-elo-change b { color: #e6fbff; font-size: 2.3rem; font-weight: 400; text-shadow: 0 0 8px rgba(83,224,255,.7); } .loyalty-site .ks .ks-elo-note { color: var(--ks-cyan); font-size: 1.25rem; } .loyalty-site .ks .ks-elo-note.is-loss { color: #ff8a98; } .loyalty-site .ks .ks-over-stats { margin: 0; } .loyalty-site .ks .ks-over-stats div { display: flex; font-size: 1.25rem; justify-content: space-between; } .loyalty-site .ks .ks-over-stats dt { color: var(--ks-dim); } .loyalty-site .ks .ks-over-stats dd { color: var(--ks-cream); margin: 0; } .loyalty-site .ks .ks-over-actions { display: grid; gap: .6rem; grid-template-columns: 1.4fr 1fr; } .loyalty-site .ks .ks-over-actions form { display: contents; } .loyalty-site .ks .ks-rematch { display: flex; flex-direction: column; min-height: 3.2rem; } .loyalty-site .ks .ks-rematch small { font-family: 'VT323', monospace; font-size: 1.05rem; font-weight: 400; } .loyalty-site .ks .ks-board-link { min-height: 3.2rem; } .loyalty-site .ks .ks-else { color: var(--ks-cyan); font-size: 1.35rem; text-align: center; } /* ---- games lobby cabinet ---- */ .arcade-cabinet-chess { align-items: center; border-color: var(--arcade-cyan); box-shadow: 0 0 14px rgba(83,224,255,.3), inset 0 0 14px rgba(83,224,255,.08); display: flex; gap: .6rem; } .arcade-chess-tile { background: repeating-conic-gradient(#34476d 0 25%, #111a2d 0 50%) 50% / 50% 50%; border-radius: 6px; box-shadow: 0 0 0 2px var(--arcade-cyan); display: flex; flex: none; height: 3.6rem; justify-content: center; width: 3.6rem; } .arcade-chess-tile img { filter: drop-shadow(0 0 3px rgba(255,191,63,.9)); width: 80%; } .arcade-chess-text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .arcade-cabinet-chess h2 { color: #e6fbff; text-shadow: 0 0 8px var(--arcade-cyan); white-space: nowrap; } .arcade-cabinet.arcade-cabinet-chess h2 span.arcade-chess-sign { color: #e6fbff; font-family: 'Yellowtail', cursive; font-size: 1.8rem; text-shadow: 0 0 2px #b8f3ff, 0 0 8px var(--arcade-cyan), 0 0 18px rgba(83,224,255,.7); } .arcade-cabinet-chess h2 small { color: #3f7d86; font-family: 'VT323', monospace; font-size: 1.1rem; text-shadow: none; } .arcade-chess-text > span { color: var(--arcade-cyan); font-size: 1.15rem; } .arcade-chess-text strong { color: var(--arcade-amber); font-weight: 400; } .loyalty-site .ks .ks-piece.is-gliding { position: relative; z-index: 6; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); } /* Bernie and Challenge are a pair: equal heights, and the record, button and footer sit at the same height in both. */ .loyalty-site .ks .ks-cards { align-items: stretch; } .loyalty-site .ks .ks-card-record { margin-top: auto; } .loyalty-site .ks .ks-card-button { margin-top: 0; } .loyalty-site .ks .ks-bernie-id, .loyalty-site .ks .ks-faces { min-height: 3.4rem; } /* PLAY BERNIE is a