:root{
  color-scheme: light;
  --paper:#FBF8F1;
  --rule:#B9CFE8;
  --margin:#E8A0A0;
  --ink:#22273A;
  --ink-soft:#4a5170;
  --accent:#4C6EF5;
  --accent-dark:#3B5BDB;
  --highlight:#FFDE59;
  --good:#2F9E44;
  --bad:#E03131;
  --card-bg:#FFFDF7;
  --shadow: 0 6px 16px rgba(34,39,58,0.15);
}

html[data-theme="dark"]{
  color-scheme: dark;
  --paper:#1B1D2A;
  --rule:#2E3350;
  --margin:#7A3B3B;
  --ink:#ECEBF5;
  --ink-soft:#B7BBD9;
  --accent:#7C93FF;
  --accent-dark:#98A9FF;
  --highlight:#FFD84D;
  --good:#51CF66;
  --bad:#FF6B6B;
  --card-bg:#242838;
  --shadow: 0 6px 16px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  transition:background-color .2s ease, color .2s ease;
  background:
    repeating-linear-gradient(var(--paper), var(--paper) 34px, var(--rule) 35px),
    var(--paper);
  min-height:100vh;
  -webkit-tap-highlight-color: transparent;
}

.paper{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:32px 32px 32px 64px;
  min-height:100vh;
}
.paper::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:44px;
  width:2px;
  background:var(--margin);
  opacity:0.7;
}

.hub-header{
  text-align:center;
  margin-bottom:28px;
}
.hub-header h1{
  font-family:'Kalam',cursive;
  font-weight:700;
  font-size:clamp(2.1rem, 6vw, 3rem);
  color:var(--accent-dark);
  margin:0 0 6px;
  transform:rotate(-1.5deg);
}
.hub-header p{
  font-family:'Kalam',cursive;
  font-size:1.1rem;
  color:var(--ink-soft);
  margin:0;
}

.view{ display:none; }
.view.active{ display:block; }

.search-wrap{
  margin-bottom:16px;
}
#game-search{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:0.95rem;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(34,39,58,0.15);
  background:var(--card-bg);
  color:var(--ink);
}
#game-search:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.site-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 16px;
  margin-top:40px;
  padding-top:18px;
  border-top:1px dashed rgba(34,39,58,0.15);
  font-size:0.78rem;
}
.site-footer a{
  color:var(--ink-soft);
  text-decoration:none;
}
.site-footer a:hover{ color:var(--accent-dark); text-decoration:underline; }

.cards-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  margin-top:10px;
}
.game-card{
  --rot:0deg;
  font-family:inherit;
  text-align:left;
  background:var(--card-bg);
  border:1px solid rgba(34,39,58,0.08);
  border-radius:6px;
  padding:20px 18px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transform:rotate(var(--rot));
  transition:transform .15s ease, box-shadow .15s ease;
  position:relative;
}
.game-card::after{
  content:"";
  position:absolute;
  top:-8px; left:50%;
  width:26px; height:14px;
  background:rgba(255,222,89,0.85);
  transform:translateX(-50%) rotate(-3deg);
  border-radius:2px;
}
.game-card:hover, .game-card:focus-visible{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:0 10px 22px rgba(34,39,58,0.2);
  outline:none;
}
.game-card .icon{ font-size:2rem; }
.game-card h3{
  font-family:'Kalam',cursive;
  font-size:1.35rem;
  margin:8px 0 4px;
  color:var(--ink);
}
.game-card p.desc{
  font-size:0.85rem;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.game-card .best{
  font-family:'Space Mono',monospace;
  font-size:0.8rem;
  color:var(--accent-dark);
  background:rgba(76,110,245,0.1);
  display:inline-block;
  padding:3px 8px;
  border-radius:4px;
}

.hint{
  text-align:center;
  font-family:'Kalam',cursive;
  color:var(--ink-soft);
  font-size:0.95rem;
  margin-top:22px;
}
kbd{
  font-family:'Space Mono',monospace;
  background:#fff;
  border:1px solid rgba(34,39,58,0.25);
  border-bottom-width:2px;
  border-radius:4px;
  padding:1px 6px;
  font-size:0.8rem;
}

.game-view{ padding-top:4px; }
.back-btn{
  font-family:'Kalam',cursive;
  font-size:1rem;
  background:none;
  border:none;
  color:var(--accent-dark);
  cursor:pointer;
  padding:4px 0;
  margin-bottom:6px;
}
.back-btn:hover{ text-decoration:underline; }

.game-view h2{
  font-family:'Kalam',cursive;
  font-size:1.9rem;
  margin:0 0 12px;
  transform:rotate(-1deg);
}

.stats-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  font-size:0.85rem;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.stats-row b{
  font-family:'Space Mono',monospace;
  color:var(--ink);
  font-size:0.95rem;
}
.mini-btn{
  font-family:'Kalam',cursive;
  font-size:0.9rem;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:5px;
  padding:5px 12px;
  cursor:pointer;
}
.mini-btn:hover{ background:var(--accent-dark); }

/* Reflex Tap */
.reflex-box{
  height:220px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Kalam',cursive;
  font-size:1.6rem;
  color:#fff;
  background:var(--ink-soft);
  cursor:pointer;
  user-select:none;
  transition:background .1s ease;
}
.reflex-box.waiting{ background:#8a90ab; }
.reflex-box.ready{ background:var(--good); }
.reflex-box.early{ background:var(--bad); }

/* Memory Flip */
.memory-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  max-width:420px;
}
.mem-card{
  aspect-ratio:1;
  perspective:600px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.mem-card-inner{
  position:relative;
  width:100%; height:100%;
  transition:transform .35s;
  transform-style:preserve-3d;
}
.mem-card.flipped .mem-card-inner{ transform:rotateY(180deg); }
.mem-face{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  backface-visibility:hidden;
  font-size:1.6rem;
}
.mem-back{
  background:var(--accent);
  color:#fff;
  font-family:'Kalam',cursive;
  font-size:1.3rem;
}
.mem-front{
  background:var(--card-bg);
  border:1px solid rgba(34,39,58,0.15);
  transform:rotateY(180deg);
}
.mem-card.matched .mem-front{ background:#EBFBEE; border-color:var(--good); }

/* Number Rush */
.rush-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  max-width:380px;
}
.rush-tile{
  aspect-ratio:1;
  border-radius:8px;
  border:1px solid rgba(34,39,58,0.15);
  background:var(--card-bg);
  color:var(--ink);
  font-family:'Space Mono',monospace;
  font-size:1.1rem;
  cursor:pointer;
}
.rush-tile.done{ background:#EBFBEE; border-color:var(--good); color:var(--good); }
.rush-tile.wrong{ background:#FFF0F0; border-color:var(--bad); }

/* 2048 */
.t2048-grid{
  position:relative;
  width:min(360px,90vw);
  height:min(360px,90vw);
  background:#dfe4f0;
  padding:8px;
  border-radius:10px;
  touch-action:none;
}
.t2048-cells{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:8px;
  width:100%;
  height:100%;
}
.t2048-cell{
  background:rgba(0,0,0,0.06);
  border-radius:6px;
}
.t2048-tiles{
  position:absolute;
  inset:8px;
}
.t2048-tile{
  position:absolute;
  top:0; left:0;
  transition:transform .1s ease-in-out;
  will-change:transform;
}
.t2048-tile-inner{
  width:100%; height:100%;
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:1.3rem;
  background:#eef1f9;
  color:var(--ink);
}
.t2048-tile-inner.new{ animation:t2048-pop .18s ease; }
.t2048-tile-inner.merged{ animation:t2048-bump .16s ease; }
@keyframes t2048-pop{ from{ transform:scale(0.4); opacity:0.5; } to{ transform:scale(1); opacity:1; } }
@keyframes t2048-bump{ 0%{ transform:scale(1); } 50%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.t2048-tile-inner[data-v="2"]{ background:#e0e8fb; }
.t2048-tile-inner[data-v="4"]{ background:#c6d4f7; }
.t2048-tile-inner[data-v="8"]{ background:var(--accent); color:#fff; }
.t2048-tile-inner[data-v="16"]{ background:var(--accent-dark); color:#fff; }
.t2048-tile-inner[data-v="32"]{ background:#E8590C; color:#fff; }
.t2048-tile-inner[data-v="64"]{ background:#D9480F; color:#fff; }
.t2048-tile-inner[data-v="128"]{ background:var(--good); color:#fff; font-size:1.15rem; }
.t2048-tile-inner[data-v="256"]{ background:#2B8A3E; color:#fff; font-size:1.15rem; }
.t2048-tile-inner[data-v="512"]{ background:#F08C00; color:#fff; font-size:1.1rem; }
.t2048-tile-inner[data-v="1024"]{ background:var(--bad); color:#fff; font-size:1rem; }
.t2048-tile-inner[data-v="2048"]{ background:var(--ink); color:var(--highlight); font-size:1rem; }

.t2048-overlay{
  position:absolute; inset:8px;
  background:rgba(251,248,241,0.85);
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column;
  gap:10px;
  border-radius:8px;
  font-family:'Kalam',cursive;
  font-size:1.4rem;
}
.t2048-overlay.show{ display:flex; }

/* Language toggle (Tebak Kata) */
.lang-toggle{
  display:flex;
  gap:4px;
  background:rgba(34,39,58,0.06);
  padding:3px;
  border-radius:20px;
}
.lang-btn{
  font-family:'Inter',sans-serif;
  font-size:0.78rem;
  font-weight:600;
  border:none;
  background:none;
  color:var(--ink-soft);
  padding:5px 10px;
  border-radius:16px;
  cursor:pointer;
}
.lang-btn.active{
  background:var(--card-bg);
  color:var(--ink);
  box-shadow:0 1px 4px rgba(34,39,58,0.2);
}

/* Tebak Kata */
.tebakkata-message{
  min-height:22px;
  font-family:'Kalam',cursive;
  color:var(--accent-dark);
  margin-bottom:8px;
}
.tebakkata-grid{
  display:grid;
  grid-template-rows:repeat(6,1fr);
  gap:6px;
  width:min(300px,88vw);
  margin-bottom:20px;
}
.tebakkata-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}
.tebakkata-tile{
  aspect-ratio:1;
  border:2px solid rgba(34,39,58,0.2);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:1.3rem;
  background:var(--card-bg);
  text-transform:uppercase;
  transition:transform .15s ease;
}
.tebakkata-tile.filled{ border-color:rgba(34,39,58,0.45); }
.tebakkata-tile.correct{ background:var(--good); border-color:var(--good); color:#fff; }
.tebakkata-tile.present{ background:#F08C3D; border-color:#d97528; color:#fff; }
.tebakkata-tile.absent{ background:#c9cddb; border-color:#c9cddb; color:#fff; }
.tebakkata-tile.pop{ transform:scale(1.08); }

.tebakkata-row.shake{ animation: tebakkata-shake .4s ease; }
@keyframes tebakkata-shake{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}

.tebakkata-keyboard{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:460px;
}
.tebakkata-krow{
  display:flex;
  gap:5px;
  justify-content:center;
}
.tebakkata-key{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.85rem;
  border:none;
  border-radius:5px;
  background:#dfe4f0;
  color:var(--ink);
  padding:12px 0;
  flex:1;
  min-width:0;
  cursor:pointer;
}
.tebakkata-key.wide{ flex:1.6; font-size:0.7rem; }
.tebakkata-key.correct{ background:var(--good); color:#fff; }
.tebakkata-key.present{ background:#F08C3D; color:#fff; }
.tebakkata-key.absent{ background:#8a90ab; color:#fff; }

/* Tic Tac Toe */
.tictactoe-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  width:min(300px,80vw);
}
.tictactoe-cell{
  aspect-ratio:1;
  border:2px solid rgba(34,39,58,0.15);
  border-radius:8px;
  background:var(--card-bg);
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:2rem;
  cursor:pointer;
}
.tictactoe-cell.x{ color:var(--accent); }
.tictactoe-cell.o{ color:var(--bad); }

/* Rock Paper Scissors */
.rps-result{
  font-family:'Kalam',cursive;
  font-size:1.2rem;
  margin-bottom:18px;
  min-height:28px;
}
.rps-choices{
  display:flex;
  gap:14px;
}
.rps-choice{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:2.2rem;
  background:var(--card-bg);
  border:2px solid rgba(34,39,58,0.12);
  border-radius:12px;
  padding:16px 8px;
  cursor:pointer;
}
.rps-choice span{ font-family:'Inter',sans-serif; font-size:0.8rem; color:var(--ink-soft); }
.rps-choice:hover{ border-color:var(--accent); }

/* Hangman */
.hangman-figure{
  font-size:3.5rem;
  text-align:center;
  margin-bottom:10px;
}
.hangman-word{
  font-family:'Space Mono',monospace;
  font-size:1.6rem;
  letter-spacing:6px;
  text-align:center;
  margin-bottom:14px;
}

/* Don't Touch the Red */
.dontred-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  max-width:380px;
}
.dontred-cell{
  aspect-ratio:1;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
}
.dontred-cell.gone{ opacity:0; transform:scale(0.5); pointer-events:none; }
.dontred-cell.boom{ animation:dontred-boom .3s ease; }
@keyframes dontred-boom{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.2); } }

/* Typing Speed Test */
.typing-target{
  font-family:'Space Mono',monospace;
  font-size:1.1rem;
  line-height:1.8;
  background:var(--card-bg);
  border:1px solid rgba(34,39,58,0.12);
  border-radius:8px;
  padding:14px;
  margin-bottom:12px;
}
.typing-target span.correct{ color:var(--good); }
.typing-target span.wrong{ color:var(--bad); text-decoration:underline; }
.typing-target span.current{ background:rgba(76,110,245,0.25); border-radius:2px; }
.typing-input{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  padding:12px;
  border-radius:8px;
  border:1px solid rgba(34,39,58,0.15);
  background:var(--card-bg);
  color:var(--ink);
  resize:none;
}
.typing-input:focus{ outline:2px solid var(--accent); }

/* Bubble Pop */
.bubble-arena{
  position:relative;
  width:100%;
  max-width:460px;
  height:340px;
  background:linear-gradient(180deg, rgba(76,110,245,0.06), rgba(76,110,245,0.14));
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bubble{
  position:absolute;
  border-radius:50%;
  border:none;
  cursor:pointer;
  box-shadow:inset -4px -4px 8px rgba(0,0,0,0.15), inset 4px 4px 8px rgba(255,255,255,0.3);
  animation:bubble-in .15s ease;
  transition:opacity .2s ease, transform .2s ease;
}
.bubble.fade{ opacity:0; transform:scale(0.6); }
@keyframes bubble-in{ from{ transform:scale(0.3); opacity:0.4; } to{ transform:scale(1); opacity:1; } }
.bubble-end{
  font-family:'Kalam',cursive;
  font-size:1.3rem;
  margin-bottom:12px;
}
.bubble-start-btn{ font-size:1rem; padding:10px 20px; }

/* Panic button + overlay */
#panic-btn{
  position:fixed;
  bottom:18px; right:18px;
  z-index:50;
  font-family:'Kalam',cursive;
  font-size:0.95rem;
  background:var(--highlight);
  color:var(--ink);
  border:1px solid rgba(34,39,58,0.2);
  border-radius:6px;
  padding:8px 14px;
  box-shadow:var(--shadow);
  cursor:pointer;
}
#panic-btn:hover{ transform:translateY(-2px); }

.theme-switcher{
  position:fixed;
  top:16px; right:16px;
  z-index:50;
  display:flex;
  gap:2px;
  background:var(--card-bg);
  border:1px solid rgba(34,39,58,0.12);
  border-radius:20px;
  padding:3px;
  box-shadow:var(--shadow);
}
.theme-btn{
  border:none;
  background:none;
  font-size:0.95rem;
  line-height:1;
  padding:6px 8px;
  border-radius:16px;
  cursor:pointer;
}
.theme-btn.active{
  background:var(--accent);
}

.panic-overlay{
  display:none;
  position:fixed; inset:0;
  z-index:100;
  background:
    repeating-linear-gradient(#ffffff, #ffffff 30px, #dfe6f2 31px);
  cursor:pointer;
  overflow:auto;
}
.panic-overlay.show{ display:block; }
.panic-notes{
  max-width:640px;
  margin:0 auto;
  padding:48px 24px;
  font-family:'Inter',sans-serif;
  color:#1a1a1a;
}
.panic-notes h2{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:1.3rem;
  border-bottom:1px solid #ccc;
  padding-bottom:8px;
}
.panic-notes .date{
  font-size:0.8rem;
  color:#555;
  margin-bottom:18px;
}
.panic-notes ul{ line-height:1.9; font-size:0.95rem; }
.panic-notes .foot{
  margin-top:30px;
  font-size:0.75rem;
  color:#888;
  text-align:center;
}

@media (max-width:600px){
  .paper{ padding:24px 18px 24px 40px; }
  .paper::before{ left:26px; }
  .cards-grid{ grid-template-columns:1fr; }
  #panic-btn{ bottom:12px; right:12px; padding:7px 12px; font-size:0.85rem; }
  .theme-switcher{ top:10px; right:10px; padding:2px; }
  .theme-btn{ padding:5px 6px; font-size:0.85rem; }
}

/* Dark theme: penyesuaian buat warna yang nggak lewat CSS variable */
html[data-theme="dark"] kbd{
  background:#2E3350;
  color:var(--ink);
  border-color:rgba(236,235,245,0.25);
}
html[data-theme="dark"] .mem-card.matched .mem-front{
  background:#1F3B2A;
}
html[data-theme="dark"] .rush-tile{
  color:var(--ink);
  background:var(--card-bg);
}
html[data-theme="dark"] .rush-tile.done{
  background:#1F3B2A;
}
html[data-theme="dark"] .rush-tile.wrong{
  background:#3B1F22;
}
html[data-theme="dark"] .t2048-grid{
  background:#141621;
}
html[data-theme="dark"] .t2048-cell{
  background:rgba(255,255,255,0.05);
}
html[data-theme="dark"] .t2048-tile-inner{
  background:#2E3350;
  color:var(--ink);
}
html[data-theme="dark"] .t2048-tile-inner[data-v="2"]{ background:#333A5C; }
html[data-theme="dark"] .t2048-tile-inner[data-v="4"]{ background:#3F4A80; }
html[data-theme="dark"] .t2048-overlay{
  background:rgba(27,29,42,0.88);
}
html[data-theme="dark"] .tebakkata-tile{
  border-color:rgba(236,235,245,0.25);
}
html[data-theme="dark"] .tebakkata-key{
  background:#2E3350;
  color:var(--ink);
}
html[data-theme="dark"] .game-card{
  border-color:rgba(236,235,245,0.1);
}