*{box-sizing:border-box}
:root{
  --bg:#f4f1ea;
  --card:#fffdf9;
  --panel:#ffffff;
  --panel-soft:#f8f5ef;
  --line:#e8e1d6;
  --muted:#6f7a86;
  --text:#243044;
  --gold:#c28b31;
  --gold2:#e4bb69;
  --gold-soft:#fbf1dc;
  --red:#a94850;
  --red2:#c9656c;
  --board-light:#eadfcf;
  --board-dark:#775943;
  --board-dark-hover:#87674e;
  --frame:#f7f2e9;
  --glow:rgba(194,139,49,.22);
  --shadow:0 18px 50px rgba(55,44,28,.10);
}

html,body{min-height:100%}
body{background:
radial-gradient(circle at 8% 2%,rgba(194,139,49,.10),transparent 28%),
radial-gradient(circle at 92% 86%,rgba(169,72,80,.07),transparent 30%),
linear-gradient(145deg,#f8f5ef,#f4f1ea 58%,#eee9df);
color:var(--text);font-family:Tahoma,Arial,sans-serif}
button,select{font:inherit}
button:focus-visible,select:focus-visible{outline:3px solid rgba(79,70,229,.16);outline-offset:2px}

.ck-page{min-height:calc(100vh - 70px);padding:28px 0 52px;display:flex;justify-content:center}
.ck-card{width:min(100%,1120px);position:relative;overflow:hidden;background:rgba(255,253,249,.95);border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:var(--shadow)}
.ck-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.9),transparent 38%,rgba(194,139,49,.035))}
.ck-card>*{position:relative;z-index:1}

.ck-header{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ck-kicker{font-size:12px;font-weight:900;letter-spacing:.35px;color:var(--gold)}
.ck-header h1{margin:7px 0 8px;font-size:30px;letter-spacing:-.5px;color:#202c40}
.ck-logo{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:6px;border-radius:14px;background:linear-gradient(145deg,#f2cf91,#c28b31);color:#4d3513;box-shadow:0 9px 22px var(--glow);font-size:23px;vertical-align:-6px;border:1px solid rgba(145,100,35,.2)}
.ck-header p{margin:0;color:var(--muted);line-height:1.8}
.ck-turn{padding:11px 16px;border-radius:999px;font-weight:900;white-space:nowrap;border:1px solid rgba(194,139,49,.28);background:var(--gold-soft);color:#8f641d;box-shadow:0 5px 16px rgba(194,139,49,.07)}
.ck-turn.ai-turn{border-color:rgba(169,72,80,.22);background:#fff0f0;color:#97434a}

.ck-layout{display:grid;grid-template-columns:minmax(220px,270px) minmax(0,1fr);gap:28px;align-items:start;margin-top:26px}
.ck-side{background:linear-gradient(180deg,#fff,#faf7f2);border:1px solid var(--line);border-radius:21px;padding:16px;box-shadow:0 9px 28px rgba(55,44,28,.05)}
.ck-stat{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;margin-bottom:9px;border-radius:15px;background:#fff;border:1px solid #ece5da}
.ck-stat>div{min-width:0}
.ck-stat span{display:block;color:#4f5c6c;font-size:13px;font-weight:800}
.ck-stat small{display:block;margin-top:2px;color:#99a1aa;font-size:10px}
.ck-stat strong{font-size:25px;color:#9a6c20;line-height:1}

.ck-control{margin-top:18px}
.ck-control label{display:block;color:#4f5c6c;font-size:12px;font-weight:800;margin-bottom:7px}
.ck-control select{width:100%;background:#fff;color:var(--text);border:1px solid #ddd5ca;border-radius:12px;padding:11px 12px;outline:none;transition:.18s}
.ck-control select:hover{border-color:#ccb890}
.ck-control select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(194,139,49,.10)}
.ck-variant-picker{width:100%;max-width:650px;min-width:0;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ck-variant-picker label{display:block;color:#4f5c6c;font-size:12px;font-weight:800;margin-bottom:7px}
.ck-variant-picker select{width:100%}

.ck-rules{margin:18px 0}
.ck-rule{padding:11px 12px;border-top:1px solid #eee8df}
.ck-rule:first-child{border-top:0}
.ck-rule b{display:block;font-size:12px;color:#2f3b4c;margin-bottom:3px}
.ck-rule span{display:block;color:#8a949e;font-size:11px;line-height:1.7}
.ck-btn{width:100%;border:1px solid #d8d0c5;background:#fff;color:#344153;border-radius:13px;padding:11px 14px;cursor:pointer;font-weight:900;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s}
.ck-btn:hover{transform:translateY(-1px);background:#fcfaf6;border-color:#cdbfa8;box-shadow:0 8px 18px rgba(55,44,28,.08)}
.ck-primary{background:linear-gradient(145deg,#e4ba67,#bf8830);border-color:#d09c47;color:#3e2a0f;box-shadow:0 10px 24px var(--glow)}
.ck-primary:hover{background:linear-gradient(145deg,#edc979,#c79239)}

.ck-board-area{min-width:0;width:100%;display:flex;flex-direction:column;align-items:center;overflow:visible}
.ck-board-frame{width:min(100%,700px);max-width:700px;min-width:0;overflow:hidden;padding:14px;background:var(--frame);border:1px solid #ded4c5;border-radius:23px;box-shadow:0 18px 42px rgba(61,48,31,.13),inset 0 0 0 1px rgba(255,255,255,.75)}
.ck-board-row{width:100%;min-width:0;display:flex;align-items:stretch;justify-content:center;gap:0}
.ck-board{width:min(650px,100%);max-width:650px;min-width:0;flex:0 1 650px;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));overflow:hidden;border-radius:13px;border:2px solid #9c7540;box-shadow:inset 0 0 0 1px rgba(255,255,255,.48),0 8px 24px rgba(70,50,25,.11)}
.ck-cell{position:relative;border:0;padding:0;display:grid;place-items:center;cursor:pointer;transition:background .16s,box-shadow .16s}
.ck-cell.light{background:var(--board-light)}
.ck-cell.dark{background:var(--board-dark)}
.ck-cell.dark:hover{background:var(--board-dark-hover)}
.ck-cell.light:hover{background:#f1e7d7}
.ck-cell.possible:after{content:"";position:absolute;width:19%;aspect-ratio:1;border-radius:50%;background:rgba(255,248,220,.96);box-shadow:0 0 0 6px rgba(194,139,49,.18),0 0 18px rgba(194,139,49,.30)}
.ck-cell.selected{box-shadow:inset 0 0 0 4px #e0ad4e}
.ck-cell.forced{box-shadow:inset 0 0 0 4px #ffe6a4}
.ck-piece{width:72%;height:72%;border-radius:50%;display:grid;place-items:center;position:relative;z-index:2;border:3px solid rgba(255,255,255,.42);box-shadow:inset 0 6px 7px rgba(255,255,255,.22),inset 0 -10px 12px rgba(64,42,18,.20),0 7px 12px rgba(48,35,22,.19);transition:transform .16s}
.ck-piece:before{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 2px 4px rgba(255,255,255,.20)}
.ck-piece.player{background:radial-gradient(circle at 32% 25%,#fff8df 0,#f3d28c 30%,#d2a047 60%,#aa7527 100%);border-color:#f9e5b6}
.ck-piece.ai{background:radial-gradient(circle at 32% 25%,#ffd9dc 0,#cc7279 30%,#a94850 61%,#7a343b 100%);border-color:#f2b5b9}
.ck-piece.king{box-shadow:inset 0 6px 7px rgba(255,255,255,.22),inset 0 -10px 12px rgba(64,42,18,.20),0 0 0 3px rgba(194,139,49,.42),0 8px 17px rgba(48,35,22,.21)}
.ck-cell.clickable:hover .ck-piece{transform:translateY(-2px) scale(1.035)}
.crown{position:relative;font-size:clamp(18px,3vw,30px);line-height:1;color:#594112;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.ck-piece.ai.king .crown{color:#fff0d1}

.ck-coordinates.top{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:min(650px,100%);max-width:650px;margin-right:0;margin-bottom:5px;color:#929ca5;font-size:10px;text-align:center}
.ck-coordinates.top span,.ck-coordinates.side span{font-weight:800}
.ck-coordinates.side{width:18px;min-width:18px;display:grid;grid-template-rows:repeat(8,minmax(0,1fr));align-items:center;justify-items:center;margin-left:6px;color:#929ca5;font-size:10px}
.ck-status{margin-top:15px;width:min(650px,100%);min-height:47px;display:grid;place-items:center;text-align:center;padding:10px 14px;border-radius:13px;background:#fff;border:1px solid var(--line);color:#556170;font-weight:800;font-size:13px;box-shadow:0 7px 20px rgba(55,44,28,.05)}
.ck-status.warning{border-color:#ead4a3;color:#8f641d;background:#fffbf0}
.ck-status.good{border-color:#c9e5d5;color:#21734a;background:#f3fbf6}
.ck-status.bad{border-color:#efc7ca;color:#98444b;background:#fff5f5}

.ck-legend{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:18px;color:#8a949e;font-size:11px}
.ck-legend span{display:flex;align-items:center;gap:7px}
.ck-legend i{display:inline-block;width:12px;height:12px;border-radius:50%}
.legend-player{background:#d2a047}
.legend-ai{background:#a94850}
.legend-move{background:#f4ddb0;box-shadow:0 0 0 4px rgba(194,139,49,.12)}

.ck-overlay[hidden]{display:none}
.ck-overlay{position:fixed;inset:0;z-index:50;background:rgba(44,37,28,.30);backdrop-filter:blur(7px);display:grid;place-items:center;padding:20px}
.ck-result{width:min(430px,100%);text-align:center;background:#fffdf9;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 30px 80px rgba(44,37,28,.18)}
.ck-result-icon{font-size:58px;line-height:1}
.ck-result h2{margin:9px 0 8px;font-size:28px;color:#202c40}
.ck-result p{color:var(--muted);line-height:1.8;margin:0 0 20px}
.ck-result .ck-btn{width:auto;min-width:180px}

.ck-result-page{padding-top:38px}
.ck-result-card{max-width:680px;text-align:center}
.ck-result-card h1{margin:8px 0 15px;color:#202c40}
.ck-result-stat{color:var(--muted);margin:7px 0}
.ck-result-stat strong{color:#9a6c20}
.ck-result-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.ck-result-actions .ck-btn{width:auto;min-width:170px;text-decoration:none}

@media(max-width:900px){
  .ck-layout{grid-template-columns:1fr}
  .ck-side{order:2}
  .ck-board-area{order:1}
  .ck-side{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .ck-stat{margin:0}.ck-control{grid-column:1/-1}.ck-rules{grid-column:1/-1}
  .ck-side>.ck-btn{grid-column:1/-1}
}
@media(max-width:620px){
  .ck-page{padding:14px 0 35px;min-height:calc(100vh - 110px)}
  .ck-card{padding:14px;border-radius:20px}
  .ck-header{align-items:flex-start;flex-direction:column;gap:13px}.ck-header h1{font-size:23px}
  .ck-board-frame{width:100%;max-width:560px;padding:8px;border-radius:16px}
  .ck-board{width:100%;max-width:560px;flex-basis:560px}
  .ck-status{width:min(560px,100%)}
  .ck-side{display:block}.ck-stat{margin-bottom:8px}
  .ck-variant-picker{margin-top:14px}
  .ck-coordinates.side{width:13px;min-width:13px;margin-left:3px}
  .ck-piece{width:74%;height:74%}
  .ck-result-card{border-radius:20px;padding:22px}
}


.ck-mode-switch{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:-4px 0 14px;color:#7b8490;font-size:12px;font-weight:800}
.ck-mode-switch .ck-btn{width:auto;text-decoration:none;padding:8px 12px;font-size:11px}
.ck-online-toolbar{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:18px;align-items:end;margin-top:22px;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#faf7f2)}
.ck-online-variant label{display:block;color:#4f5c6c;font-size:12px;font-weight:800;margin-bottom:7px}
.ck-online-variant select{width:100%;background:#fff;color:var(--text);border:1px solid #ddd5ca;border-radius:12px;padding:11px 12px;outline:none}
.ck-online-actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.ck-online-actions .ck-btn{width:auto;text-decoration:none;min-width:170px}
.ck-online-lobby{display:grid;place-items:center;text-align:center;padding:42px 20px 34px}
.ck-online-lobby-icon{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:var(--gold-soft);border:1px solid #ecd5a2;color:#97671d;font-size:34px;box-shadow:0 15px 35px rgba(194,139,49,.12)}
.ck-online-lobby h2{margin:15px 0 7px;color:#253145;font-size:24px}
.ck-online-lobby p{max-width:580px;margin:0;color:var(--muted);line-height:1.9}
.ck-queue-timer{margin-top:16px;font-size:27px;font-weight:900;letter-spacing:1px;color:#986a20}
.ck-online-game{margin-top:24px}
.ck-online-layout{margin-top:0}
.ck-online-side{display:flex;flex-direction:column;gap:9px}
.ck-online-player-card{padding:14px 15px;border-radius:16px;border:1px solid var(--line);background:#fff}
.ck-online-player-card span{display:block;color:#7e8994;font-size:11px;font-weight:800}
.ck-online-player-card strong{display:block;margin-top:4px;color:#2e3949;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-online-player-card small{display:block;margin-top:3px;color:#a1a8af;font-size:10px}
.ck-online-player-card.mine{background:#fffbf0;border-color:#ead6ad}
.ck-online-player-card.opponent{background:#fff6f6;border-color:#efced0}
.ck-online-side .ck-stat{margin:0}
.ck-chat{margin-top:20px;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 9px 28px rgba(55,44,28,.05)}
.ck-chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:#fbf8f3}
.ck-chat-head b{display:block;color:#2e3949;font-size:13px}
.ck-chat-head small{display:block;margin-top:2px;color:#9aa2aa;font-size:10px}
.ck-chat-head>span{font-size:10px;font-weight:900;color:#27754e;background:#f0faf4;border:1px solid #cde7d8;padding:5px 8px;border-radius:999px}
.ck-chat-messages{height:230px;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fdfcf9}
.ck-chat-message{display:flex;flex-direction:column;gap:3px;max-width:min(76%,480px);padding:9px 11px;border-radius:14px;border:1px solid #ece5da;background:#fff;align-self:flex-start}
.ck-chat-message.mine{align-self:flex-end;background:#fff8e8;border-color:#efd9ab}
.ck-chat-message strong{font-size:10px;color:#9a6c20}
.ck-chat-message span{font-size:12px;line-height:1.75;color:#3e4959;overflow-wrap:anywhere}
.ck-chat-form{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line);background:#fff}
.ck-chat-form input{flex:1;min-width:0;border:1px solid #ddd5ca;border-radius:12px;padding:10px 12px;background:#fff;color:var(--text);outline:none}
.ck-chat-form input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(194,139,49,.09)}
.ck-chat-form .ck-btn{width:auto;min-width:86px}
.ck-online-page .ck-board{transition:opacity .15s}
.ck-online-page .ck-online-lobby[hidden],.ck-online-page .ck-online-game[hidden],.ck-online-page .ck-queue-timer[hidden]{display:none!important}
.ck-online-page .ck-cell.possible:after{width:21%;background:rgba(255,248,220,.98)}
.ck-online-page .ck-cell.clickable{cursor:pointer}
.ck-online-page .ck-cell:not(.clickable){cursor:default}

@media(max-width:900px){
  .ck-online-toolbar{grid-template-columns:1fr}
  .ck-online-actions{justify-content:stretch}
  .ck-online-actions .ck-btn{flex:1;min-width:0}
}
@media(max-width:620px){
  .ck-mode-switch{justify-content:stretch;align-items:stretch;flex-direction:column}
  .ck-mode-switch .ck-btn{width:100%;text-align:center}
  .ck-online-toolbar{padding:12px}
  .ck-online-actions{display:grid;grid-template-columns:1fr 1fr}
  .ck-online-actions .ck-btn{width:100%}
  .ck-online-lobby{padding:34px 10px 26px}
  .ck-chat-messages{height:210px}
  .ck-chat-form .ck-btn{min-width:72px}
}