/* Play Checkers | unified light interface, October 2026 */
:root{color-scheme:light;--bg:#f6f7f9;--surface:#fff;--surface-raised:#f9fafc;--panel:#fff;--border:#dfe4eb;--text:#1e293b;--muted:#64748b;--red:#e85e53;--red-deep:#cb443b;--gold:#bd8756;--blue:#5575b6;--shadow:0 14px 38px rgba(28,42,60,.075);--radius:16px;--small-radius:9px;--font:Inter,'Segoe UI',Arial,sans-serif;--display:Inter,'Segoe UI',Arial,sans-serif}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.65}
h1,h2,h3,h4,.brand-heavy,.brand strong{color:var(--text);letter-spacing:-.035em}
p,.muted,.small-text,.lead,.prose p,.prose li{color:var(--muted)}
a{color:inherit}a:hover{color:var(--red-deep)}
.eyebrow,.card-number,.tiny-label{color:#a66e4f;font-weight:800;letter-spacing:.14em}
.wrap{width:min(var(--max),calc(100% - 48px))}
.button{background:linear-gradient(180deg,#f47768,#dc5549);border:1px solid #d95348;color:white;border-radius:10px;box-shadow:0 7px 15px #db645020;font-weight:750;text-decoration:none}
.button:hover{background:#c94c41;color:white;transform:translateY(-1px)}
.button.secondary,.button.secondary:disabled{background:#fff;color:var(--text);border:1px solid var(--border);box-shadow:none}
.button.secondary:hover{background:#f3f6fa;color:var(--text)}
.button:disabled{background:#e7e9ee;color:#8290a1;border-color:#d5dbe4;box-shadow:none}
.text-link,.prose a,.editorial-aside a,.footer-bottom a,.breadcrumbs a{color:#b85445;font-weight:700}
.text-link:hover,.prose a:hover{color:#8f352d}
.site-header{background:#fff;border-bottom:1px solid var(--border);box-shadow:0 4px 15px #25354d08;position:relative;z-index:10}
.header-inner{min-height:82px;gap:30px}.brand,.brand strong,.brand-heavy{color:var(--text)}.brand-dot{color:var(--red)}
.brand-mark{background:linear-gradient(145deg,#fff1e6,#f7d4be)!important;color:#bf5d48!important;border:1px solid #efcdbb!important}
#main-nav a{color:#4e5c70}#main-nav a:hover,#main-nav a[aria-current=page]{color:var(--red-deep)}
#main-nav .button{color:#fff}#main-nav .button:hover{color:#fff}
.arena{background:linear-gradient(180deg,#fff9f3 0%,#f6f7f9 58%,#f6f7f9 100%);border-bottom:1px solid var(--border);padding-top:42px}
.lobby-heading{margin-bottom:30px}.lobby-heading h1{color:var(--text);font-size:clamp(35px,3.5vw,51px)}
.lobby-heading h1 em{color:var(--red)}.lobby-heading p:last-child{color:#67768a}.red-line{background:var(--red)}
.preview-tag,.pill,.rank-badge{background:#fff1e7;color:#a9513d;border:1px solid #f0cdbb;border-radius:7px;box-shadow:none}
.lobby-grid{gap:22px;align-items:start}
.game-stage,.panel,.article-nav,.podium-card,.auth-panel,.empty-state,.account-story,.dashboard-hero,.stat,.progress-card,.profile-hero,.contact-preview{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.game-stage{padding:24px 25px 22px;min-width:0}
.panel{padding:24px;margin-bottom:18px}.panel h2{font-size:20px;color:var(--text)}
.stage-bar{background:transparent;border:0;border-bottom:1px solid var(--border);box-shadow:none;border-radius:0;padding:0 0 16px;margin-bottom:15px}
.stage-bar h2{color:var(--text);font-size:22px}.stage-bar .eyebrow{color:#a76e57}
.opponent-strip{background:#f8fafc;border:1px solid #e6eaf0;border-radius:10px;padding:12px 14px;box-shadow:none;margin:12px 0}
.opponent strong,.rank-name strong{color:var(--text)}.opponent span:not(.mini-piece),.piece-count,.snapshot-note{color:var(--muted)}
.game-metrics{border-radius:12px;overflow:hidden;background:#f8fafc;border:1px solid var(--border);margin-top:22px}
.game-metrics .stat{background:#f8fafc;border:0;border-right:1px solid var(--border);box-shadow:none;border-radius:0;padding:13px 8px}
.game-metrics .stat:last-child{border-right:0}.stat strong,.game-metrics strong{color:var(--text)}.stat span{color:var(--muted)}
.game-actions{gap:12px;margin-top:16px}.game-actions .button{min-width:0}
.game-status{background:#fff8ee;border:1px solid #f0dabb;padding:12px 16px;border-radius:10px;color:#8b582e;font-size:13px;font-weight:650;margin:16px 0 0;min-height:44px}
.guest-panel{text-align:center}.guest-panel .eyebrow{text-align:left}.guest-avatar{background:#fff0dd;border:1px solid #efccac;color:#bb6a49}.guest-panel h2{font-size:22px}
.mode-panel select,select,input:not([type=checkbox]):not([type=radio]),textarea{background:#fff!important;color:#233148!important;border:1px solid #cbd5e1!important;border-radius:9px!important;box-shadow:0 1px 2px #17253a08;padding:12px!important}
select:focus,input:focus,textarea:focus{outline:2px solid #f39c82;outline-offset:1px}
.mode-panel label,.auth-panel label,.contact-preview label{color:#536174;font-weight:750}
.lobby-tip{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:15px;color:var(--text)}
.lobby-tip strong,.lobby-tip span{color:var(--text)}
.ranking-label{background:#f6f8fb;border-bottom:1px solid var(--border);color:var(--muted);padding:9px 12px}
.rank-row{background:#fff;border-bottom:1px solid var(--border);color:var(--text)}.rank-row:nth-of-type(even){background:#fafbfd}.rank-row:hover{background:#fff6f0}
.rank-avatar{background:#fce6d3!important;color:#a64e35!important}.rank-name small{color:var(--muted)}
.achievement-feature{text-align:center}.achievement-feature h2{color:var(--text)}
.arena-bottom{border-top:1px solid var(--border)}.arena-bottom span{color:var(--muted)}
.below-lobby{padding-top:56px;padding-bottom:54px}
.discovery{gap:22px}.discovery>div{padding-right:14px}.discovery h2{color:var(--text)}
.discovery-card{display:block;background:#fff;border:1px solid var(--border);border-radius:15px;padding:25px!important;min-height:190px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.discovery-card:hover{transform:translateY(-2px);box-shadow:0 18px 36px #24334817}.discovery-card h3{color:var(--text)}.discovery-card p{color:var(--muted)}
.ad-slot{background:#fafbfc;border:1px dashed #cbd5e1;border-radius:12px;color:var(--muted);margin-block:42px}
.editorial-layout{display:grid;grid-template-columns:minmax(220px,.43fr) minmax(0,1fr);align-items:start;gap:28px;margin-block:52px 20px}
.editorial-aside{background:#fff;border:1px solid var(--border);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.editorial-aside h2{color:var(--text);font-size:30px}.editorial-aside p{color:var(--muted)}
.prose{color:var(--text);font-size:16px;line-height:1.85;min-width:0}
.editorial-layout>.prose{background:#fff;border:1px solid var(--border);border-radius:16px;padding:clamp(24px,3.5vw,48px);box-shadow:var(--shadow)}
.prose h2{font-size:clamp(23px,2vw,31px);margin:1.6em 0 .65em;color:var(--text);line-height:1.25}
.prose h2:first-child,.prose>h2:first-child{margin-top:0}.prose h3{font-size:21px;margin:1.5em 0 .55em;color:var(--text)}
.prose p{line-height:1.9;margin:0 0 1.35em}.prose li{margin-bottom:.55em;padding-left:.2em}.prose ul,.prose ol{padding-left:1.6em;margin:1em 0 1.8em}
.prose strong{color:#334155}.prose blockquote{border-left:4px solid var(--red);background:#fff8f3;margin:25px 0;padding:18px 24px;border-radius:0 10px 10px 0}
.prose hr{border:0;border-top:1px solid var(--border);margin:34px 0}
.prose figure{margin:24px 0}.prose figure img{border-radius:13px;border:1px solid var(--border)}
.notice{background:#fff8ed!important;color:#87502f!important;border:1px solid #f1d7b7!important;border-radius:11px!important;padding:17px 19px!important;font-size:14px;line-height:1.7;box-shadow:none}
.page-heading{padding-top:45px;padding-bottom:23px;background:transparent;box-shadow:none;border:0}.page-heading h1{color:var(--text)}.page-heading .lead{color:var(--muted)}
.breadcrumbs{color:#687789}.breadcrumbs a{color:#995744}.page-heading .eyebrow{color:#bb7058}
.article-grid{gap:38px}.article-grid>.prose{background:#fff;border:1px solid var(--border);border-radius:16px;padding:clamp(25px,3.5vw,48px);box-shadow:var(--shadow)}
.article-nav{padding:24px;top:22px}.article-nav h2{font-size:18px}.article-nav a{color:#57667a;border-bottom:1px solid #ebeff4;padding:10px 0}.article-nav a:hover{color:var(--red-deep)}.article-nav .button{color:white;border-bottom:0;margin:16px 0 10px}
.return-cta{background:#243348;color:white;border:0;border-radius:18px;padding:26px 32px;margin-block:45px}.return-cta h2,.return-cta .eyebrow{color:white}.return-cta p{color:#d9e3ef}
.site-footer{background:#fff;border-top:1px solid var(--border);color:var(--text)}.footer-top,.footer-bottom{color:var(--muted)}.footer-bottom{border-top:1px solid var(--border)}.footer-bottom a,.footer-top>a:last-child{color:#5b6b7c}.footer-bottom a:hover{color:var(--red-deep)}
/* Leaderboards and player account */
.leaderboard-head{margin-bottom:20px}.range-tabs{background:#fff;border:1px solid var(--border);border-radius:12px;padding:5px;display:inline-flex;gap:4px}.range-tabs a{border-radius:8px;color:#58677a;padding:9px 17px}.range-tabs a[aria-current=page]{background:#fceee8;color:#b7473f;font-weight:750}
.podium{gap:18px;margin-block:27px}.podium-card{padding:26px;text-align:center;color:var(--text)}.podium-card h2{color:var(--text)}
.table-scroll{background:#fff;border:1px solid var(--border);border-radius:15px;overflow-x:auto;box-shadow:var(--shadow)}
.leader-table{background:#fff;color:var(--text);border-collapse:collapse;width:100%}.leader-table th{background:#f3f6fa;color:#566579;text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:16px 18px;border-bottom:1px solid var(--border)}.leader-table td{padding:14px 18px;border-bottom:1px solid #e9edf2;color:#405167}.leader-table tr:nth-child(even){background:#fafbfd}.leader-table tr:hover{background:#fff8f2}.leader-table a{color:#344054}
.empty-state{padding:40px;text-align:center;margin-block:24px}.empty-state h2,.empty-state h3{color:var(--text)}
.account-intro{gap:28px}.account-story{padding:34px}.account-story h2{color:var(--text)}.account-story p{color:var(--muted)}.benefit{border-bottom:1px solid var(--border);padding:15px 0}.benefit strong{color:var(--text)}
.auth-panel{padding:28px}.auth-panel h2{color:var(--text)}.auth-panel label{display:block;margin:14px 0 6px}.auth-panel input:not([type=checkbox]):not([type=radio]){width:100%}
.form-columns{gap:14px}.avatar-options label span{background:#f7f9fc;border:1px solid var(--border);color:#9c634a}.checkbox{display:flex!important;align-items:flex-start;gap:9px}
.dashboard-hero{padding:28px}.dashboard-hero h2{color:var(--text)}.dashboard-nav{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;gap:8px}.dashboard-nav a{color:#536277}.stats-grid .stat{background:#fff;border:1px solid var(--border);padding:20px}.section-title{margin:38px 0 20px}
.contact-preview{padding:26px}.contact-preview input,.contact-preview textarea{width:100%}
/* Functional checkers board, premium but restrained */
.board-frame{background:linear-gradient(145deg,#dbb88f,#b98253);border:1px solid #ba8963;border-radius:18px;padding:13px 13px 0;box-shadow:0 12px 24px #815a312d,0 5px 0 #916239}
.board{background:#c5986f;border:1px solid #8e633f;overflow:hidden;border-radius:9px;box-shadow:inset 0 1px 3px #75492366}
#checkers-board .square.light{background:#f7e9d3}#checkers-board .square.dark{background:linear-gradient(145deg,#bd8d60,#a5754c)}
#checkers-board .square{position:relative;cursor:pointer;touch-action:manipulation}#checkers-board .square:disabled{opacity:1;cursor:default}
#checkers-board .piece,.mini-piece{border-radius:50%;position:relative}
#checkers-board .piece{width:78%;height:78%;border:1px solid #7c281f;box-shadow:inset 0 2px 2px #ffffff70,inset 0 -5px 8px #0005,0 5px 4px #20150d4d;display:grid;place-items:center}
#checkers-board .piece.red,.mini-piece.red{background:radial-gradient(circle at 35% 24%,#fc9b88,#dc4940 55%,#902b28 100%)}
#checkers-board .piece.black,.mini-piece.black{background:radial-gradient(circle at 35% 24%,#78818c,#303843 55%,#171b22 100%);border-color:#202934}
#checkers-board .piece::before{content:"";position:absolute;inset:10%;border-radius:50%;border:2px solid #ffffff3c;box-shadow:inset 0 2px 4px #ffffff29,inset 0 -3px 5px #0003;pointer-events:none}
#checkers-board .piece:not(.king)>span{width:47%;height:47%;border:2px solid #ffffff36;border-radius:50%;box-shadow:inset 0 3px 5px #0002}
#checkers-board .piece.king>span{z-index:1;color:#ffe4a0;text-shadow:0 2px 3px #0008;font-size:clamp(17px,2.8vw,30px)}
#checkers-board .square.legal-destination::after{background:#ffe8a2;border-color:#c17b3f}#checkers-board .square.is-selected{box-shadow:inset 0 0 0 4px #ffd16f}
.coordinates{color:#4c3423;font-weight:800}
@media(max-width:980px){.wrap{width:min(var(--max),calc(100% - 32px))}.lobby-grid{gap:18px}.editorial-layout{grid-template-columns:1fr}.discovery{gap:15px}#main-nav{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}.menu-toggle{background:#f8fafc;color:var(--text);border:1px solid var(--border)}}
@media(max-width:640px){.arena{padding-top:25px}.game-stage,.panel{padding:18px}.board-frame{padding:8px 8px 0;border-radius:12px}.board{border-radius:5px}.below-lobby{padding-top:34px}.discovery-card{min-height:0}.editorial-layout>.prose,.article-grid>.prose{padding:23px}.editorial-aside{padding:23px}.article-grid{gap:22px}.footer-top,.footer-bottom{gap:14px}.return-cta{padding:22px}.leader-table th,.leader-table td{padding:12px}}