/* Halaman Game: Tic-Tac-Toe, Pong, Sudoku, Snake. Semua warna memakai variabel tema (terang/gelap + warna tema). */

.gm .tabs{margin-bottom:1.6rem}
@media (max-width:34rem){
  .gm .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .gm .tabs .tab{padding-inline:.15rem;font-size:.84rem;text-align:center;white-space:nowrap}
}
@media (max-width:27rem){
  .gm .tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm .tabs .tab{padding-block:.8rem;font-size:.95rem}
}
/* ponsel: tombol CivilAI melayang disembunyikan di halaman game agar tidak menutupi papan (buka lewat menu samping) */
@media (max-width:52rem){html.is-game .chat-fab{display:none}}
.gpanel[hidden]{display:none}
.g-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.25rem,3.5vw,2.5rem);align-items:start}
.g-layout--sdk{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.g-stage,.g-side{min-width:0}
.g-status{min-height:2.9rem;margin:0 0 1rem;font:800 1.5rem/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.g-opts{margin-bottom:1rem}
.g-opts .fld select:disabled{opacity:.5;cursor:not-allowed}
.g-score{display:grid;grid-template-columns:repeat(auto-fit,minmax(4rem,1fr));margin:0 0 1.2rem;border-top:2px solid var(--ink)}
.g-score>div{padding:.55rem .6rem .55rem 0;border-bottom:1px solid var(--line)}
.g-score dt{color:var(--ink-2);font-weight:600;font-size:.82rem}
.g-score dd{margin:0;font:800 1.9rem/1.1 var(--font-display)}
.gm .actions{margin-top:1.1rem}
.gm .note{margin-top:1.1rem;font-size:.95rem}
.tab:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- Tic-Tac-Toe ---------- */
.ttt{display:grid;grid-template-rows:repeat(3,1fr);width:min(100%,24rem);aspect-ratio:1;margin-inline:auto;border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--accent)}
.ttt__r{display:grid;grid-template-columns:repeat(3,1fr)}
.ttt__c{position:relative;display:grid;place-items:center;min-width:0;padding:0;border:0;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--paper-hi);color:var(--ink);cursor:pointer;transition:background .15s}
.ttt__r:last-child .ttt__c{border-bottom:0}
.ttt__c:nth-child(3){border-right:0}
.ttt__c:not([aria-disabled="true"]):hover{background:var(--paper)}
.ttt__c[aria-disabled="true"]{cursor:default}
.ttt__c:focus-visible{outline:3px solid var(--accent);outline-offset:-6px}
.ttt__c svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;animation:g-pop .22s var(--ease)}
.ttt__c.is-o{color:var(--accent-text)}
.ttt__c.is-win{background:var(--accent);color:var(--on-accent)}
@keyframes g-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---------- Pong ---------- */
.pong{position:relative;width:min(100%,24rem);margin-inline:auto;border:2px solid var(--ink);background:var(--paper-hi);box-shadow:6px 6px 0 var(--accent)}
.pong canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;touch-action:none;cursor:ew-resize}
.pong canvas:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.g-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(var(--ink-rgb),.5)}
.g-overlay[hidden]{display:none}
html[data-theme="dark"] .g-overlay{background:rgba(0,0,0,.62)}
.g-overlay__box{max-width:17rem;padding:1.1rem 1.25rem 1.25rem;text-align:center;background:var(--paper-hi);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--accent)}
.g-overlay__box strong{display:block;margin-bottom:.5rem;font:800 2.1rem/1 var(--font-display);text-transform:uppercase}
.g-overlay__box p{margin:0 0 1rem;font-size:.95rem}

/* ---------- Snake ---------- */
.snk{position:relative;width:min(100%,26rem);margin-inline:auto;border:2px solid var(--ink);background:var(--paper-hi);box-shadow:6px 6px 0 var(--accent)}
.snk canvas{display:block;width:100%;height:auto;aspect-ratio:1;touch-action:none}
.snk canvas:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* tombol arah: hanya di layar sentuh (di komputer cukup tombol panah atau W A S D) */
.snk-pad{display:none;grid-template-columns:repeat(3,3.6rem);grid-template-areas:". u ." "l . r" ". d .";gap:.4rem;justify-content:center;margin:1.5rem auto .25rem}
@media (pointer:coarse){.snk-pad{display:grid}}
.snk-pad button{display:grid;place-items:center;width:3.6rem;height:3.6rem;padding:0;color:var(--ink);background:var(--paper-hi);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--accent);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.snk-pad button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--accent);background:var(--accent);color:var(--on-accent)}
.snk-pad svg{width:26px;height:26px;fill:currentColor;stroke:none}
.snk-pad__u{grid-area:u}.snk-pad__l{grid-area:l}.snk-pad__d{grid-area:d}.snk-pad__r{grid-area:r}
.snk-pad button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- Sudoku ---------- */
.sdk{display:grid;grid-template-rows:repeat(9,1fr);width:min(100%,32rem);aspect-ratio:1;margin-inline:auto;border:3px solid var(--ink);background:var(--paper-hi);box-shadow:6px 6px 0 var(--accent)}
.sdk__r{display:grid;grid-template-columns:repeat(9,1fr)}
.sdk__c{position:relative;display:grid;place-items:center;min-width:0;padding:0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;color:var(--accent-text);font:700 clamp(1.05rem,4.2vw,1.7rem)/1 var(--font-body);cursor:pointer}
.sdk__r:last-child .sdk__c{border-bottom:0}
.sdk__c:last-child{border-right:0}
.sdk__c.b-r{border-right:3px solid var(--ink)}
.sdk__c.b-b{border-bottom:3px solid var(--ink)}
.sdk__r:last-child .sdk__c.b-b{border-bottom:0}
.sdk__c.is-given{color:var(--ink);font-weight:800}
.sdk__c.is-hint{color:var(--ink);background:rgba(var(--accent-rgb),.1)}
.sdk__c.is-peer{background:rgba(var(--ink-rgb),.07)}
.sdk__c.is-same{background:rgba(var(--accent-rgb),.24)}
.sdk__c.is-sel{background:rgba(var(--accent-rgb),.34);box-shadow:inset 0 0 0 3px var(--accent)}
.sdk__c:focus-visible{outline:3px solid var(--ink);outline-offset:-5px}
.sdk__c.is-err{background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.3) 0 4px,transparent 4px 8px)}
.sdk__c.is-err .v{color:var(--ink);text-decoration:underline wavy var(--accent);text-decoration-thickness:2px;text-underline-offset:.18em}
.sdk__c.is-wrong{background:var(--accent)}
.sdk__c.is-wrong .v{color:var(--on-accent)}
.sdk .nt{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:2px;font:600 clamp(.5rem,1.6vw,.7rem)/1 var(--font-body);color:var(--ink-2)}
.sdk .nt i{display:grid;place-items:center;font-style:normal}

.sdk-pad{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:.3rem;margin:0 0 .8rem}
.sdk-pad__b{position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:2.3rem;padding:0;border:2px solid var(--ink);background:var(--paper-hi);color:var(--ink);font:800 1.3rem/1 var(--font-display);cursor:pointer;transition:background .12s,transform .12s}
.sdk-pad__b:hover{background:var(--paper);transform:translateY(-2px)}
.sdk-pad__b small{position:absolute;right:3px;bottom:1px;font:600 .6rem/1 var(--font-body);color:var(--ink-2)}
.sdk-pad__b.is-done{opacity:.4}
.sdk-tools{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.sdk-tools .tab{padding:.6rem .8rem;font-size:.92rem}

/* ---------- Responsif ---------- */
@media (max-width:52rem){
  .g-layout,.g-layout--sdk{grid-template-columns:minmax(0,1fr)}
  .g-status{min-height:2.4rem}
}
@media (max-width:34rem){
  .gm.plate{padding:1.05rem .8rem 1.2rem}
}
@media (max-width:30rem){
  .sdk-pad{gap:.2rem}
  .sdk-pad__b{min-height:2.6rem;font-size:1.1rem}
  .g-score dd{font-size:1.6rem}
  .g-status{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){ .ttt__c svg{animation:none} .sdk-pad__b:hover{transform:none} }
html[data-motion="reduce"] .ttt__c svg{animation:none}
html[data-motion="reduce"] .sdk-pad__b:hover{transform:none}