@font-face{font-family:Tajawal;font-weight:500;font-display:swap;src:url(fonts/tajawal-500-ar.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Tajawal;font-weight:500;font-display:swap;src:url(fonts/tajawal-500-la.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Tajawal;font-weight:800;font-display:swap;src:url(fonts/tajawal-800-ar.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Tajawal;font-weight:800;font-display:swap;src:url(fonts/tajawal-800-la.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212}

:root{
  --primary:#ED1C3A; --dark:#A3162B; --soft:#FCE4E8; --mid:#F36C80; --bg:#fff; --ink:#3A0A12;
  --face-bg:#fff; --face-fit:contain;
  --cols:4; --rows:5; --size:100px; --gap:12px;
  --radius:clamp(10px,1.6vmin,22px);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  font-family:Tajawal,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg) center/cover no-repeat;color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;overscroll-behavior:none;
}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:4px solid var(--dark);outline-offset:3px}
[hidden]{display:none!important}

/* ---------- brand decoration (bars from the logo box) ---------- */
.decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.decor i{position:absolute;display:block;background:var(--soft)}
.decor i.solid{background:var(--primary)}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:1;display:none;flex-direction:column;padding:calc(var(--safe-t) + 2vmin) 2.5vmin calc(var(--safe-b) + 2vmin)}
.screen.is-active{display:flex}

/* start */
.start-top{display:flex;justify-content:flex-end;gap:12px}
.start-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(8px,1.8vmin,22px)}
.start-logo{max-width:min(78vw,640px);max-height:16vmin;object-fit:contain}
.start-logo.square{max-height:24vmin}
.start-title{font-weight:800;font-size:clamp(34px,8vmin,96px);line-height:1;color:var(--dark);letter-spacing:-.01em}
.start-sub{font-weight:800;font-size:clamp(18px,3.4vmin,40px);color:var(--primary)}
.start-preview{display:flex;justify-content:center;gap:clamp(6px,1.2vmin,16px);margin:1vmin 0;height:clamp(70px,15vmin,190px)}
.start-preview .mini{height:100%;aspect-ratio:1;border-radius:var(--radius);background:var(--face-bg);border:3px solid var(--soft);box-shadow:0 6px 18px rgb(0 0 0/.08);display:grid;place-items:center;overflow:hidden;animation:bob 3.2s ease-in-out infinite}
.start-preview .mini img{width:100%;height:100%;object-fit:var(--face-fit)}
.start-preview .mini.back{border-color:transparent}
.start-preview .mini:nth-child(2){animation-delay:-.6s}.start-preview .mini:nth-child(3){animation-delay:-1.2s}.start-preview .mini:nth-child(4){animation-delay:-1.8s}.start-preview .mini:nth-child(5){animation-delay:-2.4s}
@keyframes bob{50%{transform:translateY(-6%) rotate(-2deg)}}
.start-pick{font-size:clamp(16px,2.6vmin,30px);font-weight:500;opacity:.85}
.levels{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2vmin,24px)}
.level-btn{min-width:clamp(140px,22vmin,280px);min-height:clamp(72px,11vmin,130px);padding:12px 22px;border:0;border-radius:calc(var(--radius) * 1.2);
  background:var(--primary);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 8px 0 var(--dark),0 14px 26px rgb(0 0 0/.15);transition:transform .12s,box-shadow .12s}
.level-btn b{font-size:clamp(22px,4vmin,46px);font-weight:800;line-height:1}
.level-btn small{font-size:clamp(13px,2vmin,22px);opacity:.92}
.level-btn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--dark),0 6px 12px rgb(0 0 0/.15)}
.level-btn[data-level=easy]{background:var(--mid)}
.level-btn[data-level=hard]{background:var(--dark);box-shadow:0 8px 0 #000a,0 14px 26px rgb(0 0 0/.15)}
.start-best{min-height:1.4em;font-size:clamp(14px,2.2vmin,24px);color:var(--dark);font-weight:500}
.corner-btn{position:absolute;bottom:calc(var(--safe-b) + 10px);inset-inline-start:12px;width:44px;height:44px;border:0;background:transparent;font-size:24px;opacity:.25}
.corner-btn:hover,.corner-btn:focus-visible{opacity:.8}

.icon-btn{width:clamp(44px,7vmin,68px);height:clamp(44px,7vmin,68px);border-radius:50%;border:3px solid var(--soft);background:#fff;color:var(--dark);
  font-size:clamp(20px,3.4vmin,32px);font-weight:800;display:grid;place-items:center;box-shadow:0 4px 12px rgb(0 0 0/.08)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:55%;height:55%}

/* game HUD */
.hud{display:flex;align-items:center;gap:clamp(8px,2vmin,24px);min-height:clamp(52px,9vmin,96px)}
.hud-logo{height:clamp(30px,6vmin,64px);max-width:30vw;object-fit:contain;flex:0 1 auto}
.hud-logo.square{height:clamp(48px,10vmin,120px)}
.stats{flex:1;display:flex;justify-content:center;gap:clamp(8px,2.4vmin,32px)}
.stat{background:#fff;border:3px solid var(--soft);border-radius:999px;padding:4px clamp(12px,2.2vmin,26px);display:flex;align-items:baseline;gap:8px;box-shadow:0 4px 12px rgb(0 0 0/.06)}
.stat-label{font-size:clamp(12px,1.9vmin,20px);opacity:.75}
.stat-val{font-weight:800;font-size:clamp(18px,3.6vmin,40px);color:var(--dark);font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:center}
.stat-val.warn{color:var(--primary);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}
.hud-msg{flex:1;display:flex;align-items:center;justify-content:center;gap:.6em;font-weight:800;font-size:clamp(18px,3.6vmin,40px);color:var(--dark);animation:rise .3s}
.hud-msg b{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--primary);color:#fff;font-variant-numeric:tabular-nums}
.hud-btns{display:flex;gap:clamp(6px,1.4vmin,14px)}
.timebar{height:8px;border-radius:99px;background:var(--soft);margin:6px 0 0;overflow:hidden}
.timebar span{display:block;height:100%;width:100%;background:var(--primary);transform-origin:left;transition:transform .25s linear}
[dir=rtl] .timebar span{transform-origin:right}

/* board */
.board-wrap{flex:1;display:grid;place-items:center;min-height:0;padding-top:1.5vmin}
/* flex-wrap (not grid) so a short last row sits centred instead of leaving a hole at one end */
.board{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--gap);
  width:calc(var(--cols) * var(--size) + (var(--cols) - 1) * var(--gap) + 1px)}
.board .card{flex:0 0 var(--size)}
.board .card{touch-action:none}
.card{position:relative;width:var(--size);height:var(--size);border:0;background:none;perspective:900px;border-radius:var(--radius)}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,.7,.4,1.2)}
.card.is-up .card-inner,.card.is-matched .card-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:var(--radius);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face.front{transform:rotateY(180deg);background:var(--face-bg);border:3px solid var(--soft);box-shadow:0 6px 16px rgb(0 0 0/.10)}
.face.front img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--face-fit);pointer-events:none;-webkit-user-drag:none}
.theme-fit-contain .face.front img{inset:6%;width:88%;height:88%;transition:inset .3s .2s,width .3s .2s,height .3s .2s}
/* when the name strip slides in, shrink the picture so the strip never covers it */
.theme-fit-contain .show-labels .card.is-matched .face.front img{inset:3% 15% auto;width:70%;height:70%}
.face.back{box-shadow:0 6px 16px rgb(0 0 0/.14)}
.back-brand{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10Q0 0 10 0Q0 0 0 10Q0 0-10 0Q0 0 0-10Z' fill='%23fff'/%3E%3C/svg%3E") center/38% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10Q0 0 10 0Q0 0 0 10Q0 0-10 0Q0 0 0-10Z' fill='%23fff' fill-opacity='.55'/%3E%3C/svg%3E") 72% 28%/13% no-repeat,
    linear-gradient(90deg,rgb(255 255 255/.16) 0 42%,transparent 0) 0 16%/100% 7% no-repeat,
    linear-gradient(90deg,rgb(255 255 255/.16) 0 26%,transparent 0) 0 26%/100% 7% no-repeat,
    linear-gradient(270deg,rgb(255 255 255/.16) 0 48%,transparent 0) 0 76%/100% 7% no-repeat,
    linear-gradient(270deg,rgb(255 255 255/.16) 0 30%,transparent 0) 0 86%/100% 7% no-repeat,
    var(--primary);
}
.back-brand::after{content:"";position:absolute;inset:6%;border:2px solid rgb(255 255 255/.45);border-radius:calc(var(--radius) * .7)}
.back-image{background:#fff center/cover no-repeat;border:3px solid var(--soft)}
.card:not(.is-up):not(.is-matched):hover .card-inner{transform:translateY(-3px)}
.card:active:not(.is-up) .card-inner{transform:scale(.96)}
.card.is-matched .face.front{border-color:var(--primary);box-shadow:0 0 0 4px rgb(255 255 255/.9),0 0 22px 2px var(--mid)}
.card.is-matched .card-inner{animation:pop .5s ease}
@keyframes pop{0%{transform:rotateY(180deg) scale(1)}45%{transform:rotateY(180deg) scale(1.1)}100%{transform:rotateY(180deg) scale(1)}}
.card.is-wrong .card-inner{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:rotateY(180deg) translateX(0)}25%{transform:rotateY(180deg) translateX(-6%)}75%{transform:rotateY(180deg) translateX(6%)}}
.card .label{position:absolute;left:0;right:0;bottom:0;padding:3% 4% 4%;font-size:clamp(11px,calc(var(--size) * .12),34px);font-weight:800;color:#fff;background:var(--primary);text-align:center;
  transform:translateY(100%);transition:transform .3s .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show-labels .card.is-matched .label{transform:none}
.board.locked .card{cursor:default}

/* banner (preview countdown / go) */
.banner{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);z-index:5;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;
  background:var(--primary);color:#fff;border-radius:999px;padding:.35em 1.1em;font-weight:800;font-size:clamp(26px,6vmin,72px);box-shadow:0 12px 40px rgb(0 0 0/.25);white-space:nowrap;text-align:center}
.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner small{display:block;font-size:.42em;font-weight:500;opacity:.92}
.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 3vmin);z-index:30;transform:translate(-50%,30px);opacity:0;z-index:5;pointer-events:none;
  background:var(--dark);color:#fff;border-radius:999px;padding:.4em 1.2em;font-weight:800;font-size:clamp(16px,3vmin,34px);transition:.3s;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* overlays */
.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgb(30 0 6/.45);backdrop-filter:blur(4px);padding:16px}
.panel{background:#fff;border-radius:calc(var(--radius) * 1.6);padding:clamp(20px,4vmin,48px);width:min(92vw,620px);max-height:92vh;overflow:auto;text-align:center;box-shadow:0 24px 70px rgb(0 0 0/.3);animation:rise .35s cubic-bezier(.3,.7,.4,1.3)}
@keyframes rise{from{transform:translateY(30px) scale(.94);opacity:0}}
.panel h2{font-weight:800;font-size:clamp(26px,5vmin,52px);color:var(--dark);line-height:1.1}
.stars{font-size:clamp(40px,9vmin,96px);letter-spacing:.08em;line-height:1;margin-bottom:8px}
.stars span{display:inline-block;color:#e8e2e3;transform:scale(.4);opacity:0;animation:star .5s forwards}
.stars span.on{color:#FFC21A;text-shadow:0 4px 0 #d79b00}
.stars span:nth-child(2){animation-delay:.25s}.stars span:nth-child(3){animation-delay:.5s}
@keyframes star{to{transform:scale(1);opacity:1}}
.result-msg{font-size:clamp(16px,2.8vmin,28px);margin:6px 0 16px;opacity:.85}
.result-stats{display:flex;justify-content:center;gap:16px;margin-bottom:12px}
.result-stats div{flex:1;max-width:200px;background:var(--soft);border-radius:var(--radius);padding:10px;display:flex;flex-direction:column}
.result-stats span{font-size:clamp(13px,2vmin,20px);opacity:.75}
.result-stats b{font-size:clamp(26px,5vmin,52px);color:var(--dark);font-variant-numeric:tabular-nums}
.result-best{min-height:1.3em;font-weight:800;color:var(--primary);font-size:clamp(16px,2.6vmin,26px)}
.result-btns{display:flex;justify-content:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.result-auto{margin-top:12px;font-size:clamp(16px,2.4vmin,24px);font-weight:800;color:var(--dark);opacity:.75;min-height:1.2em}
.btn{border:0;border-radius:999px;padding:.6em 1.6em;font-weight:800;font-size:clamp(18px,3vmin,30px);min-height:52px}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 5px 0 var(--dark)}
.btn.primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--dark)}
.btn.ghost{background:var(--soft);color:var(--dark)}
.btn.small{font-size:16px;min-height:44px;padding:.4em 1.1em}
.pin input{display:block;margin:18px auto 0;width:200px;font-size:34px;text-align:center;letter-spacing:.3em;border:3px solid var(--soft);border-radius:14px;padding:8px}
.pin-err{color:var(--primary);font-weight:800;margin-top:8px}
.settings{text-align:start}
.settings h2{text-align:center;margin-bottom:12px}
.settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--soft);font-size:18px}
.settings select{min-width:46%;font-size:17px;padding:8px 10px;border:2px solid var(--soft);border-radius:10px;background:#fff}
.settings label.check{justify-content:flex-start}
.settings label.check input{width:24px;height:24px;accent-color:var(--primary)}
.settings-row{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}

.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}

/* phones in portrait: stack HUD */
@media (max-aspect-ratio:3/4){
  .hud{flex-wrap:wrap;justify-content:space-between}
  .stats,.hud-msg{order:3;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}