/* Экраны «Формирование списка» и «Показ списка» (ТЗ 27.09.2026).
   Оформление — прототип Claude Design «Список имён — восковая дощечка» (27.09.2026),
   вариант «медальоны» + «стило», перенесён в игру: те же цвета, размеры, кривые и
   тайминги, классы с приставкой rs-, чтобы не пересечься со стилями игры.
   Все размеры — в --u / --fu от контейнера #roster-root (весь кадр игры): на
   телефоне стоймя (высокий экран, max-aspect-ratio 3/5) единица растёт от ширины,
   дощечка уходит под галерею. Показ — кадр 16:9 (на телефоне стоймя — весь экран). */

/* --fu объявлена длиной, чтобы стило читало её в пикселях (getComputedStyle) */
@property --fu { syntax: '<length>'; inherits: true; initial-value: 10px; }

#roster-root {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
  overflow: hidden;
  background: #0d0805;
  container: rs / size;
}
#roster-root.show { display: block; }
#roster-root, #roster-root * { box-sizing: border-box; }
#roster-root [hidden] { display: none !important; }

.rs-root {
  position: absolute;
  inset: 0;
  --u: min(1cqw, 1.8cqh);
  --fu: min(1cqw, 1.7778cqh);
  font-family: 'EB Garamond', Georgia, serif;
  color: #e6d3a3;
  animation: rsIn .45s ease backwards;
}
.rs-root.rs-out { opacity: 0; transition: opacity .4s ease-in; }
@keyframes rsIn { from { opacity: 0; } }
@keyframes rsFlicker { 0%, 100% { opacity: 1; } 44% { opacity: .92; } 52% { opacity: .99; } 61% { opacity: .9; } 73% { opacity: .97; } }

.rs-bg { position: absolute; inset: 0; background: #221404 center/cover no-repeat; }
.rs-lamp { position: absolute; inset: 0; pointer-events: none; animation: rsFlicker 5.5s infinite;
  background: radial-gradient(55% 50% at 62% 18%, rgba(255,190,110,.12), transparent 70%); transition: opacity 1.4s ease-out; }
.rs-vign { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(85% 92% at 50% 48%, transparent 48%, rgba(8,4,1,.38) 78%, rgba(4,2,0,.6) 100%); }
.rs-dim { position: absolute; inset: 0; pointer-events: none; background: #0a0704; opacity: 0; transition: opacity 1.4s ease-out; }
.rs-shade { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,13,10,.88) 0%, rgba(15,13,10,.74) 52%, rgba(15,13,10,.3) 76%, rgba(15,13,10,.4) 100%); }

/* ——— составление ——— */
.rs-layout { position: absolute; inset: 0; margin: 0 auto; max-width: calc(var(--u) * 150);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  column-gap: calc(var(--u) * 5); padding: calc(var(--u) * 3.2) calc(var(--u) * 4.5) 0; }
.rs-head { grid-column: 1; grid-row: 1; padding-bottom: calc(var(--u) * 1.4); transition: opacity .5s ease-in; }
.rs-title { margin: 0; font-family: Cinzel, serif; font-weight: 500; font-size: calc(var(--u) * 3); letter-spacing: .06em;
  color: #ecd9a8; text-wrap: balance; text-shadow: 0 .08em .2em rgba(0,0,0,.6); }
.rs-prompt { margin: calc(var(--u) * .5) 0 0; font-style: italic; font-size: calc(var(--u) * 1.75); color: #e6d3a3; text-wrap: pretty; }
.rs-gwrap { grid-column: 1; grid-row: 2; min-height: 0; transition: opacity .5s ease-in; }
.rs-gallery { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 8.4), 1fr));
  gap: calc(var(--u) * 1.5) calc(var(--u) * 1.7); align-content: start;
  padding: calc(var(--u) * 1.3) calc(var(--u) * .7) calc(var(--u) * 4);
  scrollbar-width: thin; scrollbar-color: #6b5230 transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--u) * 1.2), #000 calc(100% - var(--u) * 4), transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--u) * 1.2), #000 calc(100% - var(--u) * 4), transparent); }
.rs-empty { display: flex; align-items: center; justify-content: center; font-style: italic; font-size: calc(var(--u) * 1.75); color: #b9a47c; }

/* медальон: круглый портрет в двойном золотом канте, лицо кадрируется по спрайту */
.rs-card { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8);
  min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .3s, filter .3s; }
.rs-med { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(0,0,0,.55); transition: box-shadow .3s; }
.rs-pic { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #3d2f1f, #1a140d 76%); }
.rs-pic img { position: absolute; left: 50%; top: var(--y, 1%); height: var(--h, 300%); width: auto; max-width: none;
  transform: translateX(-50%); opacity: 0; transition: filter .3s, opacity .3s; user-select: none; -webkit-user-drag: none; }
.rs-pic img.rs-ok { opacity: 1; }
.rs-rim { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; transition: box-shadow .3s;
  box-shadow: inset 0 0 0 calc(var(--u) * .16) #e0b357, inset 0 0 0 calc(var(--u) * .36) rgba(20,17,13,.92),
    inset 0 0 0 calc(var(--u) * .48) #9c7a3e, inset 0 0 calc(var(--u) * 1.3) rgba(0,0,0,.6); }
.rs-letter { position: absolute; inset: 0; display: grid; place-items: center; font-family: Cinzel, serif;
  font-size: calc(var(--u) * 4.6); color: #e0b357; opacity: .34; }
/* восковая печать с номером строки */
.rs-seal { position: absolute; right: -4%; top: -4%; width: calc(var(--u) * 2.7); height: calc(var(--u) * 2.7); border-radius: 50%;
  display: grid; place-items: center; font-family: Neucha, cursive; font-size: calc(var(--u) * 1.55); color: #eacf9d;
  background: radial-gradient(120% 120% at 30% 25%, #3f2d1c, #1d1307);
  box-shadow: 0 0 0 calc(var(--u) * .14) #e0b357, 0 calc(var(--u) * .3) calc(var(--u) * .6) rgba(0,0,0,.6);
  transform: scale(0); transition: transform .24s cubic-bezier(.3,1.6,.5,1) .4s; }
.rs-cname { font-family: 'Cormorant SC', serif; font-weight: 500; font-size: calc(var(--u) * 1.75); letter-spacing: .04em;
  color: #e6d3a3; text-align: center; line-height: 1.1; max-width: 100%; overflow-wrap: break-word; transition: color .3s;
  text-shadow: 0 .06em .2em rgba(0,0,0,.8); }
.rs-card.rs-can:hover .rs-med, .rs-card.rs-hl .rs-med {
  box-shadow: 0 0 calc(var(--u) * 1.4) rgba(242,190,110,.22), 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(0,0,0,.55); }
.rs-card.rs-can:hover .rs-pic img, .rs-card.rs-hl .rs-pic img { filter: brightness(1.1); }
.rs-card:focus-visible .rs-med { outline: calc(var(--u) * .2) solid #f2ce82; outline-offset: calc(var(--u) * .45); }
.rs-card.rs-sel .rs-rim { box-shadow: inset 0 0 0 calc(var(--u) * .2) #f2ce82, inset 0 0 0 calc(var(--u) * .38) rgba(20,17,13,.9),
  inset 0 0 0 calc(var(--u) * .52) #e0b357, inset 0 0 calc(var(--u) * 1.1) rgba(0,0,0,.4); }
.rs-card.rs-sel .rs-med { box-shadow: 0 0 calc(var(--u) * 2.2) rgba(242,190,110,.34), 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(0,0,0,.55); }
.rs-card.rs-sel .rs-seal { transform: scale(1); }
.rs-card.rs-sel .rs-cname { color: #f2ce82; }
/* список полон: невписанные гаснут, но видны и листаются */
.rs-full .rs-card.rs-can:not(.rs-sel) { opacity: .42; filter: saturate(.45); }
/* безымянный: видно, но не выбрать — сепия и тень, а не замок */
.rs-card.rs-un { cursor: default; }
.rs-card.rs-un .rs-pic img { filter: brightness(.5) sepia(.55) contrast(.9) blur(.4px); }
.rs-card.rs-un .rs-pic::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 30%, transparent 30%, rgba(15,11,6,.55) 100%); }
.rs-card.rs-un .rs-rim { box-shadow: inset 0 0 0 calc(var(--u) * .12) rgba(156,122,62,.75), inset 0 0 calc(var(--u) * 1.6) rgba(0,0,0,.8); }
.rs-card.rs-un .rs-cname { font-family: 'EB Garamond', serif; font-style: italic; font-size: calc(var(--u) * 1.3); letter-spacing: 0;
  line-height: 1.15; color: #b9a47c; text-wrap: balance; }
/* «места нет»: медальон вздрагивает */
.rs-card.rs-no .rs-med { animation: rsNo .36s cubic-bezier(.36,.07,.19,.97); }
@keyframes rsNo { 20% { transform: translateX(calc(var(--u) * -.5)); } 40% { transform: translateX(calc(var(--u) * .45)); }
  60% { transform: translateX(calc(var(--u) * -.3)); } 80% { transform: translateX(calc(var(--u) * .15)); } }

/* дощечка */
.rs-tabwrap { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * 2); }
.rs-tablet { position: relative; width: calc(var(--u) * 36); padding: calc(var(--u) * 1.25); border-radius: calc(var(--u) * .75);
  background: repeating-linear-gradient(97deg, rgba(0,0,0,.18) 0 calc(var(--u) * .12), transparent calc(var(--u) * .12) calc(var(--u) * .68)),
    linear-gradient(104deg, #6d4b28, #49301a 38%, #5d3f22 68%, #3a2510);
  box-shadow: calc(var(--u) * .8) calc(var(--u) * 1.6) calc(var(--u) * 3) rgba(0,0,0,.65), calc(var(--u) * .3) calc(var(--u) * .55) calc(var(--u) * .8) rgba(0,0,0,.5),
    inset 0 calc(var(--u) * .07) calc(var(--u) * .14) rgba(255,215,150,.25); }
.rs-hole { position: absolute; left: calc(var(--u) * .38); width: calc(var(--u) * .48); height: calc(var(--u) * .48); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #201308, #0c0602); box-shadow: inset 0 .05em .1em rgba(0,0,0,.9); }
.rs-wax { position: relative; --lh: calc(var(--u) * 3.4); border-radius: calc(var(--u) * .35);
  padding: calc(var(--u) * 2) calc(var(--u) * 2.4) calc(var(--u) * 5.4);
  background: radial-gradient(40% 30% at 68% 62%, rgba(0,0,0,.22), transparent 70%), radial-gradient(35% 26% at 30% 80%, rgba(0,0,0,.16), transparent 70%),
    radial-gradient(120% 140% at 28% 16%, #3b2a1b 0%, #2b1e12 45%, #201507 100%);
  box-shadow: inset 0 0 calc(var(--u) * 2) rgba(0,0,0,.7), inset 0 calc(var(--u) * .24) calc(var(--u) * .6) rgba(0,0,0,.85),
    inset 0 calc(var(--u) * -.07) calc(var(--u) * .2) rgba(255,210,150,.06); }
.rs-wax::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(50% 40% at 25% 12%, rgba(255,210,140,.09), transparent 60%); }
.rs-lines { position: relative; height: calc(var(--rows) * var(--lh)); transition: opacity .3s; }
.rs-slot { position: absolute; left: var(--x); width: var(--w); top: calc(var(--r) * var(--lh)); height: var(--lh); pointer-events: none; }
.rs-slot .rs-num { position: absolute; left: 0; bottom: 24%; font-family: Neucha, cursive; font-size: calc(var(--u) * 1.3); color: #8d7350; opacity: .6; }
.rs-slot .rs-rule { position: absolute; left: calc(var(--u) * 1.7); right: calc(var(--u) * .6); bottom: 20%; height: calc(var(--u) * .08);
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.28) 80%, transparent); box-shadow: 0 calc(var(--u) * .06) 0 rgba(255,215,160,.05); }
/* имя на воске: процарапывается слева направо, при вычёркивании остальные поднимаются */
.rs-nm { all: unset; box-sizing: border-box; position: absolute; left: calc(var(--x) + var(--u) * 1.7 + var(--ind)); top: calc(var(--r) * var(--lh));
  height: var(--lh); max-width: calc(var(--w) - var(--u) * 2.4); display: flex; align-items: flex-end; padding: 0 calc(var(--u) * .4) calc(var(--lh) * .2);
  cursor: pointer; font-family: Neucha, cursive; font-size: calc(var(--u) * 2.05); line-height: 1.1; letter-spacing: .02em; color: #eacf9d;
  text-shadow: 0 .05em .08em rgba(0,0,0,.6), 0 -.02em .02em rgba(255,232,190,.18); transform: rotate(var(--rot));
  clip-path: inset(-30% 103% -30% -3%);
  transition: clip-path .8s cubic-bezier(.25,.6,.35,1), top .38s cubic-bezier(.3,.7,.3,1), left .38s cubic-bezier(.3,.7,.3,1), opacity .22s ease-in, color .2s; }
.rs-nm.rs-in { clip-path: inset(-30% -3% -30% -3%); }
.rs-nm .rs-t { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-nm .rs-t::after { content: ''; position: absolute; left: -4%; right: -4%; top: 52%; height: .08em;
  background: linear-gradient(90deg, rgba(233,207,158,.2), #dfc79b 12%, #dfc79b 88%, rgba(233,207,158,.2));
  transform-origin: left center; transform: rotate(-2.4deg) scaleX(0); transition: transform .26s cubic-bezier(.5,0,.2,1); }
.rs-nm.rs-striking .rs-t::after { transform: rotate(-2.4deg) scaleX(1); }
.rs-nm.rs-striking { color: #96794f; pointer-events: none; }
.rs-nm:hover, .rs-nm.rs-hl { color: #ffe0ac; }
.rs-nm:focus-visible { outline: calc(var(--u) * .14) dashed #f2ce82; outline-offset: calc(var(--u) * .1); border-radius: calc(var(--u) * .3); }
.rs-flash .rs-nm { animation: rsFl .5s ease-out; }
@keyframes rsFl { 35% { color: #fff0c8; text-shadow: 0 0 .5em rgba(255,200,120,.55); } }
.rs-acts { position: absolute; left: calc(var(--u) * 2.4); right: calc(var(--u) * 1.8); bottom: calc(var(--u) * 1);
  display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 1); transition: opacity .3s; }
.rs-count { font-family: Neucha, cursive; font-size: calc(var(--u) * 1.55); color: #8d7350; padding-left: calc(var(--u) * .2); }
.rs-act { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; min-height: calc(var(--u) * 3.4);
  padding: 0 calc(var(--u) * .6); font-family: Neucha, cursive; font-size: calc(var(--u) * 2); color: #d8b988;
  text-decoration: underline; text-underline-offset: .2em; text-shadow: 0 .05em .07em rgba(0,0,0,.6); transition: color .3s, opacity .3s; }
.rs-act:hover { color: #ffe0ac; }
.rs-act:focus-visible { outline: calc(var(--u) * .14) dashed #f2ce82; border-radius: calc(var(--u) * .3); }
.rs-act[aria-disabled="true"] { opacity: .38; cursor: default; }
.rs-act[aria-disabled="true"]:hover { color: #d8b988; }
.rs-act.rs-soft { color: #a88c60; text-decoration-thickness: .04em; }
/* «Никого»: вопрос прямо на воске */
.rs-confirm { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 1.8); padding: calc(var(--u) * 2); opacity: 0; pointer-events: none; transition: opacity .3s; }
.rs-confirm .rs-q { font-family: Neucha, cursive; font-size: calc(var(--u) * 2.5); color: #eacf9d; text-align: center; text-shadow: 0 .05em .08em rgba(0,0,0,.6); }
.rs-confirm .rs-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .6) calc(var(--u) * 2.6); }
.rs-confirming .rs-confirm { opacity: 1; pointer-events: auto; }
.rs-confirming .rs-lines, .rs-confirming .rs-acts { opacity: 0; pointer-events: none; }
.rs-toast { min-height: calc(var(--u) * 3.4); max-width: calc(var(--u) * 36); text-align: center; font-style: italic; font-size: calc(var(--u) * 1.55);
  line-height: 1.25; color: #ecd9a8; text-shadow: 0 0 .5em #0f0d0a, 0 0 1em #0f0d0a, 0 0 .2em #0f0d0a; opacity: 0;
  transform: translateY(calc(var(--u) * -.4)); transition: opacity .2s ease-out, transform .2s ease-out; text-wrap: balance; }
.rs-toast.rs-on { opacity: 1; transform: none; }
.rs-toast.rs-off { transition: opacity .4s ease-in, transform .4s ease-in; }
/* «Записать»: вторая створка диптиха закрывает воск, стук, комната темнеет */
.rs-leaf { position: absolute; inset: 0; border-radius: calc(var(--u) * .75); visibility: hidden; transform-origin: left center;
  transform: perspective(calc(var(--u) * 90)) rotateY(-178deg); backface-visibility: hidden;
  background: repeating-linear-gradient(83deg, rgba(0,0,0,.17) 0 calc(var(--u) * .12), transparent calc(var(--u) * .12) calc(var(--u) * .7)),
    linear-gradient(76deg, #6a4826, #4b321b 40%, #5f4023 70%, #3d2711);
  box-shadow: inset 0 calc(var(--u) * .07) calc(var(--u) * .14) rgba(255,215,150,.25); transition: transform .9s cubic-bezier(.6,.02,.3,1); }
.rs-leaf::before { content: ''; position: absolute; inset: calc(var(--u) * 1.6); border-radius: calc(var(--u) * .4);
  box-shadow: inset calc(var(--u) * .15) calc(var(--u) * .25) calc(var(--u) * .5) rgba(0,0,0,.45), inset calc(var(--u) * -.08) calc(var(--u) * -.08) calc(var(--u) * .15) rgba(255,215,150,.12); }
.rs-leaf .rs-cord { position: absolute; left: calc(var(--u) * -.35); width: calc(var(--u) * 1.3); height: calc(var(--u) * .34); border-radius: calc(var(--u) * .2);
  background: linear-gradient(180deg, #c9ab78, #8a6c42); box-shadow: 0 calc(var(--u) * .1) calc(var(--u) * .2) rgba(0,0,0,.6); }
.rs-closing .rs-leaf { visibility: visible; transform: perspective(calc(var(--u) * 90)) rotateY(0); }
.rs-bump { animation: rsBump .16s ease-out; }
@keyframes rsBump { 50% { transform: translateY(calc(var(--u) * .18)); } }
.rs-done .rs-gwrap, .rs-done .rs-head { opacity: 0; pointer-events: none; }
.rs-done .rs-dim { opacity: .55; transition-delay: .9s; }
.rs-done .rs-lamp { opacity: .35; transition-delay: .9s; }
.rs-done .rs-toast { opacity: 0; }

/* ——— показ списка ——— */
.rs-frame { position: absolute; left: 50%; top: 50%; width: min(100cqw, 177.78cqh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%);
  overflow: hidden; font-family: Neucha, cursive; }
.rs-stab { position: absolute; left: 50%; top: 53%; width: calc(var(--fu) * 53); padding: calc(var(--fu) * 1.8); border-radius: calc(var(--fu) * 1.1);
  transform: translate(-50%, -50%) perspective(calc(var(--fu) * 140)) rotateX(10deg) rotate(-1.6deg);
  background: repeating-linear-gradient(97deg, rgba(0,0,0,.18) 0 calc(var(--fu) * .18), transparent calc(var(--fu) * .18) calc(var(--fu) * 1)),
    linear-gradient(104deg, #6d4b28, #49301a 38%, #5d3f22 68%, #3a2510);
  box-shadow: calc(var(--fu) * 1.2) calc(var(--fu) * 2.4) calc(var(--fu) * 4.5) rgba(0,0,0,.65), calc(var(--fu) * .4) calc(var(--fu) * .8) calc(var(--fu) * 1.2) rgba(0,0,0,.5),
    inset 0 calc(var(--fu) * .1) calc(var(--fu) * .2) rgba(255,215,150,.25); }
.rs-stab.rs-hascap { padding-top: calc(var(--fu) * 3.7); }
.rs-stab .rs-hole { left: calc(var(--fu) * .55); width: calc(var(--fu) * .7); height: calc(var(--fu) * .7); }
/* подпись вырезана на раме */
.rs-capt { position: absolute; top: calc(var(--fu) * 1); left: calc(var(--fu) * 3); right: calc(var(--fu) * 3); text-align: center;
  font-family: 'Cormorant SC', serif; font-weight: 600; font-size: calc(var(--fu) * 1.65); letter-spacing: .14em; color: #e8cf9a;
  text-shadow: 0 -.05em 0 rgba(0,0,0,.75), 0 .06em 0 rgba(255,220,160,.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-swax { position: relative; min-height: calc(var(--fu) * 33); border-radius: calc(var(--fu) * .5);
  padding: calc(var(--fu) * 2.8) calc(var(--fu) * 3.4) calc(var(--fu) * 4.8); overflow: hidden;
  background: radial-gradient(40% 30% at 68% 62%, rgba(0,0,0,.22), transparent 70%), radial-gradient(35% 26% at 30% 80%, rgba(0,0,0,.16), transparent 70%),
    radial-gradient(120% 140% at 28% 16%, #3b2a1b 0%, #2b1e12 45%, #201507 100%); }
.rs-wshade { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 calc(var(--fu) * 3) rgba(0,0,0,.7), inset 0 calc(var(--fu) * .35) calc(var(--fu) * .9) rgba(0,0,0,.85), inset 0 calc(var(--fu) * -.1) calc(var(--fu) * .3) rgba(255,210,150,.06);
  background: radial-gradient(50% 40% at 25% 12%, rgba(255,210,140,.09), transparent 60%); }
.rs-sl { display: flex; align-items: baseline; gap: calc(var(--fu) * 1.1); margin: calc(var(--fu) * .8) 0 calc(var(--fu) * .8) var(--ind);
  transform: rotate(var(--rot)); font-size: calc(var(--fu) * 2.25); line-height: 1.3; letter-spacing: .02em; color: #e2c795; opacity: .9;
  text-shadow: 0 .05em .08em rgba(0,0,0,.6), 0 -.02em .02em rgba(255,232,190,.14); }
.rs-sl .rs-n { font-size: .62em; color: #8d7350; min-width: 1.2em; }
.rs-r10 .rs-sl { font-size: calc(var(--fu) * 1.95); margin: calc(var(--fu) * .36) 0 calc(var(--fu) * .36) var(--ind); }
.rs-bands { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rs-band { position: absolute; left: 0; right: 0; }
.rs-cover { position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255,215,160,.02) 0 calc(var(--fu) * .14), transparent calc(var(--fu) * .14) calc(var(--fu) * .55)),
    radial-gradient(120% 140% at 28% 16%, #3b2a1b 0%, #2b1e12 45%, #201507 100%); }
.rs-ridge { position: absolute; width: calc(var(--fu) * 2.4); margin-left: calc(var(--fu) * -1.2); opacity: 0;
  background: radial-gradient(closest-side, rgba(255,215,160,.2), rgba(255,215,160,.06) 60%, transparent); }
.rs-corner { all: unset; position: absolute; right: 4.5%; bottom: 4.5%; z-index: 4; cursor: pointer; font-family: Neucha, cursive;
  font-size: calc(var(--fu) * 1.9); color: #d8b988; text-decoration: underline; text-underline-offset: .2em; text-shadow: 0 .05em .07em rgba(0,0,0,.6);
  transition: opacity .9s, color .3s; padding: calc(var(--fu) * .3) calc(var(--fu) * .5); }
.rs-corner:hover { color: #ffe0ac; }
.rs-corner:focus-visible { outline: calc(var(--fu) * .14) dashed #f2ce82; border-radius: .3em; }
.rs-corner.rs-hide { opacity: 0; pointer-events: none; transition: opacity .3s; }
/* стило: проходы плоским концом по воску */
.rs-stylus { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; }
.rs-stylus .rs-rod { position: absolute; left: calc(var(--fu) * -.32); bottom: 0; width: calc(var(--fu) * .64); height: calc(var(--fu) * 30);
  transform-origin: 50% 100%; transform: rotate(26deg); border-radius: calc(var(--fu) * .32) calc(var(--fu) * .32) calc(var(--fu) * .1) calc(var(--fu) * .1);
  background: linear-gradient(90deg, #3e2a12, #a37a40 40%, #dcb474 52%, #5a3d1a); box-shadow: calc(var(--fu) * 1.2) calc(var(--fu) * 1.6) calc(var(--fu) * 1.6) rgba(0,0,0,.45); }
.rs-stylus .rs-blade { position: absolute; left: calc(var(--fu) * -.6); width: calc(var(--fu) * 1.2); border-radius: calc(var(--fu) * .35);
  background: linear-gradient(90deg, #4a3216, #b68a4c 42%, #e6c07e 55%, #6b4a22); box-shadow: calc(var(--fu) * .4) calc(var(--fu) * .7) calc(var(--fu) * 1) rgba(0,0,0,.55); }

/* ——— телефон стоймя: единица от ширины, дощечка под галереей, три медальона в ряд ———
   У игры нет тега viewport: телефон рисует страницу шириной 980 и уменьшает её, поэтому
   телефон узнаём по пропорции экрана, а не по ширине. */
@container rs (max-aspect-ratio: 3/5) {
  .rs-root { --u: 2.2cqw; --fu: 1.74cqw; }
  .rs-shade { background: linear-gradient(180deg, rgba(15,13,10,.9), rgba(15,13,10,.76) 58%, rgba(15,13,10,.45)); }
  .rs-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    padding: calc(var(--u) * 5.5) calc(var(--u) * 3) 0; column-gap: 0; }
  .rs-title { font-size: calc(var(--u) * 3.4); }
  .rs-prompt { font-size: calc(var(--u) * 2.05); }
  .rs-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2) calc(var(--u) * 2.6);
    padding: calc(var(--u) * 1.5) calc(var(--u) * 1.2) calc(var(--u) * 3); }
  .rs-cname { font-size: calc(var(--u) * 1.8); }
  .rs-card.rs-un .rs-cname { font-size: calc(var(--u) * 1.7); }
  .rs-seal { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); font-size: calc(var(--u) * 2); }
  .rs-tabwrap { grid-column: 1; grid-row: 3; padding: calc(var(--u) * 1) 0 calc(var(--u) * 2); gap: calc(var(--u) * .4); }
  .rs-tablet { width: 100%; }
  .rs-wax { --lh: calc(var(--u) * 5.4); padding-bottom: calc(var(--u) * 7); }
  .rs-nm { font-size: calc(var(--u) * 2.6); }
  .rs-slot .rs-num { font-size: calc(var(--u) * 1.6); }
  .rs-count { font-size: calc(var(--u) * 2); }
  .rs-act { font-size: calc(var(--u) * 2.7); min-height: calc(var(--u) * 5.4); }
  .rs-confirm .rs-q { font-size: calc(var(--u) * 3); }
  .rs-toast { font-size: calc(var(--u) * 1.9); max-width: none; }
  .rs-frame { width: 100cqw; height: 100cqh; aspect-ratio: auto; }
  .rs-stab { top: 50%; }
}