/* v223 deck-a.css: the canvas boards Lessons, Rules and Settings (js/kd-screens-a.js) - all under .kd, logical sides
   (inline-start = right in Hebrew/Arabic, left in the other languages) so one rule serves both directions */

/* ---- shared: the numbered red card at the start of a row ---- */
.kd .kd-a-num{width:28px;height:36px;border-radius:6px;background:var(--g,var(--yaniv));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-family:Rubik,sans-serif;font-weight:900;font-size:calc(16*var(--u));flex:none;box-shadow:inset 0 0 0 2px #FFFDF9,inset 0 0 0 3px #F2D27A,0 2px 0 var(--gd,var(--yaniv-d));transform:rotate(-4deg)}
.kd .kd-a-num span{display:flex;width:8px;margin-top:2px;opacity:.85}
.kd .kd-a-num svg{width:8px;height:8px}
.kd .coin bdi{white-space:nowrap}

/* =========================== Lessons =========================== */
.kd-ls .kd-ls-coin{padding-inline:6px 12px}
.kd-ls .kd-ls-tot{color:var(--text3);font-weight:600}
.kd-ls-hero{position:relative;margin-top:10px;min-height:214px;border-radius:22px;overflow:hidden;color:#fff;display:flex;flex-direction:column;
  background:radial-gradient(70% 110% at 22% 38%,#9A5230 0%,#7A3C20 52%,#5E2C16 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 4px 0 #3E1C0C,0 18px 32px -12px rgba(62,28,12,.65)}
.kd-ls-art{position:absolute;inset-inline-end:-18px;top:-22px;width:184px;height:184px;-webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);pointer-events:none}
.kd-ls-frame{position:absolute;inset:6px;border-radius:17px;border:1.5px solid rgba(242,210,122,.8);pointer-events:none;z-index:2}
.kd .kd-ls-fan{position:absolute;inset-inline-end:100px;top:96px;width:44px;height:62px}
.kd-ls-ht{position:relative;z-index:1;padding:20px 20px 12px;padding-inline-end:162px}
.kd-ls-ht .eyebrow{color:#F7D9B8}
.kd-ls-big{font-size:calc(26*var(--u));line-height:1.08;margin-top:6px;text-shadow:0 2px 0 rgba(40,15,5,.35);overflow-wrap:normal;word-break:normal}
.kd-ls-chips{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:max(11px,calc(12.5*var(--u)));font-weight:600;color:#F2DCC6}
.kd-ls-chips span{display:inline-flex;align-items:center;gap:4px}
.kd-ls-chips svg{width:14px;height:14px}
.kd-ls-bar{position:relative;z-index:1;margin:auto 6px 6px;min-height:50px;border-radius:0 0 17px 17px;background:rgba(30,10,0,.32);border-top:1px solid rgba(242,210,122,.35);display:flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;padding-inline:14px 8px}
.kd-ls-segs{display:flex;gap:4px;max-width:120px}
.kd-ls-segs i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.22)}
.kd-ls-segs i.on{background:#F2D27A}
.kd-ls-of{font-size:max(11px,calc(12*var(--u)));font-weight:600;color:#F2DCC6;margin-top:4px}
.kd .kd-ls-go{flex:none;min-width:118px}
.kd-ls-all .kd-ls-ht{padding-bottom:20px}
.kd .kd-ls-sec{margin:24px 0 14px;gap:10px;flex-wrap:wrap}
.kd .kd-ls-sec .tiny{text-align:end}
.kd-ls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 10px}
.kd .kd-ls-g .deck.sm .nm{padding-inline:7px}
.kd-ls-g{position:relative;text-align:center;min-width:0}
.kd-ls-g.next .kd-ls-dk{filter:drop-shadow(0 0 10px rgba(233,185,73,.55))}
.kd-ls-dk .deck{width:100%}
.kd-ls-ok{position:absolute;top:8px;inset-inline-end:-6px;z-index:5;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#FCE7A5,#E2B34A 55%,#C8902A);color:#5A3B00;box-shadow:inset 0 0 0 2px rgba(255,250,230,.9),0 2px 0 #9A6C12}
.kd-ls-ok svg{width:14px;height:14px}
.kd .kd-ls-tag{position:absolute;top:4px;left:50%;transform:translateX(-50%);z-index:5;--c:#E9B949;color:#3D2A00;height:20px;font-size:max(11px,calc(11*var(--u)));padding:0 7px;box-shadow:0 2px 0 #B6861B}
.kd-ls-segs.sm{max-width:none;gap:3px;margin:9px 4px 0}
.kd-ls-segs.sm i{height:5px;background:var(--line2)}
.kd-ls-segs.sm i.on{background:var(--g)}
.kd-ls-cap{margin-top:3px;line-height:1.2}
.kd-ls-cap .tiny{font-size:max(11px,calc(11*var(--u)))}
.kd-ls-done{display:inline-flex;align-items:center;justify-content:center;gap:3px;color:var(--ok);font-weight:800;font-size:max(11px,calc(11.5*var(--u)))}
.kd-ls-done svg{width:12px;height:12px}
.kd .kd-ls-book{display:flex;align-items:center;gap:12px;margin-top:26px;padding:10px 14px;width:100%;text-align:start}
.kd-ls-bi{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;background:linear-gradient(180deg,#8A4626,#5E2C16);color:#F2D27A;box-shadow:0 2px 0 #3E1C0C}
.kd-ls-bi svg{width:21px;height:21px}
.kd-ls-book b{display:block;font-weight:800;font-size:max(12px,calc(15*var(--u)))}
.kd-ls-book .tiny{display:block}
.kd-ls-book>svg{width:20px;height:20px;color:var(--text3)}
/* one game's course */
.kd-lg-hero{display:flex;align-items:center;gap:14px;margin-top:10px;padding:14px;border-radius:18px;color:#fff;
  background:radial-gradient(80% 120% at 20% 30%,color-mix(in srgb,var(--g) 70%,#fff) 0%,var(--g) 45%,var(--gd) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 4px 0 var(--gd),0 16px 28px -12px rgba(0,0,0,.4)}
.kd .kd-lg-cov{width:72px;height:72px}
.kd-lg-hero .eyebrow{color:#F2D27A}
.kd-lg-p{margin:2px 0 8px;font-size:max(12px,calc(13*var(--u)));line-height:1.35;color:rgba(255,255,255,.9)}
.kd .kd-lg-list{margin-top:12px}
.kd .kd-lg-row{width:100%;text-align:start;min-height:60px}
.kd-lg-row b{display:block;font-weight:800;font-size:max(12px,calc(15*var(--u)))}
.kd-lg-row .tiny{display:block}
.kd-lg-st{display:flex;width:20px;height:20px;color:var(--text3);flex:none}
.kd-lg-st svg{width:20px;height:20px}
.kd-lg-row.done .kd-lg-st{color:var(--ok)}
.kd-lg-row.locked{opacity:.55;cursor:default}

/* =========================== Rules =========================== */
.kd-ru-hero{position:relative;min-height:100px;border-radius:18px;padding:12px 14px 12px 0;padding-inline:14px 120px;color:#fff;overflow:hidden;margin-top:6px;
  background:radial-gradient(80% 120% at 20% 30%,color-mix(in srgb,var(--g) 75%,#fff) 0%,var(--g) 45%,var(--gd) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 4px 0 var(--gd),0 16px 28px -12px rgba(0,0,0,.45)}
.kd-ru-frame{position:absolute;inset:5px;border-radius:14px;border:1.5px solid rgba(242,210,122,.75);pointer-events:none}
.kd-ru-art{position:absolute;inset-inline-end:-8px;top:-16px;width:136px;height:136px;object-fit:cover;-webkit-mask:radial-gradient(closest-side,#000 60%,transparent);mask:radial-gradient(closest-side,#000 60%,transparent);pointer-events:none}
.kd-ru-hr{display:flex;gap:12px;align-items:flex-start;position:relative}
.kd .kd-ru-x{width:38px;height:38px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;flex:none}
.kd-ru-hero .eyebrow{color:#F2D27A}
.kd .kd-ru-name{margin:2px 0 0;font-size:calc(34*var(--u));line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.2);text-align:start}
.kd-ru-pl{font-size:max(11px,calc(12.5*var(--u)));font-weight:600;color:rgba(255,255,255,.85);margin-top:6px;white-space:nowrap}
.kd .kd-ru-seg{margin-top:12px}
.kd .kd-ru-seg button{min-width:0;padding:0 6px;line-height:1.1}
.kd .kd-ru-list{margin-top:10px}
.kd .kd-ru-li{align-items:flex-start;gap:12px;padding:9px 14px;min-height:0}
.kd-ru-h{display:block;font-weight:800;font-size:calc(16*var(--u));line-height:1.25}
.kd-ru-t{font-size:max(12px,calc(13*var(--u)));line-height:1.4;color:var(--text2);margin-top:2px}
.kd-ru-hrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kd-ru-hrow .kd-ru-h{flex:1 0 auto;max-width:100%}
.kd-ru-vals{display:flex;justify-content:space-between;gap:4px;margin-top:8px;padding-inline-end:10px}
.kd-ru-v{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.kd-ru-vn{line-height:1.1;text-align:center}
.kd-ru-vn .num{font-size:calc(17*var(--u))}
.kd-ru-vn small{display:block;font-size:max(10px,calc(10.5*var(--u)));color:var(--text3);font-weight:700}
.kd-ru-ov{display:flex;direction:ltr}
.kd-ru-ov>.pc+.pc{margin-left:-12px}
.kd-ru-ov>.pc.sm+.pc.sm{margin-left:-30px}
.kd .kd-ru-jkr{display:grid;place-items:center;background:linear-gradient(160deg,#FFFDF9,#F6EBD3)}
.kd .kd-ru-jkr .i{font-size:9px;letter-spacing:-.2px;color:var(--yaniv)}
.kd .kd-ru-jkr img{width:28px;height:28px;margin-top:8px}
/* v223s: the board's one line - pair, run, arrow, take (never wraps; kd-screens-a scales it down if a language can't fit) */
.kd-ru-turn{display:flex;align-items:flex-end;flex-wrap:nowrap;gap:calc(12*var(--u));margin-top:8px;transform-origin:100% 100%}
[dir=ltr] .kd-ru-turn{transform-origin:0 100%}
.kd-ru-turn small{white-space:nowrap}
.kd-ru-turn small{display:block;font-size:max(calc(10px / var(--z,1)),calc(10.5*var(--u)));color:var(--text3);font-weight:700;margin-bottom:4px}
.kd-ru-to{display:flex;width:18px;height:18px;color:var(--yaniv);margin-bottom:12px}
.kd-ru-to svg{width:18px;height:18px}
.kd-ru-or{display:flex;align-items:center;gap:5px}
.kd-ru-or span{font-size:max(calc(11px / var(--z,1)),calc(11*var(--u)));color:var(--text3);font-weight:600}
.kd-ru-sum{display:flex;align-items:center;gap:7px;flex:none}
.kd-ru-sum>span{font-size:max(12px,calc(15*var(--u)));color:var(--text3);font-weight:700}
.kd-ru-sum b{font-size:calc(22*var(--u));color:var(--yaniv)}
.kd-ru-asaf{display:flex;align-items:center;gap:7px;flex:none;padding:4px 8px 4px 6px;border-radius:9px;background:color-mix(in srgb,var(--yaniv) 9%,var(--raise));box-shadow:inset 0 0 0 1.5px var(--yaniv)}
.kd-ru-asaf .kd-ru-ov{transform:scale(.85);margin:-4px -2px}
.kd-ru-asaf b{font-size:max(11px,calc(11.5*var(--u)));color:var(--yaniv);font-weight:800;white-space:nowrap}
.kd .kd-ru-li.aside>.kd-ru-sum{align-self:center}
.kd-ru-m50{display:flex;align-items:center;gap:4px;flex:none}
.kd-ru-old{height:24px;padding:0 7px;border-radius:6px;display:grid;place-items:center;font-size:max(12px,calc(13*var(--u)));color:var(--text3);background:var(--raise2);box-shadow:inset 0 0 0 1px var(--line2);text-decoration:line-through}
.kd-ru-ar{display:flex;width:13px;color:var(--yaniv)}
.kd-ru-ar svg{width:13px;height:13px}
.kd-ru-new{height:26px;padding:0 8px;border-radius:6px;display:grid;place-items:center;font-size:max(12px,calc(14*var(--u)));color:#fff;background:var(--yaniv);box-shadow:inset 0 0 0 1.5px #FFFDF9,inset 0 0 0 2.5px #F2D27A,0 2px 0 var(--yaniv-d)}
.kd .kd-ru-prac{display:flex;align-items:center;gap:calc(12*var(--u));padding:8px 12px;margin-top:14px;flex-wrap:nowrap}
.kd .kd-ru-cov{width:46px;height:46px;--g:#8A5A2B;--gd:#5E3B18}
.kd .kd-ru-owl{width:36px;height:36px}
.kd-ru-prac b{display:block;font-weight:800;font-size:max(12px,calc(15*var(--u)))}
.kd-ru-prac .grow{min-width:0}
.kd-ru-prac.noowl .kd-ru-owl{display:none}
.kd-ru-prac .btn{flex:none;margin-inline-start:auto}
.kd .kd-ru-prac.stack{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;row-gap:10px}
.kd-ru-prac.stack .btn{grid-column:1/-1;margin-inline-start:0;justify-self:stretch}

/* =========================== Settings =========================== */
.kd .kd-st-hero{position:relative;margin-top:8px;min-height:164px;border-radius:20px;overflow:hidden;padding:14px 16px 14px;padding-inline:16px 162px;color:#fff;
  box-shadow:inset 0 0 0 3px #C99A3E,inset 0 0 0 5px #5A3A20,inset 0 0 50px rgba(0,0,0,.35),0 4px 0 #3E2612,0 16px 30px -10px rgba(30,60,40,.6)}
.kd-st-cards{position:absolute;left:0;top:0;width:160px;height:150px;pointer-events:none}
[dir=ltr] .kd-st-cards{left:auto;right:0}
.kd-st-c1{position:absolute;left:66px;top:22px;transform:rotate(12deg)}
.kd-st-c2{position:absolute;left:44px;top:16px;transform:rotate(3deg)}
.kd-st-c3{position:absolute;left:14px;top:26px;transform:rotate(-9deg)}
.kd [data-bk=classic]>.pc.kd-st-back{background:#7A1B1F url(assets/kd/back.webp) center/cover no-repeat!important}
.kd [data-bk=classic]>.pc.kd-st-back::after{display:none}
.kd .kd-st-back{overflow:hidden;box-shadow:0 0 0 3px #E9B949,0 3px 0 #B6861B,0 14px 24px rgba(0,0,0,.45)}
.kd-st-ht{position:relative;z-index:1}
.kd-st-ht .eyebrow{color:#F2D27A}
.kd-st-big{font-size:calc(26*var(--u));line-height:1.05;margin-top:4px;color:#fff}
.kd-st-fl{font-size:max(11px,calc(12.5*var(--u)));color:#D5EBDD;font-weight:600;margin-top:3px}
.kd-st-sw{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.kd .kd-st-dot{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px #C99A3E}
.kd .kd-st-dot.on{box-shadow:inset 0 0 0 2px #C99A3E,0 0 0 2px #F2D27A}
.kd .kd-st-chg{margin-top:10px;height:34px;font-size:max(12px,calc(13.5*var(--u)));max-width:100%}
.kd .kd-st-sec{margin:14px 0 8px}
.kd .kd-st-sec h2{font-size:calc(18*var(--u))}
.kd-st-snd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kd .kd-st-p{padding:7px 11px;display:flex;align-items:center;gap:10px;min-height:54px;width:100%;text-align:start}
.kd .kd-st-p b{font-size:max(12px,calc(14.5*var(--u)));line-height:1.2}
.kd-st-ic{width:30px;height:40px;border-radius:6px;flex:none;display:grid;place-items:center;background:var(--raise2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2),inset 0 0 0 3px var(--raise2),inset 0 0 0 4px rgba(176,122,18,.35),0 2px 0 var(--edge);transform:rotate(-4deg)}
.kd-st-tg .kd-st-ic{color:var(--text2)}
.kd-st-tg .kd-st-ic.acc{color:var(--accent)}
.kd-st-ic svg{width:17px;height:17px}
.kd .kd-st-col{gap:8px}
.kd .kd-st-row{position:relative;min-height:52px}
.kd .kd-st-row>b{flex:1 1 auto;min-width:0}
.kd .kd-st-seg{padding:2px;margin-inline-start:auto;flex:none}
/* v223s: the segments inline beside the label; a row where they can't fit is a chevron row - value + the phone's picker sheet */
.kd .kd-st-row>.kd-st-pv,.kd .kd-st-row>svg.fwd,.kd .kd-st-row>.kd-st-pk{display:none}
.kd .kd-st-row.pick>.kd-st-seg{display:none}
.kd .kd-st-row.pick>.kd-st-pv{display:block;white-space:nowrap}
.kd .kd-st-row.pick>svg.fwd{display:block;width:18px;height:18px;color:var(--text3)}
.kd .kd-st-row.pick>.kd-st-pk{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.kd .kd-st-seg button{height:32px;font-size:max(12px,calc(13*var(--u)));padding:0 8px;flex:1 1 auto;white-space:nowrap}
.kd .kd-st-lang{position:relative;cursor:pointer}
.kd-st-lv{font-size:max(12px,calc(14*var(--u)));font-weight:600;color:var(--text2)}
.kd-st-lang>svg{width:18px;height:18px;color:var(--text3)}
.kd-st-lang select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.kd-st-two{display:flex;gap:8px;margin-top:12px}
.kd-st-two .btn{flex:1;width:auto}
.kd .kd-st-acct{margin-top:12px;padding:9px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:1px}
.kd-st-acct .kd-st-av{grid-row:1/3}
.kd-st-acct .kd-st-who{grid-column:2;grid-row:1;line-height:1.2;align-self:end}
/* v223s: one line - avatar | name over e-mail | log out (the e-mail spans under the button only if it can't fit at 10px) */
.kd-st-acct .kd-st-out{grid-column:3;grid-row:1/3}
.kd-st-acct .kd-st-mail{grid-column:2;grid-row:2;min-width:0;align-self:start;line-height:1.25}
.kd .kd-st-acct.tight .kd-st-out svg{display:none}
.kd .kd-st-acct.tight .kd-st-out{padding:0 10px}
.kd-st-acct.wide .kd-st-out{grid-row:1}
.kd-st-acct.wide .kd-st-mail{grid-column:2/-1}
.kd-st-acct .kd-st-mail bdi{white-space:nowrap}
.kd .kd-st-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;color:#fff;font-weight:800;box-shadow:0 0 0 2px var(--raise),0 0 0 3.5px var(--gold-l)}
.kd-st-av .av-art{width:100%;height:100%;object-fit:cover}
.kd-st-acct b{font-size:max(12px,calc(14*var(--u)))}
.kd .kd-st-out{height:34px;font-size:max(12px,calc(13.5*var(--u)));padding:0 12px}
.kd-st-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:0 4px}
.kd .kd-st-del{color:var(--accent);font-size:max(12px,calc(13*var(--u)));font-weight:700}
/* the canvas segmented control (the app's red .seg must not win here) */
.kd .seg.kd-a-seg button,.kd .seg.kd-a-seg button.on{background:none!important;color:var(--text2)!important;box-shadow:none!important}
.kd .seg.kd-a-seg button.on{background:var(--raise)!important;color:var(--text)!important;font-weight:800;box-shadow:0 2px 0 var(--edge),0 0 0 1px var(--line)!important}
.kd-nw{white-space:nowrap}
.kd-ls-g.none .deck .box{filter:grayscale(.85) brightness(.92)}
.kd-ls-g.none .deck .peek{opacity:.5}
.kd .kd-ls-g .deck.sm .nm{line-height:1.05;letter-spacing:-.4px}
@media (max-width:359px){ .kd-ls-grid{gap:22px 5px;margin-inline:-8px} .kd .kd-ls-g .deck.sm .nm{padding-inline:6px;letter-spacing:-.7px} }
.kd-ls-chips span{white-space:nowrap}
.kd .kd-ls-tag{max-width:calc(100% + 6px)}
.kd-st-tg .grow b{display:block}
.kd-st-tg .grow .tiny{display:block;line-height:1.25;margin-top:1px}
/* sound tiles where a word can't sit beside its switch: icon and switch on top, the label under them (still 2x2) */
.kd .kd-st-snd.stack .kd-st-tg{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic . tg" "lb lb lb";row-gap:6px;align-items:center}
.kd-st-snd.stack .kd-st-ic{grid-area:ic}
.kd-st-snd.stack .toggle{grid-area:tg}
.kd-st-snd.stack b{grid-area:lb}
.kd-st-snd.noic .kd-st-ic{display:none}
/* v223 review: narrow phones keep the icon card - a tighter tile first */
.kd .kd-st-snd.tight .kd-st-p{padding:7px 8px;gap:6px}
.kd-st-snd.tight .kd-st-ic{width:26px;height:36px}
@media (max-width:359px){ .kd-st-cards{transform:scale(.8);transform-origin:0 0} [dir=ltr] .kd-st-cards{transform-origin:100% 0} .kd .kd-st-hero{padding-inline-end:134px} }
@media (max-width:359px){ .kd .kd-st-out svg{display:none} .kd .kd-st-out{padding:0 10px} }
.kd .kd-st-out{max-width:100%}
/* v230: account and owner rows in Settings (chevron rows, as the language row) */
.kd .kd-st-go{cursor:pointer}
.kd-st-go>svg{width:18px;height:18px;color:var(--text3);flex:none}
.kd-st-go>b{min-width:0;overflow-wrap:anywhere}
.kd-st-go .kd-st-dot-new{position:static;flex:none;width:9px;height:9px;border-radius:50%;background:var(--red,#c0392b);display:inline-block}
/* v230: the password field's eye sits at the field's start side in RTL, but the input itself is LTR - keep the typed text and the hint clear of it on both sides */
.pass-wrap .input{padding-inline:44px}