/* Taman Ilmu — papan tanda taman permainan: garis tebal, warna rata, bayang keras */
@font-face { font-family: "Baloo 2"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/baloo-2-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/baloo-2-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); }

:root {
  --langit: #e3f3ff;
  --langit-tua: #bfe0f8;
  --rumput: #3f9b5b;
  --rumput-muda: #8fd9a0;
  --matahari: #ffc83d;
  --bunga: #e5384f;
  --bunga-muda: #ffd6db;
  --laut: #2f7de1;
  --laut-muda: #8ec5ff;
  --dakwat: #17284b;
  --senyap: #4b5b7c;
  --bd: 3px solid var(--dakwat);
  --font-display: "Baloo 2", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 400 1.0625rem/1.5 var(--font-body); color: var(--dakwat); background: var(--langit); min-height: 100dvh; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; }
h2 { font-size: 1.6rem; font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--laut); outline-offset: 3px; }
a { color: var(--laut); }

.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; text-decoration: none; color: var(--dakwat); }

/* ---------- Butang & medan ---------- */
.btn {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  border: var(--bd); border-radius: 999px; padding: .35rem 1.15rem; background: var(--matahari);
  box-shadow: 0 4px 0 var(--dakwat); cursor: pointer; text-decoration: none; display: inline-block; color: var(--dakwat);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dakwat); }
.btn.ghost { background: #fff; }
.btn.danger { background: var(--bunga-muda); }
.btn.small { font-size: .9rem; padding: .1rem .8rem; box-shadow: 0 3px 0 var(--dakwat); }
.btn.small:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--dakwat); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: grid; gap: .25rem; }
.field label, .legend { font-weight: 700; }
.field .hint { color: var(--senyap); font-size: .92rem; }
input[type="text"], input[type="password"], input[type="search"], select, textarea {
  border: var(--bd); border-radius: 12px; padding: .5rem .8rem; background: #fff; width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: 1.2rem; height: 1.2rem; accent-color: var(--dakwat); flex: none; }
.check { display: flex; gap: .6rem; align-items: flex-start; }
.error { margin: 0; padding: .5rem .8rem; border: 2px solid var(--dakwat); border-radius: 12px; background: var(--bunga-muda); font-weight: 700; }

/* ---------- Pemilih avatar ---------- */
.picker { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.picker canvas { width: 96px; height: 120px; background: var(--langit); border: var(--bd); border-radius: 18px; }
.picker .group { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.swatch { width: 2rem; height: 2rem; border-radius: 50%; border: var(--bd); cursor: pointer; padding: 0; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--dakwat); }
.chip-btn { border: 2px solid var(--dakwat); border-radius: 999px; background: #fff; padding: .05rem .7rem; cursor: pointer; font-size: .92rem; }
.chip-btn[aria-checked="true"] { background: var(--matahari); font-weight: 700; }
.picker .legend { font-size: .95rem; }

/* ---------- Halaman masuk ---------- */
.auth-page { display: flex; flex-direction: column; }
.top { padding: 1rem clamp(1rem, 4vw, 2.5rem); }
.auth-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 28rem); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding: 1rem clamp(1rem, 4vw, 2.5rem) 2rem; max-width: 1150px; width: 100%; margin: 0 auto; }
.intro .lead { font-size: 1.25rem; max-width: 34rem; margin: 1rem 0 1.25rem; }
.promises { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; max-width: 34rem; }
.promises li { padding-left: 1.9rem; position: relative; }
.promises li::before { content: ""; position: absolute; left: 0; top: .3rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--rumput-muda); border: 2.5px solid var(--dakwat); }
.card { background: #fff; border: var(--bd); border-radius: 22px; padding: 1.25rem; box-shadow: 6px 6px 0 var(--dakwat); }
.auth-card form { display: grid; gap: 1rem; margin-top: 1rem; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border: var(--bd); border-radius: 999px; overflow: hidden; }
.tabs button { border: 0; background: #fff; padding: .4rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--matahari); }
.tabs button + button { border-left: var(--bd); }
.strip { display: block; width: 100%; height: 190px; margin-top: auto; }

/* ---------- Halaman main ---------- */
.play { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.bar { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-bottom: var(--bd); background: #fff; flex-wrap: wrap; }
.bar .spacer { flex: 1; }
.chip { border: 2px solid var(--dakwat); border-radius: 999px; padding: .1rem .75rem; background: var(--langit); font-weight: 700; }

.lobby { flex: 1; overflow: auto; padding: 1.5rem 1rem 2.5rem; }
.lobby-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.lobby h2 { margin-bottom: .25rem; }
.lobby .sub { margin: 0 0 1.25rem; color: var(--senyap); }
.signs { display: grid; gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
.sign {
  position: relative; width: calc(100% - 22px); text-align: left; cursor: pointer; border: var(--bd); border-radius: 14px;
  padding: .75rem 1rem; display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center;
  background: var(--matahari); transition: transform .1s;
}
.sign::after {
  content: ""; position: absolute; right: -16px; top: 50%; width: 26px; height: 26px; background: inherit;
  border-top: var(--bd); border-right: var(--bd); border-radius: 0 6px 0 0; transform: translateY(-50%) rotate(45deg);
}
.sign:hover:not(:disabled) { transform: translateX(5px); }
.sign:disabled { opacity: .55; cursor: not-allowed; }
.sign .emoji { font-size: 2rem; grid-row: span 2; line-height: 1; }
.sign .name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.sign .meta { font-size: .95rem; }
.sign.hangout { background: var(--matahari); }
.sign.matematik { background: var(--laut-muda); }
.sign.bm { background: #ff9aa8; }
.sign.sains { background: var(--rumput-muda); }
.sign.inggeris { background: #cdb8ff; }
.sign.rbt { background: #ffb877; }
.avatar-panel .actions { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }

.play { position: relative; }
.room { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
/* Bilik disorok (bukan display:none) supaya Phaser tidak mengecilkan kanvas jadi 0 */
.room.away { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.stage { padding: 1rem; min-width: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
#game { width: 100%; max-width: 960px; aspect-ratio: 800 / 480; border: var(--bd); border-radius: 18px; overflow: hidden; background: var(--langit-tua); flex: none; }
#game canvas { display: block; touch-action: none; }
.stage .tip { margin: 0; color: var(--senyap); font-size: .95rem; text-align: center; }
.chat { border-left: var(--bd); background: #fff; display: flex; flex-direction: column; min-height: 0; }
.chat h2 { font-size: 1.15rem; padding: .6rem .8rem; border-bottom: 2px solid var(--dakwat); }
.log { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.msg { line-height: 1.35; overflow-wrap: anywhere; }
.msg .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--dakwat); margin-right: .35rem; vertical-align: -1px; }
.msg .who { font-weight: 700; margin-right: .35rem; }
.msg.me .who { color: var(--laut); }
.badge { font-size: .78rem; font-weight: 700; background: var(--matahari); border: 2px solid var(--dakwat); border-radius: 999px; padding: 0 .4rem; margin-right: .35rem; }
.msg .lapor { margin-left: .4rem; font-size: .82rem; background: none; border: 0; padding: 0; color: var(--senyap); text-decoration: underline; cursor: pointer; }
.msg .lapor:hover { color: var(--bunga); }
.msg.system { font-style: italic; color: var(--senyap); font-size: .92rem; }
.composer { border-top: var(--bd); padding: .6rem; display: grid; gap: .4rem; }
.composer .row { display: flex; gap: .5rem; }
.composer .note { margin: 0; font-size: .9rem; color: var(--bunga); font-weight: 700; min-height: 1.2em; }

dialog { border: var(--bd); border-radius: 20px; padding: 1.25rem; max-width: min(92vw, 28rem); background: #fff; color: var(--dakwat); box-shadow: 6px 6px 0 var(--dakwat); }
dialog::backdrop { background: rgba(23, 40, 75, .45); }
dialog h2 { margin-bottom: .6rem; }
dialog form { display: grid; gap: .8rem; }
dialog .row { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.rules { margin: 0 0 .5rem; padding-left: 1.2rem; display: grid; gap: .4rem; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
.opt { display: flex; gap: .6rem; align-items: center; }

.popup { position: fixed; z-index: 50; background: #fff; border: var(--bd); border-radius: 16px; padding: .75rem; box-shadow: 4px 4px 0 var(--dakwat); display: grid; gap: .45rem; min-width: 12rem; }
.popup .who { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.popup .sep { height: 2px; background: var(--dakwat); opacity: .15; }

.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 16px); background: var(--dakwat); color: #fff; border-radius: 999px; padding: .5rem 1.2rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100; max-width: 92vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--bunga); }

/* ---------- Panel moderator ---------- */
.mod-main { max-width: 1050px; margin: 0 auto; padding: 1rem; }
.mod-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.mod-tabs button { border: 2px solid var(--dakwat); border-radius: 999px; background: #fff; padding: .15rem .9rem; cursor: pointer; font-weight: 700; }
.mod-tabs button[aria-selected="true"] { background: var(--matahari); }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.filters select, .filters input { width: auto; min-width: 10rem; }
.list { display: grid; gap: .9rem; }
.rep { background: #fff; border: 2px solid var(--dakwat); border-radius: 14px; padding: .9rem; display: grid; gap: .5rem; }
.rep header { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.rep blockquote { margin: 0; padding: .4rem .7rem; background: var(--langit); border-left: 5px solid var(--bunga); border-radius: 6px; overflow-wrap: anywhere; }
.rep ol { margin: .3rem 0 0; padding-left: 1.2rem; }
.rep .acts { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.rep .acts input { width: 14rem; padding: .2rem .6rem; border-width: 2px; }
.muted { color: var(--senyap); }
table.t { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--dakwat); }
table.t th, table.t td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid #c7d6ea; vertical-align: top; overflow-wrap: anywhere; }
table.t th { background: var(--langit-tua); }
.empty { padding: 1.5rem; text-align: center; background: #fff; border: 2px dashed var(--dakwat); border-radius: 14px; }

@media (max-width: 860px) {
  .auth-main { grid-template-columns: 1fr; }
  .lobby-grid { grid-template-columns: 1fr; }
  .room { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .chat { border-left: 0; border-top: var(--bd); }
  .stage { padding: .5rem; overflow: visible; }
  .stage .tip { display: none; }
  .strip { height: 150px; }
  .bar { padding: .4rem .6rem; gap: .4rem; }
  .bar .wordmark { font-size: 1.2rem; }
  .bar .chip { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .sign, .toast { transition: none; }
}

/* ---------- Fasa 2: kuiz, kemajuan, lencana ---------- */
.lobby-grid .side { display: grid; gap: 1.5rem; }
.progress h3 { font-size: 1.1rem; margin: 1rem 0 .4rem; }
.progress .lv { display: flex; justify-content: space-between; align-items: baseline; margin: .6rem 0 .3rem; }
.lv-num { font: 700 1.5rem/1 var(--font-display); }
.lv-xp { font-weight: 700; color: var(--senyap); }
.muted.sm { font-size: .9rem; margin: .35rem 0 0; }
.badges { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .45rem; }
.badges li { display: flex; align-items: center; gap: .4rem; border: 2px solid var(--dakwat); border-radius: 12px; padding: .3rem .55rem; font-size: .92rem; font-weight: 700; background: var(--matahari); }
.badges li.lock { background: #fff; color: var(--senyap); border-style: dashed; font-weight: 400; }
.badges .be { font-size: 1.2rem; }
.wk { list-style: none; margin: 0; padding: 0; }
.wk li { display: flex; justify-content: space-between; padding: .25rem .1rem; border-bottom: 2px dotted var(--langit-tua); }
.wk li.me { font-weight: 700; background: var(--langit); }
.sign .live { display: inline-block; margin-top: .3rem; padding: .05rem .55rem; border: 2px solid var(--dakwat); border-radius: 99px; background: var(--matahari); font-size: .85rem; font-weight: 700; }

.quiz { width: 100%; max-width: 960px; background: #fff; border: var(--bd); border-radius: 18px; padding: .8rem 1rem; box-shadow: 4px 4px 0 var(--dakwat); display: grid; gap: .5rem; }
.q-title { font: 700 1.25rem/1.2 var(--font-display); margin: 0; }
.q-line { margin: 0; color: var(--senyap); }
.q-line.strong { color: var(--dakwat); font-weight: 700; }
.q-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.q-row .q-line { flex: 1 1 14rem; }
.q-head { display: flex; justify-content: space-between; font-weight: 700; }
.q-bar { height: 12px; border: 2px solid var(--dakwat); border-radius: 99px; background: var(--langit); overflow: hidden; }
.q-fill { height: 100%; width: 0; background: var(--rumput); border-right: 2px solid var(--dakwat); }
.q-text { font: 700 1.3rem/1.25 var(--font-display); margin: .2rem 0; }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.q-opt { display: flex; align-items: center; gap: .6rem; text-align: left; font: inherit; font-weight: 700; color: var(--dakwat); background: #fff; border: var(--bd); border-radius: 14px; padding: .55rem .7rem; cursor: pointer; box-shadow: 3px 3px 0 var(--dakwat); min-height: 3rem; }
.q-opt:hover:not(:disabled) { background: var(--langit); }
.q-opt:focus-visible { outline: 4px solid var(--matahari); outline-offset: 2px; }
.q-opt:disabled { cursor: default; box-shadow: none; color: var(--dakwat); opacity: 1; }
.q-opt.picked { background: var(--laut-muda); }
.q-opt.right { background: var(--rumput-muda); }
.q-opt.wrong { background: var(--bunga-muda); }
.q-key { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 2px solid var(--dakwat); border-radius: 50%; background: var(--matahari); font-family: var(--font-display); }
.q-verdict { margin: 0; font-weight: 700; font-size: 1.1rem; }
.q-verdict.ok { color: #1d6a38; }
.q-verdict.no { color: var(--bunga); }
.q-explain { margin: 0; padding: .4rem .7rem; border-left: 5px solid var(--matahari); background: #fffbea; }
.q-teams { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.q-team { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; border: 2px solid var(--dakwat); border-radius: 12px; padding: .3rem .7rem; }
.q-team.matahari { background: #fff1c2; }
.q-team.laut { background: #d9ecff; }
.q-team.mine { box-shadow: 3px 3px 0 var(--dakwat); }
.q-team-name { font-weight: 700; }
.q-team-score { font: 700 1.4rem/1 var(--font-display); margin-left: auto; }
.q-team-count { font-size: .85rem; color: var(--senyap); }
.q-sub { margin: .2rem 0 0; font-weight: 700; }
.q-top { margin: 0; padding-left: 1.4rem; }
.q-result { display: grid; gap: .5rem; justify-items: start; }
.q-xp { font: 700 1.3rem/1 var(--font-display); margin: 0; color: #1d6a38; }
.q-levelup, .q-badge { margin: 0; font-weight: 700; padding: .2rem .7rem; border: 2px solid var(--dakwat); border-radius: 99px; background: var(--matahari); }
@media (max-width: 760px) {
  .q-options { grid-template-columns: 1fr; }
  .quiz { padding: .6rem .7rem; }
  .q-text { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: no-preference) { .q-fill { transition: width .12s linear; } }
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.qform { display: grid; gap: .5rem; align-content: start; background: #fff; border: var(--bd); border-radius: 16px; padding: 1rem; }
.qform h3 { font-size: 1.2rem; }
.qform .btn { justify-self: start; }
.qopt { display: flex; gap: .5rem; align-items: center; }
.qopt input[type="radio"] { width: 1.3rem; height: 1.3rem; flex: none; accent-color: var(--rumput); }
table.t .ans { color: #1d6a38; font-weight: 700; }
table.t td .btn { white-space: nowrap; }
.temp-pass { font: 700 1.8rem/1 var(--font-display); letter-spacing: .08em; background: var(--matahari); border: 2px solid var(--dakwat); border-radius: 12px; padding: .6rem 1rem; user-select: all; text-align: center; }
.account .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
dialog > .btn { margin-top: .6rem; }

/* ---------- Pendaftaran roster ---------- */
.who { border: 0; padding: 0; margin: 0; display: flex; gap: 1.5rem; align-items: center; }
.who .legend { padding: 0; margin-right: .5rem; }
.linklike { background: none; border: 0; padding: .6rem 0 0; color: var(--senyap); text-decoration: underline; cursor: pointer; font-size: .95rem; }
.auth-card form[hidden], .auth-card [hidden] { display: none !important; }

/* ---------- Permainan mini (Teka Perkataan, Kira Pantas) ---------- */
.gamebar { width: 100%; max-width: 960px; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: #fff; border: var(--bd); border-radius: 18px; padding: .5rem 1rem; box-shadow: 4px 4px 0 var(--dakwat); }
.g-label { font-weight: 700; color: var(--senyap); margin-right: .2rem; }
.game-dlg { width: min(92vw, 26rem); max-height: 94dvh; overflow-y: auto; }
#game-body { display: grid; gap: .7rem; }
.g-title { font-size: 1.5rem; }
.g-line { margin: 0; color: var(--senyap); }
.g-line.strong { color: var(--dakwat); font-weight: 700; }
.g-msg { margin: 0; min-height: 1.4em; font-weight: 700; color: var(--bunga); }
.g-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.g-reward { display: grid; gap: .4rem; justify-items: start; }
.g-result { display: grid; gap: .5rem; justify-items: start; }
/* grid teka perkataan */
.g-grid { display: grid; gap: .35rem; justify-content: center; }
.g-row { display: grid; grid-template-columns: repeat(5, 2.7rem); gap: .35rem; }
.g-tile { height: 2.7rem; display: grid; place-items: center; border: 3px solid var(--dakwat); border-radius: 10px; background: #fff; font: 700 1.4rem/1 var(--font-display); text-transform: uppercase; }
.g-tile[data-s="c"] { background: var(--rumput-muda); }
.g-tile[data-s="p"] { background: var(--matahari); }
.g-tile[data-s="a"] { background: #d7dbe5; color: var(--senyap); }
/* tanda tambahan supaya tidak bergantung pada warna sahaja */
.g-tile[data-s="p"] { border-style: dashed; }
.g-tile[data-s="a"] { border-style: dotted; }
.g-kb { display: grid; gap: .35rem; }
.g-krow { display: flex; gap: .25rem; justify-content: center; }
.g-key { font: 700 1rem/1 var(--font-body); color: var(--dakwat); background: #fff; border: 2px solid var(--dakwat); border-radius: 8px; min-width: 1.9rem; height: 2.6rem; padding: 0 .3rem; cursor: pointer; flex: 1 1 0; max-width: 2.5rem; }
.g-key.wide { max-width: 3.6rem; flex: 1.5 1 0; }
.g-key:hover { background: var(--langit); }
.g-key:focus-visible { outline: 4px solid var(--matahari); outline-offset: 2px; }
.g-key[data-s="c"] { background: var(--rumput-muda); }
.g-key[data-s="p"] { background: var(--matahari); }
.g-key[data-s="a"] { background: #d7dbe5; color: var(--senyap); }
/* kira pantas */
.g-q { margin: .2rem 0 0; font: 700 2.4rem/1.1 var(--font-display); text-align: center; }
.g-ans { min-height: 3.6rem; display: grid; place-items: center; border: 3px solid var(--dakwat); border-radius: 14px; background: #fff; font: 700 2rem/1 var(--font-display); }
.g-ans.ok { background: var(--rumput-muda); }
.g-ans.no { background: var(--bunga-muda); }
.g-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.g-key.big { max-width: none; height: 3.4rem; font-size: 1.4rem; border-radius: 12px; box-shadow: 3px 3px 0 var(--dakwat); }
.g-top .q-top { margin: .2rem 0 0; }
@media (max-width: 420px) {
  .g-row { grid-template-columns: repeat(5, 2.4rem); }
  .g-tile { height: 2.4rem; font-size: 1.2rem; }
  .g-key { height: 2.4rem; }
}
@media (prefers-reduced-motion: no-preference) { .g-ans.ok, .g-ans.no { animation: g-pop .18s ease-out; } @keyframes g-pop { from { transform: scale(.96); } to { transform: scale(1); } } }
.g-opts { grid-template-columns: 1fr; }

/* ---------- Lukis dan Teka ---------- */
.dr-hint { margin: 0; font: 700 1.6rem/1.2 var(--font-display); letter-spacing: .08em; text-align: center; }
.dr-wrap { justify-self: center; width: 100%; max-width: 440px; border: var(--bd); border-radius: 14px; overflow: hidden; background: #fff; }
.dr-canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; touch-action: none; cursor: crosshair; background: #fff; }
.dr-tools { display: grid; gap: .5rem; justify-items: center; }
.dr-colors, .dr-sizes, .dr-acts { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; }
.dr-sw { width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid var(--dakwat); cursor: pointer; padding: 0; }
.dr-sw.on, .dr-size.on { outline: 4px solid var(--matahari); outline-offset: 2px; }
.dr-size { width: 2.2rem; height: 2.2rem; border-radius: 10px; border: 2px solid var(--dakwat); background: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.dr-size span { display: block; border-radius: 50%; background: var(--dakwat); }
.dr-sw:focus-visible, .dr-size:focus-visible { outline: 4px solid var(--matahari); outline-offset: 2px; }
.dr-guess { display: flex; gap: .5rem; max-width: 440px; width: 100%; justify-self: center; }
.dr-guess input { flex: 1 1 auto; min-width: 0; font: inherit; padding: .5rem .8rem; border: var(--bd); border-radius: 12px; }
.dr-info { display: grid; gap: .3rem; }