/* Base styles: Clean White & Blue professional theme (light default; dark palette lives in theme-dark.css) */
:root {
  /* core palette */
  --bg: #f8fbff;
  --card: #ffffff;
  --ink: #0f1f3d;
  --mute: #5b6b8a;
  --line: #dbe4f3;
  --mint: #dbeafe;
  --peach: #e0f2fe;
  --sky: #e0e7ff;
  --lilac: #eef3fb;
  --ok: #059669;
  --bad: #dc2626;
  --badbg: #fee2e2;
  --pf: Raavi,"Noto Sans Gurmukhi","Mukta Mahee","Gurmukhi MN","Gurmukhi Sangam MN",sans-serif;

  /* accent (blue) */
  --accent: #2563eb;
  --accent2: #1d4ed8;
  --ring: rgba(37, 99, 235, 0.25);
  --glow: rgba(37, 99, 235, 0.45);

  /* surfaces */
  --glass: #ffffff;
  --glassb: #dbe4f3;
  --field: #ffffff;
  --fieldb: #cbd5e1;
  --panel: #f1f6ff;
  --subtle: rgba(15, 31, 61, 0.04);
  --shadow: rgba(30, 64, 175, 0.12);
  --overlay: rgba(15, 31, 61, 0.45);
  --popup: rgba(255, 255, 255, 0.97);

  /* buttons */
  --btn-bg: #ffffff;
  --btn-bd: #cbd5e1;
  --btn-hover: #eff6ff;
  --ripple: rgba(37, 99, 235, 0.18);

  /* small details */
  --cur: rgba(37, 99, 235, 0.16);
  --curline: #2563eb;
  --pillfg: #1d4ed8;
  --topfg: #1e3a8a;
  --statb: #bfdbfe;
  --h1glow: 0 0 0 transparent;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100vh; }

/* --- 1. CLEAN WHITE BACKGROUND with soft blue glow + fine grid --- */
body {
  background-color: #f8fbff;
  background-image:
    radial-gradient(900px 520px at 8% -8%, #dbeafe 0%, transparent 62%),
    radial-gradient(820px 520px at 100% 108%, #e0f2fe 0%, transparent 62%),
    linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 16px;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.5px; }
.sub { color: var(--mute); font-size: 15px; margin: 0 0 20px; }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
}
@media(max-width: 820px) { .wrap { grid-template-columns: 1fr; } }

/* --- 2. CARDS --- */
.card {
  background: var(--glass);
  border: 1px solid var(--glassb);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 8px 28px var(--shadow);
}

h2 { font-size: 14px; margin: 0 0 12px; color: var(--mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; }

.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }

/* --- Inputs & Glossy Buttons --- */
input[type=text], select {
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--fieldb);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  min-width: 0;
  box-shadow: 0 1px 3px var(--shadow);
  transition: all 0.2s;
}
select option { background: var(--card); color: var(--ink); }
input[type=text]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
input[type=text] { width: 140px; }

button {
  background: var(--btn-bg);
  color: var(--ink);
  border: 1px solid var(--btn-bd);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 6px var(--shadow);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}

button:hover {
  transform: translateY(-2px);
  background: var(--btn-hover);
  box-shadow: 0 8px 18px var(--shadow);
  border-color: var(--accent);
}

/* --- BUTTON CLICK ACTION (Press + Glow Flash) --- */
button:active, .big:active {
  transform: scale(0.92) translateY(3px) !important;
  box-shadow: 0 0 0 4px var(--ring) !important;
  transition: transform 0.06s ease, box-shadow 0.06s ease !important;
}

button.lang.on {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border: 1px solid #1e40af;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}

/* --- Stats Area --- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.stat { border-radius: 16px; padding: 12px; text-align: center; border: 1px solid var(--line); }
.stat b { display: block; font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.stat span { font-size: 12px; color: var(--mute); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.s1 { background: var(--mint); border-color: var(--statb); }
.s2 { background: var(--peach); border-color: var(--statb); }
.s3 { background: var(--sky); border-color: var(--statb); }

/* --- Typing Editor Area --- */
#text {
  font: 22px/1.8 ui-monospace, Menlo, Consolas, monospace;
  background: var(--panel);
  border: 2px solid var(--glassb);
  border-radius: 16px;
  padding: 20px;
  height: 180px;
  overflow: hidden;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--mute);
  box-shadow: inset 0 2px 8px var(--shadow);
}
.pa #text, .pa .chip small, .pa .combo .gl { font-family: var(--pf); }
.pa #text { font-size: 28px; line-height: 1.8; }
#text span { border-radius: 4px; padding: 0 1px; }
.c { color: var(--ok); font-weight: 500; }
.w { background: var(--badbg); color: var(--bad); }
.cur { background: var(--cur); box-shadow: 0 2px 0 var(--curline); color: var(--ink); }

#msg { min-height: 22px; font-size: 14px; margin: 12px 0 0; color: var(--mute); font-weight: 500; }

/* --- Keyboard Layout --- */
.kb { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.row { display: flex; gap: 8px; }
.k {
  position: relative; flex: 1; min-width: 0; height: 60px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
.k .g { font-size: 16px; font-weight: 600; font-style: normal; }
.pa .k .g { font-size: 22px; font-family: var(--pf); padding-top: 14px; }
.k .e { position: absolute; left: 8px; top: 4px; font-size: 11px; font-weight: 700; color: var(--mute); text-transform: uppercase; }
.k .s { position: absolute; right: 8px; top: 2px; font-size: 16px; color: var(--ok); font-family: var(--pf); }
.pa .kb:not(.help) .e { visibility: hidden; }
.kb.sh .g { opacity: .3; }
.kb.sh .s { font-weight: 700; text-decoration: underline; }
.k.wide { flex: 1.7; background: var(--lilac); font-size: 12px; color: var(--mute); }
.k.sp { flex: 7; background: var(--lilac); }

@media(max-width: 560px) {
  .k { height: 48px; } .row, .kb { gap: 5px; }
  .k .g { font-size: 13px; } .pa .k .g { font-size: 17px; padding-top: 10px; }
  .k .e { font-size: 9px; left: 4px; top: 2px; } .k .s { font-size: 12px; right: 4px; top: 1px; }
}

/* --- Sub-elements (Combos, Chips, Lists) --- */
.combos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.combo {
  display: flex; gap: 12px; align-items: center; background: var(--subtle);
  border: 1px solid var(--glassb); border-radius: 14px; padding: 10px 12px; width: 100%;
  box-shadow: 0 1px 3px var(--shadow);
}
.combo .gl { font-size: 24px; min-width: 44px; text-align: center; background: var(--peach); border-radius: 10px; padding: 4px; font-family: var(--pf); }
.combo small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
kbd { background: var(--lilac); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-size: 12px; font-family: inherit; color: var(--ink); }

.chips { display: flex; flex-direction: column; gap: 10px; }
.chip { background: var(--card); border: 1px solid var(--glassb); text-align: left; width: 100%; padding: 12px; border-radius: 12px; box-shadow: 0 1px 3px var(--shadow); transition: all 0.2s; }
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip small { display: block; color: var(--mute); margin-top: 4px; font-size: 12px; }
.chip.on { background: var(--sky); border-color: var(--accent); }

ol { margin: 0; padding: 0; list-style: none; }
li { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
li:nth-child(odd) { background: var(--subtle); }
li:first-child { background: var(--mint); color: var(--topfg); font-weight: 600; }
li em { font-style: normal; color: var(--mute); font-size: 12px; }
.empty { color: var(--mute); font-size: 14px; padding: 10px 0; text-align: center; }

/* --- 3. FRONT PAGE & 3 BLUE BUTTONS --- */
.hm { max-width: 760px; margin: 8vh auto; text-align: center; }
.hm h1 { font-size: 34px; letter-spacing: -1px; text-shadow: var(--h1glow); }
.hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
@media(max-width: 620px) { .hgrid { grid-template-columns: 1fr; } }

.big {
  padding: 30px 20px;
  border-radius: 24px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.big b { display: block; font-size: 24px; margin-bottom: 10px; font-weight: 800; }

/* BUTTON 1: Royal Blue */
.big.a,
.hgrid > *:nth-child(1),
.tg3 button:nth-child(1) {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
  border: 1px solid #1e40af !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28) !important;
  color: #ffffff !important;
}
.big.a:hover,
.hgrid > *:nth-child(1):hover,
.tg3 button:nth-child(1):hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.42) !important;
}

/* BUTTON 2: Sky Blue */
.big.b,
.hgrid > *:nth-child(2),
.tg3 button:nth-child(2) {
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%) !important;
  border: 1px solid #075985 !important;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.28) !important;
  color: #ffffff !important;
}
.big.b:hover,
.hgrid > *:nth-child(2):hover,
.tg3 button:nth-child(2):hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(14, 165, 233, 0.42) !important;
}

/* BUTTON 3: Indigo */
.big.c,
.big:not(.a):not(.b),
.hgrid > *:nth-child(3),
.tg3 button:nth-child(3) {
  background: linear-gradient(135deg, #3730a3 0%, #6366f1 100%) !important;
  border: 1px solid #312e81 !important;
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.28) !important;
  color: #ffffff !important;
}
.big.c:hover,
.big:not(.a):not(.b):hover,
.hgrid > *:nth-child(3):hover,
.tg3 button:nth-child(3):hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(99, 102, 241, 0.42) !important;
}

/* white ripple on the solid blue buttons */
.big, button.lang.on, .tg3 button { --ripple: rgba(255, 255, 255, 0.4); }

.nv { max-width: 820px; margin: 0 auto; }
table.nt { width: 100%; border-collapse: collapse; }
.nt td { border-top: 1px solid var(--line); padding: 10px 12px; }
.nt .gl { font-family: var(--pf); font-size: 28px; width: 100px; text-align: center; }
.nt .nn { color: var(--mute); font-size: 14px; }
.hide .gl { filter: blur(9px); cursor: pointer; transition: filter 0.2s; }
.hide .gl:hover, .hide .gl:active { filter: none; }
.pill { background: var(--mint); border-radius: 10px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--pillfg); }
.dlb { display: none; } .dl .dlb { display: inline-block; }

#setup { max-width: 820px; }
#setup .card { text-align: left; padding: 30px; }
#setup h1 { font-size: 28px; margin-bottom: 20px; }
.tg3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 20px; }
.tg3 button { padding: 24px 12px; border-radius: 20px; font-size: 16px; font-weight: 700; }

/* --- App Playing Layout --- */
body.playing { overflow: hidden; padding: 10px 18px; }
#app.play { height: 100vh; height: 100dvh; margin: -10px 0; padding: 10px 0; display: flex; flex-direction: column; }
#app.play>p, #app.play>h1, #app.play>.sub, #app.play>#cust, #app.play aside, #app.play .oldbar, #app.play #tc>p.empty, #app.play #kbt { display: none !important; }
#app.play .wrap { display: block; flex: 1; min-height: 0; max-width: 1300px; width: 100%; }
#app.play main { display: flex; flex-direction: column; height: 100%; }
#app.play #tc { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 10px; padding: 12px; background: var(--glass); border-radius: 20px; box-shadow: 0 4px 20px var(--shadow); border: 1px solid var(--glassb); }
#app.play .stats { margin-bottom: 12px; }
#app.play .stat { padding: 8px; }
#app.play .stat b { font-size: 22px; }
#app.play #text { flex: 1; height: auto; min-height: 0; font-size: clamp(22px, 3.6vh, 36px); border: none; box-shadow: none; background: transparent; padding: 0 10px; }
.pa #app.play #text { font-size: clamp(24px, 4vh, 40px); }
#app.play #kbc { flex: none; margin: 0; padding: 10px; }
#app.play .k { height: clamp(34px, 6.6vh, 64px); }
#app.play #cb { display: none; }
#app.play.sp #cb:not([hidden]) { display: block; position: fixed; left: 18px; right: 18px; bottom: 18px; max-height: 60vh; overflow: auto; z-index: 6; box-shadow: 0 12px 40px var(--shadow); border-radius: 20px; margin: 0; border: 1px solid var(--line); }

#pbar { max-width: 1300px; width: 100%; margin: 0 auto 12px; }
#res { display: none; position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(4px); z-index: 10; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
#res.show { display: flex; }
#rb { background: var(--card); color: var(--ink); border: 1px solid var(--glassb); border-radius: 24px; padding: 30px; max-width: 560px; width: 100%; max-height: 92vh; overflow: auto; box-shadow: 0 25px 50px -12px var(--shadow); }

.shake { outline: 2px solid var(--bad); animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

.lkeys { display: flex; flex-wrap: wrap; gap: 8px; }
.lk { min-width: 42px; padding: 8px 10px; border-radius: 12px; background: var(--lilac); text-align: center; font-size: 20px; font-family: var(--pf); line-height: 1.2; border: 1px solid var(--line); }
.lk small { display: block; font-size: 11px; color: var(--mute); font-family: system-ui, sans-serif; font-weight: 500; margin-top: 2px; }
.lk.lock { background: transparent; border: 1px dashed var(--line); color: var(--mute); opacity: .5; }
.lk.done { background: var(--mint); border-color: var(--accent); color: var(--pillfg); }
.lk.foc { outline: 2px solid var(--accent); background: var(--peach); border-color: var(--accent); }

/* ===== Custom Hand Popup ===== */
#custom-intro-popup { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; background: var(--overlay); backdrop-filter: blur(4px); }
#custom-intro-popup[hidden] { display: none; }
#custom-intro-popup .cip-box { position: relative; background: var(--popup); backdrop-filter: blur(12px); border: 1px solid var(--glassb); border-radius: 24px; padding: 24px; box-shadow: 0 20px 50px var(--shadow); }
#custom-intro-popup .cip-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--lilac); color: var(--ink); border: none; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: background 0.2s; }
#custom-intro-popup .cip-x:hover { background: var(--mint); }
#custom-intro-popup .cip-hands { position: relative; width: min(560px, 86vw); padding-top: 100px; }
#custom-intro-popup .cip-hands .hands2 { margin: 0 auto; }
#custom-intro-popup .cip-f { position: absolute; transform: translate(-50%,-100%); display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; column-gap: 4px; max-height: calc(5 * 1.2em); font: 700 clamp(13px, 3vw, 16px)/1.2 var(--pf); color: var(--ink); pointer-events: none; }

/* ================================================= */
/* ===== 4. GLOSSY SHINE & CLICK RIPPLE EFFECT ===== */
/* ================================================= */

button::after, .big::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
}

button:hover::after, .big:hover::after {
  animation: glossy-shine 0.65s ease-out;
}

@keyframes glossy-shine {
  100% { left: 160%; }
}

button::before, .big::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--ripple) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

button:active::before, .big:active::before {
  opacity: 1;
  transform: scale(1.5);
  transition: 0s;
}