/* Рэнсю и мондай на странице урока (assets/renshu.js): бумажные карточки с обводкой тушью, плитки — как кнопки-слова плаката. */
.rs-card { margin: 0 0 18px; padding: 18px 20px 20px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.rs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.rs-head h3 { margin: 0; font: 700 22px var(--font-display); }
.rs-head p { margin: 0; font: 17px/1.35 var(--font-hand); color: var(--ink-soft); }

/* вкладки упражнений */
.rs-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.rs-tabs button { padding: 5px 12px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; color: var(--ink); font: 600 14px var(--font-ui); cursor: pointer; }
.rs-tabs button[aria-selected="true"] { background: var(--n1); box-shadow: 0 2px 0 var(--ink); }
.rs-tabs button.done::after { content: ' ✓'; color: #2f7d4f; font-weight: 800; }

/* образец: картинка, подсказка → фраза */
.rs-model { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px; background: #fff7d6; border: 2px dashed rgba(43, 37, 35, .4); border-radius: 12px; }
.rs-rei { padding: 2px 9px; border-radius: 7px; background: var(--ink); color: var(--paper); font: 700 15px 'Klee One', serif; }
.rs-arrow { font: 700 22px var(--font-hand); color: var(--shu); }
.rs-cue { display: inline-flex; align-items: center; gap: 8px; }
.rs-cue-t { font: 600 18px/1.3 var(--font-hand), 'Klee One', serif; } /* русское — рукописным шрифтом, японское — Klee One (иначе кириллица в Klee One разрежена) */
.rs-pic { width: 64px; height: 54px; flex: none; }
.rs-model .rs-pic { width: 54px; height: 46px; }

/* фраза со звуком */
.rs-say { display: inline-grid; gap: 1px; padding: 6px 12px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .25s var(--spring); }
.rs-say:hover { transform: translateY(-2px); }
.rs-say .jp { font: 20px/1.4 'Klee One', serif; }
.rs-say small { font: 15px var(--font-hand); color: var(--ink-soft); }
.rs-say .gf-p, .rs-gap .gf-p { display: inline; padding: 0 .2em; }

/* точки примеров */
.rs-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rs-dots > * { width: 14px; height: 14px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: #fff; cursor: pointer; }
.rs-dots > .ok { background: #8fd18a; } .rs-dots > .bad { background: #f3a493; }
.rs-dots > .on { outline: 3px solid var(--n1); outline-offset: 1px; }
.rs-m .rs-dots { margin: 0 0 0 auto; } .rs-m .rs-dots > * { cursor: default; }

/* задание */
.rs-item { display: grid; gap: 12px; justify-items: start; }
.rs-task { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rs-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 15px var(--font-display); }
.rs-ru { font: 16px var(--font-hand); color: var(--ink-soft); }
.rs-ru.big { margin: 0; font-size: 20px; color: var(--ink); }

/* сборка фразы: строка ответа и плитки */
.rs-build { display: grid; gap: 10px; width: 100%; }
.rs-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 58px; padding: 8px 10px; background: #fff; border: 2.5px dashed rgba(43, 37, 35, .45); border-radius: 12px; transition: background .2s, border-color .2s; }
.rs-line.ok { background: #e6f6df; border: 2.5px solid #2f7d4f; }
.rs-line.bad { background: #fde9e4; border-color: var(--shu); animation: rs-shake .35s; }
@keyframes rs-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.rs-ph { font: 16px var(--font-hand); color: var(--ink-soft); }
.rs-bank { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.rs-tile { display: inline-block; min-width: 40px; padding: 6px 12px; border: 2.5px solid var(--ink); border-radius: 10px; color: var(--ink); font: 600 20px/1.2 'Klee One', serif; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .2s var(--spring); }
.rs-tile:not(.gf-p) { background: #fff; } /* частица — своим цветом (.p-wa…), как на досках */
.rs-tile.gf-p { padding: 6px 12px; border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
.rs-tile:hover:not(:disabled) { transform: translateY(-2px); }
.rs-tile:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.rs-tile:disabled { cursor: default; }
.rs-line .rs-tile { box-shadow: 0 2px 0 var(--ink); }
.rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rs-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 17px var(--font-hand); }
.rs-note:empty { display: none; }

/* рэнсю C: варианты и диалог между героями */
.rs-sets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.rs-set { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 15px var(--font-hand); cursor: pointer; }
.rs-set .rs-pic { width: 40px; height: 34px; }
.rs-set[aria-pressed="true"] { background: var(--n1); box-shadow: 0 2px 0 var(--ink); }
.rs-set.ok::after { content: '✓'; color: #2f7d4f; font-weight: 800; }
.rs-dstage { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 10px; align-items: end; margin: 0 0 12px; }
.rs-who { position: relative; width: 180px; aspect-ratio: 10 / 9; margin: 0 -10px; }
.rs-who svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rs-who .say-ja, .rs-who .say-ru { display: none; }
.rs-dlines { display: grid; gap: 10px; }
.rs-dl.l { justify-self: start; background: #eef6fb; border-bottom-left-radius: 4px; }
.rs-dl.r { justify-self: end; background: #fff5e6; border-bottom-right-radius: 4px; }
.rs-dl.you { display: grid; gap: 8px; width: min(100%, 560px); padding: 10px 12px; border: 2.5px solid var(--ink); border-radius: 16px 16px 4px 16px; background: #fff5e6; box-shadow: 0 3px 0 var(--ink); }
.rs-you { margin: 0; font: 700 15px var(--font-ui); }
.rs-you small { font: 16px var(--font-hand); font-weight: 400; color: var(--ink-soft); }

/* мондай */
.rs-m .rs-head { align-items: center; }
.rs-start { display: grid; gap: 10px; justify-items: start; }
.rs-start p { margin: 0; }
.rs-score { font: 900 40px var(--font-display); }
.rs-mtask { display: grid; gap: 12px; justify-items: start; margin: 0 0 12px; }
.rs-q { margin: 0; font: 600 18px var(--font-ui); }
.rs-play { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--n1); color: var(--ink); font: 700 22px var(--font-display); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.rs-play span { font: 600 16px var(--font-ui); }
.rs-gap { margin: 0; font: 22px/1.5 'Klee One', serif; }
.rs-blank { display: inline-block; min-width: 2.2em; margin: 0 .2em; padding: 0 .3em; border-bottom: 3px solid var(--ink); text-align: center; color: var(--ink-soft); }
.rs-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-opt { padding: 8px 16px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 600 17px var(--font-ui); box-shadow: 0 3px 0 var(--ink); cursor: pointer; text-align: left; }
.rs-opts.jp-opts .rs-opt { font: 600 20px/1.3 'Klee One', serif; }
.rs-opt.ok { background: #e6f6df; border-color: #2f7d4f; }
.rs-opt.bad { background: #fde9e4; border-color: var(--shu); }

@media (max-width: 760px) {
  .rs-card { padding: 14px 12px 16px; }
  .rs-dstage { grid-template-columns: 1fr 1fr; }
  .rs-dstage .rs-dlines { grid-column: 1 / -1; grid-row: 2; }
  .rs-who { width: 110px; margin: 0 auto; }
  .rs-tile { font-size: 18px; padding: 5px 10px; }
  .rs-pic { width: 52px; height: 44px; }
}