*{box-sizing:border-box}body{margin:0;background:#f8f7ff;color:#251b48;font-family:system-ui,"Segoe UI",Tahoma,sans-serif}button,select,input{font:inherit}button,select{cursor:pointer}button,input,select{border:1px solid #e3def4;border-radius:12px;padding:.65rem .9rem;background:white;color:inherit}button:hover:not(:disabled){border-color:#7b50dc}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8055e4;outline-offset:2px}button:disabled{cursor:default}header{background:white;border-bottom:1px solid #ece8f8;display:flex;align-items:center;justify-content:space-between;padding:14px max(4vw,calc((100vw - 1120px)/2));gap:12px}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px;font-weight:850}.brand b{background:#7045ce;color:white;padding:7px 12px;border-radius:12px}nav{display:flex;gap:6px;flex-wrap:wrap}main{max-width:1160px;margin:auto;padding:24px 20px}.hero{background:#4a278e;color:white;border-radius:26px;padding:26px clamp(20px,5vw,55px);display:flex;align-items:center;justify-content:space-between;gap:12px;overflow:hidden;min-height:180px;background-image:radial-gradient(ellipse at 12% 110%,#9466eb,transparent 66%)}h1{font-size:clamp(1.8rem,4vw,3.1rem);margin:0}p{line-height:1.55;margin:.45em 0}.hero p{color:#eee6ff}.art{display:flex;direction:ltr;padding:12px;align-items:center}.art span{display:grid;place-items:center;width:clamp(34px,7vw,78px);aspect-ratio:1;border-radius:18%;background:#ffdc82;color:#442578;font-size:clamp(1.1rem,3vw,2.4rem);font-weight:900;transform:rotate(-13deg);box-shadow:0 7px #c99e56}.art span:nth-child(2){background:#bcecd8;transform:rotate(12deg);box-shadow:0 7px #68ad91}.art span:nth-child(3){background:#f2c4ef;transform:rotate(-9deg);box-shadow:0 7px #b983b4}.layout{display:grid;grid-template-columns:minmax(230px,280px) 1fr;gap:18px;margin-top:18px}aside,.panel,dialog{background:white;border:1px solid #eae5f6;border-radius:22px;padding:20px;box-shadow:0 8px 22px #3c206209}h2{font-size:1.14rem;margin:0 0 8px}#players label{display:flex;gap:6px;margin-bottom:7px}input{width:100%;min-width:0;background:#faf8ff}hr{border:0;border-top:1px solid #eee8f8;margin:16px 0}#levels{display:grid;gap:6px}#levels button{text-align:start}button[aria-pressed=true]:not(#sound){background:#efe7ff;color:#4e249b;border-color:#bda3ef}.primary{width:100%;background:#6d40cc;color:white;margin-top:13px;font-weight:800;border:0}.panelhead{display:flex;align-items:start;justify-content:space-between;gap:8px}#status,#hint{color:#635680}#progress{background:#eee7ff;border-radius:40px;padding:6px 13px;white-space:nowrap}#scores{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.score{padding:4px 9px;background:#f4f1fb;border-radius:20px;overflow-wrap:anywhere}.active{background:#fff0bb}#board:not(:empty) {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(5px,1.4vw,15px);
  max-width:520px;
  margin:16px auto 18px;
  padding:clamp(8px,2.4vw,26px);
  border:1px solid #d8a15f;
  border-radius:18px;
  background:
    repeating-linear-gradient(92deg,#a5672820 0 1px,transparent 1px 9px,#fff6ce35 9px 12px,transparent 12px 23px),
    linear-gradient(100deg,#f8dc9f,#efbf7e 42%,#f9d999 78%,#e7ac65);
  box-shadow:inset 0 3px 2px #fff4d1,inset 0 -2px 4px #9d592733,0 7px #a06838,0 12px 16px #6a391f42;
}
.card {
  position:relative;
  display:grid;
  place-content:center;
  text-align:center;
  width:100%;
  min-width:0;
  aspect-ratio:1;
  padding:3px;
  border:2px solid #05452f;
  border-radius:50%;
  background:radial-gradient(ellipse at 36% 24%,#338961,#136c4d 52%,#0c543b 80%);
  box-shadow:inset 0 2px 2px #a8dd8b80,inset 0 -4px #064832,0 3px 4px #67402091;
  color:#233023;
  font-size:clamp(1.1rem,4vw,2.6rem);
  line-height:1.05;
  font-weight:850;
  transition:transform 140ms ease,box-shadow 140ms ease;
}
.card:not(.open):not(.matched)::before {
  content:"";
  width:clamp(10px,2.9vw,27px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 24%,#4b9a6b,#14684b 42%,#074a34 84%);
  box-shadow:0 3px 5px #0036239c,inset 0 1px 2px #86c8909c;
}
.card:hover:not(:disabled) {border-color:#074f37;transform:translateY(-2px)}
.card:active:not(:disabled) {transform:translateY(1px)}
.card.open,.card.matched {
  border-color:#b5834d;
  background:radial-gradient(circle at 48% 62%,#fffef7 56%,#ebddc5 92%);
  box-shadow:inset 0 4px 6px #71421973,0 1px #fff0c1;
  overflow:hidden;
}
.card.matched {
  border-color:#6c9462;
  background:radial-gradient(circle at 48% 62%,#f5fff0 56%,#c1dbb4 92%);
}
.card:has(.word-face) {font-size:clamp(.63rem,2.1vw,1.35rem)}
.card small {font-size:clamp(.57rem,1.8vw,.9rem);display:block;margin-top:2px}
@media(prefers-reduced-motion:reduce) {.card {transition:none}}#hint{text-align:center;margin-top:14px}dialog{width:min(92vw,540px);max-height:80vh;color:inherit}dialog::backdrop{background:#251b4877}dialog form{float:inline-end}.entry{border-bottom:1px solid #eee8f8;padding:10px 0;overflow-wrap:anywhere}@media(max-width:690px){.layout{grid-template-columns:1fr}.panel{grid-row:1}main{padding:12px}.hero{min-height:134px}.art{padding:0}header{padding:10px}nav button,nav select{padding:5px}#board{gap:7px}}
.choice-icon{display:inline-grid;place-items:center;min-width:1.3em;margin-inline-end:.38em;line-height:1;vertical-align:middle}
.level-icon{width:2rem;height:2rem;border-radius:9px;background:#f4edff}
#levels button:nth-child(2) .level-icon{background:#e1f4e8}
#levels button:nth-child(3) .level-icon{background:#fff0cc}
#levels button[aria-pressed=true]{font-weight:750}
.card.open>span,.card.open>small{animation:reveal-face .22s ease-out}
@keyframes reveal-face{from{transform:scale(.65);opacity:.4}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.card.open>*{animation:none}}
.card:has(.picture-face) {
  place-content:initial;
  place-items:center;
  align-content:center;
  grid-template-rows:58% auto;
  gap:2px;
}
.picture-face {
  display:block;
  height:100%;
  max-width:82%;
  background-image:url("./card-art.png");
  background-repeat:no-repeat;
  mix-blend-mode:multiply;
}
.card:has(.picture-face) small {
  margin:0;
  max-width:100%;
  font-size:clamp(.56rem,1.9vw,.94rem);
  overflow-wrap:anywhere;
}
@media(max-width:690px){


}
.round-actions .primary{margin:0 0 6px}
@media(max-width:690px){
  .hero{min-height:0;padding:12px 14px}
  .hero h1{font-size:clamp(1.25rem,5vw,1.8rem)}
  .hero p{font-size:.84rem}
  .layout{margin-top:10px;gap:10px}
  .panel{padding:12px}
  #board:not(:empty){margin:6px auto 12px;padding:9px;gap:6px}


  #hint{margin-top:8px;font-size:.83rem}
}
.icon-button {
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
  cursor:pointer;
}
.icon-button svg{width:22px;height:22px;pointer-events:none}
[dir="rtl"] #back svg{transform:scaleX(-1)}
.round-actions [hidden]{display:none}
.round-actions .icon-button{width:44px}
.playing {
  color:#f3f9f5;
  background:radial-gradient(ellipse at 50% 95%,#205b48,#102e29 75%);
}
.playing header,.playing .hero,.playing aside,.playing #hint,.playing #boardLabel{display:none}
.playing main{max-width:none;padding:0}
.playing .layout{display:block;margin:0}
.playing .panel{
  height:100vh;
  height:100dvh;
  padding:clamp(8px,1.7vw,18px);
  padding-top:max(clamp(8px,1.7vw,18px),env(safe-area-inset-top));
  padding-bottom:max(clamp(8px,1.7vw,18px),env(safe-area-inset-bottom));
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr);
  gap:6px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.playing .round-actions{
  grid-row:1;
  display:flex;
  align-items:center;
  gap:7px;
}
.playing .round-actions button,.playing #help summary{
  background:#ffffff13;
  border:1px solid #ffffff2b;
  color:#f3f9f5;
  margin:0;
}
.playing #next{background:#eac47c;color:#17362c;border-color:transparent}
.playing #game-sound[aria-pressed=true]{background:#ffffff13;color:#f3f9f5;border-color:#ffffff2b}
.playing #help{position:relative;margin-inline-start:auto}
.playing #help summary{list-style:none}
.playing #help summary::-webkit-details-marker{display:none}
.playing #help-text{
  position:absolute;
  inset-inline-end:0;
  top:50px;
  width:min(320px,82vw);
  z-index:2;
  background:#f8fffa;
  color:#17362c;
  border:1px solid #b8d3c2;
  border-radius:14px;
  box-shadow:0 8px 22px #081d1a70;
  padding:12px;
  line-height:1.55;
}
.playing .panelhead{grid-row:2;align-items:center}
.playing #status{color:#e3f0e8;margin:0;font-size:clamp(.76rem,2.8vw,1rem)}
.playing #progress{
  direction:ltr;
  color:#f6e5bd;
  background:#ffffff12;
  font-variant-numeric:tabular-nums;
  font-size:.88rem;
}
.playing #scores{grid-row:3;margin:0;gap:5px}
.playing .score{color:#f2f8f5;background:#ffffff18;font-size:.82rem}
.playing .score.active{color:#19372d;background:#ead4a3}
.playing #board-stage{
  grid-row:4;
  container-type:size;
  display:grid;
  place-items:center;
  min-height:0;
  min-width:0;
}
.playing #board:not(:empty){
  --columns:4;
  --rows:4;
  --spacing:clamp(4px,1vw,12px);
  width:min(100cqw,calc(100cqh * 1.35));
  height:auto;
  max-height:100%;
  max-width:none;
  margin:0;
  padding:var(--spacing);
  gap:var(--spacing);
  border-radius:clamp(12px,2vw,22px);
  box-shadow:inset 0 2px 2px #fff4d1,0 4px #a06838,0 8px 20px #0a231d66;
  grid-template-columns:repeat(var(--columns),minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  place-items:center;
}
.playing .card{
  width:min(100%,calc((100cqh - (var(--rows) + 1) * var(--spacing)) / var(--rows)));
  font-size:clamp(1.25rem,6cqw,3.4rem);
}
.playing .card:has(.word-face){font-size:clamp(.7rem,4cqw,1.65rem)}
.playing .card small{font-size:clamp(.58rem,3.3cqw,1.08rem)}
@media(orientation:landscape) and (max-height:600px){
  .playing .panel{
    grid-template-columns:clamp(132px,23vw,230px) minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr;
    column-gap:12px;
  }
  .playing .round-actions,.playing .panelhead,.playing #scores{grid-column:1}
  .playing .round-actions{flex-wrap:wrap}
  .playing #help{margin-inline-start:0}
  .playing #board-stage{grid-column:2;grid-row:1 / -1}
  .playing #board:not(:empty){width:100%}
}

/* Board hugs its cards instead of stretching to the full screen height. */
.playing #board:not(:empty){align-content:center}
.playing .round-actions .primary:not(.icon-button){width:auto;padding:.55rem 1.1rem}
.playing #play{background:#eac47c;color:#17362c;border-color:transparent}
.card.no-caption:has(.picture-face){grid-template-rows:74%}
.card:has(.emoji-face){place-content:initial;place-items:center;align-content:center;gap:2px}
.emoji-face{font-size:clamp(1.6rem,8vw,3rem);line-height:1.1;font-weight:400}
.card.no-caption .emoji-face{font-size:clamp(1.9rem,10vw,3.6rem)}
.playing .emoji-face{font-size:min(11cqw,12cqh)}
.playing .card.no-caption .emoji-face{font-size:min(14cqw,15cqh)}
.card:has(.emoji-face) small{margin:0;max-width:100%;font-size:clamp(.56rem,1.9vw,.94rem);overflow-wrap:anywhere}
.playing .card:has(.emoji-face) small{font-size:clamp(.58rem,3.3cqw,1.08rem)}
.score.winner,.playing .score.winner{background:#ffd76a;color:#3a2a00;font-weight:800;animation:winner-pulse 1.1s ease-in-out 3}
@keyframes winner-pulse{50%{transform:scale(1.08)}}
#board.finished .card{animation:cheer .7s ease-in-out both}
#board.finished .card:nth-child(4n+2){animation-delay:.08s}
#board.finished .card:nth-child(4n+3){animation-delay:.16s}
#board.finished .card:nth-child(4n){animation-delay:.24s}
@keyframes cheer{40%{transform:translateY(-7%) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.score.winner,#board.finished .card{animation:none}}
#ask{width:min(92vw,400px);text-align:center}
#ask p{margin:.2em 0 1em;font-weight:700}
.ask-actions{display:flex;gap:10px;justify-content:center}
.ask-actions button{flex:1;margin:0;width:auto}
.clear-history{margin-top:14px}
#notice{position:fixed;inset-inline:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:5;margin:0 auto;max-width:460px;padding:10px 14px;border-radius:14px;background:#251b48;color:white;text-align:center;box-shadow:0 8px 22px #0006}
#notice[hidden]{display:none}
.training-settings{display:grid;gap:8px;margin-top:14px}
.training-settings select{width:100%;min-width:0}
.training-settings label{display:flex;gap:8px;align-items:center}
.training-settings input{width:auto;accent-color:#6740c4}
/* Memory preview: cards stay readable while disabled. */
#board.previewing .card:disabled{opacity:1;cursor:default}
#board.previewing{outline:3px dashed #eac47c;outline-offset:4px}
@media(prefers-reduced-motion:reduce){#board.previewing{outline-style:solid}}
/* Captions shrink with the card instead of breaking words in half. */
.playing .card small,.playing .card:has(.emoji-face) small{font-size:clamp(.5rem,min(3.3cqw,3.4cqh),1.08rem);overflow-wrap:normal;word-break:keep-all}
.playing .card:has(.word-face){font-size:clamp(.6rem,min(4cqw,4.2cqh),1.65rem)}
.playing .word-face{overflow-wrap:normal;word-break:keep-all}
.card:has(.picture-face) small,.card:has(.emoji-face) small{overflow-wrap:normal;word-break:keep-all;font-size:clamp(.5rem,1.75vw,.94rem)}
.playing .card:has(.picture-face) small,.playing .card:has(.emoji-face) small{font-size:clamp(.5rem,min(3.3cqw,3.4cqh),1.08rem)}