/* B · Fresh mint. Apply after the existing style.css; all controls remain real DOM. */
:root {
  color-scheme: light;
  color: #183d36;
  background: #ecf7f1;
  --ink: #183d36;
  --muted: #617d75;
  --blue: #287f71;
  --line: #c8e5db;
  --mint-surface: #fff;
  --mint-soft: #dff1e9;
  --mint-focus: #216c60;
}
body {
  color: var(--ink);
  background-color: #ecf7f1;
  background-image:
    radial-gradient(ellipse at -18% 14%, #d9f0e6 0 23%, transparent 23.2%),
    radial-gradient(ellipse at 118% 56%, #ddf2e9 0 26%, transparent 26.2%),
    radial-gradient(ellipse at -14% 97%, #dff2e9 0 29%, transparent 29.2%),
    linear-gradient(145deg, #f1fbf6, #e8f7ef 72%, #eef9f3);
  background-attachment: fixed;
}
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--mint-focus);
  outline-offset: 3px;
}
button:hover:not(:disabled) { filter: brightness(.975); }
button:active:not(:disabled) { filter: brightness(.95); }
.app-shell { max-width: 480px; padding-top: max(9px, env(safe-area-inset-top)); }
.site-header { min-height: 54px; gap: 8px; padding-inline: 15px; }
.icon-button {
  border: 1px solid #c8e4d9;
  background: #ffffffd9;
  color: #183d36;
  border-radius: 12px;
}
.icon-button svg { width: 25px; height: 25px; stroke-width: 2.5; }
.brand {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(18px, 4.7vw, 24px);
  line-height: 1.22;
  gap: 7px;
  letter-spacing: -.3px;
  text-align: center;
  font-weight: 850;
}
.brand img { width: 36px; height: 38px; flex: 0 0 36px; }
.brand::before, .brand::after {
  content: '';
  width: 8px;
  height: 15px;
  flex: 0 0 8px;
  background: linear-gradient(115deg, #9fc977 45%, #739a51 46% 55%, #b8d997 56%);
  border: 1px solid #67864d;
  border-radius: 100% 0 100% 0;
  transform: rotate(-40deg);
}
.brand::after { transform: rotate(35deg); }
:lang(zh) .brand, :lang(ja) .brand, :lang(ko) .brand { font-size: 25px; }
.header-language { display: flex; justify-content: flex-end; padding: 3px 16px 0; }
.header-language label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; min-width: 0; }
.language-select {
  font: inherit;
  color: #24594c;
  background: #ffffffde;
  border: 1px solid #c5e3d7;
  border-radius: 8px;
  max-width: 100%;
  min-height: 31px;
  padding: 4px 25px 4px 8px;
  cursor: pointer;
}
.header-language .language-select { width: 127px; font-size: 11px; }
.page { padding-inline: 15px; }
.level-header {
  width: max-content;
  max-width: 100%;
  min-height: 45px;
  border: 1px solid #c9e6da;
  border-radius: 13px;
  background: #ffffffec;
  margin: 9px auto 12px;
  padding: 7px 12px;
  gap: 12px;
}
.level-header h2 {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 11px;
  row-gap: 3px;
  text-align: center;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: .1px;
}
.level-header h2 span {
  color: #234f43;
  font-size: 15px;
  font-weight: 650;
  border-left: 0;
  border-inline-start: 1px solid #bfded1;
  padding-left: 0;
  padding-inline-start: 11px;
  overflow-wrap: anywhere;
}
.difficulty-badge {
  color: #20594a;
  background: #d9efe5;
  border: 1px solid #c2e2d3;
  border-radius: 8px;
  min-height: 30px;
  font-size: 17px;
  padding: 4px 9px;
}
.board-rules {
  gap: 7px;
  padding: 0;
  margin-bottom: 9px;
  background: transparent;
  border-radius: 0;
  align-items: stretch;
}
.board-rules > span {
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 70px;
  padding: 8px 6px;
  background: #ffffffec;
  border: 1px solid #c5e1d5;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 730;
  color: #21493f;
  line-height: 1.35;
  letter-spacing: -.1px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.board-rules > span::before {
  content: '';
  display: block;
  flex: 0 0 23px;
  width: 76px;
  max-width: 100%;
  height: 23px;
  background-repeat: no-repeat;
  background-position: center;
}
.board-rules > span:nth-child(1)::before {
  background-size: 76px 23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='23' viewBox='0 0 76 23'%3E%3Ccircle cx='7' cy='12' r='5' fill='%23aacfdd'/%3E%3Ccircle cx='19.5' cy='12' r='5' fill='%237cc8c1'/%3E%3Ccircle cx='32' cy='12' r='5' fill='%23bdd68c'/%3E%3Ccircle cx='44.5' cy='12' r='5' fill='%23aaa8d6'/%3E%3Ccircle cx='57' cy='12' r='5' fill='%23e7d277'/%3E%3Ccircle cx='69.5' cy='12' r='5' fill='%23ce9bb7'/%3E%3C/svg%3E");
}
.board-rules > span:nth-child(2)::before {
  background-size: 23px 23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23'%3E%3Cpath fill='%23579e8e' d='M1 1h6v6H1zM9 1h6v6H9zM17 1h6v6h-6zM1 9h6v6H1zM9 9h6v6H9zM17 9h6v6h-6zM1 17h6v6H1zM9 17h6v6H9zM17 17h6v6h-6z'/%3E%3C/svg%3E");
}
.board-rules > span:nth-child(3)::before {
  background-image: url('cow.svg?v=4'), url('cow.svg?v=4'), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 3 8 8m0-8-8 8' stroke='%23e77d80' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: left center, right center, center;
  background-size: 24px 23px, 24px 23px, 14px 14px;
  width: 72px;
}
.game-status {
  color: #183d36;
  background: #fffffff2;
  border: 1px solid #c4e2d5;
  border-radius: 12px;
  padding: 8px 11px;
  margin-bottom: 9px;
  min-height: 45px;
  column-gap: 3px;
}
.found-status { gap: 4px; font-size: 18px; }
.found-status strong { font-size: 20px; }
.found-status img { width: 28px; height: 29px; margin-right: 3px; }
.timer { gap: 5px; font-size: 16px; direction: ltr; }
.timer svg { width: 20px; height: 20px; }
.lives { color: #ff747b; gap: 4px; }
.lives svg { width: 21px; height: 21px; }
.lives .lost { color: #dcebe5; }
.board-wrap { background: #fff; border: 1px solid #c7e7d7; border-radius: 12px; padding: 6px; box-shadow: none; }
.board { gap: 3px; direction: ltr; }
.cell { border-radius: 6px; }
.cell:focus-visible { outline-color: #183d36; }
.cell.cow img { width: 78%; height: 78%; filter: none; }
.cell .x-mark { width: 43%; height: 43%; }
.x-mark::before, .x-mark::after { background: #fff; height: 20%; border-radius: 8px; }
.cell.auto .x-mark { opacity: .85; width: 40%; height: 40%; }
.operation-instruction { color: #365b4f; font-size: 12px; font-weight: 550; margin: 7px 0 9px; line-height: 1.5; }
.board-caption { color: #287f71; }
.input-mode {
  background: #fff;
  border: 1px solid #408d7c;
  padding: 3px;
  border-radius: 12px;
  gap: 3px;
  min-height: 48px;
  align-items: stretch;
}
.mode-button {
  padding: 8px 6px;
  min-height: 42px;
  color: #204d40;
  background: transparent;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 700;
  gap: 8px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.mode-button.selected { background: #287f71; color: #fff; }
.mode-button img { width: 29px; height: 29px; flex-shrink: 0; }
.cross-symbol { flex-shrink: 0; }
.actions { margin-top: 9px; gap: 8px; }
.actions button {
  background: #fffffff0;
  border: 1px solid #73ab96;
  color: #214d40;
  border-radius: 11px;
  padding: 8px 5px;
  min-height: 45px;
  font-size: 15px;
  font-weight: 650;
  gap: 8px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.actions svg { width: 23px; height: 23px; }
.actions #hint { color: #287f71; background: #e0f2e9; border-color: #9cc9b5; }
.game-bottom { background: #ffffffed; border: 1px solid #c5e4d5; border-radius: 12px; margin-top: 9px; padding: 3px 12px; }
.toggle-label { color: #244d40; min-height: 41px; font-weight: 650; gap: 12px; }
.toggle-label > span:first-child { min-width: 0; overflow-wrap: anywhere; padding-block: 5px; }
.toggle-label input { left: auto; right: auto; inset-inline-end: 0; }
.switch { flex-shrink: 0; background: #a9c9bb; }
.switch::after { box-shadow: 0 1px 3px #1746351a; }
.toggle-label input:checked + .switch { background: #287f71; }
.toggle-label input:focus-visible + .switch { outline-color: var(--mint-focus); }
.toast { color: #fff; background: #1e4d40f5; box-shadow: 0 8px 25px #173e301a; }
.dialog { border: 1px solid #c7e1d3; background: #fbfefc; color: #183d36; border-radius: 20px; box-shadow: 0 24px 85px #19463026; }
.dialog::backdrop { background: #173e326b; backdrop-filter: blur(4px); }
.dialog-close { color: #719481; right: auto; inset-inline-end: 10px; }
.dialog-kicker { color: #588c76; }
.dialog h2 { color: #1b4b3c; overflow-wrap: anywhere; }
.dialog p { color: #597669; }
.dialog .dialog-note { background: #eaf5ee; color: #5a7768; }
.help-steps > div { padding-left: 0; padding-inline-start: 34px; }
.help-steps > div > span { left: auto; inset-inline-start: 0; color: #4d9981; }
.primary-button { background: #287f71; color: #fff; border: 1px solid #287f71; border-radius: 11px; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.secondary-button { color: #287f71; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.level-group-title { color: #547e68; }
.level-select { color: #668671; background: #edf7f0; border-color: #d3e7da; }
.level-select.completed { color: #287f71; background: #d9efe2; }
.level-select.current { color: #216b5c; border-color: #287f71; }
.level-select.completed::after { right: auto; inset-inline-end: 5px; }
.level-select.updated::after { content: attr(data-new-label); background: #d8eee3; color: #347d61; right: auto; inset-inline-end: 4px; max-width: calc(100% - 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.level-select.locked { color: #7e9487; background: #f0f5f1; border-color: #dae5dc; }
.level-select.safari-locked::before { content: 'Safari'; position: absolute; bottom: 3px; inset-inline-end: 4px; color: #5e8c72; font-size: 7px; line-height: 1.2; }
.result-cow { background: #e2f2e8; }
.result-stats { gap: 9px; border-color: #d5e8dc; }
.result-stats > div { min-width: 0; flex: 1; }
.result-stats strong { color: #287f71; }
.result-stats small { color: #77917f; line-height: 1.5; overflow-wrap: anywhere; }
.settings-language { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: #557d68; margin-top: 17px; }
.settings-language .language-select { width: 65%; min-height: 38px; font-size: 13px; }
.settings-item { background: #f2f9f4; border-color: #d6e9da; color: #5a836c; text-align: start; }
.settings-item strong { color: #2e5b43; }
.settings-item small { color: #7b9984; }
.settings-item > small { color: #608d73; white-space: normal; max-width: 35%; overflow-wrap: anywhere; }
.settings-item.active { background: #e4f3e9; color: #287f71; border-color: #c0dfcb; }
.settings-item > span { min-width: 0; }
.journey-card { background: #eaf6ee; }
.journey-heading { color: #64876e; gap: 12px; }
.journey-heading strong { color: #287f71; }
.progress-track { background: #d4e8da; }
.progress-track > span { background: #5fa084; }
.journey-card p { color: #7b9581; }
.save-note { color: #829a89 !important; }
.audio-settings { background: #eaf6ee; border-color: #cee5d4; }
.audio-settings h3 { color: #3c7458; }
.audio-toggle small { color: #7b9684; line-height: 1.6; }
.volume-row { color: #74927f; flex-wrap: nowrap; }
.volume-row > span { max-width: 36%; line-height: 1.5; overflow-wrap: anywhere; }
.volume-row input { accent-color: #287f71; }
.volume-row output { color: #557c63; text-align: end; }
.audio-footer { border-color: #d1e5d7; }
.audio-footer #audio-status { color: #71917d; }
.audio-footer button { color: #287f71; white-space: normal; text-align: end; line-height: 1.5; }
.safari-dialog { width: min(440px, calc(100% - 24px)); max-height: 92dvh; padding: 25px 22px; }
.safari-card { text-align: center; }
.guide-language { display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;font-size:11px;color:#617d75; }
.guide-language .language-select { max-width:65%;font-size:11px; }
.safari-card .dialog-kicker { display: inline-block; background: #e0f2e7; color: #3c7c5c; padding: 5px 10px; border-radius: 20px; font-size: 11px; letter-spacing: .5px; }
.safari-card h2 { margin: 10px 0 8px; font-size: 25px; line-height: 1.35; }
.safari-card > p { margin: 8px 0 13px; line-height: 1.65; }
.guide-illustration { max-width: 260px; margin: 13px auto 15px; background: #eff8f2; border: 1px solid #d7eadd; border-radius: 14px; overflow: hidden; padding: 5px; }
.guide-illustration img { display: block; margin: 0 auto; width: 100%; max-width: 245px; height: auto; object-fit: contain; }
.guide-illustration .secondary-button { margin: 0 auto; font-size: 12px; min-height: 38px; }
.guide-steps { counter-reset: guide-step; list-style: none; padding: 0; display: grid; gap: 9px; margin: 17px 0; text-align: start; }
.guide-steps > li { counter-increment: guide-step; position: relative; padding-inline-start: 34px; min-height: 25px; font-size: 13px; line-height: 1.75; color: #355e46; overflow-wrap: anywhere; }
.guide-steps > li::before { content: counter(guide-step); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 23px; height: 23px; background: #e1f0e6; color: #287f71; border-radius: 50%; font-size: 12px; font-weight: 750; }
.guide-note { color: #73907e !important; font-size: 11px !important; line-height: 1.7 !important; }
.guide-actions { border-top: 1px solid #d9eade; padding-top: 12px; }
.guide-actions .primary-button { margin-top: 0; min-height: 47px; }
.guide-url { display: block; border: 1px solid #d0e6d6; color: #52745d; background: #edf7f0; width: 100%; border-radius: 9px; padding: 10px; min-height: 40px; margin-top: 9px; font-size: 11px; }
.guide-actions > p[role='status'] { min-height: 17px; margin: 7px 0 0; font-size: 11px; color: #287f71; line-height: 1.6; }
.guide-actions .secondary-button { margin-top: 3px; }
@keyframes hint-ring { 0%, 100% { box-shadow: 0 0 0 0 #287f71; } 50% { box-shadow: 0 0 0 3px #287f71; } }
[dir='rtl'] .brand::before { transform: rotate(35deg); }
[dir='rtl'] .brand::after { transform: rotate(-40deg); }
[dir='rtl'] .settings-item > svg:last-child { transform: scaleX(-1); }
[dir='rtl'] .primary-button svg { transform: scaleX(-1); }
@media (max-width: 600px) {
  .app-shell { padding-top: max(5px, env(safe-area-inset-top)); }
  .site-header { min-height: 48px; }
  .page { padding-inline: 12px; }
  .level-header { min-height: 43px; padding: 6px 10px; margin-block: 7px 10px; gap: 10px; }
  .level-header h2 { font-size: 21px; }
  .level-header h2 span { font-size: 14px; }
  .board-rules { gap: 6px; margin-bottom: 8px; }
  .board-rules > span { min-height: 65px; font-size: 11px; padding: 7px 4px; gap: 5px; }
  .board-rules > span::before { flex-basis: 21px; height: 21px; }
  .game-status { min-height: 43px; padding: 7px 10px; margin-bottom: 8px; }
  .board-wrap { padding: 5px; }
  .operation-instruction { font-size: 12px; margin-block: 6px 8px; }
  .dialog { padding: 28px 24px; }
  .safari-dialog { padding: 23px 21px; }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 10px; grid-template-columns: 39px 1fr 39px; gap: 5px; }
  .icon-button { width: 39px; height: 39px; }
  .brand { font-size: 16px; gap: 5px; }
  :lang(zh) .brand, :lang(ja) .brand, :lang(ko) .brand { font-size: 22px; }
  .brand img { width: 30px; height: 33px; flex-basis: 30px; }
  .brand::before, .brand::after { width: 6px; height: 12px; flex-basis: 6px; }
  .page { padding-inline: 10px; }
  .level-header { gap: 7px; padding-inline: 8px; }
  .level-header h2 { font-size: 19px; gap: 7px; }
  .level-header h2 span { font-size: 13px; padding-inline-start: 7px; }
  .difficulty-badge { min-height: 28px; font-size: 15px; padding-inline: 7px; }
  .board-rules { gap: 5px; }
  .board-rules > span { min-height: 65px; font-size: 10px; letter-spacing: -.15px; }
  .game-status { padding-inline: 8px; }
  .found-status { font-size: 15px; gap: 3px; }
  .found-status strong { font-size: 18px; }
  .found-status img { width: 24px; height: 25px; margin-right: 1px; }
  .timer { font-size: 14px; gap: 3px; }
  .timer svg { width: 17px; height: 17px; }
  .lives { gap: 3px; }
  .lives svg { width: 18px; height: 18px; }
  .mode-button { font-size: 14px; gap: 6px; padding-inline: 4px; }
  .mode-button img { width: 25px; height: 25px; }
  .actions { gap: 6px; }
  .actions button { font-size: 13px; gap: 5px; }
  .actions button { flex-direction: column; gap: 3px; hyphens: auto; }
  .actions svg { width: 20px; height: 20px; }
  .dialog { padding: 26px 18px; }
  .safari-card h2 { font-size: 23px; }
}
@media (max-height: 760px) and (max-width: 600px) {
  .app-shell { padding-top: max(2px, env(safe-area-inset-top)); }
  .site-header { min-height: 44px; }
  .header-language { padding-top: 0; }
  .header-language .language-select { min-height: 27px; padding-block: 3px; }
  .level-header { min-height: 38px; margin-block: 5px 7px; padding-block: 4px; }
  .board-rules > span { min-height: 59px; padding-block: 6px; gap: 3px; }
  .game-status { min-height: 40px; padding-block: 5px; margin-bottom: 7px; }
  .operation-instruction { margin-block: 5px 7px; }
  .input-mode { min-height: 45px; }
  .mode-button { min-height: 38px; padding-block: 6px; }
  .actions { margin-top: 7px; }
  .actions button { min-height: 42px; padding-block: 7px; }
  .game-bottom { margin-top: 7px; }
  .toggle-label { min-height: 37px; }
  .safari-dialog { max-height: 94dvh; padding-block: 18px; }
  .guide-illustration { max-width: 210px; margin-block: 10px; }
}
@media (min-width: 800px) {
  body { background-image: radial-gradient(ellipse at 10% 20%, #d9f0e6 0 18%, transparent 18.2%), radial-gradient(ellipse at 94% 72%, #def2e8 0 25%, transparent 25.2%), linear-gradient(145deg, #f1fbf6, #e8f7ef); }
  .app-shell { padding-top: 18px; padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}