/* ============================================================
   Adu Gambar — tema "kertas ujian dinilai"
   Palet crayon di atas kertas grid, skor dicap merah ala guru.
   ============================================================ */
:root{
  --paper:#FCFBF6;
  --grid:rgba(64,92,160,.09);
  --ink:#242742;
  --ink-soft:#5b5f7a;
  --grape:#6C4AB6;
  --grape-dk:#553a92;
  --pink:#FF5DA2;
  --teal:#12B5A5;
  --sun:#FFC93C;
  --red:#F0432E;
  --line:#2427421a;
  --shadow:0 3px 0 #2427421f, 0 10px 24px -12px #24274255;
}

*{box-sizing:border-box}
/* Pastikan atribut `hidden` selalu menang atas aturan .display di class
   (mis. .veil{display:grid}, .host-bar{display:flex}). Tanpa ini, elemen
   yang "disembunyikan" JavaScript tetap terlihat. */
[hidden]{display:none!important}
html,body{margin:0}
body{
  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/26px 26px,
    var(--paper);
  min-height:100vh;
}
h1,h2,h3,.card-title,.brand,.prompt-word{font-family:"Baloo 2",system-ui,sans-serif}

.eyebrow{
  font-family:"Baloo 2";font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.72rem;color:var(--grape);margin:0 0 .4rem;
}
.eyebrow.center,.card-title.center{text-align:center}
.hint{color:var(--ink-soft);font-size:.95rem}
.center-actions{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:1.4rem}

/* ---------- Buttons ---------- */
.btn{
  font-family:"Baloo 2";font-weight:700;font-size:1rem;cursor:pointer;
  border:2.5px solid var(--ink);border-radius:16px;padding:.7rem 1.4rem;
  background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink);
  transition:transform .05s ease,box-shadow .05s ease;
}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn-primary{background:var(--grape);color:#fff;box-shadow:0 4px 0 var(--grape-dk)}
.btn-primary:active{box-shadow:0 0 0 var(--grape-dk)}
.btn-go{background:var(--sun);color:var(--ink);font-size:1.15rem;padding:.85rem 2rem}
.btn-go:active{box-shadow:0 0 0 var(--ink)}
.btn-ghost{background:#fff}
.btn.big{font-size:1.1rem;padding:.8rem 1.8rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:1rem;padding:.8rem 1.2rem;
  border-bottom:2.5px dashed var(--line);position:sticky;top:0;z-index:20;
  background:var(--paper);
}
.brand{font-weight:800;font-size:1.25rem}
.round-chip{
  font-family:"Space Mono";font-size:.8rem;background:var(--teal);color:#04302b;
  padding:.25rem .7rem;border-radius:999px;border:2px solid #04302b33;
}
.logout{margin-left:auto;color:var(--ink-soft);text-decoration:none;font-weight:700;font-size:.9rem}
.logout:hover{color:var(--red)}

.app{max-width:940px;margin:0 auto;padding:1.6rem 1.1rem 4rem}
.view{animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:3px solid var(--ink);border-radius:24px;
  padding:1.6rem;box-shadow:var(--shadow);max-width:560px;margin:1.5rem auto;
}
.card-title{font-size:1.7rem;margin:.1rem 0 1rem}

/* ---------- Login ---------- */
.login-body{display:grid;place-items:center;padding:1.2rem}
.login-card{
  background:#fff;border:3px solid var(--ink);border-radius:28px;
  padding:2.2rem 2rem;max-width:420px;width:100%;text-align:center;
  box-shadow:var(--shadow);position:relative;
}
.login-badge{
  width:66px;height:66px;border-radius:20px;display:grid;place-items:center;
  font-size:2rem;background:var(--sun);border:3px solid var(--ink);
  margin:-3.4rem auto 1rem;transform:rotate(-6deg);box-shadow:0 4px 0 var(--ink);
}
.login-title{font-size:2.4rem;margin:.1rem 0 .3rem}
.login-sub{color:var(--ink-soft);margin:0 0 1.3rem}
.login-form{display:flex;flex-direction:column;gap:.9rem;text-align:left}
.login-form label,.field{display:flex;flex-direction:column;gap:.35rem;font-weight:700;font-size:.9rem}
input[type=text],input[type=password],.field input{
  font:inherit;font-weight:600;padding:.7rem .9rem;border:2.5px solid var(--ink);
  border-radius:14px;background:#FCFCFF;
}
input:focus{outline:3px solid var(--grape);outline-offset:1px}
.login-form .btn{margin-top:.4rem}

.alert{
  background:#FFE7E3;border:2.5px solid var(--red);color:#8a1c0f;
  border-radius:14px;padding:.7rem .9rem;font-weight:700;margin:0 0 1rem;font-size:.9rem;
}

/* ---------- Lobby ---------- */
.join-box{display:flex;gap:.6rem;align-items:flex-end;margin-bottom:1.2rem}
.join-box .field{flex:1}
.player-list{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.55rem}
.player-list li{
  display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.05rem;
  background:#FCFCFF;border:2.5px solid var(--ink);border-radius:14px;padding:.55rem .8rem;
}
.player-list .tag{
  font-family:"Baloo 2";font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--pink);color:#fff;padding:.1rem .5rem;border-radius:999px;margin-left:auto;
}
.player-list .tag.you{background:var(--teal);color:#04302b}
.avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem}

/* ---------- Drawing ---------- */
.prompt-stamp{
  text-align:center;margin:.4rem auto 1.4rem;max-width:640px;
  border:3px dashed var(--grape);border-radius:20px;padding:.9rem 1rem;
  background:#fff;transform:rotate(-.6deg);box-shadow:var(--shadow);
}
.prompt-eyebrow{
  display:block;font-family:"Baloo 2";font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:.7rem;color:var(--grape);
}
.prompt-word{display:block;font-size:2.3rem;line-height:1.1;margin-top:.15rem;text-transform:capitalize}

.stage{display:flex;flex-direction:column;align-items:center;gap:1rem}
.canvas-wrap{position:relative;width:100%;max-width:760px}
#pad{
  width:100%;height:auto;display:block;background:#fff;border-radius:18px;
  border:3px solid var(--ink);box-shadow:var(--shadow);touch-action:none;cursor:crosshair;
}
.veil{position:absolute;inset:0;background:#fffffff2;border-radius:18px;display:grid;place-items:center}
.veil-inner{text-align:center;font-weight:800}
.veil-check{
  width:74px;height:74px;border-radius:50%;background:var(--teal);color:#fff;
  font-size:2.6rem;display:grid;place-items:center;margin:0 auto .6rem;border:3px solid #04302b;
}

.toolbar{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:center;
  background:#fff;border:3px solid var(--ink);border-radius:20px;padding:.7rem .9rem;
  box-shadow:var(--shadow);width:100%;max-width:760px;
}
.tool-group{display:flex;gap:.4rem}
.tool{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;font-family:"Baloo 2";
  font-weight:700;font-size:.72rem;cursor:pointer;background:#FCFCFF;
  border:2.5px solid var(--ink);border-radius:14px;padding:.45rem .7rem;min-width:64px;
}
.tool span{line-height:1}
.tool.active{background:var(--grape);color:#fff}
.tool.ghost{background:#fff}
.size-field{display:flex;flex-direction:column;font-weight:700;font-size:.72rem;gap:.2rem;font-family:"Baloo 2"}
.size-field input{width:120px}
.toolbar .btn.big{margin-left:auto}

.status-row{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:0;margin:1.3rem 0 0}
.status-row li{
  font-weight:800;font-size:.85rem;background:#fff;border:2.5px solid var(--ink);
  border-radius:999px;padding:.3rem .8rem;display:flex;align-items:center;gap:.4rem;
}
.status-row li.done{background:var(--teal);color:#04302b}
.status-row .mini{width:14px;height:14px;border-radius:50%;background:var(--line)}
.status-row li.done .mini{background:#04302b;color:#fff}

/* ---------- Scoring ---------- */
.scoring{text-align:center;padding:3rem 1rem;max-width:520px;margin:2rem auto}
.loupe{font-size:3.4rem;animation:sway 1.4s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateX(-10px) rotate(-8deg)}50%{transform:translateX(10px) rotate(8deg)}}
.dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.2rem}
.dots span{width:12px;height:12px;border-radius:50%;background:var(--grape);animation:bounce .9s infinite}
.dots span:nth-child(2){animation-delay:.15s;background:var(--pink)}
.dots span:nth-child(3){animation-delay:.3s;background:var(--teal)}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Result ---------- */
.result-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1.1rem;margin-top:1.4rem;
}
.rcard{
  position:relative;background:#fff;border:3px solid var(--ink);border-radius:20px;
  padding:.7rem;box-shadow:var(--shadow);
}
.rcard.win{border-color:var(--sun);box-shadow:0 0 0 4px var(--sun),var(--shadow)}
.rcard img{width:100%;border-radius:12px;display:block;background:#fff;border:2px solid var(--line)}
.rcard .who{font-weight:800;margin:.5rem .1rem .1rem;display:flex;align-items:center;gap:.4rem}
.rcard .reason{color:var(--ink-soft);font-size:.85rem;margin:.1rem;min-height:2.2em}
.score-stamp{
  position:absolute;top:-14px;right:-10px;width:64px;height:64px;transform:rotate(9deg);
  font-family:"Baloo 2";font-weight:800;color:var(--red);display:grid;place-items:center;
}
.score-stamp svg{position:absolute;inset:0}
.score-stamp b{position:relative;font-size:1.5rem;line-height:1}
.crown{font-size:1.1rem}
.ribbon{
  position:absolute;top:.5rem;left:.5rem;background:var(--sun);border:2px solid var(--ink);
  font-family:"Baloo 2";font-weight:800;font-size:.65rem;padding:.15rem .5rem;border-radius:8px;
  text-transform:uppercase;letter-spacing:.08em;
}

/* ---------- Podium ---------- */
.podium{list-style:none;padding:0;max-width:520px;margin:1.6rem auto 0;display:flex;flex-direction:column;gap:.7rem}
.podium li{
  display:flex;align-items:center;gap:.8rem;background:#fff;border:3px solid var(--ink);
  border-radius:16px;padding:.7rem 1rem;font-weight:800;box-shadow:var(--shadow);
}
.podium .rank{font-family:"Baloo 2";font-size:1.4rem;width:2rem;text-align:center}
.podium .pts{margin-left:auto;font-family:"Space Mono";font-size:1.1rem;color:var(--grape)}
.podium li:first-child{background:linear-gradient(180deg,#fff,#FFF7E0);border-color:var(--sun)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-weight:700;padding:.7rem 1.1rem;border-radius:14px;
  box-shadow:var(--shadow);z-index:50;max-width:90vw;text-align:center;
}

@media(max-width:560px){
  .prompt-word{font-size:1.8rem}
  .toolbar .btn.big{margin-left:0;width:100%}
  .join-box{flex-direction:column;align-items:stretch}
}

/* ---------- Host controls ---------- */
.host-bar{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  max-width:940px;margin:.7rem auto 0;padding:.55rem .9rem;
  background:#FFF7E0;border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:var(--shadow);
}
.host-tag{font-family:"Baloo 2";font-weight:800;font-size:.8rem;letter-spacing:.04em;margin-right:.2rem}
.hbtn{
  font-family:"Baloo 2";font-weight:700;font-size:.85rem;cursor:pointer;
  background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:.4rem .8rem;
  box-shadow:0 3px 0 var(--ink);transition:transform .05s ease,box-shadow .05s ease;
}
.hbtn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.hbtn.danger{background:#FFE7E3;color:#8a1c0f;border-color:var(--red);box-shadow:0 3px 0 var(--red)}
.hbtn.danger:active{box-shadow:0 0 0 var(--red)}

.kick-btn{
  margin-left:auto;width:26px;height:26px;flex:0 0 auto;cursor:pointer;
  font-family:"Baloo 2";font-weight:800;font-size:.85rem;line-height:1;
  background:#FFE7E3;color:var(--red);border:2px solid var(--red);border-radius:8px;
}
.kick-btn:hover{background:var(--red);color:#fff}
.kick-btn.small{width:22px;height:22px;font-size:.75rem;margin-left:.2rem}

/* ---------- Gallery button & modal ---------- */
.topbtn{
  font-family:"Baloo 2";font-weight:700;font-size:.9rem;cursor:pointer;
  background:var(--teal);color:#04302b;border:2.5px solid #04302b;border-radius:12px;
  padding:.35rem .75rem;box-shadow:0 3px 0 #04302b;margin-left:auto;
}
.topbtn:active{transform:translateY(3px);box-shadow:0 0 0 #04302b}
.topbar .logout{margin-left:.8rem}

.modal{position:fixed;inset:0;z-index:100;background:#242742cc;display:grid;place-items:center;padding:1rem}
.modal-card{
  background:var(--paper);border:3px solid var(--ink);border-radius:22px;
  width:min(960px,96vw);max-height:90vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow);overflow:hidden;
}
.modal-head{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;
  border-bottom:2.5px dashed var(--line);
}
.modal-head h3{margin:0;font-size:1.3rem}
.modal-x{
  margin-left:auto;width:34px;height:34px;cursor:pointer;font-weight:800;font-size:1rem;
  background:#fff;border:2.5px solid var(--ink);border-radius:10px;box-shadow:0 3px 0 var(--ink);
}
.modal-x:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.gallery-tools{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.2rem 0}
.gallery-tools input{
  flex:1;font:inherit;font-weight:600;padding:.55rem .8rem;border:2.5px solid var(--ink);
  border-radius:12px;background:#fff;
}
.gallery-count{font-family:"Space Mono";font-size:.8rem;color:var(--ink-soft);white-space:nowrap}

.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;
  padding:1rem 1.2rem 1.4rem;overflow-y:auto;
}
.gcard{
  position:relative;background:#fff;border:3px solid var(--ink);border-radius:16px;
  padding:.6rem;box-shadow:var(--shadow);
}
.gcard.win{border-color:var(--sun);box-shadow:0 0 0 3px var(--sun),var(--shadow)}
.gcard img{width:100%;border-radius:10px;display:block;background:#fff;border:2px solid var(--line)}
.gscore{position:absolute;top:-12px;right:-8px;width:54px;height:54px;transform:rotate(9deg);display:grid;place-items:center}
.gscore svg{position:absolute;inset:0}
.gscore b{position:relative;font-family:"Baloo 2";font-weight:800;color:var(--red);font-size:1.25rem}
.gmeta{margin-top:.5rem}
.gname{font-weight:800;font-size:1rem}
.gprompt{color:var(--grape);font-weight:700;font-size:.85rem;text-transform:capitalize}
.greason{color:var(--ink-soft);font-size:.82rem;margin-top:.15rem;min-height:2.2em}
.gwhen{font-family:"Space Mono";font-size:.7rem;color:var(--ink-soft);margin-top:.3rem}

/* ---------- Menu / pilihan game ---------- */
.brand-link{text-decoration:none;color:var(--ink)}
.brand-link:hover{color:var(--grape)}
.role-chip{
  font-family:"Space Mono";font-size:.72rem;background:var(--grape);color:#fff;
  padding:.22rem .6rem;border-radius:999px;
}
.topbar .role-chip{margin-left:.2rem}

.menu-app{max-width:1000px}
.menu-hero{text-align:center;margin:1.4rem auto 1.8rem}
.menu-title{font-size:2.2rem;margin:.1rem 0 .4rem}
.menu-sub{color:var(--ink-soft);max-width:520px;margin:0 auto}

.menu-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;
}
.game-card{
  position:relative;background:#fff;border:3px solid var(--ink);border-radius:22px;
  padding:1.2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem;
  border-top:8px solid var(--accent);
}
.game-card.soon{opacity:.72}
.game-emoji{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:1.8rem;
  background:color-mix(in srgb, var(--accent) 18%, #fff);border:2.5px solid var(--ink);
}
.game-badge{
  position:absolute;top:1rem;right:1rem;font-family:"Baloo 2";font-weight:800;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;
  background:#EDEDF2;color:var(--ink-soft);border:2px solid var(--line);
}
.game-badge.on{background:var(--teal);color:#04302b;border-color:#04302b33}
.game-name{font-size:1.35rem;margin:.2rem 0 0}
.game-desc{color:var(--ink-soft);font-size:.9rem;margin:0;flex:1}
.game-foot{display:flex;align-items:center;gap:.6rem;margin-top:.6rem}
.game-players{font-family:"Space Mono";font-size:.75rem;color:var(--ink-soft)}
.game-foot .btn{margin-left:auto;font-size:.92rem;padding:.55rem 1.1rem}

@media(max-width:560px){
  .menu-title{font-size:1.7rem}
}

/* ---------- Tebak Jawaban ---------- */
.tj-question{font-size:1.7rem;line-height:1.2;text-transform:none}
.tj-answer-card{max-width:560px}
.tj-wait{text-align:center;font-weight:800;padding:.5rem}
.tj-wait .veil-check{width:64px;height:64px;font-size:2.2rem;margin:0 auto .5rem}
.avatar.sm{width:24px;height:24px;font-size:.75rem;border-radius:7px}

.tj-guess-list,.tj-reveal-list{display:flex;flex-direction:column;gap:.9rem;max-width:640px;margin:1.2rem auto 0}
.tj-guess,.tj-reveal{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:.9rem 1rem;box-shadow:var(--shadow)}
.tj-guess.mine{background:#FFF7E0}
.tj-ans{font-weight:800;font-size:1.05rem;margin-bottom:.6rem}
.tj-picks{display:flex;flex-wrap:wrap;gap:.5rem}
.tj-pick{
  font-family:"Baloo 2";font-weight:700;font-size:.9rem;cursor:pointer;
  background:#FCFCFF;border:2.5px solid var(--ink);border-radius:12px;padding:.4rem .85rem;
}
.tj-pick.sel{background:var(--grape);color:#fff}
.tj-pick-mine{color:var(--ink-soft);font-weight:700;font-style:italic}
.tj-author{display:flex;align-items:center;gap:.5rem;font-weight:800;color:var(--grape)}

.tj-sub{text-align:center;font-family:"Baloo 2";margin:1.6rem 0 .6rem}
.tj-scores{list-style:none;padding:0;max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:.5rem}
.tj-scores li{display:flex;justify-content:space-between;background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:.5rem .9rem;font-weight:800}
.tj-pts{font-family:"Space Mono";color:var(--teal)}

/* ---------- Mata-Mata ---------- */
.mm-word-card{
  max-width:520px;margin:.6rem auto 1.2rem;text-align:center;background:#fff;
  border:3px solid var(--ink);border-radius:20px;padding:1.1rem;box-shadow:var(--shadow);
}
.mm-word-card.spy{background:#2b2340;border-color:#2b2340;color:#fff}
.mm-word-label{display:block;font-family:"Baloo 2";font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;color:var(--grape)}
.mm-word-card.spy .mm-word-label{color:var(--sun)}
.mm-word{display:block;font-family:"Baloo 2";font-size:2.2rem;font-weight:800;margin:.2rem 0}
.mm-word-note{display:block;font-size:.82rem;color:var(--ink-soft)}
.mm-word-card.spy .mm-word-note{color:#c9c4de}
.mm-clue-card{max-width:520px}

.mm-clue-board{display:flex;flex-direction:column;gap:.6rem;max-width:560px;margin:1.2rem auto}
.mm-clue-item{display:flex;align-items:center;gap:.6rem;background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:.55rem .8rem;font-weight:700}
.mm-clue-text{margin-left:auto;color:var(--grape);font-weight:800}
.mm-vote-box{max-width:560px;margin:0 auto}
.mm-vote-btns{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.6rem}
.mm-vote-btn{display:flex;align-items:center;gap:.5rem;font-family:"Baloo 2";font-weight:700;cursor:pointer;background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:.5rem .9rem;box-shadow:0 3px 0 var(--ink)}
.mm-vote-btn.sel{background:var(--grape);color:#fff}
.mm-vote-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}

.mm-reveal-banner{max-width:600px;margin:.4rem auto 1rem;text-align:center;font-family:"Baloo 2";font-weight:700;font-size:1.15rem;padding:.9rem 1rem;border-radius:16px;border:3px solid var(--ink);box-shadow:var(--shadow)}
.mm-reveal-banner.good{background:#DFF7EE}
.mm-reveal-banner.bad{background:#FFE7E3}
.mm-reveal-body{max-width:560px;margin:0 auto}
.mm-words{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}
.mm-words>div{flex:1;text-align:center;background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:.7rem}
.mm-words b{display:block;font-family:"Baloo 2";font-size:1.3rem}
.mm-wl{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.mm-tally{display:flex;flex-direction:column;gap:.4rem}
.mm-tally-row{display:flex;align-items:center;gap:.5rem;background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:.45rem .8rem;font-weight:700}
.mm-tally-row.spy{border-color:var(--red);background:#FFF3F1}
.mm-votes{margin-left:auto;font-family:"Space Mono";font-size:.8rem;color:var(--grape)}

/* ---------- Pictionary ---------- */
.pic-stage{display:flex;flex-direction:column;align-items:center;gap:1rem}
.pic-view{width:100%;height:auto;display:block;background:#fff;border-radius:18px;border:3px solid var(--ink);box-shadow:var(--shadow)}
.pic-waitcanvas{position:absolute;inset:0;display:grid;place-items:center;font-family:"Baloo 2";font-weight:700;color:var(--ink-soft);background:#fff;border-radius:18px;border:3px dashed var(--line)}
.pic-guessbar{display:flex;gap:.6rem;width:100%;max-width:760px}
.pic-guessbar input{flex:1;font:inherit;font-weight:600;padding:.7rem .9rem;border:2.5px solid var(--ink);border-radius:14px;background:#fff}
.pic-feed{display:flex;flex-direction:column;gap:.35rem;max-width:760px;margin:1rem auto 0;width:100%}
.pic-guess{background:#fff;border:2px solid var(--line);border-radius:10px;padding:.35rem .7rem;font-size:.9rem}
.pic-guess.correct{background:#DFF7EE;border-color:var(--teal);font-weight:800}
.pic-reveal-canvas{max-width:600px;margin:0 auto 1rem}

/* ---------- Kalender galeri ---------- */
.gallery-cal{padding:1rem 1.2rem .2rem;max-width:420px;margin:0 auto;width:100%}
.cal-head{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.6rem}
.cal-month{font-family:"Baloo 2";font-weight:800;font-size:1.05rem;min-width:150px;text-align:center;text-transform:capitalize}
.cal-nav{width:32px;height:32px;cursor:pointer;font-size:1.2rem;font-weight:800;background:#fff;border:2.5px solid var(--ink);border-radius:10px;box-shadow:0 3px 0 var(--ink)}
.cal-nav:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-family:"Baloo 2";font-weight:700;font-size:.7rem;color:var(--ink-soft);padding:.2rem 0}
.cal-blank{aspect-ratio:1}
.cal-day{
  aspect-ratio:1;display:grid;place-items:center;cursor:pointer;font-family:"Baloo 2";font-weight:700;
  font-size:.85rem;background:#FCFCFF;border:2px solid var(--line);border-radius:9px;color:var(--ink);
}
.cal-day:hover{border-color:var(--ink)}
.cal-day.has{background:var(--teal);color:#04302b;border-color:#04302b55;font-weight:800} /* tanggal ada game */
.cal-day.today{outline:3px solid var(--sun);outline-offset:-1px}
.cal-day.sel{background:var(--grape);color:#fff;border-color:var(--grape)}
.cal-day.has.sel{background:var(--grape);color:#fff}
.cal-legend{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-top:.6rem;font-size:.75rem;color:var(--ink-soft)}
.cal-legend .dot{width:12px;height:12px;border-radius:4px;display:inline-block;vertical-align:middle}
.cal-legend .dot.has{background:var(--teal)}
.cal-legend .dot.today{background:#fff;outline:2px solid var(--sun);outline-offset:-1px}
.gallery-seldate{font-family:"Baloo 2";font-weight:700;font-size:.9rem;text-transform:capitalize}

/* ---------- Game 2v2 (Tarik Tambang & Bakiak) ---------- */
.tt-teams{display:flex;align-items:center;gap:.8rem;margin:1rem 0;justify-content:center}
.tt-team{flex:1;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:.8rem;text-align:center}
.tt-team.tt-a{border-color:#F0432E}.tt-team.tt-b{border-color:#2f6fed}
.tt-team-name{font-family:"Baloo 2";font-weight:800;margin-bottom:.4rem}
.tt-player{display:inline-flex;align-items:center;gap:.3rem;background:#FCFCFF;border:2px solid var(--line);border-radius:10px;padding:.25rem .6rem;margin:.15rem;font-weight:700;font-size:.9rem}
.tt-empty{color:var(--ink-soft)}
.tt-vs{font-family:"Baloo 2";font-weight:800;color:var(--ink-soft)}

.tt-scoreboard{max-width:520px;margin:0 auto 1rem;text-align:center}
.tt-sb{display:flex;align-items:center;justify-content:center;gap:1rem;font-family:"Baloo 2";font-weight:800;font-size:1.1rem}
.tt-sb-wins{font-family:"Space Mono";font-size:1.4rem}
.tt-sb-note{font-size:.75rem;color:var(--ink-soft);margin-top:.2rem}
.tt-a{color:#F0432E}.tt-b{color:#2f6fed}

.tt-arena{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:.6rem}
.tt-side{flex:0 0 90px;display:flex;flex-direction:column;gap:.3rem;font-weight:800;font-size:.8rem}
.tt-track{position:relative;flex:1;height:70px;background:#fff;border:3px solid var(--ink);border-radius:16px;overflow:hidden}
.tt-center{position:absolute;left:50%;top:0;bottom:0;width:3px;background:var(--line);transform:translateX(-50%)}
.tt-knot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;transition:left .25s ease}
.tt-countdown{text-align:center;font-family:"Baloo 2";font-weight:800;font-size:4rem;color:var(--grape);margin:1rem 0}
.tt-tap{display:block;margin:1.2rem auto 0;font-family:"Baloo 2";font-weight:800;font-size:1.8rem;color:#fff;background:var(--grape);border:4px solid var(--ink);border-radius:22px;padding:1.4rem 3rem;cursor:pointer;box-shadow:0 6px 0 var(--ink);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tt-tap:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}

.bk-track{max-width:760px;margin:1rem auto;display:flex;flex-direction:column;gap:.8rem}
.bk-lane{position:relative;height:56px;background:#fff;border:3px solid var(--ink);border-radius:14px}
.bk-lane.bk-a{border-color:#F0432E}.bk-lane.bk-b{border-color:#2f6fed}
.bk-runner{position:absolute;top:50%;transform:translateY(-50%);font-size:1.8rem;transition:left .2s ease;left:5%}
.bk-flag{position:absolute;right:2%;top:50%;transform:translateY(-50%);font-size:1.5rem}
.bk-steps{display:flex;justify-content:center;gap:2rem;font-family:"Space Mono";font-weight:700;font-size:1.1rem}
.bk-tap{background:var(--teal);color:#04302b}

/* ---------- Lengkapi Kalimat (English) ---------- */
.eng-sentence{
  max-width:620px;margin:1rem auto;text-align:center;font-family:"Baloo 2";font-weight:700;
  font-size:1.5rem;line-height:1.5;background:#fff;border:3px solid var(--ink);border-radius:18px;
  padding:1.2rem 1.3rem;box-shadow:var(--shadow);
}
.eng-blank{color:#2f6fed;letter-spacing:1px}
.eng-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;max-width:620px;margin:0 auto}
.eng-opt{
  font-family:"Baloo 2";font-weight:700;font-size:1.1rem;cursor:pointer;padding:.9rem 1rem;
  background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);
}
.eng-opt:not(:disabled):active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.eng-opt.picked{background:var(--grape);color:#fff}
.eng-opt.correct{background:#DFF7EE;border-color:var(--teal);color:#0a6b58}
.eng-opt.wrong{background:#FFE7E3;border-color:var(--red);color:#8a1c0f}
.eng-opt:disabled{cursor:default}
.eng-explain{max-width:620px;margin:1.1rem auto 0;background:#FFF7E0;border:2.5px solid var(--ink);border-radius:14px;padding:.8rem 1rem;font-weight:600}