/* =====================================================================
   pages.css — AI games (games.html) + AI classes & booking (classes.html)
   ===================================================================== */
:root { --g: var(--gold-rgb, 234,178,74); --blue: #5fa0ff; --ok: #3ddc97; --bad: #ff6b6b }

/* ---------- shared page hero ---------- */
.pg-hero { padding: calc(var(--header) + 80px) 0 40px; position: relative }
.pg-hero h1 { font-size: clamp(38px, 6vw, 72px); line-height: 1.02; font-weight: 700; max-width: 16ch }
.pg-lead { color: var(--muted); font-size: 18px; max-width: 58ch; margin: 20px 0 30px }
.btn-sm { padding: 10px 15px; font-size: 13px; border-radius: 10px }

/* ---------- game picker ---------- */
.picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px }
.pick {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px;
  border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.pick::after {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--g), .22), transparent 65%); opacity: 0; transition: opacity .3s;
}
.pick:hover { transform: translateY(-4px); border-color: rgba(var(--g), .5); box-shadow: 0 20px 50px rgba(0,0,0,.35) }
.pick:hover::after { opacity: 1 }
.pick-n { font-family: var(--mono); font-size: 12px; color: var(--dim) }
.pick-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--g), .12); border: 1px solid rgba(var(--g), .3) }
.pick-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.pick b { font-family: var(--display); font-size: 20px; font-weight: 600; margin-top: 6px }
.pick small { color: var(--muted); font-size: 13px }

/* ---------- game panels ---------- */
.game-sec { padding: 34px 0 }
.game {
  position: relative; border: 1px solid var(--edge); border-radius: 26px; padding: 34px;
  background: linear-gradient(180deg, rgba(23,35,61,.82), rgba(16,25,44,.88));
  box-shadow: 0 30px 80px rgba(0,0,0,.28); scroll-margin-top: calc(var(--header) + 20px);
}
.game::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(130deg, rgba(var(--g), .5), transparent 35%, transparent 70%, rgba(95,160,255,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px }
.game-head h2 { font-size: clamp(28px, 3.4vw, 38px) }
.game-head p { color: var(--muted); margin-top: 8px; max-width: 52ch }
.scorebox {
  flex: none; display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 12px 16px;
  border-radius: 16px; border: 1px solid rgba(var(--g), .35); background: rgba(var(--g), .08);
}
.scorebox span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em }
.is-ar .scorebox span { letter-spacing: 0 }
.scorebox b { font-family: var(--display); font-size: 30px; color: var(--gold); line-height: 1.1 }

.round { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 16px }
.round b { color: var(--text); font-weight: 600 }
.round .bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; max-width: 260px }
.round .bar i { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width .4s ease }

.q-card {
  position: relative; border-radius: 20px; padding: 40px 28px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, rgba(var(--g), .12), rgba(255,255,255,.02) 60%);
  border: 1px solid var(--edge2); animation: pop .35s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } }
.q-text { font-family: var(--display); font-size: clamp(22px, 3vw, 32px); font-weight: 600; line-height: 1.3 }
.q-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px }
.q-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; cursor: pointer;
  border-radius: 16px; border: 1px solid var(--edge2); background: rgba(255,255,255,.04); font-weight: 600; font-size: 16px;
  transition: transform .15s, border-color .15s, background .15s;
}
.q-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.q-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold) }
.q-btn.yes svg { stroke: var(--gold) }
.q-btn:disabled { cursor: default; opacity: .55 }
.q-btn.is-right { opacity: 1; border-color: var(--ok); background: rgba(61,220,151,.12) }
.q-btn.is-wrong { opacity: 1; border-color: var(--bad); background: rgba(255,107,107,.12); animation: shake .35s }
@keyframes shake { 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }

.feedback {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 16px 18px;
  border-radius: 16px; border: 1px solid var(--edge2); animation: pop .3s ease;
}
.feedback span { flex: 1 1 260px; color: var(--muted) }
.feedback.good { border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.07) }
.feedback.good > b { color: var(--ok) }
.feedback.bad { border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.07) }
.feedback.bad > b { color: var(--bad) }
.btn-next { margin-inline-start: auto; padding: 11px 20px }

/* next word */
.chat { text-align: start; display: flex; align-items: center; gap: 18px; padding: 32px 28px }
.chat-ico { flex: none; display: flex; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06) }
.chat-ico i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: blink 1.2s infinite }
.chat-ico i:nth-child(2) { animation-delay: .2s } .chat-ico i:nth-child(3) { animation-delay: .4s }
@keyframes blink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }
.blank { display: inline-block; min-width: 3.4em; border-bottom: 3px solid var(--gold); margin: 0 .15em; vertical-align: baseline; height: 1em; position: relative }
.blank i { position: absolute; inset-inline-start: 4px; bottom: 4px; width: 2px; height: .8em; background: var(--gold); animation: blink 1s steps(1) infinite }
.blank.filled { height: auto; border-bottom-color: transparent; color: var(--gold); padding: 0 .2em; border-radius: 8px; background: rgba(var(--g), .14); animation: pop .35s ease }
.q-ask { color: var(--muted); margin: 20px 0 12px; font-size: 14px }
.words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.word {
  padding: 16px 10px; border-radius: 14px; border: 1px solid var(--edge2); background: rgba(255,255,255,.04);
  font-weight: 600; font-size: 17px; cursor: pointer; transition: transform .15s, border-color .15s, background .15s;
}
.word:hover { transform: translateY(-2px); border-color: var(--gold); background: rgba(var(--g), .08) }
.probs { margin-top: 18px; display: grid; gap: 10px }
.prob { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 12px; font-size: 15px }
.prob .pw { font-weight: 600 }
.prob .pb { height: 12px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden }
.prob .pb i { display: block; height: 100%; width: 0; border-radius: 8px; background: rgba(255,255,255,.3); transition: width .9s cubic-bezier(.2,.7,.2,1) }
.prob.top .pb i { background: linear-gradient(90deg, var(--gold), var(--gold2)); box-shadow: 0 0 14px rgba(var(--g), .5) }
.prob.mine .pw::after { content: " ●"; color: var(--blue); font-size: 10px; vertical-align: middle }
.prob b { text-align: end; font-family: var(--mono); font-size: 13px; color: var(--muted) }
.prob.top b { color: var(--gold) }
.pnote { font-size: 12px; color: var(--dim) }

/* end screen */
.end { display: grid; justify-items: center; gap: 22px; text-align: center; padding: 10px 0; animation: pop .4s ease }
.ring-score { position: relative; width: 140px; aspect-ratio: 1; display: grid; place-items: center }
.ring-score + .lesson { max-width: 620px }
.ring-score b { position: relative; font-family: var(--display); font-size: 34px }
.ring-score::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255,255,255,.08) 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%);
  filter: drop-shadow(0 0 12px rgba(var(--g), .45));
}
.ring-score small { font-size: 16px; color: var(--muted) }

.lesson {
  display: flex; gap: 14px; align-items: flex-start; text-align: start; margin-top: 22px; padding: 18px 20px;
  border-radius: 16px; background: rgba(95,160,255,.07); border: 1px solid rgba(95,160,255,.25);
}
.end .lesson { margin-top: 0 }
.lesson-k { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); padding-top: 4px }
.is-ar .lesson-k { letter-spacing: 0 }
.lesson p { color: var(--muted) }
.lesson b { color: var(--text) }

/* teach the machine */
.g3 { display: grid; grid-template-columns: 1fr 250px; gap: 20px; align-items: start }
.g3-board { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--edge2); background: #0b1224 }
.g3-board canvas { width: 100%; height: auto; aspect-ratio: 64 / 42; cursor: crosshair; touch-action: manipulation }
.g3-status {
  position: absolute; inset: auto 12px 12px 12px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px;
  background: rgba(8,12,22,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--edge);
  pointer-events: none;
}
.g3-side { display: grid; gap: 12px }
.g3-side .btn { width: 100% }
.g3-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.g3-row .btn { padding: 12px 8px; font-size: 13px }
.g3-train { padding: 16px }
.g3-train:disabled { opacity: .6; cursor: progress }
.g3-meter { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--edge2); font-size: 13px; color: var(--muted) }
.g3-meter b { font-family: var(--mono); color: var(--text) }

/* segmented switch (used by game 3 + ticket) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--edge) }
.seg-b {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border-radius: 10px;
  border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--muted); transition: background .18s, color .18s;
}
.seg-b[aria-checked="true"] { background: rgba(255,255,255,.1); color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.25) }
.seg-b i { width: 12px; height: 12px; border-radius: 50% }
.seg-b.is-a i { background: var(--gold); box-shadow: 0 0 10px var(--gold) }
.seg-b.is-b i { background: var(--blue); box-shadow: 0 0 10px var(--blue) }

/* ---------- missions: levels, timers, controls ---------- */
.pick-n { display: flex; align-items: center; gap: 8px }
.pick-n em { font-style: normal; font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold) }
.is-ar .pick-n em { letter-spacing: 0 }
.pick .lv { display: flex; gap: 4px; margin-top: 6px }
.pick .lv b { width: 16px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.1) }
.pick[style*="--lv:1"] .lv b:nth-child(-n+1), .pick[style*="--lv:2"] .lv b:nth-child(-n+2), .pick[style*="--lv:3"] .lv b:nth-child(-n+3),
.pick[style*="--lv:4"] .lv b:nth-child(-n+4), .pick[style*="--lv:5"] .lv b:nth-child(-n+5), .pick[style*="--lv:6"] .lv b { background: var(--gold); box-shadow: 0 0 8px rgba(var(--g), .6) }
.pick.is-boss { border-color: rgba(var(--g), .45); background: linear-gradient(160deg, rgba(var(--g), .14), rgba(255,255,255,.015)) }
.pick.is-boss::after { opacity: .7 }
.pick.is-boss .pick-n em { color: #ff9f5a }

.mission {
  display: flex; gap: 10px; align-items: baseline; margin-top: 14px !important; padding: 10px 14px; max-width: 64ch;
  border-radius: 12px; border: 1px solid rgba(var(--g), .3); background: rgba(var(--g), .07); color: var(--text) !important; font-size: 14.5px;
}
.mission b { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold) }
.is-ar .mission b { letter-spacing: 0; font-size: 12px }
.game-boss { border-color: rgba(var(--g), .35); box-shadow: 0 30px 90px rgba(0,0,0,.35), 0 0 60px rgba(var(--g), .08) }
.game-boss::before { background: linear-gradient(130deg, rgba(var(--g), .9), transparent 30%, transparent 65%, rgba(255,159,90,.6)) }

.timer { display: flex; align-items: center; gap: 12px; margin: -6px 0 14px }
.timer-track { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden }
.timer-track i { display: block; height: 100%; width: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--gold2)); transform-origin: left }
[dir="rtl"] .timer-track i { transform-origin: right }
.timer.run .timer-track i { animation: drain linear forwards }
@keyframes drain { to { transform: scaleX(0) } }
.timer b { font-family: var(--mono); font-size: 14px; min-width: 22px; text-align: center; color: var(--gold) }
.timer.hot b { color: var(--bad); animation: tick .5s ease infinite alternate }
.timer.hot .timer-track i { background: var(--bad) }
.timer.done { opacity: .35 }
@keyframes tick { to { transform: scale(1.25) } }
.end-rank { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--gold); margin-top: -8px }

.g3-board.space { background: radial-gradient(120% 90% at 50% 40%, #121c3a, #060912 75%) }
.g3-status.good { border-color: rgba(61,220,151,.5); background: rgba(8,30,22,.85); color: #c9f7e1 }
.g3-status.bad { border-color: rgba(255,107,107,.45); background: rgba(34,10,14,.85); color: #ffd6d6 }
.g3-status b { color: var(--gold) }

.ctl { display: grid; gap: 8px; font-size: 13px; color: var(--muted) }
.ctl > span { display: flex; justify-content: space-between; gap: 8px }
.ctl > span b { font-family: var(--mono); color: var(--gold) }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border-radius: 14px; border: 1px solid var(--edge2); background: rgba(255,255,255,.04); overflow: hidden }
.stepper button { height: 44px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--text) }
.stepper button:hover { background: rgba(var(--g), .12); color: var(--gold) }
.stepper b { text-align: center; font-family: var(--display); font-size: 22px; color: var(--gold) }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); outline: none; cursor: pointer }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--g), .2), 0 0 14px rgba(var(--g), .6); cursor: grab }
.range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--g), .2) }

.switch { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--edge2); background: rgba(255,255,255,.03); cursor: pointer; font-weight: 600; font-size: 14px }
.switch input { position: absolute; opacity: 0; pointer-events: none }
.switch i { position: relative; flex: none; width: 40px; height: 22px; border-radius: 22px; background: rgba(255,255,255,.14); transition: background .2s }
.switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s }
.switch input:checked + i { background: var(--gold) }
.switch input:checked + i::after { transform: translateX(18px) }
[dir="rtl"] .switch input:checked + i::after { transform: translateX(-18px) }
.switch input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px }

.seg3 .seg-b { font-size: 12.5px; padding: 10px 4px }
.net { width: 100%; height: 120px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(8,12,22,.55) }
.g3-train.is-running { background: rgba(255,255,255,.1); color: var(--text); box-shadow: none }
.btn.pulse { border-color: var(--gold); animation: glow 1.4s ease-in-out infinite }
@keyframes glow { 50% { box-shadow: 0 0 0 5px rgba(var(--g), .18), 0 0 26px rgba(var(--g), .4) } }

.band-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  background: radial-gradient(120% 160% at 100% 0%, rgba(var(--g), .16), transparent 55%), var(--panel2) }
.band-cta::before { display: none }
.band-cta h2 { font-size: clamp(26px, 3vw, 36px) }
.band-cta p { color: var(--muted); margin-top: 8px; max-width: 54ch }

/* =====================================================================
   classes
   ===================================================================== */
.classes-sec { padding: 20px 0 40px }
.classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px }
.class-card {
  position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--edge); background: linear-gradient(165deg, rgba(23,35,61,.9), rgba(16,25,44,.9));
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.class-card::before {
  content: ""; position: absolute; width: 260px; height: 260px; inset-inline-end: -90px; top: -110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--g), .18), transparent 65%); pointer-events: none;
}
.class-card:hover { transform: translateY(-4px); border-color: rgba(var(--g), .4); box-shadow: 0 24px 60px rgba(0,0,0,.35) }
.class-card.is-picked { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 24px 60px rgba(var(--g), .15) }
.cc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.cc-n { font-family: var(--mono); font-size: 12px; color: var(--gold); margin-inline-end: 4px }
.chip-s { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; color: var(--muted); border: 1px solid var(--edge2); background: rgba(255,255,255,.03) }
.chip-s svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }
.class-card h3 { font-size: 24px; font-weight: 600; margin: 18px 0 8px }
.class-card > p { color: var(--muted) }
.class-card ul { list-style: none; display: grid; gap: 8px; margin: 18px 0 24px }
.class-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px }
.class-card li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; padding: 3px; border-radius: 50%; background: rgba(var(--g), .15); fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.cc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--edge) }
.cc-price { font-family: var(--display); font-size: 17px }

/* ---------- booking ---------- */
.book-sec { padding-top: 70px; scroll-margin-top: calc(var(--header) - 20px) }
.bk-steps { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px }
.bk-steps li { display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--edge); color: var(--dim); font-size: 13.5px; font-weight: 500; transition: all .25s }
[dir="rtl"] .bk-steps li { padding: 8px 8px 8px 14px }
.bk-steps i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.06) }
.bk-steps li.now { color: var(--text); border-color: rgba(var(--g), .55); box-shadow: 0 0 0 4px rgba(var(--g), .08) }
.bk-steps li.now i { background: var(--gold); color: var(--ink-on-gold) }
.bk-steps li.done { color: var(--text) }
.bk-steps li.done i { background: rgba(61,220,151,.2); color: var(--ok) }

.booker { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start }

.cal {
  position: relative; padding: 24px; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(var(--g), .12), transparent 60%),
    radial-gradient(80% 80% at 100% 100%, rgba(95,160,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(23,35,61,.92), rgba(14,22,40,.95));
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px }
.cal-title {
  font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--text); text-align: center; text-align-last: center;
  appearance: none; -webkit-appearance: none; cursor: pointer; min-width: 0; max-width: 70%;
  padding: 6px 30px 6px 14px; border-radius: 12px; border: 1px solid transparent; outline: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eab24a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;
  transition: border-color .15s, background-color .15s;
}
[dir="rtl"] .cal-title { padding: 6px 14px 6px 30px; background-position: left 8px center }
.cal-title:hover, .cal-title:focus-visible { border-color: rgba(var(--g), .45); background-color: rgba(var(--g), .08) }
.cal-title option { background: #17233d; color: var(--text); font-size: 15px }
.cal-nav { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--edge2); background: rgba(255,255,255,.04); cursor: pointer; display: grid; place-items: center; transition: border-color .15s, color .15s }
.cal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.cal-nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold) }
.cal-nav:disabled { opacity: .3; cursor: default }
[dir="rtl"] .cal-nav svg { transform: scaleX(-1) }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px }
.cal-dow span { text-align: center; font-size: 12px; color: var(--dim); padding-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cal-grid.slide-l { animation: slideL .35s ease } .cal-grid.slide-r { animation: slideR .35s ease }
@keyframes slideL { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
@keyframes slideR { from { opacity: 0; transform: translateX(-24px) } to { opacity: 1; transform: none } }
[dir="rtl"] .cal-grid.slide-l { animation-name: slideR } [dir="rtl"] .cal-grid.slide-r { animation-name: slideL }

.day {
  position: relative; height: 62px; border-radius: 14px; border: 1px solid transparent; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--display); font-size: 16px; font-weight: 600; transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
.day.pad { visibility: hidden }
.day.off { color: rgba(255,255,255,.22); cursor: default; font-weight: 500 }
.day.has {
  cursor: pointer; color: var(--text); border-color: rgba(var(--g), .28);
  background: linear-gradient(180deg, rgba(var(--g), .14), rgba(var(--g), .04));
}
.day.has:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 26px rgba(var(--g), .2) }
.day.today::before { content: ""; position: absolute; inset: 3px; border-radius: 11px; border: 1px dashed rgba(255,255,255,.35); pointer-events: none }
.day .dots { display: flex; gap: 3px }
.day .dots b { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold) }
.day.sel {
  color: var(--ink-on-gold); border-color: var(--gold);
  background: radial-gradient(circle at 50% 30%, var(--gold2), var(--gold));
  box-shadow: 0 0 0 4px rgba(var(--g), .18), 0 12px 32px rgba(var(--g), .45); transform: scale(1.04);
}
.day.sel .dots b { background: var(--ink-on-gold); box-shadow: none }
.day.sel:not(.active) { transform: none; box-shadow: 0 8px 22px rgba(var(--g), .3); opacity: .88 }
.day .tick { position: absolute; top: -6px; inset-inline-end: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ok); box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(61,220,151,.6) }
.day .tick svg { width: 11px; height: 11px; fill: none; stroke: #062014; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round }
.day.active::after {
  content: ""; position: absolute; inset: -6px; border-radius: 18px; border: 1px solid rgba(var(--g), .5);
  animation: pulse 1.8s ease-out infinite; pointer-events: none;
}
@keyframes pulse { from { opacity: .9; transform: scale(.94) } to { opacity: 0; transform: scale(1.12) } }

.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--edge); font-size: 12.5px; color: var(--muted) }
.cal-legend > span { display: inline-flex; align-items: center; gap: 7px }
.cal-legend i { width: 12px; height: 12px; border-radius: 4px }
.lg-open { background: rgba(var(--g), .25); border: 1px solid rgba(var(--g), .5) }
.lg-off { background: rgba(255,255,255,.06) }
.lg-sel { background: var(--gold); box-shadow: 0 0 8px var(--gold) }

.slots { margin-top: 16px; padding: 20px 22px; border-radius: 22px; border: 1px solid var(--edge); background: rgba(16,25,44,.8) }
.slots-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.slots-head b { font-family: var(--display); font-weight: 600; font-size: 17px }
.slots-head .tz { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted) }
.slots-head .tz svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }
.slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px }
.slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--edge2); background: rgba(255,255,255,.03);
  animation: pop .35s ease both; animation-delay: calc(var(--i) * 45ms); transition: border-color .15s, background .15s, transform .15s;
}
.slot b { font-family: var(--display); font-size: 17px; font-weight: 600 }
.slot small { font-size: 11.5px; color: var(--muted) }
.slot:hover { border-color: var(--gold); transform: translateY(-2px) }
.slot.sel { border-color: var(--gold); background: rgba(var(--g), .16); box-shadow: 0 0 0 3px rgba(var(--g), .15) }
.slot.sel b { color: var(--gold) }
.slots-hint { display: block; font-size: 12px; color: var(--dim); margin-top: 2px }
.slot small + small { color: var(--dim) }
.slot-custom { border-style: dashed; border-color: rgba(95,160,255,.45) }
.slot-custom b { color: var(--blue) }
.slot-custom.sel { border-style: solid; border-color: var(--blue); background: rgba(95,160,255,.14); box-shadow: 0 0 0 3px rgba(95,160,255,.15) }
.slot-custom.sel b { color: var(--blue) }
.custom-row {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; margin-top: 4px;
  padding: 16px; border-radius: 16px; border: 1px solid rgba(95,160,255,.3); background: rgba(95,160,255,.06); animation: pop .3s ease;
}
.custom-row label { display: grid; gap: 6px; font-size: 12px; color: var(--muted) }
.custom-row select {
  width: 100%; font: inherit; font-size: 16px; font-weight: 600; color: var(--text); padding: 11px 13px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--edge2); background: rgba(8,12,22,.6); outline: none;
}
.custom-row select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(95,160,255,.2) }
.custom-row select option { background: #17233d }
.custom-arrow { padding-bottom: 12px; color: var(--blue); font-weight: 700 }
[dir="rtl"] .custom-arrow { transform: scaleX(-1) }
.custom-row p { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted) }

.t-count:not(:empty) { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 4px; border-radius: 999px; background: var(--gold); color: var(--ink-on-gold); font-size: 11px }
.t-sessions { display: grid; gap: 8px; max-height: 250px; overflow-y: auto; padding: 2px }
.t-empty { font-size: 13.5px; color: var(--dim); padding: 10px 0 }
.t-sess { display: flex; align-items: stretch; border-radius: 12px; border: 1px solid var(--edge2); background: rgba(8,12,22,.4); overflow: hidden; animation: pop .3s ease; transition: border-color .15s }
.t-sess.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--g), .12) }
.t-sess.needs { border-style: dashed }
.t-sess-main { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: start; padding: 9px 12px; border: 0; background: none; cursor: pointer }
.t-sess-main b { font-family: var(--display); font-size: 14.5px; font-weight: 600 }
.t-sess-main span { font-size: 12.5px; color: var(--muted) }
.t-sess.needs .t-sess-main span { color: var(--gold) }
.t-sess-x { flex: none; width: 38px; border: 0; border-inline-start: 1px solid var(--edge); background: none; cursor: pointer; display: grid; place-items: center; color: var(--muted) }
.t-sess-x:hover { background: rgba(255,107,107,.15); color: var(--bad) }
.t-sess-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round }

.slot-empty { grid-column: 1 / -1; color: var(--muted); font-size: 14.5px; padding: 6px 0 }

/* the ticket */
.ticket {
  position: sticky; top: calc(var(--header) + 20px); display: grid; gap: 16px; padding: 24px;
  border-radius: 24px; border: 1px solid rgba(var(--g), .35);
  background: linear-gradient(180deg, rgba(30,42,70,.96), rgba(17,26,46,.98));
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.ticket-top { display: flex; justify-content: space-between; align-items: center }
.ticket-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold) }
.is-ar .ticket-k { letter-spacing: 0 }
.ticket-logo { font-family: var(--display); font-weight: 700 }
.ticket-logo b { color: var(--gold) }
.t-field { display: grid; gap: 7px }
.t-field > span { font-size: 12px; color: var(--muted) }
.t-field > b { font-family: var(--display); font-size: 16px; font-weight: 600; min-height: 1.5em }
.t-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.t-field input, .t-field select, .t-field textarea {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--text); padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--edge2); background: rgba(8,12,22,.5); outline: none; transition: border-color .15s, box-shadow .15s;
}
.t-field textarea { resize: vertical; min-height: 64px }
.t-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aec1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px; background-position: right 12px center }
[dir="rtl"] .t-field select { background-position: left 12px center }
.t-field select option { background: #17233d; color: var(--text) }
.t-field input:focus, .t-field select:focus, .t-field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--g), .15) }
.ticket-cut { position: relative; height: 1px; margin: 2px -24px; border-top: 2px dashed rgba(255,255,255,.12) }
.ticket-cut::before, .ticket-cut::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg) }
.ticket-cut::before { left: -12px } .ticket-cut::after { right: -12px }

.btn-wa { width: 100%; padding: 16px; background: #25D366; color: #fff; opacity: .6; box-shadow: none; transition: opacity .2s, transform .17s, box-shadow .2s }
.btn-wa.is-ready { opacity: 1; box-shadow: 0 12px 34px rgba(37,211,102,.35) }
.t-mail { justify-self: center; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px }
.t-mail:hover { color: var(--text) }
.t-msg { font-size: 13px; color: var(--bad); text-align: center }
.t-fine { font-size: 12px; color: var(--dim); text-align: center; line-height: 1.5 }

.game [hidden], .booker [hidden] { display: none !important }
.dock { transition: opacity .25s, transform .25s }
.dock-away .dock { opacity: 0; transform: translateY(16px); pointer-events: none }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .g3 { grid-template-columns: 1fr }
  .g3-side { grid-template-columns: 1fr 1fr }
  .g3-side .seg, .g3-train, .g3-side .ctl, .g3-side .net, .g3-side .switch { grid-column: 1 / -1 }
  .picker { grid-template-columns: 1fr 1fr }
  .booker { grid-template-columns: 1fr }
  .ticket { position: relative; top: 0 }
}
@media (max-width: 700px) {
  .pg-hero { padding-top: calc(var(--header) + 40px) }
  .game { padding: 22px 18px; border-radius: 22px }
  .pick { padding: 16px; gap: 6px }
  .pick b { font-size: 16.5px }
  .pick-ic { width: 38px; height: 38px }
  .game-head { flex-direction: column }
  .scorebox { flex-direction: row; gap: 10px; min-width: 0; padding: 8px 14px }
  .scorebox b { font-size: 22px }
  .q-card { padding: 28px 18px }
  .q-btns { grid-template-columns: 1fr }
  .words { grid-template-columns: 1fr 1fr }
  .prob { grid-template-columns: 84px 1fr 42px; font-size: 14px }
  .chat { flex-direction: column; align-items: flex-start; gap: 14px }
  .classes { grid-template-columns: 1fr }
  .class-card { padding: 22px }
  .cal { padding: 16px 12px; border-radius: 22px }
  .cal-dow, .cal-grid { gap: 4px }
  .cal-dow span { font-size: 10.5px }
  .cal-title { font-size: 18px }
  .day { height: auto; aspect-ratio: 1 / 1.05; font-size: 14px; border-radius: 11px; gap: 3px }
  .day .dots b { width: 3px; height: 3px }
  .slot-list { grid-template-columns: 1fr 1fr }
  .custom-row { grid-template-columns: 1fr 1fr; padding: 12px }
  .custom-arrow { display: none }
  .g3-status { font-size: 12px; inset: auto 8px 8px 8px; padding: 8px 10px }
}