/* Checkers (t8647/t8648): Tommy and Pinky pieces on a pink and blue board, or classic red and black. */
.ck-bg{background:radial-gradient(120% 70% at 0% 0%,rgba(255,120,180,.35),transparent 60%),radial-gradient(120% 70% at 100% 100%,rgba(90,150,255,.38),transparent 60%),linear-gradient(180deg,#1b1238,#0e1430)}
.ck .gk-panel .lbl{margin:12px 0 6px}
.ck .gk-panel .lbl:first-child{margin-top:0}
.ck .gk-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.15}
.sw{display:inline-block;flex:none;width:18px;height:18px;border-radius:4px;box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.sw.tp{background:conic-gradient(#f7bcd5 0 25%,#8ec3f2 0 50%,#f7bcd5 0 75%,#8ec3f2 0)}
.sw.cl{background:conic-gradient(#c8262c 0 25%,#1b1b1b 0 50%,#c8262c 0 75%,#1b1b1b 0)}
.two-note{margin:10px 0 0;text-align:center;color:#e9dcc0;font-size:15px}
.rec{margin:10px 0 0;text-align:center;font-size:15px;color:#bfe9cf;font-weight:700;min-height:20px}
.gk-host .pk{color:#ff9cc8}.gk-host .bl{color:#9cc4ff}
.ck-hero{display:flex;align-items:center;gap:14px;animation:gkBob 3.2s ease-in-out infinite}
.ck-hero .hp{width:min(30vw,120px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ck-hero .vs{font-weight:700;font-size:22px;color:var(--gold2);text-shadow:0 2px 0 rgba(0,0,0,.5)}
.hp.pink,.pc.pink .disc{background:radial-gradient(circle at 38% 30%,#ffc4de,#ef5f9b 52%,#b02862 100%);box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),inset 0 -6px 10px rgba(90,0,40,.45),0 6px 12px rgba(0,0,0,.45)}
.hp.blue,.pc.blue .disc{background:radial-gradient(circle at 38% 30%,#b6d2ff,#3f73da 52%,#173f97 100%);box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),inset 0 -6px 10px rgba(0,20,70,.5),0 6px 12px rgba(0,0,0,.45)}
.ck-hero .hp img{width:70%;height:70%;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.8)}
body.calm .ck-hero{animation:none}
/* game layout */
.ck-wrap{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 2px 6px}
.ck-board-box{flex:none;width:100%;height:calc(var(--bs,320px) * 1.07);display:flex;align-items:center;justify-content:center}
.ck-side{flex:none;width:min(560px,100%);display:flex;flex-direction:column;gap:6px}
.ck-msg{margin:0;min-height:44px;text-align:center;font-size:16px;font-weight:700;color:var(--ink);text-shadow:0 2px 4px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}
.ck-acts{display:flex;gap:8px;justify-content:center}
.ck-acts .gk-btn{flex:1 1 0;max-width:200px}
.pl{flex:none;width:min(560px,100%);display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 12px;border-radius:16px;background:rgba(10,8,30,.7);border:2px solid rgba(255,255,255,.14);transition:border-color .3s,box-shadow .3s}
.pl.turn{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,197,66,.22)}
.pl .av{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:#2a1545}
.pl .tok{width:24px;height:24px;flex:none;border-radius:50%}
.pl .nm{flex:1;min-width:0;font-weight:700;font-size:16px;color:var(--gold2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .nm small{display:block;font-size:13px;color:#cdbfa3;font-weight:700}
.pl .cnt{font-weight:700;font-size:15px;color:#e9dcc0;white-space:nowrap}
.pl .cnt b{color:var(--gold2);font-size:18px}
.style-btn{padding:0 12px;font-size:15px;flex:none}
.style-btn .sw{width:20px;height:20px}
/* Keep "Online checkers" / "Pinky vs Tommy" visible on phone portrait: icon-only theme toggle. */
@media (max-width:640px){
  .style-btn .t{display:none}
  .style-btn{padding:0 10px}
}
/* board */
.ck-board{position:relative;width:var(--bs,320px);height:var(--bs,320px);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:12px;box-shadow:0 0 0 calc(var(--bs,320px) * .022) var(--frame,#fff0f7),0 0 0 calc(var(--bs,320px) * .03) var(--frame2,#c35f92),0 18px 40px rgba(0,0,0,.6);overflow:visible;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ck-board{--lt:#f7bcd5;--dk:#8ec3f2;--frame:#fff0f7;--frame2:#5b84c9}
body.classic .ck-board{--lt:#c8262c;--dk:#1b1b1b;--frame:#3b2414;--frame2:#120a05}
.sq{position:relative;border:0;padding:0;margin:0;background:var(--lt);cursor:default;outline:none}
.sq.d{background:var(--dk);cursor:pointer}
.sq:nth-child(1){border-top-left-radius:12px}.sq:nth-child(8){border-top-right-radius:12px}.sq:nth-child(57){border-bottom-left-radius:12px}.sq:nth-child(64){border-bottom-right-radius:12px}
.sq.last{box-shadow:inset 0 0 0 calc(var(--bs) * .006) rgba(255,214,96,.9);background-image:linear-gradient(rgba(255,214,96,.28),rgba(255,214,96,.28))}
.sq.tgt::after{content:"";position:absolute;left:34%;top:34%;width:32%;height:32%;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 0 3px rgba(20,30,60,.55)}
body.classic .sq.tgt::after{background:rgba(255,214,96,.9);box-shadow:0 0 0 3px rgba(0,0,0,.6)}
.sq:focus-visible{box-shadow:inset 0 0 0 4px #ffe58a,inset 0 0 0 7px #2a1a00;z-index:3}
.pcs{position:absolute;inset:0;pointer-events:none}
.pc{position:absolute;left:0;top:0;width:12.5%;height:12.5%;display:flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.3,.7,.4,1);z-index:2}
.pc .disc{position:relative;width:82%;height:82%;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pc .disc img{width:64%;height:64%;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.85);pointer-events:none}
.pc.red .disc{background:repeating-radial-gradient(circle at 50% 50%,#d9343b 0 7%,#b8222a 7% 9%),#c8262c;box-shadow:inset 0 0 0 3px #ff7a7f,inset 0 -5px 8px rgba(60,0,0,.5),0 5px 10px rgba(0,0,0,.55)}
.pc.black .disc{background:repeating-radial-gradient(circle at 50% 50%,#3a3a3a 0 7%,#222 7% 9%),#2b2b2b;box-shadow:inset 0 0 0 3px #9a9a9a,inset 0 -5px 8px rgba(0,0,0,.6),0 5px 10px rgba(0,0,0,.55)}
.pc.king .disc{box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 3px 0 rgba(0,0,0,.35),0 6px 0 rgba(0,0,0,.25),0 9px 14px rgba(0,0,0,.5)}
.pc .crown{position:absolute;left:50%;top:-14%;width:58%;transform:translateX(-50%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));animation:crownIn .5s cubic-bezier(.2,1.5,.4,1)}
body.classic .pc .crown{top:22%;width:56%}
@keyframes crownIn{from{transform:translate(-50%,-60%) scale(.3);opacity:0}}
.pc.sel .disc{outline:calc(var(--bs) * .008) solid #ffe58a;outline-offset:2px}
.pc.can .disc::after{content:"";position:absolute;inset:-7%;border-radius:50%;border:3px solid #ffe58a;animation:canP 1.8s ease-in-out infinite}
@keyframes canP{0%,100%{opacity:.35}50%{opacity:1}}
.pc.gone{transition:opacity .35s,transform .35s;opacity:0}
.pc.hop{z-index:4}
body.calm .pc{transition:none}
body.calm .pc.can .disc::after{animation:none;opacity:.9}
body.calm .pc .crown{animation:none}
.endc{text-align:center}
.end-face{display:flex;justify-content:center;gap:10px;margin:0 0 4px}
.end-face img{width:96px;height:96px;border-radius:50%;border:4px solid var(--gold);object-fit:cover;background:#2a1545}
.end-why{text-align:center;color:#e9dcc0}
.wbest{color:#bfe9cf!important;font-weight:700;text-align:center}
/* phone landscape: board left, players and controls right */
@media (orientation:landscape) and (max-height:560px){
  .ck-wrap{display:grid;grid-template-columns:auto minmax(220px,340px);grid-template-rows:auto 1fr auto auto;gap:6px 14px;justify-content:center;align-items:stretch;padding:0 calc(var(--sar) + 8px) 4px calc(var(--sal) + 8px)}
  .ck-board-box{grid-column:1;grid-row:1 / span 4;width:var(--bs);height:100%}
  .pl.top{grid-column:2;grid-row:1}.pl.bot{grid-column:2;grid-row:3}
  .ck-side{grid-column:2;grid-row:2;justify-content:center}
  .ck-acts{grid-column:2;grid-row:4}
  .pl{width:100%;min-height:46px}
  .pl .av{width:34px;height:34px}
  .ck-msg{font-size:15px}
}
@media (min-width:1000px) and (min-height:640px){
  .ck-wrap{display:grid;grid-template-columns:auto 340px;grid-template-rows:auto 1fr auto;gap:12px 24px;justify-content:center;padding:6px 20px 12px}
  .ck-board-box{grid-column:1;grid-row:1 / span 3;width:var(--bs);height:100%}
  .pl.top{grid-column:2;grid-row:1}.pl.bot{grid-column:2;grid-row:3}
  .ck-side{grid-column:2;grid-row:2;justify-content:center}
  .pl{width:100%}
}
/* title panel v2: opponents, 1-100 difficulty, online invite */
.mode4{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
.mode4 button{min-height:52px!important;font-size:16px!important}
.mode4 .mf{width:30px;height:30px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.mode4 .mf.pink{background:#ef5f9b}.mode4 .mf.blue{background:#3f73da}
.mode4 .mi{font-size:20px;line-height:1}
.persona{margin:8px 2px 0;font-size:15px;color:#e9dcc0;text-align:center;min-height:20px}
.ck .gk-panel .lbl{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lvw{font-size:15px;color:var(--gold2);text-transform:none;letter-spacing:0}
.lvrow{display:flex;align-items:center;gap:8px}
.lvrow .gk-btn.icon{min-width:44px;min-height:44px;padding:0;font-size:22px}
.lvr{flex:1;min-width:0}
.lvn{width:64px;min-height:44px;border-radius:12px;border:1.5px solid var(--line);background:#1a0d30;color:var(--ink);font:700 18px/1 inherit;font-family:inherit;text-align:center;-moz-appearance:textfield}
.lvn::-webkit-inner-spin-button,.lvn::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.joinrow{display:flex;gap:8px}
.codein{flex:1;min-width:0;min-height:46px;border-radius:12px;border:1.5px solid var(--line);background:#1a0d30;color:var(--ink);font-family:inherit;font-weight:700;font-size:20px;letter-spacing:.18em;text-align:center;text-transform:uppercase}
.codein::placeholder{color:rgba(233,220,192,.35)}
.onl{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:14px;background:rgba(10,8,30,.7);border:1.5px solid rgba(255,229,138,.3)}
.onl.wait{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,197,66,.2)}
.onl-st{margin:0;text-align:center;font-size:15px;font-weight:700;color:#e9dcc0}
.onl-code{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;color:#cdbfa3;font-weight:700}
.onl-code b{font-size:28px;letter-spacing:.2em;color:var(--gold2)}
.onl .ck-acts .gk-btn{max-width:none}
@media (orientation:landscape) and (max-height:560px){
  .ck .gk-title .gk-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;flex:0 1 600px;padding:10px 12px}
  .ck .gk-panel .lbl{margin:4px 0 4px!important}
  .ck .gk-seg button{min-height:42px}
  .mode4 button{min-height:46px!important}
  .ck #btnPlay{margin-top:10px!important}
  .ck .gk-title .gk-brand{flex:0 1 250px}
  .ck-hero .hp{width:88px}
  .onl-code b{font-size:22px}
}
@media (min-width:1000px) and (min-height:640px){
  .ck .gk-title .gk-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;width:min(720px,100%);flex:0 1 720px}
}