@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;600;700;800&display=swap');

/* Global * kaldırıldı - site CSS'i ile çakışıyordu */

/* Rubik için kendi değişken kapsamı */
.app-shell {
  --bg:      #070710;
  --bg2:     #0c0c1e;
  --bg3:     #111128;
  --border:  #1a1a36;
  --radius:  13px;
  --topbar-h: 52px;
  touch-action: none;
  
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: #f0f0ff;
  font-family: 'DM Sans', sans-serif;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  max-width: 720px;
  margin: 0 auto;
  min-height: 70vh;
}

/* html, body kuralları kaldırıldı (site sayfa stilleriyle çakışmasın) */
.app-shell, .app-shell * {
  -webkit-tap-highlight-color: transparent;
}

/* .app-shell yukarıda tanımlandı */

/* ── TOP BAR ────────────────────────────────────────────────────── */
.top-bar {
  height: var(--topbar-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  flex-shrink: 0;
  gap: 6px;
  -webkit-app-region: drag;
}

/* Site link */
.site-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5b9fff;
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(91,159,255,0.1);
  border: 1px solid rgba(91,159,255,0.22);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  -webkit-app-region: no-drag;
  flex-shrink: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-link:hover { background: rgba(91,159,255,0.22); color: #90c4ff; }

/* Move pill */
.move-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg3);
  border: 1px solid #252548;
  border-radius: 20px;
  padding: 4px 14px;
  flex-shrink: 0;
}
.pill-label {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: #303060;
}
.pill-value {
  font-family: 'Space Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #7c6dff;
  min-width: 28px;
  text-align: center;
  transition: transform 0.15s, color 0.15s;
}
.pill-value.bump { transform: scale(1.5); color: #fbbf24; }

/* ══════════════════════════════════════════════════════════════════
   HINT BUTTON — shows "H" key label + question icon + "İpucu" text
══════════════════════════════════════════════════════════════════ */
.hint-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 9px;
  border-radius: 10px;
  border: 2px solid rgba(255,210,50,0.3);
  background: rgba(255,193,7,0.08);
  color: #ffc107;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  flex-shrink: 0;
  min-width: 52px;
  -webkit-app-region: no-drag;
  position: relative;
}
.hint-key {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #ffc107;
  background: rgba(255,193,7,0.15);
  border: 1.5px solid rgba(255,193,7,0.4);
  border-bottom-width: 3px;
  border-radius: 5px;
  width: 22px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hint-icon { opacity: 0.0; position: absolute; width: 0; height: 0; }  /* hidden, icon replaced by H key */
.hint-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,193,7,0.7);
  margin-top: 1px;
}

.hint-btn:hover {
  background: rgba(255,193,7,0.18);
  border-color: rgba(255,193,7,0.6);
  box-shadow: 0 0 12px rgba(255,193,7,0.4);
}
.hint-btn:active { transform: scale(0.9); }
.hint-btn.active {
  background: rgba(255,193,7,0.22);
  border-color: #ffc107;
  box-shadow: 0 0 16px rgba(255,193,7,0.6);
  animation: hintBtnPulse 1.4s ease-in-out infinite;
}
.hint-btn.active .hint-key {
  background: rgba(255,193,7,0.3);
  border-color: #ffc107;
  color: #fff;
  box-shadow: 0 0 8px rgba(255,193,7,0.6);
}
@keyframes hintBtnPulse {
  0%,100% { box-shadow: 0 0 12px rgba(255,193,7,0.5); }
  50%      { box-shadow: 0 0 22px rgba(255,193,7,0.95); }
}

/* ══════════════════════════════════════════════════════════════════
   REWIND ACTIVE — H button spinning indicator
══════════════════════════════════════════════════════════════════ */
@keyframes rewindSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.hint-btn.active svg {
  animation: rewindSpin 1s linear infinite;
}

/* ── Canvas ─────────────────────────────────────────────────────── */
#canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 55% 35%, rgba(91,79,255,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 75%, rgba(56,189,248,0.07) 0%, transparent 60%),
    var(--bg);

  aspect-ratio: 1 / 1;
  max-height: 70vh;
}
#canvas-container { width:100%; height:100%; }
#canvas-container canvas { display:block; width:100%!important; height:100%!important; }

.status-badge {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  background: rgba(91,79,255,0.9);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 5px 16px;
  border-radius: 20px;
  pointer-events: none;
  transition: opacity 0.25s;
  white-space: nowrap;
}
.status-badge.hidden { opacity: 0; }

/* ── Control Panel ──────────────────────────────────────────────── */
.ctrl-panel {
  background: var(--bg2);
  border-top: 2px solid var(--border);
  flex-shrink: 0;
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr 1fr;
  gap: 7px;
}

.act-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px 9px;
  border: none;
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.12s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.act-btn:active  { transform: scale(0.90); filter: brightness(0.82); }
.act-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; }

.act-undo    { background: linear-gradient(150deg, #3b82f6, #1d4ed8); box-shadow: 0 4px 18px rgba(59,130,246,0.55); }
.act-shuffle { background: linear-gradient(150deg, #8b5cf6, #6d28d9); box-shadow: 0 4px 18px rgba(139,92,246,0.6); }
.act-inv     { background: linear-gradient(150deg, #f59e0b, #b45309); box-shadow: 0 4px 18px rgba(245,158,11,0.45); }
.act-inv.active { background: linear-gradient(150deg, #fbbf24, #d97706); box-shadow: 0 4px 24px rgba(251,191,36,0.8), 0 0 0 2px #fde68a; animation: invPulse 1.4s ease-in-out infinite; }
@keyframes invPulse { 0%,100%{box-shadow:0 4px 24px rgba(251,191,36,.7),0 0 0 2px #fde68a;}50%{box-shadow:0 4px 32px rgba(251,191,36,1),0 0 0 3px #fde68a;} }
.act-reset   { background: linear-gradient(150deg, #ef4444, #b91c1c); box-shadow: 0 4px 18px rgba(239,68,68,0.55); }

/* Move grid */
.move-grid { display:flex; flex-direction:column; gap:7px; }
.move-row  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }

.mbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 8px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: transform 0.1s, filter 0.1s;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}
.mbtn:active { transform: scale(0.88); filter: brightness(0.78); }

.mkey  { font-family:'Space Mono',monospace; font-size:17px; font-weight:700; line-height:1; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.4); }
.mname { font-size:9px; font-weight:600; color:rgba(255,255,255,0.75); letter-spacing:0.03em; }

.face-u { background: linear-gradient(150deg, #e5e5e5, #9ca3af); box-shadow: 0 3px 12px rgba(200,200,200,0.35); }
.face-u .mkey  { color:#111; text-shadow:none; }
.face-u .mname { color:rgba(0,0,0,0.55); }
.face-d { background: linear-gradient(150deg, #fbbf24, #d97706); box-shadow: 0 3px 12px rgba(251,191,36,0.5); }
.face-d .mkey  { color:#1a0f00; text-shadow:none; }
.face-d .mname { color:rgba(26,15,0,0.6); }
.face-f { background: linear-gradient(150deg, #f43f5e, #be123c); box-shadow: 0 3px 12px rgba(244,63,94,0.5); }
.face-b { background: linear-gradient(150deg, #fb923c, #c2410c); box-shadow: 0 3px 12px rgba(251,146,60,0.5); }
.face-r { background: linear-gradient(150deg, #22c55e, #15803d); box-shadow: 0 3px 12px rgba(34,197,94,0.5); }
.face-l { background: linear-gradient(150deg, #38bdf8, #0369a1); box-shadow: 0 3px 12px rgba(56,189,248,0.5); }
.mid-y, .mid-z, .mid-x { background: linear-gradient(150deg, #a78bfa, #7c3aed); box-shadow: 0 3px 12px rgba(167,139,250,0.5); }

.mbtn.inv-glow { outline:2.5px solid #fbbf24; outline-offset:1px; filter:brightness(1.18); }

.ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,0.28); transform:scale(0); animation:rippleAnim 0.42s linear; pointer-events:none; }
@keyframes rippleAnim { to { transform:scale(4.5); opacity:0; } }

/* ══════════════════════════════════════════════════════════════════
   CELEBRATION OVERLAY
══════════════════════════════════════════════════════════════════ */
.celebrate-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,5,20,0.82); backdrop-filter: blur(6px);
  animation: overlayIn 0.4s ease both;
}
.celebrate-overlay.hidden { display: none; }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }

#confetti-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.celebrate-box {
  position:relative; z-index:2;
  background: linear-gradient(145deg, #14142a, #1c1c40);
  border: 1.5px solid rgba(124,109,255,0.4);
  border-radius: 24px; padding: 36px 32px 28px; text-align:center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(124,109,255,0.2);
  animation: boxIn 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
  min-width: 260px;
}
@keyframes boxIn { from{opacity:0;transform:scale(0.6) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }

.celebrate-emoji { font-size:56px; line-height:1; margin-bottom:12px; animation:emojiBounce 0.6s 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes emojiBounce { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

.celebrate-title {
  font-family:'DM Sans',sans-serif; font-size:32px; font-weight:800; margin-bottom:6px;
  background:linear-gradient(135deg,#a78bfa,#38bdf8,#22c55e);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.celebrate-sub { font-size:15px; color:#8888bb; margin-bottom:14px; }
.celebrate-moves {
  font-family:'Space Mono',monospace; font-size:13px; color:#fbbf24;
  background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.25);
  border-radius:10px; padding:8px 16px; margin-bottom:20px; letter-spacing:0.05em;
}
.celebrate-hint {
  font-size: 12px;
  color: #6868a8;
  margin-bottom: 14px;
  line-height: 1.5;
}
.celebrate-hint strong { color: #a0a0cc; }

.celebrate-btn {
  background:linear-gradient(135deg,#7c6dff,#4f46e5); color:#fff; border:none;
  border-radius:12px; padding:12px 32px; font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 4px 20px rgba(124,109,255,0.5);
  transition:filter 0.15s, transform 0.1s;
}
.celebrate-btn:hover  { filter:brightness(1.15); }
.celebrate-btn:active { transform:scale(0.95); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (min-width:600px) {
  .ctrl-panel{padding:12px 18px 16px;gap:10px;}
  .action-row,.move-grid,.move-row{gap:10px;}
  .mbtn{padding:12px 6px 10px;} .mkey{font-size:19px;} .mname{font-size:10px;}
  .act-btn{font-size:12px;padding:11px 6px;}
}
@media (min-width:900px) {
  .app-shell{flex-direction:row;}
  #canvas-wrap{flex:1;order:1;}
  .ctrl-panel{width:240px;height:100vh;border-top:none;border-left:2px solid var(--border);order:2;padding:20px 14px;justify-content:center;}
  .action-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;}
  .top-bar{padding:0 14px;}
}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-thumb{background:#252550;border-radius:4px;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.ctrl-panel{animation:fadeUp 0.38s ease both;}
#canvas-wrap{animation:fadeUp 0.28s 0.06s ease both;}

/* Mobil — küp ortada kalsın, aşağı düşmesin */
@media (max-width: 600px) {
  #canvas-wrap {
    min-height: 320px !important;
    aspect-ratio: 1 / 1.1;  /* hafif uzunca */
  }
  .app-shell {
    min-height: auto !important;
  }
  .top-bar {
    height: auto;
    padding: 8px 10px;
    flex-wrap: wrap;
  }
  .ctrl-panel {
    padding: 8px;
  }
}
/* Masaüstü — küp büyük ve ortada */
@media (min-width: 700px) {
  #canvas-wrap {
    min-height: 520px !important;
    aspect-ratio: auto !important;
  }
  .app-shell {
    max-width: 900px !important;
  }
  .ctrl-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
  }
  .action-row {
    grid-column: 1 / -1;
  }
}