
:root{--bg:#ebe4d6;--paper:#fbf8f0;--ink:#28251f;--muted:#766f64;--line:#d2c7b7;--accent:#405247;--good:#28633d;--bad:#963d35;--cell:clamp(43px,11.7vw,64px);--gap:clamp(5px,1.7vw,9px);font-family:Georgia,serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top left,#fff9,transparent 35%),var(--bg);color:var(--ink)}body{padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));-webkit-tap-highlight-color:transparent}.app{max-width:920px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:4px 2px 12px}.kicker{font:700 .65rem -apple-system,sans-serif;letter-spacing:.14em;color:var(--muted);margin:0 0 3px}h1{font-size:clamp(2rem,8vw,3.4rem);letter-spacing:-.055em;line-height:.95;margin:0}h2{font-size:1.08rem;margin:0 0 8px}button,select{font:inherit}button{border:0;border-radius:13px;padding:11px 14px;background:var(--accent);color:#fff;font-weight:700;box-shadow:0 2px 0 #0002}.secondary,.icon{background:#fff;color:var(--ink);border:1px solid var(--line)}.icon{font-size:1.2rem;padding:8px 11px}.status{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px}.status div,.gameCard,.lower article{background:#fbf8f0e8;border:1px solid var(--line);box-shadow:0 9px 28px #584b3712}.status div{border-radius:13px;text-align:center;padding:8px 4px}.status span,.wordbar small{display:block;font:700 .64rem -apple-system,sans-serif;letter-spacing:.07em;color:var(--muted)}.status b{font-size:1.15rem}.gameCard{border-radius:22px;padding:13px}.wordbar{display:flex;justify-content:space-between;align-items:end;gap:8px}.wordbar>div:last-child{display:flex;gap:7px}.wordbar strong{display:block;min-height:31px;font-size:clamp(1.35rem,6vw,2rem);letter-spacing:.09em}.playfield{display:grid;grid-template-columns:minmax(40px,62px) min-content minmax(40px,62px);justify-content:center;gap:var(--gap);overflow-x:auto;margin:17px 0 10px}.gutter{display:grid;grid-template-rows:repeat(5,var(--cell));gap:var(--gap)}.gutterRow{border:1px dashed var(--line);border-radius:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px;padding:2px;background:#fff5}.symbol{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font:700 .72rem -apple-system,sans-serif}.symbol.done{opacity:.25}.boardWrap{position:relative}.board{display:grid;gap:var(--gap);position:relative;z-index:2}.cell{width:var(--cell);height:var(--cell);padding:0;border:1px solid #c4b7a6;border-radius:16px;background:linear-gradient(#fffefa,#f3ecdf);color:var(--ink);font-size:clamp(1.2rem,5.8vw,1.8rem);box-shadow:inset 0 -4px 0 #574a3512,0 3px 8px #574a3512}.cell.selected{background:linear-gradient(#53665a,#38473d);color:#fff;border-color:#314037}svg{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:1}polyline{fill:none;stroke:#4c6254;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.4}.message{text-align:center;min-height:24px;font-weight:700;margin:8px 0}.message.good{color:var(--good)}.message.bad{color:var(--bad)}.actions{display:flex;justify-content:center;gap:8px}.lower{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}.lower article{border-radius:18px;padding:14px}.help{color:var(--muted);font-size:.9rem;margin:0 0 10px}ol,ul{margin:0;padding-left:21px}li{margin:6px 0}li.done{color:var(--good)}#objectives{list-style:none;padding:0;display:grid;gap:8px}.objectiveItem{margin:0;border:1px solid transparent;border-radius:13px;min-height:54px;padding:8px 10px;display:flex;align-items:center;justify-content:flex-start;gap:10px;cursor:pointer;user-select:none}.objectiveItem:active{background:#dfe6df80;border-color:var(--line)}.objectiveItem:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.objectiveEndpoint{display:grid;justify-items:center;gap:2px;min-width:58px}.objectiveEndpoint small{font:700 .57rem -apple-system,sans-serif;letter-spacing:.08em;color:var(--muted)}.objectiveSymbol{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font:700 1rem -apple-system,sans-serif}.objectiveArrow{font-size:1.35rem;color:var(--muted)}.objectiveItem.done{background:#e7efe7;color:var(--good);font-size:1.05rem}.objectiveCheck{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--good);color:#fff;font-family:-apple-system,sans-serif;font-weight:800}.objectivePulse{animation:objectivePulse .9s cubic-bezier(.2,.9,.2,1.2);position:relative;z-index:4}dialog{border:0;padding:0;background:transparent;width:min(calc(100% - 22px),500px)}dialog::backdrop{background:#221f1a70;backdrop-filter:blur(3px)}dialog form{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:17px}.dialogHead{display:flex;justify-content:space-between;align-items:center}.dialogHead h2{margin:0}label{display:grid;gap:6px;margin:12px 0;color:var(--muted);font:700 .76rem -apple-system,sans-serif}select{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px;background:#fff;color:var(--ink);font-size:1rem}#apply{width:100%;margin-top:5px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;background:#dfe6df;border-radius:14px;padding:10px;margin:14px 0}.stats div{text-align:center}.stats span{display:block;color:var(--muted);font-size:.7rem}.stats b{font-size:1.2rem}details{color:var(--muted)}@media(min-width:760px){.lower{grid-template-columns:1fr 1fr}.gameCard{padding:20px}}

/* iPhone game interaction safeguards */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;overscroll-behavior:none;}
.cell,.playfield,.boardWrap{touch-action:manipulation;-webkit-user-select:none;user-select:none;}

.toggleLabel{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:13px;padding:11px 12px;background:#fff;color:var(--ink)}.toggleLabel span{display:grid;gap:2px}.toggleLabel small{color:var(--muted);font-weight:400}.toggleLabel input{width:24px;height:24px;accent-color:var(--accent)}button:disabled{opacity:.48;box-shadow:none}


.completeDialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(calc(100% - 32px), 420px);
}

.completeDialog::backdrop {
  background: rgba(35, 31, 25, .48);
  backdrop-filter: blur(4px);
}

.completeCard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 28px 20px 20px;
  text-align: center;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
  animation: completePop .34s cubic-bezier(.2,.9,.2,1.25);
}

.completeCard h2 {
  margin: 6px 0 8px;
  font-size: 1.7rem;
}

.completeCard p {
  color: var(--muted);
  margin-bottom: 18px;
}

.celebrationIcon {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 2.3rem;
  animation: sparkle .7s ease-out;
}

.completeActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.boardCelebration .gameCard {
  animation: gameCardPop .65s ease-out;
}

@keyframes completePop {
  0% { transform: scale(.72); opacity: 0; }
  70% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes sparkle {
  0% { transform: scale(.4) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

@keyframes gameCardPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

.versionTag{font-size:.36em;color:var(--muted);font-weight:700;vertical-align:middle;letter-spacing:.02em;white-space:nowrap}
.settingsVersion{text-align:center;color:var(--muted);font-size:.78rem;margin:14px 0 0}
.hintPulse{animation:hintPulse .9s ease-out!important;position:relative;z-index:5}
.pairPop{animation:pairPop .55s cubic-bezier(.2,.9,.2,1.25)}
@keyframes hintPulse{0%{box-shadow:0 0 0 0 rgba(62,77,66,.7);transform:scale(1)}45%{box-shadow:0 0 0 12px rgba(62,77,66,.12);transform:scale(1.08)}100%{box-shadow:0 0 0 0 rgba(62,77,66,0);transform:scale(1)}}
@keyframes pairPop{0%{transform:scale(.92);opacity:.55}55%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

.soundTestButton { width: 100%; transition: transform .08s ease, background .12s ease, box-shadow .12s ease; }
.soundTestButton:active, .soundTestButton.isPlaying { transform: translateY(2px) scale(.985); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 2px 5px rgba(0,0,0,.16); }
.soundStatus { min-height: 1.2em; margin: 6px 2px 12px; text-align: center; color: var(--muted); font: 700 .72rem/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

@keyframes objectivePulse{0%{transform:scale(1);box-shadow:0 0 0 0 #40524755}35%{transform:scale(1.45);box-shadow:0 0 0 8px #40524725;background:#dfe6df}70%{transform:scale(1.18);box-shadow:0 0 0 3px #40524722}100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}
