.su-modes { display: flex; justify-content: center; gap: 6px; margin: 10px 0; }
.su-mode { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.su-mode[aria-pressed="true"] { background: linear-gradient(135deg, #a78bfa, #22d3ee); color: #0b1024; border-color: transparent; }
.su-board { --size: min(100%, 460px, calc(100vh - 345px)); width: max(290px, var(--size)); aspect-ratio: 1; margin: 0 auto; }
.su-grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); width: 100%; height: 100%; border: 2px solid #c9cbe8; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
.su-cell { appearance: none; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: #7dd3fc; display: grid; place-items: center; padding: 0; min-width: 0; min-height: 0; font: inherit; font-size: clamp(17px, 5.2vw, 25px); font-weight: 600; cursor: pointer; }
.su-cell:nth-child(9n) { border-right: 0; }
.su-cell:nth-child(n+73) { border-bottom: 0; }
.su-cell.br { border-right: 2px solid #c9cbe8; }
.su-cell.bb { border-bottom: 2px solid #c9cbe8; }
.su-cell.given { color: var(--text); font-weight: 800; }
.su-cell.hinted { color: #fde047; }
.su-cell.peer { background: rgba(255, 255, 255, 0.07); }
.su-cell.same { background: rgba(167, 139, 250, 0.32); }
.su-cell.sel { background: rgba(34, 211, 238, 0.42); }
.su-cell.wrong { color: #fda4af; background: rgba(244, 63, 94, 0.28); }
.su-cell.sel.wrong { background: rgba(244, 63, 94, 0.5); }
.su-cell:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.su-notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 1px; }
.su-notes i { display: grid; place-items: center; font-style: normal; font-size: clamp(8px, 2.2vw, 11px); font-weight: 700; color: var(--muted); line-height: 1; }
.su-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; max-width: 460px; margin: 10px auto 8px; }
.su-num { appearance: none; height: 56px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; font: inherit; cursor: pointer; }
.su-num b { font-size: 21px; line-height: 1; }
.su-num small { font-size: 10px; color: var(--muted); min-height: 11px; line-height: 1; }
.su-num:active { background: rgba(34, 211, 238, 0.25); }
.su-num:disabled { opacity: 0.25; cursor: default; }
#btn-notes[aria-pressed="true"] { border-color: #22d3ee; color: #22d3ee; }
.game .controls .ctrl { min-width: 0; flex: 1 1 0; max-width: 110px; }
.su-tip { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 10px; }
@media (pointer: coarse) { .su-tip { display: none; } }