/*
 * אות או מספר? · BlumSoft IL
 * © 2026 Robert Blumenthal. All rights reserved.
 * Licensed only for use at blumsoft.pages.dev.
 */
:root{
  --ink:#202047;
  --muted:#656586;
  --purple:#6941c6;
  --purple-dark:#40207f;
  --blue:#3185db;
  --turquoise:#27b8a6;
  --yellow:#ffd54f;
  --coral:#ff6f61;
  --green:#31a866;
  --red:#dc4f5d;
  --surface:#fffdf8;
  --line:#d8d4ee;
  --shadow:0 16px 42px rgba(46,31,96,.16);
  --font:"Heebo","Assistant","Rubik","Noto Sans Hebrew",Arial,system-ui,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
html{background:#eee9ff}
body{
  min-height:100vh;min-height:100dvh;
  color:var(--ink);font-family:var(--font);line-height:1.35;
  background:
    radial-gradient(circle at 8% 8%,rgba(255,213,79,.68) 0 5%,transparent 18%),
    radial-gradient(circle at 94% 16%,rgba(39,184,166,.28) 0 7%,transparent 22%),
    radial-gradient(circle at 16% 88%,rgba(255,111,97,.22) 0 6%,transparent 19%),
    linear-gradient(145deg,#f7f2ff 0%,#edf8ff 49%,#fff8e3 100%);
  background-attachment:fixed;
  -webkit-user-select:none;user-select:none;
}
body.modal-open{overflow:hidden}

button,a,input{font:inherit}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:4px solid #111b52;outline-offset:4px;
}
[hidden]{display:none!important}

.app-shell{
  width:min(1180px,100%);min-height:100vh;min-height:100dvh;margin:0 auto;
  display:flex;flex-direction:column;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) clamp(10px,2.2vw,26px) calc(env(safe-area-inset-bottom,0px) + 12px);
}

.game-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.brand-mark{
  width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:16px;
  color:#fff;font-size:30px;font-weight:900;
  background:linear-gradient(145deg,#8b5cf6,var(--purple-dark));
  border:2px solid rgba(255,255,255,.78);
  box-shadow:0 8px 20px rgba(64,32,127,.29),inset 0 0 0 2px rgba(255,255,255,.17);
}
.brand strong{display:block;font-size:clamp(20px,3vw,30px);font-weight:950;letter-spacing:-.04em;line-height:1}
.brand small{display:block;margin-top:5px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em}
.header-actions{display:flex;align-items:center;gap:7px}
.icon-button,.small-button{
  min-height:44px;border:1px solid rgba(105,65,198,.24);border-radius:13px;cursor:pointer;
  color:var(--purple-dark);background:rgba(255,255,255,.88);font-weight:900;
  box-shadow:0 6px 18px rgba(64,32,127,.09);
}
.icon-button{width:44px;padding:0;font-size:21px}
.small-button{padding:8px 14px;font-size:13px}
.icon-button:active,.small-button:active{transform:translateY(1px)}

.scoreboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.score-pill{
  min-height:48px;padding:7px 10px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.95);box-shadow:0 7px 20px rgba(48,35,91,.08);
}
.score-pill span{font-size:12px;color:var(--muted);font-weight:800;white-space:nowrap}
.score-pill b{font-size:21px;font-weight:950;font-variant-numeric:tabular-nums;white-space:nowrap}
.round-pill{border-bottom:4px solid var(--purple)}
.good-pill{border-bottom:4px solid var(--green)}
.good-pill b{color:#177a48}
.miss-pill{border-bottom:4px solid var(--coral)}
.miss-pill b{color:#b63847}
.timer-pill{border-bottom:4px solid var(--blue)}
.timer-pill b{color:#155d9f}

.play-area{
  flex:1 1 auto;min-height:0;padding:10px clamp(10px,2vw,24px) 12px;border-radius:26px;
  background:rgba(255,255,255,.62);border:2px solid rgba(255,255,255,.92);
  box-shadow:var(--shadow);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
}
.prompt{margin:0;text-align:center;color:var(--purple-dark);font-size:clamp(18px,2.6vw,28px);font-weight:950;line-height:1.15}
.choices-zone,.target-zone{width:100%;text-align:center}
.choices-zone h2,.target-zone h2{margin:0 0 6px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.17em}

.choice-grid{
  direction:ltr;width:min(820px,100%);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;justify-items:center;gap:clamp(7px,1.8vw,18px);
}

.memory-card{
  position:relative;width:clamp(78px,14vw,160px);aspect-ratio: .72;
  border:0;border-radius:20px;padding:0;background:transparent;perspective:1100px;
}
.choice-card{cursor:pointer}
.choice-card:disabled{cursor:default}
.card-inner{
  position:absolute;inset:0;display:block;border-radius:inherit;transform-style:preserve-3d;
  transition:transform .52s cubic-bezier(.2,.78,.25,1.08),filter .2s;
}
.memory-card.flipped .card-inner{transform:rotateY(180deg)}
.card-cover,.card-symbol{
  position:absolute;inset:0;border-radius:inherit;display:grid;place-items:center;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.card-cover{
  color:#fff;border:5px solid #fff8d6;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.42) 0 5%,transparent 6%),
    radial-gradient(circle at 80% 75%,rgba(255,213,79,.9) 0 7%,transparent 8%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 8px,transparent 8px 16px),
    linear-gradient(150deg,#7c4dff 0%,#3f8ce5 52%,#21b9a8 100%);
  box-shadow:inset 0 0 0 3px rgba(44,25,100,.28),inset 0 -10px 24px rgba(39,25,95,.2),0 12px 25px rgba(48,34,101,.24);
}
.card-cover:before,.card-cover:after{content:"";position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.45)}
.card-cover:before{width:64%;aspect-ratio:1}
.card-cover:after{width:38%;aspect-ratio:1;border-color:rgba(255,213,79,.9)}
.card-cover i{position:relative;z-index:1;font-style:normal;font-size:clamp(22px,4.5vw,50px);color:#fff7c8;text-shadow:0 3px 0 rgba(50,28,105,.3)}
.card-symbol{
  transform:rotateY(180deg);direction:rtl;
  color:#171735;font-size:clamp(46px,8.5vw,104px);font-weight:950;line-height:1;
  background:
    radial-gradient(circle at 18% 15%,rgba(255,213,79,.5),transparent 22%),
    radial-gradient(circle at 85% 84%,rgba(39,184,166,.22),transparent 26%),
    linear-gradient(145deg,#fffdf8,#fff8dc);
  border:5px solid #fff;
  box-shadow:inset 0 0 0 4px #6240bd,inset 0 -12px 26px rgba(105,65,198,.09),0 12px 28px rgba(48,34,101,.2);
  text-shadow:0 3px 0 rgba(105,65,198,.12);
}
.choice-card:not(:disabled):hover .card-inner{filter:brightness(1.04)}
.choice-card:not(:disabled):active .card-inner{filter:brightness(.96)}
.choice-card.correct .card-symbol,.choice-card.match-card .card-symbol{border-color:#d7ffe8;box-shadow:inset 0 0 0 7px var(--green),0 0 0 5px rgba(49,168,102,.25),0 14px 30px rgba(28,122,73,.24)}
.choice-card.wrong .card-symbol{border-color:#ffe4e4;box-shadow:inset 0 0 0 7px var(--red),0 0 0 5px rgba(220,79,93,.2),0 14px 30px rgba(154,38,51,.2)}
.choice-card.correct{animation:cardPop .56s ease}
.choice-card.wrong{animation:cardWiggle .42s ease}
@keyframes cardPop{50%{transform:translateY(-7px) scale(1.04)}}
@keyframes cardWiggle{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

.target-zone{padding-top:4px;border-top:2px dashed rgba(105,65,198,.2)}
.target-row{direction:ltr;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,34px)}
.target-card{width:clamp(90px,16vw,170px)}
.target-card .card-symbol{font-size:clamp(54px,9.5vw,112px)}
.show-button{
  direction:rtl;min-width:128px;min-height:62px;border:0;border-radius:19px;padding:13px 25px;cursor:pointer;
  color:#fff;background:linear-gradient(145deg,#ff7f68,#e94d72);font-size:clamp(19px,3vw,27px);font-weight:950;
  box-shadow:0 11px 0 #9f2d52,0 16px 28px rgba(178,42,91,.27);
}
.show-button span{margin-inline-end:6px}
.show-button:active:not(:disabled){transform:translateY(7px);box-shadow:0 4px 0 #9f2d52,0 9px 18px rgba(178,42,91,.22)}
.show-button:disabled{opacity:.48;cursor:default;box-shadow:0 7px 0 #9f7b8b}
.show-button.attention{animation:showPulse 1.25s ease-in-out infinite}
@keyframes showPulse{50%{filter:brightness(1.08);box-shadow:0 11px 0 #9f2d52,0 0 0 9px rgba(255,111,97,.2),0 18px 30px rgba(178,42,91,.28)}}

.feedback{min-height:23px;margin:0;text-align:center;color:var(--muted);font-size:clamp(13px,2vw,17px);font-weight:800}
.feedback.good{color:#177a48}
.feedback.bad{color:#b63847}
.feedback.tick{color:#155d9f}
.adbar{display:none;flex:none;height:56px;align-items:center;justify-content:center;overflow:hidden}
.adbar.on{display:flex}
.game-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;font-size:12px;color:var(--muted)}
.game-footer a{color:var(--purple-dark);font-weight:800;text-decoration:none}

.modal{
  position:fixed;z-index:50;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(29,20,67,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  animation:fadeIn .18s ease;
}
.sheet{
  position:relative;width:min(94vw,470px);max-height:92vh;overflow:auto;padding:25px 23px 22px;border-radius:28px;
  text-align:center;color:var(--ink);background:linear-gradient(155deg,#fffefa,#fff6d9);
  border:3px solid #ffe17d;box-shadow:0 30px 80px rgba(20,13,52,.42);animation:sheetIn .3s cubic-bezier(.2,.85,.3,1);
}
.sheet-stars{color:var(--purple);font-size:24px;letter-spacing:8px;padding-inline-start:8px}
.sheet h2{margin:7px 0 8px;color:var(--purple-dark);font-size:clamp(25px,6vw,34px);font-weight:950}
.sheet>p{margin:0 0 15px;color:var(--muted);font-size:14px;line-height:1.55}
.switch-row{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0;padding:13px 15px;
  text-align:right;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;
}
.switch-row span{min-width:0}.switch-row b{display:block;color:var(--ink);font-size:16px}.switch-row small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.switch-row input{position:absolute;opacity:0;pointer-events:none}
.switch-row>i{position:relative;width:54px;height:30px;flex:none;border-radius:99px;background:#bbb9c9;box-shadow:inset 0 2px 5px rgba(0,0,0,.16);transition:.2s}
.switch-row>i:after{content:"";position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:.2s}
.switch-row input:checked+i{background:var(--turquoise)}
.switch-row input:checked+i:after{transform:translateX(-24px)}
.switch-row:has(input:focus-visible){outline:4px solid #111b52;outline-offset:3px}
.switch-row:has(input:disabled){opacity:.48;cursor:not-allowed}
#settingsHint.settings-error{padding:9px 11px;border-radius:12px;color:#a52f40;background:#ffe8eb;font-weight:900}
.primary-button,.secondary-button,.text-button{
  width:100%;min-height:50px;margin-top:12px;border-radius:15px;padding:11px 17px;cursor:pointer;font-weight:950;
}
.primary-button{border:0;color:#fff;background:linear-gradient(145deg,var(--purple),var(--purple-dark));box-shadow:0 8px 18px rgba(64,32,127,.24)}
.secondary-button{border:2px solid var(--purple);color:var(--purple-dark);background:#fff}
.text-button{border:0;color:var(--muted);background:transparent;margin-top:5px;min-height:38px;font-size:13px}
.close-button{position:absolute;top:12px;left:12px;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;background:#eee9ff;color:var(--purple-dark);font-size:28px;line-height:1}
.help-sheet{text-align:right}
.help-sheet h2{text-align:center}
.help-sheet ol{margin:16px 0 13px;padding-inline-start:23px}
.help-sheet li{margin:0 0 11px;color:var(--muted);font-size:14px;line-height:1.55}
.help-sheet li b{color:var(--ink)}
.parent-note{padding:12px;border-radius:14px;background:#f0ecff;color:var(--ink)!important}
.sheet-links{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px 0}
.sheet-links a{padding:7px 11px;border-radius:99px;background:#fff;color:var(--purple-dark);border:1px solid var(--line);font-size:12px;font-weight:800;text-decoration:none}
.celebration{font-size:30px;color:#d59b00;letter-spacing:8px;padding-inline-start:8px}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 5px}
.result-grid div{padding:12px 5px;border-radius:15px;background:#fff;border:1px solid var(--line)}
.result-grid span{display:block;color:var(--muted);font-size:11px;font-weight:800}
.result-grid b{display:block;margin-top:4px;color:var(--purple-dark);font-size:28px;font-weight:950;font-variant-numeric:tabular-nums}
.result-grid small{font-size:10px}
.break-modal{background:rgba(28,18,68,.84)}
.break-sheet{
  position:relative;width:min(94vw,720px);max-height:94vh;overflow:auto;padding:14px;border-radius:30px;
  text-align:center;color:var(--ink);background:linear-gradient(145deg,#fff8c9,#f3e8ff 48%,#dffcff);
  border:4px solid #fff;box-shadow:0 28px 85px rgba(20,13,52,.55),0 0 0 7px rgba(255,213,79,.5);
  animation:breakIn .34s cubic-bezier(.18,.88,.3,1.15)
}
.break-badge{display:inline-block;margin:0 0 2px;padding:7px 16px;border-radius:99px;color:#fff;background:linear-gradient(135deg,#e94d72,#6941c6);font-size:clamp(14px,2.5vw,18px);font-weight:950;box-shadow:0 6px 14px rgba(64,32,127,.24)}
.break-sheet h2{margin:5px 0 9px;color:var(--purple-dark);font-size:clamp(24px,5vw,39px);font-weight:950;line-height:1.1}
.break-art{width:100%;height:min(54vh,440px);min-height:160px;overflow:hidden;border-radius:22px;background:#ddecff;border:4px solid rgba(255,255,255,.9);box-shadow:0 13px 30px rgba(52,35,102,.2)}
.break-art img{display:block;width:100%;height:100%;object-fit:cover}
.break-countdown{margin:10px 0 0;color:var(--muted);font-size:clamp(14px,2.5vw,18px);font-weight:800}
.break-countdown b{display:inline-block;min-width:1.5em;color:var(--purple-dark);font-size:1.25em;font-variant-numeric:tabular-nums}
.skip-break-button{width:min(100%,310px);margin-top:8px}
.noscript{position:fixed;inset:auto 12px 12px;padding:12px;background:#fff2c4;border:2px solid #c48c00;border-radius:12px;text-align:center}
@keyframes fadeIn{from{opacity:0}}
@keyframes sheetIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
@keyframes breakIn{from{opacity:0;transform:scale(.88) rotate(-1deg)}}

@media (max-width:620px) and (orientation:portrait){
  .app-shell{gap:7px;padding-inline:8px}
  .game-header{gap:7px}.brand-mark{width:42px;height:42px;border-radius:13px;font-size:26px}
  .brand strong{font-size:20px}.brand small{font-size:9px}
  .small-button{padding:7px 10px;font-size:11px}.icon-button{width:40px;min-height:40px}
  .score-pill{min-height:43px;padding:5px 4px;display:block;text-align:center}
  .score-pill span{display:block;font-size:9px}.score-pill b{font-size:18px}
  .play-area{justify-content:flex-start;padding:8px 7px 9px;border-radius:20px}
  .choice-grid{width:min(330px,100%);grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 17px}
  .memory-card{width:clamp(82px,26vw,112px);border-radius:16px}
  .target-card{width:clamp(86px,27vw,119px)}
  .card-cover,.card-symbol{border-width:4px}.card-symbol{font-size:clamp(49px,18vw,73px)}
  .target-card .card-symbol{font-size:clamp(53px,19vw,78px)}
  .show-button{min-width:112px;min-height:55px;padding:10px 18px}
  .game-footer{font-size:10.5px}
  .break-sheet{padding:10px;border-radius:23px}
  .break-art{height:min(43vh,330px);border-radius:17px}
}

@media (orientation:landscape) and (max-height:590px){
  .app-shell{gap:5px;padding-block:5px}
  .game-header{flex-wrap:nowrap}.brand-mark{width:38px;height:38px;border-radius:12px;font-size:23px}.brand strong{font-size:19px}.brand small{display:none}
  .icon-button,.small-button{min-height:36px}.icon-button{width:38px}.small-button{padding:5px 11px}
  .score-pill{min-height:36px;padding:4px 8px}.score-pill span{font-size:10px}.score-pill b{font-size:17px}
  .play-area{display:grid;grid-template-columns:minmax(0,3fr) minmax(165px,1fr);grid-template-rows:auto 1fr auto;column-gap:16px;padding:7px 13px}
  .prompt{grid-column:1/-1;font-size:18px}
  .choices-zone{grid-column:1;grid-row:2;border-inline-end:2px dashed rgba(105,65,198,.2);padding-inline-end:13px}
  .target-zone{grid-column:2;grid-row:2;border:0;padding:0;align-self:center}
  .feedback{grid-column:1/-1;grid-row:3}
  .memory-card{width:clamp(70px,12.4vw,122px)}
  .choice-grid{gap:7px}
  .target-row{flex-direction:column;gap:9px}
  .target-card{width:clamp(78px,12vw,126px)}
  .show-button{min-width:118px;min-height:44px;padding:8px 16px;font-size:18px;box-shadow:0 7px 0 #9f2d52,0 11px 20px rgba(178,42,91,.23)}
  .show-button.attention{animation:none}
  .game-footer{font-size:10px}
  .break-sheet{width:min(84vw,690px);padding:9px}
  .break-sheet h2{margin:3px 0 6px;font-size:24px}
  .break-badge{padding:5px 13px;font-size:13px}
  .break-art{height:min(47vh,285px);min-height:135px}
  .break-countdown{margin-top:5px;font-size:13px}
  .skip-break-button{min-height:42px;margin-top:4px;padding:7px 14px}
}

@media (min-width:1000px) and (min-height:720px){
  .play-area{gap:10px}.choice-grid{gap:20px}.target-zone{padding-top:8px}.feedback{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (prefers-color-scheme:dark){
  :root{--ink:#f5f1ff;--muted:#c4bdd9;--surface:#29203d;--line:#554873;color-scheme:dark}
  html{background:#171225}
  body{background:radial-gradient(circle at 8% 8%,rgba(255,213,79,.14),transparent 22%),radial-gradient(circle at 92% 16%,rgba(39,184,166,.14),transparent 22%),linear-gradient(145deg,#171225,#132337 52%,#282014)}
  .play-area{background:rgba(35,28,53,.78);border-color:rgba(255,255,255,.08)}
  .score-pill,.icon-button,.small-button{background:rgba(40,31,59,.94);border-color:#504469}
  .game-footer a{color:#d6c5ff}
  .sheet{background:linear-gradient(155deg,#2d2541,#302716);border-color:#8b7029}
  .switch-row,.result-grid div,.sheet-links a{background:#352d49}
  .parent-note{background:#3a3056!important}
  .secondary-button{background:#342b48;color:#eee6ff}
  .text-button{color:#cec5df}
  .close-button{background:#44385e;color:#fff}
  #settingsHint.settings-error{color:#ffd5db;background:#592a37}
  .break-sheet{background:linear-gradient(145deg,#4a4020,#34274c 48%,#173f43);border-color:#f5e7ad}
  .break-sheet h2,.break-countdown b{color:#fff2b8}
  .break-countdown{color:#e3dcef}
}