/* My Diary (assets/js/modules/diary.js). All classes are prefixed .dy- */

/* ---------- shared bits ---------- */
.dy-face { flex: none; width: auto; object-fit: contain; }
.dy-private { display: inline-flex; align-items: center; gap: 6px; }
.dy-private .ico { color: var(--red); vertical-align: 0; }
.dy-shake { animation: dyShake .45s ease both; }
@keyframes dyShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.dy-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--red-10); color: var(--red); font-weight: 700; font-size: .92rem; padding: 5px 13px; border-radius: 999px; }

/* ---------- home: hero ---------- */
.dy-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; margin-top: 22px; }
.dy-hero-mo .mo-say { margin: 0; }
.dy-hero-card { border-top: 6px solid var(--red); display: flex; flex-direction: column; gap: 16px; }
.dy-today-q { display: flex; gap: 14px; align-items: center; }
.dy-today-ico { width: 64px; height: 64px; border-radius: 16px; background: var(--red-10); display: grid; place-items: center; flex: none; }
.dy-today-q p { margin: 2px 0 0; font-weight: 700; font-size: 1.12rem; line-height: 1.3; color: var(--char); }
.dy-write { font-size: 1.2rem; padding: 15px 22px; border-radius: 12px; width: 100%; }
.dy-write .ico { color: #fff; }
.dy-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dy-stat { text-align: center; background: var(--char-5); border-radius: 12px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; }
.dy-stat b { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--red); margin-top: 4px; }
.dy-stat span { font-size: .8rem; font-weight: 700; color: var(--char-80); line-height: 1.2; }
.dy-lockbtn { align-self: flex-start; }

.dy-empty h2 { margin-top: 6px; }
.dy-empty .kid-text { max-width: 30em; margin: 0 auto 18px; }

/* ---------- home: browse ---------- */
.dy-browse { margin-top: 40px; }
.dy-browse-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dy-browse-bar h2 { margin: 0; }
.dy-browse-bar .pill-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.dy-browse-bar .pill-tabs .ico { color: inherit; vertical-align: 0; }
.dy-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.dy-fams { flex: 1 1 520px; }
.dy-fchip { padding: 5px 14px 5px 6px; }
.dy-fchip[data-fam="all"] { padding: 8px 18px; }
.dy-fchip .dy-face { width: 26px; height: 28px; background: #fff; border-radius: 50%; }
.dy-fchip[style]:hover { border-color: var(--c-ink); color: var(--c-ink); }
.dy-fchip[style][aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.dy-search { position: relative; flex: 0 1 300px; min-width: 0; }
.dy-search > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--char-60); pointer-events: none; }
.dy-search .input { padding-left: 42px; border-radius: 999px; }
.dy-count { font-size: .9rem; font-weight: 600; color: var(--char-80); margin: 12px 0 0; }
.dy-month { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 1.3rem; color: var(--char); margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--char-10); }
.dy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 16px; }

.dy-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start;
  background: #fff; border: 1px solid var(--char-10); border-left: 6px solid var(--c); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 16px 14px; text-decoration: none; color: var(--char);
  transition: transform .15s ease, box-shadow .15s ease;
}
.dy-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(51, 61, 71, .13); }
.dy-card:focus-visible { outline-offset: 2px; }
.dy-card-date { width: 48px; text-align: center; padding-top: 2px; }
.dy-card-date b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.3rem; line-height: .9; color: var(--char); }
.dy-card-date span { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--char-60); margin-top: 3px; }
.dy-card-feel { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.dy-card-feel .dy-face { width: 34px; height: 36px; }
.dy-noface { display: inline-flex; }
.dy-word { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; line-height: 1; letter-spacing: .01em; }
.dy-word-plain { color: var(--red); }
.dy-time { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--char-60); white-space: nowrap; }
.dy-card-prompt { font-size: .88rem; font-weight: 700; color: var(--char-60); margin-top: 6px; }
.dy-card-text { margin: 4px 0 10px; font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dy-card-mo { display: flex; align-items: center; gap: 8px; background: var(--char-5); border-radius: 12px; padding: 5px 12px 5px 6px; font-size: .88rem; font-weight: 600; color: var(--char-80); line-height: 1.3; }
.dy-card-mo .mo { flex: none; }
.dy-thumb { width: 104px; height: 78px; object-fit: cover; border-radius: 10px; border: 1px solid var(--char-10); background: #fff; }
.dy-none { text-align: center; padding: 26px 10px; }
.dy-none .mo { margin: 0 auto 6px; }

/* ---------- calendar ---------- */
.dy-calwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 4px; }
.dy-cal { padding: clamp(14px, 2.4vw, 24px); }
.dy-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.dy-cal-title { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; color: var(--red); }
.dy-cal-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--char-20); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--char); }
.dy-cal-nav:hover:not([disabled]) { border-color: var(--red); color: var(--red); }
.dy-cal-nav[disabled] { opacity: .35; cursor: default; }
.dy-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dy-wd { text-align: center; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--char-60); padding-bottom: 4px; }
.dy-day { aspect-ratio: 1 / 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--char-5); color: var(--char-60); font-weight: 700; font-size: .95rem; border: 2px solid transparent; padding: 0; min-width: 0; }
.dy-day.dy-blank { background: transparent; }
.dy-day .n { line-height: 1; padding: 3px 6px; border-radius: 999px; }
.dy-day.dy-future { color: var(--char-40); background: transparent; }
.dy-day.dy-today .n { background: var(--red); color: #fff; }
.dy-day.dy-has { background: #fff; border-color: var(--char-20); color: var(--char); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .12s, transform .12s; }
.dy-day.dy-has:hover { border-color: var(--red); transform: translateY(-1px); }
.dy-day.dy-has[aria-pressed="true"] { border-color: var(--red); background: var(--red-10); }
.dy-dots { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; max-width: 100%; }
.dy-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.dy-cal-day .dy-month { margin-top: 0; }
.dy-cal-day .dy-grid { grid-template-columns: 1fr; }
.dy-cal-hint { display: flex; gap: 8px; align-items: flex-start; background: var(--char-5); border-radius: 14px; padding: 14px 16px; font-weight: 600; color: var(--char-80); margin: 0; }
.dy-cal-hint .ico { color: var(--red); margin-top: 3px; }

/* ---------- composer ---------- */
.dy-compose { display: grid; gap: 20px; max-width: 1000px; margin-top: 22px; }
.dy-restored { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1000px; background: var(--red-10); border-radius: 14px; padding: 10px 14px; margin-top: 18px; font-weight: 600; }
.dy-restored span { flex: 1 1 200px; }
.dy-step { scroll-margin-top: 90px; }
.dy-step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.dy-num { width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; flex: none; }
.dy-step-head h2 { font-size: clamp(1.55rem, 3.2vw, 2.1rem); margin: 4px 0 2px; }
.dy-step-head p { margin: 0; color: var(--char-80); font-weight: 500; }
.dy-opt { display: inline-block; vertical-align: middle; font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--char-80); background: var(--char-10); border-radius: 999px; padding: 3px 9px; margin-left: 4px; position: relative; top: -3px; }

.dy-feel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 26px; align-items: center; }
.dy-wheel .wheel-svg { max-width: 470px; }
.dy-feel-side { background: var(--char-5); border-radius: 18px; padding: 20px; transition: background .2s; }
.dy-feel-side[style] { background: var(--c-soft); }
.dy-chosen { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dy-chosen .dy-face { width: 76px; height: 80px; }
.dy-chosen-word { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 3rem); line-height: .95; color: var(--c-ink); overflow-wrap: anywhere; }
.dy-mini-mo { display: flex; align-items: center; gap: 12px; }
.dy-mini-mo .mo { flex: none; }
.dy-mini-mo p { margin: 0; font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.dy-feel-side .dy-chosen + .dy-mini-mo { background: #fff; border-radius: 14px; padding: 8px 12px 8px 6px; }
.dy-skip { margin-top: 14px; }

.dy-prompts { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.dy-prompt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; text-align: center;
  background: #fff; border: 2px solid var(--char-10); border-radius: 14px; padding: 14px 8px 12px; cursor: pointer;
  font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--char); transition: border-color .12s, background .12s, transform .12s;
}
.dy-prompt:hover { border-color: var(--red-40); transform: translateY(-1px); }
.dy-prompt[aria-pressed="true"] { border-color: var(--red); background: var(--red-10); box-shadow: 0 0 0 1px var(--red); }
.dy-prompt em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; background: var(--red); color: #fff; padding: 2px 8px; border-radius: 999px; }
.dy-prompt-free { border-style: dashed; border-color: var(--char-20); }
.dy-more { margin-top: 12px; }

.dy-q { display: block; font-weight: 700; font-size: 1.28rem; line-height: 1.3; color: var(--char); margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 4px solid var(--red); }
.dy-text { min-height: 170px; font-size: 1.12rem; line-height: 1.6; border-radius: 14px; padding: 14px 16px; }
.dy-write-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.dy-mic, .dy-draw-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 1rem;
  background: #fff; color: var(--char); border: 2px solid var(--char-20); border-radius: 999px; padding: 10px 20px 10px 16px;
}
.dy-mic .ico, .dy-draw-toggle .ico { color: var(--red); }
.dy-mic:hover, .dy-draw-toggle:hover { border-color: var(--red); color: var(--red); }
.dy-draw-toggle[aria-expanded="true"] { border-color: var(--red); background: var(--red-10); color: var(--red); }
.dy-mic.dy-listening { background: var(--red); border-color: var(--red); color: #fff; animation: dyPulse 1.4s ease-out infinite; }
.dy-mic.dy-listening .ico { color: #fff; }
@keyframes dyPulse { 0% { box-shadow: 0 0 0 0 rgba(211, 17, 69, .45); } 100% { box-shadow: 0 0 0 14px rgba(211, 17, 69, 0); } }

.dy-pad { margin-top: 14px; background: var(--char-5); border: 1px solid var(--char-10); border-radius: 18px; padding: 14px; }
.dy-pad-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 0 auto 12px; max-width: 680px; }
.dy-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.dy-sw { width: 36px; height: 36px; border-radius: 50%; background: var(--sw); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--char-20); cursor: pointer; padding: 0; transition: transform .1s; }
.dy-sw:hover { transform: scale(1.08); }
.dy-sw[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--char); transform: scale(1.08); }
.dy-tool-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dy-sizes { display: flex; gap: 4px; background: #fff; border: 1px solid var(--char-20); border-radius: 12px; padding: 3px; }
.dy-size { width: 38px; height: 38px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; display: grid; place-items: center; }
.dy-size i { display: block; border-radius: 50%; background: var(--char); }
.dy-size[aria-pressed="true"] { background: var(--red-10); box-shadow: inset 0 0 0 2px var(--red); }
.dy-tool { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 13px; border: 1px solid var(--char-20); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--char); }
.dy-tool .ico { color: var(--red); }
.dy-tool:hover:not([disabled]) { border-color: var(--red); color: var(--red); }
.dy-tool[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.dy-tool[aria-pressed="true"] .ico { color: #fff; }
.dy-tool[disabled] { opacity: .4; cursor: default; }
.dy-canvas { display: block; width: 100%; max-width: 680px; height: auto; aspect-ratio: 4 / 3; margin: 0 auto; background: #fff; border-radius: 14px; border: 1px solid var(--char-20); touch-action: none; cursor: crosshair; box-shadow: var(--shadow-sm); }

.dy-grat { display: grid; gap: 10px; }
.dy-grat-row { display: flex; align-items: center; gap: 12px; }
.dy-grat-n { width: 38px; height: 38px; border-radius: 50%; background: var(--red-10); color: var(--red); display: grid; place-items: center; flex: none; }
.dy-grat-n .ico { vertical-align: 0; }

.dy-savebar {
  position: sticky; bottom: 14px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--char-10); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(51, 61, 71, .16); padding: 12px 14px 12px 18px;
}
.dy-save-msg { margin: 0; flex: 1 1 240px; font-weight: 600; color: var(--red); display: flex; gap: 8px; align-items: flex-start; }
.dy-save-msg:empty { display: none; }
.dy-save-msg .ico { margin-top: 4px; }
.dy-savebar .row { margin-left: auto; }
.dy-save { font-size: 1.1rem; padding: 12px 26px; }

/* ---------- celebration ---------- */
.dy-done { padding: 24px 0 10px; }
.dy-done-card { max-width: 780px; margin: 0 auto; border-top: 8px solid var(--red); }
.dy-done-top { text-align: center; margin-bottom: 8px; }
.dy-done-badge { width: 92px; height: 92px; border-radius: 50%; background: var(--red-10); display: grid; place-items: center; margin: 4px auto 12px; animation: moPop .5s ease both; }
.dy-done-top h1 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); margin: 6px 0 10px; }
.dy-done-top h1:focus { outline: none; }
.dy-done-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dy-done .mo-say { margin: 18px 0 6px; }
.dy-done-safe .dy-done-card { border-top-color: var(--char); }
.dy-done-safe .dy-done-top h1 { color: var(--char); }
.dy-safety .safety-card { font-size: 1.05rem; box-shadow: var(--shadow); }
.dy-done-actions { justify-content: center; margin-top: 18px; }

/* ---------- read a page ---------- */
.dy-page-head h1 { color: var(--red); }
.dy-page-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 26px; align-items: start; margin-top: 22px; }
.dy-sheet { border-top: 8px solid var(--c); }
.dy-sheet-feel { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--char-10); }
.dy-sheet-feel .dy-face { width: 64px; height: 68px; }
.dy-feel-meta { font-size: .88rem; font-weight: 600; color: var(--char-80); margin-top: 4px; }
.dy-sheet-q { font-weight: 700; color: var(--char-80); border-left: 4px solid var(--c); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.dy-sheet-text { font-size: 1.15rem; line-height: 1.7; overflow-wrap: anywhere; }
.dy-sheet-doodle { margin: 16px 0; }
.dy-sheet-doodle img { width: 100%; max-width: 480px; border-radius: 14px; border: 1px solid var(--char-20); background: #fff; }
.dy-sheet-doodle figcaption { font-size: .82rem; font-weight: 700; color: var(--char-60); margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; }
.dy-sheet-grat { background: var(--char-5); border-radius: 14px; padding: 14px 16px; margin-top: 16px; }
.dy-sheet-grat h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.dy-sheet-grat ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dy-sheet-grat li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; overflow-wrap: anywhere; }
.dy-sheet-grat li .ico { color: var(--red); margin-top: 3px; }
.dy-sheet-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--char-10); }
.dy-sheet-tools a.icon-btn { text-decoration: none; }
.dy-confirm { margin-top: 14px; background: var(--red-10); border-left: 4px solid var(--red); border-radius: 12px; padding: 12px 16px; }
.dy-confirm p { margin: 0 0 10px; }
.dy-reply { position: sticky; top: 92px; }
.dy-reply .mo-say { margin: 8px 0 14px; }
.dy-reply .mo-say .bubble { max-width: none; }
.dy-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 36px; }
.dy-nav-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--char); border: 1px solid var(--char-20); border-radius: 14px; padding: 10px 14px; background: #fff; font-weight: 700; }
.dy-nav-link .ico { color: var(--red); }
.dy-nav-link small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--char-60); }
.dy-nav-link:hover { border-color: var(--red); }
.dy-nav-left { justify-self: start; }
.dy-nav-right { justify-self: end; flex-direction: row-reverse; text-align: right; }
.dy-nav-all { font-weight: 700; color: var(--red); text-decoration: none; }
.dy-nav-all:hover { text-decoration: underline; }

/* ---------- PIN lock ---------- */
.dy-lock { display: grid; place-items: center; padding: 34px 0 10px; min-height: 64vh; }
.dy-lock-card { width: 100%; max-width: 430px; text-align: center; border-top: 8px solid var(--red); }
.dy-lock-mo { position: relative; display: inline-block; }
.dy-lock-mo .mo { margin: 0 auto; }
.dy-lock-badge { position: absolute; right: -4px; bottom: 10px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--red); display: grid; place-items: center; box-shadow: var(--shadow); }
.dy-lock-badge .ico { vertical-align: 0; }
.dy-lock-card h1 { margin: 4px 0 4px; }
.dy-lock-sub { font-weight: 600; font-size: 1.1rem; margin: 0; }
.dy-pin-dots { display: flex; justify-content: center; gap: 16px; margin: 20px 0 4px; }
.dy-pin-dots i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--char-40); background: #fff; transition: background .15s, border-color .15s, transform .15s; }
.dy-pin-dots i.on { background: var(--red); border-color: var(--red); transform: scale(1.12); }
.dy-unlocked .dy-pin-dots i { background: var(--green-ink); border-color: var(--green-ink); }
.dy-pin-msg { min-height: 1.6em; margin: 6px 0 10px; font-weight: 600; color: var(--char-80); }
.dy-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 300px; margin: 0 auto; }
.dy-key { height: 66px; border-radius: 18px; border: 1px solid var(--char-20); background: #fff; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--char); box-shadow: var(--shadow-sm); display: grid; place-items: center; transition: background .1s, border-color .1s, transform .08s; }
.dy-key:hover { border-color: var(--red); color: var(--red); }
.dy-key:active, .dy-key.dy-press { background: var(--red-10); transform: scale(.96); }
.dy-key-soft { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--char-80); background: var(--char-5); }
.dy-forgot { font-size: .92rem; color: var(--char-80); margin: 22px 0 0; }
.dy-forgot a { color: var(--red); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .dy-savebar { bottom: 82px; }
}
@media (max-width: 900px) {
  .dy-hero, .dy-feel, .dy-page-grid, .dy-calwrap { grid-template-columns: minmax(0, 1fr); }
  .dy-wheel .wheel-svg { max-width: 420px; }
  .dy-reply { position: static; }
}
@media (max-width: 560px) {
  .dy-card { grid-template-columns: auto minmax(0, 1fr); padding: 14px 14px 12px 12px; gap: 10px 12px; }
  .dy-thumb { grid-column: 2; width: 100%; max-width: 220px; height: auto; aspect-ratio: 4 / 3; }
  .dy-card-date { width: 38px; }
  .dy-card-date b { font-size: 1.9rem; }
  .dy-word { font-size: 1.22rem; }
  .dy-search { flex: 1 1 100%; }
  .dy-wd span { display: none; }
  .dy-day { border-radius: 9px; font-size: .85rem; gap: 2px; }
  .dy-dots i { width: 6px; height: 6px; }
  .dy-cal-grid { gap: 4px; }
  .dy-num { width: 38px; height: 38px; font-size: 1.35rem; }
  .dy-step-head { gap: 10px; }
  .dy-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dy-pad { padding: 10px; margin-left: -6px; margin-right: -6px; }
  .dy-sw { width: 32px; height: 32px; }
  .dy-tool { padding: 0 10px; }
  .dy-savebar { padding: 10px; }
  .dy-savebar .row { width: 100%; }
  .dy-savebar .row .btn { flex: 1 1 auto; }
  .dy-stat b { font-size: 1.7rem; }
  .dy-key { height: 60px; }
  .dy-nav { grid-template-columns: 1fr 1fr; }
  .dy-nav-all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .dy-chosen .dy-face { width: 60px; height: 64px; }
}
@media (max-width: 400px) {
  .dy-tool span { display: none; }
  .dy-tool { width: 44px; justify-content: center; padding: 0; }
}
@media (max-width: 560px) {
  .dy-hero .mo-say, .dy-done .mo-say, .dy-reply .mo-say { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dy-hero .mo-say .bubble, .dy-done .mo-say .bubble, .dy-reply .mo-say .bubble { border-radius: 6px 18px 18px 18px; max-width: none; width: 100%; }
  .dy-hero .mo-say .mo, .dy-done .mo-say .mo, .dy-reply .mo-say .mo { width: 68px; height: 68px; }
  .dy-done-badge { width: 72px; height: 72px; }
  .dy-done-badge .illo { width: 44px; height: 44px; }
}
.dy-pin-dots.dy-wrong i.on { background: var(--salmon); border-color: var(--salmon); }