/* Play Checkers — app shell and dashboard motion. Loaded after legacy theme. */
:root{--app-navy:#182957;--app-blue:#296fe7;--app-ink:#23345a;--app-muted:#617599;--app-line:#e1e9f4;--app-bg:#f4f7fc}
.app-header.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid #e1e8f2;box-shadow:0 5px 22px rgba(32,56,101,.055);position:relative;z-index:25}
.app-header .app-header-inner{width:min(1540px,calc(100% - 48px));max-width:none;min-height:76px;gap:clamp(20px,4vw,65px)}
.app-header .app-brand{gap:10px;letter-spacing:-.03em;color:#132753;font-weight:900;white-space:nowrap}
.app-header .app-brand .brand-mark{background:#fff3e7;color:#ee8b0e;border-radius:13px;display:grid;place-items:center;width:44px;height:44px}
.app-header .app-brand .brand-heavy{display:inline;font-size:clamp(21px,2vw,27px);text-transform:none;color:#142654}
.app-header .app-brand .brand-heavy>span:first-child{display:inline}
.app-header .app-brand .brand-dot{color:#f29722}
.app-header #main-nav.app-main-nav{display:flex;align-items:center;justify-content:space-between;flex:1;gap:16px;min-width:0}
.app-nav-links,.app-account-area{display:flex;align-items:center;gap:clamp(9px,1.35vw,24px)}
.app-nav-links a{position:relative;display:inline-flex;align-items:center;min-height:74px;padding:0 7px;color:#455b83!important;font-size:14px;font-weight:750;white-space:nowrap;transition:color .18s}
.app-nav-links a:hover,.app-nav-links a[aria-current=page]{color:#1c66d8!important}
.app-nav-links a[aria-current=page]::after{content:"";position:absolute;bottom:0;left:6px;right:6px;height:4px;border-radius:6px 6px 0 0;background:#2e77f4}
.app-account-area{margin-left:auto;white-space:nowrap}
.app-account-link{display:flex;align-items:center;gap:11px;padding:6px 10px;border-radius:13px;color:#20345d!important}
.app-account-link:hover{background:#f0f6ff;color:#1e64d1!important}
.app-header-flag{font-size:24px;border-right:1px solid #e1e8f2;padding-right:12px}
.app-account-avatar{display:grid;place-items:center;width:34px;height:34px;color:#5073aa;border-radius:50%;background:#eff5ff}
.app-account-avatar .icon{width:18px;height:18px}
.app-sign-in{font-size:14px;font-weight:800;color:#26416c!important}
.app-header .app-register{background:#2b71e9;border:1px solid #2b71e9;border-radius:12px;box-shadow:0 7px 16px #2b71e926;color:#fff!important}
.app-header .menu-toggle{border:1px solid #d8e5f7;border-radius:10px;background:#f7faff;color:#20345d}
/* Opponent cards: tactile interactive game UI */
.bot-selector-card{position:relative;overflow:hidden;transform-origin:center bottom;will-change:transform;transition:transform .23s cubic-bezier(.2,.8,.2,1),border-color .23s,box-shadow .23s,background .23s}
.bot-selector-card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.64) 49%,transparent 72%);transform:translateX(-125%);pointer-events:none;transition:transform .58s}
.bot-selector-card:hover::after{transform:translateX(125%)}
.bot-selector-card:hover{transform:translateY(-5px) scale(1.025);box-shadow:0 14px 25px #4678c22a}
.bot-selector-card.is-active{background:linear-gradient(180deg,#fff,#f0f6ff);box-shadow:0 12px 23px #2570df35}
.bot-selector-card.is-active::before{content:"";position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:#2c75ed;box-shadow:0 0 0 4px #dbeaff}
.bot-selector-card:focus-visible,.choose-bot-link:focus-visible{outline:3px solid #246fe9;outline-offset:4px}
.bot-card{transition:box-shadow .22s,transform .22s,border-color .22s}
.bot-card:hover{border-color:#c7dafa;transform:translateY(-2px);box-shadow:0 18px 34px #345eaf1a}
.bot-card-link{transition:color .15s}.bot-card-link:hover{color:#1645af;text-decoration:underline;text-underline-offset:4px}
.game-dashboard .board-frame{transition:box-shadow .22s}.game-dashboard .board-frame:focus-within{box-shadow:0 14px 34px #82532935,0 0 0 3px #d4e5ff}
@media(max-width:1100px){.app-header .app-header-inner{gap:12px}.app-nav-links{gap:4px}.app-nav-links a{padding:0 6px;font-size:12px}.app-header .app-brand .brand-heavy{font-size:21px}}
@media(max-width:760px){.app-header .app-header-inner{width:calc(100% - 28px);min-height:68px}.app-header .menu-toggle{display:flex!important;align-items:center;gap:8px;margin-left:auto;padding:8px 12px}.app-header #main-nav.app-main-nav{position:absolute;top:100%;left:12px;right:12px;display:none;flex-direction:column;align-items:stretch;gap:12px;padding:16px;background:#fff;border:1px solid #dce7f4;border-radius:16px;box-shadow:0 20px 40px #15305a22}.app-header #main-nav.app-main-nav.is-open{display:flex}.app-nav-links,.app-account-area{flex-direction:column;align-items:stretch;gap:4px;margin:0}.app-nav-links a{min-height:43px;padding:0 12px;border-radius:9px}.app-nav-links a[aria-current=page]{background:#edf5ff}.app-nav-links a[aria-current=page]::after{left:0;right:auto;bottom:9px;top:9px;height:auto;width:3px;border-radius:4px}.app-account-link,.app-sign-in,.app-register{justify-content:center}.app-header-flag{border:0}.app-header .app-brand .brand-heavy{font-size:23px}}
@media(prefers-reduced-motion:reduce){.bot-selector-card,.bot-card,.game-dashboard .board-frame{transition:none}.bot-selector-card::after{display:none}.bot-selector-card:hover,.bot-card:hover{transform:none}}

/* Cross-browser country flags: rendered from local image files, not emoji fonts. */
.country-flag{display:inline-block;vertical-align:-.23em;width:25px;height:19px;max-width:none;object-fit:contain;flex:0 0 auto;border-radius:2px;filter:drop-shadow(0 0 1px rgba(8,23,55,.15))}
.app-header-flag,.pc-flag{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1}
.app-header-flag .country-flag{width:26px;height:20px}