:root {
  --paper: #f1ede5;
  --ink: #161616;
  --muted: #8b877f;
  --line: rgba(22, 22, 22, .14);
  --red: #e0210f;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Golos Text', system-ui, sans-serif;
  --gap: 24px;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; font-family: var(--sans); background: var(--paper); color: var(--ink); }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
h1, h2, p { margin: 0; }

/* Единая мелкая моношкала для всех служебных подписей. */
.masthead-meta, .eyebrow, .section-heading p, .site-footer, .letter-meta, .workspace-label, .sketch-panel, .wall-caption, .ya-panel, .ya-count, .ya-rules {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-shell { width: min(1280px, 100%); margin: 0 auto; padding: var(--gap) var(--gap) 40px; }

.masthead { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.wordmark { font-size: 14px; font-weight: 500; letter-spacing: -.02em; text-decoration: none; }
.wordmark span { color: var(--muted); font-weight: 400; }
.masthead-meta { display: flex; gap: 16px; color: var(--muted); }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--gap); padding: clamp(56px, 10vw, 120px) 0 clamp(56px, 10vw, 120px); }
.intro-copy { max-width: 640px; }

/* Холст Я: квадрат объявлен рамкой — по нему видно, что клетку можно
   поставить и мимо буквы. Появляется только когда состояние доехало. */
.wall { width: clamp(150px, 24vw, 300px); }
.wall canvas { display: block; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--line); }
.wall-caption { margin-top: 10px; color: var(--muted); text-align: right; }
.eyebrow { margin-bottom: 20px; color: var(--muted); }
h1 { margin-bottom: 24px; font-size: clamp(44px, 7vw, 92px); line-height: .95; letter-spacing: -.02em; font-weight: 500; }
.intro-text { max-width: 400px; color: var(--muted); font-size: 14px; line-height: 1.6; }

.alphabet-section { position: relative; border-top: 1px solid var(--line); }
.alphabet-section::before { content: ''; position: absolute; top: -1px; left: 0; width: var(--alphabet-progress, 0%); height: 1px; background: var(--red); pointer-events: none; transition: width .5s ease; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 20px; }
.section-heading h2 { font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
.section-heading p { color: var(--muted); }

.letter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.letter-card { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; transition: background .2s, color .2s; }
.letter-glyph { font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.05em; font-weight: 400; }
.letter-meta { display: flex; justify-content: space-between; align-items: baseline; }
.letter-state { opacity: .65; }

/* Готовая буква отличается только инверсией — единственный акцент во всей палитре. */
.letter-card.ready { color: var(--ink); }
.letter-card.ready .letter-glyph { font-weight: 500; }
.letter-card.ready:hover, .letter-card.ready:focus-visible { background-color: var(--ink); color: var(--paper); outline: none; }
/* Фон не лезет под обводку: иначе чернила просвечивают сквозь свои правую и нижнюю
   линии, а верхняя и левая — соседские — остаются светлыми, и клетка обведена уголком. */
.letter-card { background-clip: padding-box; }

/* Живая сцена ждёт наведения: тридцати двух сцен разом не бывает. Кадр рисуется
   втрое крупнее и сжимается, чтобы композиция была как в окне буквы, а не
   пересобиралась под клетку. Кадр виден, только пока сцена идёт: до загрузки
   и после клика на ховере остаётся буква, а не пустой чёрный квадрат. */
.letter-live { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .18s; pointer-events: none; }
.letter-live iframe { display: block; width: 300%; height: 300%; border: 0; transform: scale(calc(1 / 3)); transform-origin: 0 0; }
.letter-card.playing .letter-live { opacity: 1; }

.site-footer { display: flex; justify-content: space-between; padding-top: 20px; color: var(--muted); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

.letter-dialog { width: min(720px, calc(100vw - 2 * var(--gap)), calc(100vh - 2 * var(--gap))); aspect-ratio: 1 / 1; max-width: none; max-height: none; padding: 0; border: 0; background: var(--ink); color: var(--paper); overflow: hidden; }
.letter-dialog::backdrop { background: rgba(22, 22, 22, .6); }
.letter-workspace { position: relative; width: 100%; height: 100%; overflow: hidden; }
#letter-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.workspace-label { position: absolute; top: 14px; left: 14px; color: rgba(241, 237, 229, .55); pointer-events: none; }

/* Буква может принести свою бумагу — подписи над ней становятся чернильными. */
.letter-workspace[data-ground="paper"] { background: var(--paper); }
.letter-workspace[data-ground="paper"] .workspace-label { color: rgba(22, 22, 22, .5); }
.letter-workspace[data-ground="paper"] .workspace-hint { color: rgba(22, 22, 22, .38); }
.letter-workspace[data-ground="paper"] .dialog-close { color: rgba(22, 22, 22, .5); }
.letter-workspace[data-ground="paper"] .dialog-close:hover { color: var(--ink); }
.letter-workspace[data-ground="paper"] .sketch-toggle { color: rgba(22, 22, 22, .38); }
.letter-workspace[data-ground="paper"] .sketch-toggle:hover,
.letter-workspace[data-ground="paper"] .sketch-toggle[aria-expanded="true"] { color: var(--ink); }
.letter-workspace[data-ground="paper"] .sketch-panel { background: rgba(241, 237, 229, .86); color: rgba(22, 22, 22, .6); }
.letter-workspace[data-ground="paper"] .sketch-panel p { color: rgba(22, 22, 22, .38); }
/* Вендорные псевдоэлементы нельзя объединять в один селектор: правило умирает целиком. */
.letter-workspace[data-ground="paper"] .sketch-panel input::-webkit-slider-runnable-track { background: rgba(22, 22, 22, .28); }
.letter-workspace[data-ground="paper"] .sketch-panel input::-moz-range-track { background: rgba(22, 22, 22, .28); }
.letter-workspace[data-ground="paper"] .sketch-panel input::-webkit-slider-thumb { background: var(--ink); }
.letter-workspace[data-ground="paper"] .sketch-panel input::-moz-range-thumb { background: var(--ink); }
/* Подсказка прижата к правому нижнему углу и не заезжает на «параметры»
   слева: длинная строка переносится, а не тянется через весь кадр. */
.workspace-hint { position: absolute; right: 14px; bottom: 14px; max-width: calc(100% - 200px); font-family: var(--mono); font-size: 10px; line-height: 1.5; letter-spacing: .03em; text-align: right; color: rgba(241, 237, 229, .35); pointer-events: none; }
.workspace-info { display: none; }
.dialog-close { position: absolute; top: 4px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; color: rgba(241, 237, 229, .55); font-size: 20px; line-height: 1; }
.dialog-close:hover { color: var(--paper); }

/* Панель параметров скрыта по умолчанию: кадр остаётся картинкой, пока её не позовут. */
.sketch-toggle { position: absolute; left: 14px; bottom: 14px; border: 0; padding: 0; background: none; color: rgba(241, 237, 229, .35); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sketch-toggle:hover, .sketch-toggle[aria-expanded="true"] { color: rgba(241, 237, 229, .8); }
/* Ширина плашки задана, а не набрана содержимым: иначе длинная подпись
   растягивает её, и панель дёргается от каждой смены текста. Текст вместо
   этого переносится. */
.sketch-panel { position: absolute; left: 14px; bottom: 34px; display: grid; gap: 8px; width: max-content; max-width: 196px; padding: 12px 14px; background: rgba(22, 22, 22, .8); backdrop-filter: blur(2px); color: rgba(241, 237, 229, .5); text-transform: none; letter-spacing: .02em; }
.sketch-panel[hidden] { display: none; }
.sketch-panel label { display: grid; gap: 3px; }
.sketch-panel p { color: rgba(241, 237, 229, .3); }
/* Подпись под режимом держит две строки всегда: короткая и длинная не должны
   двигать всё, что под ними. */
.sketch-modes + p { min-height: 2.9em; }
/* Режим партии возглавляет панель: игра или песочница, и сразу видно, идёт ли
   результат в общий счёт. Активное состояние — инверсия, как у выбранной
   механики на полигоне; краска тут не годится, она занята событиями. */
.sketch-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.sketch-mode { border: 1px solid rgba(241, 237, 229, .25); padding: 4px 8px; background: none; color: rgba(241, 237, 229, .55); font: inherit; text-transform: uppercase; letter-spacing: .08em; }
.sketch-mode:hover { border-color: rgba(241, 237, 229, .5); color: rgba(241, 237, 229, .8); }
.sketch-mode[aria-pressed="true"] { border-color: rgba(241, 237, 229, .9); background: rgba(241, 237, 229, .9); color: #161616; }
.letter-workspace[data-ground="paper"] .sketch-mode { border-color: rgba(22, 22, 22, .25); color: rgba(22, 22, 22, .55); }
.letter-workspace[data-ground="paper"] .sketch-mode[aria-pressed="true"] { border-color: rgba(22, 22, 22, .9); background: rgba(22, 22, 22, .9); color: #f1ede5; }
.sketch-switch { justify-self: start; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
.sketch-switch[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.sketch-switches { display: flex; gap: 12px; }
.sketch-panel :disabled { opacity: .35; cursor: default; }
.sketch-action { justify-self: start; margin-top: 2px; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-transform: uppercase; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; }
.sketch-panel input { appearance: none; width: 150px; height: 12px; background: none; cursor: pointer; }
.sketch-panel input::-webkit-slider-runnable-track { height: 1px; background: rgba(241, 237, 229, .25); }
.sketch-panel input::-webkit-slider-thumb { appearance: none; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: rgba(241, 237, 229, .8); }
.sketch-panel input::-moz-range-track { height: 1px; background: rgba(241, 237, 229, .25); }
.sketch-panel input::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: rgba(241, 237, 229, .8); }

/* Сцена буквы Я: холст слева, всё остальное — узкой колонкой справа.
   Служебный слой берёт общую моношкалу, цвета — чернила по бумаге. */
.ya-panel { position: absolute; top: 14%; right: 6%; width: 28%; color: rgba(22, 22, 22, .55); }
.ya-title { margin: 0 0 6px; color: rgba(22, 22, 22, .38); }
.ya-panel p { margin: 0; }
.ya-leaders { margin: 0 0 22px; padding: 0; list-style: none; }
/* Строка таблицы — единая строка, а не три подчёркнутых куска. Наведение
   берёт её целиком подложкой: так видно, что кликается строка. */
.ya-leaders li { display: grid; color: var(--ink); }
.ya-leaders li > button { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; width: 100%; margin: 0 -6px; border: 0; padding: 3px 6px; background: none; color: inherit; font: inherit; text-align: left; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.ya-leaders li > button:hover, .ya-leaders li > button:focus-visible { background: rgba(22, 22, 22, .06); outline: none; }
.ya-leaders b { font-weight: 400; color: rgba(22, 22, 22, .38); }
.ya-row.is-picked > button { background: rgba(224, 33, 15, .1); }
.ya-row.is-picked b { color: var(--red); }
/* Заголовок таблицы он же возврат: цвет и размер прежние, кликом становится
   только когда есть куда вернуться. */
.ya-title button { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-decoration: none; }
.ya-title button:hover { color: var(--ink); }
.ya-leaders b { font-weight: 400; color: rgba(22, 22, 22, .38); }
.ya-leaders i { font-style: normal; }
.ya-empty { color: rgba(22, 22, 22, .38); }
.ya-wallet { margin-bottom: 6px !important; color: var(--ink); font-size: 15px; letter-spacing: .04em; }
/* Суточный лимит стоит под кошельком: две цифры об одном — сколько есть и
   сколько сегодня отдадут. Исчерпанный день приглушается, а не краснеет:
   это не ошибка, а завтрашняя клетка. */
.ya-daily { margin: 0 0 22px !important; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(22, 22, 22, .45); }
.ya-daily[data-spent="true"] { color: rgba(22, 22, 22, .3); }
.ya-place { margin-bottom: 22px; }
.ya-place p { margin-bottom: 6px !important; }
.ya-panel button { border: 0; padding: 0; background: none; color: var(--ink); font: inherit; text-transform: uppercase; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; }
.ya-name { display: flex; gap: 8px; align-items: baseline; }
/* display у flex-контейнера сильнее атрибута hidden — гасим явно. */
.ya-name[hidden], .ya-place[hidden] { display: none; }
.ya-name input { width: 72px; border: 0; border-bottom: 1px solid rgba(22, 22, 22, .3); padding: 2px 0; background: none; color: var(--ink); font: inherit; text-transform: uppercase; letter-spacing: .08em; }
.ya-name input:focus-visible { outline: none; border-color: var(--ink); }
.ya-name input[aria-invalid="true"] { border-color: var(--red); }
/* Подчёркнуто только действие: имя — сведение, «(сменить)» — кнопка. */
.ya-me { margin-bottom: 5px !important; color: rgba(22, 22, 22, .55); }
.ya-me button { border: 0; padding: 0; background: none; color: rgba(22, 22, 22, .38); font: inherit; text-transform: uppercase; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; }
.ya-me button:hover { color: var(--ink); }
.ya-me[hidden] { display: none; }

/* Награда за рекорд показывается в самой букве: связь игры с холстом должна
   читаться там, где её заработали. */
/* Карточка награды: событие, ради которого игра и затевалась. Не перекрывает
   сцену целиком — под ней всё продолжается, — но требует ответа кнопкой. */
.wall-prize { position: absolute; left: 50%; top: 50%; display: grid; gap: 6px; padding: 18px 20px; background: rgba(22, 22, 22, .88); color: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-align: center; transform: translate(-50%, -50%); animation: wall-prize-in .3s ease; }
.letter-workspace[data-ground="paper"] .wall-prize { background: rgba(22, 22, 22, .9); }
.wall-prize-title { margin: 0; color: var(--red); }
.wall-prize-note { margin: 0; color: rgba(241, 237, 229, .7); }
.wall-prize-actions { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
.wall-prize button { border: 0; padding: 0; background: none; color: var(--paper); font: inherit; text-transform: uppercase; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; }
.wall-prize button[data-later] { color: rgba(241, 237, 229, .45); }

@keyframes wall-prize-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); }
}

/* Запас клеток: в шапке сайта и в углу любой открытой буквы. В игровой
   буква даёт клетки, и строка идёт чернилами; в остальных она приглушена,
   чтобы не обещать заработка там, где его пока нет. */
.wallet-badge { border: 0; padding: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(22, 22, 22, .25); }
.wallet-badge:hover { text-decoration-color: currentColor; }
/* Верхняя строка, левее крестика: низ кадра во всех буквах занят подсказками
   и панелью, а сверху пусто во всех. */
.wall-credit { position: absolute; right: 52px; top: 14px; border: 0; padding: 0; background: none; text-align: right; margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(241, 237, 229, .3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
.wall-credit:hover { text-decoration-color: currentColor; }
.wall-credit[data-game="true"] { color: rgba(241, 237, 229, .62); }
.letter-workspace[data-ground="paper"] .wall-credit { color: rgba(22, 22, 22, .3); }
.letter-workspace[data-ground="paper"] .wall-credit[data-game="true"] { color: rgba(22, 22, 22, .62); }

.ya-count { position: absolute; top: 73%; left: 6%; margin: 0; color: rgba(22, 22, 22, .55); }
/* Включатель контура: подчёркнуто действие, а не строка. Нажат — идёт
   чернилами, как всё включённое в проекте. */
.ya-count button { border: 0; padding: 0; background: none; color: rgba(22, 22, 22, .38); font: inherit; text-transform: uppercase; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; }
.ya-count button:hover { color: rgba(22, 22, 22, .7); }
.ya-count button[aria-pressed="true"] { color: var(--ink); }
.ya-count button[hidden] { display: none; }
.ya-rules { position: absolute; left: 6%; bottom: 7%; width: 56%; color: rgba(22, 22, 22, .38); }
.ya-rules summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ya-rules p { margin: 10px 0 0; line-height: 1.5; letter-spacing: .02em; text-transform: none; }

/* Телефон: окно Я перестаёт быть квадратом. Квадрат — компромисс ради
   десктопа, а на вытянутом экране он загоняет кошелёк, лимит и кнопку
   постановки за нижний край: играть можно, а поставить клетку нечем.
   Холст остаётся квадратом сверху, панель ложится под ним в потоке. */
@media (max-width: 560px) {
  /* Высокая панель С с переключателем режима и шестью параметрами должна
     целиком помещаться в квадрат сцены, иначе верх обрезает overflow окна. */
  .sketch-panel { gap: 4px; }
  /* У Т девять параметров. Панель остаётся внутри кадра, а её собственное
     содержимое прокручивается, не двигая сцену и dialog. */
  .sketch-panel-t { max-height: calc(100% - 40px); overflow-y: auto; overscroll-behavior: contain; }
  /* `bottom: 0` вместе с `height: auto` растянул бы окно на весь экран:
     окно фиксированное, и заданы оба края. Отпускаем нижний — тогда высота
     считается по содержимому, а окно держится по центру. */
  .letter-dialog:has(.ya-panel) { top: 50%; bottom: auto; transform: translateY(-50%); width: calc(100vw - 2 * var(--gap)); height: auto; max-height: calc(100dvh - 2 * var(--gap)); aspect-ratio: auto; }
  /* Боковых полей у окна нет: холст забирает всю ширину, а поля живут
     у текста. Холст — главное, ради чего сюда пришли. */
  .letter-workspace:has(.ya-panel) { display: flex; flex-direction: column; gap: 0; height: auto; padding: 44px 0 20px; overflow-y: auto; }
  .letter-workspace:has(.ya-panel) #letter-canvas { flex: none; order: 1; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  /* Счёт клеток — служебная строка холста, и стоять она должна вплотную
     к нему, а не отдельным блоком. */
  .letter-workspace:has(.ya-panel) .ya-count { position: static; order: 2; margin: 4px 5% 18px; }
  .letter-workspace:has(.ya-panel) .ya-panel { position: static; order: 3; width: auto; padding: 0 5%; }
  .letter-workspace:has(.ya-panel) .ya-rules { position: static; order: 4; display: block; width: auto; margin: 18px 5% 0; }
  .ya-panel { top: 72%; right: 6%; bottom: auto; left: 6%; width: auto; }
  /* Лидеры остаются столбцом: строкой они читаются как одна длинная фраза,
     а это таблица — буква, имя, результат. */
  .ya-leaders { margin-bottom: 18px; }
  .ya-leaders li > button { grid-template-columns: 14px 1fr auto; }
  .ya-wallet { margin-bottom: 4px !important; font-size: 13px; }
  .ya-daily { margin-bottom: 14px !important; }
  .ya-place { margin-bottom: 10px; }
}

@media (max-width: 850px) {
  :root { --gap: 16px; }
  .intro { grid-template-columns: 1fr; }
  .wall { width: min(70%, 260px); }
  .wall-caption { text-align: left; }
  .letter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .masthead-meta span:last-child { display: none; }
}

@media (max-width: 510px) {
  .letter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .letter-card { padding: 10px; }
  .letter-glyph { font-size: 36px; }
  .letter-meta { font-size: 8px; }
  .workspace-info { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: rgba(22, 22, 22, .72); color: rgba(241, 237, 229, .7); font-family: var(--mono); font-size: 11px; line-height: 1; }
  .workspace-info[aria-expanded="true"] { color: var(--paper); }
  .letter-workspace[data-ground="paper"] .workspace-info { background: rgba(241, 237, 229, .92); color: rgba(22, 22, 22, .5); }
  .letter-workspace[data-ground="paper"] .workspace-info[aria-expanded="true"] { color: var(--ink); }
  .sketch-panel { bottom: 26px; }
  .workspace-hint { display: none; right: auto !important; bottom: 50px; left: 14px !important; width: 178px; max-width: calc(100% - 28px); padding: 12px 14px; background: rgba(22, 22, 22, .8); backdrop-filter: blur(2px); color: rgba(241, 237, 229, .5); line-height: 1.4; letter-spacing: .02em; text-align: left; text-transform: none; transform: none !important; }
  .letter-workspace[data-ground="paper"] .workspace-hint { background: rgba(241, 237, 229, .86); color: rgba(22, 22, 22, .6); }
  .workspace-hint[data-mobile-open="true"] { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


.sh-controls { position: absolute; inset: 0; pointer-events: none; font: 12px var(--mono); color: rgba(241, 237, 229, .65); }
.sh-status { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-controls button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; border: 1px solid rgba(241, 237, 229, .25); background: var(--ink); color: inherit; font: inherit; }
.sh-controls button:hover, .sh-controls button:focus-visible { color: var(--paper); border-color: var(--paper); }
.sh-message, .sh-result { position: absolute; top: 88px; left: 14px; right: 14px; text-align: center; font-size: 11px; }
.sh-jet { position: absolute; transform: translate(-50%, -50%); width: 48px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sh-controls .sh-jet[aria-pressed="true"] { color: var(--ink); background: var(--paper); border-color: var(--paper); }

.sh-panel { z-index: 3; bottom: 40px; max-height: calc(100% - 84px); overflow-y: auto; }
.sh-status { font-size: 10px; letter-spacing: .08em; }
.sh-timer:empty { display: none; }
.sh-hint { white-space: pre-line; }
.letter-workspace:has(.sh-controls) .wall-credit { max-width: calc(50% - 106px); }

.shch-controls { position: absolute; inset: 0; pointer-events: none; color: rgba(22, 22, 22, .45); font: 10px var(--mono); letter-spacing: .08em; }
.shch-status { position: absolute; top: 14px; left: 90px; right: 90px; display: flex; justify-content: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.letter-workspace:not([data-ground="paper"]) .shch-controls { color: rgba(241, 237, 229, .45); }
.shch-status .is-win { color: var(--red); }

@media (max-width: 510px) {
  .shch-status { top: 34px; left: 14px; right: 14px; }
}

.hard-status { position: absolute; top: 14px; left: 90px; right: 90px; text-align: center; white-space: nowrap; pointer-events: none; color: rgba(241, 237, 229, .45); font: 10px var(--mono); letter-spacing: .08em; }

@media (max-width: 510px) {
  .hard-status { top: 34px; left: 14px; right: 14px; }
}